optionsUI: show progress bar and # of installed updates

_locales/en/messages.json

@@ -591,6 +591,10 @@
     "message": "Update completed.",
     "description": "Text that displays when an update completed"
   },
+  "updatesCurrentlyInstalled": {
+    "message": "Updates installed:",
+    "description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
+  },
   "writeStyleFor": {
     "message": "Write style for: ",
     "description": "Label for toolbar pop-up that precedes the links to write a new style"

options/index.css

@@ -45,6 +45,7 @@ h1 {
   font-size: 120%;
   font-weight: bold;
   padding-right: 8px;
+  word-wrap: break-word;
 }
 
 label {
@@ -97,6 +98,43 @@ input[type=number]:invalid {
   color: darkred;
 }
 
+[data-cmd="check-updates"] button {
+  position: relative;
+}
+
+.update-in-progress [data-cmd="check-updates"] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+.update-in-progress #update-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: currentColor;
+  content: "";
+  opacity: .35;
+}
+
+#updates-installed {
+  position: absolute;
+  font-size: 85%;
+  right: 16px;
+  margin-top: 1px;
+}
+
+#updates-installed:after {
+  content: attr(data-value);
+  margin-left: .5ex;
+  font-weight: bold;
+}
+
+#updates-installed:not([data-value]),
+#updates-installed[data-value=""] {
+  display: none;
+}
+
 #notes {
   background-color: #f4f4f4;
   padding: 1.5ex 16px 1ex calc(16px + 2ex);

options/index.html

@@ -66,12 +66,13 @@
         </label>
         <label>
           <span i18n-text="optionsOpenManager"><sup class="chromium-only">2</sup></span>
-          <button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button>
+          <button data-cmd="open-manage" i18n-text="optionsOpen"></button>
         </label>
-        <label>
+        <label data-cmd="check-updates">
           <span i18n-text="optionsCheckUpdate"></span>
-          <button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
+          <button i18n-text="optionsCheck"><span id="update-progress"></span></button>
         </label>
+        <div id="updates-installed" i18n-text="updatesCurrentlyInstalled"></div>
       </div>
     </div>
   </div>

options/index.js

@@ -15,23 +15,27 @@ $('[data-cmd="open-keyboard"]').href = URLS.configureCommands;
 
 // actions
 document.onclick = e => {
-  const cmd = e.target.dataset.cmd;
-  let total = 0;
-  let updated = 0;
+  const target = e.target.closest('[data-cmd]');
+  if (!target) {
+    return;
+  }
+  // prevent double-triggering in case a sub-element was clicked
+  e.stopPropagation();
 
   function check() {
-    const originalLabel = e.target.textContent;
-    e.target.disabled = true;
-    e.target.parentElement.setAttribute('disabled', '');
+    let total = 0;
+    let checked = 0;
+    let updated = 0;
+    $('#update-progress').style.width = 0;
+    $('#updates-installed').dataset.value = '';
+    document.body.classList.add('update-in-progress');
+    const maxWidth = $('#update-progress').parentElement.clientWidth;
     function showProgress() {
-      e.target.textContent = `${updated} / ${total}`;
+      $('#update-progress').style.width = Math.round(checked / total * maxWidth) + 'px';
+      $('#updates-installed').dataset.value = updated || '';
     }
     function done() {
-      setTimeout(() => {
-        e.target.disabled = false;
-        e.target.textContent = originalLabel;
-        e.target.parentElement.removeAttribute('disabled');
-      }, 750);
+      document.body.classList.remove('update-in-progress');
     }
     BG.update.perform((cmd, value) => {
       switch (cmd) {
@@ -42,9 +46,11 @@ document.onclick = e => {
           }
           break;
         case 'single-updated':
-        case 'single-skipped':
           updated++;
-          if (total && updated === total) {
+          // fallthrough
+        case 'single-skipped':
+          checked++;
+          if (total && checked === total) {
             done();
           }
           break;
@@ -57,7 +63,7 @@ document.onclick = e => {
     });
   }
 
-  switch (cmd) {
+  switch (target.dataset.cmd) {
     case 'open-manage':
       openURL({url: '/manage.html'});
       break;