Merge branch 'master' into dynamic-char-atlas

I did a bunch of testing of various ansi escape codes (including
italics) with all three char atlas implementations (none, static,
dynamic), with and without `drawBoldTextInBrightColors`, and with and
without `enableBold` to test all of the edge cases that I could.

src/AccessibilityManager.ts

@@ -12,9 +12,9 @@ import { IDisposable } from 'xterm';
 
 const MAX_ROWS_TO_READ = 20;
 
-enum BoundaryPosition {
-  Top,
-  Bottom
+const enum BoundaryPosition {
+  TOP,
+  BOTTOM
 }
 
 export class AccessibilityManager implements IDisposable {
@@ -54,8 +54,8 @@ export class AccessibilityManager implements IDisposable {
       this._rowContainer.appendChild(this._rowElements[i]);
     }
 
-    this._topBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.Top);
-    this._bottomBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.Bottom);
+    this._topBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.TOP);
+    this._bottomBoundaryFocusListener = e => this._onBoundaryFocus(e, BoundaryPosition.BOTTOM);
     this._rowElements[0].addEventListener('focus', this._topBoundaryFocusListener);
     this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
 
@@ -101,11 +101,11 @@ export class AccessibilityManager implements IDisposable {
 
   private _onBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
     const boundaryElement = <HTMLElement>e.target;
-    const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.Top ? 1 : this._rowElements.length - 2];
+    const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2];
 
     // Don't scroll if the buffer top has reached the end in that direction
     const posInSet = boundaryElement.getAttribute('aria-posinset');
-    const lastRowPos = position === BoundaryPosition.Top ? '1' : `${this._terminal.buffer.lines.length}`;
+    const lastRowPos = position === BoundaryPosition.TOP ? '1' : `${this._terminal.buffer.lines.length}`;
     if (posInSet === lastRowPos) {
       return;
     }
