+<svg width="24" height="24" viewBox="0 0 24 24" fill="context-fill" xmlns="http://www.w3.org/2000/svg">

+  <path d="M5.5 3C4.83696 3 4.20107 3.26339 3.73223 3.73223C3.26339 4.20107 3 4.83696 3 5.5V9H4.75V5.5C4.75 5.30109 4.82902 5.11032 4.96967 4.96967C5.11032 4.82902 5.30109 4.75 5.5 4.75H9V3H5.5ZM11 10.25C11 10.4489 10.921 10.6397 10.7803 10.7803C10.6397 10.921 10.4489 11 10.25 11H7.75C7.55109 11 7.36032 10.921 7.21967 10.7803C7.07902 10.6397 7 10.4489 7 10.25V7.75C7 7.55109 7.07902 7.36032 7.21967 7.21967C7.36032 7.07902 7.55109 7 7.75 7H10.25C10.4489 7 10.6397 7.07902 10.7803 7.21967C10.921 7.36032 11 7.55109 11 7.75V10.25ZM17 15H15V13H17V11H15V9H17V7H15V9H13V11H15V13H13V15H11V13H9V15H7V17H9V15H11V17H13V15H15V17H17V15ZM3 18.5V15H4.75V18.5C4.75 18.914 5.086 19.25 5.5 19.25H9V21H5.5C4.83696 21 4.20107 20.7366 3.73223 20.2678C3.26339 19.7989 3 19.163 3 18.5ZM15 3H18.5C19.163 3 19.7989 3.26339 20.2678 3.73223C20.7366 4.20107 21 4.83696 21 5.5V9H19.25V5.5C19.25 5.30109 19.171 5.11032 19.0303 4.96967C18.8897 4.82902 18.6989 4.75 18.5 4.75H15V3ZM21 18.5V15H19.25V18.5C19.25 18.6989 19.171 18.8897 19.0303 19.0303C18.8897 19.171 18.6989 19.25 18.5 19.25H15V21H18.5C19.163 21 19.7989 20.7366 20.2678 20.2678C20.7366 19.7989 21 19.163 21 18.5Z"/>

+</svg>

+<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" xmlns="http://www.w3.org/2000/svg">

+  <path d="M15.5 11.5C15.5 7.35786 12.1421 4 8 4C3.85786 4 0.5 7.35786 0.5 11.5V12.7461H1.67188V11.5C1.67188 8.00507 4.50507 5.17188 8 5.17188C11.4949 5.17188 14.3281 8.00507 14.3281 11.5V12.7461H15.5V11.5Z"/>

+  <path d="M13.25 11.5C13.25 8.6005 10.8995 6.24999 7.99999 6.24999C5.1005 6.24999 2.74999 8.6005 2.74999 11.5L2.74989 12.7461H3.92177L3.92187 11.5C3.92187 9.24771 5.74771 7.42187 7.99999 7.42187C10.2523 7.42187 12.0781 9.24771 12.0781 11.5L12.0782 12.7461H13.2501L13.25 11.5Z"/>

+  <path d="M8 8.5C9.65686 8.5 11 9.84315 11 11.5L11.0002 12.7461H9.82836L9.82813 11.5C9.82813 10.4904 9.00965 9.67188 8 9.67188C6.99036 9.67188 6.17188 10.4904 6.17188 11.5L6.17164 12.7461H4.99977V11.5C4.99977 9.84315 6.34315 8.5 8 8.5Z"/>

+</svg>

+      optionEl

+        .querySelector(".bridge-status-badge")

+        .classList.toggle(

+          "bridge-status-current-built-in",

+          type === currentBuiltinType

+        );

+          <html:span class="bridge-status-badge">

+            <html:div class="bridge-status-icon"></html:div>

+          <html:span class="bridge-status-badge">

+            <html:div class="bridge-status-icon"></html:div>

+          <html:span class="bridge-status-badge">

+            <html:div class="bridge-status-icon"></html:div>

