Assets management refactored

src/3p-filters.html

@@ -40,27 +40,21 @@
     <button id="externalListsApply" class="custom important" disabled="true" data-i18n="3pExternalListsApply"></button></p>
 </div>
 
-<div id="busyOverlay">
-    <div></div>
-    <!-- progress bar widget -->
-    <div><div></div><div></div></div>
-</div>
-
 <div id="templates" style="display: none;">
     <ul>
         <li class="groupEntry"><span class="geName"></span> <span class="geCount dim"></span>
-            <ul></ul>
+            <ul class="listEntries"></ul>
             </li>
         <li class="listEntry">
             <input type="checkbox">
             <a type="text/plain" target="_blank" href=""></a>
             <a class="fa" style="display: none;" target="_blank">&#xf05a;</a>
             <a href="" style="display: none;" target="_blank"></a>: <!--
          --><span class="counts dim"></span><!--
-         --><span class="status unsecure" style="display: none;">http</span><!--
-         --><span class="status new" style="display: none;" data-i18n="3pExternalListNew"></span><!--
-         --><span class="status obsolete" style="display: none;" data-i18n="3pExternalListObsolete"></span><!--
-         --><span class="status purge" style="display: none;" data-i18n="3pExternalListPurge"></span>
+         --><span class="status unsecure">http</span><!--
+         --><span class="status obsolete" data-i18n="3pExternalListObsolete"></span><!--
+         --><span class="status purge" data-i18n="3pExternalListPurge"></span><!--
+         --><span class="fa status updating">&#xf110;</span>
             </li>
         </ul>
     </div>

src/_locales/en/messages.json

@@ -580,8 +580,8 @@
     "description": "Message asking user to confirm reset"
   },
   "errorCantConnectTo":{
-    "message":"Unable to connect to {{url}}",
-    "description":"English: Network error: unable to connect to {{url}}"
+    "message":"Network error: {{msg}}",
+    "description":"English: Network error: {{msg}}"
   },
   "subscriberConfirm":{
     "message":"uBlock₀: Add the following URL to your custom filter lists?\n\nTitle: \"{{title}}\"\nURL: {{url}}",

src/background.html

@@ -8,7 +8,6 @@
 <script src="js/polyfill.js"></script>
 <script src="lib/punycode.js"></script>
 <script src="lib/publicsuffixlist.js"></script>
-<script src="lib/yamd5.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-background.js"></script>
 <script src="js/background.js"></script>

src/css/3p-filters.css

@@ -1,3 +1,7 @@
+@keyframes spin {
+    100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); }
+    }
+
 ul {
     padding: 0;
     list-style-type: none;
@@ -88,7 +92,7 @@ body[dir=rtl] #buttonApply {
 span.status {
     border: 1px solid transparent;
     color: #444;
-    display: inline-block;
+    display: none;
     font-size: smaller;
     line-height: 1;
     margin: 0 0 0 0.5em;
@@ -99,6 +103,16 @@ span.unsecure {
     background-color: hsl(0, 100%, 88%);
     border-color: hsl(0, 100%, 83%);
     }
+li.listEntry.unsecure span.unsecure {
+    display: inline;
+    }
+span.obsolete {
+    background-color: hsl(36, 100%, 80%);
+    border-color: hsl(36, 100%, 75%);
+    }
+li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete {
+    display: inline;
+    }
 span.purge {
     border-color: #ddd;
     background-color: #eee;
@@ -107,10 +121,16 @@ span.purge {
 span.purge:hover {
     opacity: 1;
     }
-span.obsolete,
-span.new {
-    background-color: hsl(36, 100%, 80%);
-    border-color: hsl(36, 100%, 75%);
+li.listEntry.cached span.purge {
+    display: inline;
+    }
+span.updating {
+    border: none;
+    padding: 0;
+    }
+li.listEntry.updating span.updating {
+    animation: spin 2s linear infinite;
+    display: inline-block;
     }
 #externalListsDiv {
     margin: 2em auto 0 2em;
@@ -125,64 +145,3 @@ body[dir=rtl] #externalListsDiv {
     width: 100%;
     word-wrap: normal;
     }
-body #busyOverlay {
-    background-color: transparent;
-    bottom: 0;
-    cursor: wait;
-    display: none;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 1000;
-    }
-body.busy #busyOverlay {
-    display: block;
-    }
-#busyOverlay > div:nth-of-type(1) {
-    background-color: white;
-    bottom: 0;
-    left: 0;
-    opacity: 0.75;
-    position: absolute;
-    right: 0;
-    top: 0;
-    }
-#busyOverlay > div:nth-of-type(2) {
-    background-color: #eee;
-    border: 1px solid transparent;
-    border-color: #80b3ff #80b3ff hsl(216, 100%, 75%);
-    border-radius: 3px;
-    box-sizing: border-box;
-    height: 3em;
-    left: 10%;
-    position: absolute;
-    bottom: 75%;
-    width: 80%;
-    }
-#busyOverlay > div:nth-of-type(2) > div:nth-of-type(1) {
-    background-color: hsl(216, 100%, 75%);
-    background-image: linear-gradient(#a8cbff, #80b3ff);
-    background-repeat: repeat-x;
-    border: 0;
-    box-sizing: border-box;
-    color: #222;
-    height: 100%;
-    left: 0;
-    padding: 0;
-    position: absolute;
-    width: 25%;
-    }
-#busyOverlay > div:nth-of-type(2) > div:nth-of-type(2) {
-    background-color: transparent;
-    border: 0;
-    box-sizing: border-box;
-    height: 100%;
-    left: 0;
-    line-height: 3em;
-    overflow: hidden;
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-    }