Assets management refactored (#2314)

* refactoring assets management code * finalizing refactoring of assets management * various code review of new assets management code * fix #2281 * fix #1961 * fix #1293 * fix #1275 * fix update scheduler timing logic * forward compatibility (to be removed once 1.11+ is widespread) * more codereview; give admins ability to specify own assets.json * "assetKey" is more accurate than "path" * fix group count update when building dom incrementally * reorganize content (order, added URLs, etc.) * ability to customize updater through advanced settings * better spinner icon
gorhill · Jan 18, 2017 · 3b9fd49 · 3b9fd49
1 parent 69fc593
commit 3b9fd49
Show file tree

Hide file tree

Showing 20 changed files with 2,082 additions and 2,436 deletions.
diff --git a/assets/assets.json b/assets/assets.json
diff --git a/src/3p-filters.html b/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>

diff --git a/src/_locales/en/messages.json b/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}}",

diff --git a/src/background.html b/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>

diff --git a/src/css/3p-filters.css b/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%;
-    }