Add filter toolbar indicator

manage.html

@@ -370,12 +370,11 @@
 
 <div id="installed" class="manage-col-entries">
   <header class="entry-header">
-    <div class="entry-col header-filter center-text">
-      <a href="#" id="toggle-actions" class="tt-se" i18n-data-title="bulkActionsTooltip">
-        <svg class="svg-icon" width="20" height="20" viewBox="0 0 14 14">
-          <path d="M6.42 7.58L2.92 3.5h8.75l-3.5 4.08v4.09c-1 0-1.75-.76-1.75-1.75V7.58z"/>
-        </svg>
-      </a>
+    <div class="entry-col header-filter center-text tt-se" i18n-data-title="bulkActionsTooltip">
+      <span></span>
+      <svg class="svg-icon" width="20" height="20" viewBox="0 0 14 14">
+        <path d="M6.42 7.58L2.92 3.5h8.75l-3.5 4.08v4.09c-1 0-1.75-.76-1.75-1.75V7.58z"/>
+      </svg>
     </div>
     <div class="entry-col header-id">
       <a href="#" class="sortable tt-se" data-type="order" i18n-data-title="sortLabel;injection order">#<span></span></a>

manage/manage-actions.js

@@ -77,7 +77,7 @@ function initGlobalEvents() {
         el.removeAttribute('open');
       });
       // Close bulk actions
-      $('#tools-wrapper').classList.add('hidden');
+      handleEvent.toggleBulkActions({hidden: true});
     } else if (event.which === 32 && event.target.classList.contains('checkmate')) {
       // pressing space toggles the containing checkbox
       $('input[type="checkbox"]', event.target).click();
@@ -129,7 +129,7 @@ Object.assign(handleEvent, {
     '.update': 'update',
     '.entry-delete': 'delete',
     '.entry-configure-usercss': 'config',
-    '#toggle-actions': 'toggleBulkActions',
+    '.header-filter': 'toggleBulkActions',
     '.sortable': 'updateSort'
   },
 
@@ -190,8 +190,10 @@ Object.assign(handleEvent, {
     UI.addLabels(entry);
   },
 
-  toggleBulkActions() {
-    $('#tools-wrapper').classList.toggle('hidden');
+  toggleBulkActions({hidden}) {
+    const tools = $('#tools-wrapper');
+    tools.classList.toggle('hidden', hidden);
+    $('.header-filter').classList.toggle('active', !tools.classList.contains('hidden'));
   },
 
   check(event, entry) {
@@ -412,7 +414,7 @@ function updateBulkFilters({target}) {
   if (!installed.dataset.total) return;
   // ignore filter checkboxes
   if (target.type === 'checkbox' && !target.dataset.filter) {
-    $('#tools-wrapper').classList.remove('hidden');
+    handleEvent.toggleBulkActions({hidden: false});
     const bulk = $('#toggle-all-filters');
     const state = target.checked;
     const visibleEntries = $$('.entry-filter-toggle')

manage/manage.css

@@ -242,6 +242,26 @@ a:hover {
   content: '▾';
 }
 
+.header-filter span:before {
+  content: '►';
+  color: #666;
+  position: relative;
+  left: 7px;
+}
+
+.header-filter:hover span:before,
+.header-filter:hover .svg-icon,
+.header-filter.active svg {
+  transition: all .5s;
+  color: #000;
+  fill: #000;
+}
+
+.header-filter.active span:before {
+  content: '▲';
+  color: #000;
+}
+
 .entry-sort {
   cursor: move;
 }
@@ -464,6 +484,7 @@ img.target {
 .targets details.applies-to-extra {
   margin-left: 4px;
   margin-top: 5px;
+  cursor: pointer;
 }
 
 details.applies-to-extra[open] {