Inactive selection bg in canvas

addons/xterm-addon-canvas/src/CanvasRenderer.ts

@@ -12,7 +12,7 @@ import { LinkRenderLayer } from './LinkRenderLayer';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifier2 } from 'browser/Types';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
-import { IBufferService, IOptionsService, IInstantiationService, IDecorationService, ICoreService } from 'common/services/Services';
+import { IBufferService, IOptionsService, IDecorationService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from './atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { observeDevicePixelDimensions } from 'browser/renderer/DevicePixelObserver';
@@ -46,7 +46,7 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     const allowTransparency = this._optionsService.rawOptions.allowTransparency;
     this._renderLayers = [
       new TextRenderLayer(this._screenElement, 0, this._colors, allowTransparency, this._id, this._bufferService, this._optionsService, characterJoinerService, decorationService),
-      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, this._optionsService, decorationService),
+      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, coreBrowserService, decorationService, this._optionsService),
       new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier2, this._bufferService, this._optionsService, decorationService),
       new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, coreBrowserService, decorationService)
     ];

addons/xterm-addon-canvas/src/CursorRenderLayer.ts

@@ -36,7 +36,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     zIndex: number,
     colors: IColorSet,
     rendererId: number,
-    private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
+    private readonly _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
     bufferService: IBufferService,
     optionsService: IOptionsService,
     private readonly _coreService: ICoreService,

addons/xterm-addon-canvas/src/SelectionRenderLayer.ts

@@ -3,10 +3,12 @@
  * @license MIT
  */
 
-import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { IColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreBrowserService } from 'browser/services/Services';
+import { IEventEmitter } from 'common/EventEmitter';
 
 interface ISelectionState {
   start?: [number, number];
@@ -24,8 +26,9 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     bufferService: IBufferService,
-    optionsService: IOptionsService,
+    private readonly _coreBrowserService: ICoreBrowserService,
-    decorationService: IDecorationService
+    decorationService: IDecorationService,
+    optionsService: IOptionsService
   ) {
     super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
     this._clearState();
@@ -45,7 +48,7 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     // On resize use the base render layer's cached selection values since resize clears _state
     // inside reset.
     if (this._selectionStart && this._selectionEnd) {
-      this.onSelectionChanged(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+      this._redrawSelection(this._selectionStart, this._selectionEnd, this._columnSelectMode);
     }
   }
 
@@ -56,9 +59,22 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     }
   }
 
+  public onBlur(): void {
+    this.reset();
+    this._redrawSelection(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+  }
+
+  public onFocus(): void {
+    this.reset();
+    this._redrawSelection(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+  }
+
   public onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
     super.onSelectionChanged(start, end, columnSelectMode);
+    this._redrawSelection(start, end, columnSelectMode);
+  }
 
+  private _redrawSelection(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
     // Selection has not changed
     if (!this._didStateChange(start, end, columnSelectMode, this._bufferService.buffer.ydisp)) {
       return;
@@ -85,7 +101,9 @@ export class SelectionRenderLayer extends BaseRenderLayer {
       return;
     }
 
-    this._ctx.fillStyle = this._colors.selectionBackgroundTransparent.css;
+    this._ctx.fillStyle = (this._coreBrowserService.isFocused
+      ? this._colors.selectionBackgroundTransparent
+      : this._colors.selectionInactiveBackgroundTransparent).css;
 
     if (columnSelectMode) {
       const startCol = start[0];

src/browser/ColorManager.ts

@@ -155,6 +155,10 @@ export class ColorManager implements IColorManager {
       const opacity = 0.3;
       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]);
     this.colors.ansi[1] = this._parseColor(theme.red, DEFAULT_ANSI_COLORS[1]);