diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 340622a5..325e615a 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": { @@ -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/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/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..604c3211 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 = localStorage.getItem('popupWidth') || '246'; 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); + 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 d81a3f18..66806050 100644 --- a/popup.css +++ b/popup.css @@ -1,16 +1,13 @@ body { - width: 200px; - font-size: 13px; + width: 252px; + 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; -} -#disable-all-wrapper .main-controls { - padding-top: 0.1em; + padding: 0.3em 0 0.6em; } #no-styles { font-style: italic; @@ -24,12 +21,8 @@ input[type=checkbox] { .style-name { cursor: default; font-weight: bold; - margin-bottom: 2px; display: block; } -.actions { - font-size: x-small; -} a, a:visited { color: black; } @@ -40,6 +33,7 @@ a, a:visited { vertical-align: top; } .left-gutter input { + margin-bottom: 1px; margin-top: 0; margin-left: 0; } @@ -49,14 +43,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,11 +59,30 @@ body.blocked > DIV { #installed { margin-top: 0.5em; } -#installed.disabled .style-name { +#installed .disabled .style-name { text-decoration: line-through; } #installed .actions a { - margin-right: 0.2em; + text-decoration: none; +} +#installed .style-edit-link, #installed .delete { + 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%, 40%); +} +.svg-icon circle { + stroke: hsl(0, 0%, 40%); + stroke-width: 1; } body > .actions { margin-top: 0.5em; @@ -87,7 +97,9 @@ body > .actions { #unavailable { border: none; - display: none; + display: none; /* flex */ + align-items: center; + justify-content: center; font-size: 14px; text-indent: 6px; } @@ -141,3 +153,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..5729ac0b 100644 --- a/popup.html +++ b/popup.html @@ -14,8 +14,16 @@
- - + + + + + + + + + +
@@ -45,21 +53,21 @@
-
- -
-
-

+
+
+ +
- \ No newline at end of file + diff --git a/popup.js b/popup.js index 47cc4861..9a3a9c17 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 = (localStorage.getItem('popupWidth') || '246') + '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);