Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

This patch adds a new about:preferences#connection page which allows
modifying bridge, proxy, and firewall settings from within Tor Browser.
All of the functionality present in tor-launcher's Network
Configuration panel is present:

 - Setting built-in bridges
 - Requesting bridges from BridgeDB via moat
 - Using user-provided bridges
 - Configuring SOCKS4, SOCKS5, and HTTP/HTTPS proxies
 - Setting firewall ports
 - Viewing and Copying Tor's logs
 - The Networking Settings in General preferences has been removed

Bug 40774: Update about:preferences page to match new UI designs

browser/components/moz.build

@@ -70,6 +70,7 @@ DIRS += [
     "uitour",
     "urlbar",
     "torcircuit",
+    "torpreferences",
 ]
 
 DIRS += ["build"]

browser/components/preferences/main.inc.xhtml

@@ -803,12 +803,13 @@
 <hbox id="networkProxyCategory"
       class="subcategory"
       hidden="true"
+      data-hidden-from-search="true"
       data-category="paneGeneral">
   <html:h1 data-l10n-id="network-settings-title"/>
 </hbox>
 
 <!-- Network Settings-->
-<groupbox id="connectionGroup" data-category="paneGeneral" hidden="true">
+<groupbox id="connectionGroup" data-category="paneGeneral" data-hidden-from-search="true" hidden="true">
   <label class="search-header" hidden="true"><html:h2 data-l10n-id="network-settings-title"/></label>
 
   <hbox align="center"

browser/components/preferences/preferences.js

@@ -15,6 +15,7 @@
 /* import-globals-from findInPage.js */
 /* import-globals-from /browser/base/content/utilityOverlay.js */
 /* import-globals-from /toolkit/content/preferencesBindings.js */
+/* import-globals-from ../torpreferences/content/connectionPane.js */
 
 "use strict";
 
@@ -231,6 +232,14 @@ function init_all() {
     register_module("paneSync", gSyncPane);
   }
   register_module("paneSearchResults", gSearchResultsPane);
+  if (gConnectionPane.enabled) {
+    document.getElementById("category-connection").hidden = false;
+    register_module("paneConnection", gConnectionPane);
+  } else {
+    // Remove the pane from the DOM so it doesn't get incorrectly included in search results.
+    document.getElementById("template-paneConnection").remove();
+  }
+
   gSearchResultsPane.init();
   gMainPane.preInit();
 

browser/components/preferences/preferences.xhtml

@@ -48,6 +48,7 @@
   />
 
   <link rel="stylesheet" href="chrome://browser/content/securitylevel/securityLevelPreferences.css" />
+  <link rel="stylesheet" href="chrome://browser/content/torpreferences/torPreferences.css" />
 
   <link rel="localization" href="branding/brand.ftl"/>
   <link rel="localization" href="browser/browser.ftl"/>
@@ -91,6 +92,7 @@
   <script src="chrome://browser/content/preferences/findInPage.js"/>
   <script src="chrome://browser/content/migration/migration-wizard.mjs" type="module"></script>
   <script type="module" src="chrome://browser/content/backup/backup-settings.mjs"></script>
+  <script src="chrome://browser/content/torpreferences/bridgemoji/BridgeEmoji.js"/>
 </head>
 
 <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
@@ -203,6 +205,8 @@
                       value="paneTranslations"
                       helpTopic="prefs-translations"/>
 
+#include ../torpreferences/content/connectionCategory.inc.xhtml
+
       </richlistbox>
 
       <spacer flex="1"/>
@@ -254,6 +258,7 @@
 #include sync.inc.xhtml
 #include experimental.inc.xhtml
 #include moreFromMozilla.inc.xhtml
+#include ../torpreferences/content/connectionPane.xhtml
         </vbox>
       </vbox>
     </vbox>

browser/components/torpreferences/content/bridge-bot.svg

