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@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); +}