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

richard (@richard) git at gitlab.torproject.org
Thu Feb 8 14:42:28 UTC 2024



richard pushed to branch tor-browser-115.7.0esr-13.5-1 at The Tor Project / Applications / Tor Browser


Commits:
5e1675f4 by Henry Wilkes at 2024-02-08T14:40:56+00:00
fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 42036: New QR code design.

- - - - -


5 changed files:

- − browser/components/torpreferences/content/bridge-qr-onion-mask.svg
- browser/components/torpreferences/content/bridgeQrDialog.js
- browser/components/torpreferences/content/bridgeQrDialog.xhtml
- browser/components/torpreferences/content/torPreferences.css
- browser/components/torpreferences/jar.mn


Changes:

=====================================
browser/components/torpreferences/content/bridge-qr-onion-mask.svg deleted
=====================================
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M 8 0.5 C 3.85786 0.5 0.5 3.85786 0.5 8 C 0.5 12.1421 3.85786 15.5 8 15.5 C 12.1421 15.5 15.5 12.1421 15.5 8 C 15.5 3.85786 12.1421 0.5 8 0.5 z M 8 1.671875 C 11.4949 1.671875 14.328125 4.50507 14.328125 8 C 14.328125 11.4949 11.4949 14.328125 8 14.328125 L 8 13.25 C 10.89951 13.25 13.25 10.89951 13.25 8 C 13.25 5.10051 10.89951 2.75 8 2.75 L 8 1.671875 z M 8 3.921875 C 10.25231 3.921875 12.078125 5.74772 12.078125 8 C 12.078125 10.25231 10.25231 12.078125 8 12.078125 L 8 11 C 9.65686 11 11 9.65686 11 8 C 11 6.34315 9.65686 5 8 5 L 8 3.921875 z M 8 6.171875 C 9.00965 6.171875 9.828125 6.99036 9.828125 8 C 9.828125 9.00965 9.00965 9.828125 8 9.828125 L 8 6.171875 z " clip-rule="evenodd" fill-rule="evenodd" fill="#000000"/>
-</svg>


=====================================
browser/components/torpreferences/content/bridgeQrDialog.js
=====================================
@@ -19,15 +19,18 @@ window.addEventListener(
     );
     const target = document.getElementById("bridgeQr-target");
     const style = window.getComputedStyle(target);
-    const width = style.width.substr(0, style.width.length - 2);
-    const height = style.height.substr(0, style.height.length - 2);
+    // We are assuming that the style width and height have "px" units.
+    // Trailing "px" is not parsed.
+    // NOTE: Our QRCode module doesn't seem to use the width or height
+    // attributes.
+    const width = parseInt(style.width, 10);
+    const height = parseInt(style.height, 10);
     new QRCode(target, {
       text: bridgeString,
       width,
       height,
       colorDark: style.color,
       colorLight: style.backgroundColor,
-      document,
     });
   },
   { once: true }


=====================================
browser/components/torpreferences/content/bridgeQrDialog.xhtml
=====================================
@@ -11,12 +11,9 @@
   <dialog id="bridgeQr-dialog" buttons="accept">
     <script src="chrome://browser/content/torpreferences/bridgeQrDialog.js" />
 
-    <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 id="bridgeQr">
+      <html:div id="bridgeQr-target"></html:div>
+      <html:div id="bridgeQr-icon"></html:div>
     </html:div>
   </dialog>
 </window>


=====================================
browser/components/torpreferences/content/torPreferences.css
=====================================
@@ -775,21 +775,25 @@ dialog#torPreferences-requestBridge-dialog > hbox {
 }
 
 /* Show bridge QR dialog */
+
 #bridgeQr {
+  flex: 0 0 auto;
+  align-self: center;
   /* 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;
   /* 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;
+  margin-block: 4px 8px;
+  border-radius: 4px;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  grid-template: "qr" max-content / max-content;
 }
 
 #bridgeQr-target {
@@ -797,27 +801,21 @@ dialog#torPreferences-requestBridge-dialog > hbox {
   height: 300px;
   background: var(--qr-zero);
   color: var(--qr-one);
+  grid-area: qr;
 }
 
-#bridgeQr-onionBox {
-  position: absolute;
-  width: 70px;
-  height: 70px;
-  top: calc(50% - 35px);
-  left: calc(50% - 35px);
-  background-color: var(--qr-zero);
-}
-
-#bridgeQr-onion {
-  position: absolute;
-  width: 38px;
-  height: 38px;
-  top: calc(50% - 19px);
-  left: calc(50% - 19px);
-  mask: url("chrome://browser/content/torpreferences/bridge-qr-onion-mask.svg");
-  mask-repeat: no-repeat;
-  mask-size: 38px;
-  background: var(--qr-one);
+#bridgeQr-icon {
+  /* Share the same grid area as #bridgeQr-target. */
+  grid-area: qr;
+  content: url("chrome://browser/content/torpreferences/bridge.svg");
+  padding: 10px;
+  border-radius: 8px;
+  box-sizing: content-box;
+  width: 52px;
+  height: 52px;
+  background: var(--qr-zero);
+  -moz-context-properties: fill;
+  fill: var(--qr-one);
 }
 
 /* Lox invite dialog */


=====================================
browser/components/torpreferences/jar.mn
=====================================
@@ -29,7 +29,6 @@ browser.jar:
     content/browser/torpreferences/connectionPane.js                 (content/connectionPane.js)
     content/browser/torpreferences/connectionPane.xhtml              (content/connectionPane.xhtml)
     content/browser/torpreferences/torPreferences.css                (content/torPreferences.css)
-    content/browser/torpreferences/bridge-qr-onion-mask.svg          (content/bridge-qr-onion-mask.svg)
     content/browser/torpreferences/bridgemoji/BridgeEmoji.js         (content/bridgemoji/BridgeEmoji.js)
     content/browser/torpreferences/bridgemoji/bridge-emojis.json     (content/bridgemoji/bridge-emojis.json)
     content/browser/torpreferences/bridgemoji/annotations.json       (content/bridgemoji/annotations.json)



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

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


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tbb-commits/attachments/20240208/999f9613/attachment-0001.htm>


More information about the tbb-commits mailing list