Merge branch 'master' into fix_weblinks

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Question
-    url:  https://stackoverflow.com/questions/tagged/xtermjs
-    about: Please ask and answer questions here.
+  - name: Support / Q&A
+    url:  https://github.com/xtermjs/xterm.js/discussions/categories/q-a
+    about: Use GitHub Discussions for community support and general Q&A

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -122,7 +122,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
       return;
     }
     this._charAtlasDisposable?.dispose();
-    this._charAtlas = acquireTextureAtlas(this._terminal, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas = acquireTextureAtlas(this._terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
     this._charAtlasDisposable = forwardEvent(this._charAtlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
     this._charAtlas.warmUp();
     for (let i = 0; i < this._charAtlas.pages.length; i++) {
@@ -373,6 +373,9 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     } else {
       glyph = this._charAtlas.getRasterizedGlyph(cell.getCode() || WHITESPACE_CELL_CODE, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext);
     }
+    if (!glyph.size.x || !glyph.size.y) {
+      return;
+    }
     this._ctx.save();
     this._clipRow(y);
     // Draw the image, use the bitmap if it's available
@@ -389,8 +392,8 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
       glyph.texturePosition.y,
       glyph.size.x,
       glyph.size.y,
-      x * this._deviceCellWidth - glyph.offset.x,
-      y * this._deviceCellHeight - glyph.offset.y,
+      x * this._deviceCellWidth + this._deviceCharLeft - glyph.offset.x,
+      y * this._deviceCellHeight + this._deviceCharTop - glyph.offset.y,
       glyph.size.x,
       glyph.size.y
     );

addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -95,6 +95,12 @@ export class TextRenderLayer extends BaseRenderLayer {
           continue;
         }
 
+        // exit early for NULL and SP
+        const code = cell.getCode();
+        if (code === 0 || code === 32) {
+          continue;
+        }
+
         // Process any joined character ranges as needed. Because of how the
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.

addons/xterm-addon-webgl/src/WebglAddon.ts

@@ -9,7 +9,6 @@ import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { getSafariVersion, isSafari } from 'common/Platform';
 import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICoreTerminal } from 'common/Types';
 import { ITerminalAddon, Terminal } from 'xterm';
 import { WebglRenderer } from './WebglRenderer';
 
@@ -29,14 +28,13 @@ export class WebglAddon extends Disposable implements ITerminalAddon {
   constructor(
     private _preserveDrawingBuffer?: boolean
   ) {
+    if (isSafari && getSafariVersion() < 16) {
+      throw new Error('Webgl2 is only supported on Safari 16 and above');
+    }
     super();
   }
 
   public activate(terminal: Terminal): void {
-    if (isSafari && getSafariVersion() < 16) {
-      throw new Error('Webgl2 is only supported on Safari 16 and above');
-    }
-
     const core = (terminal as any)._core as ITerminal;
     if (!terminal.element) {
       this.register(core.onWillOpen(() => this.activate(terminal)));

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -40,8 +40,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private _canvas: HTMLCanvasElement;
   private _gl: IWebGL2RenderingContext;
-  private _rectangleRenderer!: RectangleRenderer;
-  private _glyphRenderer!: GlyphRenderer;
+  private _rectangleRenderer: RectangleRenderer;
+  private _glyphRenderer: GlyphRenderer;
 
   public readonly dimensions: IRenderDimensions;
 
@@ -67,7 +67,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     private readonly _coreBrowserService: ICoreBrowserService,
     coreService: ICoreService,
     private readonly _decorationService: IDecorationService,
-    optionsService: IOptionsService,
+    private readonly _optionsService: IOptionsService,
     private readonly _themeService: IThemeService,
     preserveDrawingBuffer?: boolean
   ) {
@@ -80,13 +80,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._core = (this._terminal as any)._core;
 
     this._renderLayers = [
-      new LinkRenderLayer(this._core.screenElement!, 2, this._terminal, this._core.linkifier2, this._coreBrowserService, this._themeService),
-      new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._onRequestRedraw, this._coreBrowserService, coreService, this._themeService, optionsService)
+      new LinkRenderLayer(this._core.screenElement!, 2, this._terminal, this._core.linkifier2, this._coreBrowserService, _optionsService, this._themeService),
+      new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._onRequestRedraw, this._coreBrowserService, coreService, _optionsService, this._themeService)
     ];
     this.dimensions = createRenderDimensions();
     this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
-    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this.register(_optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
     this._canvas = document.createElement('canvas');
 
@@ -127,7 +127,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     this._core.screenElement!.appendChild(this._canvas);
 
-    this._initializeWebGLState();
+    [this._rectangleRenderer, this._glyphRenderer] = this._initializeWebGLState();
 
     this._isAttached = this._coreBrowserService.window.document.body.contains(this._core.screenElement!);
 
@@ -235,7 +235,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   /**
    * Initializes members dependent on WebGL context state.
    */
-  private _initializeWebGLState(): void {
+  private _initializeWebGLState(): [RectangleRenderer, GlyphRenderer] {
     // Dispose any previous rectangle and glyph renderers before creating new ones.
     this._rectangleRenderer?.dispose();
     this._glyphRenderer?.dispose();
@@ -245,6 +245,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     // Update dimensions and acquire char atlas
     this.handleCharSizeChanged();
+
+    return [this._rectangleRenderer, this._glyphRenderer];
   }
 
   /**
@@ -259,6 +261,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     const atlas = acquireTextureAtlas(
       this._terminal,
+      this._optionsService.rawOptions,
       this._themeService.colors,
       this.dimensions.device.cell.width,
       this.dimensions.device.cell.height,
@@ -267,7 +270,6 @@ export class WebglRenderer extends Disposable implements IRenderer {
       this._coreBrowserService.dpr
     );
     if (this._charAtlas !== atlas) {
-
       this._charAtlasDisposable?.dispose();
       this._onChangeTextureAtlas.fire(atlas.pages[0].canvas);
       this._charAtlasDisposable = getDisposeArrayDisposable([
@@ -350,7 +352,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     let lastBg: number;
     let y: number;
     let row: number;
-    let line: IBufferLine;
+    let line: IBufferLine | undefined;
     let joinedRanges: [number, number][];
     let isJoined: boolean;
     let lastCharX: number;
@@ -363,7 +365,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     for (y = start; y <= end; y++) {
       row = y + terminal.buffer.ydisp;
-      line = terminal.buffer.lines.get(row)!;
+      line = terminal.buffer.lines.get(row);
+      if (!line) {
+        break;
+      }
       this._model.lineLengths[y] = 0;
       joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (x = 0; x < terminal.cols; x++) {
@@ -469,18 +474,18 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // Calculate the device cell height, if lineHeight is _not_ 1, the resulting value will be
     // floored since lineHeight can never be lower then 1, this guarentees the device cell height
     // will always be larger than device char height.
-    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._terminal.options.lineHeight);
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
 
     // Calculate the y offset within a cell that glyph should draw at in order for it to be centered
     // correctly within the cell.
-    this.dimensions.device.char.top = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
+    this.dimensions.device.char.top = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
 
     // Calculate the device cell width, taking the letterSpacing into account.
-    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._terminal.options.letterSpacing);
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
 
     // Calculate the x offset with a cell that text should draw from in order for it to be centered
     // correctly within the cell.
-    this.dimensions.device.char.left = Math.floor(this._terminal.options.letterSpacing / 2);
+    this.dimensions.device.char.left = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
 
     // Recalculate the canvas dimensions, the device dimensions define the actual number of pixel in
     // the canvas

addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts

@@ -13,6 +13,7 @@ import { IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types'
 import { CellData } from 'common/buffer/CellData';
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IOptionsService } from 'common/services/Services';
 
 export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -33,6 +34,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     zIndex: number,
     private _alpha: boolean,
     protected readonly _coreBrowserService: ICoreBrowserService,
+    protected readonly _optionsService: IOptionsService,
     protected readonly _themeService: IThemeService
   ) {
     super();
@@ -93,7 +95,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireTextureAtlas(terminal, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas = acquireTextureAtlas(terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
     this._charAtlas.warmUp();
   }
 

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -39,10 +39,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>,
     coreBrowserService: ICoreBrowserService,
     private readonly _coreService: ICoreService,
-    themeService: IThemeService,
-    optionsService: IOptionsService
+    optionsService: IOptionsService,
+    themeService: IThemeService
   ) {
-    super(terminal, container, 'cursor', zIndex, true, coreBrowserService, themeService);
+    super(terminal, container, 'cursor', zIndex, true, coreBrowserService, optionsService, themeService);
     this._state = {
       x: 0,
       y: 0,
@@ -213,7 +213,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderBarCursor(terminal: Terminal, x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.fillStyle = this._themeService.colors.cursor.css;
-    this._fillLeftLineAtCell(x, y, terminal.options.cursorWidth);
+    this._fillLeftLineAtCell(x, y, this._optionsService.rawOptions.cursorWidth);
     this._ctx.restore();
   }
 

addons/xterm-addon-webgl/src/renderLayer/LinkRenderLayer.ts

@@ -8,6 +8,7 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
+import { IOptionsService } from 'common/services/Services';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 
@@ -20,9 +21,10 @@ export class LinkRenderLayer extends BaseRenderLayer {
     terminal: Terminal,
     linkifier2: ILinkifier2,
     coreBrowserService: ICoreBrowserService,
+    optionsService: IOptionsService,
     themeService: IThemeService
   ) {
-    super(terminal, container, 'link', zIndex, true, coreBrowserService, themeService);
+    super(terminal, container, 'link', zIndex, true, coreBrowserService, optionsService, themeService);
 
     this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
     this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));

css/xterm.css

@@ -146,7 +146,6 @@
     left: 0;
     top: 0;
     bottom: 0;
-    right: 0;
     z-index: 10;
     color: transparent;
 }

demo/client.ts

@@ -228,6 +228,7 @@ if (document.location.pathname === '/test') {
   document.getElementById('sgr-test').addEventListener('click', sgrTest);
   document.getElementById('add-decoration').addEventListener('click', addDecoration);
   document.getElementById('add-overview-ruler').addEventListener('click', addOverviewRuler);
+  addVtButtons();
 }
 
 function createTerminal(): void {
@@ -250,7 +251,11 @@ function createTerminal(): void {
   addons.serialize.instance = new SerializeAddon();
   addons.fit.instance = new FitAddon();
   addons.unicode11.instance = new Unicode11Addon();
-  addons.webgl.instance = new WebglAddon();
+  try {  // try to start with webgl renderer (might throw on older safari/webkit)
+    addons.webgl.instance = new WebglAddon();
+  } catch (e) {
+    console.warn(e);
+  }
   addons['web-links'].instance = new WebLinksAddon();
   typedTerm.loadAddon(addons.fit.instance);
   typedTerm.loadAddon(addons.search.instance);
@@ -273,22 +278,26 @@ function createTerminal(): void {
   socketURL = protocol + location.hostname + ((location.port) ? (':' + location.port) : '') + '/terminals/';
 
   addons.fit.instance!.fit();
-  typedTerm.loadAddon(addons.webgl.instance);
-  setTimeout(() => {
-    if (addons.webgl.instance !== undefined) {
+
+  if (addons.webgl.instance) {
+    try {
+      typedTerm.loadAddon(addons.webgl.instance);
+      term.open(terminalContainer);
       setTextureAtlas(addons.webgl.instance.textureAtlas);
       addons.webgl.instance.onChangeTextureAtlas(e => setTextureAtlas(e));
       addons.webgl.instance.onAddTextureAtlasCanvas(e => appendTextureAtlas(e));
       addons.webgl.instance.onRemoveTextureAtlasCanvas(e => removeTextureAtlas(e));
+    } catch (e) {
+      console.warn('error during loading webgl addon:', e);
+      addons.webgl.instance.dispose();
+      addons.webgl.instance = undefined;
     }
-  }, 0);
-
-  try { // try-catch to allow the demo to load if webgl is not supported
+  }
+  if (!typedTerm.element) {
+    // webgl loading failed for some reason, attach with DOM renderer
     term.open(terminalContainer);
   }
-  catch {
-    addons.webgl.instance = undefined;
-  }
+
   term.focus();
 
   addDomListener(paddingElement, 'change', setPadding);
@@ -961,6 +970,20 @@ function sgrTest(): void {
   for (const e of entries) {
     term.writeln(`\x1b[0m\x1b[${e.ps}m ${e.ps.toString().padEnd(2, ' ')} ${e.name.padEnd(maxNameLength, ' ')} - ${testString}\x1b[0m`);
   }
+  const entriesByPs: Map<number, string> = new Map();
+  for (const e of entries) {
+    entriesByPs.set(e.ps, e.name);
+  }
+  const comboEntries: { ps: number[] }[] = [
+    { ps: [1, 2, 3, 4, 5, 6, 7, 9] },
+    { ps: [2, 41] }
+  ];
+  term.write('\n\n\r');
+  term.writeln(`Combinations`);
+  for (const e of comboEntries) {
+    const name = e.ps.map(e => entriesByPs.get(e)).join(', ');
+    term.writeln(`\x1b[0m\x1b[${e.ps.join(';')}m ${name}\n\r${testString}\x1b[0m`);
+  }
 }
 
 function addAnsiHyperlink(): void {
@@ -1069,3 +1092,33 @@ function addOverviewRuler(): void {
   );
   console.groupEnd();
 };
+
+function addVtButtons(): void {
+  function csi(e: string): string {
+    return `\x1b[${e}`;
+  }
+
+  const vtCUU = (): void => term.write(csi('A'));
+  const vtCUD = (): void => term.write(csi('B'));
+  const vtCUF = (): void => term.write(csi('C'));
+  const vtCUB = (): void => term.write(csi('D'));
+
+  function createButton(name: string, writeCsi: string): HTMLElement {
+    const element = document.createElement('button');
+    element.textContent = name;
+    element.addEventListener('click', () => term.write(csi(writeCsi)));
+    return element;
+  }
+  const vtFragment = document.createDocumentFragment();
+  const buttonSpecs: { [key: string]: string } = {
+    A: 'CUU ↑',
+    B: 'CUD ↓',
+    C: 'CUF →',
+    D: 'CUB ←'
+  };
+  for (const s of Object.keys(buttonSpecs)) {
+    vtFragment.appendChild(createButton(buttonSpecs[s], s));
+  }
+
+  document.querySelector('#vt-container').appendChild(vtFragment);
+}

demo/index.html

@@ -23,6 +23,7 @@
           <button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
           <button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
           <button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
+          <button id= "vtbutton" class="tabLinks" onclick="openSection(event, 'vt')">VT</button>
         </div>
         <div id="options" class="tabContent">
           <h3>Options</h3>
@@ -89,6 +90,10 @@
             </dl>
           </div>
         </div>
+        <div id="vt" class="tabContent">
+          <h3>VT</h3>
+          <div id="vt-container"></div>
+        </div>
       </div>
     </div>
     <input type="checkbox" id="texture-atlas-zoom"/>

src/browser/AccessibilityManager.ts

@@ -246,7 +246,10 @@ export class AccessibilityManager extends Disposable {
 
   private _handleKey(keyChar: string): void {
     this._clearLiveRegion();
-    this._charsToConsume.push(keyChar);
+    // Only add the char if there is no control character.
+    if (!/\p{Control}/u.test(keyChar)) {
+      this._charsToConsume.push(keyChar);
+    }
   }
 
   private _refreshRows(start?: number, end?: number): void {
@@ -277,6 +280,7 @@ export class AccessibilityManager extends Disposable {
     if (!this._renderService.dimensions.css.cell.height) {
       return;
     }
+    this._accessibilityTreeRoot.style.width = `${this._renderService.dimensions.css.canvas.width}px`;
     if (this._rowElements.length !== this._terminal.rows) {
       this._handleResize(this._terminal.rows);
     }

src/browser/Linkifier2.ts

@@ -315,7 +315,15 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
           // When start is 0 a scroll most likely occurred, make sure links above the fold also get
           // cleared.
           const start = e.start === 0 ? 0 : e.start + 1 + this._bufferService.buffer.ydisp;
+          const oldEvent = this._currentLink ? this._lastMouseEvent : undefined;
           this._clearCurrentLink(start, e.end + 1 + this._bufferService.buffer.ydisp);
+          if (oldEvent && this._element) {
+            // re-eval previously active link after changes
+            const position = this._positionFromMouseEvent(oldEvent, this._element, this._mouseService!);
+            if (position) {
+              this._askForLink(position, false);
+            }
+          }
         }));
       }
     }

src/browser/OscLinkProvider.ts

@@ -66,14 +66,30 @@ export class OscLinkProvider implements ILinkProvider {
               y
             }
           };
-          // OSC links always use underline and pointer decorations
-          result.push({
-            text,
-            range,
-            activate: (e, text) => (linkHandler ? linkHandler.activate(e, text, range) : defaultActivate(e, text)),
-            hover: (e, text) => linkHandler?.hover?.(e, text, range),
-            leave: (e, text) => linkHandler?.leave?.(e, text, range)
-          });
+
+          let ignoreLink = false;
+          if (!linkHandler?.allowNonHttpProtocols) {
+            try {
+              const parsed = new URL(text);
+              if (!['http:', 'https:'].includes(parsed.protocol)) {
+                ignoreLink = true;
+              }
+            } catch (e) {
+              // Ignore invalid URLs to prevent unexpected behaviors
+              ignoreLink = true;
+            }
+          }
+
+          if (!ignoreLink) {
+            // OSC links always use underline and pointer decorations
+            result.push({
+              text,
+              range,
+              activate: (e, text) => (linkHandler ? linkHandler.activate(e, text, range) : defaultActivate(e, text)),
+              hover: (e, text) => linkHandler?.hover?.(e, text, range),
+              leave: (e, text) => linkHandler?.leave?.(e, text, range)
+            });
+          }
         }
         finishLink = false;
 
@@ -94,7 +110,7 @@ export class OscLinkProvider implements ILinkProvider {
 }
 
 function defaultActivate(e: MouseEvent, uri: string): void {
-  const answer = confirm(`Do you want to navigate to ${uri}?`);
+  const answer = confirm(`Do you want to navigate to ${uri}?\n\nWARNING: This link could potentially be dangerous`);
   if (answer) {
     const newWindow = window.open();
     if (newWindow) {

src/browser/Terminal.ts

@@ -445,17 +445,25 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.textarea = document.createElement('textarea');
     this.textarea.classList.add('xterm-helper-textarea');
     this.textarea.setAttribute('aria-label', Strings.promptLabel);
-    this.textarea.setAttribute('aria-multiline', 'false');
+    if (!Browser.isChromeOS) {
+      // ChromeVox on ChromeOS does not like this. See
+      // https://issuetracker.google.com/issues/260170397
+      this.textarea.setAttribute('aria-multiline', 'false');
+    }
     this.textarea.setAttribute('autocorrect', 'off');
     this.textarea.setAttribute('autocapitalize', 'off');
     this.textarea.setAttribute('spellcheck', 'false');
     this.textarea.tabIndex = 0;
+
+    // Register the core browser service before the generic textarea handlers are registered so it
+    // handles them first. Otherwise the renderers may use the wrong focus state.
+    this._coreBrowserService = this._instantiationService.createInstance(CoreBrowserService, this.textarea, this._document.defaultView ?? window);
+    this._instantiationService.setService(ICoreBrowserService, this._coreBrowserService);
+
     this.register(addDisposableDomListener(this.textarea, 'focus', (ev: KeyboardEvent) => this._handleTextAreaFocus(ev)));
     this.register(addDisposableDomListener(this.textarea, 'blur', () => this._handleTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
-    this._coreBrowserService = this._instantiationService.createInstance(CoreBrowserService, this.textarea, this._document.defaultView ?? window);
-    this._instantiationService.setService(ICoreBrowserService, this._coreBrowserService);
 
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
@@ -995,7 +1003,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     const shouldIgnoreComposition = this.browser.isMac && this.options.macOptionIsMeta && event.altKey;
 
     if (!shouldIgnoreComposition && !this._compositionHelper!.keydown(event)) {
-      if (this.buffer.ybase !== this.buffer.ydisp) {
+      if (this.options.scrollOnUserInput && this.buffer.ybase !== this.buffer.ydisp) {
         this._bufferService.scrollToBottom();
       }
       return false;
@@ -1057,10 +1065,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.coreService.triggerDataEvent(result.key, true);
 
     // Cancel events when not in screen reader mode so events don't get bubbled up and handled by
-    // other listeners. When screen reader mode is enabled, this could cause issues if the event
-    // is handled at a higher level, this is a compromise in order to echo keys to the screen
-    // reader.
-    if (!this.optionsService.rawOptions.screenReaderMode) {
+    // other listeners. When screen reader mode is enabled, we don't cancel them (unless ctrl or alt
+    // is also depressed) so that the cursor textarea can be updated, which triggers the screen
+    // reader to read it.
+    if (!this.optionsService.rawOptions.screenReaderMode || event.altKey || event.ctrlKey) {
       return this.cancel(event, true);
     }
 

src/browser/renderer/shared/CharAtlasCache.ts

@@ -4,7 +4,7 @@
  */
 
 import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
-import { Terminal } from 'xterm';
+import { ITerminalOptions, Terminal } from 'xterm';
 import { ITerminal, ReadonlyColorSet } from 'browser/Types';
 import { ICharAtlasConfig, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
@@ -22,11 +22,10 @@ const charAtlasCache: ITextureAtlasCacheEntry[] = [];
 /**
  * Acquires a char atlas, either generating a new one or returning an existing
  * one that is in use by another terminal.
- * @param terminal The terminal.
- * @param colors The colors to use.
  */
 export function acquireTextureAtlas(
   terminal: Terminal,
+  options: Required<ITerminalOptions>,
   colors: ReadonlyColorSet,
   deviceCellWidth: number,
   deviceCellHeight: number,
@@ -34,7 +33,7 @@ export function acquireTextureAtlas(
   deviceCharHeight: number,
   devicePixelRatio: number
 ): ITextureAtlas {
-  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, terminal, colors, devicePixelRatio);
+  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

src/browser/renderer/shared/CharAtlasUtils.ts

@@ -5,11 +5,11 @@
 
 import { ICharAtlasConfig } from './Types';
 import { Attributes } from 'common/buffer/Constants';
-import { Terminal } from 'xterm';
+import { ITerminalOptions } from 'xterm';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { NULL_COLOR } from 'common/Color';
 
-export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, terminal: Terminal, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
+export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -27,21 +27,21 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
     contrastCache: colors.contrastCache
   };
   return {
-    customGlyphs: terminal.options.customGlyphs,
+    customGlyphs: options.customGlyphs,
     devicePixelRatio,
-    letterSpacing: terminal.options.letterSpacing,
-    lineHeight: terminal.options.lineHeight,
+    letterSpacing: options.letterSpacing,
+    lineHeight: options.lineHeight,
     deviceCellWidth: deviceCellWidth,
     deviceCellHeight: deviceCellHeight,
     deviceCharWidth: deviceCharWidth,
     deviceCharHeight: deviceCharHeight,
-    fontFamily: terminal.options.fontFamily,
-    fontSize: terminal.options.fontSize,
-    fontWeight: terminal.options.fontWeight,
-    fontWeightBold: terminal.options.fontWeightBold,
-    allowTransparency: terminal.options.allowTransparency,
-    drawBoldTextInBrightColors: terminal.options.drawBoldTextInBrightColors,
-    minimumContrastRatio: terminal.options.minimumContrastRatio,
+    fontFamily: options.fontFamily,
+    fontSize: options.fontSize,
+    fontWeight: options.fontWeight,
+    fontWeightBold: options.fontWeightBold,
+    allowTransparency: options.allowTransparency,
+    drawBoldTextInBrightColors: options.drawBoldTextInBrightColors,
+    minimumContrastRatio: options.minimumContrastRatio,
     colors: clonedColors
   };
 }

src/browser/renderer/shared/CustomGlyphs.ts

@@ -362,15 +362,31 @@ export const powerlineDefinitions: { [index: string]: IVectorShape } = {
   '\u{E0B2}': { d: 'M1,0 L0,.5 L1,1', type: VectorType.FILL, leftPadding: 2 },
   // Left triangle line
   '\u{E0B3}': { d: 'M2,-.5 L0,.5 L2,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
-  // Right semi-circle solid,
+  // Right semi-circle solid
   '\u{E0B4}': { d: 'M0,0 L0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.FILL, rightPadding: 1 },
-  // Right semi-circle line,
+  // Right semi-circle line
   '\u{E0B5}': { d: 'M0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.STROKE, rightPadding: 1 },
-  // Left semi-circle solid,
+  // Left semi-circle solid
   '\u{E0B6}': { d: 'M1,0 L1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.FILL, leftPadding: 1 },
-  // Left semi-circle line,
-  '\u{E0B7}': { d: 'M1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.STROKE, leftPadding: 1 }
+  // Left semi-circle line
+  '\u{E0B7}': { d: 'M1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.STROKE, leftPadding: 1 },
+  // Lower left triangle
+  '\u{E0B8}': { d: 'M-.5,-.5 L1.5,1.5 L-.5,1.5', type: VectorType.FILL },
+  // Backslash separator
+  '\u{E0B9}': { d: 'M-.5,-.5 L1.5,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
+  // Lower right triangle
+  '\u{E0BA}': { d: 'M1.5,-.5 L-.5,1.5 L1.5,1.5', type: VectorType.FILL },
+  // Upper left triangle
+  '\u{E0BC}': { d: 'M1.5,-.5 L-.5,1.5 L-.5,-.5', type: VectorType.FILL },
+  // Forward slash separator
+  '\u{E0BD}': { d: 'M1.5,-.5 L-.5,1.5', type: VectorType.STROKE, leftPadding: 1, rightPadding: 1 },
+  // Upper right triangle
+  '\u{E0BE}': { d: 'M-.5,-.5 L1.5,1.5 L1.5,-.5', type: VectorType.FILL }
 };
+// Backslash separator redundant
+powerlineDefinitions['\u{E0BB}'] = powerlineDefinitions['\u{E0B9}'];
+// Forward slash separator redundant
+powerlineDefinitions['\u{E0BF}'] = powerlineDefinitions['\u{E0BD}'];
 
 /**
  * Try drawing a custom block element or box drawing character, returning whether it was
@@ -584,6 +600,11 @@ function drawPowerlineChar(
   fontSize: number,
   devicePixelRatio: number
 ): void {
+  // Clip the cell to make sure drawing doesn't occur beyond bounds
+  const clipRegion = new Path2D();
+  clipRegion.rect(xOffset, yOffset, deviceCellWidth, deviceCellHeight);
+  ctx.clip(clipRegion);
+
   ctx.beginPath();
   // Scale the stroke with DPR and font size
   const cssLineWidth = fontSize / 12;
@@ -606,6 +627,7 @@ function drawPowerlineChar(
       xOffset,
       yOffset,
       false,
+      devicePixelRatio,
       (charDefinition.leftPadding ?? 0) * (cssLineWidth / 2),
       (charDefinition.rightPadding ?? 0) * (cssLineWidth / 2)
     ));

src/common/CoreTerminal.ts

@@ -109,7 +109,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._instantiationService.setService(IBufferService, this._bufferService);
     this._logService = this.register(this._instantiationService.createInstance(LogService));
     this._instantiationService.setService(ILogService, this._logService);
-    this.coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom()));
+    this.coreService = this.register(this._instantiationService.createInstance(CoreService));
     this._instantiationService.setService(ICoreService, this.coreService);
     this.coreMouseService = this.register(this._instantiationService.createInstance(CoreMouseService));
     this._instantiationService.setService(ICoreMouseService, this.coreMouseService);
@@ -129,6 +129,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this.register(forwardEvent(this._bufferService.onResize, this._onResize));
     this.register(forwardEvent(this.coreService.onData, this._onData));
     this.register(forwardEvent(this.coreService.onBinary, this._onBinary));
+    this.register(this.coreService.onRequestScrollToBottom(() => this.scrollToBottom()));
     this.register(this.coreService.onUserInput(() =>  this._writeBuffer.handleUserInput()));
     this.register(this.optionsService.onSpecificOptionChange('windowsMode', e => this._handleWindowsModeOptionChange(e)));
     this.register(this._bufferService.onScroll(event => {

src/common/InputHandler.test.ts

@@ -65,7 +65,7 @@ describe('InputHandler', () => {
     optionsService = new MockOptionsService();
     bufferService = new BufferService(optionsService);
     bufferService.resize(80, 30);
-    coreService = new CoreService(() => { }, bufferService, new MockLogService(), optionsService);
+    coreService = new CoreService(bufferService, new MockLogService(), optionsService);
 
     inputHandler = new TestInputHandler(bufferService, new MockCharsetService(), coreService, new MockLogService(), optionsService, new MockOscLinkService(), new MockCoreMouseService(), new MockUnicodeService());
   });
@@ -2300,7 +2300,7 @@ describe('InputHandler - async handlers', () => {
     optionsService = new MockOptionsService();
     bufferService = new BufferService(optionsService);
     bufferService.resize(80, 30);
-    coreService = new CoreService(() => { }, bufferService, new MockLogService(), optionsService);
+    coreService = new CoreService(bufferService, new MockLogService(), optionsService);
     coreService.onData(data => { console.log(data); });
 
     inputHandler = new TestInputHandler(bufferService, new MockCharsetService(), coreService, new MockLogService(), optionsService, new MockOscLinkService(), new MockCoreMouseService(), new MockUnicodeService());