Cleanup UI

manage.html

@@ -225,10 +225,50 @@
   </span>
 </h1>
 
-<div id="manage-bulk-actions" class="hidden">
+<div id="tools-wrapper" class="hidden">
 
   <div class="manage-row">
-    <span id="filters">
+
+    <span id="bulk-actions">
+      <label class="checkmate toggle-all" tabindex="0">
+        <input id="toggle-all-filters" type="checkbox">
+        <svg class="svg-icon checkbox" viewBox="0 0 14 14">
+          <path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0 0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
+          <path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
+          <path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
+        </svg>
+      </label>
+      <span id="bulk-filter-count"></span>
+      <span i18n-text="bulkActions"></span>
+      <span class="select-resizer bulk-actions-select">
+        <select id="bulk-actions" i18n-title="manageOnlyLocalTooltip">
+          <option i18n-text="bulkActionsSelect" value=""></option>
+          <option i18n-text="enableStyleLabel" value="enable"></option>
+          <option i18n-text="disableStyleLabel" value="disable"></option>
+          <option i18n-text="exportLabel" value="export"></option>
+          <option i18n-text="checkForUpdate" value="update"></option>
+          <option i18n-text="genericResetLabel" value="reset"></option>
+          <option i18n-text="deleteStyleLabel" value="delete"></option>
+        </select>
+        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+      </span>
+      <button id="bulk-actions-apply"i18n-text="bulkActionsApply"></button>
+      <svg class="svg-icon busy hidden" viewBox="0 0 24 24">
+        <path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6 7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1 18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46 1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87 3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
+        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="1s" repeatCount="indefinite"/>
+      </svg>
+    </span>
+
+    <span id="search-wrapper">
+      <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
+        data-filter=":not(.not-matching)"
+        data-filter-hide=".not-matching">
+      <a href="#" id="search-help" tabindex="0">
+        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+      </a>
+    </span>
+
+    <span id="filters-wrapper">
       <strong i18n-text="manageFilters"></strong>
       <span class="filter-selection">
         <label class="checkmate" tabindex="0">
@@ -287,6 +327,7 @@
         </span>
       </span>
 
+      <span class="filter-selection">
         <label id="only-updates" class="hidden checkmate" tabindex="0">
           <input type="checkbox"
             data-filter=".can-update, .update-problem, .update-done"
@@ -301,41 +342,10 @@
         </label>
       </span>
 
-    <span id="search-wrapper">
-      <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
-        data-filter=":not(.not-matching)"
-        data-filter-hide=".not-matching">
-      <a href="#" id="search-help" tabindex="0">
-        <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
-      </a>
     </span>
+
   </div>
 
-  <div class="manage-row">
-    <label class="checkmate toggle-all" tabindex="0">
-      <input id="toggle-all-filters" type="checkbox">
-      <svg class="svg-icon checkbox" viewBox="0 0 14 14">
-        <path class="circle" d="M7 1.2a5.8 5.8 0 1 0 0 11.6A5.8 5.8 0 0 0 7 1.2zm0 10.5a4.7 4.7 0 0 1 0-9.4 4.7 4.7 0 0 1 0 9.4z"/>
-        <path class="checkmark" d="M9.6 4.5L5.8 8.3 4.3 6.8l-.8.8L5.8 10l4.7-4.7-.9-.8z"/>
-        <path class="indeterminate" d="M3.5 6.3h7v1.4h-7z"/>
-      </svg>
-    </label>
-    <span id="bulk-filter-count"></span>
-    <span i18n-text="bulkActions"></span>
-    <span class="select-resizer bulk-actions-select">
-      <select id="bulk-actions" i18n-title="manageOnlyLocalTooltip">
-        <option i18n-text="bulkActionsSelect" value=""></option>
-        <option i18n-text="enableStyleLabel" value="enable"></option>
-        <option i18n-text="disableStyleLabel" value="disable"></option>
-        <option i18n-text="exportLabel" value="export"></option>
-        <option i18n-text="checkForUpdate" value="update"></option>
-        <option i18n-text="genericResetLabel" value="reset"></option>
-        <option i18n-text="deleteStyleLabel" value="delete"></option>
-      </select>
-      <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-    </span>
-    <button id="bulk-actions-apply"i18n-text="bulkActionsApply"></button>
-  </div>
 
   <div style="display: none">
     <!-- placeholders -->

manage/filters.js

