Windows, macOS and Linux transparency

package.json

@@ -150,6 +150,7 @@
     "vscode-windows-registry": "1.0.1",
     "windows-foreground-love": "0.1.0",
     "windows-mutex": "0.2.1",
-    "windows-process-tree": "0.2.3"
+    "windows-process-tree": "0.2.3",
+    "windows-swca": "2.0.1"
   }
 }

src/main.js

@@ -151,6 +151,18 @@ function configureCommandlineSwitches(cliArgs, nodeCachedDataDir) {
 	if (cliArgs['disable-smooth-scrolling']) {
 		app.commandLine.appendSwitch('disable-smooth-scrolling');
 	}
+
+	// Linux: disable hardware acceleration when transparent window is enabled
+	if (process.platform === 'linux') {
+		const configFile = path.join(app.getPath('userData'), 'User', 'settings.json');
+		bootstrap.readFile(configFile).then(content => {
+			const config = JSON.parse(stripComments(content));
+			if (config['window.transparent']) {
+				app.commandLine.appendSwitch('enable-transparent-visuals');
+				app.disableHardwareAcceleration();
+			}
+		});
+	}
 }
 
 /**

src/vs/code/electron-main/app.ts

@@ -63,7 +63,7 @@ import { MenubarChannel } from 'vs/platform/menubar/node/menubarIpc';
 import { hasArgs } from 'vs/platform/environment/node/argv';
 import { RunOnceScheduler } from 'vs/base/common/async';
 import { registerContextMenuListener } from 'vs/base/parts/contextmenu/electron-main/contextmenu';
-import { storeBackgroundColor } from 'vs/code/electron-main/theme';
+import { storeColors } from 'vs/code/electron-main/theme';
 import { homedir } from 'os';
 import { join, sep } from 'vs/base/common/path';
 import { localize } from 'vs/nls';
@@ -303,7 +303,7 @@ export class CodeApplication extends Disposable {
 
 		// Theme changes
 		if (event === 'vscode:changeColorTheme' && typeof payload === 'string') {
-			storeBackgroundColor(this.stateService, JSON.parse(payload));
+			storeColors(this.stateService, JSON.parse(payload));
 		}
 	}
 

src/vs/code/electron-main/theme.ts

@@ -14,7 +14,7 @@ const DEFAULT_BG_HC_BLACK = '#000000';
 const THEME_STORAGE_KEY = 'theme';
 const THEME_BG_STORAGE_KEY = 'themeBackground';
 
-export function storeBackgroundColor(stateService: IStateService, data: { baseTheme: string, background: string }): void {
+export function storeColors(stateService: IStateService, data: { baseTheme: string, background: string }): void {
 	stateService.setItem(THEME_STORAGE_KEY, data.baseTheme);
 	stateService.setItem(THEME_BG_STORAGE_KEY, data.background);
 }
@@ -41,4 +41,8 @@ export function getBackgroundColor(stateService: IStateService): string {
 	}
 
 	return background;
+}
+
+export function setBackgroundColor(stateService: IStateService, background: string): void {
+	stateService.setItem(THEME_BG_STORAGE_KEY, background);
 }

src/vs/code/electron-main/window.ts

@@ -5,6 +5,7 @@
 
 import * as path from 'vs/base/common/path';
 import * as objects from 'vs/base/common/objects';
+import * as os from 'os';
 import * as nls from 'vs/nls';
 import { URI } from 'vs/base/common/uri';
 import { IStateService } from 'vs/platform/state/common/state';
@@ -23,7 +24,7 @@ import { IBackupMainService } from 'vs/platform/backup/common/backup';
 import { ISerializableCommandAction } from 'vs/platform/actions/common/actions';
 import * as perf from 'vs/base/common/performance';
 import { resolveMarketplaceHeaders } from 'vs/platform/extensionManagement/node/extensionGalleryService';
-import { getBackgroundColor } from 'vs/code/electron-main/theme';
+import { getBackgroundColor, setBackgroundColor } from 'vs/code/electron-main/theme';
 import { RunOnceScheduler } from 'vs/base/common/async';
 import { withNullAsUndefined } from 'vs/base/common/types';
 import { endsWith } from 'vs/base/common/strings';
@@ -116,6 +117,11 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 		this.registerListeners();
 	}
 
+	private setTransparentInfo(options: Electron.BrowserWindowConstructorOptions): void {
+		options.backgroundColor = '#00000000';
+		setBackgroundColor(this.stateService, 'transparent');
+	}
+
 	private createBrowserWindow(config: IWindowCreationOptions): void {
 
 		// Load window state
@@ -147,11 +153,17 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 			options.webPreferences!.nodeIntegration = false; // simulate Electron 5 behaviour
 		}
 
+		const windowConfig = this.configurationService.getValue<IWindowSettings>('window');
+
 		if (isLinux) {
 			options.icon = path.join(this.environmentService.appRoot, 'resources/linux/code.png'); // Windows and Mac are better off using the embedded icon(s)
-		}
 
-		const windowConfig = this.configurationService.getValue<IWindowSettings>('window');
+			// Make sure hardware acceleration is actually disabled.
+			options.transparent = windowConfig && windowConfig.transparent && app.getGPUFeatureStatus().gpu_compositing !== 'enabled';
+			if (options.transparent) {
+				this.setTransparentInfo(options);
+			}
+		}
 
 		if (isMacintosh && !this.useNativeFullScreen()) {
 			options.fullscreenable = false; // enables simple fullscreen mode
@@ -178,6 +190,19 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 			}
 		}
 
+		if (isMacintosh && windowConfig && windowConfig.vibrancy && windowConfig.vibrancy !== 'none') {
+			this.setTransparentInfo(options);
+			options.vibrancy = windowConfig.vibrancy;
+		}
+
+		const needsWinTransparency =
+			isWindows && windowConfig && windowConfig.compositionAttribute &&
+			windowConfig.compositionAttribute !== 'none' && parseFloat(os.release()) >= 10 &&
+			useCustomTitleStyle;
+		if (needsWinTransparency) {
+			this.setTransparentInfo(options);
+		}
+
 		// Create the browser window.
 		this._win = new BrowserWindow(options);
 		this._id = this._win.id;
@@ -186,6 +211,29 @@ export class CodeWindow extends Disposable implements ICodeWindow {
 			this._win.setSheetOffset(22); // offset dialogs by the height of the custom title bar if we have any
 		}
 
+		if (needsWinTransparency) {
+			const { ACCENT_STATE, SetWindowCompositionAttribute } = require.__$__nodeRequire('windows-swca');
+			let attribValue = ACCENT_STATE.ACCENT_DISABLED;
+			switch (windowConfig.compositionAttribute) {
+				case 'acrylic':
+					// Fluent/acrylic flag was introduced in Windows 10 build 17063 (between FCU and April 2018 update)
+					if (parseInt(os.release().split('.')[2]) >= 17063) {
+						attribValue = ACCENT_STATE.ACCENT_ENABLE_ACRYLICBLURBEHIND;
+					}
+					break;
+
+				case 'blur':
+					attribValue = ACCENT_STATE.ACCENT_ENABLE_BLURBEHIND;
+					break;
+
+				case 'transparent':
+					attribValue = ACCENT_STATE.ACCENT_ENABLE_TRANSPARENTGRADIENT;
+					break;
+			}
+
+			SetWindowCompositionAttribute(this._win.getNativeWindowHandle(), attribValue, 0);
+		}
+
 		if (isFullscreenOrMaximized) {
 			this._win.maximize();
 

src/vs/editor/browser/viewParts/minimap/minimap.ts

@@ -408,6 +408,7 @@ class MinimapBuffers {
 		const backgroundR = background.r;
 		const backgroundG = background.g;
 		const backgroundB = background.b;
+		const backgroundA = background.a;
 
 		const result = new Uint8ClampedArray(WIDTH * HEIGHT * 4);
 		let offset = 0;
@@ -416,7 +417,7 @@ class MinimapBuffers {
 				result[offset] = backgroundR;
 				result[offset + 1] = backgroundG;
 				result[offset + 2] = backgroundB;
-				result[offset + 3] = 255;
+				result[offset + 3] = backgroundA;
 				offset += 4;
 			}
 		}

src/vs/editor/common/view/minimapCharRenderer.ts

@@ -135,10 +135,12 @@ export class MinimapCharRenderer {
 		const backgroundR = backgroundColor.r;
 		const backgroundG = backgroundColor.g;
 		const backgroundB = backgroundColor.b;
+		const backgroundA = backgroundColor.a;
 
 		const deltaR = color.r - backgroundR;
 		const deltaG = color.g - backgroundG;
 		const deltaB = color.b - backgroundB;
+		const deltaA = color.a - backgroundA;
 
 		const dest = target.data;
 		const sourceOffset = chIndex * Constants.x2_CHAR_HEIGHT * Constants.x2_CHAR_WIDTH;
@@ -148,12 +150,14 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = backgroundR + deltaR * c;
 			dest[destOffset + 1] = backgroundG + deltaG * c;
 			dest[destOffset + 2] = backgroundB + deltaB * c;
+			dest[destOffset + 3] = backgroundA + deltaA * c;
 		}
 		{
 			const c = x2CharData[sourceOffset + 1] / 255;
 			dest[destOffset + 4] = backgroundR + deltaR * c;
 			dest[destOffset + 5] = backgroundG + deltaG * c;
 			dest[destOffset + 6] = backgroundB + deltaB * c;
+			dest[destOffset + 7] = backgroundA + deltaA * c;
 		}
 
 		destOffset += outWidth;
@@ -162,12 +166,14 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = backgroundR + deltaR * c;
 			dest[destOffset + 1] = backgroundG + deltaG * c;
 			dest[destOffset + 2] = backgroundB + deltaB * c;
+			dest[destOffset + 3] = backgroundA + deltaA * c;
 		}
 		{
 			const c = x2CharData[sourceOffset + 3] / 255;
 			dest[destOffset + 4] = backgroundR + deltaR * c;
 			dest[destOffset + 5] = backgroundG + deltaG * c;
 			dest[destOffset + 6] = backgroundB + deltaB * c;
+			dest[destOffset + 7] = backgroundA + deltaA * c;
 		}
 
 		destOffset += outWidth;
@@ -176,12 +182,14 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = backgroundR + deltaR * c;
 			dest[destOffset + 1] = backgroundG + deltaG * c;
 			dest[destOffset + 2] = backgroundB + deltaB * c;
+			dest[destOffset + 3] = backgroundA + deltaA * c;
 		}
 		{
 			const c = x2CharData[sourceOffset + 5] / 255;
 			dest[destOffset + 4] = backgroundR + deltaR * c;
 			dest[destOffset + 5] = backgroundG + deltaG * c;
 			dest[destOffset + 6] = backgroundB + deltaB * c;
+			dest[destOffset + 7] = backgroundA + deltaA * c;
 		}
 
 		destOffset += outWidth;
@@ -190,12 +198,14 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = backgroundR + deltaR * c;
 			dest[destOffset + 1] = backgroundG + deltaG * c;
 			dest[destOffset + 2] = backgroundB + deltaB * c;
+			dest[destOffset + 3] = backgroundA + deltaA * c;
 		}
 		{
 			const c = x2CharData[sourceOffset + 7] / 255;
 			dest[destOffset + 4] = backgroundR + deltaR * c;
 			dest[destOffset + 5] = backgroundG + deltaG * c;
 			dest[destOffset + 6] = backgroundB + deltaB * c;
+			dest[destOffset + 7] = backgroundA + deltaA * c;
 		}
 	}
 
@@ -212,10 +222,12 @@ export class MinimapCharRenderer {
 		const backgroundR = backgroundColor.r;
 		const backgroundG = backgroundColor.g;
 		const backgroundB = backgroundColor.b;
+		const backgroundA = backgroundColor.a;
 
 		const deltaR = color.r - backgroundR;
 		const deltaG = color.g - backgroundG;
 		const deltaB = color.b - backgroundB;
+		const deltaA = color.a - backgroundA;
 
 		const dest = target.data;
 		const sourceOffset = chIndex * Constants.x1_CHAR_HEIGHT * Constants.x1_CHAR_WIDTH;
@@ -225,6 +237,7 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = backgroundR + deltaR * c;
 			dest[destOffset + 1] = backgroundG + deltaG * c;
 			dest[destOffset + 2] = backgroundB + deltaB * c;
+			dest[destOffset + 3] = backgroundA + deltaA * c;
 		}
 
 		destOffset += outWidth;
@@ -233,6 +246,7 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = backgroundR + deltaR * c;
 			dest[destOffset + 1] = backgroundG + deltaG * c;
 			dest[destOffset + 2] = backgroundB + deltaB * c;
+			dest[destOffset + 3] = backgroundA + deltaA * c;
 		}
 	}
 
@@ -249,62 +263,73 @@ export class MinimapCharRenderer {
 		const backgroundR = backgroundColor.r;
 		const backgroundG = backgroundColor.g;
 		const backgroundB = backgroundColor.b;
+		const backgroundA = backgroundColor.a;
 
 		const deltaR = color.r - backgroundR;
 		const deltaG = color.g - backgroundG;
 		const deltaB = color.b - backgroundB;
+		const deltaA = color.a - backgroundA;
 
 		const colorR = backgroundR + deltaR * c;
 		const colorG = backgroundG + deltaG * c;
 		const colorB = backgroundB + deltaB * c;
+		const colorA = backgroundA + deltaA * c;
 
 		const dest = target.data;
 		let destOffset = dy * outWidth + dx * Constants.RGBA_CHANNELS_CNT;
 		{
 			dest[destOffset + 0] = colorR;
 			dest[destOffset + 1] = colorG;
 			dest[destOffset + 2] = colorB;
+			dest[destOffset + 3] = colorA;
 		}
 		{
 			dest[destOffset + 4] = colorR;
 			dest[destOffset + 5] = colorG;
 			dest[destOffset + 6] = colorB;
+			dest[destOffset + 7] = colorA;
 		}
 
 		destOffset += outWidth;
 		{
 			dest[destOffset + 0] = colorR;
 			dest[destOffset + 1] = colorG;
 			dest[destOffset + 2] = colorB;
+			dest[destOffset + 3] = colorA;
 		}
 		{
 			dest[destOffset + 4] = colorR;
 			dest[destOffset + 5] = colorG;
 			dest[destOffset + 6] = colorB;
+			dest[destOffset + 7] = colorA;
 		}
 
 		destOffset += outWidth;
 		{
 			dest[destOffset + 0] = colorR;
 			dest[destOffset + 1] = colorG;
 			dest[destOffset + 2] = colorB;
+			dest[destOffset + 3] = colorA;
 		}
 		{
 			dest[destOffset + 4] = colorR;
 			dest[destOffset + 5] = colorG;
 			dest[destOffset + 6] = colorB;
+			dest[destOffset + 7] = colorA;
 		}
 
 		destOffset += outWidth;
 		{
 			dest[destOffset + 0] = colorR;
 			dest[destOffset + 1] = colorG;
 			dest[destOffset + 2] = colorB;
+			dest[destOffset + 3] = colorA;
 		}
 		{
 			dest[destOffset + 4] = colorR;
 			dest[destOffset + 5] = colorG;
 			dest[destOffset + 6] = colorB;
+			dest[destOffset + 7] = colorA;
 		}
 	}
 
@@ -321,14 +346,17 @@ export class MinimapCharRenderer {
 		const backgroundR = backgroundColor.r;
 		const backgroundG = backgroundColor.g;
 		const backgroundB = backgroundColor.b;
+		const backgroundA = backgroundColor.a;
 
 		const deltaR = color.r - backgroundR;
 		const deltaG = color.g - backgroundG;
 		const deltaB = color.b - backgroundB;
+		const deltaA = color.a - backgroundA;
 
 		const colorR = backgroundR + deltaR * c;
 		const colorG = backgroundG + deltaG * c;
 		const colorB = backgroundB + deltaB * c;
+		const colorA = backgroundA + deltaA * c;
 
 		const dest = target.data;
 
@@ -337,13 +365,15 @@ export class MinimapCharRenderer {
 			dest[destOffset + 0] = colorR;
 			dest[destOffset + 1] = colorG;
 			dest[destOffset + 2] = colorB;
+			dest[destOffset + 3] = colorA;
 		}
 
 		destOffset += outWidth;
 		{
 			dest[destOffset + 0] = colorR;
 			dest[destOffset + 1] = colorG;
 			dest[destOffset + 2] = colorB;
+			dest[destOffset + 3] = colorA;
 		}
 	}
 }