commit 9a3956916b9897d668138dd450ad5a8be9d38e02 Author: Alex Catarineu acat@torproject.org Date: Tue Sep 8 17:57:06 2020 +0200

Bug 40008: Style fixes for 78 --- chrome/content/tor-circuit-display.js | 2 +- chrome/skin/tor-circuit-display.css | 41 +++++++++++++++++++---------------- 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/chrome/content/tor-circuit-display.js b/chrome/content/tor-circuit-display.js index 1be4571d..4e0088f0 100644 --- a/chrome/content/tor-circuit-display.js +++ b/chrome/content/tor-circuit-display.js @@ -409,7 +409,7 @@ let ensureCorrectPopupDimensions = function () { let stack = document.querySelector("#identity-popup-multiView .panel-viewstack"); let view2 = document.getElementById("identity-popup-mainView"); if (view && stack && view2) { - let newWidth = Math.max(...[...view2.children].map(el => el.clientWidth)) + 10; + let newWidth = Math.max(...[...view2.children].map(el => el.clientWidth)); let newHeight = stack.clientHeight; stack.setAttribute("width", newWidth); view2.style.minWidth = view2.style.maxWidth = newWidth + "px"; diff --git a/chrome/skin/tor-circuit-display.css b/chrome/skin/tor-circuit-display.css index 3c349e0c..35c786ec 100644 --- a/chrome/skin/tor-circuit-display.css +++ b/chrome/skin/tor-circuit-display.css @@ -6,30 +6,36 @@ Each bullet in the circuit node list is supposed to represent a Tor circuit node and lines drawn between them to represent Tor network inter-relay connections. */

+#circuit-display-headline { + margin: 0; +}

-#circuit-display-content { +#circuit-display-header { background-image: url(chrome://torbutton/skin/torbutton.svg); - background-position: 1em 1em; background-repeat: no-repeat; - background-size: 24px auto; - background-blend-mode: overlay; - cursor: default; - padding: 0.5em 0px 0.5em; - padding-inline-end: 1em; - padding-inline-start: calc(2em + 24px); - width: 100%; + background-position: 0 50%; + background-size: 16px auto; -moz-context-properties: fill, fill-opacity; fill: currentColor; - fill-opacity: .6; + /* icon indent + 16px icon width + 6px description margin + (total of 12px margin with the native 6px description margin) */ + padding-inline: calc(2em + 22px) 1em; + /* 16px icon width + 12px margin */ + padding-inline-start: 28px; +} + +#circuit-display-header:-moz-locale-dir(rtl) { + background-position-x: right; }

-#circuit-display-content:-moz-locale-dir(rtl) { - background-position: calc(100% - 1em) 1em; +#circuit-display-content { + padding-inline: 2em 1em; + padding-block: 1em; }

#circuit-reload-content { cursor: default; - padding: 1em 0px 1em; + padding: 0 0 1em; padding-inline-end: 3em; padding-inline-start: calc(2em + 24px); width: 100%; @@ -47,13 +53,10 @@ and lines drawn between them to represent Tor network inter-relay connections.

/* Format the circuit node list. */ ul#circuit-display-nodes { - /* font-family: Arial; */ - font-size: 16px; line-height: 26px; - /* color: black;*/ - margin-top: 4px; - margin-bottom: 2px; - padding-inline-start: 4px; + margin-top: 8px; + margin-bottom: 0; + padding-inline-start: 28px; }

/* Hide default bullets, and draw our own bullets */