From 2862754f63cb29186bf5ea016213f4a0fd03b84a Mon Sep 17 00:00:00 2001 From: hideheader Date: Wed, 18 Feb 2015 13:56:39 -0500 Subject: [PATCH 1/3] Support "breadcrumbs" new style links Adds support for 'new style' links that resemble the page URL. Requires stylesheet support to enable it. https://userstyles.org/styles/110560/breadcrumbs-new-style-links-stylish-for-chrome --- popup.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/popup.js b/popup.js index 51d5cea2..f7f3a872 100644 --- a/popup.js +++ b/popup.js @@ -19,7 +19,9 @@ 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); @@ -38,17 +40,19 @@ chrome.tabs.getSelected(null, function(tab) { var domainLink = writeStyleTemplate.cloneNode(true); domainLink.href = "edit.html?domain=" + encodeURIComponent(domain); domainLink.appendChild(document.createTextNode(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(" ")); + container.appendChild(document.createTextNode(" ")); } link.addEventListener("click", openLinkInTabOrWindow, false); - writeStyle.appendChild(link); + container.appendChild(link); }); + writeStyle.appendChild(container); }); function showStyles(styles) { From 5fabfc4207d663ba8e70f4147853d3cff8b69048 Mon Sep 17 00:00:00 2001 From: hideheader Date: Sun, 1 Mar 2015 23:23:03 -0500 Subject: [PATCH 2/3] 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; + } 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 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); }); From 83acbaa77cc310b34dd2280ab4e73350cad4902c Mon Sep 17 00:00:00 2001 From: hideheader Date: Tue, 3 Mar 2015 14:31:32 -0500 Subject: [PATCH 3/3] A little to the left... no, more to the right... --- popup.html | 5 +++++ popup.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/popup.html b/popup.html index 0cf673ee..15c799a4 100644 --- a/popup.html +++ b/popup.html @@ -60,6 +60,11 @@ .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()" */ diff --git a/popup.js b/popup.js index ae55edd0..d6392f7d 100644 --- a/popup.js +++ b/popup.js @@ -51,7 +51,7 @@ 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.title = "domain(\"$\")".replace("$", domain); domainLink.setAttribute("subdomain", domain.substring(0, domain.indexOf("."))); writeStyleLinks.push(domainLink); });