Commit e6fb19bf authored by Alex Catarineu's avatar Alex Catarineu
Browse files

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.
parent 3a9dcce4
......@@ -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";
......
......@@ -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
......
......@@ -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;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment