This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to branch tor-browser-91.11.0esr-11.5-1 in repository tor-browser.
commit 11dff59f1d32a919d051acb976fd5914d71d1193 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 860f3c233cb6c..10c2d0b60b66b 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 964fca1590afc..20e93bedf2f84 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: flex; @@ -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; }