[Git][tpo/applications/tor-browser][tor-browser-128.8.0esr-14.5-1] fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in...

25 Mar 2025


      morgan pushed to branch tor-browser-128.8.0esr-14.5-1 at The Tor Project / Applications / Tor Browser


Commits:
aed6314d by Henry Wilkes at 2025-03-24T15:45:19+00:00
fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

TB 43130: Adjust preferences for contrast theme or forced colors.

Give the "Your bridges" and "request bridges" boxes an outline for
forced-colors since the background color will not show.

Use `--border-radius-*` instead of fixed `px` values.

Do not use the accent color for text when in contrast theme or forced
colors.

- - - - -


2 changed files:

- browser/components/torpreferences/content/connectionPane.xhtml
- browser/components/torpreferences/content/torPreferences.css


Changes:

=====================================
browser/components/torpreferences/content/connectionPane.xhtml
=====================================
@@ -198,7 +198,7 @@
       <html:img id="tor-bridges-none-icon" alt="" />
       <html:div data-l10n-id="tor-bridges-none-added"></html:div>
     </html:div>
-    <html:div id="tor-bridges-current" hidden="hidden">
+    <html:div id="tor-bridges-current" class="tor-bridges-box" hidden="hidden">
       <html:div id="tor-bridges-current-header-bar">
         <html:h2
           id="tor-bridges-current-heading-non-search"
@@ -564,7 +564,7 @@
           ></html:div>
         </html:li>
       </html:ul>
-      <html:div id="tor-bridges-request-box">
+      <html:div id="tor-bridges-request-box" class="tor-bridges-box">
         <html:img
           alt=""
           src="chrome://browser/content/torpreferences/bridge-bot.svg"


=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -173,12 +173,17 @@ button.spoof-button-disabled {
   display: none;
 }
 
-.bridge-status-badge.bridge-status-connected {
-  color: var(--tor-accent-color);
-}
+@media not ((forced-colors) or (prefers-contrast)) {
+  /* Accent colors are usually only used for background colors. Here we are
+   * using it for text colors, so we only enable these rules when not using a
+   * high contrast theme or forced colors. */
+  .bridge-status-badge.bridge-status-connected {
+    color: var(--tor-accent-color);
+  }
 
-.bridge-status-badge.bridge-status-current-built-in {
-  color: var(--in-content-accent-color);
+  .bridge-status-badge.bridge-status-current-built-in {
+    color: var(--color-accent-primary);
+  }
 }
 
 .bridge-status-badge > * {
@@ -230,7 +235,7 @@ button.spoof-button-disabled {
   padding-block: 64px;
   padding-inline: 32px;
   gap: 16px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-small);
   color: var(--text-color-deemphasized);
   border: 2px dashed color-mix(in srgb, currentColor 20%, transparent);
 }
@@ -243,10 +248,18 @@ button.spoof-button-disabled {
   fill: currentColor;
 }
 
-#tor-bridges-current {
+.tor-bridges-box,
+.tor-bridges-details-box {
   padding: 16px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-small);
   background: var(--in-content-box-info-background);
+  border: 1px solid var(--in-content-box-border-color);
+}
+
+@media not forced-colors {
+  .tor-bridges-box {
+    border-color: transparent;
+  }
 }
 
 #tor-bridges-current-header-bar {
@@ -409,7 +422,7 @@ button.spoof-button-disabled {
   height: 16px;
   /* color-light-gray-10, color-dark-gray-60 */
   background: light-dark(#f9f9fb, #2b2a33);
-  border-radius: 4px;
+  border-radius: var(--border-radius-small);
   padding: 8px;
 }
 
@@ -463,9 +476,6 @@ button.spoof-button-disabled {
 
 .tor-bridges-details-box {
   margin-block-start: 24px;
-  border-radius: 4px;
-  border: 1px solid var(--in-content-border-color);
-  padding: 16px;
 }
 
 #tor-bridges-share:not([hidden]) {
@@ -705,9 +715,6 @@ button.spoof-button-disabled {
   align-items: center;
   text-align: center;
   justify-content: center;
-  padding: 16px;
-  background: var(--in-content-box-info-background);
-  border-radius: 4px;
 }
 
 #tor-bridges-request-box > * {
@@ -778,7 +785,7 @@ dialog#torPreferences-requestBridge-dialog > hbox {
   with whatever the default background color is. */
   padding: 10px;
   margin-block: 4px 8px;
-  border-radius: 4px;
+  border-radius: var(--border-radius-small);
   display: grid;
   align-items: center;
   justify-items: center;
@@ -798,7 +805,7 @@ dialog#torPreferences-requestBridge-dialog > hbox {
   grid-area: qr;
   content: url("chrome://browser/content/torpreferences/bridge.svg");
   padding: 10px;
-  border-radius: 8px;
+  border-radius: var(--border-radius-medium);
   box-sizing: content-box;
   width: 52px;
   height: 52px;



View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/aed6314d...

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

    

morgan (＠morgan)

tags

participants (1)