+  TorConnectState: "resource:///modules/TorConnect.jsm",

+  TorConnectTopics: "resource:///modules/TorConnect.jsm",

+XPCOMUtils.defineLazyScriptGetter(

+  this,

+  ["gTorConnectUrlbarButton"],

+  "chrome://browser/content/torconnect/torConnectUrlbarButton.js"

+);

+XPCOMUtils.defineLazyScriptGetter(

+  this,

+  ["gTorConnectTitlebarStatus"],

+  "chrome://browser/content/torconnect/torConnectTitlebarStatus.js"

+);

+    gTorConnectUrlbarButton.init();

+    gTorConnectTitlebarStatus.init();

+

+    gTorConnectUrlbarButton.uninit();

+    gTorConnectTitlebarStatus.uninit();

+    gTorCircuitPanel.uninit();

+<?xml-stylesheet href="chrome://browser/content/torconnect/torConnectTitlebarStatus.css" type="text/css"?>

+      <html:div id="tor-connect-titlebar-status" role="status">

+        <html:img alt="" id="tor-connect-titlebar-status-icon" />

+        <html:span id="tor-connect-titlebar-status-label"></html:span>

+      </html:div>

+

+

+            <hbox id="tor-connect-urlbar-button"

+                  role="button"

+                  class="tor-urlbar-button"

+                  hidden="true">

+              <label id="tor-connect-urlbar-button-label"/>

+            </hbox>

+

+#include ../../components/onionservices/content/onionlocation-urlbar.inc.xhtml

+      class="tor-urlbar-button"

+  <label id="onion-label"/>

+  -moz-context-properties: fill;

+  fill: currentColor;

+    // Prevent repeat triggering on keydown when the Enter key is held down.

+    // Without this, holding down Enter will continue to trigger the button's

+    // click event until the user stops holding. This means that a user can

+    // accidentally re-trigger a button several times. And if focus moves to a

+    // new button it can also get triggered, despite not receiving the initial

+    // keydown event.

+    //

+    // E.g. If the user presses down Enter on the "Connect" button it will

+    // trigger and focus will move to the "Cancel" button. This should prevent

+    // the user accidentally triggering the "Cancel" button if they hold down

+    // Enter for a little bit too long.

+        // If the keydown is a repeating Enter event, ignore it.

+        // NOTE: If firefox uses wayland display (rather than xwayland), the

+        // "repeat" event is always "false" so this will not work.

+        // See bugzilla bug 1784438. Also see bugzilla bug 1594003.

+        // Currently tor browser uses xwayland by default on linux.

+        if (event.key === "Enter" && event.repeat) {

+#tor-connect-titlebar-status:not([hidden]) {

+  display: flex;

+  align-items: center;

+  /* Want same as #private-browsing-indicator-with-label */

+  margin-inline: 7px;

+}

+

+#tor-connect-titlebar-status-label {

+  margin-inline: 6px;

+  white-space: nowrap;

+}

+

+#tor-connect-titlebar-status-icon {

+  -moz-context-properties: fill;

+  fill: currentColor;

+  width: 16px;

+  height: 16px;

+}

+

+#tor-connect-titlebar-status-icon.tor-connect-status-connected {

+  fill: var(--purple-60);

+}

+

+@media (prefers-color-scheme: dark) {

+  #tor-connect-titlebar-status-icon.tor-connect-status-connected {

+    fill: var(--purple-30);

+  }

+}

+

+#tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked {

+  fill: #c50042;

+}

+

+@media (prefers-color-scheme: dark) {

+  #tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked {

+    fill: #ff9aa2;

+  }

+}

+/* eslint-env mozilla/browser-window */

+

+/**

+ * A TorConnect status shown in the application title bar.

+ */

