Commit 4f5c0355 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: 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`.
parent 4c3f78b8

browser/components/torpreferences/content/connectionPane.js

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

  },
@@ -1242,6 +1242,12 @@ const gLoxStatus = { 
   * @type {Element?}

   */

  _detailsArea: null,

  /**

   * The list items showing the next unlocks.

   *

   * @type {?Object<string, Element>}

   */

  _nextUnlockItems: null,

  /**

   * The day counter for the next unlock.

   *
@@ -1266,6 +1272,12 @@ const gLoxStatus = { 
   * @type {Element?}

   */

  _unlockAlert: null,

  /**

   * The list items showing the unlocks.

   *

   * @type {?Object<string, Element>}

   */

  _unlockItems: null,

  /**

   * The alert title.

   *
@@ -1296,6 +1308,17 @@ const gLoxStatus = { 


    this._area = document.getElementById("tor-bridges-lox-status");

    this._detailsArea = document.getElementById("tor-bridges-lox-details");

    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._nextUnlockCounterEl = document.getElementById(

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

    );
@@ -1306,6 +1329,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 +1436,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 +1551,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 +1562,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 +1600,7 @@ const gLoxStatus = { 
          blockage = true;

        }

      }



      let alertTitleId;

      if (levelUp && !blockage) {

        alertTitleId = "tor-bridges-lox-upgrade";
@@ -1585,9 +1619,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.
@@ -1605,16 +1639,12 @@ const gLoxStatus = { 
      );



      // 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) {
@@ -1642,10 +1672,10 @@ const gLoxStatus = { 
      hasInvites = this._haveExistingInvites || !!this._remainingInvites;

    }



    if (!hasInvites) {

    if (

        this._remainingInvitesEl.contains(document.activeElement) ||

        this._invitesButton.contains(document.activeElement)

      !hasInvites &&

      (this._remainingInvitesEl.contains(document.activeElement) ||

        this._invitesButton.contains(document.activeElement))

    ) {

      // About to loose focus.

      // Unexpected for the lox level to loose all invites.
@@ -1653,10 +1683,10 @@ const gLoxStatus = { 
      // 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(
@@ -1690,6 +1720,12 @@ const gBridgeSettings = { 
   * @type {Element?}

   */

  _bridgesEl: null,

  /**

   * The area for sharing bridge addresses.

   *

   * @type {Element?}

   */

  _shareEl: null,

  /**

   * The heading for the bridge settings.

   *
@@ -1720,6 +1756,12 @@ const gBridgeSettings = { 
   * @type {Element?}

   */

  _userProvideButton: null,

  /**

   * A map from the bridge source to its corresponding label.

   *

   * @type {?Map<number, Element>}

   */

  _sourceLabels: null,



  /**

   * Initialize the bridge settings.
@@ -1736,6 +1778,24 @@ const gBridgeSettings = { 
    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;
@@ -1855,6 +1915,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 +1942,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,8 +1996,9 @@ 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,
@@ -2126,10 +2186,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

+38 −10
Original line number Diff line number Diff line
@@ -164,8 +164,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,11 +187,11 @@ 
        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"
@@ -221,7 +226,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 +252,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"
@@ -262,6 +270,7 @@ 
        class="tor-bridges-grid"

        role="grid"

        aria-labelledby="tor-bridges-current-heading"

        hidden="hidden"

      ></html:div>

      <html:template id="tor-bridges-grid-row-template">

        <html:div class="tor-bridges-grid-row" role="row">
@@ -297,7 +306,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,7 +330,11 @@ 
          </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"

          data-l10n-id="tor-bridges-share-heading"
@@ -336,11 +352,12 @@ 
          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" />
@@ -354,29 +371,37 @@ 
              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" />
@@ -389,15 +414,18 @@ 
              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

browser/components/torpreferences/content/torPreferences.css

+9 −92
Original line number Diff line number Diff line
@@ -182,53 +182,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;
@@ -282,7 +247,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 +282,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 +292,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 +306,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 +316,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 +440,7 @@ button.spoof-button-disabled { 
  padding: 16px;

}



#tor-bridges-share {

#tor-bridges-share:not([hidden]) {

  display: grid;

  grid-template:

    "heading heading heading" min-content
@@ -538,15 +495,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
@@ -619,11 +568,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,44 +604,12 @@ 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;