[tbb-commits] [torbutton/master] Bug 28005: Crop long .onion domains in circuit display and implement click to copy

[sysrqb at torproject.org]

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