+var gTorConnectTitlebarStatus = {

+  /**

+   * The status element in the title bar.

+   *

+   * @type {Element}

+   */

+  node: null,

+  /**

+   * The status label.

+   *

+   * @type {Element}

+   */

+  label: null,

+  /**

+   * The status icon.

+   *

+   * @type {Element}

+   */

+  icon: null,

+

+  /**

+   * Initialize the component.

+   */

+  init() {

+    const { TorStrings } = ChromeUtils.import(

+      "resource:///modules/TorStrings.jsm"

+    );

+

+    this._strings = TorStrings.torConnect;

+

+    this.node = document.getElementById("tor-connect-titlebar-status");

+    this.icon = document.getElementById("tor-connect-titlebar-status-icon");

+    this.label = document.getElementById("tor-connect-titlebar-status-label");

+    // The title also acts as an accessible name for the role="status".

+    this.node.setAttribute("title", this._strings.titlebarStatusName);

+

+    this._observeTopic = TorConnectTopics.StateChange;

+    this._stateListener = {

+      observe: (subject, topic, data) => {

+        if (topic !== this._observeTopic) {

+          return;

+        }

+        this._torConnectStateChanged();

+      },

+    };

+    Services.obs.addObserver(this._stateListener, this._observeTopic);

+

+    this._torConnectStateChanged();

+  },

+

+  /**

+   * De-initialize the component.

+   */

+  deinit() {

+    Services.obs.removeObserver(this._stateListener, this._observeTopic);

+  },

+

+  /**

+   * Callback for when the TorConnect state changes.

+   */

+  _torConnectStateChanged() {

+    let textId;

+    let connected = false;

+    let potentiallyBlocked = false;

+    switch (TorConnect.state) {

+      case TorConnectState.Disabled:

+        // Hide immediately.

+        this.node.hidden = true;

+        return;

+      case TorConnectState.Bootstrapped:

+        this._startHiding();

+        textId = "titlebarStatusConnected";

+        connected = true;

+        break;

+      case TorConnectState.Bootstrapping:

+      case TorConnectState.AutoBootstrapping:

+        textId = "titlebarStatusConnecting";

+        break;

+      default:

+        if (TorConnect.potentiallyBlocked) {

+          textId = "titlebarStatusPotentiallyBlocked";

+          potentiallyBlocked = true;

+        } else {

+          textId = "titlebarStatusNotConnected";

+        }

+        break;

+    }

+    this.label.textContent = this._strings[textId];

+    this.icon.setAttribute(

+      "src",

+      connected

+        ? "chrome://browser/content/torconnect/onion.svg"

+        : "chrome://browser/content/torconnect/onion-slash-fillable.svg"

+    );

+    this.icon.classList.toggle("tor-connect-status-connected", connected);

+    this.icon.classList.toggle(

+      "tor-connect-status-potentially-blocked",

+      potentiallyBlocked

+    );

+  },

+

+  /**

+   * Mark the component to be hidden after some delay.

+   */

+  _startHiding() {

+    setTimeout(() => {

+      this.node.hidden = true;

+    }, 5000);

+  },

+};

+/* eslint-env mozilla/browser-window */

+

+/**

+ * A "Connect" button shown in the urlbar when not connected to tor and in tabs

+ * other than about:torconnect.

+ */

+var gTorConnectUrlbarButton = {

+  /**

+   * The urlbar button node.

+   *

+   * @type {Element}

+   */

+  button: null,

+  /**

+   * Whether we are active.

+   *

+   * @type {boolean}

+   */

+  _isActive: false,

+  /**

+   * Whether we are in the "about:torconnect" tab.

+   *

+   * @type {boolean}

+   */

+  // We init to "true" so that the button can only appear after the first page

+  // load.

+  _inAboutTorConnectTab: true,

+

+  /**

+   * Initialize the button.

+   */

+  init() {

+    if (this._isActive) {

+      return;

+    }

+    this._isActive = true;

+

+    const { TorStrings } = ChromeUtils.import(

+      "resource:///modules/TorStrings.jsm"

+    );

+

+    this.button = document.getElementById("tor-connect-urlbar-button");

+    document.getElementById("tor-connect-urlbar-button-label").value =

+      TorStrings.torConnect.torConnectButton;

+    this.button.addEventListener("click", event => {

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

+        return;

+      }

+      this.connect();

+    });

+    this.button.addEventListener("keydown", event => {

+      if (event.key !== "Enter" && event.key !== " ") {

+        return;

+      }

+      this.connect();

+    });

+

+    this._observeTopic = TorConnectTopics.StateChange;

+    this._stateListener = {

+      observe: (subject, topic, data) => {

+        if (topic !== this._observeTopic) {

+          return;

+        }

+        this._torConnectStateChanged();

+      },

+    };

+    Services.obs.addObserver(this._stateListener, this._observeTopic);

+

+    this._locationListener = {

+      onLocationChange: (webProgress, request, locationURI, flags) => {

+        if (

+          webProgress.isTopLevel &&

+          !(flags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT)

+        ) {

+          this._inAboutTorConnectTab = gBrowser.selectedBrowser.currentURI?.spec.startsWith(

+            "about:torconnect"

+          );

+          this._updateButtonVisibility();

+        }

+      },

+    };

+    // Notified of new locations for the currently selected browser (tab) *and*

+    // switching selected browser.

+    gBrowser.addProgressListener(this._locationListener);

+

+    this._torConnectStateChanged();

+  },

+

+  /**

+   * Deactivate and de-initialize the button.

+   */

+  deinit() {

+    if (!this._isActive) {

+      return;

+    }

+    this._isActive = false;

+

+    Services.obs.removeObserver(this._stateListener, this._observeTopic);

+    gBrowser.removeProgressListener(this._locationListener);

+    this._updateButtonVisibility();

+  },

+

+  /**

+   * Begin the tor connection bootstrapping process.

+   */

+  connect() {

+    TorConnect.openTorConnect({ beginBootstrap: true });

+  },

+

+  /**

+   * Callback for when the TorConnect state changes.

+   */

+  _torConnectStateChanged() {

+    if (

+      TorConnect.state === TorConnectState.Bootstrapped ||

+      TorConnect.state === TorConnectState.Disabled

+    ) {

+      this.deinit();

+      return;

+    }

+    this._updateButtonVisibility();

+  },

+

+  /**

+   * Callback when the TorConnect state, current browser location, or activation

+   * state changes.

+   */

