Implement Window Controls Overlay #8707

ferothefox · 2023-07-14T07:21:10Z

Fixes: #7199 #8650 #6278 #4292 (on Windows)

Hey @Eugeny, I've daily-driven Tabby for a little while and I love its customizability. It reminds me of Vivaldi in a lot of ways! This is my first PR here and I'd love to try to fix a long-standing issue with the tab bar location and the window controls.

This PR aims to mitigate this issue by replacing the custom window controls with the Window Controls Overlay API that Electron provides.

Specifically, my code:

Updates Electron to the latest stable (from version 22 to version 25) to fix an issue where overlay buttons with transparennt backgrounds have issues with hover styles (see fix: WCO transparent background electron/electron#38693). This does not seem to affect any other functionality in Tabby - all packages appear to work fine and no obvious breaking changes were observed. I've been able to build and run the app perfectly fine.
Adds new styles to compensate for the space taken up by the controls. Extra padding and adjustments are needed to prevent clipping.

Known issues

I've tested this throroughly on Windows 11, but there's some other issues with this implementation that need to be addressed in order for this to be considered production-ready.

Issue 1

Currently, this is only feasibly usable dark themes. The background color of the overlayed buttons are transparent to not clash with any themes, but the icon colors are hardcoded to white.

here's a visual example:

Dark themes work flawlessly, however in lighter themes...

It is impossible to know the window buttons exist, even when hovering directly over them.

We'd need to implement a way to pass the currently applied theme's colors to Electron (probably via IPC) and update the colors of the window controls accordingly so that they don't cause issues like this.

Issue 2

the settings button is obscured when the window frame is set to thin and tabs location is on top.

Issue 3

I did not consider Linux heavily when I made this PR. Linux users will still see a broken window controls experience when not using the native titlebar. This should probably be set by default if a user is on Linux.

Other than that, I'm proud of how this turned out!

Eugeny · 2023-07-14T07:31:29Z

Thank you! Might be a stupid question, but what are the advantages of WCO besides it being native?

PS issue 1: you'd need to watch for config changes and respond to them in window.ts same way it's done for window vibrancy settings right now. Issue 2 is just a missing margin somewhere now that the window controls are not in the DOM tree.

ferothefox · 2023-07-14T07:45:39Z

Not a stupid question at all! That's exactly its advantage. It unifies window control implementations across macOS and Windows. IIRC setting frame to false on macOS defaults to WCO. On Windows 11, it lets people use snap layouts

ferothefox · 2023-07-14T18:58:34Z

@Eugeny Pinging for the latest update - the WCO colors now respect the theme that you're using :)

electron_pxyW3eUJHX.mp4

Also, apologies for the messy commits below. Trying to rapidly iterate and it's evidently not the wisest thing to do right now. This is practically finished IMO, just waiting for your review.

ferothefox · 2023-07-16T01:23:10Z

After a day of using a built version of the last commit here, I can say it's working quite smoothly now. Not sure how to resolve the CI errors, but I'm sure it's nothing a re-run can't fix. No rush to merge or anything :)

Edit: it looks like we're going to be all green following this merge!

Eugeny

Added a few comments, otherwise LGTM ✌️

Eugeny · 2023-07-16T10:37:11Z

app/lib/window.ts

@@ -94,12 +94,19 @@ export class Window {
        } else {
            if (process.platform === 'darwin') {
                bwOptions.titleBarStyle = 'hidden'
+                // If not macOS and native appearance is not toggled, use WCO.
+            } else {


Does WCO work on Linux? This code path implies it does, the comment in titleBar.component.scss implies it doesn't.

It doesn't, but good catch, will fix

Eugeny · 2023-07-16T10:37:22Z

app/lib/window.ts

@@ -94,12 +94,19 @@ export class Window {
        } else {
            if (process.platform === 'darwin') {
                bwOptions.titleBarStyle = 'hidden'
+                // If not macOS and native appearance is not toggled, use WCO.
+            } else {
+                bwOptions.titleBarStyle = 'hidden'


can be moved out of the if

Eugeny · 2023-07-16T10:37:39Z

app/lib/window.ts

            }
        }

        if (process.platform === 'darwin') {
            this.window = new BrowserWindow(bwOptions) as GlasstronWindow
        } else {
+            // this.window = new BrowserWindow(bwOptions) as GlasstronWindow


Please clean up commented code across the PR

Eugeny · 2023-07-16T10:44:17Z

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()',
+  [class.hide-controls]='hostApp.platform !== Platform.Linux && !hostWindow.isFullscreen',


should be controlled via an @input on TitleBarComponent, not a class

Done in the latest commit, window controls in the titlebar component is an ngIf now ✨

ferothefox · 2023-07-16T19:02:47Z

I believe that resolves your comments :)

Eugeny · 2023-07-16T21:03:34Z

Tested on all 3 platforms and it works nicely - well done!

@all-contributors add @ferothefox for code

allcontributors · 2023-07-16T21:14:55Z

@Eugeny

I've put up a pull request to add @ferothefox! 🎉

Clem-Fern · 2023-07-19T12:25:03Z

Hi @Eugeny, @ferothefox :)
I hope you two doing well.

I encountered an error while working on tabby with the master branch and I think it has something to do with this PR (I'm on Linux):

index.ts:173 Unhandled exception: TypeError: this.window.setTitleBarOverlay is not a function
    at IpcMainImpl.<anonymous> (/home/clem/git/tabby/app/dist/webpack:/tabby/lib/window.ts:397:25)
    at IpcMainImpl.emit (node:events:513:28)
    at IpcMainImpl.emit (node:domain:489:12)
    at WebContents.<anonymous> (node:electron/js2c/browser_init:2:88498)
    at WebContents.emit (node:events:513:28)
    at WebContents.emit (node:domain:489:12)

tabby/app/lib/window.ts

Lines 390 to 403 in 0101ffd

    
           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, 
        
                   }, 
        
               ) 
        
           })

