fix: enable scrolling via Home/End/PgUp/PgDn on load

src/common/ui/index.js

@@ -49,3 +49,11 @@ export function showConfirmation(text, { ok, cancel, input = false } = {}) {
     });
   });
 }
+
+/** Focus the first tabindex=-1 element or root, to enable scrolling via Home/End/PgUp/PgDn */
+export function focusMe() {
+  setTimeout(() => {
+    const el = this.$el;
+    (el.querySelector('[tabindex="-1"]') || (el.tabIndex = -1, el)).focus();
+  });
+}

src/options/views/tab-about.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-
+import { focusMe } from '@/common/ui';
 
 export default {
   data() {
@@ -37,6 +37,7 @@ export default {
       language: browser.i18n.getUILanguage(),
     };
   },
+  activated: focusMe,
 };
 </script>
 

src/options/views/tab-installed.vue

@@ -109,6 +109,7 @@
       </div>
       <div class="scripts flex-auto"
            ref="scriptList"
+           tabindex="-1"
            :style="`--num-columns:${numColumns}`"
            :data-columns="numColumns"
            :data-show-order="filters.showOrder"
@@ -142,7 +143,7 @@ import Dropdown from 'vueleton/lib/dropdown/bundle';
 import Tooltip from 'vueleton/lib/tooltip/bundle';
 import { i18n, sendCmdDirectly, debounce, makePause } from '@/common';
 import options from '@/common/options';
-import { showConfirmation, showMessage } from '@/common/ui';
+import { focusMe, showConfirmation, showMessage } from '@/common/ui';
 import SettingCheck from '@/common/ui/setting-check';
 import hookSetting from '@/common/hook-setting';
 import Icon from '@/common/ui/icon';
@@ -542,6 +543,7 @@ export default {
       });
     },
   },
+  activated: focusMe,
   created() {
     this.debouncedUpdate = debounce(this.onUpdate, 100);
     this.debouncedRender = debounce(this.renderScripts);

src/options/views/tab-settings/index.vue

@@ -139,6 +139,7 @@ import { forEachEntry, mapEntry } from '@/common/object';
 import options from '@/common/options';
 import optionsDefaults from '@/common/options-defaults';
 import hookSetting from '@/common/hook-setting';
+import { focusMe } from '@/common/ui';
 import LocaleGroup from '@/common/ui/locale-group';
 import loadZip from '@/common/zip';
 import VmImport from './vm-import';
@@ -252,6 +253,7 @@ export default {
       });
     },
   },
+  activated: focusMe,
   created() {
     this.revokers = [];
     items::forEachEntry(([name, { normalize = normalizeEnum }]) => {

src/popup/views/app.vue

@@ -75,7 +75,7 @@
         <icon name="arrow" class="icon-collapse"></icon>
         <div class="flex-auto" v-text="scope.title" :data-totals="scope.totals" />
       </div>
-      <div class="submenu">
+      <div class="submenu" ref="scriptList" tabindex="-1" autofocus>
         <div
           v-for="(item, index) in scope.list"
           :key="index"
@@ -196,6 +196,7 @@ import {
   i18n, makePause, sendCmd, sendTabCmd,
 } from '@/common';
 import { objectPick } from '@/common/object';
+import { focusMe } from '@/common/ui';
 import Icon from '@/common/ui/icon';
 import { keyboardService, isInput } from '@/common/keyboard';
 import { mutex, store } from '../utils';
@@ -502,6 +503,8 @@ export default {
     },
   },
   mounted() {
+    // Enable scrolling via Home/End/PgUp/PgDn
+    this::focusMe();
     keyboardService.enable();
     this.disposeList = [
       keyboardService.register('escape', () => {