morgan pushed to branch tor-browser-140.4.0esr-15.0-1 at The Tor Project / Applications / Tor Browser Commits: 23c8a66b by Henry Wilkes at 2025-10-15T17:43:21+00:00 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. - - - - - 4 changed files: - browser/base/content/navigator-toolbox.inc.xhtml - toolkit/components/torconnect/content/torConnectTitlebarStatus.css - + toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml - toolkit/components/torconnect/content/torConnectTitlebarStatus.js Changes: ===================================== browser/base/content/navigator-toolbox.inc.xhtml ===================================== @@ -100,12 +100,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> @@ -526,6 +521,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 ===================================== @@ -1,16 +1,28 @@ -#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; animation-name: onion-not-connected-to-connected; animation-delay: 200ms; ===================================== toolkit/components/torconnect/content/torConnectTitlebarStatus.inc.xhtml ===================================== @@ -0,0 +1,7 @@ +<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 ===================================== @@ -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); + for (const { status } of this._elements) { + status.setAttribute("title", this._strings.titlebarStatusName); + } - this._observeTopic = TorConnectTopics.StageChange; - this._stateListener = { - observe: (subject, topic) => { - if (topic !== this._observeTopic) { - return; - } - 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( - "tor-connect-status-animate-transition", - connected && this.connected !== null - ); - this.node.classList.toggle("tor-connect-status-connected", connected); + for (const { status } of this._elements) { + status.classList.toggle( + "tor-connect-status-animate-transition", + connected && this.connected !== null + ); + 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( - "tor-connect-status-potentially-blocked", - potentiallyBlocked - ); + 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); }, }; View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/23c8a66b... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/23c8a66b... You're receiving this email because of your account on gitlab.torproject.org.
participants (1)
-
morgan (＠morgan)