open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS + 'new style' code changes

Browse Source
This commit is contained in:
hideheader 2015-03-01 23:23:03 -05:00
parent 2862754f63
commit 5fabfc4207
2 changed files with 51 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
popup.html
View File

@ -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>

21
popup.js
View File

@ -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);
});