[Git][tpo/applications/tor-browser][tor-browser-128.1.0esr-14.0-1] 3 commits: fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in...

26 Aug 2024


      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...

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/d9faa5a...
You're receiving this email because of your account on gitlab.torproject.org.

    

morgan (＠morgan)

tags

participants (1)