feat(popup): move commands to submenu

src/injected/content/index.js

@@ -173,15 +173,23 @@ const handlers = {
   },
   RegisterMenu(data) {
     if (IS_TOP) {
-      const [key] = data;
-      menus[key] = data;
+      const [id, cap] = data;
+      let commandMap = menus[id];
+      if (!commandMap) {
+        commandMap = {};
+        menus[id] = commandMap;
+      }
+      commandMap[cap] = 1;
     }
     getPopup();
   },
   UnregisterMenu(data) {
     if (IS_TOP) {
-      const [key] = data;
-      delete menus[key];
+      const [id, cap] = data;
+      const commandMap = menus[id];
+      if (commandMap) {
+        delete menus[cap];
+      }
     }
     getPopup();
   },
@@ -229,7 +237,7 @@ function getPopup() {
   if (IS_TOP) {
     sendMessage({
       cmd: 'SetPopup',
-      data: { ids, menus: Object.values(menus) },
+      data: { ids, menus },
     });
   }
 }

src/injected/web/index.js

@@ -317,7 +317,7 @@ function wrapGM(script, code, cache, unsafeWindow) {
         const { id } = script.props;
         const key = `${id}:${cap}`;
         store.commands[key] = func;
-        bridge.post({ cmd: 'RegisterMenu', data: [key, cap] });
+        bridge.post({ cmd: 'RegisterMenu', data: [id, cap] });
       },
     },
     GM_unregisterMenuCommand: {
@@ -325,7 +325,7 @@ function wrapGM(script, code, cache, unsafeWindow) {
         const { id } = script.props;
         const key = `${id}:${cap}`;
         delete store.commands[key];
-        bridge.post({ cmd: 'UnregisterMenu', data: [key, cap] });
+        bridge.post({ cmd: 'UnregisterMenu', data: [id, cap] });
       },
     },
     GM_xmlhttpRequest: {

src/popup/index.js

@@ -20,7 +20,12 @@ new Vue({
 Object.assign(handlers, {
   SetPopup(data, src) {
     if (store.currentTab.id !== src.tab.id) return;
-    store.commands = data.menus;
+    const { menus } = data;
+    store.commands = Object.entries(menus)
+    .reduce((map, [id, values]) => {
+      map[id] = Object.keys(values).sort();
+      return map;
+    }, {});
     sendMessage({
       cmd: 'GetMetas',
       data: data.ids,

src/popup/style.css

@@ -1,5 +1,5 @@
 body {
-  width: 30rem;
+  width: 24rem;
   max-width: 100%;
   background: #f8f8f8;
 }
@@ -86,9 +86,6 @@ footer {
       margin-right: 1rem;
     }
     > .flex-auto {
-      &:first-child {
-        padding-left: 1rem;
-      }
       &:last-child {
         padding-right: 1rem;
       }
@@ -111,8 +108,8 @@ footer {
 .submenu {
   display: none;
   min-height: 4rem;
-  max-height: 16rem;
-  margin-left: 2rem;
+  max-height: 30rem;
+  margin-left: 1rem;
   overflow-y: auto;
   background: white;
   border-top: 1px dashed #ddd;
@@ -121,6 +118,9 @@ footer {
     &:not(:hover) > .submenu-buttons {
       visibility: hidden;
     }
+    .menu-item {
+      padding-left: 0;
+    }
   }
   &-buttons {
     display: flex;
@@ -140,6 +140,16 @@ footer {
       display: block;
     }
   }
+  &-commands {
+    font-size: .8rem;
+    color: #333;
+    > .menu-item {
+      padding-left: 2rem;
+      > .icon {
+        margin-right: .5rem;
+      }
+    }
+  }
 }
 
 .message {

src/popup/views/app.vue

@@ -41,24 +41,6 @@
         <div class="flex-1" v-text="i18n('menuFindScripts')"></div>
       </div>
     </div>
-    <div
-      class="menu menu-commands"
-      v-show="commands.length"
-      :class="{expand: activeMenu === 'commands'}">
-      <div class="menu-item menu-area" @click="toggleMenu('commands')">
-        <div class="flex-auto" v-text="i18n('menuCommands')"></div>
-        <icon name="arrow" class="icon-collapse"></icon>
-      </div>
-      <div class="submenu">
-        <div
-          v-for="(item, index) in commands"
-          :key="index"
-          class="menu-item menu-area"
-          @click="onCommand(item)">
-          <span v-text="item.name"></span>
-        </div>
-      </div>
-    </div>
     <div
       v-show="scripts.length"
       class="menu menu-scripts"
@@ -85,6 +67,18 @@
               <icon name="code"></icon>
             </div>
           </div>
+          <div class="submenu-commands">
+            <div
+              class="menu-item menu-area"
+              v-for="(cap, i) in store.commands[item.data.props.id]"
+              :key="i"
+              @click="onCommand(item.data.props.id, cap)"
+              @mouseenter="message = cap"
+              @mouseleave="message = item.name">
+              <icon name="command" />
+              {{cap}}
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -127,15 +121,6 @@ export default {
     };
   },
   computed: {
-    commands() {
-      return this.store.commands.map((item) => {
-        const [key, name] = item;
-        return {
-          name,
-          key,
-        };
-      });
-    },
     scripts() {
       return this.store.scripts.map(script => ({
         name: script.custom.name || getLocaleString(script.meta, 'name'),
@@ -175,10 +160,10 @@ export default {
         url: `https://greasyfork.org/scripts/by-site/${encodeURIComponent(this.store.domain)}`,
       });
     },
-    onCommand(item) {
+    onCommand(id, cap) {
       browser.tabs.sendMessage(this.store.currentTab.id, {
         cmd: 'Command',
-        data: item.key,
+        data: `${id}:${cap}`,
       });
     },
     onToggleScript(item) {

src/resources/svg/command.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M768 85.34q70.676 0 120.668 49.992T938.66 256t-49.992 120.668T768 426.66h-85.34v170.66H768q70.676 0 120.668 49.991T938.66 767.98t-49.992 120.668T768 938.639t-120.668-49.991T597.34 767.98v-85.34H426.68v85.34q0 70.676-49.991 120.668T256.02 938.639t-120.668-49.991T85.361 767.98t49.991-120.669T256.02 597.32h85.34V426.66h-85.34q-70.676 0-120.668-49.992T85.361 256t49.991-120.668T256.02 85.34t120.669 49.992T426.68 256v85.34h170.66V256q0-70.676 49.992-120.668T768 85.34zM341.34 768v-85.34H256q-35.328 0-60.334 25.006T170.66 768t25.006 60.334T256 853.34t60.334-25.006T341.34 768zM256 170.66q-35.328 0-60.334 25.006T170.66 256t25.006 60.334T256 341.34h85.34V256q0-35.328-25.006-60.334T256 170.66zm341.34 426.68V426.68H426.68v170.66h170.66zM768 682.66h-85.34V768q0 35.328 25.006 60.334T768 853.34t60.334-25.006T853.34 768t-25.006-60.334T768 682.66zm0-512q-35.328 0-60.334 25.006T682.66 256v85.34H768q35.328 0 60.334-25.006T853.34 256t-25.006-60.334T768 170.66z"/></svg>

src/resources/svg/filter.svg

@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M66.857 0h890.286c53.257 0 83.215 61.252 50.52 103.292L640 576v420.386c0 12.687-13.353 20.939-24.7 15.264L401.687 904.845a32 32 0 0 1-17.69-28.621V576L16.34 103.292C-16.358 61.252 13.6 0 66.857 0z"/></svg>
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M66.857 0h890.286c53.257 0 83.215 61.252 50.52 103.292L640 576v420.386c0 12.687-13.353 20.939-24.7 15.264L401.687 904.845a32 32 0 01-17.69-28.621V576L16.34 103.292C-16.358 61.252 13.6 0 66.857 0z"/></svg>

src/resources/svg/home.svg

@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M937.772 573.35H880.4c-25.349 0-45.898 20.615-45.898 46.047v310.822c0 19.075-15.413 34.534-34.423 34.534H616.488c-19.01 0-34.423-15.46-34.423-34.534V711.491H444.373V930.22c0 19.075-15.412 34.534-34.425 34.534H226.356c-19.01 0-34.42-15.46-34.42-34.534V619.396c0-25.431-20.55-46.048-45.899-46.048H88.665c-19.013 0-34.425-15.463-34.425-34.535 0-4.899 1.075-9.521 2.909-13.743a34.458 34.458 0 0 1 7.603-11.546L477.57 76.64c9.657-9.68 23.552-12.133 35.649-7.95 12.096-4.183 25.992-1.73 35.649 7.95l412.816 436.884a34.495 34.495 0 0 1 7.605 11.546c1.834 4.22 2.906 8.844 2.906 13.743 0 19.072-15.412 34.535-34.423 34.535z"/></svg>
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M937.772 573.35H880.4c-25.349 0-45.898 20.615-45.898 46.047v310.822c0 19.075-15.413 34.534-34.423 34.534H616.488c-19.01 0-34.423-15.46-34.423-34.534V711.491H444.373V930.22c0 19.075-15.412 34.534-34.425 34.534H226.356c-19.01 0-34.42-15.46-34.42-34.534V619.396c0-25.431-20.55-46.048-45.899-46.048H88.665c-19.013 0-34.425-15.463-34.425-34.535 0-4.899 1.075-9.521 2.909-13.743a34.458 34.458 0 017.603-11.546L477.57 76.64c9.657-9.68 23.552-12.133 35.649-7.95 12.096-4.183 25.992-1.73 35.649 7.95l412.816 436.884a34.495 34.495 0 017.605 11.546c1.834 4.22 2.906 8.844 2.906 13.743 0 19.072-15.412 34.535-34.423 34.535z"/></svg>

src/resources/svg/search.svg

@@ -1 +1 @@
-<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M195.138 171.55l-47.85-47.863c-.55-.562-1.175-.974-1.763-1.437 8.088-12.412 12.8-27.187 12.8-43.1 0-43.725-35.437-79.175-79.162-79.175C35.45-.012 0 35.438 0 79.163s35.463 79.162 79.163 79.162c15.912 0 30.7-4.725 43.125-12.812.45.587.875 1.187 1.412 1.75l47.863 47.875a16.65 16.65 0 0 0 11.787 4.875 16.65 16.65 0 0 0 11.788-4.875c6.487-6.513 6.487-17.075 0-23.588M79.163 133.325C49.3 133.325 25 109.025 25 79.163s24.313-54.175 54.163-54.175c29.862 0 54.162 24.312 54.162 54.175s-24.3 54.162-54.162 54.162"/></svg>
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M195.138 171.55l-47.85-47.863c-.55-.562-1.175-.974-1.763-1.437 8.088-12.412 12.8-27.187 12.8-43.1 0-43.725-35.437-79.175-79.162-79.175C35.45-.012 0 35.438 0 79.163s35.463 79.162 79.163 79.162c15.912 0 30.7-4.725 43.125-12.812.45.587.875 1.187 1.412 1.75l47.863 47.875a16.65 16.65 0 0011.787 4.875 16.65 16.65 0 0011.788-4.875c6.487-6.513 6.487-17.075 0-23.588M79.163 133.325C49.3 133.325 25 109.025 25 79.163s24.313-54.175 54.163-54.175c29.862 0 54.162 24.312 54.162 54.175s-24.3 54.162-54.162 54.162"/></svg>

src/resources/svg/undo.svg

@@ -1 +1 @@
-<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M596.677 248.123c204.8 0 372.185 165.415 372.185 372.185S801.477 992.492 596.677 992.492H435.2c-15.754 0-25.6-11.815-25.6-27.569v-63.015c0-15.754 11.815-29.539 27.57-29.539h159.507c139.815 0 252.061-112.246 252.061-252.061S736.492 368.246 596.677 368.246H322.954s-15.754 0-21.662 1.97c-15.754 7.876-11.815 19.692 1.97 33.476l96.492 96.493c11.815 11.815 9.846 29.538-1.97 41.353l-43.322 43.324c-11.816 11.815-25.6 11.815-37.416 1.969l-256-256a24.96 24.96 0 0 1 0-35.446l254.03-254.031c11.816-11.816 31.509-11.816 41.355 0l41.354 41.354c11.815 11.815 11.815 31.507 0 41.354l-96.493 96.492c-11.815 11.815-11.815 25.6 7.877 25.6h13.785l273.723 1.97z"/></svg>
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M596.677 248.123c204.8 0 372.185 165.415 372.185 372.185S801.477 992.492 596.677 992.492H435.2c-15.754 0-25.6-11.815-25.6-27.569v-63.015c0-15.754 11.815-29.539 27.57-29.539h159.507c139.815 0 252.061-112.246 252.061-252.061S736.492 368.246 596.677 368.246H322.954s-15.754 0-21.662 1.97c-15.754 7.876-11.815 19.692 1.97 33.476l96.492 96.493c11.815 11.815 9.846 29.538-1.97 41.353l-43.322 43.324c-11.816 11.815-25.6 11.815-37.416 1.969l-256-256a24.96 24.96 0 010-35.446l254.03-254.031c11.816-11.816 31.509-11.816 41.355 0l41.354 41.354c11.815 11.815 11.815 31.507 0 41.354l-96.493 96.492c-11.815 11.815-11.815 25.6 7.877 25.6h13.785l273.723 1.97z"/></svg>