diff --git a/popup.html b/popup.html index 44d1c6de..15c799a4 100644 --- a/popup.html +++ b/popup.html @@ -36,6 +36,45 @@ .enable, .disable { display: none; } + + /* 'New style' links */ + #write-style-for {margin-right: .6ex} + .write-style-link {margin-left: .6ex} + .write-style-link::before, .write-style-link::after {font-size: x-small} + .write-style-link::before {content: "\00ad"} /* "soft" hyphen */ + #match {overflow-wrap: break-word;} + + /* "breadcrumbs" 'new style' links */ + .breadcrumbs > .write-style-link {margin-left: 0} + .breadcrumbs:hover a {color: #bbb; text-decoration: none} + + /* use just the subdomain name instead of the full domain name */ + .breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2)) {font-size: 0} + .breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2))::before { + content: attr(subdomain); + } + + /* "dot" after each subdomain name */ + .breadcrumbs > .write-style-link[subdomain]::after {content: "."} + /* no "dot" after top-level domain */ + .breadcrumbs > .write-style-link:nth-last-child(2)::after {content: none} + /* "forward slash" before path ("this URL") */ + .breadcrumbs > .write-style-link:last-child::before {content: "\200b/"} + .breadcrumbs > .write-style-link:last-child:first-child::before, + .breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none} + + /* suppress TLD-only link */ + .breadcrumbs > .write-style-link[subdomain=""] {display: none} + + /* :hover style */ + .breadcrumbs.url\(\) > .write-style-link, /* :hover or :focus on "this URL" sets class="url()" */ + .breadcrumbs > .write-style-link:hover, + .breadcrumbs > .write-style-link:focus, + .breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain], + .breadcrumbs > .write-style-link:focus ~ .write-style-link[subdomain] { + color: inherit; + text-decoration: underline; + } diff --git a/popup.js b/popup.js index 39936b69..8aa9ead5 100644 --- a/popup.js +++ b/popup.js @@ -19,14 +19,27 @@ chrome.tabs.getSelected(null, function(tab) { document.querySelector("#find-styles a").href = "https://userstyles.org/styles/browse/all/" + encodeURIComponent("file" === urlWillWork[1] ? "file:" : tab.url); // Write new style links - var writeStyleLinks = [] + var writeStyleLinks = [], + container = document.createElement('span'); + container.id = "match"; // For this URL var urlLink = writeStyleTemplate.cloneNode(true); urlLink.href = "edit.html?url=" + encodeURIComponent(tab.url); - urlLink.appendChild(document.createTextNode(t("writeStyleForURL"))); + urlLink.appendChild(document.createTextNode( // switchable; default="this URL" + localStorage["popup.breadcrumbs.usePath"] !== "true" + ? t("writeStyleForURL").replace(/ /g, "\u00a0") + : /\/\/[^/]+\/(.*)/.exec(tab.url)[1] + )); + urlLink.title = "url(\"$\")".replace("$", tab.url); writeStyleLinks.push(urlLink); document.querySelector("#write-style").appendChild(urlLink) + if (localStorage["popup.breadcrumbs"] !== "false") { // switchable; default=enabled + urlLink.addEventListener("mouseenter", function(event) { this.parentNode.classList.add("url()") }, false); + urlLink.addEventListener("focus", function(event) { this.parentNode.classList.add("url()") }, false); + urlLink.addEventListener("mouseleave", function(event) { this.parentNode.classList.remove("url()") }, false); + urlLink.addEventListener("blur", function(event) { this.parentNode.classList.remove("url()") }, false); + } // For domain var domains = getDomains(tab.url) @@ -38,17 +51,21 @@ chrome.tabs.getSelected(null, function(tab) { var domainLink = writeStyleTemplate.cloneNode(true); domainLink.href = "edit.html?domain=" + encodeURIComponent(domain); domainLink.appendChild(document.createTextNode(domain)); + domainLink.title = "domain(\"$\")".replace("$", domain); + domainLink.setAttribute("subdomain", domain.substring(0, domain.indexOf("."))); writeStyleLinks.push(domainLink); }); var writeStyle = document.querySelector("#write-style"); writeStyleLinks.forEach(function(link, index) { - if (index > 0) { - writeStyle.appendChild(document.createTextNode(" ")); - } link.addEventListener("click", openLinkInTabOrWindow, false); - writeStyle.appendChild(link); + container.appendChild(link); }); + if (localStorage["popup.breadcrumbs"] !== "false") { + container.classList.add("breadcrumbs"); + container.appendChild(container.removeChild(container.firstChild)); + } + writeStyle.appendChild(container); }); function showStyles(styles) {