manage: show update history button

_locales/en/messages.json

@@ -80,6 +80,9 @@
     "message": "Check again, I didn't edit any styles!",
     "description": "Label for the button to apply all detected updates"
   },
+  "updateCheckHistory": {
+    "message": "History of update checks"
+  },
   "checkForUpdate": {
     "message": "Check for update",
     "description": "Label for the button to check a single style for an update"
@@ -128,6 +131,10 @@
     "message": "Disabled",
     "description": "Used in various lists/options to indicate that something is disabled"
   },
+  "genericHistoryLabel": {
+    "message": "History",
+    "description": "Used in various places to show a history log of something"
+  },
   "confirmNo": {
     "message": "No",
     "description": "'No' button in a confirm dialog"

manage.css

@@ -66,13 +66,11 @@ a:hover {
   height: 20px;
 }
 
-.svg-icon,
-.svg-icon.info:hover {
+.svg-icon:hover {
   fill: #000;
 }
 
-.svg-icon:hover,
-.svg-icon.info {
+.svg-icon {
   fill: #666;
 }
 
@@ -607,6 +605,13 @@ fieldset > * {
     margin-left: 1.5em;
 }
 
+.update-history-log {
+  font-size: 11px;
+  white-space: pre;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
 @keyframes fadein {
   from {
     opacity: 0;

manage.html

@@ -158,6 +158,11 @@
   </fieldset>
   <p>
     <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
+    <span id="update-history" i18n-title="genericHistoryLabel">
+      <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
+        <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
+      </svg>
+    </span>
   </p>
   <p>
     <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>

manage.js

@@ -53,6 +53,7 @@ function initGlobalEvents() {
   $('#check-all-updates').onclick = checkUpdateAll;
   $('#check-all-updates-force').onclick = checkUpdateAll;
   $('#apply-all-updates').onclick = applyUpdateAll;
+  $('#update-history').onclick = showUpdateHistory;
   $('#search').oninput = searchStyles;
   $('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
   $('#manage-shortcuts-button').onclick = () => openURL({url: URLS.configureCommands});
@@ -675,6 +676,21 @@ function renderUpdatesOnlyFilter({show, check} = {}) {
 }
 
 
+function showUpdateHistory() {
+  BG.chromeLocal.getValue('updateLog').then((lines = []) => {
+    messageBox({
+      title: t('updateCheckHistory'),
+      contents: $element({
+        className: 'update-history-log',
+        textContent: lines.join('\n'),
+      }),
+      buttons: [t('confirmOK')],
+      onshow: () => ($('#message-box-contents').scrollTop = 1e9),
+    });
+  });
+}
+
+
 function searchStyles({immediately, container}) {
   const searchElement = $('#search');
   const query = searchElement.value.toLocaleLowerCase();

update.js

@@ -1,4 +1,4 @@
-/* global getStyles, saveStyle, styleSectionsEqual */
+/* global getStyles, saveStyle, styleSectionsEqual, chromeLocal */
 /* global getStyleDigests, updateStyleDigest */
 'use strict';
 
@@ -25,11 +25,13 @@ var updater = {
     return getStyles({}).then(styles => {
       styles = styles.filter(style => style.updateUrl);
       observer(updater.COUNT, styles.length);
+      updater.log(`${save ? 'Scheduled' : 'Manual'} update check for ${styles.length} styles`);
       return Promise.all(
         styles.map(style =>
           updater.checkStyle({style, observer, save, ignoreDigest})));
     }).then(() => {
       observer(updater.DONE);
+      updater.log('');
     });
   },
 
@@ -53,8 +55,15 @@ var updater = {
       .then(fetchMd5IfNotEdited)
       .then(fetchCodeIfMd5Changed)
       .then(saveIfUpdated)
-      .then(saved => observer(updater.UPDATED, saved))
-      .catch(err => observer(updater.SKIPPED, style, err));
+      .then(saved => {
+        observer(updater.UPDATED, saved);
+        updater.log(updater.UPDATED + ` #${saved.id} ${saved.name}`);
+      })
+      .catch(err => {
+        observer(updater.SKIPPED, style, err);
+        err = err === 0 ? 'server unreachable' : err;
+        updater.log(updater.SKIPPED + ` (${err}) #${style.id} ${style.name}`);
+      });
 
     function fetchMd5IfNotEdited([originalDigest, current]) {
       hasDigest = Boolean(originalDigest);
@@ -118,6 +127,18 @@ var updater = {
     localStorage.lastUpdateTime = updater.lastUpdateTime = Date.now();
     updater.schedule();
   },
+
+  log(text) {
+    chromeLocal.getValue('updateLog').then((lines = []) => {
+      const time = text && performance.now() - (updater.log.lastWriteTime || 0) > 10e3
+        ? new Date().toLocaleString() + '\t'
+        : '';
+      lines.splice(0, lines.length - 1000);
+      lines.push(time + text);
+      chromeLocal.setValue('updateLog', lines);
+      updater.log.lastWriteTime = performance.now();
+    });
+  },
 };
 
 updater.schedule();