FitAddon: fill screenElement

addons/addon-fit/src/FitAddon.ts

@@ -24,6 +24,8 @@ const MINIMUM_ROWS = 1;
 
 export class FitAddon implements ITerminalAddon , IFitApi {
   private _terminal: Terminal | undefined;
+  private _lastAvailableHeight: number | undefined;
+  private _lastAvailableWidth: number | undefined;
 
   public activate(terminal: Terminal): void {
     this._terminal = terminal;
@@ -44,6 +46,11 @@ export class FitAddon implements ITerminalAddon , IFitApi {
     if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) {
       core._renderService.clear();
       this._terminal.resize(dims.cols, dims.rows);
+      // Fill in less than one row
+      if (this._lastAvailableHeight && this._lastAvailableWidth && this._terminal.screenElement) {
+        this._terminal.screenElement.style.width = `${this._lastAvailableWidth}px`;
+        this._terminal.screenElement.style.height = `${this._lastAvailableHeight}px`;
+      }
     }
   }
 
@@ -81,6 +88,8 @@ export class FitAddon implements ITerminalAddon , IFitApi {
     const elementPaddingHor = elementPadding.right + elementPadding.left;
     const availableHeight = parentElementHeight - elementPaddingVer;
     const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
+    this._lastAvailableHeight = availableHeight;
+    this._lastAvailableWidth = availableWidth;
     const geometry = {
       cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
       rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))

src/browser/public/Terminal.ts

@@ -82,6 +82,7 @@ export class Terminal extends Disposable implements ITerminalApi {
   public get onWriteParsed(): IEvent<void> { return this._core.onWriteParsed; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
+  public get screenElement(): HTMLElement | undefined { return this._core.screenElement; }
   public get parser(): IParser {
     if (!this._parser) {
       this._parser = new ParserApi(this._core);

test/playwright/TestUtils.ts

@@ -68,6 +68,7 @@ type TerminalProxyAsyncMethodOverrides = 'hasSelection' | 'getSelection' | 'getS
 type TerminalProxyCustomOverrides = 'buffer' | (
   // The below are not implemented yet
   'element' |
+  'screenElement' |
   'textarea' |
   'markers' |
   'unicode' |

typings/xterm.d.ts

@@ -786,6 +786,11 @@ declare module '@xterm/xterm' {
      */
     readonly element: HTMLElement | undefined;
 
+    /**
+     * The element is a screen container.
+     */
+    readonly screenElement: HTMLElement | undefined;
+
     /**
      * The textarea that accepts input for the terminal.
      */