Browser-laptop: Titlebar on Windows has a lot of wasted space

[bsclifton]

Did you search for similar issues before submitting this one?
Yes

Describe the issue you encountered:
Brave on Windows has a lot of titlebar bloat. Here are some screenshot demonstrating that:

Windows 10

Windows 7

In order to show the minimize/maximize/close buttons, Windows requires you to add the WS_CAPTION style to the window, which also adds the titlebar and the icon.

Electron has a frameless mode but unfortunately that doesn't have the minimize/maximize/close buttons (and it doesn't support menus). While working on a proof of concept, I discovered the possibility exists to manually render these elements using Windows API, but there are complications.

The resolution for this issue needs to:

• Create the BrowserWindow object as frameless
• Manually render the caption buttons
• Manually render the menu
• Only update Windows; no changes are desired on Mac/Linux

Expected behavior:

Windows 10 (and 8) UI layout:

Windows 7 UI layout:

• Platform (Win7, 8, 10? macOS? Linux distro?):
  All Windows platforms
• Any related issues:
  https://github.com/brave/browser-laptop/issues/2386

[KillianKemps]

I would say the issue is not Windows-only. Here it is the same on Linux.

Screenshot on Arch Linux with Gnome:

Screenshot on elementaryOS (based on Ubuntu):

[bbondy]

Linux should be posted separate since it is completely distinct work, and will be prioritized separately. Thanks!

[bsclifton]

What @bbondy said- it would be great if you can create a separate issue, @KillianKemps (with similar text to what I posted originally, with your screen caps). But definitely, thanks for reporting! I personally haven't used Brave on anything other than Ubuntu, so it's great to know it can be improved too

[KillianKemps]

Alright I understand, I've created a new issue for Linux: #3126

[Sh1d0w]

Hi guys. I've quickly implemented custom header bar, with minimize, maximaze and close actions. It also supports dragging and double click maximizing in the new header bar.

Tested on Linux. If someone can help with testing on Mac and Windows it will be very helpful. See my PR I have rised in order to run it locally and test. It should work flawlessly tho.

Also I accept suggestions on styling, will upload a video shortly of the current look and feel :)

cc @bbondy @luixxiul @bradleyrichter @bsclifton

Edit: Preview here: http://webm.land/media/g4DR.webm

[bsclifton]

@Sh1d0w that's pretty interesting and it looks pretty good :smile: This functionality would only be needed on Windows and Linux (not needed on Mac). The goal was to have pixel perfect versions of the native OSes buttons show in the top right.

@bradleyrichter @bbondy @luixxiul what do you all think? Would having our own styling be an option, rather than using the OSes native window kit?

[bradleyrichter]

@Sh1d0w Your video above is showing this new toolbar on a Linux flavor which is running a macOS theme, correct?

If yes, then this is interesting. Can you show us how it looks with the default theme?

[bradleyrichter]

@bsclifton No, we need to conform to the OS standard window controls in the proper place for each OS, mainly for usability reasons.

[Sh1d0w]

@bradleyrichter Yes, this is Fedora 24 with macOS theme. Here is how it looks with v0.11.4 and without my changes

The problem here is from what you see, that I have title bar repeating twice, which is wasting a lot of space and there is like style difference between the header and the url panels.

@bsclifton What about a setting just like chrome does it right now? With chrome you have the option to choose to use the system theme border or the chrome theme, which removes and places custom buttons at the top? I think this way we will give the people the choice to have more compact view or to stick with the default one if they prefer it. Personally I think this is very good solution to the problem. Out of the box you will have the OS theme's styles, but if you prefer more compact view you can enable it. We can also put settings like setting the position of the buttons, you know to position them on the left or right side of the header.

cc @bbondy

[Sh1d0w]

PS: @bsclifton on macOS we have the following:

On macOS 10.10 Yosemite and newer, there’s an alternative way to specify a chromeless window. Instead of setting frame to false which disables both the titlebar and window controls, you may want to have the title bar hidden and your content extend to the full window size, yet still preserve the window controls (“traffic lights”) for standard window actions. You can do so by specifying the new titleBarStyle option:

Do you want me to implement this in my PR for macOS only? Please let me know and I willl do :)

[bsclifton]

@Sh1d0w the final call on whether or not we can use a non-OS styled theme lies with @bradleyrichter and @bbondy. When discussing with them earlier today, the consensus was a no-go for your PR- even though it looks pretty nice (and we definitely do appreciate it, trust me :smile:). It's a requirement for us to have the OS specific controls

The Mac version seems to be great as-is; it's basically frameless and the menu lives in the actual system menu on top. Here's a screenshot:

