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/5e1675f4...