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

pierov pushed a commit to branch tor-browser-91.11.0esr-12.0-1 in repository tor-browser.

The following commit(s) were added to refs/heads/tor-browser-91.11.0esr-12.0-1 by this push: new 1919f10f7bce9 fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection 1919f10f7bce9 is described below

commit 1919f10f7bce95efc69748afac19b9d74cb2c22c Author: Pier Angelo Vendrame pierov@torproject.org AuthorDate: Wed Jul 20 10:58:57 2022 +0200

fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 41054: Improve color contrast of purple elements in connection settings in dark theme Bug 41058: Hide `currentBridges` description when the section itself is hidden

Also, adjust the height of bridge cards when updating the connected status.

Changed substr with substring and removed some unnecessary async.

Updated the connected bridge check to the proton one.

Fixed the refresh icon in the BridgeDB modal.

Fixed the color of the trash icon in the dark mode. --- .../torpreferences/content/connectionPane.js | 33 +++++++++++++++------- .../torpreferences/content/connectionPane.xhtml | 4 +-- .../torpreferences/content/torPreferences.css | 30 ++++++++++++++++---- 3 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/browser/components/torpreferences/content/connectionPane.js b/browser/components/torpreferences/content/connectionPane.js index 6162ca37e8faf..e3125c850708e 100644 --- a/browser/components/torpreferences/content/connectionPane.js +++ b/browser/components/torpreferences/content/connectionPane.js @@ -110,7 +110,8 @@ const gConnectionPane = (function() { chooseForMe: "#torPreferences-bridges-buttonChooseBridgeForMe", currentHeader: "#torPreferences-currentBridges-header", currentHeaderText: "#torPreferences-currentBridges-headerText", - currentDescriptionText: "#torPreferences-currentBridges-description", + currentDescription: "#torPreferences-currentBridges-description", + currentDescriptionText: "#torPreferences-currentBridges-descriptionText", switch: "#torPreferences-currentBridges-switch", cards: "#torPreferences-currentBridges-cards", cardTemplate: "#torPreferences-bridgeCard-template", @@ -259,7 +260,7 @@ const gConnectionPane = (function() { "label", TorStrings.settings.statusInternetTest ); - internetTest.addEventListener("command", async () => { + internetTest.addEventListener("command", () => { this.onInternetTest(); }); const internetIcon = prefpane.querySelector( @@ -435,7 +436,10 @@ const gConnectionPane = (function() { this._populateBridgeCards(); }); }); - prefpane.querySelector( + const bridgeDescription = prefpane.querySelector( + selectors.bridges.currentDescription + ); + bridgeDescription.querySelector( selectors.bridges.currentDescriptionText ).textContent = TorStrings.settings.bridgeCurrentDescription; const bridgeTemplate = prefpane.querySelector( @@ -596,8 +600,8 @@ const gConnectionPane = (function() { try { const container = card.querySelector(selectors.bridges.cardQr); const style = getComputedStyle(container); - const width = style.width.substr(0, style.width.length - 2); - const height = style.height.substr(0, style.height.length - 2); + const width = style.width.substring(0, style.width.length - 2); + const height = style.height.substring(0, style.height.length - 2); new QRCode(container, { text: bridgeString, width, @@ -621,7 +625,10 @@ const gConnectionPane = (function() { // Expanded cards have the height set manually to their details for // the CSS animation. However, when resizing the window, we may need // to adjust their height. - if (card.classList.contains("expanded")) { + if ( + card.classList.contains("expanded") || + card.classList.contains("currently-connected") + ) { const grid = card.querySelector(selectors.bridges.cardQrGrid); // Reset it first, to avoid having a height that is higher than // strictly needed. Also, remove the to-animate class, because the @@ -644,13 +651,14 @@ const gConnectionPane = (function() { removeAll.addEventListener("command", () => { this._confirmBridgeRemoval(); }); - this._populateBridgeCards = async () => { + this._populateBridgeCards = () => { const collapseThreshold = 4;

let newStrings = new Set(TorSettings.bridges.bridge_strings); const numBridges = newStrings.size; if (!newStrings.size) { bridgeHeader.setAttribute("hidden", "true"); + bridgeDescription.setAttribute("hidden", "true"); bridgeCards.setAttribute("hidden", "true"); showAll.setAttribute("hidden", "true"); removeAll.setAttribute("hidden", "true"); @@ -658,6 +666,7 @@ const gConnectionPane = (function() { return; } bridgeHeader.removeAttribute("hidden"); + bridgeDescription.removeAttribute("hidden"); bridgeCards.removeAttribute("hidden"); bridgeSwitch.checked = TorSettings.bridges.enabled; bridgeCards.classList.toggle("disabled", !TorSettings.bridges.enabled); @@ -731,7 +740,7 @@ const gConnectionPane = (function() { const annotations = await res.json(); const bcp47 = Services.locale.appLocaleAsBCP47; const dash = bcp47.indexOf("-"); - const lang = dash !== -1 ? bcp47.substr(dash) : bcp47; + const lang = dash !== -1 ? bcp47.substring(dash) : bcp47; if (bcp47 in annotations) { emojiAnnotations = annotations[bcp47]; } else if (lang in annotations) { @@ -765,6 +774,7 @@ const gConnectionPane = (function() { const placeholder = document.createElement("span"); bridgeCards.prepend(placeholder); placeholder.replaceWith(...cards); + this._checkBridgeCardsHeight(); }; try { const { controller } = ChromeUtils.import( @@ -798,7 +808,7 @@ const gConnectionPane = (function() { for (const status of circuitStatuses) { if (status.id === event.CircuitID && status.circuit.length) { // The id in the circuit begins with a $ sign - const bridgeId = status.circuit[0][0].substr(1); + const bridgeId = status.circuit[0][0].substring(1); if (bridgeId !== this._currentBridge) { this._currentBridge = bridgeId; this._updateConnectedBridges(); @@ -916,7 +926,7 @@ const gConnectionPane = (function() { init() { this._populateXUL();

- let onUnload = () => { + const onUnload = () => { window.removeEventListener("unload", onUnload); gConnectionPane.uninit(); }; @@ -925,6 +935,9 @@ const gConnectionPane = (function() { window.addEventListener("resize", () => { this._checkBridgeCardsHeight(); }); + window.addEventListener("hashchange", () => { + this._checkBridgeCardsHeight(); + }) },

uninit() { diff --git a/browser/components/torpreferences/content/connectionPane.xhtml b/browser/components/torpreferences/content/connectionPane.xhtml index 3479ac0fcdbf9..82738723ae21a 100644 --- a/browser/components/torpreferences/content/connectionPane.xhtml +++ b/browser/components/torpreferences/content/connectionPane.xhtml @@ -94,8 +94,8 @@ <html:span id="torPreferences-currentBridges-headerText"/> <html:input type="checkbox" id="torPreferences-currentBridges-switch" class="toggle-button"/> </html:h2> - <description flex="1"> - <html:span id="torPreferences-currentBridges-description"/> + <description flex="1" id="torPreferences-currentBridges-description"> + <html:span id="torPreferences-currentBridges-descriptionText"/> </description> <menupopup id="torPreferences-bridgeCard-menu"/> <vbox id="torPreferences-bridgeCard-template" class="torPreferences-bridgeCard"> diff --git a/browser/components/torpreferences/content/torPreferences.css b/browser/components/torpreferences/content/torPreferences.css index 6638db1293b2a..b13cbec1603be 100644 --- a/browser/components/torpreferences/content/torPreferences.css +++ b/browser/components/torpreferences/content/torPreferences.css @@ -149,6 +149,12 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before { fill: var(--purple-60); }

+@media (-moz-toolbar-prefers-color-scheme: dark) { + #torPreferences-status-internet-statusIcon.online, #torPreferences-status-tor-statusIcon.connected { + fill: var(--purple-30); + } +} + #torPreferences-status-internet-status { margin-inline-end: 32px; } @@ -274,12 +280,16 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before {

.torPreferences-bridgeCard-connectedBadge { display: none; - padding: 8px 12px; - border-radius: 16px; - background: rgba(128, 0, 215, 0.1); + margin-inline-end: 12px; color: var(--purple-60); }

+@media (-moz-toolbar-prefers-color-scheme: dark) { + .torPreferences-bridgeCard-connectedBadge { + color: var(--purple-30); + } +} + .currently-connected .torPreferences-bridgeCard-connectedBadge { display: flex; } @@ -287,9 +297,9 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before { .torPreferences-bridgeCard-connectedIcon { margin-inline-start: 1px; margin-inline-end: 7px; - list-style-image: url("chrome://devtools/skin/images/check.svg"); + list-style-image: url("chrome://browser/content/torpreferences/check.svg"); -moz-context-properties: fill; - fill: var(--purple-60); + fill: currentColor; }

.torPreferences-bridgeCard-options { @@ -306,6 +316,11 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before { -moz-context-properties: fill; }

+#torPreferences-bridgeCard-menu menuitem { + fill: currentColor; + -moz-context-properties: fill; +} + .torPreferences-bridgeCard-qrWrapper { grid-area: bridge-qr; display: block; /* So it doesn't stretch the child vertically. */ @@ -445,6 +460,11 @@ button#torPreferences-requestBridge-refreshCaptchaButton { min-width: initial; }

+#torPreferences-requestBridge-refreshCaptchaButton image { + -moz-context-properties: fill; + fill: currentColor; +} + dialog#torPreferences-requestBridge-dialog > hbox { margin-bottom: 1em; }