+<svg width="40" height="44" viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.1877 22.7584C38.7409 25.1504 38.9178 27.7923 37.5828 28.6591C36.2478 29.5259 33.9065 28.2895 32.3533 25.8975C30.8001 23.5055 30.6232 20.8637 31.9582 19.9969C33.2932 19.13 35.6345 20.3664 37.1877 22.7584Z" fill="#C069FF"/>
+<path d="M2.81234 22.7584C1.25915 25.1504 1.08224 27.7923 2.41721 28.6591C3.75217 29.5259 6.09349 28.2895 7.64668 25.8975C9.19987 23.5055 9.37678 20.8637 8.04181 19.9969C6.70685 19.13 4.36553 20.3664 2.81234 22.7584Z" fill="#C069FF"/>
+<path d="M32.2002 19.4754C33.9149 19.4754 35.3181 20.8678 35.1823 22.5772C34.7579 27.9186 33.2458 32.9181 30.8541 36.7668C28.0043 41.3527 24.1391 43.9291 20.1088 43.9291C16.0785 43.9291 12.2133 41.3527 9.36344 36.7668C6.97177 32.9181 5.45965 27.9186 5.03525 22.5772C4.89944 20.8678 6.30265 19.4754 8.0174 19.4754L32.2002 19.4754Z" fill="#C069FF"/>
+<path d="M28.4375 32.1121C28.4375 27.4522 24.6599 23.6746 20 23.6746C15.3401 23.6746 11.5625 27.4522 11.5625 32.1121V33.5139H12.8809V32.1121C12.8809 28.1803 16.0682 24.9929 20 24.9929C23.9318 24.9929 27.1191 28.1803 27.1191 32.1121V33.5139H28.4375V32.1121Z" fill="#15141A"/>
+<path d="M25.9062 32.1121C25.9062 28.8501 23.2619 26.2058 20 26.2058C16.7381 26.2058 14.0937 28.8501 14.0937 32.1121L14.0936 33.5139H15.412L15.4121 32.1121C15.4121 29.5782 17.4662 27.5242 20 27.5242C22.5338 27.5242 24.5879 29.5782 24.5879 32.1121L24.588 33.5139H25.9064L25.9062 32.1121Z" fill="#15141A"/>
+<path d="M20 28.7371C21.864 28.7371 23.375 30.2481 23.375 32.1121L23.3753 33.5139H22.0569L22.0566 32.1121C22.0566 30.9762 21.1359 30.0554 20 30.0554C18.8642 30.0554 17.9434 30.9762 17.9434 32.1121L17.9431 33.5139H16.6247V32.1121C16.6247 30.2481 18.136 28.7371 20 28.7371Z" fill="#15141A"/>
+<path d="M8.9145 17.8162C7.19975 17.8162 5.78665 16.4193 6.02668 14.7215C6.53221 11.1456 7.9061 7.82078 9.99195 5.21826C12.6698 1.87706 16.3018 -1.07451e-07 20.0889 0C23.8759 1.07451e-07 27.5079 1.87706 30.1858 5.21826C32.2716 7.82078 33.6455 11.1456 34.151 14.7215C34.3911 16.4193 32.978 17.8162 31.2632 17.8162H8.9145Z" fill="#C069FF"/>
+<path d="M13.1064 15.1091C11.3916 15.1091 9.96814 13.7048 10.3139 12.0252C10.7578 9.86855 11.6634 7.87853 12.956 6.27814C14.8477 3.93602 17.4134 2.62024 20.0887 2.62024C22.7639 2.62024 25.3296 3.93602 27.2213 6.27814C28.514 7.87853 29.4195 9.86855 29.8635 12.0252C30.2092 13.7048 28.7857 15.1091 27.071 15.1091H13.1064Z" fill="#EBD0FF"/>
+<path d="M17.5125 6.81215C17.5125 7.58388 16.9065 8.2095 16.1589 8.2095C15.4112 8.2095 14.8052 7.58388 14.8052 6.81215C14.8052 6.04041 15.4112 5.41479 16.1589 5.41479C16.9065 5.41479 17.5125 6.04041 17.5125 6.81215Z" fill="#15141A"/>
+<path d="M25.1981 6.81215C25.1981 7.58388 24.592 8.2095 23.8444 8.2095C23.0968 8.2095 22.4907 7.58388 22.4907 6.81215C22.4907 6.04041 23.0968 5.41479 23.8444 5.41479C24.592 5.41479 25.1981 6.04041 25.1981 6.81215Z" fill="#15141A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4395 9.01993L22.4044 9.11353C21.5971 11.2673 18.526 11.1951 17.8208 9.0058L18.427 8.81052C18.9472 10.4254 21.2125 10.4787 21.808 8.88998L21.8431 8.79639L22.4395 9.01993Z" fill="#15141A"/>
+</svg>

browser/components/torpreferences/content/bridge-qr.svg

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

browser/components/torpreferences/content/bridge.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>

browser/components/torpreferences/content/bridgeQrDialog.js

+"use strict";
+
+const { QRCode } = ChromeUtils.importESModule(
+  "resource://gre/modules/QRCode.sys.mjs"
+);
+
+window.addEventListener(
+  "DOMContentLoaded",
+  () => {
+    const bridgeString = window.arguments[0];
+
+    const target = document.getElementById("bridgeQr-target");
+    const style = window.getComputedStyle(target);
+    // We are assuming that the style width and height have "px" units.
+    // Trailing "px" is not parsed.
+    // NOTE: Our QRCode module doesn't seem to use the width or height
+    // attributes.
+    const width = parseInt(style.width, 10);
+    const height = parseInt(style.height, 10);
+    new QRCode(target, {
+      text: bridgeString,
+      width,
+      height,
+      colorDark: style.color,
+      colorLight: style.backgroundColor,
+    });
+  },
+  { once: true }
+);

