Commit 986bdcb6 authored by Henry Wilkes's avatar Henry Wilkes Committed by brizental
Browse files

fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser 

TB 44101: Show tor connection status in the nav bar when the tab bar is
hidden.
parent d0dfa538

browser/base/content/navigator-toolbox.inc.xhtml

+2 −6
Changes for browser/base/content/navigator-toolbox.inc.xhtml: 2 added lines, 6 removed lines.
Original line number Diff line number Diff line
@@ -106,12 +106,7 @@ 
#include private-browsing-indicator.inc.xhtml

    <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>



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

        <html:img alt=""

                  src="chrome://global/content/torconnect/tor-not-connected-to-connected-animated.svg" />

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

      </html:div>



#include ../../../toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml

#include titlebar-items.inc.xhtml



  </toolbar>
@@ -570,6 +565,7 @@ 
    <hbox class="titlebar-spacer" type="post-tabs"/>

#include private-browsing-indicator.inc.xhtml

    <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>

#include ../../../toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml

#include titlebar-items.inc.xhtml

  </toolbar>

toolkit/components/torconnect/content/torConnectTitlebarStatus.css

+22 −10
Changes for toolkit/components/torconnect/content/torConnectTitlebarStatus.css: 22 added lines, 10 removed lines.
Original line number Diff line number Diff line 
#tor-connect-titlebar-status:not([hidden]) {

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

  display: flex;

  align-items: center;

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

  /* Want same as .private-browsing-indicator-with-label */

  margin-inline: 7px;



  #navigator-toolbox[tabs-hidden] #TabsToolbar > & {

    /* Hide in the tabs bar when the tabs bar is hidden. E.g. when using

     * vertical tabs. Should be shown in the #nav-bar instead.

     * See tor-browser#44101. */

    display: none;

  }



  #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {

    /* Hide in the nav bar when the (horizontal) tabs bar is visible. */

    display: none;

  }

}



#tor-connect-titlebar-status-label {

.tor-connect-titlebar-status-label {

  margin-inline: 6px;

  white-space: nowrap;

}



#tor-connect-titlebar-status img {

.tor-connect-titlebar-status img {

  -moz-context-properties: fill, stroke;

  fill: var(--icon-color);

  stroke: var(--icon-color);
@@ -25,7 +37,7 @@ 
  object-position: var(--tor-not-connected-offset);

}



#tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {

.tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {

  /* NOTE: context-stroke is only used for the first "frame" for the slash. When

   * we assign the potentially-blocked class, we do *not* expect to be connected

   * at the same time, so we only expect this first frame to be visible in this
@@ -33,17 +45,17 @@ 
  stroke: var(--icon-color-critical);

}



#tor-connect-titlebar-status.tor-connect-status-connected img {

.tor-connect-titlebar-status.tor-connect-status-connected img {

  object-position: var(--tor-connected-offset);

}



@media not ((prefers-contrast) or (forced-colors)) {

  /* Make the connected text and icon purple. */

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

  .tor-connect-titlebar-status.tor-connect-status-connected {

    color: var(--tor-text-color);

  }



  #tor-connect-titlebar-status.tor-connect-status-connected img {

  .tor-connect-titlebar-status.tor-connect-status-connected img {

    fill: var(--tor-text-color);

    stroke: var(--tor-text-color);

  }
@@ -60,11 +72,11 @@ 
}



