[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-115.2.0esr-13.0-1] 2 commits: fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in...

[richard (@richard)]

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/db6f2f8f36749f5fa7ec72b137292647f557c2b2...3507dd2cd914c3a7f7fb0a066171f4a07f483ba1

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/db6f2f8f36749f5fa7ec72b137292647f557c2b2...3507dd2cd914c3a7f7fb0a066171f4a07f483ba1
You're receiving this email because of your account on gitlab.torproject.org.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tbb-commits/attachments/20230830/171d39a7/attachment-0001.htm>