You're absolutely right- the Linux and Windows versions use too much space :frowning: I opened the following issue in Electron which I encourage you to look at.
https://github.com/electron/electron/issues/6823

I need help understanding where to make the changes; maybe we can work together? :smile: I understand win32 very well but don't have much experience w/ X11 and Cocoa. The approach I am trying to take in electron would be using native API calls to get the bitmap and rendering it over the window contents, as if it were a non-client area. This could then be exposed on the BrowserWindow object so that other Electron users could benefit from it too

Let me know what you think and thanks again :smile:

[Sh1d0w]

@bsclifton Thanks for your comment. Unfortunately I am not that deep into the X11 stuff. What I know is that on Gnome desktop for example, as I suppose every other Linux desktop like Unity and KDE you can install different themes. Each of those themes are defined by CSS styles inside the themes.

In GTK you have gtk_widget_get_style() function, which fetches the current theme styles. Once we have them we can easily parse them and apply the styles to the buttons. Worth researchng also what should be the HTML structure for the buttons in Brave to be consistent with the styling.

I think this is interesting, just found it: https://github.com/WebReflection/node-gtk and https://github.com/coreybutler/node-windows

Will take a look into them.

Have you guys considered my suggestion to implement setting that turns my modification on/off? Since it is a common practise in Google Chrome for example? They have implemented the same thing - by default Chrome uses the system theme, but you have option to switch to completely custom Chrome theme with custom buttons at the top? This will keep as it is now, but will give the change to users like us who don't like the gap and the space waste.

Let me know what you think about it, so I will know if I should close my PR or tweak it :)

cc @bbondy @bradleyrichter

[bsclifton]

I understand the Google Chrome way- they allow you to customize the look and feel by offering themes. We don't offer that yet... but we do have several issues asking for functionality like this:
https://github.com/brave/browser-laptop/issues/1090
https://github.com/brave/browser-laptop/issues/473
https://github.com/brave/browser-laptop/issues/271

I think the only approach that would work is making the change at the electron level. We maintain a fork of electron here that I am looking at now. The issue I shared above is in the upstream repo- I'm hoping the maintainers can help me find a solution using the native controls.

For now, we can close the PR. But thank you for the thought and consideration that you put into it :smile:

[Sh1d0w]

@bsclifton No problems, thank you for your time. I will keep eye on this thread as I became very curious about the outcome :smile:

[bsclifton]

UPDATE: the electron route is a much longer term route. The great changes implemented by @Sh1d0w are being refined and will likely be accepted to close this issue :smile:

For more info or to participate, check out his PR https://github.com/brave/browser-laptop/pull/3133

[bsclifton]

@Sh1d0w I closed https://github.com/brave/browser-laptop/pull/3133 after making progress with Windows API route. Shortly after, I ended up getting stuck again :frowning:

After talking with the team, we'd like to manually render the content for Windows (and revisit the Windows API route at a future date).

I have your commits pulled into my branch and will use them as a starting point :smile: I'll be trying to match the above that @bradleyrichter created (may include small CSS tweaks) and will also be adding a menu (mockup TBD).

[Sh1d0w]

@bsclifton Cool I am glad I could help in some way. I hope you guys don't release this as windows only feature, as in my branch the component I've wrote can be reused for Linux build as well. Personally for each version of Brave I am building it from my branch so I can get a compact and polished look.

But it will be good to see it in the official build as well. Please don't leave Linux version behind and consider this for the 1.0.0 release :)

[bsclifton]

Definitely not perfect, but made some great progress matching the styles w/ CSS:

Windows 7 look

Windows 10 look (will be also be used for Windows 8/8.1)

cc: @bradleyrichter

I'll get started on the menu control tomorrow :smile:

[bsclifton]

Here's how it looks with custom menus (still a work in progress- will wrap up soon!)

[bsclifton]

One concern I wanted to capture (before forgetting)- electron doesn't put a border around the window (we can fix this). Some small nitpicks regarding that:

• Windows 10 always puts a 1 pixel border with the users highlight color around each window... instead, a box shadow is drawn (which looks nice, but isn't consistent with OS)
• Windows 7 doesn't use any effects around the border and when you're on a white page, it can be really confusing- because there is no borders and the white will blend in (making it hard to tell what is in the browser and what isn't)

[bradleyrichter]

@bsclifton Let's add the border so that we achieve conformance with panache. : )

[bbondy]

moving to 0.12.2

[bsclifton]

Heading towards the finish line on this one... here are some updated screenshots:

[bsclifton]

screen cap showing the menu being toggled and used

[bsclifton]

@bradleyrichter here's a version that keeps the lion on the right

Thoughts?