New horizontal tab design seems very large

[intrnl]

Description

The new horizontal tab design seems very large when compared to what they are now, I'd like to ask what's the plan forward when it comes to the old tab design or if there's any plans of introducing a compact mode for this

Steps to Reproduce

1. Open Brave
2. Visit about:flags
3. Search for brave-horizontal-tabs-update flag and enable it

Actual result:

Expected result:

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

1.60.66 Chromium: 118.0.5993.21 (Official Build) nightly (64-bit)

Version/Channel Information:

• Can you reproduce this issue with the current release? No.
• Can you reproduce this issue with the beta channel? No.
• Can you reproduce this issue with the nightly channel? Yes.

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? No.
• Does the issue resolve itself when disabling Brave Rewards? No.
• Is the issue reproducible on the latest version of Chrome? No.

Miscellaneous Information:

Here's how Firefox currently looks

With the compact mode enabled it looks like this

[rebron]

cc: @aguscruiz

[aeimi]

Size and style of tabs is one issue. But dead margins around the tabs are huge UX mistake. Which is also visible even in stable vertical tabs They have dead margins around them and lack of hover background state.

Firefox have big tabs like new tab style in Brave dev/nightly, but all spaces even around tabs and between them, up to the end of the screen (when full screen) are active/clickable.

Tabs either vertical and horizontal MUST be active to hover/click edge to edge with screen and each other. No dead margins/padding. Quick and intuitive tab switching with mouse depend highly in my case (and many users) on edge of screen. Why you broke most fundamental thing on my browser use workflow I don't know. That's why I for a first time post on Brave issues, because this is so important for me to be sure I always will be able to turn off new design and use old one. Even with a flag. But I was afraid, you may some day take away this option and force me to use this broken tabs design.

Please don't take away something that is perfect. Current horizontal tab design is what I'm 100% happy with. New design should be optional in settings. Or at least by flag. Still, vertical tabs should be fixed as I mentioned above.

Screen space (especially horizontal one) on laptops and huge amount of desktops are limited. There is no real reason to add padding and margins to tabs when font size is the same. Some may like it, so ok to have an options, but for me it's just waste of display space, nothing more.

[bradleyrichter]

@aeimi Thanks for the detailed description. It appears that we have 3 pixels of dead space between horizontal and vertical tabs. We will look into it.

[zenparsing]

We've created an issue to track the "dead space between tabs" for horizontal tabs here: #34190.

[aeimi]

@bradleyrichter Thank you. Just to be clear. While in full size window (Windows OS) Dead margin between tabs and edge of the screen is worst. In vertical tabs lack of hover background should also be fixed as it is in horizontal tabs.

I was worried. Because many of users just would not tell you this. All Chromium browsers and even Firefox by default have tabs to the edge of screen. Especially new users trying Brave might be turn off because tabs is ~50% of visible UI and crucial for mouse navigation.

For me myself it is crucial issue. I'm using Brave as fast I heard it switched to Chromium. And many of it's added features doesn't bother me. But take away something that it right without option to switch back, will be deal breaker for me.

I get, I just one guy. But think about mass users. They also have strong already workflow and they don't think about it until something doesn't work the way they already know it. Chrome, Edge, Opera, Vivaldi, etc etc. Big tabs with big padding are just a waste of space on smaller screens. Especially laptops. Font size is the same so no improvement readability. So why just add empty spaces? Form should always follow function first.

Some 16:9 screens especially on laptops as I said are really struggle in matter of vertical space. Give users at least an option. This should be hard. Don't think about just one me who is reporting about this. But about global share market of your users. People just walk away and in most cases will not tell you why. We all use things mindlessly. When some things make us think there is a problem. Things must be intuitive/natural.

[bradleyrichter]

@aeimi Totally agree with most of your points. We have a PR in the works to fix the top margin gap in windows expanded and full screen views. I agree that is really important for usability as the mouse naturally stops at the top of the monitor. If I recall we had fixed this a few years back after a similar UI update created the same problem.

@zenparsing - Could you please link it here?

Regarding space from loosening up the UI, many UI elements are trending larger to both appear easier to use and allow for larger hit targets. We get constant requests to make URL bars taller on all platforms. UI elements for grouping have necessitated adding a bit of additional space as well.

Believe it or not, before we switched to Chromium I had spent a bunch of time hand-tuning the elements in the toolbars/tabs in order to make them as short as possible. Brave was the shortest for a while. Since then we have all enjoyed getting more pixels and higher screen densities so naturally things needed to loosen up.

