Implement Window Controls Overlay

app/lib/window.ts

@@ -92,8 +92,11 @@ export class Window {
         if (this.configStore.appearance?.frame === 'native') {
             bwOptions.frame = true
         } else {
-            if (process.platform === 'darwin') {
-                bwOptions.titleBarStyle = 'hidden'
+            bwOptions.titleBarStyle = 'hidden'
+            if (process.platform === 'win32') {
+                bwOptions.titleBarOverlay = {
+                    color: '#00000000',
+                }
             }
         }
 
@@ -384,6 +387,21 @@ export class Window {
             this.setVibrancy(enabled, type)
         })
 
+        ipcMain.on('window-set-window-controls-color', (event, theme) => {
+            if (!this.window || event.sender !== this.window.webContents) {
+                return
+            }
+
+            const symbolColor: string = theme.foreground
+
+            this.window.setTitleBarOverlay(
+                {
+                    symbolColor: symbolColor,
+                    height: 32,
+                },
+            )
+        })
+
         ipcMain.on('window-set-title', (event, title) => {
             if (!this.window || event.sender !== this.window.webContents) {
                 return

package.json

@@ -39,7 +39,7 @@
     "cross-env": "7.0.3",
     "css-loader": "^6.7.3",
     "deep-equal": "2.0.5",
-    "electron": "22.3.1",
+    "electron": "^25.3.0",
     "electron-builder": "^24.0.0-alpha.1",
     "electron-download": "^4.1.1",
     "electron-installer-snap": "^5.1.0",

tabby-core/src/components/appRoot.component.pug

@@ -1,16 +1,20 @@
 title-bar(
   *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
   (dblclick)='hostWindow.toggleMaximize()',
+  [hideControls]='hostApp.platform !== Platform.Linux && !hostWindow.isFullscreen',
   [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullscreen'
 )
 
 .content(
     *ngIf='ready',
     [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
-    [class.tabs-on-side]='hasVerticalTabs()',
+    [class.tabs-on-left]='hasVerticalTabs() && config.store.appearance.tabsLocation == "left"',
+    [class.tabs-titlebar-enabled]='config.store.appearance.frame == "full"',
+    [class.tabs-on-right]='hasVerticalTabs() && config.store.appearance.tabsLocation == "right"',
 )
     .tab-bar(
         *ngIf='!hostWindow.isFullscreen || config.store.appearance.tabsInFullscreen',
+        [class.tab-bar-no-controls-overlay]='hostApp.platform == Platform.macOS',
         (dblclick)='hostWindow.toggleMaximize()'
     )
         .inset.background(*ngIf='hostApp.platform == Platform.macOS \
@@ -81,9 +85,12 @@ title-bar(
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" \
-            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+            && (hostApp.platform == Platform.Linux)',
         )
 
+        div.window-controls-spacer(
+            *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows) && (config.store.appearance.tabsLocation == "top")',
+        )
     .content
         start-page.content-tab.content-tab-active(*ngIf='ready && app.tabs.length == 0')
 

tabby-core/src/components/appRoot.component.scss

@@ -35,17 +35,16 @@ $tab-border-radius: 4px;
         flex-direction: column;
     }
 
-    &.tabs-on-side {
+    &.tabs-on-right {
         flex-direction: row-reverse;
-
-        &.tabs-on-top {
-            flex-direction: row;
-        }
     }
 
+    &.tabs-on-left {
+        flex-direction: row;
+    }
 }
 
-.content.tabs-on-side > .tab-bar {
+.content.tabs-on-left > .tab-bar, .content.tabs-on-right > .tab-bar {
     height: 100%;
     width: var(--side-tab-width);
     overflow-y: auto;
@@ -76,6 +75,18 @@ $tab-border-radius: 4px;
     }
 }
 
+.content.tabs-on-left > .tab-bar.tab-bar-no-controls-overlay, .content.tabs-titlebar-enabled {
+    .tabs {
+        padding-top: 0 !important;
+    }
+}
+
+.content.tabs-on-right > .tab-bar {
+    .tabs {
+        // Account for WCO on Windows.
+        padding-top: 36px;
+    }
+}
 
 .tab-bar {
     flex: none;
@@ -125,10 +136,17 @@ $tab-border-radius: 4px;
         }
 
         &.persistent {
-          min-width: 72px; // 2 x 36 px height, ie 2 squares
+        //   min-width: 72px; // 2 x 36 px height, ie 2 squares
+        // Given WCO on Windows, the min-width of the window buttons is about 138px.
+            min-width: 138px;
         }
     }
 
+    &>.window-controls-spacer {
+        min-width: 138px;
+        height: 100%;
+    }
+
     & > .inset {
         width: calc(70px + 15px * var(--spaciness));
         height: var(--tabs-height);

tabby-core/src/components/titleBar.component.pug

@@ -1,2 +1,2 @@
 .title((dblclick)='hostWindow.toggleMaximize()') Tabby
-window-controls
+window-controls(*ngIf="!hideControls")

tabby-core/src/components/titleBar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, Input } from '@angular/core'
 import { HostWindowService } from '../api'
 
 /** @hidden */
@@ -8,5 +8,7 @@ import { HostWindowService } from '../api'
     styleUrls: ['./titleBar.component.scss'],
 })
 export class TitleBarComponent {
+    @Input() hideControls: boolean
+
     constructor (public hostWindow: HostWindowService) { }
 }

tabby-electron/src/index.ts

@@ -99,6 +99,7 @@ export default class ElectronModule {
             })
             this.registerGlobalHotkey()
             this.updateVibrancy()
