Merge branch 'master' into fix-#4917

src/browser/renderer/dom/DomRenderer.ts

@@ -183,14 +183,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` font-style: italic;` +
       `}`;
     // Blink animation
+    const blinkAnimationUnderlineId = `blink_underline_${this._terminalClass}`;
+    const blinkAnimationBarId = `blink_bar_${this._terminalClass}`;
+    const blinkAnimationBlockId = `blink_block_${this._terminalClass}`;
     styles +=
-      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationUnderlineId} {` +
       ` 50% {` +
       `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
     styles +=
-      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationBarId} {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
+    styles +=
+      `@keyframes ${blinkAnimationBlockId} {` +
       ` 0% {` +
       `  background-color: ${colors.cursor.css};` +
       `  color: ${colors.cursorAccent.css};` +
@@ -202,13 +211,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
-      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` animation: ${blinkAnimationUnderlineId} 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      ` animation: ${blinkAnimationBarId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
-      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
+      // !important helps fix an issue where the cursor will not render on top of the selection,
+      // however it's very hard to fix this issue and retain the blink animation without the use of
+      // !important. So this edge case fails when cursor blink is on.
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` background-color: ${colors.cursor.css};` +
+      ` color: ${colors.cursorAccent.css};` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
       ` background-color: ${colors.cursor.css} !important;` +
       ` color: ${colors.cursorAccent.css} !important;` +
       `}` +

src/browser/renderer/dom/WidthCache.ts

@@ -134,9 +134,14 @@ export class WidthCache implements IDisposable {
   public get(c: string, bold: boolean | number, italic: boolean | number): number {
     let cp = 0;
     if (!bold && !italic && c.length === 1 && (cp = c.charCodeAt(0)) < WidthCacheSettings.FLAT_SIZE) {
-      return this._flat[cp] !== WidthCacheSettings.FLAT_UNSET
-        ? this._flat[cp]
-        : (this._flat[cp] = this._measure(c, 0));
+      if (this._flat[cp] !== WidthCacheSettings.FLAT_UNSET) {
+        return this._flat[cp];
+      }
+      const width = this._measure(c, 0);
+      if (width > 0) {
+        this._flat[cp] = width;
+      }
+      return width;
     }
     let key = c;
     if (bold) key += 'B';
@@ -147,7 +152,9 @@ export class WidthCache implements IDisposable {
       if (bold) variant |= FontVariant.BOLD;
       if (italic) variant |= FontVariant.ITALIC;
       width = this._measure(c, variant);
-      this._holey!.set(key, width);
+      if (width > 0) {
+        this._holey!.set(key, width);
+      }
     }
     return width;
   }

src/browser/renderer/shared/CellColorResolver.ts

@@ -92,7 +92,7 @@ export class CellColorResolver {
               $bg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
               break;
             case Attributes.CM_RGB:
-              $bg = (this.result.fg & Attributes.RGB_MASK) << 8 | 0xFF;
+              $bg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
               break;
             case Attributes.CM_DEFAULT:
             default:
@@ -105,7 +105,7 @@ export class CellColorResolver {
               $bg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
               break;
             case Attributes.CM_RGB:
-              $bg = this.result.bg & Attributes.RGB_MASK << 8 | 0xFF;
+              $bg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
               break;
             // No need to consider default bg color here as it's not possible
           }
@@ -143,7 +143,7 @@ export class CellColorResolver {
                 $fg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
                 break;
               case Attributes.CM_RGB:
-                $fg = this.result.bg & Attributes.RGB_MASK << 8 | 0xFF;
+                $fg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
                 break;
               // No need to consider default bg color here as it's not possible
             }
@@ -154,7 +154,7 @@ export class CellColorResolver {
                 $fg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
                 break;
               case Attributes.CM_RGB:
-                $fg = (this.result.fg & Attributes.RGB_MASK) << 8 | 0xFF;
+                $fg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
                 break;
               case Attributes.CM_DEFAULT:
               default:

src/browser/renderer/shared/RendererUtils.ts

@@ -23,10 +23,43 @@ export function isRestrictedPowerlineGlyph(codepoint: number): boolean {
   return 0xE0B0 <= codepoint && codepoint <= 0xE0B7;
 }
 
+function isNerdFontGlyph(codepoint: number): boolean {
+  return 0xE000 <= codepoint && codepoint <= 0xF8FF;
+}
+
 function isBoxOrBlockGlyph(codepoint: number): boolean {
   return 0x2500 <= codepoint && codepoint <= 0x259F;
 }
 
+export function isEmoji(codepoint: number): boolean {
+  return (
+    codepoint >= 0x1F600 && codepoint <= 0x1F64F || // Emoticons
+    codepoint >= 0x1F300 && codepoint <= 0x1F5FF || // Misc Symbols and Pictographs
+    codepoint >= 0x1F680 && codepoint <= 0x1F6FF || // Transport and Map
+    codepoint >= 0x2600  && codepoint <= 0x26FF  || // Misc symbols
+    codepoint >= 0x2700  && codepoint <= 0x27BF  || // Dingbats
+    codepoint >= 0xFE00  && codepoint <= 0xFE0F  || // Variation Selectors
+    codepoint >= 0x1F900 && codepoint <= 0x1F9FF || // Supplemental Symbols and Pictographs
+    codepoint >= 0x1F1E6 && codepoint <= 0x1F1FF
+  );
+}
+
+export function allowRescaling(codepoint: number | undefined, width: number, glyphSizeX: number, deviceCellWidth: number): boolean {
+  return (
+    // Is single cell width
+    width === 1 &&
+    // Glyph exceeds cell bounds, add 50% to avoid hurting readability by rescaling glyphs that
+    // barely overlap
+    glyphSizeX > Math.ceil(deviceCellWidth * 1.5) &&
+    // Never rescale ascii
+    codepoint !== undefined && codepoint > 0xFF &&
+    // Never rescale emoji
+    !isEmoji(codepoint) &&
+    // Never rescale powerline or nerd fonts
+    !isPowerlineGlyph(codepoint) && !isNerdFontGlyph(codepoint)
+  );
+}
+
 export function treatGlyphAsBackgroundColor(codepoint: number): boolean {
   return isPowerlineGlyph(codepoint) || isBoxOrBlockGlyph(codepoint);
 }