@media (prefers-reduced-motion: no-preference) {

  #tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition {

  .tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition {

    transition: color 1000ms;

  }



  #tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition img {

  .tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition img {

    transition:

      fill 1000ms,

      stroke 1000ms;

toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml

0 → 100644
+7 −0
Changes for toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml: 7 added lines, 0 removed lines.
Original line number Diff line number Diff line 
<html:div class="tor-connect-titlebar-status" role="status">

  <html:img

    alt=""

    src="chrome://global/content/torconnect/tor-not-connected-to-connected-animated.svg"

  />

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

</html:div>

toolkit/components/torconnect/content/torConnectTitlebarStatus.js

+50 −31
Changes for toolkit/components/torconnect/content/torConnectTitlebarStatus.js: 50 added lines, 31 removed lines.
Original line number Diff line number Diff line
@@ -3,21 +3,15 @@ 
 */

var gTorConnectTitlebarStatus = {

  /**

   * The status element in the title bar.

   * The status elements and their labels.

   *

   * @type {Element}

   * @type {{status: Element, label: Element}[]}

   */

  node: null,

  /**

   * The status label.

   *

   * @type {Element}

   */

  label: null,

  _elements: [],

  /**

   * Whether we are connected, or null if the connection state is not yet known.

   *

   * @type {bool?}

   * @type {boolean?}

   */

  connected: null,
@@ -31,21 +25,21 @@ var gTorConnectTitlebarStatus = { 


    this._strings = TorStrings.torConnect;



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

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

    this._elements = Array.from(

      document.querySelectorAll(".tor-connect-titlebar-status"),

      element => {

        return {

          status: element,

          label: element.querySelector(".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.StageChange;

    this._stateListener = {

      observe: (subject, topic) => {

        if (topic !== this._observeTopic) {

          return;

    for (const { status } of this._elements) {

      status.setAttribute("title", this._strings.titlebarStatusName);

    }

        this._torConnectStateChanged();

      },

    };

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



    Services.obs.addObserver(this, TorConnectTopics.StageChange);



    this._torConnectStateChanged();

  },
@@ -54,7 +48,15 @@ var gTorConnectTitlebarStatus = { 
   * De-initialize the component.

   */

  uninit() {

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

    Services.obs.removeObserver(this, TorConnectTopics.StageChange);

  },



  observe(subject, topic) {

    switch (topic) {

      case TorConnectTopics.StageChange:

        this._torConnectStateChanged();

        break;

    }

  },



  /**
@@ -67,7 +69,7 @@ var gTorConnectTitlebarStatus = { 
    switch (TorConnect.stageName) {

      case TorConnectStage.Disabled:

        // Hide immediately.

        this.node.hidden = true;

        this._setHidden(true);

        return;

      case TorConnectStage.Bootstrapped:

        textId = "titlebarStatusConnected";
@@ -85,7 +87,9 @@ var gTorConnectTitlebarStatus = { 
        }

        break;

    }

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

    for (const { label } of this._elements) {

      label.textContent = this._strings[textId];

    }

    if (this.connected !== connected) {

      // When we are transitioning from

      //   this.connected = false
@@ -104,11 +108,13 @@ var gTorConnectTitlebarStatus = { 
      //

      // We only expect this latter case when opening a new window after

      // bootstrapping has already completed. See tor-browser#41850.

      this.node.classList.toggle(

      for (const { status } of this._elements) {

        status.classList.toggle(

          "tor-connect-status-animate-transition",

          connected && this.connected !== null

        );

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

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

      }

      this.connected = connected;

      if (connected) {

        this._startHiding();
@@ -119,10 +125,23 @@ var gTorConnectTitlebarStatus = { 
        this._stopHiding();

      }

    }

    this.node.classList.toggle(

    for (const { status } of this._elements) {

      status.classList.toggle(

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

        potentiallyBlocked

      );

    }

  },



  /**

   * Hide or show the status.

   *

   * @param {boolean} hide - Whether to hide the status.

   */

  _setHidden(hide) {

    for (const { status } of this._elements) {

      status.hidden = hide;

    }

  },



  /**
@@ -134,7 +153,7 @@ var gTorConnectTitlebarStatus = { 
      return;

    }

    this._hidingTimeout = setTimeout(() => {

      this.node.hidden = true;

      this._setHidden(true);

    }, 5000);

  },
@@ -146,6 +165,6 @@ var gTorConnectTitlebarStatus = { 
      clearTimeout(this._hidingTimeout);

      this._hidingTimeout = 0;

    }

    this.node.hidden = false;

    this._setHidden(false);

  },

};