Inactive selection bg in dom renderer

Part of #3803

src/browser/renderer/dom/DomRenderer.ts

@@ -220,9 +220,13 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` z-index: 1;` +
       ` pointer-events: none;` +
       `}` +
-      `${this._terminalSelector} .${SELECTION_CLASS} div {` +
+      `${this._terminalSelector}.focus .${SELECTION_CLASS} div {` +
       ` position: absolute;` +
       ` background-color: ${this._colors.selectionBackgroundOpaque.css};` +
+      `}` +
+      `${this._terminalSelector} .${SELECTION_CLASS} div {` +
+      ` position: absolute;` +
+      ` background-color: ${this._colors.selectionInactiveBackgroundOpaque.css};` +
       `}`;
     // Colors
     this._colors.ansi.forEach((c, i) => {

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

@@ -12,7 +12,7 @@ import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockCoreService, MockDecorationService, MockOptionsService } from 'common/TestUtils.test';
 import { css } from 'common/Color';
-import { MockCharacterJoinerService } from 'browser/TestUtils.test';
+import { MockCharacterJoinerService, MockCoreBrowserService } from 'browser/TestUtils.test';
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -49,6 +49,7 @@ describe('DomRendererRowFactory', () => {
       } as any,
       new MockCharacterJoinerService(),
       new MockOptionsService({ drawBoldTextInBrightColors: true }),
+      new MockCoreBrowserService(),
       new MockCoreService(),
       new MockDecorationService()
     );

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -10,7 +10,7 @@ import { CellData } from 'common/buffer/CellData';
 import { 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, ICoreBrowserService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { excludeFromContrastRatioDemands } from 'browser/renderer/RendererUtils';
 
@@ -37,6 +37,7 @@ export class DomRendererRowFactory {
     private _colors: IColorSet,
     @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
     @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
     @ICoreService private readonly _coreService: ICoreService,
     @IDecorationService private readonly _decorationService: IDecorationService
   ) {
@@ -218,7 +219,7 @@ export class DomRendererRowFactory {
       // If in the selection, force the element to be above the selection to improve contrast and
       // support opaque selections
       if (isInSelection) {
-        bgOverride = this._colors.selectionBackgroundOpaque;
+        bgOverride = this._coreBrowserService.isFocused ? this._colors.selectionBackgroundOpaque : this._colors.selectionInactiveBackgroundOpaque;
         isTop = true;
       }