diff --git a/browser/components/torconnect/content/torConnectTitlebarStatus.css b/browser/components/torconnect/content/torConnectTitlebarStatus.css index 6b55a39a0cc4928533eb1aad289deb5282889e46..c57f377a2d1a4df5590066325af41e482f9b0740 100644 --- a/browser/components/torconnect/content/torConnectTitlebarStatus.css +++ b/browser/components/torconnect/content/torConnectTitlebarStatus.css @@ -64,11 +64,11 @@ } @media (prefers-reduced-motion: no-preference) { - #tor-connect-titlebar-status.tor-connect-status-connected { + #tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition { transition: color 1000ms; } - #tor-connect-titlebar-status.tor-connect-status-connected img { + #tor-connect-titlebar-status.tor-connect-status-connected.tor-connect-status-animate-transition img { animation-name: onion-not-connected-to-connected; animation-delay: 200ms; animation-fill-mode: both; diff --git a/browser/components/torconnect/content/torConnectTitlebarStatus.js b/browser/components/torconnect/content/torConnectTitlebarStatus.js index 66d1f3e3ea8275b2086b941d560104d79b605940..4871fd169e8f21032e35c8bf6160207d8d546bf4 100644 --- a/browser/components/torconnect/content/torConnectTitlebarStatus.js +++ b/browser/components/torconnect/content/torConnectTitlebarStatus.js @@ -16,6 +16,12 @@ var gTorConnectTitlebarStatus = { * @type {Element} */ label: null, + /** + * Whether we are connected, or null if the connection state is not yet known. + * + * @type {bool?} + */ + connected: null, /** * Initialize the component. @@ -84,7 +90,31 @@ var gTorConnectTitlebarStatus = { break; } this.label.textContent = this._strings[textId]; - this.node.classList.toggle("tor-connect-status-connected", connected); + if (this.connected !== connected) { + // When we are transitioning from + // this.connected = false + // to + // this.connected = true + // we want to animate the transition from the not connected state to the + // connected state (provided prefers-reduced-motion is not set). + // + // If instead we are transitioning directly from the initial state + // this.connected = null + // to + // this.connected = true + // we want to immediately show the connected state without any transition. + // + // In both cases, the status will eventually be hidden. + // + // 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); + this.connected = connected; + } this.node.classList.toggle( "tor-connect-status-potentially-blocked", potentiallyBlocked