feat: toggle tooltips with `?` key

package.json

@@ -67,7 +67,7 @@
     "core-js": "^3.6.4",
     "tldjs": "^2.3.1",
     "vue": "^2.6.11",
-    "vueleton": "^1.0.4"
+    "vueleton": "^1.0.6"
   },
   "engines": {
     "node": ">=10"

src/common/keyboard.js

@@ -19,6 +19,11 @@ function handleFocus(e) {
 function handleBlur(e) {
   if (isInput(e.target)) {
     keyboardService.setContext('inputFocus', false);
+  } else {
+    const event = new CustomEvent('tiphide', {
+      bubbles: true,
+    });
+    e.target.dispatchEvent(event);
   }
 }
 
@@ -26,6 +31,13 @@ function handleEscape() {
   document.activeElement.blur();
 }
 
+export function toggleTip(el) {
+  const event = new CustomEvent('tiptoggle', {
+    bubbles: true,
+  });
+  el.dispatchEvent(event);
+}
+
 function bindKeys() {
   document.addEventListener('focus', handleFocus, true);
   document.addEventListener('blur', handleBlur, true);
@@ -37,4 +49,10 @@ function bindKeys() {
   }, {
     condition: '!inputFocus',
   });
+  keyboardService.register('?', () => {
+    toggleTip(document.activeElement);
+  }, {
+    condition: '!inputFocus',
+    caseSensitive: true,
+  });
 }

src/options/views/script-item.vue

@@ -80,7 +80,7 @@
               class="btn-ghost"
               @click="onUpdate"
               :data-hotkey="hotkeys.update"
-              :tabIndex="tabIndex">
+              :tabIndex="canUpdate ? tabIndex : -1">
               <icon name="refresh"></icon>
             </a>
           </tooltip>
@@ -91,12 +91,12 @@
               target="_blank"
               rel="noopener noreferrer"
               :href="homepageURL"
-              :tabIndex="tabIndex">
+              :tabIndex="homepageURL ? tabIndex : -1">
               <icon name="home"></icon>
             </a>
           </tooltip>
           <tooltip :disabled="!description" :content="description" align="start">
-            <a class="btn-ghost" :tabIndex="tabIndex">
+            <a class="btn-ghost" :tabIndex="description ? tabIndex : -1" @click="toggleTip">
               <icon name="info"></icon>
             </a>
           </tooltip>
@@ -108,7 +108,7 @@
               class="btn-ghost"
               target="_blank"
               rel="noopener noreferrer"
-              :tabIndex="tabIndex"
+              :tabIndex="script.meta.supportURL ? tabIndex : -1"
               :href="script.meta.supportURL">
               <icon name="question"></icon>
             </a>
@@ -129,7 +129,7 @@
 import Tooltip from 'vueleton/lib/tooltip/bundle';
 import { getLocaleString, formatTime } from '#/common';
 import Icon from '#/common/ui/icon';
-import { keyboardService, isInput } from '#/common/keyboard';
+import { keyboardService, isInput, toggleTip } from '#/common/keyboard';
 import enableDragging from '../utils/dragging';
 
 const itemMargin = 8;
@@ -219,15 +219,18 @@ export default {
         const rect = $el.getBoundingClientRect();
         const pRect = $el.parentNode.getBoundingClientRect();
         let delta = 0;
-        if (rect.bottom > pRect.bottom) {
+        if (rect.bottom > pRect.bottom - itemMargin) {
           delta += rect.bottom - pRect.bottom + itemMargin;
-        } else if (rect.top < pRect.top) {
+        } else if (rect.top < pRect.top + itemMargin) {
           delta -= pRect.top - rect.top + itemMargin;
         }
+        if (!isInput(document.activeElement)) {
+          // focus without scrolling, then scroll smoothly
+          const { scrollTop } = $el.parentNode;
+          $el.focus();
+          $el.parentNode.scrollTop = scrollTop;
+        }
         this.$emit('scrollDelta', delta);
-        this.$nextTick(() => {
-          if (!isInput(document.activeElement)) $el.focus();
-        });
       }
     },
   },
@@ -258,6 +261,9 @@ export default {
     onBlur() {
       keyboardService.setContext('scriptFocus', false);
     },
+    toggleTip(e) {
+      toggleTip(e.target);
+    },
   },
 };
 </script>

src/options/views/tab-installed.vue

@@ -128,7 +128,7 @@
             @update="handleActionUpdate"
             @move="moveScript"
             @scrollDelta="handleSmoothScroll"
-            @toggleHint="showHotkeys = !showHotkeys"
+            @tiptoggle.native="showHotkeys = !showHotkeys"
           />
         </div>
         <div
@@ -538,6 +538,7 @@ export default {
       sendCmd('CheckUpdate', script.props.id);
     },
     handleSmoothScroll(delta) {
+      if (!delta) return;
       const el = this.$refs.scriptList;
       el.scroll({
         top: el.scrollTop + delta,
@@ -578,7 +579,6 @@ export default {
         if (this.selectedScript) this.showHotkeys = !this.showHotkeys;
       }, [
         ['enter', `${conditionAll} && scriptFocus`],
-        ['?', conditionNotSearch, true],
       ]),
       ...registerHotkey(() => {
         this.showHotkeys = false;

yarn.lock

@@ -877,13 +877,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.4":
-  version "7.10.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99"
-  integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime@^7.13.10":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
@@ -10568,12 +10561,12 @@ vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
-vueleton@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/vueleton/-/vueleton-1.0.5.tgz#2ddee43a510c1cb1127c2758e9ea1cb81806f4fb"
-  integrity sha512-pKkJOZQEK8+Jl05b6KAA37V04JsdtdW6OYge+F8uvp3C4UKmjJr3zD4ikLpluiIm69MSCkqcBSZF/svHRlVLyA==
+vueleton@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/vueleton/-/vueleton-1.0.6.tgz#ddd7d11b47170d410b450708f2668770d0182534"
+  integrity sha512-AcFBFS7/Mz0IVh59TMUMO+uWkLvyVgamYkFWJugEK2XnGYpX32kSZ+UQ2iEQAL2HoUUZ9Q74pNS1pVzzg3OtUA==
   dependencies:
-    "@babel/runtime" "^7.10.4"
+    "@babel/runtime" "^7.13.10"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"