feat: switch between tabs with cmd/ctrl+[1-9]

known issues: some apps will catch the shortcuts and will prevent the functionality

package.json

@@ -26,7 +26,6 @@
     "postuninstall": "electron-builder install-app-deps"
   },
   "dependencies": {
-    "electron-localshortcut": "^3.1.0",
     "electron-window-state": "^5.0.3",
     "is-url-relative-without-domain": "^2.0.0",
     "lodash-id": "^0.14.0",

src/background.js

@@ -1,4 +1,3 @@
-import electronLocalshortcut from 'electron-localshortcut';
 import windowStateKeeper from 'electron-window-state';
 import * as path from 'path';
 import { format as formatUrl } from 'url';
@@ -115,8 +114,6 @@ app.on('ready', async () => {
   }
   mainWindow = createMainWindow();
 
-  electronLocalshortcut.register('CmdOrCtrl+T', () => app.emit('app-router-goto-tabs-create'));
-
   Menu.setApplicationMenu(Menu.buildFromTemplate([
     {
       label: app.getName(),
@@ -131,16 +128,6 @@ app.on('ready', async () => {
         { role: 'quit' },
       ],
     },
-    {
-      label: 'File',
-      submenu: [
-        {
-          label: 'New Tab',
-          accelerator: 'CmdOrCtrl+N',
-          click: () => app.emit('app-router-goto-tabs-create'),
-        },
-      ],
-    },
     {
       label: 'Edit',
       submenu: [
@@ -154,6 +141,38 @@ app.on('ready', async () => {
         { role: 'selectAll' },
       ],
     },
+    {
+      label: 'Tabs',
+      submenu: [
+        { label: 'New Tab', accelerator: 'CmdOrCtrl+N', click: () => app.emit('app-router-goto-tabs-create') },
+        { type: 'separator' },
+        { label: 'Show tab 1', accelerator: 'CmdOrCtrl+1', click: () => app.emit('app-router-goto-tab-list-index', 1) },
+        { label: 'Show tab 2', accelerator: 'CmdOrCtrl+2', click: () => app.emit('app-router-goto-tab-list-index', 2) },
+        { label: 'Show tab 3', accelerator: 'CmdOrCtrl+3', click: () => app.emit('app-router-goto-tab-list-index', 3) },
+        { label: 'Show tab 4', accelerator: 'CmdOrCtrl+4', click: () => app.emit('app-router-goto-tab-list-index', 4) },
+        { label: 'Show tab 5', accelerator: 'CmdOrCtrl+5', click: () => app.emit('app-router-goto-tab-list-index', 5) },
+        { label: 'Show tab 6', accelerator: 'CmdOrCtrl+6', click: () => app.emit('app-router-goto-tab-list-index', 6) },
+        { label: 'Show tab 7', accelerator: 'CmdOrCtrl+7', click: () => app.emit('app-router-goto-tab-list-index', 7) },
+        { label: 'Show tab 8', accelerator: 'CmdOrCtrl+8', click: () => app.emit('app-router-goto-tab-list-index', 8) },
+        { label: 'Show tab 9', accelerator: 'CmdOrCtrl+9', click: () => app.emit('app-router-goto-tab-list-index', 9) },
+        {
+          label: 'Alternatives',
+          submenu: [
+            { label: 'New Tab', accelerator: 'CmdOrCtrl+T', click: () => app.emit('app-router-goto-tabs-create') },
+            { type: 'separator' },
+            { label: 'Show tab 1', accelerator: 'CmdOrCtrl+num1', click: () => app.emit('app-router-goto-tab-list-index', 1) },
+            { label: 'Show tab 2', accelerator: 'CmdOrCtrl+num2', click: () => app.emit('app-router-goto-tab-list-index', 2) },
+            { label: 'Show tab 3', accelerator: 'CmdOrCtrl+num3', click: () => app.emit('app-router-goto-tab-list-index', 3) },
+            { label: 'Show tab 4', accelerator: 'CmdOrCtrl+num4', click: () => app.emit('app-router-goto-tab-list-index', 4) },
+            { label: 'Show tab 5', accelerator: 'CmdOrCtrl+num5', click: () => app.emit('app-router-goto-tab-list-index', 5) },
+            { label: 'Show tab 6', accelerator: 'CmdOrCtrl+num6', click: () => app.emit('app-router-goto-tab-list-index', 6) },
+            { label: 'Show tab 7', accelerator: 'CmdOrCtrl+num7', click: () => app.emit('app-router-goto-tab-list-index', 7) },
+            { label: 'Show tab 8', accelerator: 'CmdOrCtrl+num8', click: () => app.emit('app-router-goto-tab-list-index', 8) },
+            { label: 'Show tab 9', accelerator: 'CmdOrCtrl+num9', click: () => app.emit('app-router-goto-tab-list-index', 9) },
+          ],
+        },
+      ],
+    },
   ]));
 
   const settingsMenu = Menu.buildFromTemplate([

src/components/TabMain.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    v-show="isActive"
+    v-show="tab.isActive"
     :class="$style.wrap"
   >
     <tab-header
-      v-if="isActive"
+      v-if="tab.isActive"
       :item="item"
       :can-go-back="webviewData.canGoBack"
       :can-go-forward="webviewData.canGoForward"
@@ -18,7 +18,7 @@
     <tab-webview
       ref="webview"
       :item="item"
-      :is-active="isActive"
+      :is-active="tab.isActive"
     />
   </div>
 </template>
@@ -45,19 +45,26 @@ export default {
     };
   },
   computed: {
-    isActive() {
-      const { params, name } = this.$route;
-      return params.id === this.item.id && name === 'tabs';
+    tab() {
+      const { params, name, query } = this.$route;
+
+      return {
+        isActive: params.id === this.item.id && name === 'tabs',
+        addFocus: !query.doNotFocusWebview,
+        id: params.id,
+      };
     },
   },
   watch: {
-    isActive(isActive) {
-      if (isActive) {
-        this.$store.commit('Pages/setState', {
-          tabId: this.item.id,
-          data: { hasNotificationBadge: false },
-        });
+    tab(value) {
+      if (!value.isActive) return;
+
+      this.$store.commit('Pages/setState', {
+        tabId: value.id,
+        data: { hasNotificationBadge: false },
+      });
 
+      if (value.addFocus) {
         this.webviewEl.focus();
       }
     },

src/utils/mixinEvents.js

@@ -1,11 +1,30 @@
 export default {
+  computed: {
+    tabListSorted() {
+      return this.$store.getters['Tabs/listSorted'];
+    },
+  },
   created() {
     const { app } = this.$electron.remote;
     const r = this.$router;
 
     app.on('app-router-goto-tabs-create', () => r.push({ name: 'tabs-create' }));
+    app.on('app-router-goto-tab-list-index', index => this.goToTabWithListIndex(index));
     app.on('app-router-goto-settings', () => r.push({ name: 'settings' }));
     app.on('app-router-goto-welcome', () => r.push({ name: 'welcome' }));
     app.on('app-router-goto-changelog', () => r.push({ name: 'changelog' }));
   },
+  methods: {
+    goToTabWithListIndex(index) {
+      const tab = this.tabListSorted[index - 1];
+
+      if (tab) {
+        this.$router.push({
+          name: 'tabs',
+          params: { id: tab.id },
+          query: { doNotFocusWebview: true },
+        });
+      }
+    },
+  },
 };