[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-128.5.0esr-14.5-2] 2 commits: fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in...

19 Dec 2024


      morgan pushed to branch tor-browser-128.5.0esr-14.5-2 at The Tor Project / Applications / Tor Browser
Commits:
46eb7528 by Henry Wilkes at 2024-12-19T11:13:03+00:00
fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
TB 43320: Exclude hidden elements from the settings search.
We hide elements using the `hidden` attribute instead of
`display: none`, which will exclude them from the search.
We also always hide the options menu and screen reader announcement area
using `data-hidden-from-search`.
- - - - -
018492cc by Henry Wilkes at 2024-12-19T11:13:15+00:00
fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
TB 43320: Add duplicate headings that only appear in search results.
These duplicate search headings have the same content but are one
heading level higher, to preserve the heading level hierarchy in a
search result.
- - - - -
3 changed files:
- browser/components/torpreferences/content/connectionPane.js
- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/torPreferences.css
Changes:
=====================================
browser/components/torpreferences/content/connectionPane.js
=====================================
@@ -346,7 +346,7 @@ const gBridgeGrid = {
Services.obs.addObserver(this, TorProviderTopics.BridgeChanged);
-    this._grid.classList.add("grid-active");
+    this._grid.hidden = false;
this._updateConnectedBridge();
   },
@@ -363,7 +363,7 @@ const gBridgeGrid = {
this._forceCloseRowMenus();
-    this._grid.classList.remove("grid-active");
+    this._grid.hidden = true;
Services.obs.removeObserver(this, TorProviderTopics.BridgeChanged);
   },
@@ -1023,7 +1023,7 @@ const gBuiltinBridgesArea = {
Services.obs.addObserver(this, TorProviderTopics.BridgeChanged);
-    this._area.classList.add("built-in-active");
+    this._area.hidden = false;
this._updateBridgeIds();
     this._updateConnectedBridge();
@@ -1038,7 +1038,7 @@ const gBuiltinBridgesArea = {
     }
     this._active = false;
-    this._area.classList.remove("built-in-active");
+    this._area.hidden = true;
Services.obs.removeObserver(this, TorProviderTopics.BridgeChanged);
   },
