feature: show icons in the popup (#635)

src/popup/style.css

@@ -55,6 +55,20 @@ footer {
   }
 }
 
+.script-icon {
+  &[src=""] {
+    display: none;
+  }
+  max-width: 1.25rem;
+  max-height: 1.25rem;
+  margin-left: .125rem;
+  position: absolute;
+  & + .icon {
+    margin-right: .75rem;
+    margin-left: 1.5rem;
+  }
+}
+
 .menu-buttons {
   align-items: center;
   padding: 8px;
@@ -99,6 +113,12 @@ footer {
       padding-right: 2rem;
     }
   }
+  &-find {
+    padding-left: 1.25rem;
+  }
+  &-group {
+    padding-left: 3.25rem;
+  }
   &.expand {
     background: #fbfbfb;
     > .submenu {
@@ -114,7 +134,6 @@ footer {
   display: none;
   min-height: 4rem;
   max-height: 30rem;
-  margin-left: 1rem;
   overflow-y: auto;
   background: white;
   border-top: 1px dashed #ddd;
@@ -149,7 +168,7 @@ footer {
     font-size: .8rem;
     color: #333;
     > .menu-item {
-      padding-left: 2rem;
+      padding-left: 3.25rem;
       > .icon {
         margin-right: .5rem;
       }

src/popup/views/app.vue

@@ -38,7 +38,7 @@
       </tooltip>
     </div>
     <div class="menu" v-if="store.injectable" v-show="store.domain">
-      <div class="menu-item menu-area" @click="onFindSameDomainScripts">
+      <div class="menu-item menu-area menu-find" @click="onFindSameDomainScripts">
         <icon name="search"></icon>
         <div class="flex-1" v-text="i18n('menuFindScripts')"></div>
       </div>
@@ -52,7 +52,7 @@
       v-show="scripts.length"
       class="menu menu-scripts"
       :class="{expand: activeMenu === 'scripts'}">
-      <div class="menu-item menu-area" @click="toggleMenu('scripts')">
+      <div class="menu-item menu-area menu-group" @click="toggleMenu('scripts')">
         <div class="flex-auto" v-text="i18n('menuMatchedScripts')"></div>
         <icon name="arrow" class="icon-collapse"></icon>
       </div>
@@ -66,6 +66,7 @@
           <div
             class="menu-item menu-area"
             @click="onToggleScript(item)">
+            <img class="script-icon" :src="scriptIconUrl(item)" @error="scriptIconError">
             <icon :name="getSymbolCheck(item.data.config.enabled)"></icon>
             <div class="flex-auto ellipsis" v-text="item.name" />
           </div>
@@ -158,6 +159,13 @@ export default {
     getSymbolCheck(bool) {
       return `toggle-${bool ? 'on' : 'off'}`;
     },
+    scriptIconUrl(item) {
+      const { icon } = item.data.meta;
+      return (item.data.custom.pathMap || {})[icon] || icon || '';
+    },
+    scriptIconError(event) {
+      event.target.src = '';
+    },
     onToggle() {
       options.set('isApplied', !this.options.isApplied);
       this.checkReload();