[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [tor-browser] 06/07: fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
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@xxxxxxxxxxxxxx>
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.
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits