manage: update state tooltips; add filter option

* update state is shown in tooltips that fade out in 10 sec except for .update-problem and .can-update
* when updates are found a filtering option is revealed; when it's checked only entries with updates are shown; when all updates are installed the option automatically hides

_locales/en/messages.json

@@ -282,6 +282,10 @@
     "message": "Only edited styles",
     "description": "Checkbox to show only locally edited styles"
   },
+  "manageOnlyUpdates": {
+    "message": "Only with updates",
+    "description": "Checkbox to show only styles that have updates after check-all-styles-for-updates was performed"
+  },
   "manageNewUI": {
     "message": "New manage UI layout",
     "description": "Label for the checkbox that toggles the new UI on manage page"

manage.css

@@ -215,7 +215,7 @@ summary {
   width: 60px;
   height: 20px;
   white-space: nowrap;
-  font-size: 0;
+  z-index: 999;
 }
 
 .newUI .actions > * {
@@ -244,10 +244,44 @@ summary {
   display: inline;
 }
 
+.newUI .can-update .update,
+.newUI .no-update.update-problem .check-update {
+  cursor: pointer;
+}
+
 .update-problem .check-update svg {
   fill: darkred;
 }
 
+.updater-icons > :not(.check-update):after {
+  content: attr(title);
+  position: absolute;
+  margin-top: 18px;
+  margin-left: -36px;
+  padding: 1ex 1.5ex;
+  border: 1px solid #ded597;
+  background-color: #fffbd6;
+  border-radius: 4px;
+  box-shadow: 2px 3px 10px rgba(0,0,0,.25);
+  font-size: 90%;
+  animation: fadeout 10s;
+  animation-fill-mode: both;
+  z-index: 999;
+}
+
+.update-problem .check-update:after {
+  background-color: red;
+  border: 1px solid #d40000;
+  color: white;
+  animation: none;
+}
+
+.can-update .update:after {
+  background-color: #c0fff0;
+  border: 1px solid #89cac9;
+  animation: none;
+}
+
 .newUI .applies-to {
   padding-top: .25rem;
   padding-bottom: .25rem;
@@ -400,8 +434,13 @@ fieldset {
   margin: 1em 0;
 }
 
+fieldset > * {
+  display: block;
+}
+
 .enabled-only > .disabled,
-.edited-only > .updatable {
+.edited-only > .updatable,
+.updates-only > .entry:not(.can-update) {
   display: none;
 }
 

manage.html

@@ -129,17 +129,10 @@
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
   <fieldset>
     <legend id="filters" i18n-text="manageFilters"></legend>
-    <div>
-      <input id="manage.onlyEnabled" type="checkbox">
-      <label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label>
-    </div>
-    <div>
-      <input id="manage.onlyEdited" type="checkbox">
-      <label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label>
-    </div>
-    <div>
-      <input id="search" type="search" i18n-placeholder="searchStyles">
-    </div>
+    <label><input id="manage.onlyEnabled" type="checkbox"><span i18n-text="manageOnlyEnabled"></span></label>
+    <label><input id="manage.onlyEdited" type="checkbox"><span i18n-text="manageOnlyEdited"></span></label>
+    <label id="onlyUpdates" class="hidden"><input type="checkbox"><span i18n-text="manageOnlyUpdates"></span></label>
+    <input id="search" type="search" i18n-placeholder="searchStyles">
   </fieldset>
   <p>
     <button id="check-all-updates" i18n-text="checkAllUpdates"></button>

manage.js

@@ -70,6 +70,7 @@ function initGlobalEvents() {
   for (const [className, checkbox] of [
     ['enabled-only', $('#manage.onlyEnabled')],
     ['edited-only', $('#manage.onlyEdited')],
+    ['updates-only', $('#onlyUpdates input')],
   ]) {
     // will be triggered by setupLivePrefs immediately
     checkbox.onchange = () => installed.classList.toggle(className, checkbox.checked);
@@ -269,8 +270,7 @@ Object.assign(handleEvent, {
   },
 
   toggle(event, entry) {
-    enableStyle(entry.styleId, this.matches('.enable') || this.checked)
-      .then(handleUpdate);
+    enableStyle(entry.styleId, this.matches('.enable') || this.checked);
   },
 
   check(event, entry) {
@@ -336,6 +336,7 @@ function handleUpdate(style, {reason, quiet} = {}) {
       element.classList.add('update-done');
       element.classList.remove('can-update', 'updatable');
       $('.update-note', element).innerHTML = t('updateCompleted');
+      renderUpdatesOnlyFilter();
     }
   }
   installed.insertBefore(element, findNextElement(style));
@@ -398,6 +399,8 @@ function applyUpdateAll() {
     button.scrollIntoView(false);
     button.click();
   });
+
+  renderUpdatesOnlyFilter({show: false});
 }
 
 
@@ -410,7 +413,7 @@ function checkUpdateAll() {
   btnApply.classList.add('hidden');
   noUpdates.classList.add('hidden');
 
-  Promise.all($$('.updatable').map(checkUpdate))
+  Promise.all($$('.updatable:not(.can-update)').map(checkUpdate))
     .then(updatables => {
       btnCheck.disabled = false;
       const numUpdatable = updatables.filter(u => u).length;
@@ -418,6 +421,7 @@ function checkUpdateAll() {
         btnApply.classList.remove('hidden');
         btnApply.originalLabel = btnApply.originalLabel || btnApply.textContent;
         btnApply.textContent = btnApply.originalLabel + ` (${numUpdatable})`;
+        renderUpdatesOnlyFilter({check: true});
       } else {
         noUpdates.classList.remove('hidden');
         setTimeout(() => {
@@ -436,7 +440,7 @@ function checkUpdateAll() {
 function checkUpdate(element) {
   $('.update-note', element).innerHTML = t('checkingForUpdate');
   $('.check-update', element).title = '';
-  element.classList.remove('checking-update', 'no-update', 'can-update', 'update-problem');
+  element.classList.remove('checking-update', 'no-update', 'update-problem');
   element.classList.add('checking-update');
   return new Updater(element).run(); // eslint-disable-line no-use-before-define
 }
@@ -506,6 +510,7 @@ class Updater {
       this.element.classList.add('can-update');
       this.element.updatedCode = json;
       $('.update-note', this.element).innerHTML = '';
+      $('#onlyUpdates').classList.remove('hidden');
     } else {
       this.element.classList.add('no-update');
       this.element.classList.toggle('update-problem', Boolean(message));
@@ -513,6 +518,10 @@ class Updater {
       if (newUI.enabled) {
         $('.check-update', this.element).title = message;
       }
+      // don't hide if check-all is running
+      if (!$('#check-all-updates').disabled) {
+        $('#onlyUpdates').classList.toggle('hidden', !$('.can-update'));
+      }
     }
   }
 
@@ -537,6 +546,28 @@ class Updater {
 }
 
 
+function renderUpdatesOnlyFilter({show, check} = {}) {
+  const numUpdatable = $$('.can-update').length;
+  const canUpdate = numUpdatable > 0;
+  const checkbox = $('#onlyUpdates input');
+  show = show !== undefined ? show : canUpdate;
+  check = check !== undefined ? show && check : checkbox.checked && canUpdate;
+
+  $('#onlyUpdates').classList.toggle('hidden', !show);
+  checkbox.checked = check;
+  checkbox.dispatchEvent(new Event('change'));
+
+  const btnApply = $('#apply-all-updates');
+  if (!btnApply.matches('.hidden')) {
+    if (canUpdate) {
+      btnApply.textContent = btnApply.originalLabel + ` (${numUpdatable})`;
+    } else {
+      btnApply.classList.add('hidden');
+    }
+  }
+}
+
+
 function searchStyles({immediately, container}) {
   const query = $('#search').value.toLocaleLowerCase();
   if (query == (searchStyles.lastQuery || '') && !immediately && !container) {