Render dim bg in all renderers

Fixes #3534

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

@@ -12,7 +12,7 @@ import { RectangleRenderer } from './RectangleRenderer';
 import { IWebGL2RenderingContext } from './Types';
 import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { Disposable } from 'common/Lifecycle';
-import { Attributes, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
+import { Attributes, BgFlags, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
 import { IRenderLayer } from './renderLayer/Types';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
@@ -24,6 +24,7 @@ import { ICharacterJoinerService } from 'browser/services/Services';
 import { CharData, ICellData } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { IDecorationService } from 'common/services/Services';
+import { color, rgba as rgbaNs } from 'common/Color';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
@@ -418,6 +419,46 @@ export class WebglRenderer extends Disposable implements IRenderer {
       }
     }
 
+    // Apply dim if there is no override yet as it's the default color, this requires resolving the
+    // attribute color ahead of time because it's a derivative of it
+    if (this._workColors.bg & BgFlags.DIM) {
+      // TODO: Share logic
+      let rgba: number | undefined;
+      if (this._workColors.fg & FgFlags.INVERSE) {
+        switch (this._workColors.fg & Attributes.CM_MASK) {
+          case Attributes.CM_P16:
+          case Attributes.CM_P256:
+            rgba = this._colors.ansi[this._workColors.fg & Attributes.PCOLOR_MASK].rgba;
+            break;
+          case Attributes.CM_RGB:
+            rgba = (this._workColors.fg & Attributes.RGB_MASK) << 8;
+            break;
+          case Attributes.CM_DEFAULT:
+          default:
+            rgba = this._colors.foreground.rgba;
+        }
+      } else {
+        switch (this._workColors.bg& Attributes.CM_MASK) {
+          case Attributes.CM_P16:
+          case Attributes.CM_P256:
+            rgba = this._colors.ansi[this._workColors.bg& Attributes.PCOLOR_MASK].rgba;
+            break;
+          case Attributes.CM_RGB:
+            rgba = (this._workColors.bg& Attributes.RGB_MASK) << 8;
+            break;
+          case Attributes.CM_DEFAULT:
+          default:
+            rgba = this._colors.background.rgba;
+        }
+      }
+      bgOverride = color.blend(this._colors.background, rgbaNs.toColor(
+        (rgba >> 24) & 0xFF,
+        (rgba >> 16) & 0xFF,
+        (rgba >>  8) & 0xFF,
+        0x80 // 50% opacity
+      )).rgba >> 8 & 0xFFFFFF;
+    }
+
     // Convert any overrides from rgba to the fg/bg packed format. This resolves the inverse flag
     // ahead of time in order to use the correct cache key
     if (bgOverride !== undefined) {

src/browser/renderer/TextRenderLayer.ts

@@ -14,6 +14,7 @@ import { CellData } from 'common/buffer/CellData';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
 import { ICharacterJoinerService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
+import { color, css } from 'common/Color';
 
 /**
  * This CharData looks like a null character, which will forc a clear and render
@@ -177,6 +178,14 @@ export class TextRenderLayer extends BaseRenderLayer {
         nextFillStyle = this._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()) {
+        console.log('old', nextFillStyle);
+        nextFillStyle = color.multiplyOpacity(css.toColor(nextFillStyle), 0.5).css;
+        console.log('new', nextFillStyle);
+      }
+
       // Get any decoration foreground/background overrides, this must be fetched before the early
       // exist but applied after inverse
       let isTop = false;

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -249,6 +249,13 @@ export class DomRendererRowFactory {
           }
       }
 
+      // If there is no background override by now it's the original color, so apply dim if needed
+      if (!bgOverride) {
+        if (cell.isDim()) {
+          bgOverride = color.multiplyOpacity(resolvedBg, 0.5);
+        }
+      }
+
       // Foreground
       switch (fgColorMode) {
         case Attributes.CM_P16:

src/common/Color.ts

@@ -84,6 +84,11 @@ export namespace color {
     };
   }
 
+  export function multiplyOpacity(color: IColor, factor: number): IColor {
+    const a = color.rgba & 0xFF;
+    return opacity(color, (a * factor) / 0xFF);
+  }
+
   export function toColorRGB(color: IColor): IColorRGB {
     return [(color.rgba >> 24) & 0xFF, (color.rgba >> 16) & 0xFF, (color.rgba >> 8) & 0xFF];
   }