From 9582c65a840d88c3ee86250ccfaeddde589a17eb Mon Sep 17 00:00:00 2001 From: Jeremy Schomery Date: Wed, 11 Jan 2017 15:25:38 +0330 Subject: [PATCH] import styles from Stylish extension --- manage.html | 25 ++++++++++ manage.js | 34 ++++++++++++++ popup.css | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++ popup.html | 130 +-------------------------------------------------- storage.js | 1 + 5 files changed, 193 insertions(+), 129 deletions(-) create mode 100644 popup.css diff --git a/manage.html b/manage.html index d10ee2ad..b13b47e9 100644 --- a/manage.html +++ b/manage.html @@ -187,6 +187,31 @@
+
+

Export Styles from Stylish extension

+ +
+
+

Import Styles

+ +

diff --git a/manage.js b/manage.js index fa088bf1..0e14e4c8 100644 --- a/manage.js +++ b/manage.js @@ -461,6 +461,37 @@ function initFilter(className, node) { onFilterChange(className, {target: node}); } +function importStyles (e) { + var file = e.target.files[0]; + var reader = new FileReader(); + var styles = []; + + function save () { + var style = styles.shift(); + if (style) { + delete style.id; + saveStyle(style, save); + } + else { + window.location.reload() + } + } + + reader.onloadend = function (evt) { + try { + styles = JSON.parse(evt.target.result); + save(); + } + catch (e) { + window.alert(e.message); + } + }; + reader.onerror = function (e) { + window.alert(e.message); + } + reader.readAsText(file) +} + document.addEventListener("DOMContentLoaded", function() { installed = document.getElementById("installed"); if (document.stylishStyles) { @@ -473,6 +504,8 @@ document.addEventListener("DOMContentLoaded", function() { document.getElementById("search").addEventListener("input", searchStyles); searchStyles(true); // re-apply filtering on history Back + document.getElementById('import').addEventListener('change', importStyles); + setupLivePrefs([ "manage.onlyEnabled", "manage.onlyEdited", @@ -482,4 +515,5 @@ document.addEventListener("DOMContentLoaded", function() { ]); initFilter("enabled-only", document.getElementById("manage.onlyEnabled")); initFilter("edited-only", document.getElementById("manage.onlyEdited")); + }); diff --git a/popup.css b/popup.css new file mode 100644 index 00000000..05803013 --- /dev/null +++ b/popup.css @@ -0,0 +1,132 @@ +body { + width: 300px; + font-size: 13px; + font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; +} +input[type=checkbox] { + outline: none; +} +#no-styles { + font-style: italic; +} +.checker { + display: inline; +} +.style-name { + cursor: default; + font-weight: bold; + margin-bottom: 2px; + display: block; +} +.actions { + font-size: x-small; +} +a, a:visited { + color: black; +} + +.left-gutter { + display: table-cell; + width: 16px; + vertical-align: top; +} +.left-gutter input { + margin-top: 0; + margin-left: 0; +} +.main-controls { + display: table-cell; +} + +.entry { + padding: 0.5em 0; + border-bottom: 1px solid black; +} +.entry:first-child { + padding-top: 0; +} +.entry:last-child { + border-bottom: none; +} +body > DIV { + border-bottom: 1px solid black; + padding-bottom: 2px; +} +body > DIV:last-of-type, +body.blocked > DIV { + border-bottom: none; +} +#installed { + margin-top: 0.5em; +} +#installed.disabled .style-name { + text-decoration: line-through; +} +#installed .actions a { + margin-right: 0.2em; +} +body > .actions { + margin-top: 0.5em; +} + +.actions > div:not(:last-child):not(#disable-all-wrapper), .actions > .main-controls > div:not(:last-child), #unavailable:not(:last-child), #unavailable + .actions { + margin-bottom: 0.75em; +} +.actions input, .actions label { + vertical-align: middle; +} + +#unavailable { + border: none; + display: none; +} +body.blocked #installed, +body.blocked #find-styles, +body.blocked #write-style, +body:not(.blocked) #unavailable { + display: none; +} + +/* Never shown, but can be enabled with a style */ +.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.html b/popup.html index 28583fbe..d81273ea 100644 --- a/popup.html +++ b/popup.html @@ -1,135 +1,7 @@ - +