From 596d6a9ca92724bd54de93bf71d72858b1f927ab Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Fri, 14 Dec 2018 07:03:49 -0600
Subject: [PATCH] Ditch tabs & add header icons

---
 _locales/en/messages.json |   4 +
 manage.html               | 153 +++++++++++++++++++++++---------------
 manage/manage-actions.js  |   2 +-
 manage/manage-ui.js       |  20 +++--
 manage/manage.css         |  62 +++++++++------
 5 files changed, 150 insertions(+), 91 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 5e72abb7..f7a3a4a8 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -554,6 +554,10 @@
     "message": "Get help",
     "description": "Homepage link text on the manage page e.g. https://add0n.com/stylus.html#features with chat/FAQ/intro/info"
   },
+  "linkChat": {
+    "message": "Chat with us",
+    "description": "Link to open a new browser tab to chat with users & developers on Discord"
+  },
   "linkGetStyles": {
     "message": "Get styles",
     "description": "Help link text on the manage page e.g. https://userstyles.org"
diff --git a/manage.html b/manage.html
index 523b37f3..3b1f4010 100644
--- a/manage.html
+++ b/manage.html
@@ -54,19 +54,19 @@
         <span class="entry-labels"></span>
       </div>
       <div class="entry-col entry-actions">
-        <a href="#" class="entry-homepage">
+        <a href="#" class="entry-homepage tt-w">
           <svg class="svg-icon home" viewBox="0 0 24 24">
             <path d="M20 21h-7v-6h-2v6H4v-8H0L12 2l12 11h-4v8zm-5-2h3v-8h1l-7-6-7 6h1v8h3v-6h6v6z"/>
           </svg>
         </a>
-        <a href="#" class="entry-support">
+        <a href="#" class="entry-support tt-w">
           <svg class="svg-icon help" viewBox="0 0 24 24">
             <path d="M11 18h2v-2h-2v2zm1-16a10 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 16zm0-14a4 4 0 0 0-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3
               5h2c0-2.25 3-2.5 3-5a4 4 0 0 0-4-4z"/>
           </svg>
         </a>
-        <a href="#" class="entry-configure-usercss" i18n-data-title="configureStyle">
+        <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
@@ -85,14 +85,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" i18n-data-title="editStyleLabel">
+        <a href="#" class="entry-edit tt-e" i18n-data-title="editStyleLabel">
           <svg class="svg-icon edit" viewBox="0 0 24 24">
             <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92
               19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75
               1.83-1.83a1 1 0 0 0 0-1.41z"/>
           </svg>
         </a>
-        <a href="#" class="entry-delete" i18n-data-title="deleteStyleLabel">
+        <a href="#" class="entry-delete tt-e" i18n-data-title="deleteStyleLabel">
           <svg class="svg-icon remove" viewBox="0 0 24 24">
             <path d="M6 19c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4z"/>
           </svg>
@@ -104,7 +104,7 @@
         </svg>
       </div>
       <div class="entry-col entry-version"></div>
-      <div class="entry-col entry-last-update"></div>
+      <div class="entry-col entry-last-update tt-w"></div>
       <div class="entry-col entry-applies-to">
         <div class="targets"></div>
       </div>
@@ -113,7 +113,7 @@
 
   <template data-id="updaterIcons">
     <span class="updater-icons entry-col entry-update-state">
-      <a href="#" class="check-update" i18n-data-title="checkForUpdate" tabindex="0">
+      <a href="#" class="check-update tt-e" i18n-data-title="checkForUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
             L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
@@ -121,18 +121,18 @@
             C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
         </svg>
       </a>
-      <a href="#" class="update" i18n-data-title="installUpdate" tabindex="0">
+      <a href="#" class="update tt-e" i18n-data-title="installUpdate" tabindex="0">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
           <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
         </svg>
       </a>
-      <span class="up-to-date" i18n-data-title="updateCheckSucceededNoUpdate">
+      <span class="up-to-date tt-e" i18n-data-title="updateCheckSucceededNoUpdate">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
         </svg>
       </span>
-      <span class="updated" i18n-data-title="updateCompleted">
+      <span class="updated tt-e" i18n-data-title="updateCompleted">
         <svg class="svg-icon" viewBox="0 0 20 20">
           <polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
         </svg>
@@ -141,7 +141,11 @@
   </template>
 
   <template data-id="appliesToTarget">
-    <img class="target" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23666' 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>" async="true"/>
+    <span class="target tt-w">
+      <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>
+    </span>
   </template>
 
   <template data-id="appliesToEverything">
@@ -192,38 +196,71 @@
 <body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
 
 <h1 id="main-header">
-  <svg id="stylus-logo" width="32" height="32" viewBox="0 0 48 48">
-    <path fill="#285959" d="M44.59 20.14c-.02-.86 0-13.6 0-13.6-.02-4.13-2.5-5.62-6.6-5.64H11.28C7.17.92
-      4.59 2.44 4.65 6.54v14.2c0 1.64-3.02 1.55-3.02 1.55v3.48s3.05.03 3.02 1.97v13.88c0 4.15 2.5 5.63
-      6.63 5.63h26.71c4.13.02 6.6-1.45 6.6-5.63V27.35c0-1.54 2.98-1.57 2.98-1.57l.04-3.84s-3-.07-3.02-1.8z"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" fill="#28FEFE" d="M46 20.98V5.62A5.72 5.72 0 0 0
-      40.22.03H8.66a5.63 5.63 0 0 0-5.68 5.59v15.37H0v6h2.98v15.4a5.67 5.67 0 0 0 5.68 5.64h31.56A5.76
-      5.76 0 0 0 46 42.39V26.94h2.03v-5.98l-2.03.02zm-2 5.65v13.76c0 4.19-2.43 5.65-6.56 5.64H10.66c-4.13
-      0-5.69-1.48-5.69-5.64V27.1c.04-1.94-2.93-1.97-2.93-1.97v-2.21s2.93.09 2.93-1.54c.05-.52 0-13.84
-      0-13.84-.05-4.1 1.57-5.57 5.68-5.59h26.79c4.1.02 6.54 1.46 6.56 5.59 0 0 .08 12.87 0 13.4.02 1.73
-      1.98 1.94 1.98 1.94v2.19S44 25.09 44 26.63zm-16.76-6.2c-4.56-1.71-6.47-2.7-6.47-4.92 0-1.77 1.65-3.37
-      5.07-3.37 3.37 0 5.9.98 7.26 1.66l1.76-6.33c-2.08-.98-4.92-1.76-8.91-1.76-8.19 0-13.22 4.51-13.22
-      10.47 0 5.08 3.84 8.29 9.64 10.36 4.2 1.45 5.86 2.7 5.86 4.87 0 2.28-1.92 3.78-5.55 3.78-3.37
-      0-6.68-1.09-8.75-2.17l-1.61 6.47c1.97 1.1 5.9 2.18 9.9 2.18 9.58 0 14.04-4.98 14.04-10.83
-      0-4.92-2.85-8.13-9.02-10.41z"/>
-  </svg>
-  <span class="ext-name">Stylus</span>
-  <span class="ext-version"></span>
-  <span class="filter-stats-wrapper">
-    <span id="filters-stats"></span>
-    <a id="reset-filters" href="#" tabindex="0">
-      <svg class="svg-icon" viewBox="0 0 20 20">
-        <title i18n-text="genericResetLabel"></title>
-        <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
-          5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+  <div>
+    <svg id="stylus-logo" width="32" height="32" viewBox="0 0 48 48">
+      <path fill="#285959" d="M44.59 20.14c-.02-.86 0-13.6 0-13.6-.02-4.13-2.5-5.62-6.6-5.64H11.28C7.17.92
+        4.59 2.44 4.65 6.54v14.2c0 1.64-3.02 1.55-3.02 1.55v3.48s3.05.03 3.02 1.97v13.88c0 4.15 2.5 5.63
+        6.63 5.63h26.71c4.13.02 6.6-1.45 6.6-5.63V27.35c0-1.54 2.98-1.57 2.98-1.57l.04-3.84s-3-.07-3.02-1.8z"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" fill="#28FEFE" d="M46 20.98V5.62A5.72 5.72 0 0 0
+        40.22.03H8.66a5.63 5.63 0 0 0-5.68 5.59v15.37H0v6h2.98v15.4a5.67 5.67 0 0 0 5.68 5.64h31.56A5.76
+        5.76 0 0 0 46 42.39V26.94h2.03v-5.98l-2.03.02zm-2 5.65v13.76c0 4.19-2.43 5.65-6.56 5.64H10.66c-4.13
+        0-5.69-1.48-5.69-5.64V27.1c.04-1.94-2.93-1.97-2.93-1.97v-2.21s2.93.09 2.93-1.54c.05-.52 0-13.84
+        0-13.84-.05-4.1 1.57-5.57 5.68-5.59h26.79c4.1.02 6.54 1.46 6.56 5.59 0 0 .08 12.87 0 13.4.02 1.73
+        1.98 1.94 1.98 1.94v2.19S44 25.09 44 26.63zm-16.76-6.2c-4.56-1.71-6.47-2.7-6.47-4.92 0-1.77 1.65-3.37
+        5.07-3.37 3.37 0 5.9.98 7.26 1.66l1.76-6.33c-2.08-.98-4.92-1.76-8.91-1.76-8.19 0-13.22 4.51-13.22
+        10.47 0 5.08 3.84 8.29 9.64 10.36 4.2 1.45 5.86 2.7 5.86 4.87 0 2.28-1.92 3.78-5.55 3.78-3.37
+        0-6.68-1.09-8.75-2.17l-1.61 6.47c1.97 1.1 5.9 2.18 9.9 2.18 9.58 0 14.04-4.98 14.04-10.83
+        0-4.92-2.85-8.13-9.02-10.41z"/>
+    </svg>
+    <span class="ext-name">Stylus</span>
+    <span class="ext-version"></span>
+    <span class="filter-stats-wrapper">
+      <span id="filters-stats"></span>
+      <a id="reset-filters" class="tt-e" href="#" tabindex="0" i18n-data-title="genericResetLabel">
+        <svg class="svg-icon" viewBox="0 0 20 20">
+          <polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
+            5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
+        </svg>
+      </a>
+    </span>
+  </div>
+  <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"/>
       </svg>
     </a>
-  </span>
-  <span class="tabs">
-    <a href="#" class="active">Manage</a>
-    <a href="#">Options</a>
-    <a href="#">Backup</a>
-  </span>
+    <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"/>
+      </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"/>
+      </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"/>
+      </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"/>
+      </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"/>
+        <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>
+    </a>
+  </div>
+
 </h1>
 
 <div id="tools-wrapper" class="hidden">
@@ -254,6 +291,7 @@
         <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
       </span>
       <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"/>
         <!-- supported everwhere?
@@ -348,24 +386,6 @@
     </span>
 
   </div>
-
-
-  <div style="display: none">
-    <!-- <button id="reset-filters"></button> -->
-    <button id="apply-all-updates"></button>
-    <button id="check-all-updates"></button>
-    <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>
-
 </div>
 
 <div id="installed" class="manage-col-entries">
@@ -400,6 +420,21 @@
   </header>
 </div>
 
+<div style="display: none">
+  <button id="apply-all-updates"></button>
+  <button id="check-all-updates"></button>
+  <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>
+
   <!-- <div id="manage-settings">
     <div class="settings-column">
 
diff --git a/manage/manage-actions.js b/manage/manage-actions.js
index 6e5f9886..0d656955 100644
--- a/manage/manage-actions.js
+++ b/manage/manage-actions.js
@@ -279,7 +279,7 @@ Object.assign(handleEvent, {
   config(event, {styleMeta}) {
     event.preventDefault();
     configDialog(styleMeta);
-  }
+  },
 
 });
 