+  _updateButtonVisibility() {

+    if (!this.button) {

+      return;

+    }

+    // NOTE: We do not manage focus when hiding the button. We only expect to

+    // move from "not hidden" to "hidden" when:

+    // + switching tabs to "about:torconnect", or

+    // + starting bootstrapping.

+    //

+    // When switching tabs, the normal tab switching logic will eventually move

+    // focus to the new tab or url bar, so whilst the focus may be lost

+    // temporarily when we hide the button, it will be re-established quickly on

+    // tab switch.

+    //

+    // And we don't expect bootstrapping to start whilst outside of the

+    // "about:torconnect", and the automatic bootstrapping should only trigger

+    // at the initial start.

+    this.button.hidden =

+      !this._isActive ||

+      this._inAboutTorConnectTab ||

+      !TorConnect.enabled ||

+      !TorConnect.canBeginBootstrap;

+    this.button.classList.toggle(

+      "tor-urlbar-button-plain",

+      TorConnect.potentiallyBlocked

+    );

+  },

+};

+    content/browser/torconnect/torConnectUrlbarButton.js           (content/torConnectUrlbarButton.js)

+    content/browser/torconnect/torConnectTitlebarStatus.js         (content/torConnectTitlebarStatus.js)

+    content/browser/torconnect/torConnectTitlebarStatus.css        (content/torConnectTitlebarStatus.css)

+  mask: url("chrome://browser/content/torconnect/onion-slash-fillable.svg");

+    │         │ beginAutoBootstrap()   │ cancelBootstrap()                │

+              let cancelled = false;

+                  cancelled = true;

+                if (cancelled) {

+                  // We ignore this error since it occurred after cancelling (by

+                  // the user). We assume the error is just a side effect of the

+                  // cancelling.

+                  // E.g. If the cancelling is triggered late in the process, we

+                  // get "Building circuits: Establishing a Tor circuit failed".

+                  // TODO: Maybe move this logic deeper in the process to know

+                  // when to filter out such errors triggered by cancelling.

+                  console.log(

+                    `TorConnect: Post-cancel error => ${message}; ${details}`

+                  );

+                  return;

+                }

+

+      // Titlebar status.

+      titlebarStatusName: "Tor connection",

+      titlebarStatusNotConnected: "Not connected",

+      titlebarStatusConnecting: "Connecting…",

+      titlebarStatusPotentiallyBlocked: "Potentially blocked",

+      titlebarStatusConnected: "Connected",

+@import url("chrome://browser/skin/tor-urlbar-button.css");

+  skin/classic/browser/tor-urlbar-button.css                   (../shared/tor-urlbar-button.css)

+.tor-urlbar-button:not([hidden]) {

+  --tor-urlbar-button-background-color: var(--purple-60);

+  background-color: var(--tor-urlbar-button-background-color);

+  /* FIXME: Use different colors for light and dark theme, rather than "white".

+   * See tor-browser#41787 */

+  color: white;

+  display: flex;

+  align-items: center;

+  gap: 0.5em;

+  border-radius: var(--urlbar-icon-border-radius);

+  --tor-urlbar-button-inline-padding: 8px;

+  padding-inline: var(--tor-urlbar-button-inline-padding);

+  margin: 0;

+}

+

+.tor-urlbar-button > * {

+  flex: 0 0 auto;

+  margin: 0;

+}

+

+.tor-urlbar-button:focus-visible {

+  /* This button lies within the urlbar, so if the outline extends beyond the

+   * button's boundary, it will be clipped by the urlbar.

+   * Most button's in the urlbar get around this by using --focus-outline-inset,

+   * but our button has a purple background, which does not contrast well with

+   * the focus outline.

+   * Therefore, we use an offset outline rather than an inset outline, and

+   * compensate by shrinking the button's width and height so that the outline

+   * fits within the non-focused button boundary. Essentially, this has a

+   * similar effect to using an inset outline that matches the color of the

+   * urlbar background, but we keep the rounded corners. */

+  outline: var(--focus-outline);

+  outline-offset: var(--focus-outline-offset);

+  /* Use the background color for the outline, same as in-content buttons. */

+  outline-color: var(--tor-urlbar-button-background-color);

+  /* Calculate the difference between the button's border area and the outline

+   * area. */

+  --tor-urlbar-focus-outline-difference: calc(

+    var(--focus-outline-offset)

+    + var(--focus-outline-width)

+  );

+  /* For the inline direction, we shrink the padding by the difference, and

+   * increase the margin by the same amount so that the button text remains in

+   * the same position.

+   * For the block direction, the height of the button is flexibly sized with

+   * the urlbar height, so we should only need to increase the margin. */

+  padding-inline: calc(

+    var(--tor-urlbar-button-inline-padding)

+    - var(--tor-urlbar-focus-outline-difference)

+  );

+  margin: var(--tor-urlbar-focus-outline-difference);

+}

+

+.tor-urlbar-button:focus-visible > * {

+  /* Negate the margin that would be added on focus to ensure the button does

+   * not grow in height.