+            this.updateWindowControlsColor()
         })
 
         config.changed$.subscribe(() => {
@@ -131,6 +132,8 @@ export default class ElectronModule {
 
         config.changed$.subscribe(() => this.updateVibrancy())
 
+        config.changed$.subscribe(() => this.updateWindowControlsColor())
+
         config.ready$.toPromise().then(() => {
             dockMenu.update()
         })
@@ -169,6 +172,15 @@ export default class ElectronModule {
 
         this.hostWindow.setOpacity(this.config.store.appearance.opacity)
     }
+
+    private updateWindowControlsColor () {
+        // if windows and not using native frame, WCO does not exist, return.
+        if (this.hostApp.platform === Platform.Windows && this.config.store.appearance.frame === 'native') {
+            return
+        }
+
+        this.electron.ipcRenderer.send('window-set-window-controls-color', this.config.store.terminal.colorScheme)
+    }
 }
 
 export { ElectronHostWindow, ElectronHostAppService, ElectronService }

yarn.lock

@@ -829,10 +829,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
   integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
 
-"@types/node@^16.11.26":
-  version "16.11.26"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.26.tgz#63d204d136c9916fb4dcd1b50f9740fe86884e47"
-  integrity sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==
+"@types/node@^18.11.18":
+  version "18.16.19"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.19.tgz#cb03fca8910fdeb7595b755126a8a78144714eea"
+  integrity sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==
 
 "@types/parse5@^5":
   version "5.0.3"
@@ -3066,13 +3066,13 @@ electron-to-chromium@^1.4.284:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.286.tgz#0e039de59135f44ab9a8ec9025e53a9135eba11f"
   integrity sha512-Vp3CVhmYpgf4iXNKAucoQUDcCrBQX3XLBtwgFqP9BUXuucgvAV9zWp1kYU7LL9j4++s9O+12cb3wMtN4SJy6UQ==
 
-electron@22.3.1:
-  version "22.3.1"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-22.3.1.tgz#a09769e6592cadbf45d7629c9143ffa2ef8a3842"
-  integrity sha512-iDltL9j12bINK3aOp8ZoGq4NFBFjJhw1AYHelbWj93XUCAIT4fdA+PRsq0aaTHg3bthLLlLRvIZVgNsZPqWcqg==
+electron@^25.3.0:
+  version "25.3.0"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-25.3.0.tgz#e818ab3ebd3e7a45f8fca0f47e607c9af2dc92c7"
+  integrity sha512-cyqotxN+AroP5h2IxUsJsmehYwP5LrFAOO7O7k9tILME3Sa1/POAg3shrhx4XEnaAMyMqMLxzGvkzCVxzEErnA==
   dependencies:
     "@electron/get" "^2.0.0"
-    "@types/node" "^16.11.26"
+    "@types/node" "^18.11.18"
     extract-zip "^2.0.1"
 
 elliptic@^6.5.3: