commit e6fb19bf14512707f1141a1306f9ee11dadcd2f6 Author: Alex Catarineu acat@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; +}