diff --git a/manage/manage-ui.js b/manage/manage-ui.js
index a06585af..f2dbbda3 100644
--- a/manage/manage-ui.js
+++ b/manage/manage-ui.js
@@ -215,8 +215,7 @@ const UI = {
     }
     if (numTargets) {
       entryTargets.parentElement.replaceChild(targets, entryTargets);
-    } else if (!entry.classList.contains('global') ||
-              !entryTargets.firstElementChild) {
+    } else if (!entry.classList.contains('global') || !entryTargets.firstElementChild) {
       if (entryTargets.firstElementChild) {
         entryTargets.textContent = '';
       }
@@ -233,6 +232,8 @@ 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;
@@ -253,13 +254,16 @@ const UI = {
         favicon = favicon ? UI.GET_FAVICON_URL + favicon[1] : '';
       }
       if (favicon) {
-        const img = target.children[0];
-        if (!img || img.localName !== 'img') {
-          target.insertAdjacentElement('afterbegin', document.createElement('img'))
-            .dataset.src = favicon;
-        } else if ((img.dataset.src || img.src) !== favicon) {
-          img.src = '';
+        const el = $('img, svg', target);
+        if (!el || el.localName === 'svg') {
+          const img = image.cloneNode();
           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 = '';
+          el.dataset.src = favicon;
         }
       }
     }
diff --git a/manage/manage.css b/manage/manage.css
index 98927a55..55263cf2 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -55,6 +55,21 @@ a:hover {
   fill: #666;
 }
 
+#main-actions {
+  display: flex;
+  width: 200px;
+  height: 40px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.spacer {
+  width: 10px;
+  height: 1em;
+  border-right: 1px solid #777;
+  margin-right: 10px;
+}
+
 .entry-actions > a,
 .bulk-actions-select-wrapper,
 #bulk-actions-apply {
@@ -86,11 +101,14 @@ a:hover {
   color: #ddd;
   position: fixed;
   top: 0;
-  width: 100vw;
+  width: 100%;
   height: var(--header-height);
   z-index: 100;
   padding: 2px 8px;
   margin: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
 }
 
 #main-header .ext-version {
@@ -101,20 +119,14 @@ a:hover {
   vertical-align: bottom;
 }
 
-#main-header .tabs {
-  float: right;
-  margin-right: 20px;
-}
-
-#main-header .tabs a {
+#main-header a {
   font-size: .7em;
