Commit c7c8f6ac authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in... 

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.
parent 4f5c0355

browser/components/torpreferences/content/connectionPane.js

+76 −39
Original line number Diff line number Diff line
@@ -1249,11 +1249,13 @@ const gLoxStatus = { 
   */

  _nextUnlockItems: null,

  /**

   * The day counter for the next unlock.

   * The day counter headings for the next unlock.

   *

   * @type {Element?}

   * One heading is shown during a search, the other is shown otherwise.

   *

   * @type {?Element[]}

   */

  _nextUnlockCounterEl: null,

  _nextUnlockCounterEls: null,

  /**

   * Shows the number of remaining invites.

   *
@@ -1319,8 +1321,8 @@ const gLoxStatus = { 
        "tor-bridges-lox-next-unlock-more-invites"

      ),

    };

    this._nextUnlockCounterEl = document.getElementById(

      "tor-bridges-lox-next-unlock-counter"

    this._nextUnlockCounterEls = Array.from(

      document.querySelectorAll(".tor-bridges-lox-next-unlock-counter")

    );

    this._remainingInvitesEl = document.getElementById(

      "tor-bridges-lox-remaining-invites"
@@ -1632,11 +1634,13 @@ const gLoxStatus = { 
            (24 * 60 * 60 * 1000)

        )

      );

      for (const counterEl of this._nextUnlockCounterEls) {

        document.l10n.setAttributes(

        this._nextUnlockCounterEl,

          counterEl,

          "tor-bridges-lox-days-until-unlock",

          { numDays }

        );

      }



      // Gain 2 bridges from level 0 to 1. After that gain invites.

      this._nextUnlockItems.gainBridges.hidden =
@@ -1650,7 +1654,22 @@ const gLoxStatus = { 
    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();

    }
@@ -1727,17 +1746,21 @@ const gBridgeSettings = { 
   */

  _shareEl: null,

  /**

   * The heading for the bridge settings.

   * The two headings for the bridge settings.

   *

   * @type {Element?}

   * One heading is shown during a search, the other is shown otherwise.

   *

   * @type {?Element[]}

   */

  _bridgesSettingsHeading: null,

  _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.

   *
@@ -1745,11 +1768,13 @@ 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.

   *
@@ -1769,11 +1794,11 @@ 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");
@@ -1809,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"
@@ -2000,12 +2025,14 @@ const gBridgeSettings = { 
    this._bridgesEl.hidden = !haveBridges;

    this._noBridgesEl.hidden = haveBridges;



    for (const headingEl of this._changeHeadingEls) {

      document.l10n.setAttributes(

      this._changeHeadingEl,

        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"
@@ -2024,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();

    }

  },

browser/components/torpreferences/content/connectionPane.xhtml

+80 −14
Original line number Diff line number Diff line
@@ -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
@@ -194,11 +209,26 @@ 
    <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"
@@ -269,7 +299,7 @@ 
        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">
@@ -336,9 +366,14 @@ 
        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"
@@ -362,10 +397,14 @@ 
          <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"
@@ -407,7 +446,7 @@ 
          <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
@@ -436,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"
@@ -456,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"
@@ -539,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"
@@ -555,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

+45 −12
Original line number Diff line number Diff line
@@ -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);

}
@@ -230,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;

}
@@ -453,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 {
@@ -550,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 {
@@ -616,8 +650,7 @@ button.spoof-button-disabled { 
  align-self: center;

}



#tor-bridges-provider-heading {

  font-size: 1.14em;

.tor-bridges-provider-heading {

  margin-block: 48px 8px;

}