Update horizontal tab shape for pins, normal tabs, and groups

[rebron]

Description

Add padding all around individual pins, tabs, and grouped tabs. Adding the border all around will make the bottom border appear to "detach" tabs from the main content window and will allow for better highlighting/color grouping of grouped tabs.

Add border around pinned tabs.

Design

Figma: https://www.figma.com/file/H11ZOl6JMYbCTW4ZJXqR5V/%F0%9F%A6%81-Browser?type=design&node-id=125%3A9048&mode=design&t=nhfxV22NiGDSYN2e-1

Reproduces how often:

n/a

Brave version (brave://version info)

n/a

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? n/a
• Can you reproduce this issue with the nightly channel? n/a

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? n/a
• Does the issue resolve itself when disabling Brave Rewards? n/a
• Is the issue reproducible on the latest version of Chrome? n/a

Miscellaneous Information:

[ghost]

I like this new tab design, can't wait to see this happening in future releases.

There is also a request in community page to make brave use chrome like rounded corners tab UI on horizontal view. It would be really nice if there is a flag to enable chrome like rounded corners which use to exist earlier, many people have requested that for years now and it will feel more like home when chrome users come to brave when the manifest v3 is enforced.

I would really appreciate if you guys reconsider on adding that UI as an opt in basis and give power to change tab design in users hands so users can make it more personal like we do in Firefox.

[rebron]

@dpthegrey Is there a specific feature in Firefox with the Tabs UI that you're wanting to see?

[ghost]

Hello @rebron , With Firefox we can change the tabs shape and in general customise the browser's appearance using CSS. The FirefoxCSS Store which showcases what the community has built to customize the shape of Firefox tabs and themes. I would like to see Brave offer similar customisation options.

and/or if we could include a few static tab shapes that are widely used in common browsers, in addition to the proposed design above. These shapes could be available in the settings menu, in a dropdown format just like there use to be a flag which could change tabs shape in earlier versions.

Tab shape in Firefox

Tab shape in Google Chrome

[MadhaviSeelam]

Verification PASSED using

Brave | 1.60.81 Chromium: 118.0.5993.54 (Official Build) beta (64-bit)
-- | --
Revision | 1efb3f333eb41cc34af46ca31fb33c30e0afbfae
OS | Windows 11 Version 22H2 (Build 22621.2283)

and

Brave | 1.60.88 Chromium: 118.0.5993.70 (Official Build) beta (64-bit)
-- | --
Revision | ff9150ac5dd9934a7f431ddf478ad3e45ae68546
OS | Windows 11 Version 22H2 (Build 22621.2428)

1. Installed 1.60.81
2. launched Brave
3. opened brave://flags
4. enabled #brave-horizontal-tabs-update flag
5. opened few tabs

Normal Window

- clicked on a tab to make the tab active in the normal window - hover over inactive tabs - compared when #brave-horizontal-tabs-update` flag disabled vs enabled #### Confirmed active tab shown with bottom border appeared to be `detached` from the main content window #### Confirmed inactive tab, when hovered over, shown with bottom border appeared to be `detached` from the main content window step 3 | step 6 | step 7 ----- | ---- | ----- || `#brave-horizontal-tabs-update` flag: Default (disabled)| Enabled ----- | ----- | Dark theme: step 3 | step 6 | step 7 ----- | ---- | ----- || `#brave-horizontal-tabs-update` flag: Default (disabled)| Enabled ----- | ----- |

Pinned tabs

- selected Pin tab from the context menu - pinned 3 tabs - compared when #brave-horizontal-tabs-update` flag disabled vs enabled #### Confirmed border around pinned tabs are shown and the shape is shown as per the Figma example | example ----- | ------ | `#brave-horizontal-tabs-update` flag: Disabled | Enabled ----- | ------ | Dark theme example | example ----- | ------ | `#brave-horizontal-tabs-update` flag: Disabled | Enabled ----- | ------ |

Grouped tabs

- selected `Add tab to new group` >> New group - Name the group (eg. newspapers) - Add each tab to the group (eg. newspapers) via context menu - hover over the group to view the added tabs - click on the group expand or collapse the group - compared when #brave-horizontal-tabs-update` flag disabled vs enabled #### Confirmed highlighting/color grouping of grouped tabs. shown as per the Figma example | example | example |example | example | example -----| ----- | ----- | ------ | ------ | ------- ||||| `#brave-horizontal-tabs-update` flag: Disabled | Enabled ----- | ------ | Dark theme Example | Example | Example | Example ----- | ---- | ---- | ---- |||

New window

`#brave-horizontal-tabs-update` flag: Disabled | Enabled ----- | ------ | Dark theme Disabled | Enabled ----- | ------ |

Private window

`#brave-horizontal-tabs-update` flag: Disabled | Enabled ----- | ------ | Dark theme Disabled | Enabled ----- | ------ |

Private window with Tor

`#brave-horizontal-tabs-update` flag: Disabled | Enabled ----- | ------ | Disabled | Enabled ----- | ------ |

Upgrade

- Installed `1.58.137` - launched Brave - opened few tabs in the horizontal view with normal tabs, pinned tabs & grouped tabs - closed Brave - renamed the profile to `Brave-Browser-Beta` - Installed `1.60.81` - launched Brave - enabled `#brave-horizontal-tabs-update` in brave://flags #### Confirmed Pins tabs, normal tabs & grouped tabs are shown as expected and match to Figma example | example ----- | ----- |

[LaurenWags]

Verified with

Brave | 1.60.86 Chromium: 118.0.5993.54 (Official Build) beta (x86_64)
-- | --
Revision | a174cdee5ce1b329d409f3dd8c450e98b7ff4511
OS | macOS Version 13.6 (Build 22G120)

Shared Steps:

1. Installed 1.60.x
2. launched Brave
3. closed and relaunched to pull griffin
4. confirmed BraveHorizontalTabsUpdateEnabledStudy shows as enabled on brave://version
5. opened few tabs

Normal Window

Continued from "Shared Steps": 6. clicked on a tab to make the tab active in the normal window 7. hover over inactive tabs #### Confirmed active tab shown with bottom border appeared to be `detached` from the main content window #### Confirmed inactive tab, when hovered over, shown with bottom border appeared to be `detached` from the main content window step 3 | step 6 | step 7 ----- | ---- | ----- | | 8. compared when study is enabled (100% on beta currently) vs. disabled (had to manually disable the study via flags) for both Dark and Light themes: Dark Theme: Active tab (study disabled) | Active tab (study enabled) | Inactive tab hover (study disabled) | Inactive tab hover (study enabled) --- | --- | --- | --- | | | Light Theme: Active tab (study disabled) | Active tab (study enabled) | Inactive tab hover (study disabled) | Inactive tab hover (study enabled) --- | --- | --- | --- | | |

Pinned tabs

Continued from "Shared Steps": 6. selected Pin tab from the context menu 7. pinned 3 tabs #### Confirmed border around pinned tabs are shown and the shape is shown as per the Figma example | example ----- | ------ | 8. compared when study is enabled (100% on beta currently) vs. disabled (had to manually disable the study via flags) for both Dark and Light themes. (note, hovered over a pinned tab while the active tab was a non-pinned tab in the screenshots below) Study Disabled | Study Enabled --- | --- | |

Grouped tabs

Continued from "Shared steps 6. selected `Add tab to new group` >> New group 7. Name the group (eg. newspapers) 8. Add each tab to the group (eg. newspapers) via context menu 9. hover over the group to view the added tabs 10. click on the group expand or collapse the group #### Confirmed highlighting/color grouping of grouped tabs. shown as per the Figma example | example | example | example -----| ----- | ----- | ------ | | | 11. compared when study is disabled vs enabled for both light and dark themes Study Disabled | Study Enabled --- | --- | | | | | |

New window

`#brave-horizontal-tabs-update` flag (enabled via griffin on Beta) for both Light and Dark themes: Disabled | Enabled ----- | ------ | |

Private window

`#brave-horizontal-tabs-update` flag (enabled via griffin on beta) Study Disabled | Study Enabled --- | --- |

Private window with Tor

`#brave-horizontal-tabs-update` flag (enabled via griffin on beta) Study Disabled | Study Enabled --- | --- |

Upgrade

- Installed `1.59.117` - launched Brave - opened few tabs in the horizontal view with normal tabs, pinned tabs & grouped tabs - closed Brave - renamed the profile to `Brave-Browser-Beta` - Installed `1.60.x` - launched Brave - confirmed `BraveHorizontalTabsUpdateEnabledStudy` shows as enabled on brave://version #### Confirmed Pins tabs, normal tabs & grouped tabs are shown as expected and match to Figma 1.59.x | 1.60.x ----- | ----- |

---

Verified with

Brave	1.60.102 Chromium: 118.0.5993.96 (Official Build) beta (64-bit)
Revision	3598a9fc6b7752181feb25caa131bc386d6d054c
OS	Linux

Shared Steps:

1. Installed 1.60.x
2. launched Brave
3. closed and relaunched to pull griffin
4. confirmed BraveHorizontalTabsUpdateEnabledStudy shows as enabled on brave://version
5. opened few tabs

Normal Window

Continued from "Shared Steps": 6. clicked on a tab to make the tab active in the normal window 7. hover over inactive tabs #### Confirmed active tab shown with bottom border appeared to be `detached` from the main content window #### Confirmed inactive tab, when hovered over, shown with bottom border appeared to be `detached` from the main content window Light theme (https://github.com/brave/brave-browser/assets/34715963/81011558-619a-4cda-b7a3-91ba98f9ce45)| --|-- Dark theme | --|--

Pinned tabs

Continued from "Shared Steps": 6. selected Pin tab from the context menu 7. pinned 3 tabs #### Confirmed border around pinned tabs are shown and the shape is shown as per the Figma Light theme   Dark theme  

Grouped tabs

Continued from "Shared steps 6. selected `Add tab to new group` >> New group 7. Name the group (eg. newspapers) 8. Add each tab to the group (eg. newspapers) via context menu 9. hover over the group to view the added tabs 10. click on the group expand or collapse the group #### Confirmed highlighting/color grouping of grouped tabs. shown as per the Figma  

New window


Private window


Private window with Tor


Upgrade

- Installed `1.59.117` - launched Brave - opened few tabs in the horizontal view with normal tabs, pinned tabs & grouped tabs - closed Brave - renamed the profile to `Brave-Browser-Beta` - Installed `1.60.x` - launched Brave - confirmed `BraveHorizontalTabsUpdateEnabledStudy` shows as enabled on brave://version #### Confirmed Pins tabs, normal tabs & grouped tabs are shown as expected and match to Figma