browser/components/torpreferences/content/bridgeQrDialog.xhtml

+<?xml version="1.0" encoding="UTF-8"?>
+
+<window
+  type="child"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  data-l10n-id="bridge-qr-dialog-title"
+>
+  <dialog id="bridgeQr-dialog" buttons="accept">
+    <linkset>
+      <html:link rel="stylesheet" href="chrome://global/skin/global.css" />
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/skin/preferences/preferences.css"
+      />
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/torpreferences/torPreferences.css"
+      />
+
+      <html:link rel="localization" href="toolkit/global/tor-browser.ftl" />
+    </linkset>
+
+    <script src="chrome://browser/content/torpreferences/bridgeQrDialog.js" />
+
+    <html:div id="bridgeQr">
+      <html:div id="bridgeQr-target"></html:div>
+      <html:div id="bridgeQr-icon"></html:div>
+    </html:div>
+  </dialog>
+</window>

browser/components/torpreferences/content/bridgemoji/BridgeEmoji.js

+"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) {
+      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.#img, "tor-bridges-emoji-image", {
+        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/bridgemoji/bridge-emojis.json

+[
+  "👽️",
+  "🤖",
+  "🧠",
+  "👁️",
+  "🧙",
+  "🧚",
+  "🧜",
+  "🐵",
+  "🦧",
+  "🐶",
+  "🐺",
+  "🦊",
+  "🦝",
+  "🐱",
+  "🦁",
+  "🐯",
+  "🐴",
+  "🦄",
+  "🦓",
+  "🦌",
+  "🐮",
+  "🐷",
+  "🐗",
+  "🐪",
+  "🦙",
+  "🦒",
+  "🐘",
+  "🦣",
+  "🦏",
+  "🐭",
+  "🐰",
+  "🐿️",
+  "🦔",
+  "🦇",
+  "🐻",
+  "🐨",
+  "🦥",
+  "🦦",
+  "🦘",
+  "🐥",
+  "🐦️",
+  "🕊️",
+  "🦆",
+  "🦉",
+  "🦤",
+  "🪶",
+  "🦩",
+  "🦚",
+  "🦜",
+  "🐊",
+  "🐢",
+  "🦎",
+  "🐍",
+  "🐲",
+  "🦕",
+  "🐳",
+  "🐬",
+  "🦭",
+  "🐟️",
+  "🐠",
+  "🦈",
+  "🐙",
+  "🐚",
+  "🐌",
+  "🦋",
+  "🐛",
+  "🐝",
+  "🐞",
+  "💐",
+  "🌹",
+  "🌺",
+  "🌻",
+  "🌷",
+  "🌲",
+  "🌳",
+  "🌴",
+  "🌵",
+  "🌿",
+  "🍁",
+  "🍇",
+  "🍈",
+  "🍉",
+  "🍊",
+  "🍋",
+  "🍌",
+  "🍍",
+  "🥭",
+  "🍏",
+  "🍐",
+  "🍑",
+  "🍒",
+  "🍓",
+  "🫐",
+  "🥝",
+  "🍅",
+  "🫒",
+  "🥥",
+  "🥑",
+  "🍆",
+  "🥕",
+  "🌽",
+  "🌶️",
+  "🥬",
+  "🥦",
+  "🧅",
+  "🍄",
+  "🥜",
+  "🥐",
+  "🥖",
+  "🥨",
+  "🥯",
+  "🥞",
+  "🧇",
+  "🍔",
+  "🍕",
+  "🌭",
+  "🌮",
+  "🍿",
+  "🦀",
+  "🦞",
+  "🍨",
+  "🍩",
+  "🍪",
+  "🎂",
+  "🧁",
+  "🍫",
+  "🍬",
+  "🍭",
+  "🫖",
+  "🧃",
+  "🧉",
+  "🧭",
+  "🏔️",
+  "🌋",
+  "🏕️",
+  "🏝️",
+  "🏡",
+  "⛲️",
+  "🎠",
+  "🎡",
+  "🎢",
+  "💈",
+  "🚆",
+  "🚋",
+  "🚍️",
+  "🚕",
+  "🚗",
+  "🚚",
+  "🚜",
+  "🛵",
+  "🛺",
+  "🛴",
+  "🛹",
+  "🛼",
+  "⚓️",
+  "⛵️",
+  "🛶",
+  "🚤",
+  "🚢",
+  "✈️",
+  "🚁",
+  "🚠",
+  "🛰️",
+  "🚀",
+  "🛸",
+  "⏰",
+  "🌙",
+  "🌡️",
+  "☀️",
+  "🪐",
+  "🌟",
+  "🌀",
+  "🌈",
+  "☂️",
+  "❄️",
+  "☄️",
+  "🔥",
+  "💧",
+  "🌊",
+  "🎃",
+  "✨",
+  "🎈",
+  "🎉",
+  "🎏",
+  "🎀",
+  "🎁",
+  "🎟️",
+  "🏆️",
+  "⚽️",
+  "🏀",
+  "🏈",
+  "🎾",
+  "🥏",
+  "🏓",
+  "🏸",
+  "🤿",
+  "🥌",
+  "🎯",
+  "🪀",
+  "🪁",
+  "🔮",
+  "🎲",
+  "🧩",
+  "🎨",
+  "🧵",
+  "👕",
+  "🧦",
+  "👗",
+  "🩳",
+  "🎒",
+  "👟",
+  "👑",
+  "🧢",
+  "💄",
+  "💍",
+  "💎",
+  "📢",
+  "🎶",
+  "🎙️",
+  "📻️",
+  "🎷",
+  "🪗",
+  "🎸",
+  "🎺",
+  "🎻",
+  "🪕",
+  "🥁",
+  "☎️",
+  "🔋",
+  "💿️",
+  "🧮",
+  "🎬️",
+  "💡",
+  "🔦",
+  "🏮",
+  "📕",
+  "🏷️",
+  "💳️",
+  "✏️",
+  "🖌️",
+  "🖍️",
+  "📌",
+  "📎",
+  "🔑",
+  "🪃",
+  "🏹",
+  "⚖️",
+  "🧲",
+  "🧪",
+  "🧬",
+  "🔬",
+  "🔭",
+  "📡",
+  "🪑",
+  "🧹",
+  "🗿"
+]