@@ -111,7 +111,7 @@ function init() {
     if (!filtersSelector.hide) {
       return;
     }
-    for (const el of $$('#manage-bulk-actions [data-filter]')) {
+    for (const el of $$('#tools-wrapper [data-filter]')) {
       let value;
       if (el.type === 'checkbox' && el.checked) {
         value = el.checked = false;
@@ -142,7 +142,7 @@ function filterOnChange({target: el, forceRefilter}) {
     }
     el.lastValue = value;
   }
-  const enabledFilters = $$('#manage-bulk-actions [data-filter]').filter(el => getValue(el));
+  const enabledFilters = $$('#tools-wrapper [data-filter]').filter(el => getValue(el));
   const buildFilter = hide =>
     (hide ? '' : '.entry.hidden') +
     [...enabledFilters.map(el =>

manage/incremental-search.js

@@ -83,7 +83,7 @@ onDOMready().then(() => {
     // focus search field on "/" key
     if (key === '/' || !key && k === 191 && !event.shiftKey) {
       event.preventDefault();
-      $('#manage-bulk-actions').classList.remove('hidden');
+      $('#tools-wrapper').classList.remove('hidden');
       $('#search').focus();
       return;
     }

manage/manage-actions.js

@@ -79,7 +79,7 @@ function initGlobalEvents() {
         el.removeAttribute('open');
       });
       // Close bulk actions
-      $('#manage-bulk-actions').classList.add('hidden');
+      $('#tools-wrapper').classList.add('hidden');
     } else if (event.which === 32 && event.target.classList.contains('checkmate')) {
       // pressing space toggles the containing checkbox
       $('input[type="checkbox"]', event.target).click();
@@ -191,7 +191,7 @@ Object.assign(handleEvent, {
   },
 
   toggleBulkActions() {
-    $('#manage-bulk-actions').classList.toggle('hidden');
+    $('#tools-wrapper').classList.toggle('hidden');
   },
 
   check(event, entry) {
@@ -426,7 +426,7 @@ function updateBulkFilters({target}) {
   if (!installed.dataset.total) return;
   // ignore filter checkboxes
   if (target.type === 'checkbox' && !target.dataset.filter) {
-    $('#manage-bulk-actions').classList.remove('hidden');
+    $('#tools-wrapper').classList.remove('hidden');
     const bulk = $('#toggle-all-filters');
     const state = target.checked;
     const visibleEntries = $$('.entry-filter-toggle')

manage/manage.css

@@ -2,7 +2,7 @@
   --icon-size: 20px;
   --narrow-column: 60px;
   --header-height: 40px;
-  --bulk-action-height: 60px;
+  --toolbar-height: 35px;
   --entry-header-height: 25px;
   --onoffswitch-width: 60px;
 }
@@ -251,15 +251,16 @@ body.dragging .entry:not(.dragging) .entry-name:before {
   margin-left: 2px;
   border-radius: 4px;
   font-size: .8em;
+  text-transform: lowercase;
 }
 
-.entry-label.usercss {
+.entry-label[data-label="usercss"] {
   background-color: hsla(180, 100%, 20%, 1);
   color: white;
   text-transform: lowercase;
 }
 
-.entry-label.disabled {
+.entry-label[data-label="disabled"] {
   background: rgba(128, 128, 128, .2);
   color: #222;
 }
@@ -509,25 +510,25 @@ details.applies-to-extra[open] {
 }
 
 /* bulk actions */
-#manage-bulk-actions {
+#tools-wrapper {
   background: #ddd;
   width: 100vw;
   position: fixed;
   top: var(--header-height);
   left: 0;
-  height: var(--bulk-action-height);
+  height: var(--toolbar-height);
   padding: 4px 16px;
   z-index: 100;
 }
 
-#manage-bulk-actions:not(.hidden) + #installed {
+#tools-wrapper:not(.hidden) + #installed {
-  margin-top: calc(var(--header-height) + var(--bulk-action-height) + var(--entry-header-height));
+  margin-top: calc(var(--header-height) + var(--toolbar-height) + var(--entry-header-height));
 }
-#manage-bulk-actions:not(.hidden) + #installed .entry-header {
+#tools-wrapper:not(.hidden) + #installed .entry-header {
-  top: calc(var(--header-height) + var(--bulk-action-height));
+  top: calc(var(--header-height) + var(--toolbar-height));
 }
 
-#manage-bulk-actions .select-resizer {
+#tools-wrapper .select-resizer {
   background: #fff;
 }
 
@@ -535,9 +536,10 @@ details.applies-to-extra[open] {
   padding: 2px 10px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
-#filters,
+#filters-wrapper,
 #bulk-filter-count {
   margin-right: 20px;
 }
@@ -572,25 +574,9 @@ details.applies-to-extra[open] {
 }
 
 
-#filters > label {
+#filters-wrapper filter-selection {
   display: flex;
   align-items: center;
-  left: -9px;
-  padding: 2px 0 2px 24px;
-}
-
-#filters > label input[type="checkbox"]:not(.slider),
-#filters > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
-  top: 2px;
-  left: 8px;
-}
-
-#filters > label:hover {
-  background-color: hsla(0, 0%, 50%, .4);
-}
-
-#filters {
-  border: 1px solid transparent;
 }
 
 .active #filters-stats,