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

29 Jan 2024


      richard pushed to branch tor-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser
Commits:
e16caa30 by Henry Wilkes at 2024-01-29T18:34:30+00:00
fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
Bug 41913: Add basic validation to user provided bridge dialog, and a
confirmation step.
- - - - -
6fe742ee by Henry Wilkes at 2024-01-29T18:34:30+00:00
fixup! Tor Browser strings
Bug 41913: Add strings for user provided bridge dialog.
- - - - -
7abc2cc1 by Henry Wilkes at 2024-01-29T18:34:30+00:00
fixup! Bug 40597: Implement TorSettings module
Bug 41913: Add public validateBridgeLines method.
- - - - -
fd4565d1 by Henry Wilkes at 2024-01-29T18:34:30+00:00
fixup! Add TorStrings module for localization
Bug 41913: Remove old strings for user provided bridge addresses.
- - - - -
12 changed files:
- browser/components/preferences/preferences.xhtml
- + browser/components/torpreferences/content/bridgemoji/BridgeEmoji.js
- browser/components/torpreferences/content/connectionPane.js
- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/provideBridgeDialog.js
- browser/components/torpreferences/content/provideBridgeDialog.xhtml
- browser/components/torpreferences/content/torPreferences.css
- browser/components/torpreferences/jar.mn
- browser/locales/en-US/browser/tor-browser.ftl
- toolkit/modules/TorSettings.sys.mjs
- toolkit/modules/TorStrings.sys.mjs
- toolkit/torbutton/chrome/locale/en-US/settings.properties
Changes:
=====================================
browser/components/preferences/preferences.xhtml
=====================================
@@ -70,6 +70,7 @@
   <script type="module" src="chrome://global/content/elements/moz-support-link.mjs"/>
   <script src="chrome://browser/content/migration/migration-wizard.mjs" type="module"></script>
   <script type="module" src="chrome://global/content/elements/moz-toggle.mjs"/>
+  <script src="chrome://browser/content/torpreferences/bridgemoji/BridgeEmoji.js"/>
 </head>
