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

1 files changed, 25 insertions, 66 deletions

diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 99f87cfd..8aa6760f 100644
--- 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%;
-    }