+/**

+ * Make changes to TorSettings and save them.

+ *

+ * Bulk changes will be frozen together.

+ *

+ * @param {Function} changes - Method to apply changes to TorSettings.

+ */

+async function setTorSettings(changes) {

+  if (!TorSettings.initialized) {

+    console.warning("Ignoring changes to uninitialized TorSettings");

+    return;

+  }

+  TorSettings.freezeNotifications();

+  try {

+    changes();

+    // This will trigger TorSettings.#cleanupSettings()

+    TorSettings.saveToPrefs();

+    try {

+      // May throw.

+      await TorSettings.applySettings();

+    } catch (e) {

+      console.error("Failed to save Tor settings", e);

+    }

+  } finally {

+    TorSettings.thawNotifications();

+  }

+}

+

+/**

+ * Get the ID/fingerprint of the bridge used in the most recent Tor circuit.

+ *

+ * @returns {string?} - The bridge ID or null if a bridge with an id was not

+ *   used in the last circuit.

+ */

+async function getConnectedBridgeId() {

+  // TODO: PieroV: We could make sure TorSettings is in sync by monitoring also

+  // changes of settings. At that point, we could query it, instead of doing a

+  // query over the control port.

+  let bridge = null;

+  try {

+    const provider = await TorProviderBuilder.build();

+    bridge = provider.currentBridge;

+  } catch (e) {

+    console.warn("Could not get current bridge", e);

+  }

+  return bridge?.fingerprint ?? null;

+}

+

+// TODO: Instead of aria-live in the DOM, use the proposed ariaNotify

+// API if it gets accepted into firefox and works with screen readers.

+// See https://github.com/WICG/proposals/issues/112

+/**

+ * Notification for screen reader users.

+ */

+const gBridgesNotification = {

+  /**

+   * The screen reader area that shows updates.

+   *

+   * @type {Element?}

+   */

+  _updateArea: null,

+  /**

+   * The text for the screen reader update.

+   *

+   * @type {Element?}

+   */

+  _textEl: null,

+  /**

+   * A timeout for hiding the update.

+   *

+   * @type {integer?}

+   */

+  _hideUpdateTimeout: null,

+

+  /**

+   * Initialize the area for notifications.

+   */

+  init() {

+    this._updateArea = document.getElementById("tor-bridges-update-area");

+    this._textEl = document.getElementById("tor-bridges-update-area-text");

+  },

+

+  /**

+   * Post a new notification, replacing any existing one.

+   *

+   * @param {string} type - The notification type.

+   */

+  post(type) {

+    this._updateArea.hidden = false;

+    // First we clear the update area to reset the text to be empty.

+    this._textEl.removeAttribute("data-l10n-id");

+    this._textEl.textContent = "";

+    if (this._hideUpdateTimeout !== null) {

+      clearTimeout(this._hideUpdateTimeout);

+      this._hideUpdateTimeout = null;

+    }

+

+    let updateId;

+    switch (type) {

+      case "removed-one":

+        updateId = "tor-bridges-update-removed-one-bridge";

+        break;

+      case "removed-all":

+        updateId = "tor-bridges-update-removed-all-bridges";

+        break;

+      case "changed":

+      default:

+        // Generic message for when bridges change.

+        updateId = "tor-bridges-update-changed-bridges";

+        break;

+    }

+

+    // Hide the area after 5 minutes, when the update is not "recent" any

+    // more.

+    this._hideUpdateTimeout = setTimeout(() => {

+      this._updateArea.hidden = true;

+    }, 300000);

+

+    // 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.

+    setTimeout(() => {

+      document.l10n.setAttributes(this._textEl, updateId);

+    }, 500);

+  },

+};

+

+/**

+ * Controls the bridge grid.

+ */

