morgan pushed to branch tor-browser-128.1.0esr-14.0-1 at The Tor Project / Applications / Tor Browser
Commits:
-
5c04abb6
by Henry Wilkes at 2024-08-26T19:28:11+00:00
-
93ecfbc3
by Henry Wilkes at 2024-08-26T19:28:11+00:00
-
8cfb49a3
by Henry Wilkes at 2024-08-26T19:28:11+00:00
9 changed files:
- browser/components/torpreferences/content/builtinBridgeDialog.js
- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/provideBridgeDialog.js
- browser/components/torpreferences/content/requestBridgeDialog.js
- browser/themes/shared/tor-urlbar-button.css
- toolkit/components/torconnect/content/aboutTorConnect.css
- toolkit/components/torconnect/content/aboutTorConnect.html
- toolkit/components/torconnect/content/aboutTorConnect.js
- toolkit/themes/shared/tor-colors.css
Changes:
... | ... | @@ -70,6 +70,13 @@ const gBuiltinBridgeDialog = { |
70 | 70 | this._result.accepted = true;
|
71 | 71 | });
|
72 | 72 | |
73 | + // Add styling for tor-button to the dialog shadow root.
|
|
74 | + const styleLink = document.createElement("link");
|
|
75 | + styleLink.rel = "stylesheet";
|
|
76 | + styleLink.href =
|
|
77 | + "chrome://browser/content/torpreferences/torPreferences.css";
|
|
78 | + dialog.shadowRoot.append(styleLink);
|
|
79 | + |
|
73 | 80 | this._acceptButton = dialog.getButton("accept");
|
74 | 81 | |
75 | 82 | Services.obs.addObserver(this, TorConnectTopics.StateChange);
|
... | ... | @@ -95,6 +102,7 @@ const gBuiltinBridgeDialog = { |
95 | 102 | "data-l10n-id",
|
96 | 103 | connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept"
|
97 | 104 | );
|
105 | + this._acceptButton.classList.toggle("tor-button", connect);
|
|
98 | 106 | },
|
99 | 107 | |
100 | 108 | observe(subject, topic) {
|
... | ... | @@ -133,7 +133,7 @@ |
133 | 133 | </menulist>
|
134 | 134 | <button
|
135 | 135 | id="torPreferences-bridges-buttonChooseBridgeForMe"
|
136 | - class="primary"
|
|
136 | + class="primary tor-button"
|
|
137 | 137 | />
|
138 | 138 | </hbox>
|
139 | 139 | <html:moz-toggle
|
... | ... | @@ -85,7 +85,7 @@ const gProvideBridgeDialog = { |
85 | 85 | this._acceptButton = this._dialog.getButton("accept");
|
86 | 86 | |
87 | 87 | // Inject our stylesheet into the shadow root so that the accept button can
|
88 | - // take the spoof-button-disabled styling.
|
|
88 | + // take the spoof-button-disabled styling and tor-button styling.
|
|
89 | 89 | const styleLink = document.createElement("link");
|
90 | 90 | styleLink.rel = "stylesheet";
|
91 | 91 | styleLink.href =
|
... | ... | @@ -183,22 +183,21 @@ const gProvideBridgeDialog = { |
183 | 183 | * Callback for whenever the accept button may need to change.
|
184 | 184 | */
|
185 | 185 | onAcceptStateChange() {
|
186 | + let connect = false;
|
|
186 | 187 | if (this._page === "entry") {
|
187 | - document.l10n.setAttributes(
|
|
188 | - this._acceptButton,
|
|
188 | + this._acceptButton.setAttribute(
|
|
189 | + "data-l10n-id",
|
|
189 | 190 | "user-provide-bridge-dialog-next-button"
|
190 | 191 | );
|
191 | - this._result.connect = false;
|
|
192 | 192 | } else {
|
193 | - this._acceptButton.removeAttribute("data-l10n-id");
|
|
194 | - const connect = TorConnect.canBeginBootstrap;
|
|
195 | - this._result.connect = connect;
|
|
196 | - |
|
193 | + connect = TorConnect.canBeginBootstrap;
|
|
197 | 194 | this._acceptButton.setAttribute(
|
198 | 195 | "data-l10n-id",
|
199 | 196 | connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept"
|
200 | 197 | );
|
201 | 198 | }
|
199 | + this._result.connect = connect;
|
|
200 | + this._acceptButton.classList.toggle("tor-button", connect);
|
|
202 | 201 | },
|
203 | 202 | |
204 | 203 | /**
|
... | ... | @@ -33,6 +33,13 @@ const gRequestBridgeDialog = { |
33 | 33 | "torPreferences-requestBridge-dialog"
|
34 | 34 | );
|
35 | 35 | |
36 | + // Add styling for tor-button to the dialog shadow root.
|
|
37 | + const styleLink = document.createElement("link");
|
|
38 | + styleLink.rel = "stylesheet";
|
|
39 | + styleLink.href =
|
|
40 | + "chrome://browser/content/torpreferences/torPreferences.css";
|
|
41 | + this._dialog.shadowRoot.append(styleLink);
|
|
42 | + |
|
36 | 43 | // user may have opened a Request Bridge dialog in another tab, so update the
|
37 | 44 | // CAPTCHA image or close out the dialog if we have a bridge list
|
38 | 45 | this._dialog.addEventListener("focusin", () => {
|
... | ... | @@ -101,6 +108,7 @@ const gRequestBridgeDialog = { |
101 | 108 | "data-l10n-id",
|
102 | 109 | connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-submit"
|
103 | 110 | );
|
111 | + this._submitButton.classList.toggle("tor-button", connect);
|
|
104 | 112 | },
|
105 | 113 | |
106 | 114 | observe(subject, topic) {
|
... | ... | @@ -26,7 +26,6 @@ |
26 | 26 | * urlbar background, but we keep the rounded corners. */
|
27 | 27 | outline: var(--focus-outline);
|
28 | 28 | outline-offset: var(--focus-outline-offset);
|
29 | - outline-color: var(--tor-focus-outline-color);
|
|
30 | 29 | /* Calculate the difference between the button's border area and the outline
|
31 | 30 | * area. */
|
32 | 31 | --tor-urlbar-focus-outline-difference: calc(
|
... | ... | @@ -116,10 +116,6 @@ html { |
116 | 116 | list-style-image: url("chrome://global/content/torconnect/bridge.svg");
|
117 | 117 | }
|
118 | 118 | |
119 | -button, select {
|
|
120 | - --in-content-focus-outline-color: var(--tor-focus-outline-color);
|
|
121 | -}
|
|
122 | - |
|
123 | 119 | #locationDropdownLabel {
|
124 | 120 | margin-block: auto;
|
125 | 121 | margin-inline: 4px;
|
... | ... | @@ -75,8 +75,16 @@ |
75 | 75 | <button id="restartButton" hidden="true"></button>
|
76 | 76 | <button id="configureButton" hidden="true"></button>
|
77 | 77 | <button id="cancelButton" hidden="true"></button>
|
78 | - <button id="connectButton" hidden="true"></button>
|
|
79 | - <button id="tryBridgeButton" hidden="true"></button>
|
|
78 | + <button
|
|
79 | + id="connectButton"
|
|
80 | + hidden="true"
|
|
81 | + class="tor-button"
|
|
82 | + ></button>
|
|
83 | + <button
|
|
84 | + id="tryBridgeButton"
|
|
85 | + hidden="true"
|
|
86 | + class="tor-button"
|
|
87 | + ></button>
|
|
80 | 88 | </span>
|
81 | 89 | </div>
|
82 | 90 | </div>
|
... | ... | @@ -190,7 +190,6 @@ class AboutTorConnect { |
190 | 190 | |
191 | 191 | show(element, primary = false) {
|
192 | 192 | element.classList.toggle("primary", primary);
|
193 | - element.classList.toggle("tor-button", primary);
|
|
194 | 193 | element.removeAttribute("hidden");
|
195 | 194 | }
|
196 | 195 |
1 | +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
2 | + |
|
1 | 3 | :root {
|
2 | 4 | /* Photon colors not available in Firefox. */
|
3 | 5 | --purple-30: #c069ff;
|
... | ... | @@ -126,19 +128,34 @@ |
126 | 128 | |
127 | 129 | /* Has a higher specificity than `button` and `button.primary`. */
|
128 | 130 | button.tor-button:is(*, .primary),
|
131 | +xul|button.tor-button:is(*, [default]),
|
|
129 | 132 | .tor-button {
|
130 | 133 | color: var(--tor-button-text-color);
|
131 | 134 | background-color: var(--tor-button-background-color);
|
132 | 135 | }
|
133 | 136 | |
134 | -button.tor-button:is(*, .primary):hover,
|
|
135 | -.tor-button:hover {
|
|
137 | +:is(
|
|
138 | + button.tor-button:is(*, .primary),
|
|
139 | + xul|button.tor-button:is(*, [default]),
|
|
140 | + .tor-button
|
|
141 | +):not([disabled]):hover {
|
|
136 | 142 | color: var(--tor-button-text-color-hover);
|
137 | 143 | background-color: var(--tor-button-background-color-hover);
|
138 | 144 | }
|
139 | 145 | |
140 | -button.tor-button:is(*, .primary):hover:active,
|
|
141 | -.tor-button:hover:active {
|
|
146 | +:is(
|
|
147 | + button.tor-button:is(*, .primary),
|
|
148 | + xul|button.tor-button:is(*, [default]),
|
|
149 | + .tor-button
|
|
150 | +):not([disabled]):hover:active {
|
|
142 | 151 | color: var(--tor-button-text-color-active);
|
143 | 152 | background-color: var(--tor-button-background-color-active);
|
144 | 153 | }
|
154 | + |
|
155 | +:is(
|
|
156 | + button.tor-button:is(*, .primary),
|
|
157 | + xul|button.tor-button:is(*, [default]),
|
|
158 | + .tor-button
|
|
159 | +):focus-visible {
|
|
160 | + outline-color: var(--tor-focus-outline-color);
|
|
161 | +} |