Merge branch 'master' into underline

src/browser/ColorManager.ts

@@ -102,9 +102,11 @@ export class ColorManager implements IColorManager {
       background: DEFAULT_BACKGROUND,
       cursor: DEFAULT_CURSOR,
       cursorAccent: DEFAULT_CURSOR_ACCENT,
-      selectionTransparent: DEFAULT_SELECTION,
-      selectionOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       selectionForeground: undefined,
+      selectionBackgroundTransparent: DEFAULT_SELECTION,
+      selectionBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
+      selectionInactiveBackgroundTransparent: DEFAULT_SELECTION,
+      selectionInactiveBackgroundOpaque: color.blend(DEFAULT_BACKGROUND, DEFAULT_SELECTION),
       ansi: DEFAULT_ANSI_COLORS.slice(),
       contrastCache: this._contrastCache
     };
@@ -132,8 +134,10 @@ export class ColorManager implements IColorManager {
     this.colors.background = this._parseColor(theme.background, DEFAULT_BACKGROUND);
     this.colors.cursor = this._parseColor(theme.cursor, DEFAULT_CURSOR, true);
     this.colors.cursorAccent = this._parseColor(theme.cursorAccent, DEFAULT_CURSOR_ACCENT, true);
-    this.colors.selectionTransparent = this._parseColor(theme.selection, DEFAULT_SELECTION, true);
-    this.colors.selectionOpaque = color.blend(this.colors.background, this.colors.selectionTransparent);
+    this.colors.selectionBackgroundTransparent = this._parseColor(theme.selectionBackground, DEFAULT_SELECTION, true);
+    this.colors.selectionBackgroundOpaque = color.blend(this.colors.background, this.colors.selectionBackgroundTransparent);
+    this.colors.selectionInactiveBackgroundTransparent = this._parseColor(theme.selectionInactiveBackground, this.colors.selectionBackgroundTransparent, true);
+    this.colors.selectionInactiveBackgroundOpaque = color.blend(this.colors.background, this.colors.selectionInactiveBackgroundTransparent);
     const nullColor: IColor = {
       css: '',
       rgba: 0
@@ -147,9 +151,13 @@ export class ColorManager implements IColorManager {
      * If selection color is opaque, blend it with background with 0.3 opacity
      * Issue #2737
      */
-    if (color.isOpaque(this.colors.selectionTransparent)) {
+    if (color.isOpaque(this.colors.selectionBackgroundTransparent)) {
       const opacity = 0.3;
-      this.colors.selectionTransparent = color.opacity(this.colors.selectionTransparent, opacity);
+      this.colors.selectionBackgroundTransparent = color.opacity(this.colors.selectionBackgroundTransparent, opacity);
+    }
+    if (color.isOpaque(this.colors.selectionInactiveBackgroundTransparent)) {
+      const opacity = 0.3;
+      this.colors.selectionInactiveBackgroundTransparent = color.opacity(this.colors.selectionInactiveBackgroundTransparent, opacity);
     }
     this.colors.ansi = DEFAULT_ANSI_COLORS.slice();
     this.colors.ansi[0] = this._parseColor(theme.black, DEFAULT_ANSI_COLORS[0]);

src/browser/TestUtils.test.ts

@@ -5,7 +5,7 @@
 
 import { IDisposable, IMarker, ILinkProvider, IDecorationOptions, IDecoration } from 'xterm';
 import { IEvent, EventEmitter } from 'common/EventEmitter';
-import { ICharacterJoinerService, ICharSizeService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { IColorSet, ITerminal, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper, CharacterJoinerHandler, IRenderDebouncer, IBufferRange } from 'browser/Types';
 import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types';
@@ -340,6 +340,11 @@ export class MockCompositionHelper implements ICompositionHelper {
   }
 }
 
+export class MockCoreBrowserService implements ICoreBrowserService {
+  public serviceBrand: undefined;
+  public isFocused: boolean = true;
+}
+
 export class MockCharSizeService implements ICharSizeService {
   public serviceBrand: undefined;
   public get hasValidSize(): boolean { return this.width > 0 && this.height > 0; }

src/browser/Types.d.ts

@@ -115,10 +115,12 @@ export interface IColorSet {
   background: IColor;
   cursor: IColor;
   cursorAccent: IColor;
-  selectionTransparent: IColor;
-  /** The selection blended on top of background. */
-  selectionOpaque: IColor;
   selectionForeground: IColor | undefined;
+  selectionBackgroundTransparent: IColor;
+  /** The selection blended on top of background. */
+  selectionBackgroundOpaque: IColor;
+  selectionInactiveBackgroundTransparent: IColor;
+  selectionInactiveBackgroundOpaque: IColor;
   ansi: IColor[];
   contrastCache: IColorContrastCache;
 }
@@ -136,7 +138,7 @@ export interface IPartialColorSet {
   background: IColor;
   cursor?: IColor;
   cursorAccent?: IColor;
-  selection?: IColor;
+  selectionBackground?: IColor;
   ansi: IColor[];
 }
 

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}.focus .${SELECTION_CLASS} div {` +
+      ` position: absolute;` +
+      ` background-color: ${this._colors.selectionBackgroundOpaque.css};` +
+      `}` +
       `${this._terminalSelector} .${SELECTION_CLASS} div {` +
       ` position: absolute;` +
-      ` background-color: ${this._colors.selectionOpaque.css};` +
+      ` 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';
 import { AttributeData } from 'common/buffer/AttributeData';
@@ -38,6 +38,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
   ) {
@@ -233,7 +234,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.selectionOpaque;
+        bgOverride = this._coreBrowserService.isFocused ? this._colors.selectionBackgroundOpaque : this._colors.selectionInactiveBackgroundOpaque;
         isTop = true;
       }
 
@@ -264,6 +265,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];
   }

src/common/services/Services.ts

@@ -250,8 +250,9 @@ export interface ITheme {
   background?: string;
   cursor?: string;
   cursorAccent?: string;
-  selection?: string;
   selectionForeground?: string;
+  selectionBackground?: string;
+  selectionInactiveBackground?: string;
   black?: string;
   red?: string;
   green?: string;