tmp

app/lib/window.ts

@@ -12,11 +12,6 @@ import { compare as compareVersions } from 'compare-versions'
 import type { Application } from './app'
 import { parseArgs } from './cli'
 
-let DwmEnableBlurBehindWindow: any = null
-if (process.platform === 'win32') {
-    DwmEnableBlurBehindWindow = require('@tabby-gang/windows-blurbehind').DwmEnableBlurBehindWindow
-}
-
 export interface WindowOptions {
     hidden?: boolean
 }
@@ -177,6 +172,10 @@ export class Window {
         this.window.webContents.send('host:became-main-window')
     }
 
+    setMaterial (material: string): void {
+        this.window.setBackgroundMaterial(material)
+    }
+
     setVibrancy (enabled: boolean, type?: string, userRequested?: boolean): void {
         if (userRequested ?? true) {
             this.lastVibrancy = { enabled, type }
@@ -190,8 +189,6 @@ export class Window {
                 } catch (error) {
                     console.error('Failed to set window blur', error)
                 }
-            } else {
-                DwmEnableBlurBehindWindow(this.window.getNativeWindowHandle(), enabled)
             }
         } else if (process.platform === 'linux') {
             this.window.setBackgroundColor(enabled ? '#00000000' : '#131d27')
@@ -373,6 +370,10 @@ export class Window {
             this.setVibrancy(enabled, type)
         })
 
