commit e6fb19bf14512707f1141a1306f9ee11dadcd2f6
Author: Alex Catarineu <acat(a)torproject.org>
Date: Mon Feb 10 16:04:44 2020 +0100
Bug 28005: Crop long .onion domains in circuit display and implement click to copy
We also show a tooltip with the full domain on hover, so that it's not
necessary to copy it for users to see it.
---
chrome/content/tor-circuit-display.js | 34 ++++++++++++++++++++++++++++++--
chrome/locale/en-US/torbutton.properties | 2 ++
chrome/skin/tor-circuit-display.css | 26 ++++++++++++++++++++++++
3 files changed, 60 insertions(+), 2 deletions(-)
diff --git a/chrome/content/tor-circuit-display.js b/chrome/content/tor-circuit-display.js
index 19b55d18..119f6fca 100644
--- a/chrome/content/tor-circuit-display.js
+++ b/chrome/content/tor-circuit-display.js
@@ -236,7 +236,9 @@ let showCircuitDisplay = function (show) {
// and returns nested xml element objects.
let xmlTree = function xmlTree (ns, data) {
let [type, attrs, ...children] = data;
- let element = document.createElementNS(ns, type);
+ let element = type.startsWith("html:")
+ ? document.createXULElement(type)
+ : document.createElementNS(ns, type);
for (let [key, val] of Object.entries(attrs)) {
element.setAttribute(key, val);
}
@@ -308,12 +310,40 @@ let updateCircuitDisplay = function () {
(i === 0 && nodeData[0].type !== "bridge") ?
["span", { class: "circuit-guard-info" }, uiString("guard")] : null);
}
+
+ let domainParts = [];
if (domain.endsWith(".onion")) {
for (let i = 0; i < 3; ++i) {
li(uiString("relay"));
}
+ if (domain.length > 22) {
+ domainParts.push(domain.slice(0, 7), "…", domain.slice(-12));
+ } else {
+ domainParts.push(domain);
+ }
+ } else {
+ domainParts.push(domain);
}
- li(domain);
+
+ // We use a XUL html:span element so that the tooltiptext is displayed.
+ li([
+ "html:span",
+ {
+ class: "circuit-onion",
+ onclick: `
+ this.classList.add("circuit-onion-copied");
+ Cc[
+ "@mozilla.org/widget/clipboardhelper;1"
+ ].getService(Ci.nsIClipboardHelper).copyString(this.getAttribute("data-onion"))
+ `,
+ "data-onion": domain,
+ "data-text-clicktocopy": torbutton_get_property_string("torbutton.circuit_display.click_to_copy"),
+ "data-text-copied": torbutton_get_property_string("torbutton.circuit_display.copied"),
+ tooltiptext: domain,
+ },
+ ...domainParts,
+ ]);
+
// Hide the note about guards if we are using a bridge.
document.getElementById("circuit-guard-note-container").style.display =
(nodeData[0].type === "bridge") ? "none" : "block";
diff --git a/chrome/locale/en-US/torbutton.properties b/chrome/locale/en-US/torbutton.properties
index 375067b3..14330f6f 100644
--- a/chrome/locale/en-US/torbutton.properties
+++ b/chrome/locale/en-US/torbutton.properties
@@ -8,6 +8,8 @@ torbutton.circuit_display.unknown_country = Unknown country
torbutton.circuit_display.guard = Guard
torbutton.circuit_display.guard_note = Your [Guard] node may not change.
torbutton.circuit_display.learn_more = Learn more
+torbutton.circuit_display.click_to_copy = Click to Copy
+torbutton.circuit_display.copied = Copied!
torbutton.content_sizer.margin_tooltip = Tor Browser adds this margin to make the width and height of your window less distinctive, and thus reduces the ability of people to track you online.
torbutton.panel.tooltip.disabled = Click to enable Tor
torbutton.panel.tooltip.enabled = Click to disable Tor
diff --git a/chrome/skin/tor-circuit-display.css b/chrome/skin/tor-circuit-display.css
index 485ae7a5..3c349e0c 100644
--- a/chrome/skin/tor-circuit-display.css
+++ b/chrome/skin/tor-circuit-display.css
@@ -155,3 +155,29 @@ ul#circuit-display-nodes li:last-child {
.circuit-link:hover {
text-decoration: underline;
}
+
+.circuit-onion {
+ cursor: pointer;
+}
+
+.circuit-onion:hover::after {
+ opacity: 1;
+}
+
+.circuit-onion::after {
+ background-color: #e3e3e3;
+ border-radius: 2px;
+ color: black;
+ content: attr(data-text-clicktocopy);
+ font-size: 80%;
+ opacity: 0;
+ padding: 5px;
+ margin: 10px;
+ text-align: center;
+ transition: opacity 0.3s cubic-bezier(0.07, 0.95, 0, 1);
+}
+
+.circuit-onion-copied::after {
+ content: attr(data-text-copied);
+ opacity: 1;
+}