From 0646f6bd65908f6543717e97a21bb8435543f6ea Mon Sep 17 00:00:00 2001 From: Jeremy Schomery Date: Mon, 6 Mar 2017 17:24:56 +0330 Subject: [PATCH 1/8] a few changes in the popup look based on #38 --- _locales/en/messages.json | 4 +-- popup.css | 67 ++++++++++++++++++++++++++++++++------- popup.html | 18 +++++------ 3 files changed, 67 insertions(+), 22 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 340622a5..31a342ed 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -266,7 +266,7 @@ "description": "Text displayed when no styles are installed for the current site" }, "openManage": { - "message": "Manage installed styles", + "message": "Manage", "description": "Link to open the manage page." }, "openOptionsManage": { @@ -274,7 +274,7 @@ "description": "Go to Options UI" }, "openOptionsPopup": { - "message": "Options UI", + "message": "Options", "description": "Go to Options UI" }, "openOptionsShortcuts": { diff --git a/popup.css b/popup.css index d81a3f18..6cf1823f 100644 --- a/popup.css +++ b/popup.css @@ -1,13 +1,13 @@ body { - width: 200px; - font-size: 13px; + width: 240px; + font-size: 12px; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; } input[type=checkbox] { outline: none; } #disable-all-wrapper { - padding: 0.2em 0 0.7em; + padding: 0.7em 0 0.7em; } #disable-all-wrapper .main-controls { padding-top: 0.1em; @@ -27,9 +27,6 @@ input[type=checkbox] { margin-bottom: 2px; display: block; } -.actions { - font-size: x-small; -} a, a:visited { color: black; } @@ -49,14 +46,11 @@ a, a:visited { .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; @@ -68,7 +62,7 @@ body.blocked > DIV { #installed { margin-top: 0.5em; } -#installed.disabled .style-name { +#installed .disabled .style-name { text-decoration: line-through; } #installed .actions a { @@ -141,3 +135,54 @@ body:not(.blocked) #unavailable { color: inherit; text-decoration: underline; } + + /* action buttons */ +#popup-options { + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 1.2em 0; +} +#popup-options button { + margin: 0 2px; + width: 33%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + /* margins */ +body { + margin: 0; +} +body>div:not(#installed) { + margin-left:0.75em; + margin-right:0.75em; +} +#unavailable { + margin-top: 0.75em; +} +#installed .entry { +} + /* entries */ +#installed .entry { + display: flex; + align-items: center; + padding: 5px 0.75em; +} +#installed .entry:nth-child(even) { + background-color: rgba(0, 0, 0, 0.05); +} +#installed .main-controls { + display: flex; + flex: 1; + width: calc(100% - 20px); + align-items: center; +} +#installed .main-controls label { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-right: 5px; +} diff --git a/popup.html b/popup.html index d06f2dad..639f63ff 100644 --- a/popup.html +++ b/popup.html @@ -45,21 +45,21 @@
-
- -
-
-