<html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
=====================================
browser/components/torpreferences/content/bridgemoji/BridgeEmoji.js
=====================================
@@ -0,0 +1,199 @@
+"use strict";
+
+{
+  /**
+   * Element to display a single bridge emoji, with a localized name.
+   */
+  class BridgeEmoji extends HTMLElement {
+    static #activeInstances = new Set();
+    static #observer(subject, topic, data) {
+      if (topic === "intl:app-locales-changed") {
+        BridgeEmoji.#updateEmojiLangCode();
+      }
+    }
+
+    static #addActiveInstance(inst) {
+      if (this.#activeInstances.size === 0) {
+        Services.obs.addObserver(this.#observer, "intl:app-locales-changed");
+        this.#updateEmojiLangCode();
+      }
+      this.#activeInstances.add(inst);
+    }
+
+    static #removeActiveInstance(inst) {
+      this.#activeInstances.delete(inst);
+      if (this.#activeInstances.size === 0) {
+        Services.obs.removeObserver(this.#observer, "intl:app-locales-changed");
+      }
+    }
+
+    /**
+     * The language code for emoji annotations.
+     *
+     * null if unset.
+     *
+     * @type {string?}
+     */
+    static #emojiLangCode = null;
+    /**
+     * A promise that resolves to two JSON structures for bridge-emojis.json and
+     * annotations.json, respectively.
+     *
+     * @type {Promise}
+     */
+    static #emojiPromise = Promise.all([
+      fetch(
+        "chrome://browser/content/torpreferences/bridgemoji/bridge-emojis.json"
+      ).then(response => response.json()),
+      fetch(
+        "chrome://browser/content/torpreferences/bridgemoji/annotations.json"
+      ).then(response => response.json()),
+    ]);
+
+    static #unknownStringPromise = null;
+
+    /**
+     * Update #emojiLangCode.
+     */
+    static async #updateEmojiLangCode() {
+      let langCode;
+      const emojiAnnotations = (await BridgeEmoji.#emojiPromise)[1];
+      // Find the first desired locale we have annotations for.
+      // Add "en" as a fallback.
+      for (const bcp47 of [...Services.locale.appLocalesAsBCP47, "en"]) {
+        langCode = bcp47;
+        if (langCode in emojiAnnotations) {
+          break;
+        }
+        // Remove everything after the dash, if there is one.
+        langCode = bcp47.replace(/-.*/, "");
+        if (langCode in emojiAnnotations) {
+          break;
+        }
+      }
+      if (langCode !== this.#emojiLangCode) {
+        this.#emojiLangCode = langCode;
+        this.#unknownStringPromise = document.l10n.formatValue(
+          "tor-bridges-emoji-unknown"
+        );
+        for (const inst of this.#activeInstances) {
+          inst.update();
+        }
+      }
+    }
+
+    /**
+     * Update the bridge emoji to show their corresponding emoji with an
+     * annotation that matches the current locale.
+     */
+    async update() {
+      if (!this.#active) {
+        return;
+      }
+
+      if (!BridgeEmoji.#emojiLangCode) {
+        // No lang code yet, wait until it is updated.
+        return;
+      }
+
+      const doc = this.ownerDocument;
+      const [unknownString, [emojiList, emojiAnnotations]] = await Promise.all([
+        BridgeEmoji.#unknownStringPromise,
+        BridgeEmoji.#emojiPromise,
+      ]);
+
+      const emoji = emojiList[this.#index];
+      let emojiName;
+      if (!emoji) {
+        // Unexpected.
+        this.#img.removeAttribute("src");
+      } else {
+        const cp = emoji.codePointAt(0).toString(16);
+        this.#img.setAttribute(
+          "src",
+          `chrome://browser/content/torpreferences/bridgemoji/svgs/${cp}.svg`
+        );
+        emojiName = emojiAnnotations[BridgeEmoji.#emojiLangCode][cp];
+      }
+      if (!emojiName) {
+        doc.defaultView.console.error(`No emoji for index ${this.#index}`);
+        emojiName = unknownString;
+      }
+      doc.l10n.setAttributes(this, "tor-bridges-emoji-cell", {
+        emojiName,
+      });
+    }
+
+    /**
+     * The index for this bridge emoji.
+     *
+     * @type {integer?}
+     */
+    #index = null;
+    /**
+     * Whether we are active (i.e. in the DOM).
+     *
+     * @type {boolean}
+     */
+    #active = false;
+    /**
+     * The image element.
+     *
+     * @type {HTMLImgElement?}
+     */
+    #img = null;
+
+    constructor(index) {
+      super();
+      this.#index = index;
+    }
+
+    connectedCallback() {
+      if (!this.#img) {
+        this.#img = this.ownerDocument.createElement("img");
+        this.#img.classList.add("tor-bridges-emoji-icon");
+        this.#img.setAttribute("alt", "");
+        this.appendChild(this.#img);
+      }
+
+      this.#active = true;
+      BridgeEmoji.#addActiveInstance(this);
+      this.update();
+    }
+
+    disconnectedCallback() {
+      this.#active = false;
+      BridgeEmoji.#removeActiveInstance(this);
+    }
+
+    /**
+     * Create four bridge emojis for the given address.
+     *
+     * @param {string} bridgeLine - The bridge address.
+     *
+     * @returns {BridgeEmoji[4]} - The bridge emoji elements.
+     */
+    static createForAddress(bridgeLine) {
+      // JS uses UTF-16. While most of these emojis are surrogate pairs, a few
+      // ones fit one UTF-16 character. So we could not use neither indices,
+      // nor substr, nor some function to split the string.
+      // FNV-1a implementation that is compatible with other languages
+      const prime = 0x01000193;
+      const offset = 0x811c9dc5;
+      let hash = offset;
+      const encoder = new TextEncoder();
+      for (const byte of encoder.encode(bridgeLine)) {
+        hash = Math.imul(hash ^ byte, prime);
+      }
+
+      return [
+        ((hash & 0x7f000000) >> 24) | (hash < 0 ? 0x80 : 0),
+        (hash & 0x00ff0000) >> 16,
+        (hash & 0x0000ff00) >> 8,
+        hash & 0x000000ff,
+      ].map(index => new BridgeEmoji(index));
+    }
+  }
+
+  customElements.define("tor-bridge-emoji", BridgeEmoji);
+}
=====================================
browser/components/torpreferences/content/connectionPane.js
=====================================
@@ -299,12 +299,10 @@ const gBridgeGrid = {
this._active = true;
-    Services.obs.addObserver(this, "intl:app-locales-changed");
     Services.obs.addObserver(this, TorProviderTopics.BridgeChanged);
this._grid.classList.add("grid-active");
-    this._updateEmojiLangCode();
     this._updateConnectedBridge();
   },
@@ -322,7 +320,6 @@ const gBridgeGrid = {
this._grid.classList.remove("grid-active");
-    Services.obs.removeObserver(this, "intl:app-locales-changed");
     Services.obs.removeObserver(this, TorProviderTopics.BridgeChanged);
   },
@@ -337,9 +334,6 @@ const gBridgeGrid = {
           this._updateRows();
         }
         break;
-      case "intl:app-locales-changed":
-        this._updateEmojiLangCode();
-        break;
       case TorProviderTopics.BridgeChanged:
         this._updateConnectedBridge();
         break;
@@ -573,97 +567,6 @@ const gBridgeGrid = {
     }
   },
