further fine tune "Filter lists" pane (b60c06f3)

src/css/3p-filters.css

@@ -36,81 +36,79 @@ body.hideUnused #listsOfBlockedHostsPrompt:before {
     padding: 0;
     list-style-type: none;
     }
-#lists > .groupEntry .geDetails {
+.groupEntry .geDetails {
     cursor: pointer;
     }
-#lists > .groupEntry .geDetails:before {
+.groupEntry:not([data-groupkey="user"]) .geDetails:before {
     color: #888;
     content: '\2212  ';
     }
-#lists > .groupEntry.hideUnused .geDetails:before {
+.groupEntry.hideUnused:not([data-groupkey="user"]) .geDetails:before {
     content: '+  ';
     }
-#lists > .groupEntry .geName {
+.groupEntry .geName {
     pointer-events: none;
     }
-#lists > .groupEntry .geCount {
+.groupEntry .geCount {
     font-size: 90%;
     pointer-events: none;
     }
-#lists > .groupEntry > ul {
+.groupEntry > ul {
     margin: 0.25em 0 0 0;
     padding-left: 1em;
     }
-li.listEntry {
+.listEntry {
     margin: 0 auto 0 auto;
     padding: 0.2em 0;
     white-space: nowrap;
     }
-body[dir="rtl"] li.listEntry {
-    }
-li.listEntry.unused {
+.groupEntry:not([data-groupkey="user"]) .listEntry.unused {
     display: none;
     }
-li.listEntry > * {
+.listEntry > * {
     margin-right: 0.5em;
     unicode-bidi: embed;
     }
-li.listEntry.toRemove > input[type="checkbox"] {
+.listEntry.toRemove > input[type="checkbox"] {
     visibility: hidden;
     }
-li.listEntry.toRemove > a.content {
+.listEntry.toRemove > a.content {
     text-decoration: line-through;
     }
-li.listEntry > .fa {
+.listEntry > .fa {
     color: inherit;
     display: none;
     font-size: 110%;
     opacity: 0.5;
     vertical-align: baseline;
     }
-li.listEntry > a.towiki {
+.listEntry > a.towiki {
     display: inline-block;
     }
-li.listEntry > a.fa:hover {
+.listEntry > a.fa:hover {
     opacity: 1;
     }
-li.listEntry.support > a.support {
+.listEntry.support > a.support {
     display: inline-block;
     }
-li.listEntry > a.remove,
-li.listEntry > a.remove:visited {
+.listEntry > a.remove,
+.listEntry > a.remove:visited {
     color: darkred;
     }
-li.listEntry.external > a.remove {
+.listEntry.external > a.remove {
     display: inline-block;
     }
-li.listEntry.mustread > a.mustread {
+.listEntry.mustread > a.mustread {
     display: inline-block;
     }
-li.listEntry.mustread > a.mustread:hover {
+.listEntry.mustread > a.mustread:hover {
     color: mediumblue;
     }
-li.listEntry > .counts {
+.listEntry > .counts {
     display: none;
     font-size: smaller;
 }
-li.listEntry > input[type="checkbox"]:checked ~ .counts {
+.listEntry > input[type="checkbox"]:checked ~ .counts {
     display: inline;
 }
 .dim {
@@ -129,46 +127,46 @@ body[dir=rtl] #buttonApply {
 #buttonApply.disabled {
     display: none;
     }
-li.listEntry span.status {
+.listEntry span.status {
     color: #444;
     cursor: default;
     display: none;
 }
-li.listEntry span.status:hover {
+.listEntry span.status:hover {
     opacity: 1;
     }
-li.listEntry span.unsecure {
+.listEntry span.unsecure {
     color: darkred;
     }
-li.listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure {
+.listEntry.unsecure > input[type="checkbox"]:checked ~ span.unsecure {
     display: inline-block;
     }
-li.listEntry span.failed {
+.listEntry span.failed {
     color: darkred;
     }
-li.listEntry.failed span.failed {
+.listEntry.failed span.failed {
     display: inline-block;
     }
-li.listEntry span.cache {
+.listEntry span.cache {
     cursor: pointer;
     }
-li.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache {
+.listEntry.cached:not(.obsolete) > input[type="checkbox"]:checked ~ span.cache {
     display: inline-block;
     }
-li.listEntry span.obsolete {
+.listEntry span.obsolete {
     color: hsl(36, 100%, 40%);
     }
-body:not(.updating) li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete {
+body:not(.updating) .listEntry.obsolete > input[type="checkbox"]:checked ~ span.obsolete {
     display: inline-block;
     }
-li.listEntry span.updating {
+.listEntry span.updating {
     transform-origin: 50% 46%;
     }
-body.updating li.listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating {
+body.updating .listEntry.obsolete > input[type="checkbox"]:checked ~ span.updating {
     animation: spin 2s linear infinite;
     display: inline-block;
     }
-li.listEntry.toImport > input[type="checkbox"] ~ textarea {
+.listEntry.toImport > input[type="checkbox"] ~ textarea {
     border: 1px solid #ccc;
     box-sizing: border-box;
     display: block;
@@ -180,6 +178,6 @@ li.listEntry.toImport > input[type="checkbox"] ~ textarea {
     white-space: pre;
     width: calc(100% - 4em);
     }
-li.listEntry.toImport > input[type="checkbox"]:checked ~ textarea {
+.listEntry.toImport > input[type="checkbox"]:checked ~ textarea {
     visibility: visible;
     }

src/js/3p-filters.js

@@ -234,6 +234,10 @@ var renderFilterLists = function(soft) {
         // Before all, set context vars
         listDetails = details;
 
+        // "My filters" will now sit in its own group. The following code
+        // ensures smooth transition.
+        listDetails.available['user-filters'].group = 'user';
+
         // Incremental rendering: this will allow us to easily discard unused
         // DOM list entries.
         uDom('#lists .listEntries .listEntry[data-listkey]').addClass('discard');
@@ -246,6 +250,7 @@ var renderFilterLists = function(soft) {
             groups = groupsFromLists(details.available),
             liGroup, i, groupKey,
             groupKeys = [
+                'user',
                 'default',
                 'ads',
                 'privacy',

src/js/storage.js

@@ -450,7 +450,7 @@
 
     // User filter list.
     newAvailableLists[this.userFiltersPath] = {
-        group: 'default',
+        group: 'user',
         title: vAPI.i18n('1pPageName')
     };