@@ -119,7 +119,7 @@ export class AccessibilityManager implements IDisposable {
     // Remove old boundary element from array
     let topBoundaryElement: HTMLElement;
     let bottomBoundaryElement: HTMLElement;
-    if (position === BoundaryPosition.Top) {
+    if (position === BoundaryPosition.TOP) {
       topBoundaryElement = boundaryElement;
       bottomBoundaryElement = this._rowElements.pop()!;
       this._rowContainer.removeChild(bottomBoundaryElement);
@@ -134,7 +134,7 @@ export class AccessibilityManager implements IDisposable {
     bottomBoundaryElement.removeEventListener('focus', this._bottomBoundaryFocusListener);
 
     // Add new element to array/DOM
-    if (position === BoundaryPosition.Top) {
+    if (position === BoundaryPosition.TOP) {
       const newElement = this._createAccessibilityTreeNode();
       this._rowElements.unshift(newElement);
       this._rowContainer.insertAdjacentElement('afterbegin', newElement);
@@ -149,10 +149,10 @@ export class AccessibilityManager implements IDisposable {
     this._rowElements[this._rowElements.length - 1].addEventListener('focus', this._bottomBoundaryFocusListener);
 
     // Scroll up
-    this._terminal.scrollLines(position === BoundaryPosition.Top ? -1 : 1);
+    this._terminal.scrollLines(position === BoundaryPosition.TOP ? -1 : 1);
 
     // Focus new boundary before element
-    this._rowElements[position === BoundaryPosition.Top ? 1 : this._rowElements.length - 2].focus();
+    this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2].focus();
 
     // Prevent the standard behavior
     e.preventDefault();

src/CompositionHelper.ts

@@ -92,11 +92,10 @@ export class CompositionHelper {
       } else if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
         // Continue composing if the keyCode is a modifier key
         return false;
-      } else {
-        // Finish composition immediately. This is mainly here for the case where enter is
-        // pressed and the handler needs to be triggered before the command is executed.
-        this._finalizeComposition(false);
       }
+      // Finish composition immediately. This is mainly here for the case where enter is
+      // pressed and the handler needs to be triggered before the command is executed.
+      this._finalizeComposition(false);
     }
 
     if (ev.keyCode === 229) {

src/InputHandler.ts

@@ -1263,6 +1263,9 @@ export class InputHandler implements IInputHandler {
       } else if (p === 1) {
         // bold text
         flags |= FLAGS.BOLD;
+      } else if (p === 3) {
+        // italic text
+        flags |= FLAGS.ITALIC;
       } else if (p === 4) {
         // underlined text
         flags |= FLAGS.UNDERLINE;

src/Parser.ts

@@ -150,7 +150,7 @@ csiStateHandler['s'] = (handler, params) => handler.saveCursor(params);
 csiStateHandler['u'] = (handler, params) => handler.restoreCursor(params);
 csiStateHandler[C0.CAN] = (handler, params, prefix, postfix, parser) => parser.setState(ParserState.NORMAL);
 
-export enum ParserState {
+export const enum ParserState {
   NORMAL = 0,
   ESCAPED = 1,
   CSI_PARAM = 2,

src/SelectionManager.ts

@@ -54,7 +54,7 @@ interface IWordPosition {
 /**
  * A selection mode, this drives how the selection behaves on mouse move.
  */
-enum SelectionMode {
+const enum SelectionMode {
   NORMAL,
   WORD,
   LINE

src/Terminal.ts

@@ -103,6 +103,7 @@ const DEFAULT_OPTIONS: ITerminalOptions = {
   cursorStyle: 'block',
   bellSound: DEFAULT_BELL_SOUND,
   bellStyle: 'none',
+  drawBoldTextInBrightColors: true,
   enableBold: true,
   experimentalCharAtlas: 'static',
   fontFamily: 'courier-new, courier, monospace',

src/Types.ts

@@ -17,7 +17,7 @@ export type LineData = CharData[];
 export type LinkMatcherHandler = (event: MouseEvent, uri: string) => void;
 export type LinkMatcherValidationCallback = (uri: string, callback: (isValid: boolean) => void) => void;
 
-export enum LinkHoverEventTypes {
+export const enum LinkHoverEventTypes {
   HOVER = 'linkhover',
   TOOLTIP = 'linktooltip',
   LEAVE = 'linkleave'

src/handlers/AltClickHandler.ts

@@ -6,11 +6,11 @@
 import { ITerminal, ICircularList, LineData } from '../Types';
 import { C0 } from '../EscapeSequences';
 
-enum Direction {
-  Up = 'A',
-  Down = 'B',
-  Right = 'C',
-  Left = 'D'
+const enum Direction {
+  UP = 'A',
+  DOWN = 'B',
+  RIGHT = 'C',
+  LEFT = 'D'
 }
 
 export class AltClickHandler {
@@ -28,7 +28,7 @@ export class AltClickHandler {
     this._startCol = this._terminal.buffer.x;
     this._startRow = this._terminal.buffer.y;
 
-    [this._endCol, this._endRow] = this._terminal.mouseHelper.getCoords(
+    let coordinates = this._terminal.mouseHelper.getCoords(
       this._mouseEvent,
       this._terminal.element,
       this._terminal.charMeasure,
@@ -36,16 +36,20 @@ export class AltClickHandler {
       this._terminal.cols,
       this._terminal.rows,
       false
-    ).map((coordinate: number) => {
-      return coordinate - 1;
-    });
+    );
+
+    if (coordinates) {
+      [this._endCol, this._endRow] = coordinates.map((coordinate: number) => {
+        return coordinate - 1;
+      });
+    }
   }
 
   /**
    * Writes the escape sequences of arrows to the terminal
    */
   public move(): void {
-    if (this._mouseEvent.altKey) {
+    if (this._mouseEvent.altKey && this._endCol !== undefined && this._endRow !== undefined) {
       this._terminal.send(this._arrowSequences());
     }
   }
@@ -73,12 +77,11 @@ export class AltClickHandler {
   private _resetStartingRow(): string {
     if (this._moveToRequestedRow().length === 0) {
       return '';
-    } else {
-      return repeat(this._bufferLine(
-        this._startCol, this._startRow, this._startCol,
-        this._startRow - this._wrappedRowsForRow(this._startRow), false
-      ).length, this._sequence(Direction.Left));
     }
+    return repeat(this._bufferLine(
+      this._startCol, this._startRow, this._startCol,
+      this._startRow - this._wrappedRowsForRow(this._startRow), false
+    ).length, this._sequence(Direction.LEFT));
   }
 
   /**
@@ -110,7 +113,7 @@ export class AltClickHandler {
 
     return repeat(this._bufferLine(
       this._startCol, startRow, this._endCol, endRow,
-      direction === Direction.Right
+      direction === Direction.RIGHT
     ).length, this._sequence(direction));
   }
 
@@ -133,7 +136,7 @@ export class AltClickHandler {
     let endRow = this._endRow - this._wrappedRowsForRow(this._endRow);
 
     for (let i = 0; i < Math.abs(startRow - endRow); i++) {
-      let direction = this._verticalDirection() === Direction.Up ? -1 : 1;
+      let direction = this._verticalDirection() === Direction.UP ? -1 : 1;
 
       if ((<any>this._lines.get(startRow + (direction * i))).isWrapped) {
         wrappedRows++;
@@ -179,10 +182,9 @@ export class AltClickHandler {
       startRow <= this._endRow) || // down/right or same y/right
       (this._startCol >= this._endCol &&
       startRow < this._endRow)) {  // down/left or same y/left
-      return Direction.Right;
-    } else {
-      return Direction.Left;
+      return Direction.RIGHT;
     }
+    return Direction.LEFT;
   }
 
   /**
@@ -190,10 +192,9 @@ export class AltClickHandler {
    */
   private _verticalDirection(): Direction {
     if (this._startRow > this._endRow) {
-      return Direction.Up;
-    } else {
-      return Direction.Down;
+      return Direction.UP;
     }
+    return Direction.DOWN;
   }
 
   /**

src/renderer/BaseRenderLayer.ts

@@ -214,7 +214,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param color The color of the character.
    */
   protected fillCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number): void {
-    this._ctx.font = this._getFont(terminal, false);
+    this._ctx.font = this._getFont(terminal, false, false);
     this._ctx.textBaseline = 'top';
     this._clipRow(terminal, y);
     this._ctx.fillText(
@@ -237,16 +237,18 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * This is used to validate whether a cached image can be used.
    * @param bold Whether the text is bold.
    */
-  protected drawChar(terminal: ITerminal, char: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean): void {
+  protected drawChar(terminal: ITerminal, char: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean, italic: boolean): void {
+    const drawInBrightColor = terminal.options.drawBoldTextInBrightColors && bold && fg < 8;
+    fg += drawInBrightColor ? 8 : 0;
     const atlasDidDraw = this._charAtlas && this._charAtlas.draw(
       this._ctx,
-      {char, code, bg, fg, bold: bold && terminal.options.enableBold, dim},
+      {char, code, bg, fg, bold: bold && terminal.options.enableBold, dim, italic},
       x * this._scaledCellWidth + this._scaledCharLeft,
       y * this._scaledCellHeight + this._scaledCharTop
     );
 
     if (!atlasDidDraw) {
-      this._drawUncachedChar(terminal, char, width, fg, x, y, bold && terminal.options.enableBold, dim);
+      this._drawUncachedChar(terminal, char, width, fg, x, y, bold && terminal.options.enableBold, dim, italic);
     }
   }
 
@@ -261,9 +263,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to draw at.
    * @param y The row to draw at.
    */
-  private _drawUncachedChar(terminal: ITerminal, char: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean): void {
+  private _drawUncachedChar(terminal: ITerminal, char: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean, italic: boolean): void {
     this._ctx.save();
-    this._ctx.font = this._getFont(terminal, bold);
+    this._ctx.font = this._getFont(terminal, bold, italic);
     this._ctx.textBaseline = 'top';
 
     if (fg === INVERTED_DEFAULT_COLOR) {
@@ -309,10 +311,11 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param terminal The terminal.
    * @param isBold If we should use the bold fontWeight.
    */
-  protected _getFont(terminal: ITerminal, isBold: boolean): string {
+  protected _getFont(terminal: ITerminal, isBold: boolean, isItalic: boolean): string {
     const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight;
+    const fontStyle = isItalic ? 'italic' : '';
 
-    return `${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    return `${fontStyle} ${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
   }
 }
 

src/renderer/TextRenderLayer.ts

@@ -32,7 +32,7 @@ export class TextRenderLayer extends BaseRenderLayer {
     super.resize(terminal, dim);
 
     // Clear the character width cache if the font or width has changed
-    const terminalFont = this._getFont(terminal, false);
+    const terminalFont = this._getFont(terminal, false, false);
     if (this._characterWidth !== dim.scaledCharWidth || this._characterFont !== terminalFont) {
       this._characterWidth = dim.scaledCharWidth;
       this._characterFont = terminalFont;
@@ -116,30 +116,63 @@ export class TextRenderLayer extends BaseRenderLayer {
           }
         }
 
-        if (flags & FLAGS.BOLD) {
-          // Convert the FG color to the bold variant
-          if (fg < 8) {
-            fg += 8;
-          }
-        }
-
         callback(code, char, width, x, y, fg, bg, flags);
       }
     }
   }
 
+  /**
+   * Draws the background for a specified range of columns. Tries to batch adjacent cells of the
+   * same color together to reduce draw calls.
+   */
   private _drawBackground(terminal: ITerminal, firstRow: number, lastRow: number): void {
+    const ctx = this._ctx;
+    const cols = terminal.cols;
+    let startX: number = 0;
+    let startY: number = 0;
+    let prevFillStyle: string | null = null;
+
+    ctx.save();
+
     this._forEachCell(terminal, firstRow, lastRow, (code, char, width, x, y, fg, bg, flags) => {
       // libvte and xterm both draw the background (but not foreground) of invisible characters,
       // so we should too.
-      const isDefaultBackground = bg >= 256;
-      if (!isDefaultBackground) {
-        this._ctx.save();
-        this._ctx.fillStyle = (bg === INVERTED_DEFAULT_COLOR ? this._colors.foreground.css : this._colors.ansi[bg].css);
-        this.fillCells(x, y, width, 1);
-        this._ctx.restore();
+      let nextFillStyle = null; // null represents default background color
+      if (bg === INVERTED_DEFAULT_COLOR) {
+        nextFillStyle = this._colors.foreground.css;
+      } else if (bg < 256) {
+        nextFillStyle = this._colors.ansi[bg].css;
       }
+
+      if (prevFillStyle === null) {
+        // This is either the first iteration, or the default background was set. Either way, we
+        // don't need to draw anything.
+        startX = x;
+        startY = y;
+      } if (y !== startY) {
+        // our row changed, draw the previous row
+        ctx.fillStyle = prevFillStyle;
+        this.fillCells(startX, startY, cols - startX, 1);
+        startX = x;
+        startY = y;
+      } else if (prevFillStyle !== nextFillStyle) {
+        // our color changed, draw the previous characters in this row
+        ctx.fillStyle = prevFillStyle;
+        this.fillCells(startX, startY, x - startX, 1);
+        startX = x;
+        startY = y;
+      }
+
+      prevFillStyle = nextFillStyle;
     });
+
+    // flush the last color we encountered
+    if (prevFillStyle !== null) {
+      ctx.fillStyle = prevFillStyle;
+      this.fillCells(startX, startY, cols - startX, 1);
+    }
+
+    ctx.restore();
   }
 
   private _drawForeground(terminal: ITerminal, firstRow: number, lastRow: number): void {
@@ -164,7 +197,7 @@ export class TextRenderLayer extends BaseRenderLayer {
         terminal, char, code,
         width, x, y,
         fg, bg,
-        !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM)
+        !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM), !!(flags & FLAGS.ITALIC)
       );
     });
   }

src/renderer/Types.ts

@@ -10,13 +10,14 @@ import { IColorSet } from '../shared/Types';
 /**
  * Flags used to render terminal text properly.
  */
-export enum FLAGS {
+export const enum FLAGS {
   BOLD = 1,
   UNDERLINE = 2,
   BLINK = 4,
   INVERSE = 8,
   INVISIBLE = 16,
-  DIM = 32
+  DIM = 32,
+  ITALIC = 64
 }
 
 export interface IRenderer extends IEventEmitter {

src/renderer/atlas/BaseCharAtlas.ts

@@ -48,6 +48,6 @@ export default abstract class BaseCharAtlas {
     ctx: CanvasRenderingContext2D,
     glyph: IGlyphIdentifier,
     x: number,
-    y: number,
+    y: number
   ): boolean;
 }

src/renderer/atlas/CharAtlasCache.ts

@@ -15,7 +15,7 @@ import StaticCharAtlas from './StaticCharAtlas';
 const charAtlasImplementations = {
   'none': NoneCharAtlas,
   'static': StaticCharAtlas,
-  'dynamic': DynamicCharAtlas,
+  'dynamic': DynamicCharAtlas
 };
 
 interface ICharAtlasCacheEntry {
@@ -38,7 +38,7 @@ export function acquireCharAtlas(
   terminal: ITerminal,
   colors: IColorSet,
   scaledCharWidth: number,
-  scaledCharHeight: number,
+  scaledCharHeight: number
 ): BaseCharAtlas {
   const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors);
 
@@ -51,15 +51,14 @@ export function acquireCharAtlas(
     if (ownedByIndex >= 0) {
       if (configEquals(entry.config, newConfig)) {
         return entry.atlas;
-      } else {
-        // The configs differ, release the terminal from the entry
-        if (entry.ownedBy.length === 1) {
-          charAtlasCache.splice(i, 1);
-        } else {
-          entry.ownedBy.splice(ownedByIndex, 1);
-        }
-        break;
       }
+      // The configs differ, release the terminal from the entry
+      if (entry.ownedBy.length === 1) {
+        charAtlasCache.splice(i, 1);
+      } else {
+        entry.ownedBy.splice(ownedByIndex, 1);
+      }
+      break;
     }
   }
 
@@ -76,10 +75,10 @@ export function acquireCharAtlas(
   const newEntry: ICharAtlasCacheEntry = {
     atlas: new charAtlasImplementations[terminal.options.experimentalCharAtlas](
       document,
-      newConfig,
+      newConfig
     ),
     config: newConfig,
-    ownedBy: [terminal],
+    ownedBy: [terminal]
   };
   charAtlasCache.push(newEntry);
   return newEntry.atlas;

src/renderer/atlas/CharAtlasUtils.ts

@@ -17,7 +17,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     selection: null,
     // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
     // dynamic character atlas.
-    ansi: colors.ansi.slice(0, 16),
+    ansi: colors.ansi.slice(0, 16)
   };
   return {
     type: terminal.options.experimentalCharAtlas,

src/renderer/atlas/DynamicCharAtlas.ts

@@ -18,8 +18,8 @@ const TEXTURE_HEIGHT = 1024;
 
 const TRANSPARENT_COLOR = {
   css: 'rgba(0, 0, 0, 0)',
-  rgba: 0,
-}
+  rgba: 0
+};
 
 // Drawing to the cache is expensive: If we have to draw more than this number of glyphs to the
 // cache in a single frame, give up on trying to cache anything else, and try to finish the current
@@ -35,7 +35,8 @@ interface IGlyphCacheValue {
 }
 
 function getGlyphCacheKey(glyph: IGlyphIdentifier): string {
-  return `${glyph.bg}_${glyph.fg}_${glyph.bold ? 0 : 1}${glyph.dim ? 0 : 1}${glyph.char}`;
+  const styleFlags = (glyph.bold ? 0 : 4) + (glyph.dim ? 0 : 2) + (glyph.italic ? 0 : 1);
+  return `${glyph.bg}_${glyph.fg}_${styleFlags}${glyph.char}`;
 }
 
 export default class DynamicCharAtlas extends BaseCharAtlas {
@@ -89,7 +90,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     ctx: CanvasRenderingContext2D,
     glyph: IGlyphIdentifier,
     x: number,
-    y: number,
+    y: number
   ): boolean {
     const glyphKey = getGlyphCacheKey(glyph);
     const cacheValue = this._cacheMap.get(glyphKey);
@@ -108,9 +109,8 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
       this._cacheMap.set(glyphKey, cacheValue);
       this._drawFromCache(ctx, cacheValue, x, y);
       return true;
-    } else {
-      return false;
     }
+    return false;
   }
 
   private _canCache(glyph: IGlyphIdentifier): boolean {
@@ -151,7 +151,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
       x,
       y,
       this._config.scaledCharWidth,
-      this._config.scaledCharHeight,
+      this._config.scaledCharHeight
     );
   }
 
@@ -172,9 +172,8 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
       return this._config.colors.foreground;
     } else if (glyph.bg < 256) {
       return this._getColorFromAnsiIndex(glyph.bg);
-    } else {
-      return this._config.colors.background;
     }
+    return this._config.colors.background;
   }
 
   private _getForegroundColor(glyph: IGlyphIdentifier): IColor {
@@ -183,9 +182,8 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     } else if (glyph.fg < 256) {
       // 256 color support
       return this._getColorFromAnsiIndex(glyph.fg);
-    } else {
-      return this._config.colors.foreground;
     }
+    return this._config.colors.foreground;
   }
 
   // TODO: We do this (or something similar) in multiple places. We should split this off
@@ -206,11 +204,9 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
 
     // draw the foreground/glyph
     const fontWeight = glyph.bold ? this._config.fontWeightBold : this._config.fontWeight;
+    const fontStyle = glyph.italic ? 'italic' : '';
     this._tmpCtx.font =
-      `${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
-    if (glyph.bold) {
-      this._tmpCtx.font = `bold ${this._tmpCtx.font}`;
-    }
+      `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
     this._tmpCtx.textBaseline = 'top';
 
     this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
@@ -226,7 +222,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     // clear the background from the character to avoid issues with drawing over the previous
     // character if it extends past it's bounds
     const imageData = this._tmpCtx.getImageData(
-      0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight,
+      0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
     );
     let isEmpty = false;
     if (!this._config.allowTransparency) {
@@ -240,7 +236,7 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
 
     return {
       index,
-      isEmpty,
+      isEmpty
     };
   }
 }

src/renderer/atlas/LRUMap.ts

@@ -4,10 +4,10 @@
  */
 
 interface ILinkedListNode<T> {
-  prev: ILinkedListNode<T>,
-  next: ILinkedListNode<T>,
-  key: string,
-  value: T,
+  prev: ILinkedListNode<T>;
+  next: ILinkedListNode<T>;
+  key: string;
+  value: T;
 }
 
 export default class LRUMap<T> {
@@ -56,14 +56,14 @@ export default class LRUMap<T> {
    * Each empty object only consumes about 60 bytes of memory, so this is pretty cheap, even for
    * large maps.
    */
-  public prealloc(count: number) {
+  public prealloc(count: number): void {
     const nodePool = this._nodePool;
     for (let i = 0; i < count; i++) {
       nodePool.push({
         prev: null,
         next: null,
         key: null,
-        value: null,
+        value: null
       });
     }
   }
@@ -114,7 +114,7 @@ export default class LRUMap<T> {
           prev: null,
           next: null,
           key,
-          value,
+          value
         };
       }
       this._map[key] = node;

src/renderer/atlas/StaticCharAtlas.ts

@@ -22,33 +22,31 @@ export default class StaticCharAtlas extends BaseCharAtlas {
     return canvas;
   }
 
-  public _doWarmUp() {
+  public _doWarmUp(): void {
     const result = generateStaticCharAtlasTexture(window, this._canvasFactory, this._config);
     if (result instanceof HTMLCanvasElement) {
       this._texture = result;
     } else {
       result.then(texture => {
-        this._texture = texture
+        this._texture = texture;
       });
     }
   }
 
   private _isCached(glyph: IGlyphIdentifier, colorIndex: number): boolean {
     const isAscii = glyph.code < 256;
-    // A color is basic if it is one of the standard normal or bold weight
-    // colors of the characters held in the char atlas. Note that this excludes
-    // the normal weight _light_ color characters.
-    const isBasicColor = (colorIndex > 1 && glyph.fg < 16) && (glyph.fg < 8 || glyph.bold);
+    // A color is basic if it is one of the 4 bit ANSI colors.
+    const isBasicColor = glyph.fg < 16;
     const isDefaultColor = glyph.fg >= 256;
     const isDefaultBackground = glyph.bg >= 256;
-    return isAscii && (isBasicColor || isDefaultColor) && isDefaultBackground;
+    return isAscii && (isBasicColor || isDefaultColor) && isDefaultBackground && !glyph.italic;
   }
 
   public draw(
     ctx: CanvasRenderingContext2D,
     glyph: IGlyphIdentifier,
     x: number,
-    y: number,
+    y: number
   ): boolean {
     // we're not warmed up yet
     if (this._texture == null) {
@@ -57,7 +55,7 @@ export default class StaticCharAtlas extends BaseCharAtlas {
 
     let colorIndex = 0;
     if (glyph.fg < 256) {
-      colorIndex = glyph.fg + 2;
+      colorIndex = 2 + glyph.fg + (glyph.bold ? 16 : 0);
     } else {
       // If default color and bold
       if (glyph.bold) {
@@ -76,14 +74,6 @@ export default class StaticCharAtlas extends BaseCharAtlas {
       ctx.globalAlpha = DIM_OPACITY;
     }
 
-    // Draw the non-bold version of the same color if bold is not enabled
-    /*if (glyph.bold && !terminal.options.enableBold) {
-      // Ignore default color as it's not touched above
-      if (colorIndex > 1) {
-        colorIndex -= 8;
-      }
-    }*/
-
     ctx.drawImage(
       this._texture,
       glyph.code * charAtlasCellWidth,

src/renderer/atlas/Types.ts

@@ -13,4 +13,5 @@ export interface IGlyphIdentifier {
   fg: number;
   bold: boolean;
   dim: boolean;
+  italic: boolean;
 }

src/shared/atlas/CharAtlasGenerator.ts

@@ -28,7 +28,7 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
   const cellHeight = config.scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
   const canvas = canvasFactory(
     /*255 ascii chars*/255 * cellWidth,
-    (/*default+default bold*/2 + /*0-15*/16) * cellHeight
+    (/*default+default bold*/2 + /*0-15*/16 + /*0-15 bold*/16) * cellHeight
   );
   const ctx = canvas.getContext('2d', {alpha: config.allowTransparency});
 
@@ -65,10 +65,6 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
   // Colors 0-15
   ctx.font = getFont(config.fontWeight, config);
   for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
-    // colors 8-15 are bold
-    if (colorIndex === 8) {
-      ctx.font = getFont(config.fontWeightBold, config);
-    }
     const y = (colorIndex + 2) * cellHeight;
     // Draw ascii characters
     for (let i = 0; i < 256; i++) {
@@ -81,6 +77,22 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
       ctx.restore();
     }
   }
+
+  // Colors 0-15 bold
+  ctx.font = getFont(config.fontWeightBold, config);
+  for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
+    const y = (colorIndex + 2 + 16) * cellHeight;
+    // Draw ascii characters
+    for (let i = 0; i < 256; i++) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(i * cellWidth, y, cellWidth, cellHeight);
+      ctx.clip();
+      ctx.fillStyle = config.colors.ansi[colorIndex].css;
+      ctx.fillText(String.fromCharCode(i), i * cellWidth, y);
+      ctx.restore();
+    }
+  }
   ctx.restore();
 
   // Support is patchy for createImageBitmap at the moment, pass a canvas back
@@ -92,10 +104,9 @@ export function generateStaticCharAtlasTexture(context: Window, canvasFactory: (
     if (canvas instanceof HTMLCanvasElement) {
       // Just return the HTMLCanvas if it's a HTMLCanvasElement
       return canvas;
-    } else {
-      // Transfer to an ImageBitmap is this is an OffscreenCanvas
-      return new Promise(r => r(canvas.transferToImageBitmap()));
     }
+    // Transfer to an ImageBitmap is this is an OffscreenCanvas
+    return new Promise(r => r(canvas.transferToImageBitmap()));
   }
 
   const charAtlasImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

src/xterm.css

@@ -126,13 +126,17 @@
     line-height: normal;
 }
 
+.xterm {
+    cursor: text;
+}
+
 .xterm.enable-mouse-events {
     /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
     cursor: default;
 }
 
-.xterm:not(.enable-mouse-events) {
-    cursor: text;
+.xterm.xterm-cursor-pointer {
+    cursor: pointer;
 }
 
 .xterm .xterm-accessibility,
@@ -153,7 +157,3 @@
     height: 1px;
     overflow: hidden;
 }
-
-.xterm-cursor-pointer {
-    cursor: pointer;
-}