fix smooth scroll on key repeated

src/content/actions/operation.js

@@ -8,7 +8,7 @@ import * as addonActions from './addon';
 import * as properties from 'shared/settings/properties';
 
 // eslint-disable-next-line complexity
-const exec = (operation, settings) => {
+const exec = (operation, repeat, settings) => {
   let smoothscroll = settings.properties.smoothscroll ||
     properties.defaults.smoothscroll;
   switch (operation.type) {
@@ -27,19 +27,19 @@ const exec = (operation, settings) => {
       type: messages.FIND_PREV,
     }), '*');
   case operations.SCROLL_VERTICALLY:
-    return scrolls.scrollVertically(operation.count, smoothscroll);
+    return scrolls.scrollVertically(operation.count, smoothscroll, repeat);
   case operations.SCROLL_HORIZONALLY:
-    return scrolls.scrollHorizonally(operation.count, smoothscroll);
+    return scrolls.scrollHorizonally(operation.count, smoothscroll, repeat);
   case operations.SCROLL_PAGES:
-    return scrolls.scrollPages(operation.count, smoothscroll);
+    return scrolls.scrollPages(operation.count, smoothscroll, repeat);
   case operations.SCROLL_TOP:
-    return scrolls.scrollTop(smoothscroll);
+    return scrolls.scrollTop(smoothscroll, repeat);
   case operations.SCROLL_BOTTOM:
-    return scrolls.scrollBottom(smoothscroll);
+    return scrolls.scrollBottom(smoothscroll, repeat);
   case operations.SCROLL_HOME:
-    return scrolls.scrollHome(smoothscroll);
+    return scrolls.scrollHome(smoothscroll, repeat);
   case operations.SCROLL_END:
-    return scrolls.scrollEnd(smoothscroll);
+    return scrolls.scrollEnd(smoothscroll, repeat);
   case operations.FOLLOW_START:
     return window.top.postMessage(JSON.stringify({
       type: messages.FOLLOW_START,

src/content/components/common/keymapper.js

@@ -47,7 +47,8 @@ export default class KeymapperComponent {
       return true;
     }
     let operation = keymaps.get(matched[0]);
-    this.store.dispatch(operationActions.exec(operation, state.setting));
+    this.store.dispatch(operationActions.exec(
+      operation, key.repeat, state.setting));
     this.store.dispatch(inputActions.clearKeys());
     return true;
   }

src/content/scrolls.js

@@ -2,6 +2,9 @@ const SCROLL_DELTA_X = 48;
 const SCROLL_DELTA_Y = 48;
 const SMOOTH_SCROLL_DURATION = 150;
 
+// dirty way to store scrolling state on globally
+let scrolling = [false];
+
 const isVisible = (element) => {
   let rect = element.getBoundingClientRect();
   if (rect.width === 0 || rect.height === 0) {
@@ -67,11 +70,23 @@ const scrollTarget = () => {
 };
 
 class SmoothScroller {
-  constructor(element) {
+  constructor(element, repeat) {
     this.element = element;
+    this.repeat = repeat;
+    this.scrolling = scrolling;
+    if (repeat) {
+      this.easing = SmoothScroller.linearEasing;
+    } else {
+      this.easing = SmoothScroller.inOutQuadEasing;
+    }
   }
 
   scroll(x, y) {
+    if (this.scrolling[0]) {
+      return;
+    }
+    scrolling[0] = true;
+
     this.startX = this.element.scrollLeft;
     this.startY = this.element.scrollTop;
 
@@ -99,17 +114,21 @@ class SmoothScroller {
     if (elapsed < SMOOTH_SCROLL_DURATION) {
       window.requestAnimationFrame(this.loop.bind(this));
     } else {
+      scrolling[0] = false;
       this.element.scrollTo(this.targetX, this.targetY);
     }
   }
 
-  // in-out quad easing
-  easing(t) {
+  static inOutQuadEasing(t) {
     if (t < 1) {
       return t * t;
     }
     return -(t - 1) * (t - 1) + 1;
   }
+
+  static linearEasing(t) {
+    return t;
+  }
 }
 
 class RoughtScroller {
@@ -122,61 +141,67 @@ class RoughtScroller {
   }
 }
 
-const scroller = (element, smooth) => {
+const scroller = (element, smooth, repeat) => {
   if (smooth) {
-    return new SmoothScroller(element);
+    return new SmoothScroller(element, repeat);
   }
   return new RoughtScroller(element);
 };
 
-const scrollVertically = (count, smooth) => {
+const scrollVertically = (count, smooth, repeat) => {
   let target = scrollTarget();
   let x = target.scrollLeft;
   let y = target.scrollTop + SCROLL_DELTA_Y * count;
-  scroller(target, smooth).scroll(x, y);
+  if (repeat && smooth) {
+    y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
+  }
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
-const scrollHorizonally = (count, smooth) => {
+const scrollHorizonally = (count, smooth, repeat) => {
   let target = scrollTarget();
   let x = target.scrollLeft + SCROLL_DELTA_X * count;
   let y = target.scrollTop;
-  scroller(target, smooth).scroll(x, y);
+  if (repeat && smooth) {
+    y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
+  }
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
-const scrollPages = (count, smooth) => {
+const scrollPages = (count, smooth, repeat) => {
   let target = scrollTarget();
   let height = target.clientHeight;
   let x = target.scrollLeft;
   let y = target.scrollTop + height * count;
-  scroller(target, smooth).scroll(x, y);
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
-const scrollTop = (smooth) => {
+const scrollTop = (smooth, repeat) => {
   let target = scrollTarget();
   let x = target.scrollLeft;
   let y = 0;
-  scroller(target, smooth).scroll(x, y);
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
-const scrollBottom = (smooth) => {
+const scrollBottom = (smooth, repeat) => {
   let target = scrollTarget();
   let x = target.scrollLeft;
   let y = target.scrollHeight;
-  scroller(target, smooth).scroll(x, y);
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
-const scrollHome = (smooth) => {
+const scrollHome = (smooth, repeat) => {
   let target = scrollTarget();
   let x = 0;
   let y = target.scrollTop;
-  scroller(target, smooth).scroll(x, y);
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
-const scrollEnd = (smooth) => {
+const scrollEnd = (smooth, repeat) => {
   let target = scrollTarget();
   let x = target.scrollWidth;
   let y = target.scrollTop;
-  scroller(target, smooth).scroll(x, y);
+  scroller(target, smooth, repeat).scroll(x, y);
 };
 
 export {

src/shared/utils/keys.js

@@ -18,6 +18,7 @@ const fromKeyboardEvent = (e) => {
 
   return {
     key: modifierdKeyName(e.key),
+    repeat: e.repeat,
     shiftKey: shift,
     ctrlKey: e.ctrlKey,
     altKey: e.altKey,