morgan pushed to branch tor-browser-140.4.0esr-15.0-1 at The Tor Project / Applications / Tor Browser

Commits:

4 changed files:

Changes:

  • browser/base/content/navigator-toolbox.inc.xhtml
    ... ... @@ -100,12 +100,7 @@
    100 100 
     #include private-browsing-indicator.inc.xhtml
    101 101 
         <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>
    102 102
    103 
    -      <html:div id="tor-connect-titlebar-status" role="status">
    104 
    -        <html:img alt=""
    105 
    -                  src="chrome://global/content/torconnect/tor-not-connected-to-connected-animated.svg" />
    106 
    -        <html:span id="tor-connect-titlebar-status-label"></html:span>
    107 
    -      </html:div>
    108 
    -
    103 
    +#include ../../../toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml
    109 104 
     #include titlebar-items.inc.xhtml
    110 105
    111 106 
       </toolbar>
    ... ... @@ -526,6 +521,7 @@
    526 521 
         <hbox class="titlebar-spacer" type="post-tabs"/>
    527 522 
     #include private-browsing-indicator.inc.xhtml
    528 523 
         <toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>
    524 
    +#include ../../../toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml
    529 525 
     #include titlebar-items.inc.xhtml
    530 526 
       </toolbar>
    531 527

  • toolkit/components/torconnect/content/torConnectTitlebarStatus.css
    1 
    -#tor-connect-titlebar-status:not([hidden]) {
    1 
    +.tor-connect-titlebar-status:not([hidden]) {
    2 2 
       display: flex;
    3 3 
       align-items: center;
    4 
    -  /* Want same as #private-browsing-indicator-with-label */
    4 
    +  /* Want same as .private-browsing-indicator-with-label */
    5 5 
       margin-inline: 7px;
    6 
    +
    7 
    +  #navigator-toolbox[tabs-hidden] #TabsToolbar > & {
    8 
    +    /* Hide in the tabs bar when the tabs bar is hidden. E.g. when using
    9 
    +     * vertical tabs. Should be shown in the #nav-bar instead.
    10 
    +     * See tor-browser#44101. */
    11 
    +    display: none;
    12 
    +  }
    13 
    +
    14 
    +  #navigator-toolbox:not([tabs-hidden]) #nav-bar > & {
    15 
    +    /* Hide in the nav bar when the (horizontal) tabs bar is visible. */
    16 
    +    display: none;
    17 
    +  }
    6 18 
     }
    7 19
    8 
    -#tor-connect-titlebar-status-label {
    20 
    +.tor-connect-titlebar-status-label {
    9 21 
       margin-inline: 6px;
    10 22 
       white-space: nowrap;
    11 23 
     }
    12 24
    13 
    -#tor-connect-titlebar-status img {
    25 
    +.tor-connect-titlebar-status img {
    14 26 
       -moz-context-properties: fill, stroke;
    15 27 
       fill: var(--icon-color);
    16 28 
       stroke: var(--icon-color);
    ... ... @@ -25,7 +37,7 @@
    25 37 
       object-position: var(--tor-not-connected-offset);
    26 38 
     }
    27 39
    28 
    -#tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {
    40 
    +.tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {
    29 41 
       /* NOTE: context-stroke is only used for the first "frame" for the slash. When
    30 42 
        * we assign the potentially-blocked class, we do *not* expect to be connected
    31 43 
        * at the same time, so we only expect this first frame to be visible in this
    ... ... @@ -33,17 +45,17 @@
    33 45 
       stroke: var(--icon-color-critical);
    34 46 
     }
    35 47
    36 
    -#tor-connect-titlebar-status.tor-connect-status-connected img {
    48 
    +.tor-connect-titlebar-status.tor-connect-status-connected img {
    37 49 
       object-position: var(--tor-connected-offset);
    38 50 
     }
    39 51
    40 52 
     @media not ((prefers-contrast) or (forced-colors)) {
    41 53 
       /* Make the connected text and icon purple. */
    42 
    -  #tor-connect-titlebar-status.tor-connect-status-connected {
    54 
    +  .tor-connect-titlebar-status.tor-connect-status-connected {
    43 55 
         color: var(--tor-text-color);
    44 56 
       }
    45 57
    46 
    -  #tor-connect-titlebar-status.tor-connect-status-connected img {
    58 
    +  .tor-connect-titlebar-status.tor-connect-status-connected img {
    47 59 
         fill: var(--tor-text-color);
    48 60 
         stroke: var(--tor-text-color);
    49 61 
       }
    ... ... @@ -60,11 +72,11 @@
    60 72 
     }
    61 73
    62 74 
     @media (prefers-reduced-motion: no-preference) {
    63 
    -  #tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition {
    75 
    +  .tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition {
    64 76 
         transition: color 1000ms;
    65 77 
       }
    66 78
    67 
    -  #tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition img {
    79 
    +  .tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition img {
    68 80 
         transition: fill 1000ms, stroke 1000ms;
    69 81 
         animation-name: onion-not-connected-to-connected;
    70 82 
         animation-delay: 200ms;

  • toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml
    1 
    +<html:div class="tor-connect-titlebar-status" role="status">
    2 
    +  <html:img
    3 
    +    alt=""
    4 
    +    src="chrome://global/content/torconnect/tor-not-connected-to-connected-animated.svg"
    5 
    +  />
    6 
    +  <html:span class="tor-connect-titlebar-status-label"></html:span>
    7 
    +</html:div>

  • toolkit/components/torconnect/content/torConnectTitlebarStatus.js
    ... ... @@ -3,21 +3,15 @@
    3 3 
      */
    4 4 
     var gTorConnectTitlebarStatus = {
    5 5 
       /**
    6 
    -   * The status element in the title bar.
    6 
    +   * The status elements and their labels.
    7 7 
        *
    8 
    -   * @type {Element}
    8 
    +   * @type {{status: Element, label: Element}[]}
    9 9 
        */
    10 
    -  node: null,
    11 
    -  /**
    12 
    -   * The status label.
    13 
    -   *
    14 
    -   * @type {Element}
    15 
    -   */
    16 
    -  label: null,
    10 
    +  _elements: [],
    17 11 
       /**
    18 12 
        * Whether we are connected, or null if the connection state is not yet known.
    19 13 
        *
    20 
    -   * @type {bool?}
    14 
    +   * @type {boolean?}
    21 15 
        */
    22 16 
       connected: null,
    23 17
    ... ... @@ -31,21 +25,21 @@ var gTorConnectTitlebarStatus = {
    31 25
    32 26 
         this._strings = TorStrings.torConnect;
    33 27
    34 
    -    this.node = document.getElementById("tor-connect-titlebar-status");
    35 
    -    this.label = document.getElementById("tor-connect-titlebar-status-label");
    28 
    +    this._elements = Array.from(
    29 
    +      document.querySelectorAll(".tor-connect-titlebar-status"),
    30 
    +      element => {
    31 
    +        return {
    32 
    +          status: element,
    33 
    +          label: element.querySelector(".tor-connect-titlebar-status-label"),
    34 
    +        };
    35 
    +      }
    36 
    +    );
    36 37 
         // The title also acts as an accessible name for the role="status".
    37 
    -    this.node.setAttribute("title", this._strings.titlebarStatusName);
    38 
    +    for (const { status } of this._elements) {
    39 
    +      status.setAttribute("title", this._strings.titlebarStatusName);
    40 
    +    }
    38 41
    39 
    -    this._observeTopic = TorConnectTopics.StageChange;
    40 
    -    this._stateListener = {
    41 
    -      observe: (subject, topic) => {
    42 
    -        if (topic !== this._observeTopic) {
    43 
    -          return;
    44 
    -        }
    45 
    -        this._torConnectStateChanged();
    46 
    -      },
    47 
    -    };
    48 
    -    Services.obs.addObserver(this._stateListener, this._observeTopic);
    42 
    +    Services.obs.addObserver(this, TorConnectTopics.StageChange);
    49 43
    50 44 
         this._torConnectStateChanged();
    51 45 
       },
    ... ... @@ -54,7 +48,15 @@ var gTorConnectTitlebarStatus = {
    54 48 
        * De-initialize the component.
    55 49 
        */
    56 50 
       uninit() {
    57 
    -    Services.obs.removeObserver(this._stateListener, this._observeTopic);
    51 
    +    Services.obs.removeObserver(this, TorConnectTopics.StageChange);
    52 
    +  },
    53 
    +
    54 
    +  observe(subject, topic) {
    55 
    +    switch (topic) {
    56 
    +      case TorConnectTopics.StageChange:
    57 
    +        this._torConnectStateChanged();
    58 
    +        break;
    59 
    +    }
    58 60 
       },
    59 61
    60 62 
       /**
    ... ... @@ -67,7 +69,7 @@ var gTorConnectTitlebarStatus = {
    67 69 
         switch (TorConnect.stageName) {
    68 70 
           case TorConnectStage.Disabled:
    69 71 
             // Hide immediately.
    70 
    -        this.node.hidden = true;
    72 
    +        this._setHidden(true);
    71 73 
             return;
    72 74 
           case TorConnectStage.Bootstrapped:
    73 75 
             textId = "titlebarStatusConnected";
    ... ... @@ -85,7 +87,9 @@ var gTorConnectTitlebarStatus = {
    85 87 
             }
    86 88 
             break;
    87 89 
         }
    88 
    -    this.label.textContent = this._strings[textId];
    90 
    +    for (const { label } of this._elements) {
    91 
    +      label.textContent = this._strings[textId];
    92 
    +    }
    89 93 
         if (this.connected !== connected) {
    90 94 
           // When we are transitioning from
    91 95 
           //   this.connected = false
    ... ... @@ -104,11 +108,13 @@ var gTorConnectTitlebarStatus = {
    104 108 
           //
    105 109 
           // We only expect this latter case when opening a new window after
    106 110 
           // bootstrapping has already completed. See tor-browser#41850.
    107 
    -      this.node.classList.toggle(
    108 
    -        "tor-connect-status-animate-transition",
    109 
    -        connected && this.connected !== null
    110 
    -      );
    111 
    -      this.node.classList.toggle("tor-connect-status-connected", connected);
    111 
    +      for (const { status } of this._elements) {
    112 
    +        status.classList.toggle(
    113 
    +          "tor-connect-status-animate-transition",
    114 
    +          connected && this.connected !== null
    115 
    +        );
    116 
    +        status.classList.toggle("tor-connect-status-connected", connected);
    117 
    +      }
    112 118 
           this.connected = connected;
    113 119 
           if (connected) {
    114 120 
             this._startHiding();
    ... ... @@ -119,10 +125,23 @@ var gTorConnectTitlebarStatus = {
    119 125 
             this._stopHiding();
    120 126 
           }
    121 127 
         }
    122 
    -    this.node.classList.toggle(
    123 
    -      "tor-connect-status-potentially-blocked",
    124 
    -      potentiallyBlocked
    125 
    -    );
    128 
    +    for (const { status } of this._elements) {
    129 
    +      status.classList.toggle(
    130 
    +        "tor-connect-status-potentially-blocked",
    131 
    +        potentiallyBlocked
    132 
    +      );
    133 
    +    }
    134 
    +  },
    135 
    +
    136 
    +  /**
    137 
    +   * Hide or show the status.
    138 
    +   *
    139 
    +   * @param {boolean} hide - Whether to hide the status.
    140 
    +   */
    141 
    +  _setHidden(hide) {
    142 
    +    for (const { status } of this._elements) {
    143 
    +      status.hidden = hide;
    144 
    +    }
    126 145 
       },
    127 146
    128 147 
       /**
    ... ... @@ -134,7 +153,7 @@ var gTorConnectTitlebarStatus = {
    134 153 
           return;
    135 154 
         }
    136 155 
         this._hidingTimeout = setTimeout(() => {
    137 
    -      this.node.hidden = true;
    156 
    +      this._setHidden(true);
    138 157 
         }, 5000);
    139 158 
       },
    140 159
    ... ... @@ -146,6 +165,6 @@ var gTorConnectTitlebarStatus = {
    146 165 
           clearTimeout(this._hidingTimeout);
    147 166 
           this._hidingTimeout = 0;
    148 167 
         }
    149 
    -    this.node.hidden = false;
    168 
    +    this._setHidden(false);
    150 169 
       },
    151 170 
     };

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help Notification message regarding https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/23c8a66bc58a1df5654925f9506f6adc3c56b5ab at 1760551000