This time we we were careful to be aligned with Chrome, Firefox and Opera for stack height. We can certainly investigate adding a compact mode as you requested for more advanced users.

[intrnl]

Since then we have all enjoyed getting more pixels and higher screen densities so naturally things needed to loosen up.

"All" seems very loose here, bearing in mind that we have laptop users where the following display resolutions are very common, especially within lower-end markets:

• 1366x768 @ 100%
• 1920x1080 @ 125% (810px)

I practically cannot read anything with a 1920x1080 at 100% on a 14" screen, anyone with a 14" 2K or 4K panel would have a higher chance of setting everything up to 150%, where the usable screen height is even lower.

[aeimi]

Default setup should be for most people. But settings are for willing. Customization and flexibility should be always paradigm in building software for masses. i.e. Even there is no officially released tab scrolling, but I always use this enabled by Flag.

Vertical tabs have those unwanted margin/gaps (between them and from edge of screen) also and lack of proper hover state as I mentioned before.

[aeimi]

New nightly fixes top edge support for tabs :) 🎉 That was # 1 feature on my list to fix. Thanks.

Brave nightly 1.62.38 Chromium: 119.0.6045.134

[intrnl]

seems like there's borders on the page content now :/

[aeimi]

@bradleyrichter in dev 1.62.93 we lost original colors. background grays and orange borders and some sizes. All that, still is, in my opinion, perfect in current stable. But some of that I can restore by building custom skin. Yet original size of address bar field. is bigger now. After disabling Updated horizontal tabs design flag. Because new tabs still have inactive gap between them while you move on the edge. I ping to you because you said you crafted original with attention. so who can I call for that. I will probably want this original design even when I will switch to 4k for some time. Even if we have some option to manually set some spacing/padding/font sizes even in skin or in settings. But.. whatever. I would be happy if there was any way for user to keep or restore manually current stable design.

[aeimi]

I don't know why Chrome/Chromium in new redesign 2023 that can be tested by enabling flags, added this dead (not active tab area) separators between tabs.

Anyway;

All in all. Just looking at Firefox. Their tabs are fully clickable/hoverable ever around tab highlited area. Whole Tabbar is divided by full size rectangles, with no dead pixel around the corners. Adressbar have normal sizing without needles padding. Design like this is very acceptable. Although I still prefer classic Brave design way better. Because I personally don't need any more padding or visual separation / margins any kind more than it is currently in v1.60.125.

[intrnl]

seems like there's borders on the page content now :/

I've made a separate issue for this one because it makes reaching for the scrollbar harder as I can't just slam my mouse cursor to the edge of the screen anymore. It's practically not a good design if it ruins mouse interactions like this. #34679

[fhoshino]

Backing this suggestion up, really don't want to have a fat tab bar especially I'm not on a touchscreen.
Those borders are really unnecessary. At least give us an option in the setting page to disable the new tab look.

[MrVoltz]

I'd also want an option to make the tabs and address/toolbar smaller vertically. The address bar itself has unnecessarily large padding, it is precious vertical real estate. Just give us a toggle in settings to make this stuff smaller.

[MrVoltz]

Brave on the left, Firefox in the middle, Chrome on the right. Both Brave and Firefox are more wasteful than Chrome.

[jjspace]

