[tbb-commits] [torbutton/master] Bug 40008: Style fixes for 78

[gk at torproject.org]

commit 9a3956916b9897d668138dd450ad5a8be9d38e02
Author: Alex Catarineu <acat at 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 */