-  /**
-   * The language code for emoji annotations.
-   *
-   * null if unset.
-   *
-   * @type {string?}
-   */
-  _emojiLangCode: null,
-  /**
-   * A promise that resolves to two JSON structures for bridge-emojis.json and
-   * annotations.json, respectively.
-   *
-   * @type {Promise}
-   */
-  _emojiPromise: Promise.all([
-    fetch(
-      "chrome://browser/content/torpreferences/bridgemoji/bridge-emojis.json"
-    ).then(response => response.json()),
-    fetch(
-      "chrome://browser/content/torpreferences/bridgemoji/annotations.json"
-    ).then(response => response.json()),
-  ]),
-
-  /**
-   * Update _emojiLangCode.
-   */
-  async _updateEmojiLangCode() {
-    let langCode;
-    const emojiAnnotations = (await this._emojiPromise)[1];
-    // Find the first desired locale we have annotations for.
-    // Add "en" as a fallback.
-    for (const bcp47 of [...Services.locale.appLocalesAsBCP47, "en"]) {
-      langCode = bcp47;
-      if (langCode in emojiAnnotations) {
-        break;
-      }
-      // Remove everything after the dash, if there is one.
-      langCode = bcp47.replace(/-.*/, "");
-      if (langCode in emojiAnnotations) {
-        break;
-      }
-    }
-    if (langCode !== this._emojiLangCode) {
-      this._emojiLangCode = langCode;
-      for (const row of this._rows) {
-        this._updateRowEmojis(row);
-      }
-    }
-  },
-
-  /**
-   * Update the bridge emojis to show their corresponding emoji with an
-   * annotation that matches the current locale.
-   *
-   * @param {BridgeGridRow} row - The row to update the emojis of.
-   */
-  async _updateRowEmojis(row) {
-    if (!this._emojiLangCode) {
-      // No lang code yet, wait until it is updated.
-      return;
-    }
-
-    const [emojiList, emojiAnnotations] = await this._emojiPromise;
-    const unknownString = await document.l10n.formatValue(
-      "tor-bridges-emoji-unknown"
-    );
-
-    for (const { cell, img, index } of row.emojis) {
-      const emoji = emojiList[index];
-      let emojiName;
-      if (!emoji) {
-        // Unexpected.
-        img.removeAttribute("src");
-      } else {
-        const cp = emoji.codePointAt(0).toString(16);
-        img.setAttribute(
-          "src",
-          `chrome://browser/content/torpreferences/bridgemoji/svgs/${cp}.svg`
-        );
-        emojiName = emojiAnnotations[this._emojiLangCode][cp];
-      }
-      if (!emojiName) {
-        console.error(`No emoji for index ${index}`);
-        emojiName = unknownString;
-      }
-      document.l10n.setAttributes(cell, "tor-bridges-emoji-cell", {
-        emojiName,
-      });
-    }
-  },
-
   /**
    * Create a new row for the grid.
    *
@@ -688,23 +591,14 @@ const gBridgeGrid = {
     };
const emojiBlock = row.element.querySelector(".tor-bridges-emojis-block");
-    row.emojis = makeBridgeId(bridgeLine).map(index => {
-      const cell = document.createElement("span");
-      // Each emoji is its own cell, we rely on the fact that makeBridgeId
-      // always returns four indices.
+    const BridgeEmoji = customElements.get("tor-bridge-emoji");
+    for (const cell of BridgeEmoji.createForAddress(bridgeLine)) {
+      // Each emoji is its own cell, we rely on the fact that createForAddress
+      // always returns four elements.
       cell.setAttribute("role", "gridcell");
       cell.classList.add("tor-bridges-grid-cell", "tor-bridges-emoji-cell");
-
-      const img = document.createElement("img");
-      img.classList.add("tor-bridges-emoji-icon");
-      // Accessible name will be set on the cell itself.
-      img.setAttribute("alt", "");
-
-      cell.appendChild(img);
-      emojiBlock.appendChild(cell);
-      // Image and text is set in _updateRowEmojis.
-      return { cell, img, index };
-    });
+      emojiBlock.append(cell);
+    }
for (const [columnIndex, element] of row.element
       .querySelectorAll(".tor-bridges-grid-cell")
@@ -735,7 +629,6 @@ const gBridgeGrid = {
     this._initRowMenu(row);
this._updateRowStatus(row);
-    this._updateRowEmojis(row);
     return row;
   },
@@ -1870,13 +1763,13 @@ const gBridgeSettings = {
       "chrome://browser/content/torpreferences/provideBridgeDialog.xhtml",
       { mode },
       result => {
-        if (!result.bridgeStrings) {
+        if (!result.bridges?.length) {
           return null;
         }
         return setTorSettings(() => {
           TorSettings.bridges.enabled = true;
           TorSettings.bridges.source = TorBridgeSource.UserProvided;
-          TorSettings.bridges.bridge_strings = result.bridgeStrings;
+          TorSettings.bridges.bridge_strings = result.bridges;
         });
       }
     );
@@ -2292,32 +2185,3 @@ const gConnectionPane = (function () {
   };
   return retval;
 })(); /* gConnectionPane */
-
-/**
- * Convert the given bridgeString into an array of emoji indices between 0 and
- * 255.
- *
- * @param {string} bridgeString - The bridge string.
- *
- * @returns {integer[]} - A list of emoji indices between 0 and 255.
- */
-function makeBridgeId(bridgeString) {
-  // JS uses UTF-16. While most of these emojis are surrogate pairs, a few
-  // ones fit one UTF-16 character. So we could not use neither indices,
-  // nor substr, nor some function to split the string.
-  // FNV-1a implementation that is compatible with other languages
-  const prime = 0x01000193;
-  const offset = 0x811c9dc5;
-  let hash = offset;
-  const encoder = new TextEncoder();
-  for (const byte of encoder.encode(bridgeString)) {
-    hash = Math.imul(hash ^ byte, prime);
-  }
-
-  return [
-    ((hash & 0x7f000000) >> 24) | (hash < 0 ? 0x80 : 0),
-    (hash & 0x00ff0000) >> 16,
-    (hash & 0x0000ff00) >> 8,
-    hash & 0x000000ff,
-  ];
-}
=====================================
browser/components/torpreferences/content/connectionPane.xhtml
=====================================
@@ -218,6 +218,7 @@
       </html:div>
       <html:div
         id="tor-bridges-grid-display"