+const gBridgeGrid = {

+  /**

+   * The grid element.

+   *

+   * @type {Element?}

+   */

+  _grid: null,

+  /**

+   * The template for creating new rows.

+   *

+   * @type {HTMLTemplateElement?}

+   */

+  _rowTemplate: null,

+

+  /**

+   * @typedef {object} EmojiCell

+   *

+   * @property {Element} cell - The grid cell element.

+   * @property {Element} img - The grid cell icon.

+   * @property {Element} index - The emoji index.

+   */

+  /**

+   * @typedef {object} BridgeGridRow

+   *

+   * @property {Element} element - The row element.

+   * @property {Element} optionsButton - The options button.

+   * @property {EmojiCell[]} emojis - The emoji cells.

+   * @property {Element} menu - The options menupopup.

+   * @property {Element} statusEl - The bridge status element.

+   * @property {Element} statusText - The status text.

+   * @property {string} bridgeLine - The identifying bridge string for this row.

+   * @property {string?} bridgeId - The ID/fingerprint for the bridge, or null

+   *   if it doesn't have one.

+   * @property {integer} index - The index of the row in the grid.

+   * @property {boolean} connected - Whether we are connected to the bridge

+   *   (recently in use for a Tor circuit).

+   * @property {BridgeGridCell[]} cells - The cells that belong to the row,

+   *   ordered by their column.

+   */

+  /**

+   * @typedef {object} BridgeGridCell

+   *

+   * @property {Element} element - The cell element.

+   * @property {Element} focusEl - The element belonging to the cell that should

+   *   receive focus. Should be the cell element itself, or an interactive

+   *   focusable child.

+   * @property {integer} columnIndex - The index of the column this cell belongs

+   *   to.

+   * @property {BridgeGridRow} row - The row this cell belongs to.

+   */

+  /**

+   * The current rows in the grid.

+   *

+   * @type {BridgeGridRow[]}

+   */

+  _rows: [],

+  /**

+   * The cell that should be the focus target when the user moves focus into the

+   * grid, or null if the grid itself should be the target.

+   *

+   * @type {BridgeGridCell?}

+   */

+  _focusCell: null,

+

+  /**

+   * Initialize the bridge grid.

+   */

+  init() {

+    this._grid = document.getElementById("tor-bridges-grid-display");

+    // Initially, make only the grid itself part of the keyboard tab cycle.

+    // matches _focusCell = null.

+    this._grid.tabIndex = 0;

+

+    this._rowTemplate = document.getElementById(

+      "tor-bridges-grid-row-template"

+    );

+

+    this._grid.addEventListener("keydown", this);

+    this._grid.addEventListener("mousedown", this);

+    this._grid.addEventListener("focusin", this);

+

+    Services.obs.addObserver(this, TorSettingsTopics.SettingsChanged);

+

+    // NOTE: Before initializedPromise completes, this area is hidden.

+    TorSettings.initializedPromise.then(() => {

+      this._updateRows(true);

+    });

+  },

+

+  /**

+   * Uninitialize the bridge grid.

+   */

+  uninit() {

+    Services.obs.removeObserver(this, TorSettingsTopics.SettingsChanged);

+    this.deactivate();

+  },

+

+  /**

+   * Whether the grid is visible and responsive.

+   *

+   * @type {boolean}

+   */

+  _active: false,

+

+  /**

+   * Activate and show the bridge grid.

+   */

+  activate() {

+    if (this._active) {

+      return;

+    }

+

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

+  },

+

+  /**

+   * Deactivate and hide the bridge grid.

+   */

+  deactivate() {

+    if (!this._active) {

+      return;

+    }

+

+    this._active = false;

+

+    this._forceCloseRowMenus();

+

+    this._grid.classList.remove("grid-active");

+

+    Services.obs.removeObserver(this, "intl:app-locales-changed");

+    Services.obs.removeObserver(this, TorProviderTopics.BridgeChanged);

+  },

+

+  observe(subject, topic, data) {

+    switch (topic) {

+      case TorSettingsTopics.SettingsChanged:

+        const { changes } = subject.wrappedJSObject;

+        if (

+          changes.includes("bridges.source") ||

+          changes.includes("bridges.bridge_strings")

+        ) {

+          this._updateRows();

+        }

+        break;

+      case "intl:app-locales-changed":

+        this._updateEmojiLangCode();

+        break;

+      case TorProviderTopics.BridgeChanged:

+        this._updateConnectedBridge();

+        break;

+    }

+  },

+

+  handleEvent(event) {

+    if (event.type === "keydown") {

+      if (event.altKey || event.shiftKey || event.metaKey || event.ctrlKey) {

+        // Don't interfere with these events.

+        return;

+      }

+

+      if (this._rows.some(row => row.menu.open)) {

+        // Have an open menu, let the menu handle the event instead.

+        return;

+      }

+

+      let numRows = this._rows.length;

+      if (!numRows) {

+        // Nowhere for focus to go.

+        return;

+      }

+

+      let moveRow = 0;

+      let moveColumn = 0;

+      const isLTR = this._grid.matches(":dir(ltr)");

+      switch (event.key) {

+        case "ArrowDown":

+          moveRow = 1;

+          break;

+        case "ArrowUp":

+          moveRow = -1;

+          break;

+        case "ArrowRight":

+          moveColumn = isLTR ? 1 : -1;

+          break;

+        case "ArrowLeft":

+          moveColumn = isLTR ? -1 : 1;

+          break;

+        default:

+          return;

+      }

+

+      // Prevent scrolling the nearest scroll container.

+      event.preventDefault();

+

+      const curCell = this._focusCell;

+      let row = curCell ? curCell.row.index + moveRow : 0;

+      let column = curCell ? curCell.columnIndex + moveColumn : 0;

+

+      // Clamp in bounds.

+      if (row < 0) {

+        row = 0;

+      } else if (row >= numRows) {

+        row = numRows - 1;

+      }

+

+      const numCells = this._rows[row].cells.length;

+      if (column < 0) {

+        column = 0;

+      } else if (column >= numCells) {

+        column = numCells - 1;

+      }

+

+      const newCell = this._rows[row].cells[column];

+

+      if (newCell !== curCell) {

+        this._setFocus(newCell);

+      }

+    } else if (event.type === "mousedown") {

+      if (event.button !== 0) {

+        return;

+      }

+      // Move focus index to the clicked target.

+      // NOTE: Since the cells and the grid have "tabindex=-1", they are still

+      // click-focusable. Therefore, the default mousedown handler will try to

+      // move focus to it.

+      // Rather than block this default handler, we instead re-direct the focus

+      // to the correct cell in the "focusin" listener.

+      const newCell = this._getCellFromTarget(event.target);

+      // NOTE: If newCell is null, then we do nothing here, but instead wait for

+      // the focusin handler to trigger.

+      if (newCell && newCell !== this._focusCell) {

+        this._setFocus(newCell);

+      }

+    } else if (event.type === "focusin") {

+      const focusCell = this._getCellFromTarget(event.target);

+      if (focusCell !== this._focusCell) {

+        // Focus is not where it is expected.

+        // E.g. the user has clicked the edge of the grid.

+        // Restore focus immediately back to the cell we expect.

+        this._setFocus(this._focusCell);

+      }

+    }

+  },

+

+  /**

+   * Return the cell that was the target of an event.

+   *

+   * @param {Element} element - The target of an event.

+   *

+   * @returns {BridgeGridCell?} - The cell that the element belongs to, or null

+   *   if it doesn't belong to any cell.

+   */

+  _getCellFromTarget(element) {

+    for (const row of this._rows) {

+      for (const cell of row.cells) {

+        if (cell.element.contains(element)) {

+          return cell;

+        }

+      }

+    }

+    return null;

+  },

+

+  /**

+   * Determine whether the document's active element (focus) is within the grid

+   * or not.

+   *

+   * @returns {boolean} - Whether focus is within this grid or not.

+   */

+  _focusWithin() {

+    return this._grid.contains(document.activeElement);

+  },

+

+  /**

+   * Set the cell that should be the focus target of the grid, possibly moving

+   * the document's focus as well.

+   *

+   * @param {BridgeGridCell?} cell - The cell to make the focus target, or null

+   *   if the grid itself should be the target.

+   * @param {boolean} [focusWithin] - Whether focus should be moved within the

+   *   grid. If undefined, this will move focus if the grid currently contains

+   *   the document's focus.

+   */

+  _setFocus(cell, focusWithin) {

+    if (focusWithin === undefined) {

+      focusWithin = this._focusWithin();

+    }

+    const prevFocusElement = this._focusCell

+      ? this._focusCell.focusEl

+      : this._grid;

+    const newFocusElement = cell ? cell.focusEl : this._grid;

+

+    if (prevFocusElement !== newFocusElement) {

+      prevFocusElement.tabIndex = -1;

+      newFocusElement.tabIndex = 0;

+    }

+    // Set _focusCell now, before we potentially call "focus", which can trigger

+    // the "focusin" handler.

+    this._focusCell = cell;

+

+    if (focusWithin) {

+      // Focus was within the grid, so we need to actively move it to the new

+      // element.

+      newFocusElement.focus({ preventScroll: true });

+      // Scroll to the whole cell into view, rather than just the focus element.

+      (cell?.element ?? newFocusElement).scrollIntoView({

+        block: "nearest",

+        inline: "nearest",

+      });

+    }

+  },

+

+  /**

+   * Reset the grids focus to be the first row's first cell, if any.

+   *

+   * @param {boolean} [focusWithin] - Whether focus should be moved within the

+   *   grid. If undefined, this will move focus if the grid currently contains

+   *   the document's focus.

+   */

+  _resetFocus(focusWithin) {

+    this._setFocus(

+      this._rows.length ? this._rows[0].cells[0] : null,

+      focusWithin

+    );

+  },

+

+  /**

+   * The bridge ID/fingerprint of the most recently used bridge (appearing in

+   * the latest Tor circuit). Roughly corresponds to the bridge we are currently

+   * connected to.

+   *

+   * null if there are no such bridges.

+   *

+   * @type {string?}

+   */

+  _connectedBridgeId: null,

+  /**

+   * Update _connectedBridgeId.

+   */

+  async _updateConnectedBridge() {

+    const bridgeId = await getConnectedBridgeId();

+    if (bridgeId === this._connectedBridgeId) {

+      return;

+    }

+    this._connectedBridgeId = bridgeId;

+    for (const row of this._rows) {

+      this._updateRowStatus(row);

+    }

+  },

+

+  /**

+   * Update the status of a row.

+   *

+   * @param {BridgeGridRow} row - The row to update.

+   */

+  _updateRowStatus(row) {

+    const connected = row.bridgeId && this._connectedBridgeId === row.bridgeId;

+    // NOTE: row.connected is initially undefined, so won't match `connected`.

+    if (connected === row.connected) {

+      return;

+    }

+

+    row.connected = connected;

+

+    const noStatus = !connected;

+

+    row.element.classList.toggle("hide-status", noStatus);

+    row.statusEl.classList.toggle("bridge-status-none", noStatus);

+    row.statusEl.classList.toggle("bridge-status-connected", connected);

+

+    if (connected) {

+      document.l10n.setAttributes(

+        row.statusText,

+        "tor-bridges-status-connected"

+      );

+    } else {

+      document.l10n.setAttributes(row.statusText, "tor-bridges-status-none");

+    }

+  },

+

+  /**

+   * 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.

+   *

+   * @param {string} bridgeLine - The bridge line for this row, which also acts

+   *   as its ID.

+   *

+   * @returns {BridgeGridRow} - A new row, with then "index" unset and the

+   *   "element" without a parent.

+   */

+  _createRow(bridgeLine) {

+    let details;

+    try {

+      details = TorParsers.parseBridgeLine(bridgeLine);

+    } catch (e) {

+      console.error(`Detected invalid bridge line: ${bridgeLine}`, e);

+    }

+    const row = {

+      element: this._rowTemplate.content.children[0].cloneNode(true),

+      bridgeLine,

+      bridgeId: details?.id ?? null,

+      cells: [],

+    };

+

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

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

+    });

