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
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:
| 1 | -<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
| 2 | -<svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
| 3 | - <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"/>
|
|
| 4 | -</svg> |
| ... | ... | @@ -19,15 +19,18 @@ window.addEventListener( |
| 19 | 19 | );
|
| 20 | 20 | const target = document.getElementById("bridgeQr-target");
|
| 21 | 21 | const style = window.getComputedStyle(target);
|
| 22 | - const width = style.width.substr(0, style.width.length - 2);
|
|
| 23 | - const height = style.height.substr(0, style.height.length - 2);
|
|
| 22 | + // We are assuming that the style width and height have "px" units.
|
|
| 23 | + // Trailing "px" is not parsed.
|
|
| 24 | + // NOTE: Our QRCode module doesn't seem to use the width or height
|
|
| 25 | + // attributes.
|
|
| 26 | + const width = parseInt(style.width, 10);
|
|
| 27 | + const height = parseInt(style.height, 10);
|
|
| 24 | 28 | new QRCode(target, {
|
| 25 | 29 | text: bridgeString,
|
| 26 | 30 | width,
|
| 27 | 31 | height,
|
| 28 | 32 | colorDark: style.color,
|
| 29 | 33 | colorLight: style.backgroundColor,
|
| 30 | - document,
|
|
| 31 | 34 | });
|
| 32 | 35 | },
|
| 33 | 36 | { once: true }
|
| ... | ... | @@ -11,12 +11,9 @@ |
| 11 | 11 | <dialog id="bridgeQr-dialog" buttons="accept">
|
| 12 | 12 | <script src="chrome://browser/content/torpreferences/bridgeQrDialog.js" />
|
| 13 | 13 | |
| 14 | - <html:div>
|
|
| 15 | - <html:div id="bridgeQr">
|
|
| 16 | - <html:div id="bridgeQr-target" />
|
|
| 17 | - <html:div id="bridgeQr-onionBox" />
|
|
| 18 | - <html:div id="bridgeQr-onion" />
|
|
| 19 | - </html:div>
|
|
| 14 | + <html:div id="bridgeQr">
|
|
| 15 | + <html:div id="bridgeQr-target"></html:div>
|
|
| 16 | + <html:div id="bridgeQr-icon"></html:div>
|
|
| 20 | 17 | </html:div>
|
| 21 | 18 | </dialog>
|
| 22 | 19 | </window> |
| ... | ... | @@ -775,21 +775,25 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
| 775 | 775 | }
|
| 776 | 776 | |
| 777 | 777 | /* Show bridge QR dialog */
|
| 778 | + |
|
| 778 | 779 | #bridgeQr {
|
| 780 | + flex: 0 0 auto;
|
|
| 781 | + align-self: center;
|
|
| 779 | 782 | /* Some readers don't recognize QRs with inverted colors, so let's make
|
| 780 | 783 | the ones are darker than zeroes. See
|
| 781 | 784 | https://gitlab.torproject.org/tpo/applications/tor-browser/-/issues/41049 */
|
| 782 | 785 | --qr-one: black;
|
| 783 | 786 | --qr-zero: white;
|
| 784 | 787 | background: var(--qr-zero);
|
| 785 | - position: relative;
|
|
| 786 | 788 | /* Padding is needed in case the dark theme is used so the bits don't blend
|
| 787 | 789 | with whatever the default background color is. */
|
| 788 | 790 | padding: 10px;
|
| 789 | - margin: auto;
|
|
| 790 | - margin-bottom: 20px;
|
|
| 791 | - max-width: max-content;
|
|
| 792 | - border-radius: 5px;
|
|
| 791 | + margin-block: 4px 8px;
|
|
| 792 | + border-radius: 4px;
|
|
| 793 | + display: grid;
|
|
| 794 | + align-items: center;
|
|
| 795 | + justify-items: center;
|
|
| 796 | + grid-template: "qr" max-content / max-content;
|
|
| 793 | 797 | }
|
| 794 | 798 | |
| 795 | 799 | #bridgeQr-target {
|
| ... | ... | @@ -797,27 +801,21 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
| 797 | 801 | height: 300px;
|
| 798 | 802 | background: var(--qr-zero);
|
| 799 | 803 | color: var(--qr-one);
|
| 804 | + grid-area: qr;
|
|
| 800 | 805 | }
|
| 801 | 806 | |
| 802 | -#bridgeQr-onionBox {
|
|
| 803 | - position: absolute;
|
|
| 804 | - width: 70px;
|
|
| 805 | - height: 70px;
|
|
| 806 | - top: calc(50% - 35px);
|
|
| 807 | - left: calc(50% - 35px);
|
|
| 808 | - background-color: var(--qr-zero);
|
|
| 809 | -}
|
|
| 810 | - |
|
| 811 | -#bridgeQr-onion {
|
|
| 812 | - position: absolute;
|
|
| 813 | - width: 38px;
|
|
| 814 | - height: 38px;
|
|
| 815 | - top: calc(50% - 19px);
|
|
| 816 | - left: calc(50% - 19px);
|
|
| 817 | - mask: url("chrome://browser/content/torpreferences/bridge-qr-onion-mask.svg");
|
|
| 818 | - mask-repeat: no-repeat;
|
|
| 819 | - mask-size: 38px;
|
|
| 820 | - background: var(--qr-one);
|
|
| 807 | +#bridgeQr-icon {
|
|
| 808 | + /* Share the same grid area as #bridgeQr-target. */
|
|
| 809 | + grid-area: qr;
|
|
| 810 | + content: url("chrome://browser/content/torpreferences/bridge.svg");
|
|
| 811 | + padding: 10px;
|
|
| 812 | + border-radius: 8px;
|
|
| 813 | + box-sizing: content-box;
|
|
| 814 | + width: 52px;
|
|
| 815 | + height: 52px;
|
|
| 816 | + background: var(--qr-zero);
|
|
| 817 | + -moz-context-properties: fill;
|
|
| 818 | + fill: var(--qr-one);
|
|
| 821 | 819 | }
|
| 822 | 820 | |
| 823 | 821 | /* Lox invite dialog */
|
| ... | ... | @@ -29,7 +29,6 @@ browser.jar: |
| 29 | 29 | content/browser/torpreferences/connectionPane.js (content/connectionPane.js)
|
| 30 | 30 | content/browser/torpreferences/connectionPane.xhtml (content/connectionPane.xhtml)
|
| 31 | 31 | content/browser/torpreferences/torPreferences.css (content/torPreferences.css)
|
| 32 | - content/browser/torpreferences/bridge-qr-onion-mask.svg (content/bridge-qr-onion-mask.svg)
|
|
| 33 | 32 | content/browser/torpreferences/bridgemoji/BridgeEmoji.js (content/bridgemoji/BridgeEmoji.js)
|
| 34 | 33 | content/browser/torpreferences/bridgemoji/bridge-emojis.json (content/bridgemoji/bridge-emojis.json)
|
| 35 | 34 | content/browser/torpreferences/bridgemoji/annotations.json (content/bridgemoji/annotations.json)
|