+        class="tor-bridges-grid"
         role="grid"
         aria-labelledby="tor-bridges-current-heading"
       ></html:div>
=====================================
browser/components/torpreferences/content/provideBridgeDialog.js
=====================================
@@ -4,14 +4,17 @@ const { TorStrings } = ChromeUtils.importESModule(
   "resource://gre/modules/TorStrings.sys.mjs"
 );
-const { TorSettings, TorBridgeSource } = ChromeUtils.importESModule(
-  "resource://gre/modules/TorSettings.sys.mjs"
-);
+const { TorSettings, TorBridgeSource, validateBridgeLines } =
+  ChromeUtils.importESModule("resource://gre/modules/TorSettings.sys.mjs");
const { TorConnect, TorConnectTopics } = ChromeUtils.importESModule(
   "resource://gre/modules/TorConnect.sys.mjs"
 );
+const { TorParsers } = ChromeUtils.importESModule(
+  "resource://gre/modules/TorParsers.sys.mjs"
+);
+
 const gProvideBridgeDialog = {
   init() {
     this._result = window.arguments[0];
@@ -33,72 +36,264 @@ const gProvideBridgeDialog = {
document.l10n.setAttributes(document.documentElement, titleId);
-    const learnMore = document.createXULElement("label");
-    learnMore.className = "learnMore text-link";
-    learnMore.setAttribute("is", "text-link");
-    learnMore.setAttribute("value", TorStrings.settings.learnMore);
-    learnMore.addEventListener("click", () => {
-      window.top.openTrustedLinkIn(
-        TorStrings.settings.learnMoreBridgesURL,
-        "tab"
-      );
-    });
-
-    const pieces = TorStrings.settings.provideBridgeDescription.split("%S");
-    document
-      .getElementById("torPreferences-provideBridge-description")
-      .replaceChildren(pieces[0], learnMore, pieces[1] || "");
+    document.l10n.setAttributes(
+      document.getElementById("user-provide-bridge-textarea-label"),
+      // TODO change string when we can also accept Lox share codes.
+      "user-provide-bridge-dialog-textarea-addresses-label"
+    );
-    this._textarea = document.getElementById(
-      "torPreferences-provideBridge-textarea"
+    this._dialog = document.getElementById("user-provide-bridge-dialog");
+    this._acceptButton = this._dialog.getButton("accept");
+    this._textarea = document.getElementById("user-provide-bridge-textarea");
+    this._errorEl = document.getElementById(
+      "user-provide-bridge-error-message"
+    );
+    this._resultDescription = document.getElementById(
+      "user-provide-result-description"
+    );
+    this._bridgeGrid = document.getElementById(
+      "user-provide-bridge-grid-display"
     );
-    this._textarea.setAttribute(
-      "placeholder",
-      TorStrings.settings.provideBridgePlaceholder
+    this._rowTemplate = document.getElementById(
+      "user-provide-bridge-row-template"
     );
-    this._textarea.addEventListener("input", () => this.onValueChange());
-    if (TorSettings.bridges.source == TorBridgeSource.UserProvided) {
-      this._textarea.value = TorSettings.bridges.bridge_strings.join("\n");
+    if (mode === "edit") {
+      // Only expected if the bridge source is UseProvided, but verify to be
+      // sure.
+      if (TorSettings.bridges.source == TorBridgeSource.UserProvided) {
+        this._textarea.value = TorSettings.bridges.bridge_strings.join("\n");
+      }
+    } else {
+      // Set placeholder if not editing.
+      document.l10n.setAttributes(
+        this._textarea,
+        // TODO: change string when we can also accept Lox share codes.
+        "user-provide-bridge-dialog-textarea-addresses"
+      );
     }
-    const dialog = document.getElementById(
-      "torPreferences-provideBridge-dialog"
-    );
-    dialog.addEventListener("dialogaccept", e => {
-      this._result.accepted = true;
-    });
+    this._textarea.addEventListener("input", () => this.onValueChange());
-    this._acceptButton = dialog.getButton("accept");
+    this._dialog.addEventListener("dialogaccept", event =>
+      this.onDialogAccept(event)
+    );
Services.obs.addObserver(this, TorConnectTopics.StateChange);
-    this.onValueChange();
-    this.onAcceptStateChange();
+    this.setPage("entry");
+    this.checkValue();
   },
uninit() {
     Services.obs.removeObserver(this, TorConnectTopics.StateChange);
   },
+  /**
+   * Set the page to display.
+   *
+   * @param {string} page - The page to show.
+   */
+  setPage(page) {
+    this._page = page;
+    this._dialog.classList.toggle("show-entry-page", page === "entry");
+    this._dialog.classList.toggle("show-result-page", page === "result");
+    if (page === "entry") {
+      this._textarea.focus();
+    } else {
+      // Move focus to the xul:window element.
+      // In particular, we do not want to keep the focus on the (same) accept
+      // button (with now different text).
+      document.documentElement.focus();
+    }
+
+    this.updateAcceptDisabled();
+    this.onAcceptStateChange();
+  },
+
+  /**
+   * Callback for whenever the input value changes.
+   */
   onValueChange() {
-    // TODO: Do some proper value parsing and error reporting. See
-    // tor-browser#40552.
-    const value = this._textarea.value.trim();
-    this._acceptButton.disabled = !value;
-    this._result.bridgeStrings = value;
+    this.updateAcceptDisabled();
+    // Reset errors whenever the value changes.
+    this.updateError(null);
   },
+  /**
+   * Callback for whenever the accept button may need to change.
+   */
   onAcceptStateChange() {
-    const connect = TorConnect.canBeginBootstrap;
-    this._result.connect = connect;
-
-    this._acceptButton.setAttribute(
-      "label",
-      connect
-        ? TorStrings.settings.bridgeButtonConnect
-        : TorStrings.settings.bridgeButtonAccept
+    if (this._page === "entry") {
+      document.l10n.setAttributes(
+        this._acceptButton,
+        "user-provide-bridge-dialog-next-button"
+      );
+      this._result.connect = false;
+    } else {
+      this._acceptButton.removeAttribute("data-l10n-id");
+      const connect = TorConnect.canBeginBootstrap;
+      this._result.connect = connect;
+
+      this._acceptButton.setAttribute(
+        "label",
+        connect
+          ? TorStrings.settings.bridgeButtonConnect
+          : TorStrings.settings.bridgeButtonAccept
+      );
+    }
+  },
+
+  /**
+   * Callback for whenever the accept button's might need to be disabled.
+   */
+  updateAcceptDisabled() {
+    this._acceptButton.disabled =
+      this._page === "entry" && validateBridgeLines(this._textarea.value).empty;
+  },
+
+  /**
+   * Callback for when the accept button is pressed.
+   *
+   * @param {Event} event - The dialogaccept event.
+   */
+  onDialogAccept(event) {
+    if (this._page === "result") {
+      this._result.accepted = true;
+      // Continue to close the dialog.
+      return;
+    }
+    // Prevent closing the dialog.
+    event.preventDefault();
+
+    const bridges = this.checkValue();
+    if (!bridges.length) {
+      // Not valid
+      return;
+    }
+    this._result.bridges = bridges;
+    this.updateResult();
+    this.setPage("result");
+  },
+
+  /**
+   * The current timeout for updating the error.
+   *
+   * @type {integer?}
+   */
+  _updateErrorTimeout: null,
+
+  /**
+   * Update the displayed error.
+   *
+   * @param {object?} error - The error to show, or null if no error should be
+   *   shown. Should include the "type" property.
+   */
+  updateError(error) {
+    // First clear the existing error.
+    if (this._updateErrorTimeout !== null) {
+      clearTimeout(this._updateErrorTimeout);
+    }
+    this._updateErrorTimeout = null;
+    this._errorEl.removeAttribute("data-l10n-id");
+    this._errorEl.textContent = "";
+    if (error) {
+      this._textarea.setAttribute("aria-invalid", "true");
+    } else {
+      this._textarea.removeAttribute("aria-invalid");
+    }
+    this._textarea.classList.toggle("invalid-input", !!error);
+    this._errorEl.classList.toggle("show-error", !!error);
+
+    if (!error) {
+      return;
+    }
+
+    let errorId;
+    let errorArgs;
+    switch (error.type) {
+      case "invalid-address":
+        errorId = "user-provide-bridge-dialog-address-error";
+        errorArgs = { line: error.line };
+        break;
+    }
+
+    // Wait a small amount of time to actually set the textContent. Otherwise
+    // the screen reader (tested with Orca) may not pick up on the change in
+    // text.
+    this._updateErrorTimeout = setTimeout(() => {
+      document.l10n.setAttributes(this._errorEl, errorId, errorArgs);
+    }, 500);
+  },
+
+  /**
+   * Check the current value in the textarea.
+   *
+   * @returns {string[]} - The bridge addresses, if the entry is valid.
+   */
+  checkValue() {
+    let bridges = [];
+    let error = null;
+    const validation = validateBridgeLines(this._textarea.value);
+    if (!validation.empty) {
+      // If empty, we just disable the button, rather than show an error.
+      if (validation.errorLines.length) {
+        // Report first error.
+        error = {
+          type: "invalid-address",
+          line: validation.errorLines[0],
+        };
+      } else {
+        bridges = validation.validBridges;
+      }
+    }
+    this.updateError(error);
+    return bridges;
+  },
+
+  /**
+   * Update the shown result on the last page.
+   */
+  updateResult() {
+    document.l10n.setAttributes(
+      this._resultDescription,
+      // TODO: Use a different id when added through Lox invite.
+      "user-provide-bridge-dialog-result-addresses"
     );
+
+    this._bridgeGrid.replaceChildren();
+
+    for (const bridgeLine of this._result.bridges) {
+      let details;
+      try {
+        details = TorParsers.parseBridgeLine(bridgeLine);
+      } catch (e) {
+        console.error(`Detected invalid bridge line: ${bridgeLine}`, e);
+      }
+
+      const rowEl = this._rowTemplate.content.children[0].cloneNode(true);
+
+      const emojiBlock = rowEl.querySelector(".tor-bridges-emojis-block");
+      const BridgeEmoji = customElements.get("tor-bridge-emoji");
+      for (const cell of BridgeEmoji.createForAddress(bridgeLine)) {
+        // Each emoji is its own cell, we rely on the fact that createForAddress
+        // always returns four elements.
+        cell.setAttribute("role", "gridcell");
+        cell.classList.add("tor-bridges-grid-cell", "tor-bridges-emoji-cell");
+        emojiBlock.append(cell);
+      }
+
+      // TODO: properly handle "vanilla" bridges?
+      document.l10n.setAttributes(
+        rowEl.querySelector(".tor-bridges-type-cell"),
+        "tor-bridges-type-prefix",
+        { type: details?.transport ?? "vanilla" }
+      );
+
+      rowEl.querySelector(".tor-bridges-address-cell").textContent = bridgeLine;
+
+      this._bridgeGrid.append(rowEl);
+    }
   },
observe(subject, topic, data) {
=====================================
browser/components/torpreferences/content/provideBridgeDialog.xhtml
=====================================
@@ -8,22 +8,77 @@
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:html="http://www.w3.org/1999/xhtml"
...
-  <dialog id="torPreferences-provideBridge-dialog" buttons="accept,cancel">
+  <dialog
+    id="user-provide-bridge-dialog"
+    buttons="accept,cancel"
+    class="show-entry-page"
+  >
     <linkset>
       <html:link rel="localization" href="browser/tor-browser.ftl" />
     </linkset>
+    <script src="chrome://browser/content/torpreferences/bridgemoji/BridgeEmoji.js" />
     <script src="chrome://browser/content/torpreferences/provideBridgeDialog.js" />
-    <description>
-      <html:div id="torPreferences-provideBridge-description"
-        >&#8203;<br />&#8203;</html:div
-      >
-    </description>
-    <html:textarea
-      id="torPreferences-provideBridge-textarea"
-      multiline="true"
-      rows="3"
-    />
+    <html:div id="user-provide-bridge-entry-page">
+      <description id="user-provide-bridge-description">
+        <html:span
+          class="tail-with-learn-more"
+          data-l10n-id="user-provide-bridge-dialog-description"
+        ></html:span>
+        <label
+          is="text-link"
+          class="learnMore text-link"
+          href="about:manual#bridges"
+          useoriginprincipal="true"
+          data-l10n-id="user-provide-bridge-dialog-learn-more"
+        />
+      </description>
+      <html:label
+        id="user-provide-bridge-textarea-label"
+        for="user-provide-bridge-textarea"
+      ></html:label>
+      <html:textarea
+        id="user-provide-bridge-textarea"
+        multiline="true"
+        rows="3"
+        aria-describedby="user-provide-bridge-description"
+        aria-errormessage="user-provide-bridge-error-message"
+      />
+      <html:div id="user-provide-bridge-message-area">
+        <html:span
+          id="user-provide-bridge-error-message"
+          aria-live="assertive"
+        ></html:span>
+      </html:div>
+    </html:div>
+    <html:div id="user-provide-bridge-result-page">
+      <description id="user-provide-result-description" />
+      <!-- NOTE: Unlike #tor-bridge-grid-display, this element is not
+         - interactive, and not a tab-stop. So we use the "table" role rather
+         - than "grid".
+         - NOTE: Using a <html:table> would not allow us the same structural
+         - freedom, so we use a generic div and add the semantics manually. -->
+      <html:div
+        id="user-provide-bridge-grid-display"
+        class="tor-bridges-grid"
+        role="table"
+      ></html:div>
+      <html:template id="user-provide-bridge-row-template">
+        <html:div class="tor-bridges-grid-row" role="row">
+          <html:span
+            class="tor-bridges-type-cell tor-bridges-grid-cell"
+            role="gridcell"
+          ></html:span>
+          <html:span class="tor-bridges-emojis-block" role="none"></html:span>
+          <html:span class="tor-bridges-grid-end-block" role="none">
+            <html:span
+              class="tor-bridges-address-cell tor-bridges-grid-cell"
+              role="gridcell"
+            ></html:span>
+          </html:span>
+        </html:div>
+      </html:template>
+    </html:div>
   </dialog>
 </window>
=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -270,11 +270,14 @@
   grid-area: description;
 }
-#tor-bridges-grid-display {
+.tor-bridges-grid {
   display: grid;
   grid-template-columns: max-content repeat(4, max-content) 1fr;
   --tor-bridges-grid-column-gap: 8px;
   --tor-bridges-grid-column-short-gap: 4px;
+  /* For #tor-bridges-grid-display we want each grid item to have the same
+   * height so that their focus outlines match. */
+  align-items: stretch;
 }
#tor-bridges-grid-display:not(.grid-active) {
@@ -283,11 +286,12 @@
.tor-bridges-grid-row {
   /* We want each row to act as a row of three items in the
-   * #tor-bridges-grid-display grid layout.
+   * .tor-bridges-grid grid layout.
    * We also want a 16px spacing between rows, and 8px spacing between columns,
-   * which are outside the .tor-bridges-grid-cell's border area. So that
-   * clicking these gaps will not focus any item, and their focus outlines do
-   * not overlap.
+   * which are outside the .tor-bridges-grid-cell's border area.
+   *
+   * For #tor-bridges-grid-display this should ensure that clicking these gaps
+   * will not focus any item, and their focus outlines do not overlap.
    * Moreover, we also want each row to show its .tor-bridges-options-cell when
    * the .tor-bridges-grid-row has :hover.
    *
@@ -311,7 +315,8 @@
   padding-block: 8px;
 }
-.tor-bridges-grid-cell:focus-visible {
+#tor-bridges-grid-display .tor-bridges-grid-cell:focus-visible {
+  /* #tor-bridges-grid-display has focus management for its cells. */
   outline: var(--in-content-focus-outline);
   outline-offset: var(--in-content-focus-outline-offset);
 }
@@ -662,8 +667,77 @@ groupbox#torPreferences-bridges-group textarea {
 }
/* Provide bridge dialog */
-#torPreferences-provideBridge-textarea {
-  margin-top: 16px;
+
+#user-provide-bridge-dialog:not(.show-entry-page) #user-provide-bridge-entry-page {
+  display: none;
+}
+
+#user-provide-bridge-dialog:not(.show-result-page) #user-provide-bridge-result-page {
+  display: none;
+}
+
+#user-provide-bridge-entry-page {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+#user-provide-bridge-description {
+  flex: 0 0 auto;
+}
+
+#user-provide-bridge-textarea-label {
+  margin-block: 16px 6px;
+  flex: 0 0 auto;
+  align-self: start;
+}
+
+#user-provide-bridge-textarea {
+  flex: 1 0 auto;
+  align-self: stretch;
+  line-height: 1.3;
+  margin: 0;
+}
+
+#user-provide-bridge-message-area {
+  flex: 0 0 auto;
+  margin-block: 8px 12px;
+  align-self: end;
+}
+
+#user-provide-bridge-message-area::after {
+  /* Zero width space, to ensure we are always one line high. */
+  content: "\200B";
+}
+
+#user-provide-bridge-textarea.invalid-input {
+  border-color: var(--in-content-danger-button-background);
+  outline-color: var(--in-content-danger-button-background);
+}
+
+#user-provide-bridge-error-message {
+  color: var(--in-content-error-text-color);
+}
+
+#user-provide-bridge-error-message.not(.show-error) {
+  display: none;
+}
+
+#user-provide-bridge-result-page {
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+#user-provide-result-description {
+  flex: 0 0 auto;
+}
+
+#user-provide-bridge-grid-display {
+  flex: 0 1 auto;
+  overflow: auto;
+  margin-block: 8px;
 }
