[tor-commits] [torbutton/master] Bug 40048: Protonify Circuit Display Panel
sysrqb at torproject.org
sysrqb at torproject.org
Tue Sep 28 20:26:01 UTC 2021
commit 61da3213a2e22836d2c1b0c4069ddb776ca3ac0d
Author: Richard Pospesel <richard at 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>
More information about the tor-commits
mailing list