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) {