[tor-commits] [tor-browser] 24/33: fixup! squash! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

[gitolite role]

This is an automated email from the git hooks/post-receive script.

richard pushed a commit to branch tor-browser-91.9.0esr-11.5-1
in repository tor-browser.

commit ac854d83775dd48be36fa74c49c4283dcdc4c0bf
Author: Pier Angelo Vendrame <pierov at torproject.org>
AuthorDate: Thu Apr 14 17:12:40 2022 +0200

    fixup! squash! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
    
    Bug 40883: ask for confirmation before removing all bridges
---
 .../torpreferences/content/connectionPane.js       | 43 +++++++++-
 .../torpreferences/content/connectionPane.xhtml    | 14 ++++
 .../torpreferences/content/torPreferences.css      | 91 ++++++++++++++++++++++
 3 files changed, 146 insertions(+), 2 deletions(-)

diff --git a/browser/components/torpreferences/content/connectionPane.js b/browser/components/torpreferences/content/connectionPane.js
index 552ddb85e8a83..727ac98d17606 100644
--- a/browser/components/torpreferences/content/connectionPane.js
+++ b/browser/components/torpreferences/content/connectionPane.js
@@ -135,6 +135,13 @@ const gConnectionPane = (function() {
       requestButton: "#torPreferences-addBridge-buttonRequestBridge",
       enterLabel: "#torPreferences-addBridge-labelEnterBridge",
       enterButton: "#torPreferences-addBridge-buttonEnterBridge",
+      removeOverlay: "#bridge-remove-overlay",
+      removeModal: "#bridge-remove-modal",
+      removeDismiss: "#bridge-remove-dismiss",
+      removeQuestion: "#bridge-remove-question",
+      removeWarning: "#bridge-remove-warning",
+      removeConfirm: "#bridge-remove-confirm",
+      removeCancel: "#bridge-remove-cancel",
     },
     advanced: {
       header: "h1#torPreferences-advanced-header",
@@ -612,7 +619,7 @@ const gConnectionPane = (function() {
       const removeAll = prefpane.querySelector(selectors.bridges.removeAll);
       removeAll.setAttribute("label", TorStrings.settings.bridgeRemoveAll);
       removeAll.addEventListener("command", () => {
-        this.onRemoveAllBridges();
+        this._confirmBridgeRemoval();
       });
       this._populateBridgeCards = async () => {
         const collapseThreshold = 4;
@@ -802,7 +809,37 @@ const gConnectionPane = (function() {
         });
       }
 
-      Services.obs.addObserver(this, TorConnectTopics.StateChange);
+      {
+        const overlay = prefpane.querySelector(selectors.bridges.removeOverlay);
+        this._confirmBridgeRemoval = () => {
+          overlay.classList.remove("hidden");
+        };
+        const closeDialog = () => {
+          overlay.classList.add("hidden");
+        };
+        overlay.addEventListener("click", closeDialog);
+        const modal = prefpane.querySelector(selectors.bridges.removeModal);
+        modal.addEventListener("click", e => {
+          e.stopPropagation();
+        });
+        const dismiss = prefpane.querySelector(selectors.bridges.removeDismiss);
+        dismiss.addEventListener("click", closeDialog);
+        const question = prefpane.querySelector(
+          selectors.bridges.removeQuestion
+        );
+        question.textContent = TorStrings.settings.removeBridgesQuestion;
+        const warning = prefpane.querySelector(selectors.bridges.removeWarning);
+        warning.textContent = TorStrings.settings.removeBridgesWarning;
+        const confirm = prefpane.querySelector(selectors.bridges.removeConfirm);
+        confirm.setAttribute("label", TorStrings.settings.remove);
+        confirm.addEventListener("command", () => {
+          this.onRemoveAllBridges();
+          closeDialog();
+        });
+        const cancel = prefpane.querySelector(selectors.bridges.removeCancel);
+        cancel.setAttribute("label", TorStrings.settings.cancel);
+        cancel.addEventListener("command", closeDialog);
+      }
 
       // Advanced setup
       prefpane.querySelector(selectors.advanced.header).innerText =
@@ -831,6 +868,8 @@ const gConnectionPane = (function() {
       torLogsButton.addEventListener("command", () => {
         this.onViewTorLogs();
       });
+
+      Services.obs.addObserver(this, TorConnectTopics.StateChange);
     },
 
     init() {
diff --git a/browser/components/torpreferences/content/connectionPane.xhtml b/browser/components/torpreferences/content/connectionPane.xhtml
index 67f98685d8038..049cf77aa05dc 100644
--- a/browser/components/torpreferences/content/connectionPane.xhtml
+++ b/browser/components/torpreferences/content/connectionPane.xhtml
@@ -174,4 +174,18 @@
     </hbox>
   </box>
 </groupbox>
+
+<html:div id="bridge-remove-overlay" class="hidden">
+  <html:div id="bridge-remove-modal">
+    <html:img id="bridge-remove-dismiss" src="chrome://global/skin/icons/close.svg"/>
+    <html:div id="bridge-remove-icon"/>
+    <html:p id="bridge-remove-question"/>
+    <html:p id="bridge-remove-warning"/>
+    <html:div id="bridge-remove-buttonbar">
+    <button id="bridge-remove-cancel"/>
+    <button id="bridge-remove-confirm"/>
+    </html:div>
+  </html:div>
+</html:div>
+
 </html:template>
diff --git a/browser/components/torpreferences/content/torPreferences.css b/browser/components/torpreferences/content/torPreferences.css
index 02ad792e83161..a081a193d0d1f 100644
--- a/browser/components/torpreferences/content/torPreferences.css
+++ b/browser/components/torpreferences/content/torPreferences.css
@@ -562,3 +562,94 @@ textarea#torPreferences-torDialog-textarea {
   /* 10 lines */
   min-height: 20em;
 }
+
+/* Bridge remove overlay */
+#bridge-remove-overlay {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+#bridge-remove-overlay.hidden {
+  display: none;
+}
+
+#bridge-remove-modal {
+  position: relative;
+  min-width: 250px;
+  max-width: 500px;
+  min-height: 200px;
+  z-index: 2;
+  text-align: center;
+  background: var(--in-content-page-background);
+  box-shadow: var(--shadow-30);
+}
+
+#bridge-remove-dismiss {
+  position: absolute;
+  top: 16px;
+  inset-inline-end: 16px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  -moz-context-properties: fill;
+}
+
+#bridge-remove-dismiss:hover {
+  background-color: var(--in-content-button-background-hover);
+  color: var(--in-content-button-text-color-hover);
+  border: 1px solid var(--in-content-button-border-color-hover);
+  border-radius: 4px;
+}
+
+#bridge-remove-dismiss:hover:active {
+  background-color: var(--in-content-button-background-active);
+}
+
+#bridge-remove-icon {
+  width: 40px;
+  height: 40px;
+  background-image: url("chrome://global/skin/icons/warning.svg");
+  background-size: 40px;
+  margin: 16px auto;
+  fill: currentColor;
+  -moz-context-properties: fill;
+}
+
+#bridge-remove-question {
+  font-size: 150%;
+}
+
+#bridge-remove-warning {
+  color: var(--in-content-deemphasized-text);
+}
+
+#bridge-remove-buttonbar {
+  padding: 16px 32px;
+}
+
+#bridge-remove-buttonbar button {
+  min-width: 140px;
+}
+
+#bridge-remove-confirm {
+  background: var(--in-content-danger-button-background);
+  color: var(--in-content-primary-button-text-color);
+}
+
+#bridge-remove-confirm:hover {
+  background: var(--in-content-danger-button-background-hover);
+  color: var(--in-content-primary-button-text-color-hover);
+  border-color: var(--in-content-primary-button-border-hover);
+}
+
+#bridge-remove-confirm:hover:active {
+  background: var(--in-content-danger-button-background-active);
+}

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.