From 218b6b41ecc8014bfecf6d3485e266ad07eaba6d Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 16 Dec 2018 22:48:20 -0600
Subject: [PATCH] Add applies to config modal

---
 js/prefs.js              |   3 +-
 manage.html              | 350 +++++++++++++++++++++++++--------------
 manage/manage-actions.js |  98 +++++++++--
 manage/manage-ui.js      |  29 ++--
 manage/manage.css        |  36 ++--
 5 files changed, 349 insertions(+), 167 deletions(-)

diff --git a/js/prefs.js b/js/prefs.js
index 9bfd780b..b98dd1fe 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -27,8 +27,7 @@ self.prefs = self.INJECTED === 1 ? self.prefs : (() => {
     'manage.onlyEnabled.invert': false, // display only disabled styles
     'manage.onlyLocal.invert': false,   // display only externally installed styles
     'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
-    // the new compact layout doesn't look good on Android yet
-    'manage.newUI': !navigator.appVersion.includes('Android'),
+
     'manage.newUI.favicons': false, // show favicons for the sites in applies-to
     'manage.newUI.faviconsGray': true, // gray out favicons
     'manage.newUI.targets': 3,      // max number of applies-to targets visible: 0 = none
diff --git a/manage.html b/manage.html
index bd37bb71..66b0e1c6 100644
--- a/manage.html
+++ b/manage.html
@@ -67,22 +67,22 @@
           </svg>
         </a>
         <a href="#" class="entry-configure-usercss tt-e" i18n-data-title="configureStyle">
-          <svg class="svg-icon config" viewBox="0 0 24 24">
-              <path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
-                0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49
-                0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.57.57 0 0 0-.18-.03.5.5 0 0
-                0-.43.25l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65a7.93 7.93 0 0 0 0 1.96l-2.11 1.65a.5.5
-                0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38
-                2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65a7.68 7.68 0 0 0 1.69-.98l2.49
-                1 .18.03a.5.5 0 0 0 .43-.25l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65zm-1.98-1.71a5.34
-                5.34 0 0 1 0 1.46l-.14 1.13.89.7 1.08.84-.7
-                1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2
-                1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43a5.67 5.67 0 0
-                1-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21
-                1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21
-                1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16
-                1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14
-                1.13zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
+          <svg class="svg-icon entry-config" viewBox="0 0 24 24">
+            <path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
+              0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49
+              0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.57.57 0 0 0-.18-.03.5.5 0 0
+              0-.43.25l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65a7.93 7.93 0 0 0 0 1.96l-2.11 1.65a.5.5
+              0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38
+              2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65a7.68 7.68 0 0 0 1.69-.98l2.49
+              1 .18.03a.5.5 0 0 0 .43-.25l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65zm-1.98-1.71a5.34
+              5.34 0 0 1 0 1.46l-.14 1.13.89.7 1.08.84-.7
+              1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2
+              1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43a5.67 5.67 0 0
+              1-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21
+              1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21
+              1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16
+              1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14
+              1.13zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
           </svg>
         </a>
         <a href="#" class="entry-edit tt-e" i18n-data-title="editStyleLabel">
@@ -142,6 +142,7 @@
 
   <template data-id="appliesToTarget">
     <span class="target tt-w">
+      <img async="true">
       <svg class="svg-icon" viewBox="0 0 24 24">
         <path fill="#666" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7 6h-3l-1-4 4 4zm-7-4l2 4h-4l2-4zM4 14a8 8 0 0 1 0-4h4a17 17 0 0 0 0 4H4zm1 2h3l1 4-4-4zm3-8H5l4-4-1 4zm4 12l-2-4h4l-2 4zm2-6h-4a15 15 0 0 1 0-4h4a15 15 0 0 1 0 4zm1 6l1-4h3l-4 4zm1-6a17 17 0 0 0 0-4h4a8 8 0 0 1 0 4h-4z"/>
       </svg>
@@ -159,7 +160,7 @@
   </template>
 
   <template data-id="extraAppliesTo">
-    <details class="applies-to-extra">
+    <details class="applies-to-extra hidden">
       <summary class="applies-to-extra-expander">&nbsp;</summary>
     </details>
   </template>
@@ -227,34 +228,62 @@
   <div id="main-actions">
     <a href="edit.html" i18n-data-title="addStyleLabel" class="new-style tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
+        <path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0
+          16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z"/>
       </svg>
     </a>
+
+    <a href="#" id="manage-options-button" i18n-data-title="openOptionsManage" class="tt-w">
+      <svg class="svg-icon ui-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
+    </a>
+
+    <a href="#" id="manage-shortcuts-button" class="chromium-only tt-w" i18n-data-title="shortcutsNote">
+      <svg class="svg-icon" viewBox="0 0 24 24">
+        <path d="M20 7v10H4V7h16m0-2H4a2 2 0 0 0-1.99 2L2 17c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V7a2 2 0
+          0 0-2-2zm-9 3h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-3 0h2v2H5zm0-3h2v2H5zm3
+          6h8v2H8zm6-3h2v2h-2zm0-3h2v2h-2zm3 3h2v2h-2zm0-3h2v2h-2z"/>
+      </svg>
+    </a>
+
     <span class="spacer"></span>
     <a href="https://add0n.com/stylus.html#features" target="_blank" i18n-data-title="linkGetHelp" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M15 4v7H5.17L4 12.17V4h11m1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1z"/>
+        <path d="M15 4v7H5.17L4 12.17V4h11m1-2H3a1 1 0 0 0-1 1v14l4-4h10a1 1 0 0 0 1-1V3a1 1 0 0
+          0-1-1zm5 4h-2v9H6v2a1 1 0 0 0 1 1h11l4 4V7a1 1 0 0 0-1-1z"/>
       </svg>
     </a>
     <a href="https://discordapp.com/widget?id=379521691774353408" target="_blank" i18n-data-title="linkChat" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M11 23.59v-3.6c-5.01-.26-9-4.42-9-9.49C2 5.26 6.26 1 11.5 1S21 5.26 21 10.5c0 4.95-3.44 9.93-8.57 12.4l-1.43.69zM11.5 3C7.36 3 4 6.36 4 10.5S7.36 18 11.5 18H13v2.3c3.64-2.3 6-6.08 6-9.8C19 6.36 15.64 3 11.5 3zm-1 11.5h2v2h-2zm2-1.5h-2c0-3.25 3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/>
+        <path d="M11 23.59v-3.6c-5.01-.26-9-4.42-9-9.49C2 5.26 6.26 1 11.5 1S21 5.26 21 10.5c0
+          4.95-3.44 9.93-8.57 12.4l-1.43.69zM11.5 3C7.36 3 4 6.36 4 10.5S7.36 18 11.5
+          18H13v2.3c3.64-2.3 6-6.08 6-9.8C19 6.36 15.64 3 11.5 3zm-1 11.5h2v2h-2zm2-1.5h-2c0-3.25
+          3-3 3-5 0-1.1-.9-2-2-2s-2 .9-2 2h-2c0-2.21 1.79-4 4-4s4 1.79 4 4c0 2.5-3 2.75-3 5z"/>
       </svg>
     </a>
     <a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-data-title="linkStylusWiki" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm0 2h7v5h5v11H6V4zm2 8v2h8v-2H8zm0 4v2h8v-2H8z"/>
+        <path d="M6 2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6H6zm0
+          2h7v5h5v11H6V4zm2 8v2h8v-2H8zm0 4v2h8v-2H8z"/>
       </svg>
     </a>
     <a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n-data-title="linkTranslate" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M4 2a2 2 0 0 0-2 2v9c0 1.1.9 2 2 2h1v2l2 2h2v1c0 1.1.9 2 2 2h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-5V4a2 2 0 0 0-2-2zm0 2h9v5h-2c-.66 0-1.23.32-1.6.81-.15-.1-.3-.24-.43-.34C9.6 8.8 10.23 8 10.75 7H12V6H9V5H8v1H5v1h1.13a.5.5 0 0 0-.1.5s.17.5.69 1.19c.19.24.45.52.75.81-1.15.97-2.13 1.4-2.13 1.4a.5.5 0 0 0 .38.94s1.2-.48 2.53-1.65c.23.18.5.35.78.53-.01.1-.03.18-.03.28v2H4zm2.88 3h2.68A9.8 9.8 0 0 1 8.2 8.84a6.59 6.59 0 0 1-.69-.75c-.44-.57-.5-.87-.5-.87A.53.53 0 0 0 6.87 7zm7.96 5h1.32L19 20h-1.16l-.75-2.19h-3.25L13.13 20H12zm.6.9c-.13.48-1.28 4.1-1.28 4.1h2.65s-1.22-3.63-1.34-4.1zM7 15h2v2H7z"/>
+        <path d="M4 2a2 2 0 0 0-2 2v9c0 1.1.9 2 2 2h1v2l2 2h2v1c0 1.1.9 2 2 2h9a2 2 0 0 0 2-2v-9a2 2
+          0 0 0-2-2h-5V4a2 2 0 0 0-2-2zm0 2h9v5h-2c-.66 0-1.23.32-1.6.81-.15-.1-.3-.24-.43-.34C9.6
+          8.8 10.23 8 10.75 7H12V6H9V5H8v1H5v1h1.13a.5.5 0 0 0-.1.5s.17.5.69
+          1.19c.19.24.45.52.75.81-1.15.97-2.13 1.4-2.13 1.4a.5.5 0 0 0 .38.94s1.2-.48
+          2.53-1.65c.23.18.5.35.78.53-.01.1-.03.18-.03.28v2H4zm2.88 3h2.68A9.8 9.8 0 0 1 8.2
+          8.84a6.59 6.59 0 0 1-.69-.75c-.44-.57-.5-.87-.5-.87A.53.53 0 0 0 6.87 7zm7.96 5h1.32L19
+          20h-1.16l-.75-2.19h-3.25L13.13 20H12zm.6.9c-.13.48-1.28 4.1-1.28
+          4.1h2.65s-1.22-3.63-1.34-4.1zM7 15h2v2H7z"/>
       </svg>
 
     </a>
     <a href="https://userstyles.org" target="_blank" i18n-data-title="linkGetStyles" class="tt-w">
       <svg class="svg-icon" viewBox="0 0 24 24">
-        <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86a2.02 2.02 0 0 0 1.09 2.61zm19.5-3.7L17.07 3.98a2.01 2.01 0 0 0-2.6-1.08L7.1 5.95a2 2 0 0 0-1.08 2.6l4.96 11.97a2 2 0 0 0 2.6 1.08l7.36-3.05a2 2 0 0 0 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95-7.35 3.05z"/>
+        <path d="M2.53 19.65l1.34.56v-9.03l-2.43 5.86a2.02 2.02 0 0 0 1.09 2.61zm19.5-3.7L17.07
+          3.98a2.01 2.01 0 0 0-2.6-1.08L7.1 5.95a2 2 0 0 0-1.08 2.6l4.96 11.97a2 2 0 0 0 2.6
+          1.08l7.36-3.05a2 2 0 0 0 1.09-2.6zm-9.2 3.8L7.87 7.79l7.35-3.04h.01l4.95 11.95-7.35 3.05z"/>
         <circle cx="11" cy="9" r="1"/>
         <path d="M5.88 19.75c0 1.1.9 2 2 2h1.45l-3.45-8.34v6.34z"/>
       </svg>
@@ -266,12 +295,99 @@
 <div id="tools-wrapper" class="hidden">
 
   <div class="manage-row">
+      <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="bulk-actions">
+        <span id="filters-wrapper">
+          <strong i18n-text="manageFilters"></strong>
+          <span class="filter-selection">
+            <label class="checkmate" tabindex="0">
+                <input id="manage.onlyEnabled" type="checkbox"
+                  data-filter=".enabled"
+                  data-filter-hide=".disabled">
+                <svg class="svg-icon checkbox" viewBox="0 0 24 24">
+                  <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
+                  <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
+                </svg>
+            </label>
+            <span class="select-resizer">
+              <select id="manage.onlyEnabled.invert">
+                <option i18n-text="manageOnlyEnabled" value="false"></option>
+                <option i18n-text="manageOnlyDisabled" value="true"></option>
+              </select>
+              <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+            </span>
+          </span>
+
+          <span class="filter-selection">
+            <label class="checkmate" tabindex="0">
+              <input id="manage.onlyLocal" type="checkbox"
+                data-filter=":not(.updatable):not(.update-done)"
+                data-filter-hide=".updatable, .update-done">
+              <svg class="svg-icon checkbox" viewBox="0 0 24 24">
+                <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
+                <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
+              </svg>
+            </label>
+            <span class="select-resizer">
+              <select id="manage.onlyLocal.invert" i18n-data-title="manageOnlyLocalTooltip">
+                <option i18n-text="manageOnlyLocal" value="false"></option>
+                <option i18n-text="manageOnlyExternal" value="true"></option>
+              </select>
+              <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+            </span>
+          </span>
+
+          <span class="filter-selection">
+            <label class="checkmate" tabindex="0">
+              <input id="manage.onlyUsercss" type="checkbox"
+                data-filter=".usercss"
+                data-filter-hide=":not(.usercss)">
+              <svg class="svg-icon checkbox" viewBox="0 0 24 24">
+                <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
+                <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
+              </svg>
+            </label>
+            <span class="select-resizer">
+              <select id="manage.onlyUsercss.invert">
+                <option i18n-text="manageOnlyUsercss" value="false"></option>
+                <option i18n-text="manageOnlyNonUsercss" value="true"></option>
+              </select>
+              <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+            </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"
+                data-filter-hide=":not(.updatable):not(.update-done),
+                                  .no-update:not(.update-problem),
+                                  .updatable:not(.can-update):not(.update-problem):not(.update-done)">
+              <svg class="svg-icon checkbox" viewBox="0 0 24 24">
+                <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
+                <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
+              </svg>
+              <span i18n-text="manageOnlyUpdates"></span>
+            </label>
+          </span>
+
+        </span>
+  </div>
+
+  <div id="bulk-actions" class="manage-row">
+    <div>
       <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="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>
@@ -293,99 +409,19 @@
       <button id="bulk-actions-apply" i18n-text="bulkActionsApply"></button>
       <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></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"/>
+        <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"/>
         <!-- supported everwhere?
-          <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="1s" repeatCount="indefinite"/>
+          <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">
-            <input id="manage.onlyEnabled" type="checkbox"
-              data-filter=".enabled"
-              data-filter-hide=".disabled">
-            <svg class="svg-icon checkbox" viewBox="0 0 24 24">
-            <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
-            <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
-          </svg>
-        </label>
-        <span class="select-resizer">
-          <select id="manage.onlyEnabled.invert">
-            <option i18n-text="manageOnlyEnabled" value="false"></option>
-            <option i18n-text="manageOnlyDisabled" value="true"></option>
-          </select>
-          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-        </span>
-      </span>
-
-      <span class="filter-selection">
-        <label class="checkmate" tabindex="0">
-          <input id="manage.onlyLocal" type="checkbox"
-            data-filter=":not(.updatable):not(.update-done)"
-            data-filter-hide=".updatable, .update-done">
-          <svg class="svg-icon checkbox" viewBox="0 0 24 24">
-            <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
-            <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
-          </svg>
-        </label>
-        <span class="select-resizer">
-          <select id="manage.onlyLocal.invert" i18n-data-title="manageOnlyLocalTooltip">
-            <option i18n-text="manageOnlyLocal" value="false"></option>
-            <option i18n-text="manageOnlyExternal" value="true"></option>
-          </select>
-          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-        </span>
-      </span>
-
-      <span class="filter-selection">
-        <label class="checkmate" tabindex="0">
-          <input id="manage.onlyUsercss" type="checkbox"
-            data-filter=".usercss"
-            data-filter-hide=":not(.usercss)">
-          <svg class="svg-icon checkbox" viewBox="0 0 24 24">
-            <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
-            <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
-          </svg>
-        </label>
-        <span class="select-resizer">
-          <select id="manage.onlyUsercss.invert">
-            <option i18n-text="manageOnlyUsercss" value="false"></option>
-            <option i18n-text="manageOnlyNonUsercss" value="true"></option>
-          </select>
-          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-        </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"
-            data-filter-hide=":not(.updatable):not(.update-done),
-                              .no-update:not(.update-problem),
-                              .updatable:not(.can-update):not(.update-problem):not(.update-done)">
-          <svg class="svg-icon checkbox" viewBox="0 0 24 24">
-            <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16z"/>
-            <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
-          </svg>
-          <span i18n-text="manageOnlyUpdates"></span>
-        </label>
-      </span>
-
-    </span>
-
+    </div>
   </div>
+
 </div>
 
 <div id="installed" class="manage-col-entries">
@@ -411,12 +447,21 @@
     <div class="entry-col header-last-update center-text">
       <a href="#" class="entry-col sortable tt-sw" i18n-text="searchResultUpdated" i18n-data-title="sortLabel;sortColumnLastUpdate" data-type="dateUpdated"><span></span></a>
       <a href="#" id="update-history" class="tt-sw" i18n-data-title="genericHistoryLabel" tabindex="0">
-        <svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
-          <path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
+        <svg class="svg-icon update-history" viewBox="0 0 24 24" i18n-alt="updateCheckHistory">
+          <path d="M20.8 10.86a7 7 0 0 0-1.53-1.47V7.02L13.35 1H5.47c-1.08 0-1.96.9-1.96 2L3.5
+            19.05c0 1.1.88 2 1.96 2h5.94a6.86 6.86 0 0 0 8.2-.26 7.16 7.16 0 0 0 1.2-9.93zm-2.15
+            8.7a5.34 5.34 0 0 1-7.59-.96 5.53 5.53 0 0 1-1.1-4.05l-1.53-.2c-.2 1.6.14 3.26 1.05
+            4.7h-4V3h7.05l4.77 4.85v.59a6.84 6.84 0 0 0-6.26 1.2L9.62 7.78l-.52 4.3-.05.1 4.37.56L12
+            10.88a5.34 5.34 0 0 1 7.6.95 5.56 5.56 0 0 1-.94 7.72z"/>
+          <path d="M14.38 12.07V16l3.3 2 .56-.95-2.7-1.64v-3.34z"/>
         </svg>
       </a>
     </div>
-    <div class="entry-col header-applies-to" i18n-text="appliesLabel"></div>
+    <div class="entry-col header-applies-to" i18n-text="appliesLabel">
+      <a href="#" id="applies-to-config" class="tt-sw" i18n-data-title="configureStyle" tabIndex="0">
+        <svg class="svg-icon applies-to-config" viewBox="0 0 24 24"><use xlink:href="#svg-icon-config"/></svg>
+      </a>
+    </div>
   </header>
 </div>
 
@@ -426,15 +471,40 @@
   <button id="check-all-updates-force"></button>
   <button id="file-all-styles"></button>
   <button id="unfile-all-styles"></button>
-  <button id="manage-options-button"></button>
-  <button id="manage-shortcuts-button"></button>
   <button id="sorter-help"></button>
-  <input id="manage.newUI" type="checkbox">
-  <input id="manage.newUI.faviconsGray" type="checkbox">
-  <input id="manage.newUI.targets" type="number" min="1" max="100" value="3">
-  <input id="manage.newUI.favicons" type="checkbox">
 </div>
 
+  <!-- Applies to config, can't put this in a template because these inputs are bound to subscribed prefs -->
+  <div class="hidden">
+    <div id="appliesToConfig">
+      <label class="checkmate" tabindex="0">
+        <input id="manage.newUI.favicons" type="checkbox">
+        <svg class="svg-icon checkbox" viewBox="0 0 24 24">
+          <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16
+            8.01 8.01 0 0 1 0 16z"/>
+          <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
+        </svg>
+        <span i18n-text="manageFavicons"></span>
+      </label>
+      <div id="faviconsHelp" i18n-text="manageFaviconsHelp">
+        <p></p>
+        <label class="checkmate" tabindex="0">
+          <input id="manage.newUI.faviconsGray" type="checkbox">
+          <svg class="svg-icon checkbox" viewBox="0 0 24 24">
+            <path class="circle" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8.01 8.01 0 0 1 0-16
+              8.01 8.01 0 0 1 0 16z"/>
+            <path class="checkmark" d="M16.59 7.52L10 14.11l-2.59-2.58L6 12.94l4 4 8-8z"/>
+          </svg>
+          <span i18n-text="manageFaviconsGray"></span>
+        </label>
+      </div>
+      <label>
+        <input id="manage.newUI.targets" type="number" min="1" max="100" value="3">
+        <span i18n-text="manageMaxTargets"></span>
+      </label>
+    </div>
+  </div>
+
   <!-- <div id="manage-settings">
     <div class="settings-column">
 
@@ -579,17 +649,45 @@
 
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
   <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
-    <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
+    <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,
+      6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,
+      6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,
+      15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
   </symbol>
 
   <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
-    <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+    <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45
+      19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
   </symbol>
 
   <symbol id="svg-icon-help" viewBox="0 0 14 16">
     <title i18n-text="helpAlt"></title>
-    <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
+    <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28
+      0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8
+      7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27
+      0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56
+      5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7
+      7-7-3.12-7-7 3.14-7 7-7z"></path>
   </symbol>
+
+  <symbol id="svg-icon-config" viewBox="0 0 24 24">
+    <path d="M19.43 12.98a7.8 7.8 0 0 0 0-1.96l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5
+      0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4a.49.49
+      0 0 0-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.57.57 0 0 0-.18-.03.5.5 0 0
+      0-.43.25l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65a7.93 7.93 0 0 0 0 1.96l-2.11 1.65a.5.5
+      0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38
+      2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65a7.68 7.68 0 0 0 1.69-.98l2.49
+      1 .18.03a.5.5 0 0 0 .43-.25l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65zm-1.98-1.71a5.34
+      5.34 0 0 1 0 1.46l-.14 1.13.89.7 1.08.84-.7
+      1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2
+      1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43a5.67 5.67 0 0
+      1-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21
+      1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21
+      1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16
+      1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14
+      1.13zM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
+  </symbol>
+
 </svg>
 
 </body>
diff --git a/manage/manage-actions.js b/manage/manage-actions.js
index 0d656955..0bebdf83 100644
--- a/manage/manage-actions.js
+++ b/manage/manage-actions.js
@@ -61,10 +61,15 @@ function onRuntimeMessage(msg) {
 function initGlobalEvents() {
   installed = $('#installed');
   installed.onclick = handleEvent.entryClicked;
-  $('#manage-options-button').onclick = () => chrome.runtime.openOptionsPage();
+  $('#manage-options-button').onclick = event => {
+    event.preventDefault();
+    chrome.runtime.openOptionsPage();
+  };
 
-  const btn = $('#manage-shortcuts-button');
-  btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands}));
+  $('#manage-shortcuts-button').onclick = event => {
+    event.preventDefault();
+    openURL({url: URLS.configureCommands});
+  };
 
   $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
 
@@ -108,7 +113,6 @@ function initGlobalEvents() {
   sorter.init();
 
   prefs.subscribe([
-    'manage.newUI',
     'manage.newUI.favicons',
     'manage.newUI.faviconsGray',
     'manage.newUI.targets',
@@ -130,7 +134,8 @@ Object.assign(handleEvent, {
     '.entry-delete': 'delete',
     '.entry-configure-usercss': 'config',
     '.header-filter': 'toggleBulkActions',
-    '.sortable': 'updateSort'
+    '.sortable': 'updateSort',
+    '#applies-to-config': 'appliesConfig',
   },
 
   entryClicked(event) {
@@ -281,6 +286,51 @@ Object.assign(handleEvent, {
     configDialog(styleMeta);
   },
 
+  appliesConfig() {
+    messageBox({
+      title: t('configureStyle'),
+      className: 'config-dialog',
+      contents: [
+        $('#appliesToConfig').cloneNode(true)
+      ],
+      buttons: [{
+        textContent: t('confirmClose'),
+        dataset: {cmd: 'close'},
+      }],
+      onshow: box => {
+        box.addEventListener('change', handleEvent.toggleFavicons);
+        $$('input', box).forEach(el => {
+          el.dataset.id = el.id;
+          el.id = null;
+        });
+      }
+    }).then(() => {
+      $('#message-box').removeEventListener('change', handleEvent.toggleFavicons);
+    });
+  },
+
+  toggleFavicons(event) {
+    event.stopPropagation();
+    const box = $('#message-box-contents');
+
+    let value = $('[data-id="manage.newUI.favicons"]', box).checked;
+    prefs.set('manage.newUI.favicons', value);
+    // UI.favicons = value;
+    // Updating the hidden inputs; not the inputs in the message box
+    $('#manage.newUI.favicons').checked = value;
+
+    value = $('[data-id="manage.newUI.faviconsGray"]', box).checked;
+    prefs.set('manage.newUI.faviconsGray', value);
+    // UI.faviconsGray = value;
+    $('#manage.newUI.faviconsGray').checked = value;
+
+    value = $('[data-id="manage.newUI.targets"]', box).value;
+    prefs.set('manage.newUI.targets', value);
+    // UI.targets = value;
+    //$('#manage.newUI.targets').value = value;
+
+  },
+
 });
 
 function handleUpdate(style, {reason, method} = {}) {
@@ -343,14 +393,14 @@ function handleDelete(id) {
 
 
 function switchUI({styleOnly} = {}) {
-  const current = {};
+  const current = {enabled: true};
   const changed = {};
   let someChanged = false;
   // ensure the global option is processed first
-  for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
-    const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled';
+  for (const el of $$('[id^="manage.newUI."]')) {
+    const id = el.id.replace(/^manage\.newUI\.?/, '');
     const value = el.type === 'checkbox' ? el.checked : Number(el.value);
-    const valueChanged = value !== UI[id] && (id === 'enabled' || current.enabled);
+    const valueChanged = value !== UI[id];
     current[id] = value;
     changed[id] = valueChanged;
     someChanged |= valueChanged;
@@ -368,16 +418,36 @@ function switchUI({styleOnly} = {}) {
     return;
   }
 
-  const missingFavicons = UI.favicons && !$('.entry-applies-to img');
+
+  // TO DO: Fix switching `prefs.set('manage.newUI.favicons', true)`
+  const missingFavicons = UI.favicons && !$('.entry-applies-to img[src]');
   if (changed.enabled || (missingFavicons && !UI.createStyleElement.parts)) {
+    const header = document.createDocumentFragment().appendChild($('.entry-header'));
     installed.textContent = '';
+    installed.appendChild(header);
     API.getAllStyles(true).then(UI.showStyles);
     return;
   }
   if (changed.targets) {
     for (const targets of $$('.entry .targets')) {
-      const hasMore = targets.children.length > UI.targets;
-      targets.parentElement.classList.toggle('has-more', hasMore);
+      const items = $$('.target', targets);
+      const extra = $('.applies-to-extra', targets);
+      const x = items.length === 54;
+      items.splice(0, UI.targets).every(el => {
+        if (!el.parentElement.classList.contains('targets')) {
+          targets.insertBefore(el, extra);
+          return false;
+        }
+        return true;
+      });
+      extra.classList.toggle('hidden', items.length < 1);
+      items.some((el, indx) => {
+        if (!el.parentElement.classList.contains('applies-to-extra')) {
+          extra.prepend(el);
+          return false;
+        }
+        return true;
+      });
     }
     return;
   }
@@ -413,7 +483,7 @@ function updateBulkFilters({target}) {
   // total is undefined until initialized
   if (!installed.dataset.total) return;
   // ignore filter checkboxes
-  if (target.type === 'checkbox' && !target.dataset.filter) {
+  if (target.type === 'checkbox' && !target.dataset.filter && target.closest('#tools-wrapper, .entry')) {
     handleEvent.toggleBulkActions({hidden: false});
     const bulk = $('#toggle-all-filters');
     const state = target.checked;
@@ -451,7 +521,7 @@ function removeSelection() {
 function updateInjectionOrder() {
   const entries = [...installed.children];
   entries.shift(); // remove header
-  console.log(entries[1].styleMeta.id, entries[1].styleMeta.injectionOrder)
+  // console.log(entries[1].styleMeta.id, entries[1].styleMeta.injectionOrder)
 
   entries.forEach((entry, index) => {
     entry.styleMeta.injectionOrder = index + 1;
diff --git a/manage/manage-ui.js b/manage/manage-ui.js
index f2dbbda3..dd8585c8 100644
--- a/manage/manage-ui.js
+++ b/manage/manage-ui.js
@@ -99,10 +99,10 @@ const UI = {
 
   createStyleElement: ({style, name}) => {
     // query the sub-elements just once, then reuse the references
-    if ((UI._parts || {}).UI !== UI.enabled) {
+    if (!(UI._parts || {}).UI) {
       const entry = template['style'];
       UI._parts = {
-        UI: UI.enabled,
+        UI: true,
         entry,
         entryClassBase: entry.className,
         checker: $('.entry-state-toggle', entry) || {},
@@ -199,8 +199,10 @@ const UI = {
           const element = template.appliesToTarget.cloneNode(true);
           if (numTargets === UI.targets) {
             container = container.appendChild(template.extraAppliesTo.cloneNode(true));
+            container.classList.remove('hidden');
           }
           element.dataset.type = type;
+          element.dataset.index = numTargets;
           element.dataset.title =
             (parts.decorations[type + 'Before'] || '') +
             targetValue +
@@ -210,8 +212,9 @@ const UI = {
         }
       }
     }
-    if (numTargets > UI.targets) {
-      $('.entry-applies-to', entry).classList.add('has-more');
+    if (numTargets <= UI.targets) {
+      // Include hidden expander in case user changes UI.targets
+      container.appendChild(template.extraAppliesTo.cloneNode(true));
     }
     if (numTargets) {
       entryTargets.parentElement.replaceChild(targets, entryTargets);
@@ -232,8 +235,6 @@ const UI = {
     const regexpReplaceExtraCharacters = /[\\(]|((\|\w+)+\))/g;
     const regexpMatchRegExp = /[\w-]+[.(]+(com|org|co|net|im|io|edu|gov|biz|info|de|cn|uk|nl|eu|ru)\b/g;
     const regexpMatchDomain = /^.*?:\/\/([^/]+)/;
-    const image = document.createElement('img');
-    image.async = true;
     for (const target of $$('.target', container)) {
       const type = target.dataset.type;
       const targetValue = target.dataset.title;
@@ -254,15 +255,12 @@ const UI = {
         favicon = favicon ? UI.GET_FAVICON_URL + favicon[1] : '';
       }
       if (favicon) {
-        const el = $('img, svg', target);
+        const el = $('img[src], svg', target);
         if (!el || el.localName === 'svg') {
-          const img = image.cloneNode();
+          const img = $('img', target);
           img.dataset.src = favicon;
-          el.replaceWith(img);
-          //target.insertAdjacentElement('afterbegin', document.createElement('img'))
-            //.dataset.src = favicon;
         } else if ((target.dataset.src || target.src) !== favicon) {
-          el.src = '';
+          delete el.src;
           el.dataset.src = favicon;
         }
       }
@@ -283,7 +281,12 @@ const UI = {
   addHeaderLabels: () => {
     const header = $('.header-name');
     const span = document.createElement('span');
-    const labels = span.cloneNode();
+    let labels = $('.header-labels', header);
+    if (labels) {
+      labels.textContent = '';
+    } else {
+      labels = span.cloneNode();
+    }
     const label = document.createElement('a');
     labels.className = 'header-labels';
     label.className = 'header-label sortable tt-s';
diff --git a/manage/manage.css b/manage/manage.css
index 55263cf2..20d194f9 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -1,8 +1,8 @@
 :root {
   --icon-size: 20px;
-  --narrow-column: 60px;
+  --narrow-column: 75px;
   --header-height: 40px;
-  --toolbar-height: 35px;
+  --toolbar-height: 60px;
   --entry-header-height: 25px;
   --onoffswitch-width: 60px;
 }
@@ -119,20 +119,17 @@ a:hover {
   vertical-align: bottom;
 }
 
-#main-header a {
-  font-size: .7em;
-  color: #999;
-  text-decoration: none;
-}
-
-#main-header a:hover {
+#main-header a:hover,
+#main-actions a:hover svg {
   color: hsla(180, 50%, 50%, 1);
+  fill: hsla(180, 50%, 50%, 1);
 }
 
 #main-header:lang(ja) {
   font-weight: normal;
 }
 
+
 #installed .entry-header {
   background: #eee;
   position: fixed;
@@ -291,12 +288,18 @@ a:hover {
   padding: 2px;
 }
 
-.targets .target img {
+.targets .target img,
+.targets .target svg {
   max-width: var(--icon-size);
   max-height: var(--icon-size);
   width: var(--icon-size);
 }
 
+#installed:not(.has-favicons) .targets img,
+#installed.has-favicons .targets img[src] + svg {
+  display: none;
+}
+
 #installed.faviconsGray .target img {
   -webkit-filter: grayscale(1);
   filter: grayscale(1);
@@ -632,8 +635,12 @@ details.applies-to-extra[open] {
   margin-right: 20px;
 }
 
+#search-wrapper {
+  width: 30%;
+}
+
 #search {
-  width: 15vw;
+  width: calc(100% - var(--icon-size) * 1.4);
 }
 
 #search-help {
@@ -852,7 +859,12 @@ details.applies-to-extra[open] {
   }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 900px) {
+  #installed .entry,
+  #installed .entry-col,
+  #installed .entry-header {
+    display: block;
+  }
   .entry-actions {
     white-space: normal;
   }