+        this.on('window-set-material', (_, material) => {
+            this.setMaterial(material)
+        })
+
         this.on('window-set-window-controls-color', (_, theme) => {
             if (process.platform === 'win32') {
                 const symbolColor: string = theme.foreground

app/package.json

@@ -35,7 +35,6 @@
     "yargs": "^17.7.2"
   },
   "optionalDependencies": {
-    "@tabby-gang/windows-blurbehind": "^3.0.0",
     "macos-native-processlist": "^2.1.0",
     "patch-package": "^6.5.0",
     "serialport": "11.0.1",

app/webpack.config.main.mjs

@@ -54,7 +54,6 @@ const config = {
         'source-map-support': 'commonjs source-map-support',
         'windows-swca': 'commonjs windows-swca',
         'windows-native-registry': 'commonjs windows-native-registry',
-        '@tabby-gang/windows-blurbehind': 'commonjs @tabby-gang/windows-blurbehind',
         'yargs/yargs': 'commonjs yargs/yargs',
     },
     plugins: [

tabby-core/src/utils.ts

@@ -6,6 +6,7 @@ export const WIN_BUILD_CONPTY_SUPPORTED = 17692
 export const WIN_BUILD_CONPTY_STABLE = 18309
 export const WIN_BUILD_WSL_EXE_DISTRO_FLAG = 17763
 export const WIN_BUILD_FLUENT_BG_SUPPORTED = 17063
+export const WIN_BUILD_WINDOW_MATERIAL_SUPPORTED = 22621
 
 export function getWindows10Build (): number|undefined {
     return process.platform === 'win32' && parseFloat(os.release()) >= 10 ? parseInt(os.release().split('.')[2]) : undefined

tabby-electron/src/index.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { PlatformService, LogService, UpdaterService, DockingService, HostAppService, ThemesService, Platform, AppService, ConfigService, WIN_BUILD_FLUENT_BG_SUPPORTED, isWindowsBuild, HostWindowService, HotkeyProvider, ConfigProvider, FileProvider } from 'tabby-core'
+import { PlatformService, LogService, UpdaterService, DockingService, HostAppService, ThemesService, Platform, AppService, ConfigService, WIN_BUILD_FLUENT_BG_SUPPORTED, isWindowsBuild, HostWindowService, HotkeyProvider, ConfigProvider, FileProvider, WIN_BUILD_WINDOW_MATERIAL_SUPPORTED } from 'tabby-core'
 import { TerminalColorSchemeProvider } from 'tabby-terminal'
 import { SFTPContextMenuItemProvider, SSHProfileImporter, AutoPrivateKeyLocator } from 'tabby-ssh'
 import { PTYInterface, ShellProvider, UACService } from 'tabby-local'
@@ -164,13 +164,25 @@ export default class ElectronModule {
     }
 
     private updateVibrancy () {
+        this.hostWindow.setOpacity(this.config.store.appearance.opacity)
+
+        if (isWindowsBuild(WIN_BUILD_WINDOW_MATERIAL_SUPPORTED)) {
+            this.electron.ipcRenderer.send(
+                'window-set-material',
+                this.config.store.appearance.vibrancy
+                    ? this.config.store.appearance.vibrancyType === 'fluent'
+                        ? 'mica'
+                        : 'acrylic'
+                    : 'none',
+            )
+            return
+        }
+
         let vibrancyType = this.config.store.appearance.vibrancyType
         if (this.hostApp.platform === Platform.Windows && !isWindowsBuild(WIN_BUILD_FLUENT_BG_SUPPORTED)) {
             vibrancyType = null
         }
         this.electron.ipcRenderer.send('window-set-vibrancy', this.config.store.appearance.vibrancy, vibrancyType)
-
-        this.hostWindow.setOpacity(this.config.store.appearance.opacity)
     }
 
     private updateWindowControlsColor () {

tabby-electron/src/services/hostApp.service.ts

@@ -1,5 +1,5 @@
 import { Injectable, NgZone, Injector } from '@angular/core'
-import { isWindowsBuild, WIN_BUILD_FLUENT_BG_SUPPORTED, HostAppService, Platform, CLIHandler } from 'tabby-core'
+import { isWindowsBuild, WIN_BUILD_FLUENT_BG_SUPPORTED, HostAppService, Platform, CLIHandler, WIN_BUILD_WINDOW_MATERIAL_SUPPORTED } from 'tabby-core'
 import { ElectronService } from '../services/electron.service'
 
 
@@ -49,7 +49,7 @@ export class ElectronHostAppService extends HostAppService {
             this.configChangeBroadcast.next()
         }))
 
-        if (isWindowsBuild(WIN_BUILD_FLUENT_BG_SUPPORTED)) {
+        if (isWindowsBuild(WIN_BUILD_FLUENT_BG_SUPPORTED) && !isWindowsBuild(WIN_BUILD_WINDOW_MATERIAL_SUPPORTED)) {
             electron.ipcRenderer.send('window-set-disable-vibrancy-while-dragging', true)
         }
     }

tabby-settings/src/components/windowSettingsTab.component.pug

@@ -34,16 +34,17 @@ h3.mb-3(translate) Window
 
 .form-line(*ngIf='platform.supportsWindowControls')
     .header
-        .title(*ngIf='hostApp.platform !== Platform.macOS', translate) Acrylic background
+        .title(*ngIf='hostApp.platform !== Platform.macOS', translate) Blurred background
         .title(*ngIf='hostApp.platform === Platform.macOS', translate) Vibrancy
-        .description(translate) Gives the window a blurred transparent background
+        .description(*ngIf='hostApp.platform !== Platform.Linux', translate) Gives the window a blurred transparent background
+        .description(*ngIf='hostApp.platform === Platform.Linux', translate) Enables transparent windows background under KWM
 
     toggle(
         [(ngModel)]='config.store.appearance.vibrancy',
         (ngModelChange)='saveConfiguration()'
     )
 
-.form-line(*ngIf='config.store.appearance.vibrancy && isFluentVibrancySupported && config.store.hacks.enableFluentBackground')
+.form-line(*ngIf='config.store.appearance.vibrancy && (isWindowMaterialSupported || (isFluentVibrancySupported && config.store.hacks.enableFluentBackground))')
     .header
         .title(translate) Background type
     .btn-group

tabby-settings/src/components/windowSettingsTab.component.ts

@@ -12,6 +12,7 @@ import {
     BaseComponent,
     Screen,
     PlatformService,
+    WIN_BUILD_WINDOW_MATERIAL_SUPPORTED,
 } from 'tabby-core'
 
 
@@ -24,6 +25,7 @@ export class WindowSettingsTabComponent extends BaseComponent {
     screens: Screen[]
     Platform = Platform
     isFluentVibrancySupported = false
+    isWindowMaterialSupported = false
 
     @HostBinding('class.content-box') true
 
@@ -48,6 +50,7 @@ export class WindowSettingsTabComponent extends BaseComponent {
         }
 
         this.isFluentVibrancySupported = isWindowsBuild(WIN_BUILD_FLUENT_BG_SUPPORTED)
+        this.isWindowMaterialSupported = isWindowsBuild(WIN_BUILD_WINDOW_MATERIAL_SUPPORTED)
     }
 
     @debounce(500)