generic code review related to the new 3rd-party filter pane

src/3p-filters.html

@@ -49,10 +49,10 @@
          --><a class="fa mustread" href="" target="_blank">&#xf05a;</a><!--
          --><span class="fa status unsecure" title="http">&#xf13e;</span><!--
          --><span class="counts dim"></span><!--
-         --><span class="fa status failed">&#xf06a;</span><!--
          --><span class="fa status obsolete" title="3pExternalListObsolete">&#xf071;</span><!--
          --><span class="fa status cache">&#xf017;</span><!--
-         --><span class="fa status updating">&#xf110;</span>
+         --><span class="fa status updating">&#xf110;</span><!--
+         --><span class="fa status failed">&#xf06a;</span>
             </li>
         </ul>
     </div>

src/css/3p-filters.css

@@ -133,9 +133,6 @@ li.listEntry span.status {
 li.listEntry span.status:hover {
     opacity: 1;
     }
-li.listEntry span.status.fa {
-    /* font-size: 110%; */
-    }
 li.listEntry span.unsecure {
     color: darkred;
     }
@@ -151,20 +148,19 @@ li.listEntry.failed span.failed {
 li.listEntry span.cache {
     cursor: pointer;
     }
-li.listEntry.cached:not(.updating):not(.obsolete) > input[type="checkbox"]:checked ~ span.cache {
+li.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache {
     display: inline-block;
     }
 li.listEntry span.obsolete {
     color: hsl(36, 100%, 40%);
     }
-li.listEntry.obsolete:not(.updating) > input[type="checkbox"]:checked ~ span.obsolete {
+body:not(.updating) li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete {
     display: inline-block;
     }
 li.listEntry span.updating {
-    border: none;
-    padding: 0;
+    transform-origin: 50% 46%;
     }
-li.listEntry.updating span.updating {
+body.updating li.listEntry.obsolete span.updating {
     animation: spin 2s linear infinite;
     display: inline-block;
     }

src/js/3p-filters.js

@@ -40,6 +40,9 @@ var onMessage = function(msg) {
     case 'assetUpdated':
         updateAssetStatus(msg);
         break;
+    case 'assetsUpdated':
+        document.body.classList.remove('updating');
+        break;
     case 'staticFilteringDataChanged':
         renderFilterLists();
         break;
@@ -139,7 +142,6 @@ var renderFilterLists = function(soft) {
                 lastUpdateTemplateString.replace('{{ago}}', renderElapsedTimeToString(asset.writeTime))
             );
         }
-        li.classList.remove('updating');
         li.classList.remove('discard');
         return li;
     };
@@ -264,12 +266,10 @@ var renderFilterLists = function(soft) {
 
 /******************************************************************************/
 
-// This is to give a visual hint that the selection of blacklists has changed.
-
 var renderWidgets = function() {
     uDom('#buttonApply').toggleClass('disabled', filteringSettingsHash === hashFromCurrentFromSettings());
     uDom('#buttonPurgeAll').toggleClass('disabled', document.querySelector('#lists .listEntry.cached') === null);
-    uDom('#buttonUpdate').toggleClass('disabled', document.querySelector('#lists .listEntry.obsolete:not(.updating) > input[type="checkbox"]:checked') === null);
+    uDom('#buttonUpdate').toggleClass('disabled', document.querySelector('body:not(.updating) #lists .listEntry.obsolete > input[type="checkbox"]:checked') === null);
 };
 
 /******************************************************************************/
@@ -280,7 +280,6 @@ var updateAssetStatus = function(details) {
     li.classList.toggle('failed', !!details.failed);
     li.classList.toggle('obsolete', !details.cached);
     li.classList.toggle('cached', !!details.cached);
-    li.classList.remove('updating');
     if ( details.cached ) {
         li.querySelector('.status.cache').setAttribute(
             'title',
@@ -429,9 +428,7 @@ var buttonApplyHandler = function() {
 
 var buttonUpdateHandler = function() {
     var onSelectionDone = function() {
-        uDom('#lists .listEntry.obsolete > input[type="checkbox"]:checked')
-            .ancestors('.listEntry[data-listkey]')
-            .addClass('updating');
+        document.body.classList.add('updating');
         messaging.send('dashboard', { what: 'forceUpdateAssets' });
         renderWidgets();
     };

src/js/assets.js

@@ -598,17 +598,25 @@ var assetCacheRemove = function(pattern, callback) {
     getAssetCacheRegistry(onReady);
 };
 
-var assetCacheMarkAsDirty = function(pattern, callback) {
+var assetCacheMarkAsDirty = function(pattern, exclude, callback) {
     var onReady = function() {
         var cacheDict = assetCacheRegistry,
             cacheEntry,
             mustSave = false;
         for ( var assetKey in cacheDict ) {
-            if ( pattern instanceof RegExp && !pattern.test(assetKey) ) {
-                continue;
+            if ( pattern instanceof RegExp ) {
+                if ( pattern.test(assetKey) === false ) { continue; }
+            } else if ( typeof pattern === 'string' ) {
+                if ( assetKey !== pattern ) { continue; }
+            } else if ( Array.isArray(pattern) ) {
+                if ( pattern.indexOf(assetKey) === -1 ) { continue; }
             }
-            if ( typeof pattern === 'string' && assetKey !== pattern ) {
-                continue;
+            if ( exclude instanceof RegExp ) {
+                if ( exclude.test(assetKey) ) { continue; }
+            } else if ( typeof exclude === 'string' ) {
+                if ( assetKey === exclude ) { continue; }
+            } else if ( Array.isArray(exclude) ) {
+                if ( exclude.indexOf(assetKey) !== -1 ) { continue; }
             }
             cacheEntry = cacheDict[assetKey];
             if ( !cacheEntry.writeTime ) { continue; }
@@ -623,7 +631,10 @@ var assetCacheMarkAsDirty = function(pattern, callback) {
             callback();
         }
     };
-
+    if ( typeof exclude === 'function' ) {
+        callback = exclude;
+        exclude = undefined;
+    }
     getAssetCacheRegistry(onReady);
 };
 
@@ -887,9 +898,7 @@ api.metadata = function(callback) {
 
 /******************************************************************************/
 
-api.purge = function(pattern, callback) {
-    assetCacheMarkAsDirty(pattern, callback);
-};
+api.purge = assetCacheMarkAsDirty;
 
 api.remove = function(pattern, callback) {
     assetCacheRemove(pattern, callback);

src/js/messaging.js

@@ -979,8 +979,7 @@ var onMessage = function(request, sender, callback) {
         if ( request.hard ) {
             µb.assets.remove(/./);
         } else {
-            µb.assets.remove(/compiled\//);
-            µb.assets.purge(/./);
+            µb.assets.purge(/./, 'public_suffix_list.dat');
         }
         break;
 

src/js/storage.js

@@ -1131,6 +1131,10 @@
         } else {
             this.scheduleAssetUpdater(0);
         }
+        vAPI.messaging.broadcast({
+            what: 'assetsUpdated',
+            assetKeys: details.assetKeys
+        });
         return;
     }