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

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

The following commit(s) were added to refs/heads/tor-browser-91.11.0esr-12.0-1 by this push: new a460fcd3fa858 fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection a460fcd3fa858 is described below

commit a460fcd3fa858179ba0b990f5773ea47b687abca Author: WofWca wofwca@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%22%3E <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 860f3c233cb6c..3479ac0fcdbf9 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 964fca1590afc..6638db1293b2a 100644 --- a/browser/components/torpreferences/content/torPreferences.css +++ b/browser/components/torpreferences/content/torPreferences.css @@ -308,56 +308,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 { @@ -458,39 +458,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 */