Merge pull request #37 from hideheader/new-style-links-grr

Support "breadcrumbs" new style links

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;
+			}
 		</style>
 
 		<script src="localization.js"></script>

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