browser/components/torpreferences/content/bridgemoji/svgs/1f300.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#55ACEE" d="M35.782 24.518c-.13-.438-.422-.799-.821-1.016-.802-.436-1.879-.116-2.316.683-1.797 3.296-4.771 5.695-8.372 6.757-3.563 1.051-7.437.634-10.698-1.144-2.558-1.394-4.419-3.699-5.242-6.493-.74-2.514-.495-5.016.552-7.033-.363 1.605-.313 3.285.164 4.908.737 2.507 2.407 4.575 4.701 5.823 2.733 1.492 5.989 1.841 8.979.961 3.025-.892 5.521-2.906 7.026-5.672 1.832-3.358 2.246-7.228 1.165-10.898-1.08-3.669-3.524-6.698-6.883-8.529C19.984.657 15.165.14 10.738 1.446 6.261 2.764 2.566 5.746.332 9.843c-.451.826-.145 1.865.681 2.317.804.439 1.884.117 2.319-.682C5.127 8.183 8.1 5.784 11.703 4.723c3.563-1.048 7.438-.634 10.699 1.142 2.556 1.394 4.416 3.7 5.239 6.495.741 2.514.496 5.017-.552 7.033.363-1.604.315-3.285-.162-4.911-.739-2.504-2.409-4.573-4.702-5.824-2.734-1.49-5.99-1.838-8.98-.959-3.022.89-5.518 2.904-7.025 5.671-1.832 3.357-2.245 7.227-1.165 10.897 1.081 3.671 3.525 6.7 6.883 8.529 2.567 1.4 5.451 2.141 8.341 2.141 1.669 0 3.337-.242 4.958-.72 4.477-1.317 8.173-4.301 10.406-8.399.219-.399.269-.862.139-1.3zM16.784 14.002c.373-.11.758-.166 1.143-.166 1.779 0 3.372 1.193 3.875 2.901.629 2.138-.599 4.39-2.737 5.02-.373.11-.757.166-1.142.166-1.778 0-3.372-1.193-3.875-2.902-.63-2.137.598-4.389 2.736-5.019z"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f308.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#8767AC" d="M36 1C16.118 1 1 16.118 1 36h17.042c0-9.917 8.042-17.958 17.958-17.958V1z"/><path fill="#EB2027" d="M0 35.999h3.042c0-18.189 14.734-32.935 32.917-32.957V0C16.095.023 0 16.131 0 35.999z"/><path fill="#F19020" d="M3.083 36h3C6.083 19.468 19.473 6.065 36 6.043v-3C17.817 3.065 3.083 17.811 3.083 36z"/><path fill="#FFCB4C" d="M6.083 36h3C9.083 21.125 21.13 9.065 36 9.043v-3C19.473 6.065 6.083 19.468 6.083 36z"/><path fill="#5C903F" d="M9.083 36h3c0-13.217 10.705-23.935 23.917-23.957v-3C21.13 9.065 9.083 21.125 9.083 36z"/><path fill="#226798" d="M12.083 36h3c0-11.56 9.362-20.934 20.917-20.956v-3.001C22.788 12.065 12.083 22.783 12.083 36z"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f30a.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#269" d="M33.398 23.678c-7.562 4.875-20.062-.438-18.375-8.062 1.479-6.684 9.419-4.763 11.225-3.861 1.806.902.713-3.889-3.475-5.327C17.1 4.48 10.156 4.893 7.961 14.678c-1.5 6.687 1.438 16.062 12.719 16.187 11.281.125 12.718-7.187 12.718-7.187z"/><path fill="#55ACEE" d="M35.988 25.193c0-2.146-2.754-2.334-4-1.119-2.994 2.919-7.402 4.012-13.298 2.861-10.25-2-10.341-14.014-3.333-17.441 3.791-1.854 8.289.341 9.999 1.655 1.488 1.143 4.334 2.66 4.185.752C29.223 7.839 21.262-.86 10.595 4.64-.071 10.14 0 22.553 0 24.803v7.25C0 34.262 1.814 36 4.023 36h28C34.232 36 36 34.262 36 32.053c0 0-.004-6.854-.012-6.86z"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f30b.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#292F33" d="M12 36V16s-1.17 1.053-2.354 1.929c-.313.231-1.977.79-2.312 1.04-1.762 1.315-2.552 3.841-2.792 4.167C4.083 23.76 0 36 0 36h12z"/><path fill="#4B545D" d="M32 36l-5.5-17.75-8.5-5.656-6.458 2.208C11.135 15.583 10 18.25 10 18.25L8.75 22 0 36h32z"/><path fill="#292F33" d="M18.135 25.726c-.145-.513-.026-.97-.177-1.476-.148-.499-.566-1.047-.693-1.478-.265-.899-.454-1.583-.445-1.772.024-.469.894-.401 1.102.469.293 1.224.688 1.594.688 1.594s.084-3.381-.632-4.068c.145-.231.289-.476.418-.744.625-1.292.646-2.104.646-2.104S16.521 19.208 15.82 21c-.701 1.792 1 8 1 8l-4 7h4.467s-.474-1.469-.467-1.969c.007-.5 1.899-3.688 2-5.031.041-.545-.285-1.861-.685-3.274zm15.74.024c-.515-.586-1.841-1.42-3.128-2.154 0 0-2.335-5.596-3.622-7.263s-3.667-3-3.667-3l-2.646 1.479s1.705 1.446 2.646 3.062.689 3.519.745 3.908c.067.467.059.973.588 1.759 1.045 1.553 1.726 1.541 2.183 2.276.049.145.099.291.15.432.14.385.68.656.792 1.021.175.576.878 2.284.682 3.09-.106.437-.224 1.521-.307 2.014-.341 2.043.766 3.626.766 3.626H36s-1-8.969-2.125-10.25z"/><path fill="#FFAC33" d="M26.098 22.256c-.772-.754-1.187-1.898-1.229-3.294.173-1.667-4.662-4.923-4.662-4.923l-1.915.316s4.112 1.681 4.708 4.453c.297 1.381-.107 3.271-.208 4.11-.136 1.119.661 1.768.875 2.832.111.55.007 1.694-.14 2.878-.075.602-.348 1.175-.422 1.726-.192 1.424-.12 2.472.229 1.812.422-.796.653-1.922 1.263-3.606.293-.81.311-1.743.239-2.811-.031-.461.111-1.009.061-1.521-.051-.528-.294-1.02-.333-1.604-.011-.166.03-.738.092-1.444.074.012.146.054.216.172.938 1.562.764 3.025 1.276 2.581.41-.356.493-1.146-.05-1.677z"/><path fill="#292F33" d="M8.77 24.997s-4.437 3.087-5.603 4.545S0 36 0 36h4.5s.042-1.896-.156-2.688.312-2.455.906-2.875c1.417-1 2.381-2.31 2.52-2.149.521.604.521 1.208.521 1.208s.499-1.378.521-2.542-.042-1.957-.042-1.957z"/><path fill="#FFAC33" d="M18 12.594s-3.844-1.094-6.458 1.25C10.351 14.911 10.48 15.896 10 18.25s-1.861 3.086-2.062 4.021c-.396 1.833-1.852 3.23-2.417 4.104-.328.508-.758 1.336-1.038 1.802-.586.978-1.014 1.805-1.066 2.239-.125 1.042 1.833-1.208 1.833-1.208l3.281-4.035c-.107 2.301-.924 4.738-.031 4.514.75-.188 1.363-1.136 1.016-2.156-.454-1.336-.338-2.483-.094-3.456.05-.089 2.252-4.007 2.787-7.117.542-3.146 5.381-3.976 5.381-3.976l2.244.862.417-1.066L18 12.594z"/><path fill="#E95F28" d="M27.953 17c-1.328-1.75-3.286-3.685-4.234-3.988-.823-.263-.428.815-.428.815s2.833 1.236 4.271 6.736c.686 2.625 2.765 3.711 3.344 5.344 1.938 5.469 4.166 6.463 2.943 4.747S29.281 18.75 27.953 17zm-9.972 1.535c-.108-.166-.205-.306-.294-.437 1.259-1.904 2.751-4.035 2.751-4.035s-2.912-.294-3 .031c-.875 3.219-1.669 4.238-2.312 6.281-1.876 5.958 1.21 9.869 1.694 8.625.388-1-.211-3.746-.672-5.373s-.266-2.002-.169-2.669c.034-.233.594-1.153 1.303-2.244.089.071.172.163.243.29.446.8.653 2.26.753 3.251.115 1.139 1.134 1.653 1.696 1.25s-.188-2.422-1.41-3.726c-.289-.31-.392-.95-.583-1.244z"/><path fill="#E95F28" d="M23.969 13.125s.594 1.156-1.635 1.135c-.584-.005-.861.512-1.625.576-.636.053-1.509-.243-2.229-.243-.72 0-1.55.491-2.186.438-.766-.064-1.659-.834-2.231-.959-1.062-.232-1.792-.289-1.792-.646 0-.357 1.207-.789 2.271-1.021.571-.125 1.058.285 1.822.221.636-.053 1.291-.101 2.011-.101.72 0 1.415-.431 2.051-.377.766.064 1.403.432 1.979.535.683.123 1.088.244 1.314.329.185.069.25.113.25.113z"/><path fill="#FFAC33" d="M25.531 6.906s-3.455-1.365-6.764-1.365-7.392 1.886-7.392 1.886c3.25 2.764 3.119 5.697 3.119 5.697h7.688c0 .001 1.162-4.052 3.349-6.218z"/><path fill="#FFAC33" d="M22.182 13.125s-.056.21-.4.312c-.091.027-.307-.048-.453 0-.174.057-.486.201-.641.219-.166.02-.546-.094-.734-.078-.344.028-.519.159-.922.172-.273.008-.401-.098-.693-.098-.109 0-.341-.097-.525-.089-.303.012-.583.13-.75.125-.453-.014-.545-.216-.922-.25-.365-.032-.625.141-.891.094-.502-.089-.756-.406-.756-.406 0-.291 1.721-.527 3.844-.527s3.843.526 3.843.526z"/><path fill="#E95F28" d="M17.145 13.682s-.07-.575-.301-1.367c-.615-2.107-.594-3.628-.594-3.628l-1.396.667s.729 1.396 1.305 4.093c0 0 .2.005.429.129s.557.106.557.106zm1.698.063c.004-.228.01-.715.074-1.214.063-.492.321-1.677.417-2.26.163-.995.117-1.696.333-2.083l-2.229.083s.471.931.583 2.042c.088.866.001 2.239.195 3.327 0 0 .063.017.149.024.043.003.14.003.192.012.157.026.286.069.286.069zm2.212-.2s.462-1.455.62-2.446c.257-1.613 1.714-3.985 2.106-4.38l-2.828-.094s.069 2.111-.058 3.491c-.096 1.043-.598 1.991-.519 3.503 0 0 .134.05.311.037.155-.012.368-.111.368-.111z"/><path fill="#CCD6DD" d="M30.375 2.039c-.045 0-.088.01-.132.013-.193-.446-.635-.76-1.153-.76-.235 0-.443.082-.631.194-.448-.72-1.241-1.204-2.152-1.204-.814 0-1.531.39-1.996.985-.493-.336-1.088-.534-1.729-.534-1.154 0-2.148.644-2.674 1.585-.265-.612-.874-1.041-1.583-1.041-.55 0-1.035.263-1.351.664C16.584.815 15.525 0 14.266 0c-1.015 0-1.902.528-2.414 1.322-.141-.021-.283-.043-.43-.043-.802 0-1.526.33-2.048.859-.068-.005-.132-.02-.201-.02-.034 0-.066.009-.099.01-.308-.398-.783-.657-1.323-.657-.526 0-.99.247-1.297.626-.17-.05-.347-.084-.534-.084-1.06 0-1.92.86-1.92 1.921s.86 1.921 1.921 1.921c.055 0 .106-.012.16-.016.217.271.536.456.91.456.046 0 .085-.021.129-.026.473.62 1.212 1.026 2.051 1.026.19 0 .374-.023.552-.062.35.278.758.485 1.213.576.644 1.121 1.839 1.885 3.224 1.885 1.311 0 2.459-.679 3.125-1.701.552.677 1.382 1.118 2.323 1.118 1.392 0 2.552-.95 2.897-2.233.026.001.05.008.076.008.367 0 .714-.075 1.041-.193.516.403 1.157.653 1.863.653 1.062 0 1.995-.546 2.539-1.37.194.139.419.238.676.238.482 0 .893-.291 1.078-.704.188.067.387.11.597.11.988 0 1.789-.801 1.789-1.789s-.801-1.792-1.789-1.792z"/><circle fill="#AAB8C2" cx="14.25" cy="4.703" r="2.024"/><circle fill="#AAB8C2" cx="11.75" cy="4.537" r="2.001"/><circle fill="#AAB8C2" cx="9.784" cy="4.628" r="1.11"/><circle fill="#AAB8C2" cx="23.659" cy="3.669" r="1.11"/><circle fill="#AAB8C2" cx="26.208" cy="3.287" r="1.495"/><circle fill="#AAB8C2" cx="15.976" cy="4.263" r="1.632"/><circle fill="#AAB8C2" cx="25.555" cy="4.163" r="1.784"/><circle fill="#AAB8C2" cx="17.421" cy="4.841" r="1.532"/><circle fill="#AAB8C2" cx="14.203" cy="3.531" r="1.7"/><circle fill="#AAB8C2" cx="14.162" cy="5.274" r="2.86"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f319.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFD983" d="M30.312.776C32 19 20 32 .776 30.312c8.199 7.717 21.091 7.588 29.107-.429C37.9 21.867 38.03 8.975 30.312.776z"/><path d="M30.705 15.915c-.453.454-.453 1.189 0 1.644.454.453 1.189.453 1.643 0 .454-.455.455-1.19 0-1.644-.453-.454-1.189-.454-1.643 0zm-16.022 14.38c-.682.681-.682 1.783 0 2.465.68.682 1.784.682 2.464 0 .681-.682.681-1.784 0-2.465-.68-.682-1.784-.682-2.464 0zm13.968-2.147c-1.135 1.135-2.974 1.135-4.108 0-1.135-1.135-1.135-2.975 0-4.107 1.135-1.136 2.974-1.136 4.108 0 1.135 1.133 1.135 2.973 0 4.107z" fill="#FFCC4D"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f31f.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFAC33" d="M28.84 17.638c-.987 1.044-1.633 3.067-1.438 4.493l.892 6.441c.197 1.427-.701 2.087-1.996 1.469l-5.851-2.796c-1.295-.62-3.408-.611-4.7.018l-5.826 2.842c-1.291.629-2.193-.026-2.007-1.452l.843-6.449c.186-1.427-.475-3.444-1.47-4.481l-4.494-4.688c-.996-1.037-.655-2.102.755-2.365l6.37-1.188c1.41-.263 3.116-1.518 3.793-2.789L16.762.956c.675-1.271 1.789-1.274 2.473-.009L22.33 6.66c.686 1.265 2.4 2.507 3.814 2.758l6.378 1.141c1.412.252 1.761 1.314.774 2.359l-4.456 4.72z"/><path fill="#FFD983" d="M9.783 2.181c1.023 1.413 2.446 4.917 1.717 5.447-.728.531-3.607-1.91-4.63-3.323-1.022-1.413-.935-2.668-.131-3.254.804-.587 2.02-.282 3.044 1.13zm19.348 2.124C28.109 5.718 25.23 8.16 24.5 7.627c-.729-.53.695-4.033 1.719-5.445C27.242.768 28.457.463 29.262 1.051c.803.586.89 1.841-.131 3.254zM16.625 33.291c-.001-1.746.898-5.421 1.801-5.421.897 0 1.798 3.675 1.797 5.42 0 1.747-.804 2.712-1.8 2.71-.994.002-1.798-.962-1.798-2.709zm16.179-9.262c-1.655-.539-4.858-2.533-4.579-3.395.277-.858 4.037-.581 5.69-.041 1.655.54 2.321 1.605 2.013 2.556-.308.95-1.469 1.42-3.124.88zM2.083 20.594c1.655-.54 5.414-.817 5.694.044.276.857-2.928 2.854-4.581 3.392-1.654.54-2.818.07-3.123-.88-.308-.95.354-2.015 2.01-2.556z"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f321.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#CCD6DD" d="M33.536 2.464c-1.953-1.953-5.118-1.953-7.071 0l-1.197 1.199 2.842 2.843c.391.391.391 1.024 0 1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-2.841-2.842-2.11 2.112 2.841 2.84c.391.39.391 1.023 0 1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-2.84-2.839-2.12 2.122 2.837 2.838c.391.391.391 1.024 0 1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-2.837-2.837-2.12 2.123 2.836 2.836c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-2.835-2.835-2.12 2.123 2.833 2.833c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293s-.512-.098-.707-.293l-2.833-2.832-1.781 1.785C4.107 21.03 1 24.151 1 28c0 3.866 3.134 7 7 7 3.832 0 6.941-3.081 6.995-6.9L33.536 9.536c1.952-1.953 1.952-5.119 0-7.072z"/><path fill="#DD2E44" d="M30.938 5.091c-.781-.781-2.047-.781-2.828 0L9.045 24.156c-1.338-.362-2.823-.035-3.873 1.015-1.562 1.562-1.562 4.095 0 5.657 1.562 1.562 4.095 1.562 5.657 0C11.867 29.79 12.2 28.326 11.858 27l19.08-19.08c.781-.781.781-2.048 0-2.829z"/><path fill="#292F33" d="M13.272 22.343c.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414l-2.833-2.833-1.413 1.415 2.833 2.832c.194.195.45.293.706.293zm3.536-3.535c.256 0 .512-.098.707-.293.391-.391.391-1.023 0-1.414l-2.836-2.836-1.413 1.415 2.835 2.835c.195.195.451.293.707.293zm3.535-3.536c.256 0 .512-.098.707-.293.391-.39.391-1.023 0-1.414l-2.837-2.838-1.413 1.415 2.837 2.837c.194.195.45.293.706.293zm3.536-3.536c.256 0 .512-.098.707-.293.391-.391.391-1.024 0-1.414l-2.841-2.84-1.413 1.415 2.84 2.839c.195.196.451.293.707.293zm3.523-3.523c.256 0 .512-.098.707-.293.391-.39.391-1.023 0-1.414l-2.842-2.843-1.413 1.415 2.841 2.842c.196.195.451.293.707.293z"/></svg>
\ No newline at end of file

