Support selectionForeground in dom

Part of #3810

src/browser/renderer/dom/DomRenderer.ts

@@ -281,6 +281,8 @@ export class DomRenderer extends Disposable implements IRenderer {
       this._selectionContainer.removeChild(this._selectionContainer.children[0]);
     }
 
+    this.renderRows(0, this._bufferService.rows - 1);
+
     // Selection does not exist
     if (!start || !end) {
       return;

src/browser/renderer/dom/DomRendererRowFactory.test.ts

@@ -10,9 +10,9 @@ import { NULL_CELL_CODE, NULL_CELL_WIDTH, NULL_CELL_CHAR, DEFAULT_ATTR, FgFlags,
 import { BufferLine, DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { MockCoreService, MockDecorationService, MockOptionsService } from 'common/TestUtils.test';
+import { MockBufferService, MockCoreService, MockDecorationService, MockOptionsService } from 'common/TestUtils.test';
 import { css } from 'common/Color';
-import { MockCharacterJoinerService } from 'browser/TestUtils.test';
+import { MockCharacterJoinerService, MockSelectionService } from 'browser/TestUtils.test';
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -50,7 +50,9 @@ describe('DomRendererRowFactory', () => {
       new MockCharacterJoinerService(),
       new MockOptionsService({ drawBoldTextInBrightColors: true }),
       new MockCoreService(),
-      new MockDecorationService()
+      new MockDecorationService(),
+      new MockBufferService(80, 30),
+      new MockSelectionService()
     );
     lineData = createEmptyLineData(2);
   });

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -7,10 +7,10 @@ import { IBufferLine, ICellData, IColor } from 'common/Types';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { NULL_CELL_CODE, WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { color, rgba } from 'common/Color';
 import { IColorSet } from 'browser/Types';
-import { ICharacterJoinerService } from 'browser/services/Services';
+import { ICharacterJoinerService, ISelectionService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { isPowerlineGlyph } from 'browser/renderer/RendererUtils';
 
@@ -34,7 +34,9 @@ export class DomRendererRowFactory {
     @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @ICoreService private readonly _coreService: ICoreService,
-    @IDecorationService private readonly _decorationService: IDecorationService
+    @IDecorationService private readonly _decorationService: IDecorationService,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @ISelectionService private readonly _selectionService: ISelectionService
   ) {
   }
 
@@ -195,6 +197,14 @@ export class DomRendererRowFactory {
         isTop = d.options.layer === 'top';
       }
 
+      // Apply selection foreground if applicable
+      if (!isTop) {
+        if (this._colors.selectionForeground && this._selectionService.isCellInSelection(x, row)) {
+          fg = this._colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
+          fgOverride = this._colors.selectionForeground;
+        }
+      }
+
       // If it's a top decoration, render above the selection
       if (isTop) {
         charElement.classList.add(`xterm-decoration-top`);