commit 61da3213a2e22836d2c1b0c4069ddb776ca3ac0d Author: Richard Pospesel richard@torproject.org Date: Mon Sep 20 16:01:51 2021 -0500
Bug 40048: Protonify Circuit Display Panel --- chrome/skin/tor-circuit-display.css | 131 ++++++++++++++++++--------------- chrome/skin/tor-circuit-line-first.svg | 10 +-- chrome/skin/tor-circuit-line-last.svg | 10 +-- chrome/skin/tor-circuit-line.svg | 9 ++- 4 files changed, 85 insertions(+), 75 deletions(-)
diff --git a/chrome/skin/tor-circuit-display.css b/chrome/skin/tor-circuit-display.css index 6f132db8..5f37bb71 100644 --- a/chrome/skin/tor-circuit-display.css +++ b/chrome/skin/tor-circuit-display.css @@ -6,39 +6,64 @@ 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-container { + margin-inline: 8px; + margin-top: 0px; + margin-bottom: 4px; + padding: 0px 3px; +} + +#circuit-display-container > toolbarseparator { + margin-block: 0px; + margin-inline: -3px; + width: calc(100% + 6px); +} + #circuit-display-headline { - margin: 0; + margin-inline-start: 8px; }
#circuit-display-header { background-image: url(chrome://torbutton/skin/torbutton.svg); background-repeat: no-repeat; - background-position: 0 50%; + background-position: 4px 50%; background-size: 16px auto; min-height: 16px; -moz-context-properties: fill, fill-opacity; fill: currentColor; - /* 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; + margin-block: 8px; }
#circuit-display-header:-moz-locale-dir(rtl) { background-position-x: right; }
+#circuit-display-header > hbox { + margin-inline-start: 16px; +} + #circuit-display-content { - padding-inline: 2em 1em; - padding-block: 1em; + width: 100%; +} + +#circuit-display-content > * { + margin-inline: 0px; + margin-inline-start: 16px; + margin-top: 0px; + margin-bottom: 8px; +} + +#circuit-display-content > hbox { + display: flex; +} + +#circuit-reload-button-container { + padding-top: 8px; + justify-content: flex-end; }
#circuit-reload-content { cursor: default; - padding: 0 0 1em; - padding-inline-end: 3em; - padding-inline-start: calc(2em + 24px); width: 100%; }
@@ -54,10 +79,8 @@ and lines drawn between them to represent Tor network inter-relay connections.
/* Format the circuit node list. */ ul#circuit-display-nodes { - line-height: 26px; - margin-top: 8px; - margin-bottom: 0; - padding-inline-start: 28px; + line-height:32px; + padding-inline-start: 8px; }
/* Hide default bullets, and draw our own bullets */ @@ -68,6 +91,10 @@ ul#circuit-display-nodes li { list-style: none; padding-inline-start: 1.5em; white-space: nowrap; + max-height: 32px; + -moz-context-properties: stroke, stroke-opacity; + stroke: currentColor; + stroke-opacity: 100%; }
ul#circuit-display-nodes li:dir(rtl) { @@ -82,78 +109,51 @@ ul#circuit-display-nodes li:last-child { background-image: url(chrome://torbutton/skin/tor-circuit-line-last.svg); }
-.circuit-guard-help { - -moz-context-properties: fill, stroke; - fill: #6200a4; - stroke: #6200a4; -} - -.circuit-guard-help:-moz-lwtheme-brighttext { - fill: #D476FF; - stroke: #D476FF; -} - .circuit-ip-address { font-size: 80%; - opacity: 0.4; + opacity: 0.7; padding-inline-start: 3px; }
.circuit-guard-info { font-size: 80%; + color: var(--button-primary-bgcolor); font-weight: bold; - color: #6200a4; padding-inline-start: 3px; }
-.circuit-guard-info:-moz-lwtheme-brighttext { - color:#D476FF; -} - #circuit-reload-button { - background-color: #0060df; - border-radius: 3px; - border: none; - color: white; - cursor: pointer; - font-size: 18px; - padding: 10px; + background-color: var(--button-primary-bgcolor); + border-radius: 4px; + border-width: 0px; + color: var(--button-primary-color); + font-weight: 600; + padding: 8px 16px; + margin: 0; } - #circuit-reload-button:hover { - background-color: #0058cf; + background-color: var(--button-primary-hover-bgcolor); }
#circuit-reload-button:active { - background-color: #0050bf; + background-color: var(--button-primary-active-bgcolor); }
#circuit-guard-note-container { - margin-top: 10px; + }
#circuit-guard-note-container div { - margin-left: 3px; - margin-right: 3px; + margin-inline-start: 8px; }
.circuit-guard-name { font-weight: bold; - color: #6200a4; -} - -.circuit-guard-name:-moz-lwtheme-brighttext { - color:#D476FF; }
.circuit-link { cursor: pointer; - color: #0000ee; -} - - -.circuit-link:-moz-lwtheme-brighttext { - color: #A9A9A9; + color: var(--lwt-popup-brighttext-url-color); }
.circuit-link:hover { @@ -169,18 +169,27 @@ ul#circuit-display-nodes li:last-child { }
.circuit-onion::after { - background-color: #e3e3e3; - border-radius: 2px; - color: black; + background-color: var(--button-bgcolor);; + border-radius: 4px; + color: var(--button-color); content: attr(data-text-clicktocopy); font-size: 80%; opacity: 0; - padding: 5px; + padding: 5px 10px; margin: 10px; text-align: center; transition: opacity 0.3s cubic-bezier(0.07, 0.95, 0, 1); }
+.circuit-onion:hover::after { + background-color: var(--button-hover-bgcolor); +} + +.circuit-onion:active::after { + background-color: var(--button-active-bgcolor); +} + + .circuit-onion-copied::after { content: attr(data-text-copied); opacity: 1; diff --git a/chrome/skin/tor-circuit-line-first.svg b/chrome/skin/tor-circuit-line-first.svg index 6c070daa..1981ee87 100644 --- a/chrome/skin/tor-circuit-line-first.svg +++ b/chrome/skin/tor-circuit-line-first.svg @@ -1,6 +1,6 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="15" height="40"> - <g stroke="#9a9a9a" stroke-width="3" fill="white"> - <line x1='50%' y1='50%' x2='50%' y2='100%'/> - <circle cx='50%' cy='50%' r='4.5'/> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="32"> + <g stroke="context-stroke" opacity="context-stroke-opacity" stroke-width="2" fill="transparent"> + <circle cx="50%" cy="50%" r="6"/> + <line x1="50%" y1="22" x2="50%" y2="100%"/> </g> -</svg> \ No newline at end of file +</svg> diff --git a/chrome/skin/tor-circuit-line-last.svg b/chrome/skin/tor-circuit-line-last.svg index 4ed0ff05..19c4adaa 100644 --- a/chrome/skin/tor-circuit-line-last.svg +++ b/chrome/skin/tor-circuit-line-last.svg @@ -1,6 +1,6 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="15" height="40"> - <g stroke="#9a9a9a" stroke-width="3" fill="white"> - <line x1='50%' y1='0%' x2='50%' y2='50%'/> - <circle cx='50%' cy='50%' r='4.5'/> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="32"> + <g stroke="context-stroke" opacity="context-stroke-opacity" stroke-width="2" fill="transparent"> + <line x1="50%" y1="0%" x2="50%" y2="10"/> + <circle cx="50%" cy="50%" r="6"/> </g> -</svg> \ No newline at end of file +</svg> diff --git a/chrome/skin/tor-circuit-line.svg b/chrome/skin/tor-circuit-line.svg index ada7cd59..00717f6c 100644 --- a/chrome/skin/tor-circuit-line.svg +++ b/chrome/skin/tor-circuit-line.svg @@ -1,6 +1,7 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="15" height="40"> - <g stroke="#9a9a9a" stroke-width="3" fill="white"> - <line x1="50%" y1="0%" x2="50%" y2="100%"/> - <circle cx="50%" cy="50%" r="4.5"/> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="32"> + <g stroke="context-stroke" opacity="context-stroke-opacity" stroke-width="2" fill="transparent"> + <line x1="50%" y1="0%" x2="50%" y2="10"/> + <circle cx="50%" cy="50%" r="6"/> + <line x1="50%" y1="22" x2="50%" y2="100%"/> </g> </svg>