[tbb-commits] [tor-browser] 06/07: fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

[gitolite role]

This is an automated email from the git hooks/post-receive script.

pierov pushed a commit to branch tor-browser-91.11.0esr-11.5-1
in repository tor-browser.

commit 7e4d47b3a5cd23f1da961bc0eed48df691c4ef80
Author: WofWca <wofwca at protonmail.com>
AuthorDate: Tue Jul 19 20:11:38 2022 +0300

    fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
    
    fix: don't invert bridges' QRs' colors in dark theme
    Fixes https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/41049
    + a pinch of refactoring
---
 .../torpreferences/content/bridgeQrDialog.xhtml    | 10 ++--
 .../torpreferences/content/connectionPane.xhtml    |  5 +-
 .../torpreferences/content/torPreferences.css      | 64 +++++++++++++---------
 3 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/browser/components/torpreferences/content/bridgeQrDialog.xhtml b/browser/components/torpreferences/content/bridgeQrDialog.xhtml
index 2a49e4c0e7d9e..5411c963ba490 100644
--- a/browser/components/torpreferences/content/bridgeQrDialog.xhtml
+++ b/browser/components/torpreferences/content/bridgeQrDialog.xhtml
@@ -7,10 +7,12 @@
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
 <dialog id="bridgeQr-dialog" buttons="accept">
-  <html:div id="bridgeQr-container">
-    <html:div id="bridgeQr-target"/>
-    <html:div id="bridgeQr-onionBox"/>
-    <html:div id="bridgeQr-onion"/>
+  <html:div>
+    <html:div id="bridgeQr">
+      <html:div id="bridgeQr-target"/>
+      <html:div id="bridgeQr-onionBox"/>
+      <html:div id="bridgeQr-onion"/>
+    </html:div>
   </html:div>
   <script type="application/javascript"><![CDATA[
     "use strict";
diff --git a/browser/components/torpreferences/content/connectionPane.xhtml b/browser/components/torpreferences/content/connectionPane.xhtml
index 10c2d0b60b66b..82738723ae21a 100644
--- a/browser/components/torpreferences/content/connectionPane.xhtml
+++ b/browser/components/torpreferences/content/connectionPane.xhtml
@@ -112,12 +112,11 @@
     </hbox>
     <box class="torPreferences-bridgeCard-grid">
       <box class="torPreferences-bridgeCard-qrWrapper">
-        <box class="torPreferences-bridgeCard-qr stop-click">
+        <html:div class="torPreferences-bridgeCard-qr stop-click">
           <html:div class="torPreferences-bridgeCard-qrCode"/>
           <html:div class="torPreferences-bridgeCard-qrOnionBox"/>
           <html:div class="torPreferences-bridgeCard-qrOnion"/>
-        </box>
-        <html:div class="torPreferences-bridgeCard-filler"/>
+        </html:div>
       </box>
       <description class="torPreferences-bridgeCard-share"></description>
       <hbox class="torPreferences-bridgeCard-addrBox">
diff --git a/browser/components/torpreferences/content/torPreferences.css b/browser/components/torpreferences/content/torPreferences.css
index 20e93bedf2f84..b13cbec1603be 100644
--- a/browser/components/torpreferences/content/torPreferences.css
+++ b/browser/components/torpreferences/content/torPreferences.css
@@ -323,56 +323,56 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before {
 
 .torPreferences-bridgeCard-qrWrapper {
   grid-area: bridge-qr;
-  display: flex;
-  flex-direction: column;
+  display: block; /* So it doesn't stretch the child vertically. */
+  margin-inline-end: 14px;
 }
 
 .torPreferences-bridgeCard-qr {
-  width: 126px;
+  --qr-one: black;
+  --qr-zero: white;
+  background: var(--qr-zero);
   position: relative;
+  padding: 4px;
+  border-radius: 2px;
 }
 
 .torPreferences-bridgeCard-qrCode {
   width: 112px;
   height: 112px;
   /* Define these colors, as they will be passed to the QR code library */
-  background: var(--in-content-box-background);
-  color: var(--in-content-text-color);
+  background: var(--qr-zero);
+  color: var(--qr-one);
 }
 
 .torPreferences-bridgeCard-qrOnionBox {
   width: 28px;
   height: 28px;
   position: absolute;
-  top: 42px;
-  inset-inline-start: 42px;
-  background: var(--in-content-box-background);
+  top: calc(50% - 14px);
+  inset-inline-start: calc(50% - 14px);
+  background: var(--qr-zero);
 }
 
 .torPreferences-bridgeCard-qrOnion {
   width: 16px;
   height: 16px;
   position: absolute;
-  top: 48px;
-  inset-inline-start: 48px;
+  top: calc(50% - 8px);
+  inset-inline-start: calc(50% - 8px);
 
   mask: url("chrome://browser/skin/onion.svg");
   mask-repeat: no-repeat;
   mask-size: 16px;
-  background: var(--in-content-text-color);
+  background: var(--qr-one);
 }
 
 .torPreferences-bridgeCard-qr:hover .torPreferences-bridgeCard-qrOnionBox {
-  background: var(--in-content-text-color);
+  background: var(--qr-one);
 }
 
 .torPreferences-bridgeCard-qr:hover .torPreferences-bridgeCard-qrOnion {
   mask: url("chrome://global/skin/icons/search-glass.svg");
-  background: var(--in-content-box-background);
-}
-
-.torPreferences-bridgeCard-filler {
-  flex: 1;
+  background: var(--qr-zero);
 }
 
 .torPreferences-bridgeCard-grid {
@@ -478,39 +478,49 @@ dialog#torPreferences-requestBridge-dialog > hbox {
 }
 
 /* Show bridge QR dialog */
-#bridgeQr-container {
+#bridgeQr {
+  /* Some readers don't recognize QRs with inverted colors, so let's make
+  the ones are darker than zeroes. See
+  https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/41049 */
+  --qr-one: black;
+  --qr-zero: white;
+  background: var(--qr-zero);
   position: relative;
-  height: 300px;
+  /* Padding is needed in case the dark theme is used so the bits don't blend
+  with whatever the default background color is. */
+  padding: 10px;
+  margin: auto;
+  margin-bottom: 20px;
+  max-width: max-content;
+  border-radius: 5px;
 }
 
 #bridgeQr-target {
-  position: absolute;
   width: 300px;
   height: 300px;
-  left: calc(50% - 150px);
-  background: var(--in-content-box-background);
-  color: var(--in-content-text-color);
+  background: var(--qr-zero);
+  color: var(--qr-one);
 }
 
 #bridgeQr-onionBox {
   position: absolute;
   width: 70px;
   height: 70px;
-  top: 115px;
+  top: calc(50% - 35px);
   left: calc(50% - 35px);
-  background-color: var(--in-content-box-background);
+  background-color: var(--qr-zero);
 }
 
 #bridgeQr-onion {
   position: absolute;
   width: 38px;
   height: 38px;
-  top: 131px;
+  top: calc(50% - 19px);
   left: calc(50% - 19px);
   mask: url("chrome://browser/skin/onion.svg");
   mask-repeat: no-repeat;
   mask-size: 38px;
-  background: var(--in-content-text-color);
+  background: var(--qr-one);
 }
 
 /* Builtin bridge dialog */

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.