+

+    for (const [columnIndex, element] of row.element

+      .querySelectorAll(".tor-bridges-grid-cell")

+      .entries()) {

+      const focusEl =

+        element.querySelector(".tor-bridges-grid-focus") ?? element;

+      // Set a negative tabIndex, this makes the element click-focusable but not

+      // part of the tab navigation sequence.

+      focusEl.tabIndex = -1;

+      row.cells.push({ element, focusEl, columnIndex, row });

+    }

+

+    // TODO: properly handle "vanilla" bridges?

+    document.l10n.setAttributes(

+      row.element.querySelector(".tor-bridges-type-cell"),

+      "tor-bridges-type-prefix",

+      { type: details?.transport ?? "vanilla" }

+    );

+

+    row.element.querySelector(".tor-bridges-address-cell").textContent =

+      bridgeLine;

+

+    row.statusEl = row.element.querySelector(

+      ".tor-bridges-status-cell .bridge-status-badge"

+    );

+    row.statusText = row.element.querySelector(".tor-bridges-status-cell-text");

+

+    this._initRowMenu(row);

+

+    this._updateRowStatus(row);

+    this._updateRowEmojis(row);

+    return row;

+  },

+

+  /**

+   * The row menu index used for generating new ids.

+   *

+   * @type {integer}

+   */