After a quick look in the electron doc, it seems that the function setTitleBarOverlay is available on Windows platform only.

Eugeny · 2023-07-19T12:27:22Z

Hey, normally when Electron docs refer to functions as only available on platform X, that means it's a noop on other platforms (also supported by the electron TS typings). I've seen it too, but the error by itself is harmless as the setTitleBarOverlay call is at the very end of the event handler.

I'm waiting to see if it's going to be fixed in the electron updates and if it's not, I'll just replace it with this.window['setTitleBarOverlay']?.(...

Clem-Fern · 2023-07-19T12:41:29Z

Oh I see, I was not sure what was the impact exactly so, in doubt, i preferred report this.
Thank's for your insight anyway ;)

Feat: implement window controls overlay

2f1c388

fix: WCO color, settings icon position

e38b826

ferothefox added 6 commits July 14, 2023 12:04

Fix: spacer div should not appear in vertical tab layout

f10b8c0

Fix: wrong condition for spacer div

4edc0be

Fix: spacer div doesn't need full height

d2bdb55

Fix: linting errors

539c213

Fix: formatting err

9c86376

Update appRoot.component.pug

9638be5

Merge remote-tracking branch 'upstream/master'

af515e0

Eugeny requested changes Jul 16, 2023

View reviewed changes

feat: use @input on titlebar component; chore: comment cleaning

2fa612f

ferothefox added 2 commits July 16, 2023 12:06

fix: linting

8af3c95

fix: @input typo

c501f54

Eugeny merged commit ddab79d into Eugeny:master Jul 16, 2023

allcontributors bot mentioned this pull request Jul 16, 2023

add FeroTheFox as a contributor for code #8711

Merged

Clem-Fern mentioned this pull request Aug 18, 2023

SSH: unable to connect to ssh server using kex algorithm diffie-hellman-group1-sha1 #8840

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement Window Controls Overlay #8707

Implement Window Controls Overlay #8707

ferothefox commented Jul 14, 2023 •

edited

Loading

Eugeny commented Jul 14, 2023

ferothefox commented Jul 14, 2023

ferothefox commented Jul 14, 2023 •

edited

Loading

ferothefox commented Jul 16, 2023 •

edited

Loading

Eugeny left a comment

Eugeny Jul 16, 2023

ferothefox Jul 16, 2023

Eugeny Jul 16, 2023

Eugeny Jul 16, 2023

Eugeny Jul 16, 2023

ferothefox Jul 16, 2023

ferothefox commented Jul 16, 2023

Eugeny commented Jul 16, 2023

allcontributors bot commented Jul 16, 2023

Clem-Fern commented Jul 19, 2023

Eugeny commented Jul 19, 2023

Clem-Fern commented Jul 19, 2023

Implement Window Controls Overlay #8707

Implement Window Controls Overlay #8707

Conversation

ferothefox commented Jul 14, 2023 • edited Loading

Known issues

Issue 1

Issue 2

Issue 3

Eugeny commented Jul 14, 2023

ferothefox commented Jul 14, 2023

ferothefox commented Jul 14, 2023 • edited Loading

ferothefox commented Jul 16, 2023 • edited Loading

Eugeny left a comment

Choose a reason for hiding this comment

Eugeny Jul 16, 2023

Choose a reason for hiding this comment

ferothefox Jul 16, 2023

Choose a reason for hiding this comment

Eugeny Jul 16, 2023

Choose a reason for hiding this comment

Eugeny Jul 16, 2023

Choose a reason for hiding this comment

Eugeny Jul 16, 2023

Choose a reason for hiding this comment

ferothefox Jul 16, 2023

Choose a reason for hiding this comment

ferothefox commented Jul 16, 2023

Eugeny commented Jul 16, 2023

allcontributors bot commented Jul 16, 2023

Clem-Fern commented Jul 19, 2023

Eugeny commented Jul 19, 2023

Clem-Fern commented Jul 19, 2023

ferothefox commented Jul 14, 2023 •

edited

Loading

ferothefox commented Jul 14, 2023 •

edited

Loading

ferothefox commented Jul 16, 2023 •

edited

Loading