+
+
+ +
- \ No newline at end of file + From 974aaee823c0da43ebbb91e1251a917056cab018 Mon Sep 17 00:00:00 2001 From: Jeremy Schomery Date: Mon, 6 Mar 2017 23:47:32 +0330 Subject: [PATCH 2/8] popup width is now adjustable --- _locales/en/messages.json | 3 +++ options/index.html | 4 ++++ options/index.js | 2 ++ popup.css | 4 +++- popup.js | 5 ++++- storage.js | 2 ++ 6 files changed, 18 insertions(+), 2 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 31a342ed..325e615a 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -464,6 +464,9 @@ "optionsBadgeDisabled": { "message": "Badge background color (when disabled)" }, + "optionsPopupWidth": { + "message": "Popup width (in pixels)" + }, "optionsUpdateInterval": { "message": "Automatically check for and install all available userstyle updates (in hrs)" }, diff --git a/options/index.html b/options/index.html index b825079d..a234d6fd 100644 --- a/options/index.html +++ b/options/index.html @@ -18,6 +18,10 @@ + + + + 1 diff --git a/options/index.js b/options/index.js index 206e6906..5d262acd 100644 --- a/options/index.js +++ b/options/index.js @@ -4,6 +4,7 @@ function restore () { chrome.runtime.getBackgroundPage(bg => { document.getElementById('badgeDisabled').value = bg.prefs.get('badgeDisabled'); document.getElementById('badgeNormal').value = bg.prefs.get('badgeNormal'); + document.getElementById('popupWidth').value = bg.prefs.get('popupWidth'); document.getElementById('updateInterval').value = bg.prefs.get('updateInterval'); }); } @@ -12,6 +13,7 @@ function save () { chrome.runtime.getBackgroundPage(bg => { bg.prefs.set('badgeDisabled', document.getElementById('badgeDisabled').value); bg.prefs.set('badgeNormal', document.getElementById('badgeNormal').value); + bg.prefs.set('popupWidth', +document.getElementById('popupWidth').value); bg.prefs.set( 'updateInterval', Math.max(0, +document.getElementById('updateInterval').value) diff --git a/popup.css b/popup.css index 6cf1823f..dd5c9f19 100644 --- a/popup.css +++ b/popup.css @@ -81,7 +81,9 @@ body > .actions { #unavailable { border: none; - display: none; + display: none; /* flex */ + align-items: center; + justify-content: center; font-size: 14px; text-indent: 6px; } diff --git a/popup.js b/popup.js index 47cc4861..510e49c3 100644 --- a/popup.js +++ b/popup.js @@ -13,7 +13,7 @@ function updatePopUp(url) { var urlWillWork = /^(file|http|https|ftps?|chrome\-extension):/.exec(url); if (!urlWillWork) { document.body.classList.add("blocked"); - document.getElementById("unavailable").style.display = "block"; + document.getElementById("unavailable").style.display = "flex"; return; } @@ -227,3 +227,6 @@ document.querySelector('#popup-shortcuts-button').addEventListener("click", func 'url': 'chrome://extensions/configureCommands' }); }); + +// popup width +document.body.style.width = prefs.get('popupWidth') + 'px'; diff --git a/storage.js b/storage.js index 9a6c0174..601ff3df 100644 --- a/storage.js +++ b/storage.js @@ -352,6 +352,8 @@ var prefs = chrome.extension.getBackgroundPage().prefs || new function Prefs() { "badgeDisabled": "#8B0000", // badge background color when disabled "badgeNormal": "#006666", // badge background color + "popupWidth": 240, // popup width in pixels + "updateInterval": 0 // user-style automatic update interval, hour }; var values = deepCopy(defaults); From 885bab9a03b290f8dd567b18654e0dd4214c4d86 Mon Sep 17 00:00:00 2001 From: Jeremy Schomery Date: Wed, 8 Mar 2017 16:41:26 +0330 Subject: [PATCH 3/8] moving popupWidth pref to localStorage base on https://github.com/schomery/stylish-chrome/issues/38#issuecomment-284693730 --- options/index.js | 4 ++-- popup.css | 2 +- popup.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/options/index.js b/options/index.js index 5d262acd..604c3211 100644 --- a/options/index.js +++ b/options/index.js @@ -4,7 +4,7 @@ function restore () { chrome.runtime.getBackgroundPage(bg => { document.getElementById('badgeDisabled').value = bg.prefs.get('badgeDisabled'); document.getElementById('badgeNormal').value = bg.prefs.get('badgeNormal'); - document.getElementById('popupWidth').value = bg.prefs.get('popupWidth'); + document.getElementById('popupWidth').value = localStorage.getItem('popupWidth') || '246'; document.getElementById('updateInterval').value = bg.prefs.get('updateInterval'); }); } @@ -13,7 +13,7 @@ function save () { chrome.runtime.getBackgroundPage(bg => { bg.prefs.set('badgeDisabled', document.getElementById('badgeDisabled').value); bg.prefs.set('badgeNormal', document.getElementById('badgeNormal').value); - bg.prefs.set('popupWidth', +document.getElementById('popupWidth').value); + localStorage.setItem('popupWidth', document.getElementById('popupWidth').value); bg.prefs.set( 'updateInterval', Math.max(0, +document.getElementById('updateInterval').value) diff --git a/popup.css b/popup.css index dd5c9f19..c69033d0 100644 --- a/popup.css +++ b/popup.css @@ -1,5 +1,5 @@ body { - width: 240px; + width: 252px; font-size: 12px; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; } diff --git a/popup.js b/popup.js index 510e49c3..9a3a9c17 100644 --- a/popup.js +++ b/popup.js @@ -229,4 +229,4 @@ document.querySelector('#popup-shortcuts-button').addEventListener("click", func }); // popup width -document.body.style.width = prefs.get('popupWidth') + 'px'; +document.body.style.width = (localStorage.getItem('popupWidth') || '246') + 'px'; From b555c395eb4323ba367cb72717ab6d75ffab48b3 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Thu, 9 Mar 2017 07:53:00 -0500 Subject: [PATCH 4/8] Edit/delete as buttons with icons The icons I used are from right here on Github. They're SVG, so there should't be reliability issues. Wanted to see how they'd look, and I really kinda like it. Thoughts? --- popup.css | 26 ++++++++++++++++++++++++-- popup.html | 12 ++++++++++-- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/popup.css b/popup.css index c69033d0..a5d6182b 100644 --- a/popup.css +++ b/popup.css @@ -24,7 +24,6 @@ input[type=checkbox] { .style-name { cursor: default; font-weight: bold; - margin-bottom: 2px; display: block; } a, a:visited { @@ -37,6 +36,7 @@ a, a:visited { vertical-align: top; } .left-gutter input { + margin-bottom: 1px; margin-top: 0; margin-left: 0; } @@ -66,7 +66,29 @@ body.blocked > DIV { text-decoration: line-through; } #installed .actions a { - margin-right: 0.2em; + text-decoration: none; +} +#installed .style-edit-link, #installed .delete { + height: 22px; + width: 22px; + -webkit-appearance: button; + display: inline-flex; + align-items: center; + justify-content: center; +} +.svg-icon { + width: 16px; + height: 16px; + pointer-events: none; +} +.svg-icon path, +.svg-icon polygon, +.svg-icon rect { + fill: hsl(0, 0%, 20%); +} +.svg-icon circle { + stroke: hsl(0, 0%, 20%); + stroke-width: 1; } body > .actions { margin-top: 0.5em; diff --git a/popup.html b/popup.html index 639f63ff..30e3ddde 100644 --- a/popup.html +++ b/popup.html @@ -14,8 +14,16 @@
- - + + + + + + + + + +
From 888faf4c61ffeb5b620023b338ba241168dab0bb Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Thu, 9 Mar 2017 18:33:32 -0500 Subject: [PATCH 5/8] Alignment tweak for "Turn all styles off" --- popup.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/popup.css b/popup.css index a5d6182b..d8b1d640 100644 --- a/popup.css +++ b/popup.css @@ -7,10 +7,7 @@ input[type=checkbox] { outline: none; } #disable-all-wrapper { - padding: 0.7em 0 0.7em; -} -#disable-all-wrapper .main-controls { - padding-top: 0.1em; + padding: 0.3em 0 0.6em; } #no-styles { font-style: italic; From 9deef0ed9769d26d97466f808893efdb64bbcdad Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Fri, 10 Mar 2017 19:22:50 -0500 Subject: [PATCH 6/8] Lighten icons a bit --- popup.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/popup.css b/popup.css index d8b1d640..f258d31e 100644 --- a/popup.css +++ b/popup.css @@ -81,10 +81,10 @@ body.blocked > DIV { .svg-icon path, .svg-icon polygon, .svg-icon rect { - fill: hsl(0, 0%, 20%); + fill: hsl(0, 0%, 40%); } .svg-icon circle { - stroke: hsl(0, 0%, 20%); + stroke: hsl(0, 0%, 40%); stroke-width: 1; } body > .actions { From 616a2517f504ac51645c57760310970c09e9da17 Mon Sep 17 00:00:00 2001 From: Jeremy Schomery Date: Sat, 11 Mar 2017 12:35:37 +0330 Subject: [PATCH 7/8] https://github.com/schomery/stylish-chrome/issues/38#issuecomment-285854060 --- popup.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/popup.css b/popup.css index f258d31e..66806050 100644 --- a/popup.css +++ b/popup.css @@ -66,9 +66,6 @@ body.blocked > DIV { text-decoration: none; } #installed .style-edit-link, #installed .delete { - height: 22px; - width: 22px; - -webkit-appearance: button; display: inline-flex; align-items: center; justify-content: center; From 2da4a8708c93740f16a4fbc5b6978b06b4d54538 Mon Sep 17 00:00:00 2001 From: Jeremy Schomery Date: Sat, 11 Mar 2017 12:41:38 +0330 Subject: [PATCH 8/8] Supporting tooltip; https://github.com/schomery/stylish-chrome/issues/38#issuecomment-285350914 --- localization.js | 4 ++++ popup.html | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/localization.js b/localization.js index f30f814c..934d9bef 100644 --- a/localization.js +++ b/localization.js @@ -53,6 +53,10 @@ function tNodeList(nodes) { case "text": node.insertBefore(document.createTextNode(value), node.firstChild); break; + case "tooltip": { + node.setAttribute('title', value); + break; + } case "html": node.insertAdjacentHTML("afterbegin", value); break; diff --git a/popup.html b/popup.html index 30e3ddde..5729ac0b 100644 --- a/popup.html +++ b/popup.html @@ -14,16 +14,16 @@
- - - - - - - - - - + + + + + + + + + +