Merge branch 'master' into clusters

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

@@ -379,7 +379,17 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     }
     this._ctx.save();
     this._clipRow(y);
+
     // Draw the image, use the bitmap if it's available
+
+    // HACK: If the canvas doesn't match, delete the generator. It's not clear how this happens but
+    // something is wrong with either the lifecycle of _bitmapGenerator or the page canvases are
+    // swapped out unexpectedly
+    if (this._bitmapGenerator[glyph.texturePage] && this._charAtlas.pages[glyph.texturePage].canvas !== this._bitmapGenerator[glyph.texturePage]!.canvas) {
+      this._bitmapGenerator[glyph.texturePage]?.bitmap?.close();
+      delete this._bitmapGenerator[glyph.texturePage];
+    }
+
     if (this._charAtlas.pages[glyph.texturePage].version !== this._bitmapGenerator[glyph.texturePage]?.version) {
       if (!this._bitmapGenerator[glyph.texturePage]) {
         this._bitmapGenerator[glyph.texturePage] = new BitmapGenerator(this._charAtlas.pages[glyph.texturePage].canvas);
@@ -446,11 +456,12 @@ class BitmapGenerator {
   public get bitmap(): ImageBitmap | undefined { return this._bitmap; }
   public version: number = -1;
 
-  constructor(private readonly _canvas: HTMLCanvasElement) {
+  constructor(public readonly canvas: HTMLCanvasElement) {
   }
 
   public refresh(): void {
     // Clear the bitmap immediately as it's stale
+    this._bitmap?.close();
     this._bitmap = undefined;
     // Disable ImageBitmaps on Safari because of https://bugs.webkit.org/show_bug.cgi?id=149990
     if (isSafari) {
@@ -466,9 +477,10 @@ class BitmapGenerator {
 
   private _generate(): void {
     if (this._state === BitmapGeneratorState.IDLE) {
+      this._bitmap?.close();
       this._bitmap = undefined;
       this._state = BitmapGeneratorState.GENERATING;
-      window.createImageBitmap(this._canvas).then(bitmap => {
+      window.createImageBitmap(this.canvas).then(bitmap => {
         if (this._state === BitmapGeneratorState.GENERATING_INVALID) {
           this.refresh();
         } else {

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

@@ -4,7 +4,7 @@
  */
 
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, ISelectionService, IThemeService } from 'browser/services/Services';
-import { IColorSet, ITerminal } from 'browser/Types';
+import { ITerminal } from 'browser/Types';
 import { CanvasRenderer } from './CanvasRenderer';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';

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

@@ -188,12 +188,6 @@ export class TextRenderLayer extends BaseRenderLayer {
         nextFillStyle = this._themeService.colors.ansi[cell.getBgColor()].css;
       }
 
-      // Apply dim to the background, this is relatively slow as the CSS is re-parsed but dim is
-      // rarely used
-      if (nextFillStyle && cell.isDim()) {
-        nextFillStyle = color.multiplyOpacity(css.toColor(nextFillStyle), 0.5).css;
-      }
-
       // Get any decoration foreground/background overrides, this must be fetched before the early
       // exist but applied after inverse
       let isTop = false;

addons/xterm-addon-serialize/src/SerializeAddon.ts

@@ -77,6 +77,7 @@ function equalFlags(cell1: IBufferCell | IAttributeData, cell2: IBufferCell): bo
   return cell1.isInverse() === cell2.isInverse()
     && cell1.isBold() === cell2.isBold()
     && cell1.isUnderline() === cell2.isUnderline()
+    && cell1.isOverline() === cell2.isOverline()
     && cell1.isBlink() === cell2.isBlink()
     && cell1.isInvisible() === cell2.isInvisible()
     && cell1.isItalic() === cell2.isItalic()
@@ -264,6 +265,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
           if (cell.isInverse() !== oldCell.isInverse()) { sgrSeq.push(cell.isInverse() ? 7 : 27); }
           if (cell.isBold() !== oldCell.isBold()) { sgrSeq.push(cell.isBold() ? 1 : 22); }
           if (cell.isUnderline() !== oldCell.isUnderline()) { sgrSeq.push(cell.isUnderline() ? 4 : 24); }
+          if (cell.isOverline() !== oldCell.isOverline()) { sgrSeq.push(cell.isOverline() ? 53 : 55); }
           if (cell.isBlink() !== oldCell.isBlink()) { sgrSeq.push(cell.isBlink() ? 5 : 25); }
           if (cell.isInvisible() !== oldCell.isInvisible()) { sgrSeq.push(cell.isInvisible() ? 8 : 28); }
           if (cell.isItalic() !== oldCell.isItalic()) { sgrSeq.push(cell.isItalic() ? 3 : 23); }
@@ -625,7 +627,9 @@ export class HTMLSerializeHandler extends BaseSerializeHandler {
 
       if (cell.isInverse()) { content.push('color: #000000; background-color: #BFBFBF;'); }
       if (cell.isBold()) { content.push('font-weight: bold;'); }
-      if (cell.isUnderline()) { content.push('text-decoration: underline;'); }
+      if (cell.isUnderline() && cell.isOverline()) { content.push('text-decoration: overline underline;'); }
+      else if (cell.isUnderline()) { content.push('text-decoration: underline;'); }
+      else if (cell.isOverline()) { content.push('text-decoration: overline;'); }
       if (cell.isBlink()) { content.push('text-decoration: blink;'); }
       if (cell.isInvisible()) { content.push('visibility: hidden;'); }
       if (cell.isItalic()) { content.push('font-style: italic;'); }

addons/xterm-addon-serialize/test/SerializeAddon.api.ts

@@ -220,6 +220,18 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
+  it('serialize all rows of content with overline', async () => {
+    const cols = 10;
+    const line = '+'.repeat(cols);
+    const lines: string[] = [
+      sgr(OVERLINED) + line,                   // Overlined
+      sgr(UNDERLINED) + line,                  // Overlined, Underlined
+      sgr(NORMAL) + line                       // Normal
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
   it('serialize all rows of content with color16 and style separately', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
@@ -601,6 +613,7 @@ const BLINK = '5';
 const INVERSE = '7';
 const INVISIBLE = '8';
 const STRIKETHROUGH = '9';
+const OVERLINED = '53';
 
 const NO_BOLD = '22';
 const NO_DIM = '22';
@@ -610,3 +623,4 @@ const NO_BLINK = '25';
 const NO_INVERSE = '27';
 const NO_INVISIBLE = '28';
 const NO_STRIKETHROUGH = '29';
+const NO_OVERLINED = '55';

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

@@ -270,7 +270,7 @@ export class RectangleRenderer extends Disposable {
     $r = (($rgba >> 24) & 0xFF) / 255;
     $g = (($rgba >> 16) & 0xFF) / 255;
     $b = (($rgba >> 8 ) & 0xFF) / 255;
-    $a = (!$isDefault && bg & BgFlags.DIM) ? DIM_OPACITY : 1;
+    $a = 1;
 
     this._addRectangle(vertices.attributes, offset, $x1, $y1, (endX - startX) * this._dimensions.device.cell.width, this._dimensions.device.cell.height, $r, $g, $b, $a);
   }

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

@@ -336,13 +336,16 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
 
     // Tell renderer the frame is beginning
+    // upon a model clear also refresh the full viewport model
+    // (also triggered by an atlas page merge, part of #4480)
     if (this._glyphRenderer.beginFrame()) {
       this._clearModel(true);
+      this._updateModel(0, this._terminal.rows - 1);
+    } else {
+      // just update changed lines to draw
+      this._updateModel(start, end);
     }
 
-    // Update model to reflect what's drawn
-    this._updateModel(start, end);
-
     // Render
     this._rectangleRenderer?.render();
     this._glyphRenderer?.render(this._model);

addons/xterm-addon-webgl/test/WebglRenderer.api.ts

@@ -364,6 +364,55 @@ describe('WebGL Renderer Integration Tests', async () => {
       }
     });
 
+    itWebgl('foreground 16-255 dim', async () => {
+      let data = '';
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          data += `\\x1b[2;38;5;${16 + y * 16 + x}m█\x1b[0m`;
+        }
+        data += '\\r\\n';
+      }
+      await writeSync(page, data);
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const cssColor = COLORS_16_TO_255[y * 16 + x];
+          const r = parseInt(cssColor.slice(1, 3), 16);
+          const g = parseInt(cssColor.slice(3, 5), 16);
+          const b = parseInt(cssColor.slice(5, 7), 16);
+          // It's difficult to assert the exact color due to rounding, just ensure the color differs
+          // to the regular color
+          await pollFor(page, async () => {
+            const c = await getCellColor(x + 1, y + 1);
+            return (
+              (c[0] === 0 || c[0] !== r) &&
+              (c[1] === 0 || c[1] !== g) &&
+              (c[2] === 0 || c[2] !== b)
+            );
+          }, true);
+        }
+      }
+    });
+
+    itWebgl('background 16-255 dim', async () => {
+      let data = '';
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          data += `\\x1b[2;48;5;${16 + y * 16 + x}m \\x1b[0m`;
+        }
+        data += '\\r\\n';
+      }
+      await writeSync(page, data);
+      for (let y = 0; y < 240 / 16; y++) {
+        for (let x = 0; x < 16; x++) {
+          const cssColor = COLORS_16_TO_255[y * 16 + x];
+          const r = parseInt(cssColor.slice(1, 3), 16);
+          const g = parseInt(cssColor.slice(3, 5), 16);
+          const b = parseInt(cssColor.slice(5, 7), 16);
+          await pollFor(page, () => getCellColor(x + 1, y + 1), [r, g, b, 255]);
+        }
+      }
+    });
+
     itWebgl('foreground true color red', async () => {
       let data = '';
       for (let y = 0; y < 16; y++) {