OptionsUI: add 2 global options + simplify

* [x] show badge with active styles count
* [x] styles on top in the popup
* Simplify since we use a persistent background page so it's always there for us

_locales/en/messages.json

@@ -488,7 +488,7 @@
     "message": "Automatically check for and install all available userstyle updates (in hrs)"
   },
   "optionsUpdateIntervalNote": {
-    "message": "To disable the automatic userstyle update checks, set interval to zero"
+    "message": "To disable the automatic userstyle update checks, set interval to 0"
   },
   "optionsCustomize": {
     "message": "UI Customizations"

options/index.css

@@ -7,7 +7,11 @@ body {
 }
 
 body > * {
-  padding: 1em 1rem 1em 44px;
+  padding: .5rem 1.5rem 1em 48px;
+}
+
+body > *:first-child {
+  padding-top: .75rem;
 }
 
 table {
@@ -23,21 +27,24 @@ td:last-child {
   text-align: right;
 }
 
+button,
+td:last-child,
+input[type=number],
+input[type="color"],
+.onoffswitch,
+#update-counter {
+  width: 80px;
+}
+
 a {
   text-decoration-skip: ink;
 }
 
 button {
   text-align: center;
-  width: 80px;
-}
-
-h1:not(:first-child) {
-  margin-top: 0;
 }
 
 input[type=number] {
-  width: 80px;
   text-align: right;
   padding-right: 1em;
 }
@@ -66,7 +73,7 @@ input[type=number] {
 
 #notes {
   background-color: #f4f4f4;
-  margin-top: .5em;
+  margin-top: .75rem;
   font-size: 90%;
   color: #999;
 }
@@ -81,7 +88,6 @@ input[type=number] {
 }
 
 input[type="color"] {
-  width: 80px;
   box-sizing: border-box;
   height: 2em;
 }
@@ -94,9 +100,73 @@ input[type="color"] {
   color: black;
 }
 
+#update-counter {
+  margin-top: .5ex;
+  position: absolute;
+  text-align: center;
+}
+
 @keyframes fadeinout {
   0%   { opacity: 0 }
   10%  { opacity: 1 }
   25%  { opacity: 1 }
   100% { opacity: 0 }
 }
+
+/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
+
+.onoffswitch {
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.onoffswitch-checkbox {
+  display: none;
+}
+
+.onoffswitch-label {
+  display: block;
+  overflow: hidden;
+  cursor: pointer;
+  height: 12px;
+  padding: 0;
+  line-height: 12px;
+  border: 0 solid #E3E3E3;
+  border-radius: 12px;
+  background-color: #E0E0E0;
+  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
+}
+
+.onoffswitch-label:before {
+  content: "";
+  display: block;
+  width: 18px;
+  margin: -3px;
+  background: #efefef;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 56px;
+  border-radius: 18px;
+  box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label {
+  background-color: #CAEBE3;
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
+  border-color: #CAEBE3;
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+  margin-left: 0;
+}
+
+.onoffswitch-checkbox:checked + .onoffswitch-label:before {
+  right: 0;
+  background-color: #04BA9F;
+  box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
+}

options/index.html

@@ -5,6 +5,7 @@
   <link rel="stylesheet" href="index.css">
   <script src="/localization.js"></script>
   <script src="/apply.js"></script>
+  <script src="/storage.js"></script>
   <script src="/messaging.js"></script>
   <script src="/dom.js"></script>
 </head>
@@ -13,6 +14,24 @@
   <div id="ui">
     <h1 i18n-text="optionsCustomize"></h1>
     <table>
+      <tr>
+        <td i18n-text="prefShowBadge"></td>
+        <td>
+          <div class="onoffswitch">
+            <input type="checkbox" class="onoffswitch-checkbox" id="show-badge">
+            <label class="onoffswitch-label" for="show-badge"></label>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td i18n-text="popupStylesFirst"></td>
+        <td>
+          <div class="onoffswitch">
+            <input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst">
+            <label class="onoffswitch-label" for="popup.stylesFirst"></label>
+          </div>
+        </td>
+      </tr>
       <tr>
         <td i18n-text="optionsBadgeNormal"></td>
         <td><input type="color" id="badgeNormal"></td>
@@ -46,8 +65,8 @@
       <tr>
         <td i18n-text="optionsCheckUpdate"></td>
         <td>
-          <span id="update-counter"></span>
           <button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
+          <div id="update-counter"></div>
         </td>
       </tr>
     </table>

options/index.js

@@ -1,28 +1,30 @@
+/* global update */
 'use strict';
 
 
 function restore() {
-  chrome.runtime.getBackgroundPage(bg => {
+  setupLivePrefs([
-    $('#badgeDisabled').value = bg.prefs.get('badgeDisabled');
+    'show-badge',
-    $('#badgeNormal').value = bg.prefs.get('badgeNormal');
+    'popup.stylesFirst'
+  ]);
+  //$('#show-badge').value = bg.prefs.get('show-badge');
+  $('#badgeDisabled').value = prefs.get('badgeDisabled');
+  $('#badgeNormal').value = prefs.get('badgeNormal');
   $('#popupWidth').value = localStorage.getItem('popupWidth') || '246';
-    $('#updateInterval').value = bg.prefs.get('updateInterval');
+  $('#updateInterval').value = prefs.get('updateInterval');
   enforceValueRange('popupWidth');
-  });
 }
 
 
 function save() {
-  chrome.runtime.getBackgroundPage(bg => {
+  prefs.set('badgeDisabled', $('#badgeDisabled').value);
-    bg.prefs.set('badgeDisabled', $('#badgeDisabled').value);
+  prefs.set('badgeNormal', $('#badgeNormal').value);
-    bg.prefs.set('badgeNormal', $('#badgeNormal').value);
   localStorage.setItem('popupWidth', enforceValueRange('popupWidth'));
-    bg.prefs.set(
+  prefs.set(
     'updateInterval',
     Math.max(0, Number($('#updateInterval').value))
   );
   animateElement($('#save-status'), {className: 'fadeinout'});
-  });
 }
 
 
@@ -40,7 +42,7 @@ function enforceValueRange(id) {
 }
 
 
-onDOMready().then(restore);
+restore();
 $('#save').onclick = save;
 
 // overwrite the default URL if browser is Opera
@@ -52,8 +54,8 @@ document.onclick = e => {
   let total = 0;
   let updated = 0;
 
-  function update() {
+  function showProgress() {
-    $('#update-counter').textContent = `${updated}/${total}`;
+    $('#update-counter').textContent = `${updated} / ${total}`;
   }
 
   function done(target) {
@@ -64,8 +66,7 @@ document.onclick = e => {
   }
 
   function check() {
-    chrome.runtime.getBackgroundPage(bg => {
+    chrome.extension.getBackgroundPage().update.perform((cmd, value) => {
-      bg.update.perform((cmd, value) => {
       switch (cmd) {
         case 'count':
           total = value;
@@ -81,8 +82,7 @@ document.onclick = e => {
           }
           break;
       }
-        update();
+      showProgress();
-      });
     });
     // notify the automatic updater to reset the next automatic update accordingly
     chrome.runtime.sendMessage({