Merge branch 'popup-design'

_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)"
   },

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;

options/index.html

@@ -18,6 +18,10 @@
         <td i18n-text="optionsBadgeDisabled"></td>
         <td><input type="color" id="badgeDisabled"></td>
       </tr>
+      <tr>
+        <td i18n-text="optionsPopupWidth"></td>
+        <td><input type="number" id="popupWidth" min="200"></td>
+      </tr>
       <tr>
         <td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
         <td><input type="number" min="0" id="updateInterval"></td>

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)

popup.css

@@ -1,16 +1,13 @@
 body {
-  width: 200px;
+  width: 252px;
-  font-size: 13px;
+  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.3em 0 0.6em;
-}
-#disable-all-wrapper .main-controls {
-  padding-top: 0.1em;
 }
 #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;
+}

popup.html

@@ -14,8 +14,16 @@
                 <div class="actions">
                     <a href="#" class="enable" i18n-text="enableStyleLabel"></a>
                     <a href="#" class="disable" i18n-text="disableStyleLabel"></a>
-                    <a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>
+                    <a class="style-edit-link" href="edit.html?id=" i18n-tooltip="editStyleLabel">
-                    <a href="#" class="delete" i18n-text="deleteStyleLabel"></a>
+                        <svg class="svg-icon" viewBox="0 0 14 16">
+                            <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path>
+                        </svg>
+                    </a>
+                    <a href="#" class="delete" i18n-tooltip="deleteStyleLabel">
+                        <svg class="svg-icon" viewBox="0 0 14 16">
+                            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path>
+                        </svg>
+                    </a>
                 </div>
             </div>
         </div>
@@ -45,21 +53,21 @@
         </div>
         <div class="left-gutter"></div>
         <div class="main-controls">
-            <div id="manage-styles">
-                <button id="popup-manage-button" i18n-text="openManage"></button>
-            </div>
-            <div id="popup-options">
-                <button id="popup-options-button" i18n-text="openOptionsPopup">
-                    <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
-            </div>
             <div id="find-styles">
                 <a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
             </div>
-            <div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"><br></span>
+            <div id="write-style">
+                <span id="write-style-for" i18n-text="writeStyleFor"><br></span>
             </div>
         </div>
+    <!-- Actions -->
+    <div id="popup-options">
+        <button id="popup-manage-button" i18n-text="openManage"></button>
+        <button id="popup-options-button" i18n-text="openOptionsPopup">
+        <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
+    </div>
     </div>
     <script src="popup.js"></script>
 </body>
 
-</html>
+</html>

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';

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