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 fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
Bug 41811: Use tor colors for connect buttons in bridge dialogs.
- - - - - 93ecfbc3 by Henry Wilkes at 2024-08-26T19:28:11+00:00 fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
Bug 41811: Only use tor outline color for tor-button elements.
In particular, a `.primary:not(.tor-button)` element will have the default blue outline.
- - - - - 8cfb49a3 by Henry Wilkes at 2024-08-26T19:28:11+00:00 fixup! Bug 41817: tor-browser semantic colors.
Bug 41811: Use the tor color for .tor-button focus outlines.
- - - - -
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:
===================================== browser/components/torpreferences/content/builtinBridgeDialog.js ===================================== @@ -70,6 +70,13 @@ const gBuiltinBridgeDialog = { this._result.accepted = true; });
+ // Add styling for tor-button to the dialog shadow root. + const styleLink = document.createElement("link"); + styleLink.rel = "stylesheet"; + styleLink.href = + "chrome://browser/content/torpreferences/torPreferences.css"; + dialog.shadowRoot.append(styleLink); + this._acceptButton = dialog.getButton("accept");
Services.obs.addObserver(this, TorConnectTopics.StateChange); @@ -95,6 +102,7 @@ const gBuiltinBridgeDialog = { "data-l10n-id", connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept" ); + this._acceptButton.classList.toggle("tor-button", connect); },
observe(subject, topic) {
===================================== browser/components/torpreferences/content/connectionPane.xhtml ===================================== @@ -133,7 +133,7 @@ </menulist> <button id="torPreferences-bridges-buttonChooseBridgeForMe" - class="primary" + class="primary tor-button" /> </hbox> <html:moz-toggle
===================================== browser/components/torpreferences/content/provideBridgeDialog.js ===================================== @@ -85,7 +85,7 @@ const gProvideBridgeDialog = { this._acceptButton = this._dialog.getButton("accept");
// Inject our stylesheet into the shadow root so that the accept button can - // take the spoof-button-disabled styling. + // take the spoof-button-disabled styling and tor-button styling. const styleLink = document.createElement("link"); styleLink.rel = "stylesheet"; styleLink.href = @@ -183,22 +183,21 @@ const gProvideBridgeDialog = { * Callback for whenever the accept button may need to change. */ onAcceptStateChange() { + let connect = false; if (this._page === "entry") { - document.l10n.setAttributes( - this._acceptButton, + this._acceptButton.setAttribute( + "data-l10n-id", "user-provide-bridge-dialog-next-button" ); - this._result.connect = false; } else { - this._acceptButton.removeAttribute("data-l10n-id"); - const connect = TorConnect.canBeginBootstrap; - this._result.connect = connect; - + connect = TorConnect.canBeginBootstrap; this._acceptButton.setAttribute( "data-l10n-id", connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept" ); } + this._result.connect = connect; + this._acceptButton.classList.toggle("tor-button", connect); },
/**
===================================== browser/components/torpreferences/content/requestBridgeDialog.js ===================================== @@ -33,6 +33,13 @@ const gRequestBridgeDialog = { "torPreferences-requestBridge-dialog" );
+ // Add styling for tor-button to the dialog shadow root. + const styleLink = document.createElement("link"); + styleLink.rel = "stylesheet"; + styleLink.href = + "chrome://browser/content/torpreferences/torPreferences.css"; + this._dialog.shadowRoot.append(styleLink); + // user may have opened a Request Bridge dialog in another tab, so update the // CAPTCHA image or close out the dialog if we have a bridge list this._dialog.addEventListener("focusin", () => { @@ -101,6 +108,7 @@ const gRequestBridgeDialog = { "data-l10n-id", connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-submit" ); + this._submitButton.classList.toggle("tor-button", connect); },
observe(subject, topic) {
===================================== browser/themes/shared/tor-urlbar-button.css ===================================== @@ -26,7 +26,6 @@ * urlbar background, but we keep the rounded corners. */ outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); - outline-color: var(--tor-focus-outline-color); /* Calculate the difference between the button's border area and the outline * area. */ --tor-urlbar-focus-outline-difference: calc(
===================================== toolkit/components/torconnect/content/aboutTorConnect.css ===================================== @@ -116,10 +116,6 @@ html { list-style-image: url("chrome://global/content/torconnect/bridge.svg"); }
-button, select { - --in-content-focus-outline-color: var(--tor-focus-outline-color); -} - #locationDropdownLabel { margin-block: auto; margin-inline: 4px;
===================================== toolkit/components/torconnect/content/aboutTorConnect.html ===================================== @@ -75,8 +75,16 @@ <button id="restartButton" hidden="true"></button> <button id="configureButton" hidden="true"></button> <button id="cancelButton" hidden="true"></button> - <button id="connectButton" hidden="true"></button> - <button id="tryBridgeButton" hidden="true"></button> + <button + id="connectButton" + hidden="true" + class="tor-button" + ></button> + <button + id="tryBridgeButton" + hidden="true" + class="tor-button" + ></button> </span> </div> </div>
===================================== toolkit/components/torconnect/content/aboutTorConnect.js ===================================== @@ -190,7 +190,6 @@ class AboutTorConnect {
show(element, primary = false) { element.classList.toggle("primary", primary); - element.classList.toggle("tor-button", primary); element.removeAttribute("hidden"); }
===================================== toolkit/themes/shared/tor-colors.css ===================================== @@ -1,3 +1,5 @@ +@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + :root { /* Photon colors not available in Firefox. */ --purple-30: #c069ff; @@ -126,19 +128,34 @@
/* Has a higher specificity than `button` and `button.primary`. */ button.tor-button:is(*, .primary), +xul|button.tor-button:is(*, [default]), .tor-button { color: var(--tor-button-text-color); background-color: var(--tor-button-background-color); }
-button.tor-button:is(*, .primary):hover, -.tor-button:hover { +:is( + button.tor-button:is(*, .primary), + xul|button.tor-button:is(*, [default]), + .tor-button +):not([disabled]):hover { color: var(--tor-button-text-color-hover); background-color: var(--tor-button-background-color-hover); }
-button.tor-button:is(*, .primary):hover:active, -.tor-button:hover:active { +:is( + button.tor-button:is(*, .primary), + xul|button.tor-button:is(*, [default]), + .tor-button +):not([disabled]):hover:active { color: var(--tor-button-text-color-active); background-color: var(--tor-button-background-color-active); } + +:is( + button.tor-button:is(*, .primary), + xul|button.tor-button:is(*, [default]), + .tor-button +):focus-visible { + outline-color: var(--tor-focus-outline-color); +}
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/d9faa5a...