+  _rowMenuIndex: 0,

+  /**

+   * Generate a new id for the options menu.

+   *

+   * @returns {string} - The new id.

+   */

+  _generateRowMenuId() {

+    const id = `tor-bridges-individual-options-menu-${this._rowMenuIndex}`;

+    // Assume we won't run out of ids.

+    this._rowMenuIndex++;

+    return id;

+  },

+

+  /**

+   * Initialize the shared menu for a row.

+   *

+   * @param {BridgeGridRow} row - The row to initialize the menu of.

+   */

+  _initRowMenu(row) {

+    row.menu = row.element.querySelector(

+      ".tor-bridges-individual-options-menu"

+    );

+    row.optionsButton = row.element.querySelector(

+      ".tor-bridges-options-cell-button"

+    );

+

+    row.menu.id = this._generateRowMenuId();

+    row.optionsButton.setAttribute("aria-controls", row.menu.id);

+

+    row.optionsButton.addEventListener("click", event => {

+      row.menu.toggle(event);

+    });

+

+    row.menu.addEventListener("hidden", () => {

+      // Make sure the button receives focus again when the menu is hidden.

+      // Currently, panel-list.js only does this when the menu is opened with a

+      // keyboard, but this causes focus to be lost from the page if the user

+      // uses a mixture of keyboard and mouse.

+      row.optionsButton.focus();

+    });

+

+    row.menu

+      .querySelector(".tor-bridges-options-qr-one-menu-item")

+      .addEventListener("click", () => {

+        const bridgeLine = row.bridgeLine;

+        if (!bridgeLine) {

+          return;

+        }

+        const dialog = new BridgeQrDialog();

+        dialog.openDialog(gSubDialog, bridgeLine);

+      });

+    row.menu

+      .querySelector(".tor-bridges-options-copy-one-menu-item")

+      .addEventListener("click", () => {

+        const clipboard = Cc[

+          "@mozilla.org/widget/clipboardhelper;1"

+        ].getService(Ci.nsIClipboardHelper);

+        clipboard.copyString(row.bridgeLine);

+      });

+    row.menu

+      .querySelector(".tor-bridges-options-remove-one-menu-item")

+      .addEventListener("click", () => {

+        const bridgeLine = row.bridgeLine;

+        const strings = TorSettings.bridges.bridge_strings;

+        const index = strings.indexOf(bridgeLine);

+        if (index === -1) {

+          return;

+        }

+        strings.splice(index, 1);

+

+        setTorSettings(() => {

+          TorSettings.bridges.bridge_strings = strings;

+        });

+      });

+  },

+

+  /**

+   * Force the row menu to close.

+   */

+  _forceCloseRowMenus() {

+    for (const row of this._rows) {

+      row.menu.hide(null, { force: true });

+    }