From 5fabfc4207d663ba8e70f4147853d3cff8b69048 Mon Sep 17 00:00:00 2001
From: hideheader <hideheader@mail.com>
Date: Sun, 1 Mar 2015 23:23:03 -0500
Subject: [PATCH] CSS + 'new style' code changes

---
 popup.html | 34 ++++++++++++++++++++++++++++++++++
 popup.js   | 21 +++++++++++++++++----
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/popup.html b/popup.html
index 44d1c6de..0cf673ee 100644
--- a/popup.html
+++ b/popup.html
@@ -36,6 +36,40 @@
 			.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/"}
+
+				/* :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>
diff --git a/popup.js b/popup.js
index f7f3a872..ae55edd0 100644
--- a/popup.js
+++ b/popup.js
@@ -26,9 +26,20 @@ chrome.tabs.getSelected(null, function(tab) {
 	// 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&nbsp;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)
@@ -40,18 +51,20 @@ 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) {
-			container.appendChild(document.createTextNode(" "));
-		}
 		link.addEventListener("click", openLinkInTabOrWindow, false);
 		container.appendChild(link);
 	});
+	if (localStorage["popup.breadcrumbs"] !== "false") {
+		container.classList.add("breadcrumbs");
+		container.appendChild(container.removeChild(container.firstChild));
+	}
 	writeStyle.appendChild(container);
 });