-  color: #aaa;
+  color: #999;
   text-decoration: none;
 }
 
-#main-header .tabs a.active,
-#main-header .tabs a:hover {
-  color: #c0fff0;
+#main-header a:hover {
+  color: hsla(180, 50%, 50%, 1);
 }
 
 #main-header:lang(ja) {
@@ -140,7 +152,7 @@ a:hover {
   justify-content: center;
 }
 
-#installed {
+#installed, #options, #backup {
   margin-top: calc(var(--header-height) + var(--entry-header-height));
 }
 
@@ -271,17 +283,21 @@ a:hover {
 }
 
 .targets .target {
+  display: inline-block;
+  padding: 0 2px;
+}
+
+.targets .applies-to-extra .target {
+  padding: 2px;
+}
+
+.targets .target img {
   max-width: var(--icon-size);
   max-height: var(--icon-size);
   width: var(--icon-size);
-  margin-left: 2px;
 }
 
-.applies-to-extra img.target {
-  margin-bottom: 2px;
-}
-
-#installed.faviconsGray img.target {
+#installed.faviconsGray .target img {
   -webkit-filter: grayscale(1);
   filter: grayscale(1);
 }
@@ -457,11 +473,11 @@ a svg, .svg-icon.sort {
   fill: #ef6969;
 }
 
-img.target:hover {
+.target:hover img {
   background-color: inherit;
 }
 
-img.target {
+.target img{
   width: var(--icon-size);
   height: var(--icon-size);
   vertical-align: sub;
@@ -474,7 +490,7 @@ img.target {
   opacity: .5;
 }
 
-.entry:hover img.target {
+.entry:hover .target img {
   opacity: 1;
   /* unprefixed since Chrome 53 */
   -webkit-filter: grayscale(0);
@@ -669,7 +685,7 @@ details.applies-to-extra[open] {
 }
 
 #reset-filters svg {
-  fill: hsla(180, 50%, 27%, .5);
+  fill: hsla(180, 50%, 50%, .7);
   width: 24px; /* widen the click area a bit */
   height: 20px;
   padding: 2px;
@@ -677,7 +693,7 @@ details.applies-to-extra[open] {
 }
 
 #reset-filters:hover svg {
-  fill: hsla(180, 50%, 27%, 1);
+  fill: hsla(180, 50%, 50%, 1);
 }
 
 .filter-stats-wrapper:not(.active) #reset-filters,