@xterm/xterm 5.6.0-beta.1 → 5.6.0-beta.100

package/src/browser/Viewport.ts

@@ -1,401 +1,187 @@
 /**
- * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2024 The xterm.js authors. All rights reserved.
  * @license MIT
  */
 
-import { addDisposableDomListener } from 'browser/Lifecycle';
-import { IViewport, ReadonlyColorSet } from 'browser/Types';
-import { IRenderDimensions } from 'browser/renderer/shared/Types';
-import { ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable } from 'common/Lifecycle';
-import { IBuffer } from 'common/buffer/Types';
-import { IBufferService, IOptionsService } from 'common/services/Services';
+import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { ViewportConstants } from 'browser/shared/Constants';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IBufferService, ICoreMouseService, IOptionsService } from 'common/services/Services';
+import { CoreMouseEventType } from 'common/Types';
+import { scheduleAtNextAnimationFrame } from 'vs/base/browser/dom';
+import { SmoothScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
+import type { ScrollableElementChangeOptions } from 'vs/base/browser/ui/scrollbar/scrollableElementOptions';
+import { Emitter, Event } from 'vs/base/common/event';
+import { Scrollable, ScrollbarVisibility, type ScrollEvent } from 'vs/base/common/scrollable';
 
-const FALLBACK_SCROLL_BAR_WIDTH = 15;
+export class Viewport extends Disposable {
 
-interface ISmoothScrollState {
-  startTime: number;
-  origin: number;
-  target: number;
-}
-
-/**
- * Represents the viewport of a terminal, the visible area within the larger buffer of output.
- * Logic for the virtual scroll bar is included in this object.
- */
-export class Viewport extends Disposable implements IViewport {
-  public scrollBarWidth: number = 0;
-  private _currentRowHeight: number = 0;
-  private _currentDeviceCellHeight: number = 0;
-  private _lastRecordedBufferLength: number = 0;
-  private _lastRecordedViewportHeight: number = 0;
-  private _lastRecordedBufferHeight: number = 0;
-  private _lastTouchY: number = 0;
-  private _lastScrollTop: number = 0;
-  private _activeBuffer: IBuffer;
-  private _renderDimensions: IRenderDimensions;
-
-  // Stores a partial line amount when scrolling, this is used to keep track of how much of a line
-  // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a
-  // quick fix and could have a more robust solution in place that reset the value when needed.
-  private _wheelPartialScroll: number = 0;
+  protected _onRequestScrollLines = this._register(new Emitter<number>());
+  public readonly onRequestScrollLines = this._onRequestScrollLines.event;
 
-  private _refreshAnimationFrame: number | null = null;
-  private _ignoreNextScrollEvent: boolean = false;
-  private _smoothScrollState: ISmoothScrollState = {
-    startTime: 0,
-    origin: -1,
-    target: -1
-  };
+  private _scrollableElement: SmoothScrollableElement;
+  private _styleElement: HTMLStyleElement;
 
-  private readonly _onRequestScrollLines = this.register(new EventEmitter<{ amount: number, suppressScrollEvent: boolean }>());
-  public readonly onRequestScrollLines = this._onRequestScrollLines.event;
+  private _queuedAnimationFrame?: number;
+  private _latestYDisp?: number;
+  private _isSyncing: boolean = false;
+  private _isHandlingScroll: boolean = false;
+  private _suppressOnScrollHandler: boolean = false;
 
   constructor(
-    private readonly _viewportElement: HTMLElement,
-    private readonly _scrollArea: HTMLElement,
+    element: HTMLElement,
+    screenElement: HTMLElement,
     @IBufferService private readonly _bufferService: IBufferService,
+    @ICoreBrowserService coreBrowserService: ICoreBrowserService,
+    @ICoreMouseService coreMouseService: ICoreMouseService,
+    @IThemeService themeService: IThemeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
-    @ICharSizeService private readonly _charSizeService: ICharSizeService,
-    @IRenderService private readonly _renderService: IRenderService,
-    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
-    @IThemeService themeService: IThemeService
+    @IRenderService private readonly _renderService: IRenderService
   ) {
     super();
 
-    // Measure the width of the scrollbar. If it is 0 we can assume it's an OSX overlay scrollbar.
-    // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that
-    // case, therefore we account for a standard amount to make it visible
-    this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
-    this.register(addDisposableDomListener(this._viewportElement, 'scroll', this._handleScroll.bind(this)));
-
-    // Track properties used in performance critical code manually to avoid using slow getters
-    this._activeBuffer = this._bufferService.buffer;
-    this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer));
-    this._renderDimensions = this._renderService.dimensions;
-    this.register(this._renderService.onDimensionsChange(e => this._renderDimensions = e));
-
-    this._handleThemeChange(themeService.colors);
-    this.register(themeService.onChangeColors(e => this._handleThemeChange(e)));
-    this.register(this._optionsService.onSpecificOptionChange('scrollback', () => this.syncScrollArea()));
-
-    // Perform this async to ensure the ICharSizeService is ready.
-    setTimeout(() => this.syncScrollArea());
-  }
-
-  private _handleThemeChange(colors: ReadonlyColorSet): void {
-    this._viewportElement.style.backgroundColor = colors.background.css;
-  }
-
-  public reset(): void {
-    this._currentRowHeight = 0;
-    this._currentDeviceCellHeight = 0;
-    this._lastRecordedBufferLength = 0;
-    this._lastRecordedViewportHeight = 0;
-    this._lastRecordedBufferHeight = 0;
-    this._lastTouchY = 0;
-    this._lastScrollTop = 0;
-    // Sync on next animation frame to ensure the new terminal state is used
-    this._coreBrowserService.window.requestAnimationFrame(() => this.syncScrollArea());
+    const scrollable = this._register(new Scrollable({
+      forceIntegerValues: false,
+      smoothScrollDuration: this._optionsService.rawOptions.smoothScrollDuration,
+      // This is used over `IRenderService.addRefreshCallback` since it can be canceled
+      scheduleAtNextAnimationFrame: cb => scheduleAtNextAnimationFrame(coreBrowserService.window, cb)
+    }));
+    this._register(this._optionsService.onSpecificOptionChange('smoothScrollDuration', () => {
+      scrollable.setSmoothScrollDuration(this._optionsService.rawOptions.smoothScrollDuration);
+    }));
+
+    this._scrollableElement = this._register(new SmoothScrollableElement(screenElement, {
+      vertical: ScrollbarVisibility.Auto,
+      horizontal: ScrollbarVisibility.Hidden,
+      useShadows: false,
+      mouseWheelSmoothScroll: true,
+      ...this._getChangeOptions()
+    }, scrollable));
+    this._register(this._optionsService.onMultipleOptionChange([
+      'scrollSensitivity',
+      'fastScrollSensitivity',
+      'overviewRuler'
+    ], () => this._scrollableElement.updateOptions(this._getChangeOptions())));
+    // Don't handle mouse wheel if wheel events are supported by the current mouse prototcol
+    this._register(coreMouseService.onProtocolChange(type => {
+      this._scrollableElement.updateOptions({
+        handleMouseWheel: !(type & CoreMouseEventType.WHEEL)
+      });
+    }));
+
+    this._scrollableElement.setScrollDimensions({ height: 0, scrollHeight: 0 });
+    this._register(Event.runAndSubscribe(themeService.onChangeColors, () => {
+      this._scrollableElement.getDomNode().style.backgroundColor = themeService.colors.background.css;
+    }));
+    element.appendChild(this._scrollableElement.getDomNode());
+    this._register(toDisposable(() => this._scrollableElement.getDomNode().remove()));
+
+    this._styleElement = coreBrowserService.mainDocument.createElement('style');
+    screenElement.appendChild(this._styleElement);
+    this._register(toDisposable(() => this._styleElement.remove()));
+    this._register(Event.runAndSubscribe(themeService.onChangeColors, () => {
+      this._styleElement.textContent = [
+        `.xterm .xterm-scrollable-element > .scrollbar > .slider {`,
+        `  background: ${themeService.colors.scrollbarSliderBackground.css};`,
+        `}`,
+        `.xterm .xterm-scrollable-element > .scrollbar > .slider:hover {`,
+        `  background: ${themeService.colors.scrollbarSliderHoverBackground.css};`,
+        `}`,
+        `.xterm .xterm-scrollable-element > .scrollbar > .slider.active {`,
+        `  background: ${themeService.colors.scrollbarSliderActiveBackground.css};`,
+        `}`
+      ].join('\n');
+    }));
+
+    this._register(this._bufferService.onResize(() => this._queueSync()));
+    this._register(this._bufferService.buffers.onBufferActivate(() => this._queueSync()));
+    this._register(this._bufferService.onScroll(() => this._sync()));
+
+    this._register(this._scrollableElement.onScroll(e => this._handleScroll(e)));
   }
 
-  /**
-   * Refreshes row height, setting line-height, viewport height and scroll area height if
-   * necessary.
-   */
-  private _refresh(immediate: boolean): void {
-    if (immediate) {
-      this._innerRefresh();
-      if (this._refreshAnimationFrame !== null) {
-        this._coreBrowserService.window.cancelAnimationFrame(this._refreshAnimationFrame);
-      }
-      return;
-    }
-    if (this._refreshAnimationFrame === null) {
-      this._refreshAnimationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh());
-    }
+  public scrollLines(disp: number): void {
+    const pos = this._scrollableElement.getScrollPosition();
+    this._scrollableElement.setScrollPosition({
+      reuseAnimation: true,
+      scrollTop: pos.scrollTop + disp * this._renderService.dimensions.css.cell.height
+    });
   }
 
-  private _innerRefresh(): void {
-    if (this._charSizeService.height > 0) {
-      this._currentRowHeight = this._renderDimensions.device.cell.height / this._coreBrowserService.dpr;
-      this._currentDeviceCellHeight = this._renderDimensions.device.cell.height;
-      this._lastRecordedViewportHeight = this._viewportElement.offsetHeight;
-      const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderDimensions.css.canvas.height);
-      if (this._lastRecordedBufferHeight !== newBufferHeight) {
-        this._lastRecordedBufferHeight = newBufferHeight;
-        this._scrollArea.style.height = this._lastRecordedBufferHeight + 'px';
-      }
+  public scrollToLine(line: number, disableSmoothScroll?: boolean): void {
+    if (disableSmoothScroll) {
+      this._latestYDisp = line;
     }
-
-    // Sync scrollTop
-    const scrollTop = this._bufferService.buffer.ydisp * this._currentRowHeight;
-    if (this._viewportElement.scrollTop !== scrollTop) {
-      // Ignore the next scroll event which will be triggered by setting the scrollTop as we do not
-      // want this event to scroll the terminal
-      this._ignoreNextScrollEvent = true;
-      this._viewportElement.scrollTop = scrollTop;
-    }
-
-    this._refreshAnimationFrame = null;
+    this._scrollableElement.setScrollPosition({
+      reuseAnimation: !disableSmoothScroll,
+      scrollTop: line * this._renderService.dimensions.css.cell.height
+    });
   }
 
-  /**
-   * Updates dimensions and synchronizes the scroll area if necessary.
-   */
-  public syncScrollArea(immediate: boolean = false): void {
-    // If buffer height changed
-    if (this._lastRecordedBufferLength !== this._bufferService.buffer.lines.length) {
-      this._lastRecordedBufferLength = this._bufferService.buffer.lines.length;
-      this._refresh(immediate);
-      return;
-    }
-
-    // If viewport height changed
-    if (this._lastRecordedViewportHeight !== this._renderService.dimensions.css.canvas.height) {
-      this._refresh(immediate);
-      return;
-    }
-
-    // If the buffer position doesn't match last scroll top
-    if (this._lastScrollTop !== this._activeBuffer.ydisp * this._currentRowHeight) {
-      this._refresh(immediate);
-      return;
-    }
-
-    // If row height changed
-    if (this._renderDimensions.device.cell.height !== this._currentDeviceCellHeight) {
-      this._refresh(immediate);
-      return;
-    }
+  private _getChangeOptions(): ScrollableElementChangeOptions {
+    return {
+      mouseWheelScrollSensitivity: this._optionsService.rawOptions.scrollSensitivity,
+      fastScrollSensitivity: this._optionsService.rawOptions.fastScrollSensitivity,
+      verticalScrollbarSize: this._optionsService.rawOptions.overviewRuler?.width || ViewportConstants.DEFAULT_SCROLL_BAR_WIDTH
+    };
   }
 
-  /**
-   * Handles scroll events on the viewport, calculating the new viewport and requesting the
-   * terminal to scroll to it.
-   * @param ev The scroll event.
-   */
-  private _handleScroll(ev: Event): void {
-    // Record current scroll top position
-    this._lastScrollTop = this._viewportElement.scrollTop;
-
-    // Don't attempt to scroll if the element is not visible, otherwise scrollTop will be corrupt
-    // which causes the terminal to scroll the buffer to the top
-    if (!this._viewportElement.offsetParent) {
-      return;
+  private _queueSync(ydisp?: number): void {
+    // Update state
+    if (ydisp !== undefined) {
+      this._latestYDisp = ydisp;
     }
 
-    // Ignore the event if it was flagged to ignore (when the source of the event is from Viewport)
-    if (this._ignoreNextScrollEvent) {
-      this._ignoreNextScrollEvent = false;
-      // Still trigger the scroll so lines get refreshed
-      this._onRequestScrollLines.fire({ amount: 0, suppressScrollEvent: true });
+    // Don't queue more than one callback
+    if (this._queuedAnimationFrame !== undefined) {
       return;
     }
-
-    const newRow = Math.round(this._lastScrollTop / this._currentRowHeight);
-    const diff = newRow - this._bufferService.buffer.ydisp;
-    this._onRequestScrollLines.fire({ amount: diff, suppressScrollEvent: true });
+    this._queuedAnimationFrame = this._renderService.addRefreshCallback(() => {
+      this._queuedAnimationFrame = undefined;
+      this._sync(this._latestYDisp);
+    });
   }
 
-  private _smoothScroll(): void {
-    // Check valid state
-    if (this._isDisposed || this._smoothScrollState.origin === -1 || this._smoothScrollState.target === -1) {
+  private _sync(ydisp: number = this._bufferService.buffer.ydisp): void {
+    if (!this._renderService || this._isSyncing) {
       return;
     }
+    this._isSyncing = true;
 
-    // Calculate position complete
-    const percent = this._smoothScrollPercent();
-    this._viewportElement.scrollTop = this._smoothScrollState.origin + Math.round(percent * (this._smoothScrollState.target - this._smoothScrollState.origin));
+    // Ignore any onScroll event that happens as a result of dimensions changing as this should
+    // never cause a scrollLines call, only setScrollPosition can do that.
+    this._suppressOnScrollHandler = true;
+    this._scrollableElement.setScrollDimensions({
+      height: this._renderService.dimensions.css.canvas.height,
+      scrollHeight: this._renderService.dimensions.css.cell.height * this._bufferService.buffer.lines.length
+    });
+    this._suppressOnScrollHandler = false;
 
-    // Continue or finish smooth scroll
-    if (percent < 1) {
-      this._coreBrowserService.window.requestAnimationFrame(() => this._smoothScroll());
-    } else {
-      this._clearSmoothScrollState();
+    // If ydisp has been changed by some other copmonent (input/buffer), then stop animating smooth
+    // scroll and scroll there immediately.
+    if (ydisp !== this._latestYDisp) {
+      this._scrollableElement.setScrollPosition({
+        scrollTop: ydisp * this._renderService.dimensions.css.cell.height
+      });
     }
-  }
-
-  private _smoothScrollPercent(): number {
-    if (!this._optionsService.rawOptions.smoothScrollDuration || !this._smoothScrollState.startTime) {
-      return 1;
-    }
-    return Math.max(Math.min((Date.now() - this._smoothScrollState.startTime) / this._optionsService.rawOptions.smoothScrollDuration, 1), 0);
-  }
-
-  private _clearSmoothScrollState(): void {
-    this._smoothScrollState.startTime = 0;
-    this._smoothScrollState.origin = -1;
-    this._smoothScrollState.target = -1;
-  }
-
-  /**
-   * Handles bubbling of scroll event in case the viewport has reached top or bottom
-   * @param ev The scroll event.
-   * @param amount The amount scrolled
-   */
-  private _bubbleScroll(ev: Event, amount: number): boolean {
-    const scrollPosFromTop = this._viewportElement.scrollTop + this._lastRecordedViewportHeight;
-    if ((amount < 0 && this._viewportElement.scrollTop !== 0) ||
-      (amount > 0 && scrollPosFromTop < this._lastRecordedBufferHeight)) {
-      if (ev.cancelable) {
-        ev.preventDefault();
-      }
-      return false;
-    }
-    return true;
-  }
 
-  /**
-   * Handles mouse wheel events by adjusting the viewport's scrollTop and delegating the actual
-   * scrolling to `onScroll`, this event needs to be attached manually by the consumer of
-   * `Viewport`.
-   * @param ev The mouse wheel event.
-   */
-  public handleWheel(ev: WheelEvent): boolean {
-    const amount = this._getPixelsScrolled(ev);
-    if (amount === 0) {
-      return false;
-    }
-    if (!this._optionsService.rawOptions.smoothScrollDuration) {
-      this._viewportElement.scrollTop += amount;
-    } else {
-      this._smoothScrollState.startTime = Date.now();
-      if (this._smoothScrollPercent() < 1) {
-        this._smoothScrollState.origin = this._viewportElement.scrollTop;
-        if (this._smoothScrollState.target === -1) {
-          this._smoothScrollState.target = this._viewportElement.scrollTop + amount;
-        } else {
-          this._smoothScrollState.target += amount;
-        }
-        this._smoothScrollState.target = Math.max(Math.min(this._smoothScrollState.target, this._viewportElement.scrollHeight), 0);
-        this._smoothScroll();
-      } else {
-        this._clearSmoothScrollState();
-      }
-    }
-    return this._bubbleScroll(ev, amount);
+    this._isSyncing = false;
   }
 
-  public scrollLines(disp: number): void {
-    if (disp === 0) {
+  private _handleScroll(e: ScrollEvent): void {
+    if (!this._renderService) {
       return;
     }
-    if (!this._optionsService.rawOptions.smoothScrollDuration) {
-      this._onRequestScrollLines.fire({ amount: disp, suppressScrollEvent: false });
-    } else {
-      const amount = disp * this._currentRowHeight;
-      this._smoothScrollState.startTime = Date.now();
-      if (this._smoothScrollPercent() < 1) {
-        this._smoothScrollState.origin = this._viewportElement.scrollTop;
-        this._smoothScrollState.target = this._smoothScrollState.origin + amount;
-        this._smoothScrollState.target = Math.max(Math.min(this._smoothScrollState.target, this._viewportElement.scrollHeight), 0);
-        this._smoothScroll();
-      } else {
-        this._clearSmoothScrollState();
-      }
-    }
-  }
-
-  private _getPixelsScrolled(ev: WheelEvent): number {
-    // Do nothing if it's not a vertical scroll event
-    if (ev.deltaY === 0 || ev.shiftKey) {
-      return 0;
-    }
-
-    // Fallback to WheelEvent.DOM_DELTA_PIXEL
-    let amount = this._applyScrollModifier(ev.deltaY, ev);
-    if (ev.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-      amount *= this._currentRowHeight;
-    } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-      amount *= this._currentRowHeight * this._bufferService.rows;
-    }
-    return amount;
-  }
-
-
-  public getBufferElements(startLine: number, endLine?: number): { bufferElements: HTMLElement[], cursorElement?: HTMLElement } {
-    let currentLine: string = '';
-    let cursorElement: HTMLElement | undefined;
-    const bufferElements: HTMLElement[] = [];
-    const end = endLine ?? this._bufferService.buffer.lines.length;
-    const lines = this._bufferService.buffer.lines;
-    for (let i = startLine; i < end; i++) {
-      const line = lines.get(i);
-      if (!line) {
-        continue;
-      }
-      const isWrapped = lines.get(i + 1)?.isWrapped;
-      currentLine += line.translateToString(!isWrapped);
-      if (!isWrapped || i === lines.length - 1) {
-        const div = document.createElement('div');
-        div.textContent = currentLine;
-        bufferElements.push(div);
-        if (currentLine.length > 0) {
-          cursorElement = div;
-        }
-        currentLine = '';
-      }
-    }
-    return { bufferElements, cursorElement };
-  }
-
-  /**
-   * Gets the number of pixels scrolled by the mouse event taking into account what type of delta
-   * is being used.
-   * @param ev The mouse wheel event.
-   */
-  public getLinesScrolled(ev: WheelEvent): number {
-    // Do nothing if it's not a vertical scroll event
-    if (ev.deltaY === 0 || ev.shiftKey) {
-      return 0;
-    }
-
-    // Fallback to WheelEvent.DOM_DELTA_LINE
-    let amount = this._applyScrollModifier(ev.deltaY, ev);
-    if (ev.deltaMode === WheelEvent.DOM_DELTA_PIXEL) {
-      amount /= this._currentRowHeight + 0.0; // Prevent integer division
-      this._wheelPartialScroll += amount;
-      amount = Math.floor(Math.abs(this._wheelPartialScroll)) * (this._wheelPartialScroll > 0 ? 1 : -1);
-      this._wheelPartialScroll %= 1;
-    } else if (ev.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-      amount *= this._bufferService.rows;
-    }
-    return amount;
-  }
-
-  private _applyScrollModifier(amount: number, ev: WheelEvent): number {
-    const modifier = this._optionsService.rawOptions.fastScrollModifier;
-    // Multiply the scroll speed when the modifier is down
-    if ((modifier === 'alt' && ev.altKey) ||
-      (modifier === 'ctrl' && ev.ctrlKey) ||
-      (modifier === 'shift' && ev.shiftKey)) {
-      return amount * this._optionsService.rawOptions.fastScrollSensitivity * this._optionsService.rawOptions.scrollSensitivity;
+    if (this._isHandlingScroll || this._suppressOnScrollHandler) {
+      return;
     }
-
-    return amount * this._optionsService.rawOptions.scrollSensitivity;
-  }
-
-  /**
-   * Handles the touchstart event, recording the touch occurred.
-   * @param ev The touch event.
-   */
-  public handleTouchStart(ev: TouchEvent): void {
-    this._lastTouchY = ev.touches[0].pageY;
-  }
-
-  /**
-   * Handles the touchmove event, scrolling the viewport if the position shifted.
-   * @param ev The touch event.
-   */
-  public handleTouchMove(ev: TouchEvent): boolean {
-    const deltaY = this._lastTouchY - ev.touches[0].pageY;
-    this._lastTouchY = ev.touches[0].pageY;
-    if (deltaY === 0) {
-      return false;
+    this._isHandlingScroll = true;
+    const newRow = Math.round(e.scrollTop / this._renderService.dimensions.css.cell.height);
+    const diff = newRow - this._bufferService.buffer.ydisp;
+    if (diff !== 0) {
+      this._latestYDisp = newRow;
+      this._onRequestScrollLines.fire(diff);
     }
-    this._viewportElement.scrollTop += deltaY;
-    return this._bubbleScroll(ev, deltaY);
+    this._isHandlingScroll = false;
   }
 }

package/src/browser/decorations/BufferDecorationRenderer.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IBufferService, IDecorationService, IInternalDecoration } from 'common/services/Services';
 
 export class BufferDecorationRenderer extends Disposable {
@@ -28,18 +28,18 @@ export class BufferDecorationRenderer extends Disposable {
     this._container.classList.add('xterm-decoration-container');
     this._screenElement.appendChild(this._container);
 
-    this.register(this._renderService.onRenderedViewportChange(() => this._doRefreshDecorations()));
-    this.register(this._renderService.onDimensionsChange(() => {
+    this._register(this._renderService.onRenderedViewportChange(() => this._doRefreshDecorations()));
+    this._register(this._renderService.onDimensionsChange(() => {
       this._dimensionsChanged = true;
       this._queueRefresh();
     }));
-    this.register(this._coreBrowserService.onDprChange(() => this._queueRefresh()));
-    this.register(this._bufferService.buffers.onBufferActivate(() => {
+    this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh()));
+    this._register(this._bufferService.buffers.onBufferActivate(() => {
       this._altBufferIsActive = this._bufferService.buffer === this._bufferService.buffers.alt;
     }));
-    this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh()));
-    this.register(this._decorationService.onDecorationRemoved(decoration => this._removeDecoration(decoration)));
-    this.register(toDisposable(() => {
+    this._register(this._decorationService.onDecorationRegistered(() => this._queueRefresh()));
+    this._register(this._decorationService.onDecorationRemoved(decoration => this._removeDecoration(decoration)));
+    this._register(toDisposable(() => {
       this._container.remove();
       this._decorationElements.clear();
     }));
@@ -108,8 +108,13 @@ export class BufferDecorationRenderer extends Disposable {
           element!.remove();
         });
       }
-      element.style.top = `${line * this._renderService.dimensions.css.cell.height}px`;
       element.style.display = this._altBufferIsActive ? 'none' : 'block';
+      if (!this._altBufferIsActive) {
+        element.style.width = `${Math.round((decoration.options.width || 1) * this._renderService.dimensions.css.cell.width)}px`;
+        element.style.height = `${(decoration.options.height || 1) * this._renderService.dimensions.css.cell.height}px`;
+        element.style.top = `${line * this._renderService.dimensions.css.cell.height}px`;
+        element.style.lineHeight = `${this._renderService.dimensions.css.cell.height}px`;
+      }
       decoration.onRenderEmitter.fire(element);
     }
   }