/* Connection settings dialog */
=====================================
browser/components/torpreferences/jar.mn
=====================================
@@ -22,6 +22,7 @@ browser.jar:
     content/browser/torpreferences/connectionPane.xhtml              (content/connectionPane.xhtml)
     content/browser/torpreferences/torPreferences.css                (content/torPreferences.css)
     content/browser/torpreferences/bridge-qr-onion-mask.svg          (content/bridge-qr-onion-mask.svg)
+    content/browser/torpreferences/bridgemoji/BridgeEmoji.js         (content/bridgemoji/BridgeEmoji.js)
     content/browser/torpreferences/bridgemoji/bridge-emojis.json     (content/bridgemoji/bridge-emojis.json)
     content/browser/torpreferences/bridgemoji/annotations.json       (content/bridgemoji/annotations.json)
     content/browser/torpreferences/bridgemoji/svgs/                  (content/bridgemoji/svgs/*.svg)
=====================================
browser/locales/en-US/browser/tor-browser.ftl
=====================================
@@ -176,3 +176,19 @@ user-provide-bridge-dialog-add-title =
 # Used when the user is replacing their existing bridges with new ones.
 user-provide-bridge-dialog-replace-title =
     .title = Replace your bridges
+# Description shown when adding new bridges, replacing existing bridges, or editing existing bridges.
+user-provide-bridge-dialog-description = Use bridges provided by a trusted organisation or someone you know.
+# "Learn more" link shown in the "Add new bridges"/"Replace your bridges" dialog.
+user-provide-bridge-dialog-learn-more = Learn more
+# Short accessible name for the bridge addresses text area.
+user-provide-bridge-dialog-textarea-addresses-label = Bridge addresses
+# Placeholder shown when adding new bridge addresses.
+user-provide-bridge-dialog-textarea-addresses =
+    .placeholder = Paste your bridge addresses here
+# Error shown when one of the address lines is invalid.
+# $line (Number) - The line number for the invalid address.
+user-provide-bridge-dialog-address-error = Incorrectly formatted bridge address on line { $line }.
+
+user-provide-bridge-dialog-result-addresses = The following bridges were entered by you.
+user-provide-bridge-dialog-next-button =
+    .label = Next
=====================================
toolkit/modules/TorSettings.sys.mjs
=====================================
@@ -9,6 +9,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
   TorProviderBuilder: "resource://gre/modules/TorProviderBuilder.sys.mjs",
   TorProviderTopics: "resource://gre/modules/TorProviderBuilder.sys.mjs",
   Lox: "resource://gre/modules/Lox.sys.mjs",
+  TorParsers: "resource://gre/modules/TorParsers.sys.mjs",
 });
ChromeUtils.defineLazyGetter(lazy, "logger", () => {
@@ -103,26 +104,61 @@ export const TorProxyType = Object.freeze({
  * Split a blob of bridge lines into an array with single lines.
  * Lines are delimited by \r\n or \n and each bridge string can also optionally
  * have 'bridge' at the beginning.
- * We split the text by \r\n, we trim the lines, remove the bridge prefix and
- * filter out any remaiing empty item.
+ * We split the text by \r\n, we trim the lines, remove the bridge prefix.
  *
- * @param {string} aBridgeStrings The text with the lines
+ * @param {string} bridgeLines The text with the lines
  * @returns {string[]} An array where each bridge line is an item
  */
-function parseBridgeStrings(aBridgeStrings) {
-  // replace carriage returns ('\r') with new lines ('\n')
-  aBridgeStrings = aBridgeStrings.replace(/\r/g, "\n");
-  // then replace contiguous new lines ('\n') with a single one
-  aBridgeStrings = aBridgeStrings.replace(/[\n]+/g, "\n");
-
+function splitBridgeLines(bridgeLines) {
   // Split on the newline and for each bridge string: trim, remove starting
   // 'bridge' string.
-  // Finally, discard entries that are empty strings; empty strings could occur
-  // if we receive a new line containing only whitespace.
-  const splitStrings = aBridgeStrings.split("\n");
-  return splitStrings
-    .map(val => val.trim().replace(/^bridge\s+/i, ""))
-    .filter(bridgeString => bridgeString !== "");
+  // Replace whitespace with standard " ".
+  // NOTE: We only remove the bridge string part if it is followed by a
+  // non-whitespace.
+  return bridgeLines.split(/\r?\n/).map(val =>
+    val
+      .trim()
+      .replace(/^bridge\s+(\S)/i, "$1")
+      .replace(/\s+/, " ")
+  );
+}
+
+/**
+ * @typedef {Object} BridgeValidationResult
+ *
+ * @property {integer[]} errorLines - The lines that contain errors. Counting
+ *   from 1.
+ * @property {boolean} empty - Whether the given string contains no bridges.
+ * @property {string[]} validBridges - The valid bridge lines found.
+ */
+/**
+ * Validate the given bridge lines.
+ *
+ * @param {string} bridgeLines - The bridge lines to validate, separated by
+ *   newlines.
+ *
+ * @returns {BridgeValidationResult}
+ */
+export function validateBridgeLines(bridgeLines) {
+  let empty = true;
+  const errorLines = [];
+  const validBridges = [];
+  for (const [index, bridge] of splitBridgeLines(bridgeLines).entries()) {
+    if (!bridge) {
+      // Empty line.
+      continue;
+    }
+    empty = false;
+    try {
+      // TODO: Have a more comprehensive validation parser.
+      lazy.TorParsers.parseBridgeLine(bridge);
+    } catch {
+      errorLines.push(index + 1);
+      continue;
+    }
+    validBridges.push(bridge);
+  }
+  return { empty, errorLines, validBridges };
 }
/**
@@ -269,7 +305,8 @@ class TorSettingsImpl {
           if (Array.isArray(val)) {
             return [...val];
           }
-          return parseBridgeStrings(val);
+          // Split the bridge strings, discarding empty.
+          return splitBridgeLines(val).filter(val => val);
         },
         copy: val => [...val],
         equal: (val1, val2) => this.#arrayEqual(val1, val2),
=====================================
toolkit/modules/TorStrings.sys.mjs
=====================================
@@ -139,10 +139,6 @@ const Loader = {
       solveTheCaptcha: "Solve the CAPTCHA to request a bridge.",
       captchaTextboxPlaceholder: "Enter the characters from the image",
       incorrectCaptcha: "The solution is not correct. Please try again.",
-      // Provide bridge dialog
-      provideBridgeDescription:
-        "Add a bridge provided by a trusted organization or someone you know. If you don’t have a bridge, you can request one from the Tor Project. %S",
-      provideBridgePlaceholder: "type address:port (one per line)",
       // Connection settings dialog
       connectionSettingsDialogTitle: "Connection Settings",
       connectionSettingsDialogHeader:
=====================================
toolkit/torbutton/chrome/locale/en-US/settings.properties
=====================================
@@ -75,10 +75,6 @@ settings.solveTheCaptcha=Solve the CAPTCHA to request a bridge.
 settings.captchaTextboxPlaceholder=Enter the characters from the image
 settings.incorrectCaptcha=The solution is not correct. Please try again.
-# Translation note: %S is a Learn more link.
-settings.provideBridgeDescription=Add a bridge provided by a trusted organization or someone you know. If you don’t have a bridge, you can request one from the Tor Project. %S
-settings.provideBridgePlaceholder=type address:port (one per line)
-
 # Connection settings dialog
 settings.connectionSettingsDialogTitle=Connection Settings
 settings.connectionSettingsDialogHeader=Configure how Tor Browser connects to the Internet
@@ -126,3 +122,6 @@ settings.bridgeAddManually=Add a Bridge Manually…
# Provide bridge dialog
 settings.provideBridgeTitleAdd=Add a Bridge Manually
+# Translation note: %S is a Learn more link.
+settings.provideBridgeDescription=Add a bridge provided by a trusted organization or someone you know. If you don’t have a bridge, you can request one from the Tor Project. %S
+settings.provideBridgePlaceholder=type address:port (one per line)
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/366c81d...
-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/366c81d...
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-115.7.0esr-13.5-1] 4 commits: fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in...