scroll -> overviewRuler

demo/client.ts

@@ -151,7 +151,7 @@ if (document.location.pathname === '/test') {
   document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
   document.getElementById('load-test').addEventListener('click', loadTest);
   document.getElementById('add-decoration').addEventListener('click', addDecoration);
-  document.getElementById('add-scrollbar-decoration').addEventListener('click', addScrollbarDecoration);
+  document.getElementById('add-overview-ruler').addEventListener('click', addOverviewRuler);
 }
 
 function createTerminal(): void {
@@ -552,10 +552,10 @@ function addDecoration() {
   });
 }
 
-function addScrollbarDecoration() {
-  const scrollbarDecorationCanvas = term.registerDecoration({marker: term.addMarker(1), scrollbarDecorationColor: 'red'});
-  scrollbarDecorationCanvas.element!.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`;
-  term.registerDecoration({marker: term.addMarker(3), scrollbarDecorationColor: 'green'});
-  term.registerDecoration({marker: term.addMarker(5), scrollbarDecorationColor: 'blue'});
+function addOverviewRuler() {
+  const canvas = term.registerDecoration({marker: term.addMarker(1), overviewRulerItemColor: 'red'});
+  canvas.element!.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`;
+  term.registerDecoration({marker: term.addMarker(3), overviewRulerItemColor: 'green'});
+  term.registerDecoration({marker: term.addMarker(5), overviewRulerItemColor: 'blue'});
 } 
 

demo/index.html

@@ -69,7 +69,7 @@
             <button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
             <button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button>
             <button id="add-decoration" title="Add a decoration to the terminal">Decoration</button>
-            <button id="add-scrollbar-decoration" title="Add a scrollbar decoration to the terminal">Add Scrollbar Decoration</button>
+            <button id="add-overview-ruler" title="Add an overview ruler to the terminal">Add Overview Ruler</button>
           </div>
         </div>
       </div>

src/browser/services/DecorationService.ts

@@ -22,11 +22,11 @@ export class DecorationService extends Disposable implements IDecorationService
   private _screenElement: HTMLElement | undefined;
   private _viewportElement: HTMLElement | undefined;
   private _bufferDecorationContainer: HTMLElement | undefined;
-  private _scrollbarDecorationCanvas: CanvasRenderingContext2D | null = null;
-  private _scrollbarDecorationNode: HTMLCanvasElement | undefined;
+  private _overviewRulerCtx: CanvasRenderingContext2D | null = null;
+  private _overviewRulerCanvas: HTMLCanvasElement | undefined;
 
   private readonly _bufferDecorations: BufferDecoration[] = [];
-  private _scrollbarDecorations: ScrollbarDecoration[] = [];
+  private _overviewRulerDecorations: ScrollbarDecoration[] = [];
 
   constructor(@IInstantiationService private readonly _instantiationService: IInstantiationService, @IBufferService private readonly _bufferService: IBufferService) { super(); }
 
@@ -39,7 +39,7 @@ export class DecorationService extends Disposable implements IDecorationService
     this.register(this._renderService.onDimensionsChange(() => this._refresh(true)));
     this.register(addDisposableDomListener(window, 'resize', () => this._refreshScollbarDecorations()));
     this.register(this._bufferService.buffers.onBufferActivate(() => {
-      this._scrollbarDecorationNode!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
+      this._overviewRulerCanvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
     }));
   }
 
@@ -47,8 +47,8 @@ export class DecorationService extends Disposable implements IDecorationService
     if (decorationOptions.marker.isDisposed) {
       return undefined;
     }
-    if (decorationOptions.scrollbarDecorationColor) {
-      return this._registerScrollbarDecoration(decorationOptions.marker, decorationOptions.scrollbarDecorationColor);
+    if (decorationOptions.overviewRulerItemColor) {
+      return this._registerScrollbarDecoration(decorationOptions.marker, decorationOptions.overviewRulerItemColor);
     }
     return this._registerBufferDecoration(decorationOptions);
   }
@@ -57,14 +57,14 @@ export class DecorationService extends Disposable implements IDecorationService
     for (const bufferDecoration of this._bufferDecorations) {
       bufferDecoration.dispose();
     }
