| ... |
... |
@@ -16,6 +16,12 @@ var gTorConnectTitlebarStatus = { |
|
16
|
16
|
* @type {Element}
|
|
17
|
17
|
*/
|
|
18
|
18
|
label: null,
|
|
|
19
|
+ /**
|
|
|
20
|
+ * Whether we are connected, or null if the connection state is not yet known.
|
|
|
21
|
+ *
|
|
|
22
|
+ * @type {bool?}
|
|
|
23
|
+ */
|
|
|
24
|
+ connected: null,
|
|
19
|
25
|
|
|
20
|
26
|
/**
|
|
21
|
27
|
* Initialize the component.
|
| ... |
... |
@@ -84,7 +90,31 @@ var gTorConnectTitlebarStatus = { |
|
84
|
90
|
break;
|
|
85
|
91
|
}
|
|
86
|
92
|
this.label.textContent = this._strings[textId];
|
|
87
|
|
- this.node.classList.toggle("tor-connect-status-connected", connected);
|
|
|
93
|
+ if (this.connected !== connected) {
|
|
|
94
|
+ // When we are transitioning from
|
|
|
95
|
+ // this.connected = false
|
|
|
96
|
+ // to
|
|
|
97
|
+ // this.connected = true
|
|
|
98
|
+ // we want to animate the transition from the not connected state to the
|
|
|
99
|
+ // connected state (provided prefers-reduced-motion is not set).
|
|
|
100
|
+ //
|
|
|
101
|
+ // If instead we are transitioning directly from the initial state
|
|
|
102
|
+ // this.connected = null
|
|
|
103
|
+ // to
|
|
|
104
|
+ // this.connected = true
|
|
|
105
|
+ // we want to immediately show the connected state without any transition.
|
|
|
106
|
+ //
|
|
|
107
|
+ // In both cases, the status will eventually be hidden.
|
|
|
108
|
+ //
|
|
|
109
|
+ // We only expect this latter case when opening a new window after
|
|
|
110
|
+ // bootstrapping has already completed. See tor-browser#41850.
|
|
|
111
|
+ this.node.classList.toggle(
|
|
|
112
|
+ "tor-connect-status-animate-transition",
|
|
|
113
|
+ connected && this.connected !== null
|
|
|
114
|
+ );
|
|
|
115
|
+ this.node.classList.toggle("tor-connect-status-connected", connected);
|
|
|
116
|
+ this.connected = connected;
|
|
|
117
|
+ }
|
|
88
|
118
|
this.node.classList.toggle(
|
|
89
|
119
|
"tor-connect-status-potentially-blocked",
|
|
90
|
120
|
potentiallyBlocked
|