@@ -1243,11 +1243,19 @@ const gLoxStatus = {
    */
   _detailsArea: null,
   /**
-   * The day counter for the next unlock.
+   * The list items showing the next unlocks.
    *
-   * @type {Element?}
+   * @type {?Object<string, Element>}
+   */
+  _nextUnlockItems: null,
+  /**
+   * The day counter headings for the next unlock.
+   *
+   * One heading is shown during a search, the other is shown otherwise.
+   *
+   * @type {?Element[]}
    */
-  _nextUnlockCounterEl: null,
+  _nextUnlockCounterEls: null,
   /**
    * Shows the number of remaining invites.
    *
@@ -1266,6 +1274,12 @@ const gLoxStatus = {
    * @type {Element?}
    */
   _unlockAlert: null,
+  /**
+   * The list items showing the unlocks.
+   *
+   * @type {?Object<string, Element>}
+   */
+  _unlockItems: null,
   /**
    * The alert title.
    *
@@ -1296,8 +1310,19 @@ const gLoxStatus = {
this._area = document.getElementById("tor-bridges-lox-status");
     this._detailsArea = document.getElementById("tor-bridges-lox-details");
-    this._nextUnlockCounterEl = document.getElementById(
-      "tor-bridges-lox-next-unlock-counter"
+    this._nextUnlockItems = {
+      gainBridges: document.getElementById(
+        "tor-bridges-lox-next-unlock-gain-bridges"
+      ),
+      firstInvites: document.getElementById(
+        "tor-bridges-lox-next-unlock-first-invites"
+      ),
+      moreInvites: document.getElementById(
+        "tor-bridges-lox-next-unlock-more-invites"
+      ),
+    };
+    this._nextUnlockCounterEls = Array.from(
+      document.querySelectorAll(".tor-bridges-lox-next-unlock-counter")
     );
     this._remainingInvitesEl = document.getElementById(
       "tor-bridges-lox-remaining-invites"
@@ -1306,6 +1331,15 @@ const gLoxStatus = {
       "tor-bridges-lox-show-invites-button"
     );
     this._unlockAlert = document.getElementById("tor-bridges-lox-unlock-alert");
+    this._unlockItems = {
+      gainBridges: document.getElementById(
+        "tor-bridges-lox-unlock-alert-gain-bridges"
+      ),
+      newBridges: document.getElementById(
+        "tor-bridges-lox-unlock-alert-new-bridges"
+      ),
+      invites: document.getElementById("tor-bridges-lox-unlock-alert-invites"),
+    };
     this._unlockAlertTitle = document.getElementById(
       "tor-bridge-unlock-alert-title"
     );
@@ -1404,6 +1438,7 @@ const gLoxStatus = {
       return;
     }
     this._loxId = loxId;
+    this._area.hidden = !loxId;
     // We unset _nextUnlock to ensure the areas no longer use the old value for
     // the new loxId.
     this._updateNextUnlock(true);
@@ -1518,8 +1553,8 @@ const gLoxStatus = {
       // Uninitialized or no Lox source.
       // NOTE: This area may already be hidden by the change in Lox source,
       // but we clean up for the next non-empty id.
-      this._area.classList.remove("show-unlock-alert");
-      this._area.classList.remove("show-next-unlock");
+      this._unlockAlert.hidden = true;
+      this._detailsArea.hidden = true;
       return;
     }
@@ -1529,8 +1564,8 @@ const gLoxStatus = {
const pendingEvents = this._pendingEvents;
     const showAlert = !!pendingEvents.length;
-    this._area.classList.toggle("show-unlock-alert", showAlert);
-    this._area.classList.toggle("show-next-unlock", !showAlert);
+    this._unlockAlert.hidden = !showAlert;
+    this._detailsArea.hidden = showAlert;
if (showAlert) {
       // At level 0 and level 1, we do not have any invites.
@@ -1567,6 +1602,7 @@ const gLoxStatus = {
           blockage = true;
         }
       }
+
       let alertTitleId;
       if (levelUp && !blockage) {
         alertTitleId = "tor-bridges-lox-upgrade";
@@ -1585,9 +1621,9 @@ const gLoxStatus = {
         "lox-unlock-upgrade",
         levelUp && !blockage
       );
-      this._unlockAlert.classList.toggle("lox-unlock-new-bridges", blockage);
-      this._unlockAlert.classList.toggle("lox-unlock-gain-bridges", bridgeGain);
-      this._unlockAlert.classList.toggle("lox-unlock-invites", showInvites);
+      this._unlockItems.gainBridges.hidden = !bridgeGain;
+      this._unlockItems.newBridges.hidden = !blockage;
+      this._unlockItems.invites.hidden = !showInvites;
     } else {
       // Show next unlock.
       // Number of days until the next unlock, rounded up.
@@ -1598,29 +1634,42 @@ const gLoxStatus = {
             (24 * 60 * 60 * 1000)
         )
       );
-      document.l10n.setAttributes(
-        this._nextUnlockCounterEl,
-        "tor-bridges-lox-days-until-unlock",
-        { numDays }
-      );
+      for (const counterEl of this._nextUnlockCounterEls) {
+        document.l10n.setAttributes(
+          counterEl,
+          "tor-bridges-lox-days-until-unlock",
+          { numDays }
+        );
+      }
// Gain 2 bridges from level 0 to 1. After that gain invites.
-      const bridgeGain = this._nextUnlock.nextLevel === 1;
-      const firstInvites = this._nextUnlock.nextLevel === 2;
-      const moreInvites = this._nextUnlock.nextLevel > 2;
-
-      this._detailsArea.classList.toggle("lox-next-gain-bridges", bridgeGain);
-      this._detailsArea.classList.toggle(
-        "lox-next-first-invites",
-        firstInvites
-      );
-      this._detailsArea.classList.toggle("lox-next-more-invites", moreInvites);
+      this._nextUnlockItems.gainBridges.hidden =
+        this._nextUnlock.nextLevel !== 1;
+      this._nextUnlockItems.firstInvites.hidden =
+        this._nextUnlock.nextLevel !== 2;
+      this._nextUnlockItems.moreInvites.hidden =
+        this._nextUnlock.nextLevel <= 2;
     }
if (alertHadFocus && !showAlert) {
       // Alert has become hidden, move focus back up to the now revealed details
       // area.
-      this._nextUnlockCounterEl.focus();
+      // NOTE: We have two headings: one shown during a search and one shown
+      // otherwise. We focus the heading that is currently visible.
+      // See tor-browser#43320.
+      // TODO: It might be better if we could use the # named anchor to
+      // re-orient the screen reader position instead of using tabIndex=-1, but
+      // about:preferences currently uses the anchor for showing categories
+      // only. See bugzilla bug 1799153.
+      if (
+        this._nextUnlockCounterEls[0].checkVisibility({
+          visibilityProperty: true,
+        })
+      ) {
+        this._nextUnlockCounterEls[0].focus();
+      } else {
+        this._nextUnlockCounterEls[1].focus();
+      }
     } else if (detailsHadFocus && showAlert) {
       this._unlockAlertButton.focus();
     }
@@ -1642,21 +1691,21 @@ const gLoxStatus = {
       hasInvites = this._haveExistingInvites || !!this._remainingInvites;
     }
-    if (!hasInvites) {
-      if (
-        this._remainingInvitesEl.contains(document.activeElement) ||
-        this._invitesButton.contains(document.activeElement)
-      ) {
-        // About to loose focus.
-        // Unexpected for the lox level to loose all invites.
-        // Move to the top of the details area, which should be visible if we
-        // just had focus.
-        this._nextUnlockCounterEl.focus();
-      }
+    if (
+      !hasInvites &&
+      (this._remainingInvitesEl.contains(document.activeElement) ||
+        this._invitesButton.contains(document.activeElement))
+    ) {
+      // About to loose focus.
+      // Unexpected for the lox level to loose all invites.
+      // Move to the top of the details area, which should be visible if we
+      // just had focus.
+      this._nextUnlockCounterEl.focus();
     }
     // Hide the invite elements if we have no historic invites or a way of
     // creating new ones.
-    this._detailsArea.classList.toggle("lox-has-invites", hasInvites);
+    this._remainingInvitesEl.hidden = !hasInvites;
+    this._invitesButton.hidden = !hasInvites;
if (hasInvites) {
       document.l10n.setAttributes(
@@ -1691,17 +1740,27 @@ const gBridgeSettings = {
    */
   _bridgesEl: null,
   /**
-   * The heading for the bridge settings.
+   * The area for sharing bridge addresses.
    *
    * @type {Element?}
    */
-  _bridgesSettingsHeading: null,
+  _shareEl: null,
+  /**
+   * The two headings for the bridge settings.
+   *
+   * One heading is shown during a search, the other is shown otherwise.
+   *
+   * @type {?Element[]}
+   */
+  _bridgesSettingsHeadings: null,
   /**
-   * The current bridges heading, at the start of the area.
+   * The two headings for the current bridges, at the start of the area.
+   *
+   * One heading is shown during a search, the other is shown otherwise.
    *
    * @type {Element?}
    */
-  _currentBridgesHeading: null,
+  _currentBridgesHeadings: null,
   /**
    * The area for showing no bridges.
    *
@@ -1709,17 +1768,25 @@ const gBridgeSettings = {
    */
   _noBridgesEl: null,
   /**
-   * The heading element for changing bridges.
+   * The heading elements for changing bridges.
    *
-   * @type {Element?}
+   * One heading is shown during a search, the other is shown otherwise.
+   *
+   * @type {?Element[]}
    */
-  _changeHeadingEl: null,
+  _changeHeadingEls: null,
   /**
    * The button for user to provide a bridge address or share code.
    *
    * @type {Element?}
    */
   _userProvideButton: null,
+  /**
+   * A map from the bridge source to its corresponding label.
+   *
+   * @type {?Map<number, Element>}
+   */
+  _sourceLabels: null,
/**
    * Initialize the bridge settings.
@@ -1727,15 +1794,33 @@ const gBridgeSettings = {
   init() {
     gBridgesNotification.init();
-    this._bridgesSettingsHeading = document.getElementById(
-      "torPreferences-bridges-header"
+    this._bridgesSettingsHeadings = Array.from(
+      document.querySelectorAll(".tor-bridges-subcategory-heading")
     );
-    this._currentBridgesHeading = document.getElementById(
-      "tor-bridges-current-heading"
+    this._currentBridgesHeadings = Array.from(
+      document.querySelectorAll(".tor-bridges-current-heading")
     );
     this._bridgesEl = document.getElementById("tor-bridges-current");
     this._noBridgesEl = document.getElementById("tor-bridges-none");
     this._groupEl = document.getElementById("torPreferences-bridges-group");
+
+    this._sourceLabels = new Map([
+      [
+        TorBridgeSource.BuiltIn,
+        document.getElementById("tor-bridges-built-in-label"),
+      ],
+      [
+        TorBridgeSource.UserProvided,
+        document.getElementById("tor-bridges-user-label"),
+      ],
+      [
+        TorBridgeSource.BridgeDB,
+        document.getElementById("tor-bridges-requested-label"),
+      ],
+      [TorBridgeSource.Lox, document.getElementById("tor-bridges-lox-label")],
+    ]);
+    this._shareEl = document.getElementById("tor-bridges-share");
+
     this._toggleButton = document.getElementById("tor-bridges-enabled-toggle");
     // Initially disabled whilst TorSettings may not be initialized.
     this._toggleButton.disabled = true;
@@ -1749,8 +1834,8 @@ const gBridgeSettings = {
       });
     });
-    this._changeHeadingEl = document.getElementById(
-      "tor-bridges-change-heading"
+    this._changeHeadingEls = Array.from(
+      document.querySelectorAll(".tor-bridges-change-heading")
     );
     this._userProvideButton = document.getElementById(
       "tor-bridges-open-user-provide-dialog-button"
@@ -1855,6 +1940,12 @@ const gBridgeSettings = {
    * @type {integer?}
    */
   _bridgeSource: null,
+  /**
+   * Whether the user is encouraged to share their bridge addresses.
+   *
+   * @type {boolean}
+   */
+  _canShare: false,
/**
    * Update _bridgeSource.
@@ -1876,22 +1967,15 @@ const gBridgeSettings = {
       this._bridgesEl.contains(document.activeElement) ||
       this._noBridgesEl.contains(document.activeElement);
-    this._bridgesEl.classList.toggle(
-      "source-built-in",
-      bridgeSource === TorBridgeSource.BuiltIn
-    );
-    this._bridgesEl.classList.toggle(
-      "source-user",
-      bridgeSource === TorBridgeSource.UserProvided
-    );
-    this._bridgesEl.classList.toggle(
-      "source-requested",
-      bridgeSource === TorBridgeSource.BridgeDB
-    );
-    this._bridgesEl.classList.toggle(
-      "source-lox",
-      bridgeSource === TorBridgeSource.Lox
-    );
+    for (const [source, labelEl] of this._sourceLabels.entries()) {
+      labelEl.hidden = source !== bridgeSource;
+    }
+
+    this._canShare =
+      bridgeSource === TorBridgeSource.UserProvided ||
+      bridgeSource === TorBridgeSource.BridgeDB;
+
+    this._shareEl.hidden = !this._canShare;
// Force the menu to close whenever the source changes.
     // NOTE: If the menu had focus then hadFocus will be true, and focus will be
@@ -1937,15 +2021,18 @@ const gBridgeSettings = {
     // Add classes to show or hide the "no bridges" and "Your bridges" sections.
     // NOTE: Before haveBridges is set, neither class is added, so both sections
     // and hidden.
-    this._groupEl.classList.toggle("no-bridges", !haveBridges);
-    this._groupEl.classList.toggle("have-bridges", haveBridges);
+    this._groupEl.classList.add("bridges-initialized");
+    this._bridgesEl.hidden = !haveBridges;
+    this._noBridgesEl.hidden = haveBridges;
-    document.l10n.setAttributes(
-      this._changeHeadingEl,
-      haveBridges
-        ? "tor-bridges-replace-bridges-heading"
-        : "tor-bridges-add-bridges-heading"
-    );
+    for (const headingEl of this._changeHeadingEls) {
+      document.l10n.setAttributes(
+        headingEl,
+        haveBridges
+          ? "tor-bridges-replace-bridges-heading"
+          : "tor-bridges-add-bridges-heading"
+      );
+    }
     document.l10n.setAttributes(
       this._userProvideButton,
       haveBridges ? "tor-bridges-replace-button" : "tor-bridges-add-new-button"
@@ -1964,17 +2051,27 @@ const gBridgeSettings = {
     }
// Make sure we have the latest value for _haveBridges.
-    // We also ensure that the _currentBridgesHeading element is visible before
+    // We also ensure that the _currentBridgesHeadings element is visible before
     // we focus it.
     this._updateHaveBridges();
-    if (this._haveBridges) {
-      // Move focus to the start of the area, which is the heading.
-      // It has tabindex="-1" so should be focusable, even though it is not part
-      // of the usual tab navigation.
-      this._currentBridgesHeading.focus();
+
+    // Move focus to the start of the relevant section, which is a heading.
+    // They have tabindex="-1" so should be focusable, even though they are not
+    // part of the usual tab navigation.
+    // NOTE: We have two headings: one shown during a search and one shown
+    // otherwise. We focus the heading that is currently visible.
+    // See tor-browser#43320.
+    // TODO: It might be better if we could use the # named anchor to
+    // re-orient the screen reader position instead of using tabIndex=-1, but
+    // about:preferences currently uses the anchor for showing categories
+    // only. See bugzilla bug 1799153.
+    const focusHeadings = this._haveBridges
+      ? this._currentBridgesHeadings // The heading above the new bridges.
+      : this._bridgesSettingsHeadings; // The top of the bridge settings.
+    if (focusHeadings[0].checkVisibility({ visibilityProperty: true })) {
+      focusHeadings[0].focus();
     } else {
-      // Move focus to the top of the bridge settings.
-      this._bridgesSettingsHeading.focus();
+      focusHeadings[1].focus();
     }
   },
@@ -2126,10 +2223,7 @@ const gBridgeSettings = {
       });
this._bridgesMenu.addEventListener("showing", () => {
-      const canShare =
-        this._bridgeSource === TorBridgeSource.UserProvided ||
-        this._bridgeSource === TorBridgeSource.BridgeDB;
-      qrItem.hidden = !canShare || !this._canQRBridges;
+      qrItem.hidden = !this._canShare || !this._canQRBridges;
       editItem.hidden = this._bridgeSource !== TorBridgeSource.UserProvided;
     });
=====================================
browser/components/torpreferences/content/connectionPane.xhtml
=====================================
@@ -97,8 +97,8 @@
   <!-- Bridges -->
   <hbox class="subcategory" data-category="paneConnection" hidden="true">
     <html:h1
-      id="torPreferences-bridges-header"
-      class="tor-focusable-heading"
+      id="tor-bridges-subcategory-heading-non-search"
+      class="tor-bridges-subcategory-heading tor-focusable-heading"
       tabindex="-1"
       data-l10n-id="tor-bridges-heading"
     ></html:h1>
@@ -107,7 +107,22 @@
     id="torPreferences-bridges-group"
     data-category="paneConnection"
     hidden="true"
+    aria-labelledby="tor-bridges-subcategory-heading-non-search"
...
+    <!-- Add a search-header that only appears in search results as a substitute
+       - for the hidden h1 element. See tor-browser#43320.
+       - NOTE: Usually the first xul:label will act as the accessible name for
+       - a xul:groubbox element *if* it is not hidden. Since the search-header
+       - is sometimes hidden we need an explicit aria-labelledby anyway.
+       - However, we keep the wrapper xul:label for styling consistency with the
+       - other settings. -->
+    <label class="search-header" hidden="true">
+      <html:h2
+        class="tor-bridges-subcategory-heading tor-focusable-heading"
+        tabindex="-1"
+        data-l10n-id="tor-bridges-heading"
+      ></html:h2>
+    </label>
     <description class="description-deemphasized" flex="1">
       <html:span data-l10n-id="tor-bridges-overview"></html:span>
       <label
@@ -164,8 +179,13 @@
        - See https://github.com/WICG/proposals/issues/112
        -->
     <!-- NOTE: This area is hidden by default, and is only shown temporarily
-       - when a notification is added. -->
-    <html:div id="tor-bridges-update-area" hidden="hidden">
+       - when a notification is added. It should never match with search
+       - queries. -->
+    <html:div
+      id="tor-bridges-update-area"
+      hidden="hidden"
+      data-hidden-from-search="true"
+    >
       <!-- NOTE: This first span's text content will *not* be read out as part
          - of the notification because it does not have an aria-live
          - attribute. Instead it is just here to give context to the following
@@ -182,18 +202,33 @@
         aria-live="polite"
       ></html:span>
     </html:div>
-    <html:div id="tor-bridges-none">
+    <html:div id="tor-bridges-none" hidden="hidden">
       <html:img id="tor-bridges-none-icon" alt="" />
       <html:div data-l10n-id="tor-bridges-none-added"></html:div>
     </html:div>
-    <html:div id="tor-bridges-current">
+    <html:div id="tor-bridges-current" hidden="hidden">
       <html:div id="tor-bridges-current-header-bar">
         <html:h2
-          id="tor-bridges-current-heading"
-          class="tor-focusable-heading"
+          id="tor-bridges-current-heading-non-search"
+          class="tor-bridges-current-heading tor-focusable-heading tor-small-heading tor-non-search-heading"
           tabindex="-1"
           data-l10n-id="tor-bridges-your-bridges"
         ></html:h2>
+        <!-- Add a duplicate search heading.
+           - In a search result the heading h1.tor-bridges-subcategory-heading
+           - will be hidden, and the h2.tor-bridges-subcategory-heading
+           - will be visible.
+           - As such, all headings below h2.tor-bridges-subcategory-heading also
+           - need to shift one lower in heading level to preseve the correct
+           - hierarchy of - heading levels.
+           - In this case we hide the <h2> heading and show the duplicate <h3>
+           - heading instead.
+           - See tor-browser#43320. -->
+        <html:h3
+          class="tor-bridges-current-heading tor-focusable-heading tor-small-heading tor-search-heading"
+          tabindex="-1"
+          data-l10n-id="tor-bridges-your-bridges"
+        ></html:h3>
         <html:span
           id="tor-bridges-user-label"
           class="tor-bridges-source-label"
@@ -221,7 +256,10 @@
           aria-controls="tor-bridges-all-options-menu"
           data-l10n-id="tor-bridges-options-button"
         ></html:button>
-        <html:panel-list id="tor-bridges-all-options-menu">
+        <html:panel-list
+          id="tor-bridges-all-options-menu"
+          data-hidden-from-search="true"
+        >
           <html:panel-item
             id="tor-bridges-options-qr-all-menu-item"
             data-l10n-attrs="accesskey"
@@ -244,7 +282,7 @@
           ></html:panel-item>
         </html:panel-list>
       </html:div>
-      <html:div id="tor-bridges-built-in-display">
+      <html:div id="tor-bridges-built-in-display" hidden="hidden">
         <html:div id="tor-bridges-built-in-type-name"></html:div>
         <html:div
           id="tor-bridges-built-in-connected"
@@ -261,7 +299,8 @@
         id="tor-bridges-grid-display"
         class="tor-bridges-grid"
         role="grid"
-        aria-labelledby="tor-bridges-current-heading"
+        aria-labelledby="tor-bridges-current-heading-non-search"
+        hidden="hidden"
       ></html:div>
       <html:template id="tor-bridges-grid-row-template">
         <html:div class="tor-bridges-grid-row" role="row">
@@ -297,7 +336,10 @@
                 aria-expanded="false"
                 data-l10n-id="tor-bridges-individual-bridge-options-button"
               ></html:button>
-              <html:panel-list class="tor-bridges-individual-options-menu">
+              <html:panel-list
+                class="tor-bridges-individual-options-menu"
+                data-hidden-from-search="true"
+              >
                 <html:panel-item
                   class="tor-bridges-options-qr-one-menu-item"
                   data-l10n-attrs="accesskey"
@@ -318,11 +360,20 @@
           </html:span>
         </html:div>
       </html:template>
-      <html:div id="tor-bridges-share" class="tor-bridges-details-box">
+      <html:div
+        id="tor-bridges-share"
+        class="tor-bridges-details-box"
+        hidden="hidden"
+      >
         <html:h3
-          id="tor-bridges-share-heading"
+          class="tor-bridges-share-heading tor-small-heading tor-non-search-heading"
           data-l10n-id="tor-bridges-share-heading"
         ></html:h3>
+        <!-- Add a duplicate search heading. See tor-browser#43320. -->
+        <html:h4
+          class="tor-bridges-share-heading tor-small-heading tor-search-heading"
+          data-l10n-id="tor-bridges-share-heading"
+        ></html:h4>
         <html:span
           id="tor-bridges-share-description"
           data-l10n-id="tor-bridges-share-description"
@@ -336,68 +387,84 @@
           data-l10n-id="tor-bridges-qr-addresses-button"
         ></html:button>
       </html:div>
-      <html:div id="tor-bridges-lox-status">
+      <html:div id="tor-bridges-lox-status" hidden="hidden">
         <html:div data-l10n-id="tor-bridges-lox-description"></html:div>
         <html:div
           id="tor-bridges-lox-details"
           class="tor-bridges-details-box tor-bridges-lox-box"
+          hidden="hidden"
         >
           <html:img alt="" class="tor-bridges-lox-image-inner" />
           <html:img alt="" class="tor-bridges-lox-image-outer" />
           <html:h3
-            id="tor-bridges-lox-next-unlock-counter"
-            class="tor-bridges-lox-intro tor-focusable-heading"
+            class="tor-bridges-lox-next-unlock-counter tor-small-heading tor-bridges-lox-intro tor-focusable-heading tor-non-search-heading"
             tabindex="-1"
           ></html:h3>
+          <!-- Add a duplicate search heading. See tor-browser#43320. -->
+          <html:h4
+            class="tor-bridges-lox-next-unlock-counter tor-small-heading tor-bridges-lox-intro tor-focusable-heading tor-search-heading"
+            tabindex="-1"
+          ></html:h4>
           <html:ul class="tor-bridges-lox-list">
             <html:li
               id="tor-bridges-lox-next-unlock-gain-bridges"
               class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge"
               data-l10n-id="tor-bridges-lox-unlock-two-bridges"
+              hidden="hidden"
             ></html:li>
             <html:li
               id="tor-bridges-lox-next-unlock-first-invites"
               class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite"
               data-l10n-id="tor-bridges-lox-unlock-first-invites"
+              hidden="hidden"
             ></html:li>
             <html:li
               id="tor-bridges-lox-next-unlock-more-invites"
               class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite"
               data-l10n-id="tor-bridges-lox-unlock-more-invites"
+              hidden="hidden"
             ></html:li>
           </html:ul>
-          <html:div id="tor-bridges-lox-remaining-invites"></html:div>
+          <html:div
+            id="tor-bridges-lox-remaining-invites"
+            hidden="hidden"
+          ></html:div>
           <html:button
             id="tor-bridges-lox-show-invites-button"
             class="tor-bridges-lox-button"
             data-l10n-id="tor-bridges-lox-show-invites-button"
+            hidden="hidden"
           ></html:button>
         </html:div>
         <html:div
           id="tor-bridges-lox-unlock-alert"
           role="alert"
           class="tor-bridges-details-box tor-bridges-lox-box"
+          hidden="hidden"
         >
           <html:img alt="" class="tor-bridges-lox-image-inner" />
           <html:img alt="" class="tor-bridges-lox-image-outer" />
           <html:div
             id="tor-bridge-unlock-alert-title"
-            class="tor-bridges-lox-intro"
+            class="tor-small-heading tor-bridges-lox-intro"
           ></html:div>
           <html:ul class="tor-bridges-lox-list">
             <html:li
               id="tor-bridges-lox-unlock-alert-gain-bridges"
               class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge"
               data-l10n-id="tor-bridges-lox-gained-two-bridges"
+              hidden="hidden"
             ></html:li>
             <html:li
               id="tor-bridges-lox-unlock-alert-new-bridges"
               class="tor-bridges-lox-list-item tor-bridges-lox-list-item-bridge"
               data-l10n-id="tor-bridges-lox-new-bridges"
+              hidden="hidden"
             ></html:li>
             <html:li
               id="tor-bridges-lox-unlock-alert-invites"
               class="tor-bridges-lox-list-item tor-bridges-lox-list-item-invite"
+              hidden="hidden"
             ></html:li>
           </html:ul>
           <html:button
@@ -408,7 +475,14 @@
         </html:div>
       </html:div>
     </html:div>
-    <html:h2 id="tor-bridges-change-heading"></html:h2>
+    <html:h2
+      class="tor-bridges-change-heading tor-medium-heading tor-non-search-heading"
+    ></html:h2>
+    <!-- Add a duplicate search heading. See tor-browser#43320.
+       - This has the same content, but a smaller font. -->
+    <html:h3
+      class="tor-bridges-change-heading tor-small-heading tor-search-heading"
+    ></html:h3>
     <hbox align="center">
       <description
         flex="1"
@@ -428,9 +502,15 @@
       ></html:button>
     </hbox>
     <html:h3
-      id="tor-bridges-provider-heading"
+      class="tor-bridges-provider-heading tor-medium-heading tor-non-search-heading"
       data-l10n-id="tor-bridges-find-more-heading"
     ></html:h3>
+    <!-- Add a duplicate search heading. See tor-browser#43320.
+       - This has the same content, but a smaller font. -->
+    <html:h4
+      class="tor-bridges-provider-heading tor-small-heading tor-search-heading"
+      data-l10n-id="tor-bridges-find-more-heading"
+    ></html:h4>
     <description
       data-l10n-id="tor-bridges-find-more-description"
       class="description-deemphasized"
@@ -511,15 +591,29 @@
<!-- Advanced -->
   <hbox class="subcategory" data-category="paneConnection" hidden="true">
-    <html:h1 data-l10n-id="tor-advanced-settings-heading"></html:h1>
+    <html:h1
+      id="tor-advanced-subcategory-heading-non-search"
+      data-l10n-id="tor-advanced-settings-heading"
+    ></html:h1>
   </hbox>
   <groupbox
     id="torPreferences-advanced-group"
     data-category="paneConnection"
     hidden="true"
+    aria-labelledby="tor-advanced-subcategory-heading-non-search"
...
+    <!-- Add a search-header that only appears in search results as a substitute
+       - for the hidden h1 element. See tor-browser#43320.
+       - NOTE: Usually the first xul:label will act as the accessible name for
+       - a xul:groubbox element *if* it is not hidden. Since the search-header
+       - is sometimes hidden we need an explicit aria-labelledby anyway.
+       - However, we keep the wrapper xul:label for styling consistency with the
+       - other settings. -->
+    <label class="search-header" hidden="true">
+      <html:h2 data-l10n-id="tor-advanced-settings-heading"></html:h2>
+    </label>
     <hbox align="center">
-      <label data-l10n-id="tor-advanced-settings-description" flex="1" />
+      <description data-l10n-id="tor-advanced-settings-description" flex="1" />
       <html:button
         id="torPreferences-advanced-button"
         class="accessory-button"
@@ -527,7 +621,7 @@
       ></html:button>
     </hbox>
     <hbox align="center" data-subcategory="viewlogs">
-      <label data-l10n-id="tor-view-log-description" flex="1" />
+      <description data-l10n-id="tor-view-log-description" flex="1" />
       <html:button
         id="torPreferences-buttonTorLogs"
         class="accessory-button"
=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -118,6 +118,48 @@ button.spoof-button-disabled {
/* Bridge settings */
+.tor-medium-heading {
+  /* Same font size as mozilla preferences h2. */
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+.tor-small-heading {
+  font-size: inherit;
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+/* Hide the tor-search-heading elements when the group's search header is
+ * hidden. These only appear in search results.
+ * See tor-browser#43320.
+ * NOTE: `.search-header[hidden] ~ :is(* .tor-search-heading)` will not match
+ * (possibly because the `~` selector is unsure how to integrate with the
+ * non-compound `* .tor-search-heading` selector). So we need to duplicate the
+ * `.search-header[hidden]` rule. */
+#torPreferences-bridges-group :is(
+  .search-header[hidden] ~ * .tor-search-heading,
+  .search-header[hidden] ~ .tor-search-heading
+) {
+  display: none;
+}
+
+/* Hide the tor-non-search-heading elements when the group's search header is
+ * not hidden. These only appear outside of search results.
+ * See tor-browser#43320. */
+#torPreferences-bridges-group :is(
+  .search-header:not([hidden]) ~ * .tor-non-search-heading,
+  .search-header:not([hidden]) ~ .tor-non-search-heading
+) {
+  display: none;
+}
+
+.tor-focusable-heading {
+  /* Do not occupy more horizontal space than necessary. */
+  width: fit-content;
+}
+
 .tor-focusable-heading:focus-visible {
   outline-offset: var(--in-content-focus-outline-offset);
 }
@@ -182,53 +224,18 @@ button.spoof-button-disabled {
   clip-path: inset(50%);
 }
-#torPreferences-bridges-group:not(.have-bridges, .no-bridges) {
+#torPreferences-bridges-group:not(.bridges-initialized) {
   /* Hide bridge settings whilst not initialized. */
   display: none;
 }