-    for (const scrollbarDecoration of this._scrollbarDecorations) {
+    for (const scrollbarDecoration of this._overviewRulerDecorations) {
       scrollbarDecoration.dispose();
     }
     if (this._screenElement && this._bufferDecorationContainer && this._screenElement.contains(this._bufferDecorationContainer)) {
       this._screenElement.removeChild(this._bufferDecorationContainer);
     }
-    this._scrollbarDecorations = [];
-    this._scrollbarDecorationNode?.remove();
+    this._overviewRulerDecorations = [];
+    this._overviewRulerCanvas?.remove();
   }
 
   private _refresh(shouldRecreate?: boolean): void {
@@ -99,19 +99,19 @@ export class DecorationService extends Disposable implements IDecorationService
     if (!this._viewportElement?.parentElement) {
       return;
     }
-    if (!this._scrollbarDecorationNode) {
+    if (!this._overviewRulerCanvas) {
       // TODO: make this opt in, must be done before the scroll area in order to show up
-      this._scrollbarDecorationNode = document.createElement('canvas');
-      this._scrollbarDecorationNode.classList.add('xterm-decoration-scrollbar');
-      this._viewportElement.parentElement.insertBefore(this._scrollbarDecorationNode, this._viewportElement);
+      this._overviewRulerCanvas = document.createElement('canvas');
+      this._overviewRulerCanvas.classList.add('xterm-decoration-scrollbar');
+      this._viewportElement.parentElement.insertBefore(this._overviewRulerCanvas, this._viewportElement);
     }
-    if (!this._scrollbarDecorationCanvas) {
-      this._scrollbarDecorationCanvas = this._scrollbarDecorationNode.getContext('2d');
+    if (!this._overviewRulerCtx) {
+      this._overviewRulerCtx = this._overviewRulerCanvas.getContext('2d');
       this._refreshScollbarDecorations();
     }
-    const decoration = this._instantiationService.createInstance(ScrollbarDecoration, { marker, scrollbarDecorationColor: color }, this._scrollbarDecorationNode, this._scrollbarDecorationCanvas!);
-    decoration.onDispose(() => this._scrollbarDecorations.splice(this._scrollbarDecorations.indexOf(decoration), 1));
-    this._scrollbarDecorations.push(decoration);
+    const decoration = this._instantiationService.createInstance(ScrollbarDecoration, { marker, overviewRulerItemColor: color }, this._overviewRulerCanvas, this._overviewRulerCtx!);
+    decoration.onDispose(() => this._overviewRulerDecorations.splice(this._overviewRulerDecorations.indexOf(decoration), 1));
+    this._overviewRulerDecorations.push(decoration);
     return decoration;
   }
 
@@ -125,15 +125,15 @@ export class DecorationService extends Disposable implements IDecorationService
   }
 
   private _refreshScollbarDecorations(): void {
-    if (!this._scrollbarDecorationCanvas || !this._viewportElement || !this._scrollbarDecorationNode) {
+    if (!this._overviewRulerCtx || !this._viewportElement || !this._overviewRulerCanvas) {
       return;
     }
-    this._scrollbarDecorationNode.style.width = `${ScrollbarConstants.WIDTH}px`;
-    this._scrollbarDecorationNode.style.height = `${this._screenElement!.clientHeight}px`;
-    this._scrollbarDecorationNode.width = Math.floor(ScrollbarConstants.WIDTH * window.devicePixelRatio);
-    this._scrollbarDecorationNode.height = Math.floor(this._screenElement!.clientHeight * window.devicePixelRatio);
-    this._scrollbarDecorationCanvas.clearRect(0, 0, this._scrollbarDecorationCanvas.canvas.width, this._scrollbarDecorationCanvas.canvas.height);
-    for (const decoration of this._scrollbarDecorations) {
+    this._overviewRulerCanvas.style.width = `${ScrollbarConstants.WIDTH}px`;
+    this._overviewRulerCanvas.style.height = `${this._screenElement!.clientHeight}px`;
+    this._overviewRulerCanvas.width = Math.floor(ScrollbarConstants.WIDTH * window.devicePixelRatio);
+    this._overviewRulerCanvas.height = Math.floor(this._screenElement!.clientHeight * window.devicePixelRatio);
+    this._overviewRulerCtx.clearRect(0, 0, this._overviewRulerCtx.canvas.width, this._overviewRulerCtx.canvas.height);
+    for (const decoration of this._overviewRulerDecorations) {
       decoration.render();
     }
   }
@@ -164,7 +164,7 @@ export class ScrollbarDecoration extends Disposable implements IDecoration {
   ) {
     super();
     this._marker = options.marker;
-    this._color = options.scrollbarDecorationColor;
+    this._color = options.overviewRulerItemColor;
     this._marker.onDispose(() => this.dispose());
     this.render();
   }

typings/xterm.d.ts

@@ -475,7 +475,7 @@ declare module 'xterm' {
      * When provided, renders the decoration in the scrollbar
      * with the given color
      */
-    scrollbarDecorationColor?: string;
+    overviewRulerItemColor?: string;
   }
 
   /**