feat: add button to edit script from popup menu

close #332

src/popup/style.css

@@ -16,17 +16,21 @@ body {
   border-top: 1px solid silver;
   &-item {
     position: relative;
+    display: flex;
+    align-items: center;
     height: 2rem;
-    line-height: 2rem;
-    padding: 0 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
     cursor: pointer;
     text-align: center;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    .submenu > & {
+    .submenu & {
       text-align: left;
-      padding-left: 1rem;
+      > .flex-auto {
+        margin-left: 1rem;
+      }
     }
     &.disabled {
       color: gray;
@@ -38,15 +42,15 @@ body {
       background: cornflowerblue;
       color: white;
     }
-    > .icon {
-      position: absolute;
-      top: 0;
-      left: 1.5rem;
+    .icon {
       width: 1rem;
-      height: 100%;
-      &-right {
-        left: auto;
-        right: 1.5rem;
+    }
+    > .flex-auto {
+      &:first-child {
+        padding-left: 1rem;
+      }
+      &:last-child {
+        padding-right: 1rem;
       }
     }
   }
@@ -62,10 +66,34 @@ body {
 }
 .submenu {
   display: none;
-  background: white;
   min-height: 4rem;
   max-height: 16rem;
   margin-left: 2rem;
   overflow-y: auto;
+  background: white;
   border-top: 1px dashed #ddd;
+  > * {
+    position: relative;
+    &:not(:hover) > .submenu-buttons {
+      visibility: hidden;
+    }
+  }
+  &-buttons {
+    display: flex;
+    position: absolute;
+    top: .3rem;
+    right: 1rem;
+  }
+  &-button {
+    padding: .2rem;
+    background: white;
+    cursor: pointer;
+    &:hover {
+      color: white;
+      background: cornflowerblue;
+    }
+    .icon {
+      display: block;
+    }
+  }
 }

src/popup/views/app.vue

@@ -5,24 +5,24 @@
     </div>
     <div class="menu-item" :class="{disabled:!options.isApplied}" @click="onToggle">
       <icon :name="getSymbolCheck(options.isApplied)"></icon>
-      <span v-text="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"></span>
+      <div class="flex-auto" v-text="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"></div>
     </div>
     <div class="menu">
       <div class="menu-item" @click="onManage">
         <icon name="cog"></icon>
-        <span v-text="i18n('menuDashboard')"></span>
+        <div class="flex-auto" v-text="i18n('menuDashboard')"></div>
       </div>
     </div>
     <div class="menu" v-show="store.domain">
       <div class="menu-item" @click="onFindSameDomainScripts">
         <icon name="search"></icon>
-        <span v-text="i18n('menuFindScripts')"></span>
+        <div class="flex-auto" v-text="i18n('menuFindScripts')"></div>
       </div>
     </div>
     <div class="menu menu-commands" v-show="commands.length" :class="{expand: activeMenu === 'commands'}">
       <div class="menu-item" @click="toggleMenu('commands')">
-        <icon name="more" class="icon-right icon-collapse"></icon>
-        <span v-text="i18n('menuCommands')"></span>
+        <div class="flex-auto" v-text="i18n('menuCommands')"></div>
+        <icon name="arrow" class="icon-collapse"></icon>
       </div>
       <div class="submenu">
         <div class="menu-item" v-for="item in commands" @click="onCommand(item)">
@@ -32,13 +32,20 @@
     </div>
     <div class="menu menu-scripts" v-show="scripts.length" :class="{expand: activeMenu === 'scripts'}">
       <div class="menu-item" @click="toggleMenu('scripts')">
-        <icon name="more" class="icon-right icon-collapse"></icon>
-        <span v-text="i18n('menuMatchedScripts')"></span>
+        <div class="flex-auto" v-text="i18n('menuMatchedScripts')"></div>
+        <icon name="arrow" class="icon-collapse"></icon>
       </div>
       <div class="submenu">
-        <div class="menu-item" v-for="item in scripts" @click="onToggleScript(item)" :class="{disabled:!item.data.config.enabled}">
-          <icon :name="getSymbolCheck(item.data.config.enabled)" class="icon-right"></icon>
-          <span v-text="item.name"></span>
+        <div v-for="item in scripts">
+          <div class="menu-item" @click="onToggleScript(item)" :class="{disabled:!item.data.config.enabled}">
+            <icon :name="getSymbolCheck(item.data.config.enabled)"></icon>
+            <div class="flex-auto" v-text="item.name"></div>
+          </div>
+          <div class="submenu-buttons">
+            <div class="submenu-button" @click="onEditScript(item)">
+              <icon name="code"></icon>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -100,6 +107,12 @@ export default {
       browser.runtime.openOptionsPage();
       window.close();
     },
+    onEditScript(item) {
+      browser.tabs.create({
+        url: browser.runtime.getURL(`/options/index.html#scripts/${item.data.props.id}`),
+      });
+      window.close();
+    },
     onFindSameDomainScripts() {
       browser.tabs.create({
         url: `https://greasyfork.org/scripts/by-site/${encodeURIComponent(this.store.domain)}`,