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
Loading
Loading
Loading
Loading
+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;
    });

+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
+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;