-#torPreferences-bridges-group:not(.have-bridges) #tor-bridges-current {
-  display: none;
-}
-
-#torPreferences-bridges-group:not(.no-bridges) #tor-bridges-none {
-  display: none;
-}
-
-#tor-bridges-current:not(.source-built-in) #tor-bridges-built-in-label {
-  display: none;
-}
-
-#tor-bridges-current:not(.source-user) #tor-bridges-user-label {
-  display: none;
-}
-
-#tor-bridges-current:not(.source-requested) #tor-bridges-requested-label {
-  display: none;
-}
-
-#tor-bridges-current:not(.source-lox) #tor-bridges-lox-label {
-  display: none;
-}
-
-#tor-bridges-current:not(
-  .source-user,
-  .source-requested
-) #tor-bridges-share {
-  display: none;
-}
-
-#tor-bridges-current:not(.source-lox) #tor-bridges-lox-status {
-  display: none;
-}
-
 #tor-bridges-none,
 #tor-bridges-current {
   margin-inline: 0;
   margin-block: 32px;
 }
-#tor-bridges-none {
+#tor-bridges-none:not([hidden]) {
   display: grid;
   justify-items: center;
   text-align: center;
@@ -265,9 +272,7 @@ button.spoof-button-disabled {
   white-space: nowrap;
 }
