Display "force-install" for locally edited styles on update

* Allow manually resetting locally edited style even if up-to-date
* "Check again, I didn't edit any styles!" button

_locales/en/messages.json

@@ -76,6 +76,10 @@
     "message": "Check all styles for updates",
     "description": "Label for the button to check all styles for updates"
   },
+  "checkAllUpdatesForce": {
+    "message": "Check again, I didn't edit any styles!",
+    "description": "Label for the button to apply all detected updates"
+  },
   "checkForUpdate": {
     "message": "Check for update",
     "description": "Label for the button to check a single style for an update"
@@ -323,7 +327,7 @@
     "description": "Checkbox to show only locally edited styles"
   },
   "manageOnlyUpdates": {
-    "message": "Only with updates or problems",
+    "message": "Only with updates or issues",
     "description": "Checkbox to show only styles that have updates after check-all-styles-for-updates was performed"
   },
   "manageNewUI": {
@@ -591,6 +595,10 @@
     "message": "This style might have been edited locally.",
     "description": "Text that displays when an update check skipped updating the style to avoid losing possible local modifications"
   },
+  "updateCheckManualUpdateForce": {
+    "message": "Force-install update (and lose your edits)",
+    "description": "Additional text displayed when an update check skipped updating the style to avoid losing local modifications"
+  },
   "updateCheckManualUpdateHint": {
     "message": "To force an update (and lose your edits) update each style individually.",
     "description": "Additional text displayed when an update check skipped updating the style to avoid losing local modifications"

manage.css

@@ -293,19 +293,22 @@ summary {
   cursor: pointer;
 }
 
+.newUI .can-update[data-details$="locally edited"] .update svg,
 .newUI .update-problem .check-update svg {
   fill: #ef6969;
 }
 
+.newUI .can-update[data-details$="locally edited"]:hover .update svg,
 .newUI .entry.update-problem:hover .check-update svg {
   fill: #fd4040;
 }
 
+.newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
 .newUI .entry.update-problem:hover .check-update svg:hover {
   fill: red;
 }
 
-.updater-icons > :not(.check-update):after {
+.newUI .updater-icons > :not(.check-update):after {
   content: attr(title);
   position: absolute;
   margin-top: 18px;
@@ -321,14 +324,14 @@ summary {
   z-index: 999;
 }
 
-.update-problem .check-update:after {
+.newUI .update-problem .check-update:after {
   background-color: red;
   border: 1px solid #d40000;
   color: white;
   animation: none;
 }
 
-.can-update .update:after {
+.newUI .can-update .update:after {
   background-color: #c0fff0;
   border: 1px solid #89cac9;
   animation: none;
@@ -467,12 +470,16 @@ input[id^="manage.newUI"] {
   display: inline;
 }
 
+.can-update[data-details$="locally edited"] button.update:after {
+  content: "*";
+}
+
 .can-update .check-update {
   display: none;
 }
 
 /* Updates not available */
-.no-update .check-update {
+.no-update:not(.update-problem) .check-update {
   display: none;
 }
 
@@ -503,6 +510,10 @@ input[id^="manage.newUI"] {
   content: " __MSG_updateAllCheckSucceededSomeEdited__ __MSG_updateCheckManualUpdateHint__";
 }
 
+#check-all-updates-force {
+  margin-top: 1ex;
+}
+
 /* highlight updated/added styles */
 .highlight {
   animation: highlight 10s cubic-bezier(0,.82,.47,.98);

manage.html

@@ -148,8 +148,8 @@
     </label>
     <label id="onlyUpdates" class="hidden">
       <input type="checkbox"
-             data-filter=".can-update, .update-problem"
-             data-filter-hide=":not(.updatable), .update-done, .no-update:not(.update-problem)">
+             data-filter=".can-update, .update-problem, .update-done"
+             data-filter-hide=":not(.updatable):not(.update-done), .no-update:not(.update-problem)">
       <span i18n-text="manageOnlyUpdates"></span>
     </label>
     <input id="search" type="search" i18n-placeholder="searchStyles"
@@ -162,6 +162,7 @@
   <p>
     <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
     <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
+    <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
   </p>
   <p>
     <a href="edit.html">

manage.js

@@ -51,6 +51,7 @@ function initGlobalEvents() {
   installed = $('#installed');
   installed.onclick = handleEvent.entryClicked;
   $('#check-all-updates').onclick = checkUpdateAll;
+  $('#check-all-updates-force').onclick = checkUpdateAll;
   $('#apply-all-updates').onclick = applyUpdateAll;
   $('#search').oninput = searchStyles;
   $('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
@@ -504,7 +505,9 @@ function applyUpdateAll() {
 
 
 function checkUpdateAll() {
+  const ignoreDigest = this && this.id == 'check-all-updates-force';
   $('#check-all-updates').disabled = true;
+  $('#check-all-updates-force').classList.add('hidden');
   $('#apply-all-updates').classList.add('hidden');
   $('#update-all-no-updates').classList.add('hidden');
 
@@ -513,8 +516,9 @@ function checkUpdateAll() {
   let skippedEdited = 0;
   let updated = 0;
 
-  $$('.updatable:not(.can-update):not(.update-problem)').map(el => checkUpdate(el, {single: false}));
-  BG.updater.checkAllStyles({observer, save: false});
+  $$('.updatable:not(.can-update)' + (ignoreDigest ? '' : ':not(.update-problem)'))
+    .map(el => checkUpdate(el, {single: false}));
+  BG.updater.checkAllStyles({observer, save: false, ignoreDigest});
 
   function observer(state, value, details) {
     switch (state) {
@@ -542,6 +546,7 @@ function checkUpdateAll() {
         if (!updated) {
           $('#update-all-no-updates').dataset.skippedEdited = skippedEdited > 0;
           $('#update-all-no-updates').classList.remove('hidden');
+          $('#check-all-updates-force').classList.toggle('hidden', skippedEdited == 0);
         }
         return;
     }
@@ -582,6 +587,9 @@ function reportUpdateState(state, style, details) {
       if (entry.classList.contains('can-update')) {
         break;
       }
+      const same = details == BG.updater.SAME_MD5 || details == BG.updater.SAME_CODE;
+      const edited = details == BG.updater.EDITED || details == BG.updater.MAYBE_EDITED;
+      entry.dataset.details = details;
       if (!details) {
         details = t('updateCheckFailServerUnreachable');
       } else if (typeof details == 'number') {
@@ -591,12 +599,12 @@ function reportUpdateState(state, style, details) {
       } else if (details == BG.updater.MAYBE_EDITED) {
         details = t('updateCheckSkippedMaybeLocallyEdited') + '\n' + t('updateCheckManualUpdateHint');
       }
-      const same = details == BG.updater.SAME_MD5 || details == BG.updater.SAME_CODE;
       const message = same ? t('updateCheckSucceededNoUpdate') : details;
       entry.classList.add('no-update');
       entry.classList.toggle('update-problem', !same);
       $('.update-note', entry).textContent = message;
       $('.check-update', entry).title = newUI.enabled ? message : '';
+      $('.update', entry).title = t(edited ? 'updateCheckManualUpdateForce' : 'installUpdate');
       if (!$('#check-all-updates').disabled) {
         // this is a single update job so we can decide whether to hide the filter
         renderUpdatesOnlyFilter({show: $('.can-update, .update-problem')});

update.js

@@ -71,7 +71,7 @@ var updater = {
       if (!md5 || md5.length != 32) {
         return Promise.reject(updater.ERROR_MD5);
       }
-      if (md5 == style.originalMd5 && hasDigest) {
+      if (md5 == style.originalMd5 && hasDigest && !ignoreDigest) {
         return Promise.reject(updater.SAME_MD5);
       }
       return download(style.updateUrl);