richard pushed to branch tor-browser-115.2.0esr-13.0-1 at The Tor Project / Applications / Tor Browser

Commits: f7b33748 by Henry Wilkes at 2023-08-30T16:55:18+00:00 fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 41651: Use moz-toggle for enable-bridges switch.

- - - - - 3507dd2c by Henry Wilkes at 2023-08-30T16:55:18+00:00 fixup! Customize moz-toggle for tor-browser.

Bug 41651: Use moz-toggle for enable-bridges switch.

- - - - -

4 changed files:

- browser/components/torpreferences/content/connectionPane.js - browser/components/torpreferences/content/connectionPane.xhtml - browser/components/torpreferences/content/torPreferences.css - toolkit/content/widgets/moz-toggle/moz-toggle.mjs

Changes:

===================================== browser/components/torpreferences/content/connectionPane.js ===================================== @@ -99,7 +99,6 @@ const gConnectionPane = (function () { currentHeader: "#torPreferences-currentBridges-header", currentDescription: "#torPreferences-currentBridges-description", currentDescriptionText: "#torPreferences-currentBridges-descriptionText", - switchLabel: "#torPreferences-currentBridges-enableAll-label", switch: "#torPreferences-currentBridges-switch", cards: "#torPreferences-currentBridges-cards", cardTemplate: "#torPreferences-bridgeCard-template", @@ -391,11 +390,10 @@ const gConnectionPane = (function () { selectors.bridges.currentHeader ); bridgeHeader.textContent = TorStrings.settings.bridgeCurrent; - prefpane.querySelector(selectors.bridges.switchLabel).textContent = - TorStrings.settings.allBridgesEnabled; const bridgeSwitch = prefpane.querySelector(selectors.bridges.switch); - bridgeSwitch.addEventListener("change", () => { - TorSettings.bridges.enabled = bridgeSwitch.checked; + bridgeSwitch.setAttribute("label", TorStrings.settings.allBridgesEnabled); + bridgeSwitch.addEventListener("toggle", () => { + TorSettings.bridges.enabled = bridgeSwitch.pressed; TorSettings.saveToPrefs(); TorSettings.applySettings().then(result => { this._populateBridgeCards(); @@ -525,7 +523,7 @@ const gConnectionPane = (function () { strings.splice(index, 1); } TorSettings.bridges.enabled = - bridgeSwitch.checked && !!strings.length; + bridgeSwitch.pressed && !!strings.length; TorSettings.bridges.bridge_strings = strings.join("\n"); TorSettings.saveToPrefs(); TorSettings.applySettings().then(result => { @@ -642,7 +640,9 @@ const gConnectionPane = (function () { bridgeHeader.hidden = false; bridgeDescription.hidden = false; bridgeCards.hidden = false; - bridgeSwitch.checked = TorSettings.bridges.enabled; + // Changing the pressed property on moz-toggle should not trigger its + // "toggle" event. + bridgeSwitch.pressed = TorSettings.bridges.enabled; bridgeCards.classList.toggle("disabled", !TorSettings.bridges.enabled); bridgeCards.classList.toggle("single-card", numBridges === 1);

===================================== browser/components/torpreferences/content/connectionPane.xhtml ===================================== @@ -108,16 +108,10 @@ <html:span id="torPreferences-currentBridges-descriptionText" /> </description> <hbox align="center"> - <html:input - type="checkbox" + <html:moz-toggle id="torPreferences-currentBridges-switch" - class="toggle-button" + label-align-after="" /> - <html:label - id="torPreferences-currentBridges-enableAll-label" - for="torPreferences-currentBridges-switch" - > - </html:label> <spacer flex="1" /> <button id="torPreferences-currentBridges-removeAll" /> </hbox>

===================================== browser/components/torpreferences/content/torPreferences.css ===================================== @@ -5,11 +5,6 @@ list-style-image: url("chrome://browser/content/torconnect/tor-connect.svg"); }

-html:dir(rtl) input[type="checkbox"].toggle-button::before { - /* For some reason, the rule from toggle-button.css is not applied... */ - scale: -1; -} - /* Status */

#torPreferences-status-box { @@ -83,12 +78,6 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before { font-weight: 700; }

-#torPreferences-currentBridges-enableAll-label { - /* Block display to work with parent's xul box layout. */ - display: block; - margin-inline: 6px; -} - /* Bridge cards */ :root { --bridgeCard-animation-time: 0.25s;

===================================== toolkit/content/widgets/moz-toggle/moz-toggle.mjs ===================================== @@ -36,6 +36,8 @@ export default class MozToggle extends MozLitElement { accessKey: { type: String, attribute: "accesskey" }, // Extension for tor-browser. Used for tor-browser#41333. title: { type: String, attribute: "title" }, + // Extension for tor-browser. Used for tor-browser#40837. + labelAlignAfter: { type: Boolean, attribute: "label-align-after" }, };

static get queries() { @@ -119,9 +121,13 @@ export default class MozToggle extends MozLitElement { // accessible name derived from the label. const label = ariaLabel || this.label; const ariaDescription = label === this.title ? undefined : this.title; + // For tor-browser, we want to be able to place the label after the toggle + // as well. + // Used for the enable-bridges switch tor-browser#40837. + const labelAlignAfter = this.labelAlignAfter; return html` <link rel="stylesheet" href=${this.constructor.stylesheetUrl} /> - ${this.labelTemplate()} + ${labelAlignAfter ? "" : this.labelTemplate()} <button id="moz-toggle-button" part="button" @@ -136,6 +142,7 @@ export default class MozToggle extends MozLitElement { )} @click=${handleClick} ></button> + ${labelAlignAfter ? this.labelTemplate() : ""} ${this.descriptionTemplate()} `; }

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/db6f2f8...