-#tor-bridges-current-heading {
-  margin: 0;
-  font-size: inherit;
+.tor-bridges-current-heading {
   grid-area: heading;
 }
@@ -282,7 +287,7 @@ button.spoof-button-disabled {
   grid-area: button;
 }
-#tor-bridges-lox-label {
+#tor-bridges-lox-label:not([hidden]) {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -317,7 +322,7 @@ button.spoof-button-disabled {
   fill: currentColor;
 }
-#tor-bridges-built-in-display {
+#tor-bridges-built-in-display:not([hidden]) {
   display: grid;
   grid-template:
     "type status" min-content
@@ -327,10 +332,6 @@ button.spoof-button-disabled {
   margin-block-end: 16px;
 }
-#tor-bridges-built-in-display:not(.built-in-active) {
-  display: none;
-}
-
 #tor-bridges-built-in-type-name {
   font-weight: 700;
   grid-area: type;
@@ -345,7 +346,7 @@ button.spoof-button-disabled {
   grid-area: description;
 }
-.tor-bridges-grid {
+.tor-bridges-grid:not([hidden]) {
   display: grid;
   grid-template-columns: max-content repeat(4, max-content) 1fr;
   --tor-bridges-grid-column-gap: 8px;
@@ -355,10 +356,6 @@ button.spoof-button-disabled {
   align-items: stretch;
 }
-#tor-bridges-grid-display:not(.grid-active) {
-  display: none;
-}
-
 .tor-bridges-grid-row {
   /* We want each row to act as a row of three items in the
    * .tor-bridges-grid grid layout.
@@ -483,7 +480,7 @@ button.spoof-button-disabled {
   padding: 16px;
 }
-#tor-bridges-share {
+#tor-bridges-share:not([hidden]) {
   display: grid;
   grid-template:
     "heading heading heading" min-content
@@ -496,12 +493,9 @@ button.spoof-button-disabled {
   align-items: center;
 }
-#tor-bridges-share-heading {
+.tor-bridges-share-heading {
   grid-area: heading;
-  font-size: inherit;
-  margin: 0;
   margin-block-end: 4px;
-  font-weight: 700;
 }
#tor-bridges-share-description {
@@ -538,15 +532,7 @@ button.spoof-button-disabled {
   margin-block-start: 8px;
 }
-#tor-bridges-lox-status:not(.show-next-unlock) #tor-bridges-lox-details {
-  display: none;
-}
-
-#tor-bridges-lox-status:not(.show-unlock-alert) #tor-bridges-lox-unlock-alert {
-  display: none;
-}
-
-.tor-bridges-lox-box {
+.tor-bridges-lox-box:not([hidden]) {
   display: grid;
   grid-template:
     "image intro intro" min-content
@@ -601,11 +587,8 @@ button.spoof-button-disabled {
.tor-bridges-lox-intro {
   grid-area: intro;
-  font-weight: 700;
-  font-size: inherit;
   align-self: center;
   justify-self: start;
-  margin: 0;
 }
.tor-bridges-lox-list {
@@ -619,11 +602,11 @@ button.spoof-button-disabled {
   gap: 8px 0;
 }
-.tor-bridges-lox-list-item {
+.tor-bridges-lox-list-item:not([hidden]) {
   display: contents;
 }
-.tor-bridges-lox-list-item::before {
+.tor-bridges-lox-list-item:not([hidden])::before {
   /* We use ::before rather than list-style-image to have more control. */
   box-sizing: content-box;
   width: 18px;
@@ -655,52 +638,19 @@ button.spoof-button-disabled {
   stroke: var(--in-content-success-icon-color);
 }
-#tor-bridges-lox-details:not(.lox-next-gain-bridges) #tor-bridges-lox-next-unlock-gain-bridges {
-  display: none;
-}
-
-#tor-bridges-lox-details:not(.lox-next-first-invites) #tor-bridges-lox-next-unlock-first-invites {
-  display: none;
-}
-
-#tor-bridges-lox-details:not(.lox-next-more-invites) #tor-bridges-lox-next-unlock-more-invites {
-  display: none;
-}
-
-
-#tor-bridges-lox-unlock-alert:not(.lox-unlock-gain-bridges) #tor-bridges-lox-unlock-alert-gain-bridges {
-  display: none;
-}
-
-#tor-bridges-lox-unlock-alert:not(.lox-unlock-new-bridges) #tor-bridges-lox-unlock-alert-new-bridges {
-  display: none;
-}
-
-#tor-bridges-lox-unlock-alert:not(.lox-unlock-invites) #tor-bridges-lox-unlock-alert-invites {
-  display: none;
-}
-
 #tor-bridges-lox-remaining-invites {
   grid-area: invites;
   justify-self: end;
   align-self: center;
 }
-#tor-bridges-lox-details:not(.lox-has-invites) :is(
-  #tor-bridges-lox-remaining-invites,
-  #tor-bridges-lox-show-invites-button
-) {
-  display: none;
-}
-
 .tor-bridges-lox-button {
   grid-area: button;
   margin: 0;
   align-self: center;
 }
-#tor-bridges-provider-heading {
-  font-size: 1.14em;
+.tor-bridges-provider-heading {
   margin-block: 48px 8px;
 }
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/87cdcd5...
-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/87cdcd5...
You're receiving this email because of your account on gitlab.torproject.org.





    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

[tbb-commits] [Git][tpo/applications/tor-browser][tor-browser-128.5.0esr-14.5-2] 2 commits: fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in...