Make arrows configurable via API

src/browser/scrollable/horizontalScrollbar.ts

@@ -17,7 +17,7 @@ export class HorizontalScrollbar extends AbstractScrollbar {
       lazyRender: options.lazyRender,
       host: host,
       scrollbarState: new ScrollbarState(
-        (options.horizontalHasArrows ? options.arrowSize : 0),
+        (options.horizontalHasArrows ? options.horizontalScrollbarSize : 0),
         (options.horizontal === ScrollbarVisibility.HIDDEN ? 0 : options.horizontalScrollbarSize),
         (options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize),
         scrollDimensions.width,

src/browser/scrollable/scrollableElement.ts

@@ -572,7 +572,6 @@ function resolveOptions(opts: IScrollableElementCreationOptions): IScrollableEle
     fastScrollSensitivity: (typeof opts.fastScrollSensitivity !== 'undefined' ? opts.fastScrollSensitivity : 5),
     scrollPredominantAxis: (typeof opts.scrollPredominantAxis !== 'undefined' ? opts.scrollPredominantAxis : true),
     mouseWheelSmoothScroll: (typeof opts.mouseWheelSmoothScroll !== 'undefined' ? opts.mouseWheelSmoothScroll : true),
-    arrowSize: (typeof opts.arrowSize !== 'undefined' ? opts.arrowSize : 11),
 
     listenOnDomNode: (typeof opts.listenOnDomNode !== 'undefined' ? opts.listenOnDomNode : null),
 

src/browser/scrollable/scrollableElementOptions.ts

@@ -67,11 +67,6 @@ export interface IScrollableElementCreationOptions {
    * Defaults to true.
    */
   scrollPredominantAxis?: boolean;
-  /**
-   * Height for vertical arrows (top/bottom) and width for horizontal arrows (left/right).
-   * Defaults to 11.
-   */
-  arrowSize?: number;
   /**
    * The dom node events should be bound to.
    * If no listenOnDomNode is provided, the constructor dom node is used.
@@ -151,7 +146,6 @@ export interface IScrollableElementResolvedOptions {
   fastScrollSensitivity: number;
   scrollPredominantAxis: boolean;
   mouseWheelSmoothScroll: boolean;
-  arrowSize: number;
   listenOnDomNode: HTMLElement | null;
   horizontal: ScrollbarVisibility;
   horizontalScrollbarSize: number;

src/browser/scrollable/scrollbarArrow.ts

@@ -8,11 +8,6 @@ import { Widget } from './widget';
 import { TimeoutTimer } from 'common/Async';
 import * as dom from '../Dom';
 
-/**
- * The arrow image size.
- */
-const ARROW_IMG_SIZE = 11;
-
 export interface IScrollbarArrowOptions {
   handleActivate: () => void;
   className: string;
@@ -63,8 +58,9 @@ export class ScrollbarArrow extends Widget {
     // this.domNode.classList.add(...ThemeIcon.asClassNameArray(opts.icon));
 
     this.domNode.style.position = 'absolute';
-    this.domNode.style.width = ARROW_IMG_SIZE + 'px';
-    this.domNode.style.height = ARROW_IMG_SIZE + 'px';
+    const arrowSize = Math.min(opts.bgWidth, opts.bgHeight);
+    this.domNode.style.width = arrowSize + 'px';
+    this.domNode.style.height = arrowSize + 'px';
     if (typeof opts.top !== 'undefined') {
       this.domNode.style.top = opts.top + 'px';
     }

src/browser/scrollable/verticalScrollbar.ts

@@ -17,7 +17,7 @@ export class VerticalScrollbar extends AbstractScrollbar {
       lazyRender: options.lazyRender,
       host: host,
       scrollbarState: new ScrollbarState(
-        (options.verticalHasArrows ? options.arrowSize : 0),
+        (options.verticalHasArrows ? options.verticalScrollbarSize : 0),
         (options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize),
         0,
         scrollDimensions.height,
@@ -31,7 +31,24 @@ export class VerticalScrollbar extends AbstractScrollbar {
     });
 
     if (options.verticalHasArrows) {
-      throw new Error('horizontalHasArrows is not supported in xterm.js');
+      const arrowSize = options.verticalScrollbarSize;
+      const arrowDelta = 0;
+      this._createArrow({
+        className: 'scra xterm-arrow-up',
+        top: arrowDelta,
+        left: arrowDelta,
+        bgWidth: options.verticalScrollbarSize,
+        bgHeight: arrowSize,
+        handleActivate: () => this._arrowScroll(-arrowSize)
+      });
+      this._createArrow({
+        className: 'scra xterm-arrow-down',
+        bottom: arrowDelta,
+        left: arrowDelta,
+        bgWidth: options.verticalScrollbarSize,
+        bgHeight: arrowSize,
+        handleActivate: () => this._arrowScroll(arrowSize)
+      });
     }
 
     this._createSlider(0, Math.floor((options.verticalScrollbarSize - options.verticalSliderSize) / 2), options.verticalSliderSize, undefined);
@@ -76,6 +93,11 @@ export class VerticalScrollbar extends AbstractScrollbar {
     target.scrollTop = scrollPosition;
   }
 
+  private _arrowScroll(delta: number): void {
+    const currentPosition = this._scrollable.getCurrentScrollPosition();
+    this._scrollable.setScrollPositionNow({ scrollTop: currentPosition.scrollTop + delta });
+  }
+
   public updateOptions(options: IScrollableElementResolvedOptions): void {
     this.updateScrollbarSize(options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize);
     this._scrollbarState.setOppositeScrollbarSize(0);