browser/components/torpreferences/content/bridgemoji/svgs/1f32d.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#D99E82" d="M31.42 31.471c-3.515 3.515-9.213 3.515-12.728 0L4.55 17.328c-3.515-3.515-3.515-9.213 0-12.728 3.515-3.515 9.213-3.515 12.728 0L31.42 18.743c3.515 3.514 3.515 9.213 0 12.728z"/><path fill="#F7BBA6" d="M29.335 20.9c3.515 3.515 4.609 8.119 2.475 10.253-2.135 2.134-6.739 1.039-10.253-2.475L7.414 14.536c-3.515-3.515-4.609-8.12-2.475-10.253 2.134-2.134 6.738-1.04 10.253 2.475L29.335 20.9z"/><path fill="#DD2E44" d="M33.167 28.974c1.415 1.415 1.611 3.51.44 4.682-1.172 1.171-3.267.975-4.682-.44L2.732 7.025c-1.414-1.414-1.61-3.51-.439-4.682 1.171-1.171 3.268-.975 4.682.439l26.192 26.192z"/><path fill="#FFCC4D" d="M32.127 31.764c-.256 0-.512-.098-.707-.293-.916-.916-1.598-1.07-2.462-1.266-.988-.224-2.109-.478-3.435-1.803s-1.578-2.446-1.802-3.435c-.195-.863-.35-1.546-1.266-2.462-.915-.915-1.597-1.069-2.46-1.264-.989-.224-2.11-.477-3.434-1.801-1.323-1.324-1.576-2.444-1.799-3.432-.194-.862-.348-1.543-1.262-2.458-.914-.914-1.595-1.067-2.457-1.262-.988-.223-2.108-.476-3.432-1.799-1.322-1.322-1.575-2.442-1.798-3.43-.195-.863-.348-1.544-1.263-2.458-.391-.39-.391-1.023 0-1.414s1.023-.391 1.414 0c1.324 1.323 1.577 2.443 1.8 3.432.195.862.348 1.543 1.263 2.458.914.914 1.595 1.067 2.457 1.262.988.223 2.108.476 3.432 1.799 1.324 1.324 1.576 2.444 1.799 3.432.194.862.348 1.543 1.262 2.458.916.916 1.597 1.07 2.46 1.264.988.224 2.109.477 3.434 1.801 1.325 1.325 1.578 2.446 1.802 3.435.195.863.35 1.546 1.266 2.462s1.599 1.07 2.462 1.266c.989.224 2.11.478 3.435 1.803.391.391.391 1.023 0 1.414-.197.193-.453.291-.709.291z"/></svg>
\ No newline at end of file