I want to add that the new design looks even worse with my theme (that I've used for many years) by creating 3 layers of background colors because of the extra padding. Why do we need that extra space to create a bubble for every tab?

[will-stone]

@MrVoltz Mind posting an updated screenshot with the inclusion of Brave's old style? It'll help highlight the original issue that @intrnl was raising.

[MrVoltz]

@will-stone Here you go.

For now I've reverted to the old style tabs using chrome://flags. In this mode it has the smallest UI of all my installed browsers and I really like Brave in general. Sometimes I have to work on my 1080p 13,3" laptop with text editor on one side and Brave with docked Dev Tools on the other side, so every vertical pixel counts. I wouldn't mind shaving a few more pixels from the address bar padding even in the old style.

[zenparsing]

@jjspace We've created a new issue to track the theming problem: #35905

[aeimi]

Props for removing dead unclickable margins. Thanks!

I hope you don't plan to remove classic tabs view from flags?

[aeimi]

Classic tabs. In Brave 1.69.62
With disabled flag: Updated horizontal tabs design
Now old design is messy to the level it's unusable not just because of weird sizing but reintroduced dead margins.

I'm still asking for not dropping old design. Even if it's just under flag. Although I would still encourage to add option in official settings to choose between classic tabs and new updated version. Or at least option to get rid of unneeded margins/padding. Like option to select between Standard and Compact mode. It's not about tabs or pill style. But more about space they use. Is there any chance? @bradleyrichter

I know it's just a nightly version. But still, I wanted to refresh the topic in case that nobody cares about old design anymore. And not waiting to find out that later with next beta and stable releases.

[aeimi]

And here it is. Classic tabs broken already in beta release version 1.68.115. Will anybody care about this @rebron ?

[MrVoltz]

Could you please post a screenshot of the broken state? Everything is still ok in stable.

[aeimi]

In stable it's currently still OK. But in beta as I wrote above, no longer. So I was afraid it will be moved to brake stable next.

Here is broken margins/paddings example:

[aeimi]

Everything is still ok in stable.

Not anymore. Here after latest update to chromium 127, latest STABLE od Brave update bring in broken classic tabs with 1.68.128

That's what I was afraid of. I don't know if anybody care about this anymore in Brave team or not.

[aguscruiz]

Hi all, we've been looking at the feedback given here, thanks! I wanted to address a couple updates we have coming:

Colors and themes

Regarding the colors and themes, we're moving our theming engine to match what's coming upstream from Chromium. We're working hard to adapt our current themes to that new engine, and it's a work in progress, so some things may not look ok until we can polish everything.

We're sorry for that, but it's gonna allow us to create a more consistent theme and fix our color themes to make them much nicer.

New tab shapes

We're moving away from the classic tab shape in favor of the floating ones due to new features that we're developing, like split view and others, that just don't work with the classic shape.

Issues regarding dead spaces and what are clearly bugs will be address until they work perfectly fine and how they're are expected. But at some point, the flag for keeping the classic tab shape will cause the UI to break if you use some of the new features we have in the pipeline.

It's not that we don't care about the classic design, but it's something we need to evolve from in order to evolve the browser features.

Content window borders

Just like the case of the new tab shape, that border around the window is something we'll need in order to create a better experience for our new features.

I hope that clarifies some of the issues. We're actively looking at your feedback here and trying to minimize the changes and address your pain points though. Just know that we do care 🧡

[097115]

I hope that clarifies some of the issues

Yeah, pretty much. I guess, I'll just stick with 1.66.118 for as much as possible.

[aeimi]

Thanks for answer @aguscruiz

Tabs

I understand that new features may require new approach. Just remember, maybe you'll find a way to have officially supported in settings for a "compact" mode tabs style. I already switched to new tab style after latest 127 stable update, since they are more usable than broken classic tabs. If classic tabs are already dead end, the only visual difference I ask for is less white space padding around text on tab and less margin around them. Zero visual margin classic tabs had ;) That's all. They are already usable since you fixed unclickable zones.

Window Border / Shadow

I really don't like shadow around browser window and rounded corners. Website area should be fully for website. Adding secondary border/frame just for unwanted rounded corners or shadow is not a feature I'll ever accept ;) #firstworldproblem

I was talking about flag
Use rounded corners on main content areas

Which is enabled by default in BETA 1.69.124 and still disabled by default in current stable 1.68.128.

Fortunately can be disabled. Chromium doesn't even have that. At least by default. I hope you'll never force that as only option for Brave.

[nastavoi]

Here's my two cents - I honestly don't mind the new tab shape, I've adjusted pretty quickly but can't wait for the compact mode since I feel they are indeed too big.

As for the window border - please consider making them clickable / usable with vertical scrollbar so that the user would be able to click on it by moving the mouse cursor to the edge of the screen, without looking at it. The current implementation of #brave-web-view-rounded-corners disrupts my (and I guess many people) workflow as I own UWQHD monitor (#34496).

[aeimi]

Active border/hoverable sidebar have nothing to do with additional border/shadow feature. Borders and shadow of window should be system wide feature. Not forced style of one program.

[aeimi]

Compact mode is here! Thank you! Even classic tabs are fixed. Nice!
Although I think, because of visual balance I might even prefer new style.

It's really minor, visual thing, but If you plan to continue with classic tabs style, I think top corner radius should be reduced to minimal like before. But that's just a detail. There is no dead zones and that's what most important. Thanks!

[fhoshino]

Really enjoying the compact mode, now claiming back a few more pixel of web content for each scroll.

[aeimi]

Compact mode for the browser - Prototype
This feature is a prototype. Reduces the height of the browser controls (tabstrip, toolbar, bookmarks bar, etc.) to allow more space for the web contents

This flag seems to not be make any changes yet I can notice. But I'm glad to see it's there. I guess. WIP.
It would be great to see second row compacted too, like in old design.