Add Vertical Tabs feature

[rebron]

Description

Allow users the ability to view their tabs in a vertical format on the left side of the browser window.

Brave version (brave://version info)

Target release 1.52.x

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?
• Does the issue resolve itself when disabling Brave Rewards?
• Is the issue reproducible on the latest version of Chrome?

Miscellaneous Information:

[MadhaviSeelam]

Verification PASSED using

Brave | 1.51.86 Chromium: 112.0.5615.49 (Official Build) beta (64-bit)
-- | --
Revision | bd2a7bcb881c11e8cfe3078709382934e3916914-refs/branch-heads/5615@{#936}
OS | Windows 11 Version 22H2 (Build 22621.1555)

AND

Brave | 1.51.105 Chromium: 112.0.5615.165 (Official Build) beta (64-bit)
-- | --
Revision | c262f36e6b1d711ee42d4fbe1343b49960593f18-refs/branch-heads/5615@{#1297}
OS | Windows 11 Version 22H2 (Build 22621.1555)

Testcase 1: Enable vertical tabs view - PASSED

Case 1: Vertical tabs enabled via brave://flags - PASSED

1. Install 1.51.86 2. launched Brave 3. clicked `Set Brave as default Browser` 4. clicked `Import` to import `Microsoft Edge` 5. selected `Profile 1` >>`Import profiles` 6. clicked `Finish` 7. opened `brave://flags` 8. selected `Enabled` for `#brave-vertical-tabs` 9. clicked Relaunch 10. clicked to open `BBC` bookmark 11. right clicked on the tab to open context menu - Confirmed `Use vertical tabs` entry is shown in the context menu step 4|step 5|step 8|step 12 -----|-----|-----|------ |||

Case 2: Vertical tabs: Appearance/UI - PASSED

Light mode | Dark mode -----|------ |

Case 3: Tab view orientation - horizontal tabs to vertical tabs and vice versa - PASSED

1. Continued from Case 1 - `Use vertical tabs` entry is shown in the context menu 2. clicked `Use vertical tabs` entry in the context menu 3. Unchecked `Use vertical tabs` entry 4. rechecked `Use vertical tabs` entry - Confirmed orientation of the tab view changed from horizontal to vertical tab view - Confirmed Vertical tab sidebar shown on the left side of the screen - Confirmed Sidebar and sidepanel moved to right side of the screen - Confirmed orientation switched back to horizontal view when `Use vertical tabs` entry unchecked in the context menu - Confirmed Vertical tab sidebar displayed again when `Use vertical tabs` checked - step 2|step 3|step 4 ----|------|--- ||

Case 4: Vertical tab view visual modes - Floating, Expanded & Minimized modes - PASSED

*_Floating on mouseover_* - Default mode 1. Continued from Case 3 - Vertical tab sidebar is shown on the left of the screen 2. right clicked on a vertical tab (BBC - Homepage) 3. confirmed context menu shows `Float on mouseover` checked 4. clicked `Expand/Minimize tabs` button 5. hovered/un hovered over the sidebar to expand/minimize the vertical tab view 6. clicked + New Tab at the bottom left to add new tabs while in Float mode 7. clicked `x` while Float/expand mode to close the tab #### Confirmed vertical tab view is on Float mode when hovered over #### Confirmed when clicked `Expand/Minimize tabs` button, the vertical tab view can be expanded/collapsed #### Confirmed able to add new tabs by clicking New Tab or keyboard short cut `Ctrl + T` #### Confirmed able to close the tab by clicking `x` or with keyboard shortcut `Ctrl + W` expanded|collpased|ex ------|-----|------ || https://user-images.githubusercontent.com/98358127/231909537-9641c9f6-96c6-4a1b-875d-9dded52d5924.mp4 *_Expand mode_* & *_Minimize mode_* - `PASSED` 1. continued with above *_Floating on mouseover_* -context menu shows `Float on mouseover` -Vertical tab sidebar/expanded mode is shown 2. unchecked `Float on mouseover` in the context menu 3. toggled `Expand/Minimize tabs` button 4. hovered over a favicon and click to display `x` button and close the tab #### Confirmed `Expand/Minimize tabs` button toggled, Vertical tab sidebar is minimized/expanded and Float mode is not available #### Confirmed able to close the tab by clicking `x` or with keyboard shortcut `Ctrl + W` in both modes #### Confirmed able to add new tabs by clicking New Tab or keyboard shortcut `Ctrl + T` in both modes ex|ex|ex|ex|ex ----|---|---|----|---- ||||

Case 5: Tab Search bubble - PASSED

1. New profile 2. launch Brave 3. added few tabs 4. clicked `Search tabs` button to the right of hamburger menu - Confirmed Tab search bubble should be visible with open tabs listed - Confirmed when tab search bubble is viewed with keyboard shortcut (Ctrl+ Shift + A) - Confirmed when keyboard shortcut (Ctrl+ Shift + A) pressed, tab search bubble is visible pressed in full screen. Search tabs | Ctrl+ Shift + A | full screen ---- | ----- | ---- ||

Testcase 2: Vertical tab view orientation and functionality - PASSED

Case 1: Groups in the horizontal tab view carried over to vertical tab view - PASSED

Pre-requisite: Create multiples tabs for tab grouping and Pin tabs horizontal view `News`, `Tech`, `Food`, `Social media`, `Travel` & Pinned tabs (`Fox Sports`, `Espn`, `Nbcsports`)  1. New profile 2. launched Brave 3. created multiple tabs in multiple tab groups (*pre-requisite step) 4. right clicked on tab (BBC) and selected `Use Vertical tabs` - Confirmed all of tabs in groups, Pinned and individual tabs are carried over to vertical tab - Confirmed `Float on mouse` selection is selected by default - Confirmed `Float on mouseover`, `Expanded` & `Minimized` mode worked as expected - Confirmed drag and drop of the tabs and groups work as expected - Confirmed scrolling works as expected - Confirmed `Expand` and `Collapse` of the Vertical tab sidepanel works as expected - Confirmed same context menus for groups are carried over from horizontal view to vertical tab view (`New tab in group`, `Ungroup`, `Close group`, `Move group to new window`) step 3|step 4|vertical view|float mode|min mode|group context menu -------|------|------|-------|-----|------ ||||

Case 2: Group functionality- PASSED

*_Group tabs from horizontal view carried to vertical view_* - `PASSED` 1. New Profile 2. launch Brave 3. open cnbc.com in a new tab 4. right click a tab (News) >> Add to new group >> Name this group >>News 5. add few more tabs to News groups (CNN, USA Today) 6. click to minimize and expand the Group tab 7. enable vertical tabs in brave://flags 8. enable vertical tabs in a tab context menu - Confirmed News Group is shown in minimized and expanded state in the vertical view - Confirmed able to drag and drop tabs inside the Group example | example | example | example | example ------- | ------- | ------- | ------- | ------- |||| *_Label, color and add tab the group_* - `PASSED` 1. right click on Group name (Tech) 2. added a new site in the URL bar #### Confirmed label the group and added the tab to the group (Tech) step 1|step 2|result ----|----|----- || *_Group/Ungroup_* - `PASSED` 1. right clicked on Group name (News) 2. selected Ungroup #### Confirmed tabs are no longer in group and Group name was deleted ex|ex|ex ---|----|--- || *_Group/Close Group_* - `PASSED` 1. right clicked on Group name (Tech) - 3 tabs 2. selected Close group #### Confirmed all 3 tabs are closed and group name was deleted ex|ex|ex ---|----|--- | *_Group/Move to a new window_* 1. right click on Group name (SM) - 6 tabs 2. select Move to a new window #### Confirmed a new window opened with all tabs are shown in the group ex|ex|ex ---|----|--- ||

Case 3: Pin functionality - PASSED

*_Pinned tabs carried from horizontal tab view to vertical tab view_* - `PASSED` 1. New profile 2. launched Brave 3. selected Pinned tabs profile from Profile manager 4. visit bbc.com in a new tab 5. add few more tabs (Time, CNN, nytimes.com) 6. right click on bbc.com and select Pin in the context menu 7. Pin rest of the tabs ((Time, CNN, nytimes.com) 8. enable #brave-vertical-tabs via brave://flags 9. enabled vertical tab view via `Use vertical tabs` in Pinned tab context menu 10. enabled `Show title bar` - Confirmed Pinned tabs are carried from horizontal tab view to vertical tab view and shown on top of the panel - Confirmed vertical tab view is in expanded state when Pinned tabs are carried from horizontal view - Confirmed, `expanded`, `minimized` and `Float on Mouseover` views worked as expected with Pinned tab view - Confirmed title bar is shown when enabled - Confirmed drag & drop worked as expected with pinned and unpinned tabs example | example | example | example | example | example ------- | ------- | ------- | ------- | ------- | ------- ||||| *_Floating on mouseover_* - Default mode (Pin, Unpin & drag & drop) - `PASSED` 1. New profile 2. launched Brave 3. selected a Microsoft Edge Profile 1 4. enable #brave-vertical-tabs via brave://flags 5. visited nytimes.com in a new tab 6. enabled vertical tab view via `Use vertical tabs` in the context menu 7. Added few more tabs 8. right clicked to open the context menu and Pinned few tabs in vertical tab view 9. selected `Unpin` in the context menu to unpin a pinned tab - Confirmed nytimes.com tab is carried over to vertical tab view and is in expanded state initially - Confirmed Pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed unpinned tabs will be placed right under the pinned tabs section/separator at the top of the vertical tabs panel - Confirmed a separator shown between pinned and unpinned tabs - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed able to close tabs with `x` or keyboard shortcut `Ctrl + W` step 3| step 6| example | example | example | example ------- | ------- | ------- | ------- | ------- | ------- ||||| *_Expand mode_* - `PASSED` 1. selected `Microsoft Edge Profile 3` in Profile manager 2. added few tabs in horizontal view 3. enabled vertical tab view via `Use vertical tabs` the context menu for newyorker.com tab 4. right clicked to open the context menu and pinned few tabs in vertical tab view 5. Unselect Float on mouseover in the context menu for `Expand/Minimize` views 6. toggled `Expand/Minimize` tabs button in the vertical tab view 7. selected `Unpin` in the context menu to unpin a pinned tab in both `Expand/Minimize` views 8. toggled `Show title` in the context menu to show the title of active tab - Confirmed newyorker.com tab is carried over to vertical tab view and is in expanded state initially - Confirmed Pinned tabs with favicons shown in grid while in expanded mode - Confirmed subsequent pinned tabs will be pinned to right with overflow in expanded mode - Confirmed unpinned tabs will be placed right under the pinned tabs section/separator at the top of the vertical tabs panel - Confirmed able to drag & drop the pinned tabs in the pinned tabs section in expanded mode - Confirmed title bar is shown step 3| step 6| example | example | example | example |example ------- | ------- | ------- | ------- | ------- | ------- | -------- |||||| *_Minimize mode_* - `PASSED` 1. Continue from above `*_Expand mode_*` case 2. toggled `Expand/Minimize` tabs button in the vertical tab view to minimize the view 3. active tab is shown with `x` while minimized mode - Confirmed Pinned tabs with favicons shown in column while in minimized mode - Confirmed subsequent pinned tabs will be pinned below in column in minimized mode - Confirmed able to drag & drop the pinned tabs in the pinned tabs section in minimized mode - Confirmed unpinned tabs will be placed right under the pinned tabs section/separator at the top of the vertical tabs panel - Confirmed active tab is shown with `x` - Confirmed able to close unpinned tabs with keyboard shortcut `Ctrl + W` and by clicking `x` example | example | example | example ------- | ------- | ------- | ------- |||

Case 4: Creating a new tab - PASSED

1. Continue from above `*_Minimized_*` case 2. Added few tabs using New tab, (+), and keyboard short cut Ctrl + T - Confirmed a new tab opened when clicked `+` at the bottom left of the browser window in minimized mode - Confirmed a new tab opened when clicked `New Tab`, which will be highlighted` in `Expanded` mode/Floating mode - Confirmed a new tab opened with `Ctrl + T` keyboard shortcut for all 3 modes - Confirmed new tabs added to the bottom of the page and will scroll contents up to show the new tab - Confirmed added new tab in vertical tab view by clicking bookmark in the bookmarks bar example | example | example | example ------- | ------- | ------- | ------- |||

Case 5: Context menu - PASSED

1. Select a new profile `Context menu 2. open a new tab `newsweek.com` 3. open two more tabs (techcrunch, theverge) 4. right click on a tab to open context menu 5. verified `New tab to the right`, `close other tabs to the right` options are available in horizontal view 6. enabled `Use vertical tabs` in the context menu 7. opened context menu - Confirmed the renaming of `New tab to the right` -->`New tab below` - Confirmed the renaming of `close other tabs to the right` -->`close tabs below` - Confirmed when clicked on `New tab below`, a new tab is added below - Confirmed when clicked on `close tabs below` from active tab, all of the tabs are closed example | example | example | example | example | example | example ------- | ------- | ------- | ------- | ------- | ------ | ------- ||||||

Case 6: Full Screen - PASSED

1. selected `Fullscreen` profile 2. create few tabs in horizontal view 3. enabled vertical tab view and few more tabs 3. changed to Full screen mode via `F11` keyboard shortcut 4. changed to Full screen mode via hamburger menu>>Zoom >>`Full screen` icon - Confirmed vertical tab view shows in expanded mode initially - Confirmed enabling and exiting of Full screen works as expected with vertical tab view - Confirmed when news tabs added, they are added to the bottom of the panel and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, Expanded mode` and Minimized` mode worked as expected - Confirmed Pinned tabs with favicons shown in column while in minimized mode - Confirmed Pinned tabs with favicons shown in grid while in expanded mode - Confirmed Pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example ------- | ------- | ------- | ----- |||

Case 7: Bookmarks bar- PASSED

*_Show bookmarks - `Only on the new tab page` - Default_* - `PASSED` 1. New profile 2. launch Brave 3. Skip >> Skip >>Finish 4. `Import bookmarks now...` link is available on the bookmarks bar 5. opened brave://settings/appearance 6. enabled vertical tab view with new tab - Confirmed `Show bookmarks` entry show `Only on the new tab page` - Confirmed bookmarks bar appeared to the right of the vertical tabs panel as the vertical tabs panel flushed to the top of the main toolbar example | example ---- | ----- | *_Show bookmarks - `Always`_* - `PASSED` 1. Continue from above (Default) - enabled vertical tab view 2. clicked `Import bookmarks now...` link in the bookmarks bar 3. selected Opera Default in the Import bookmarks and settings 4. clicked Import >> Done - Confirmed bookmarks bar is shown the full width of the browser window with imported bookmarks example | example | example ---- | ----- | ----- || *_Show bookmarks - `Never`_* - `PASSED` 1. Continue from above (Always) - enabled vertical tab view - bookmarks shown 2. select `Never` for `Show bookmarks` entry in `brave://settings/appearance` 3. go to the previous tab - Confirmed bookmarks bar is hidden as expected example | example ---- | ----- |

Case 8: Multiple tab selection - PASSED

1. New profile 2. launch Brave 3. completed importing multiple profiles from Microsoft edge 4. open a profile (`Mutliple tabs`) 5. enabled a vertical tab in the New tab 6. added few more tabs *_Close_* - `PASSED` - selected multiple tabs (3) - right clicked and selected `Close` - Confirmed selected 3 (multiple) tabs are closed. - Confirmed selected 3 tabs are closed with keyboard shortcut Ctrl + W example | example ---- | ---- | *_Group_* - `PASSED` - selected multiple tabs (3) - right clicked and selected `Add tabs Group` - named the group `travel` - Confirmed 3 tabs added to the group `travel` example | example | example ---- | ---- | ---- || *_Reload_* - `PASSED` - selected multiple tabs (3) - right clicked and selected `Reload` - Confirmed selected 5 (multiple) tabs are reloaded - Confirmed selected 5 tabs are closed with keyboard shortcut Ctrl + R example | example | example ---- | ---- | ---- || *_Duplicate_* - `PASSED` - selected multiple tabs (2) - right clicked and selected `Duplicate` - Confirmed selected 2 (multiple) tabs are duplicated example | example ---- | ---- |

Case 9: Mute & Unmute tabs, sites, and audio playing pinned tabs - PASSED

Encountered favicons are overlapping speaker icons - https://github.com/brave/brave-browser/issues/30021

Mute tab/Unmute tabs - PASSED

1. new profile 2. add few tabs including audio playing tabs in vertical tab view 3. right click on audio playing tab to open context menu 4. selected `Mute tab` 5. confirmed audio playing tab is muted successfully 6. clicked speaker icon to Unmute the tab 7. confirmed audio played again #### Confirmed Mute tab/Unmute tab works as expected in Expanded mode/Minimized and Float modes step 2 | step 4 | step 6 | floating | minimized --- | ---- | -----| ---- | ----- ||||

Mute site/Unmute sites - - PASSED

1. continue from above with 2 audio playing tabs available in vertical tab view 2. right click on audio playing tab to open context menu 3. selected `Mute site` (YT) 4. confirmed both audio playing tabs are muted successfully 5. clicked Unmute site in the context menu to the second tab 6. confirmed audio played again in both tabs 7. click again `Mute site` and click `Unmute tab` #### Mute site/Unmute site worked as expected and Mute tab/Unmute Tab over rides the option as expected in Expanded mode/Minimized and Float modes step 3| step 4 | step 5| step 6| step 7 ---- | ----- | ----- | ---- | ---- ||||

Mute/Unmute audio playing pinned tabs - PASSED

1. continue from above with audio playing tabs available in vertical tab view 2. pin couple of tabs 3. play media on one of the pinned tab 4. switch to another pinned tab 5. Mute the pinned tab with audio playing via context menu 6. confirmed audio playing tab is muted successfully 7. activate the pinned tab with audio playing 8. clicked speaker icon to Unmute tab and confirmed audio played again #### Confirmed Mute/Unmuting audio works on pinned tabs as expected in Expanded mode/Minimized and Float modes step 3|step 5|step 6|step 6|results -----|-----|----|-----|---- ||||

Testcase 3: Vertical tab view - New window, Private Window, and Private Window with Tor and Guest window- PASSED

Case 1: New Window - PASSED

1. new profile 2. launched Brave 3. clicked `Set Brave as default Browser` 4. clicked `Import` to import `Chrome` 5. clicked `Selected All` >>`Import profiles` 6. clicked `Finish` 7. selected `Google Chrome Person 1` 8. opened `brave://flags` 9. selected `Enabled` for `#brave-vertical-tabs` 10. clicked Relaunch 11. clicked to open `ABC News` bookmark 12. enabled `Use vertical tabs` in the context menu 13. clicked in the hamburger menu to open `New window` 14. clicked `+` to add few tabs - Confirmed vertical tab view carried to `New window` with New Tab shown and is in expanded mode initially - Confirmed when news tabs, they are added to the bottom of the page and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, Expanded mode` and Minimized` mode worked as expected - Confirmed Pinned tabs with favicons shown in column while in minimized mode - Confirmed Pinned tabs with favicons shown in grid while in expanded mode - Confirmed Pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example ------- | ------- | ------- | ------ |||

Case 2: New private Window - PASSED

1. continue from Case 5 (New window) 2. - `vertical tabs enabled in Normal window` 3. - `vertical tab view is shown 4. clicked `New private window` in the hamburger menu 5. clicked `+` to add few tabs - Confirmed vertical tab view carried to `New private window` with New Private Tab shown and is in expanded mode initially - Confirmed when news tabs, they are added to the bottom of the panel and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, Expanded mode` and Minimized` mode worked as expected - Confirmed Pinned tabs with favicons shown in column while in minimized mode - Confirmed Pinned tabs with favicons shown in grid while in expanded mode - Confirmed Pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example ------- | ------- | ------- | ------ |||

Case 3: New private Window with Tor - PASSED

1. continue from Case 5 (New window) 2. - `vertical tabs enabled in Normal window` 3. - `vertical tab view` is shown 4. clicked `New private window with Tor` in the hamburger menu 5. clicked `+` to add few tabs - Confirmed vertical tab view carried to `New private window with Tor` with New Private Tab shown and is in expanded mode initially - Confirmed when news tabs added, they are added to the bottom of the panel and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, Expanded mode` and Minimized` mode worked as expected - Confirmed Pinned tabs with favicons shown in column while in minimized mode - Confirmed Pinned tabs with favicons shown in grid while in expanded mode - Confirmed Pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example ------- | ------- | ------- | ------ |||

Case 4: Guest window - PASSED

1. continue from Case 5 (New window) 2. - `vertical tabs enabled in Normal window` 3. - `vertical tab view` is shown 4. clicked `Open guest window` in the hamburger menu 5. clicked `+` to add few tabs - Confirmed Guest window shows horizontal tab view always as expected - Confirmed tabs are added horizontal tab view as expected example | example | example ------- | ------- | ------- ||

Testcase 4: Upgrade - PASSED

Pre-requisite: Seed the profile with `Multiple tabs`, `Pinned tabs`, `Audio playing tabs`, `Audio playing pinned tabs,` `Tab groups`, `Bookmarks`, `Reading list` Spotify: Pinned audio playing tab YouTube: Muted tab pinned tab Tab groups: `Social media` and `Audio & Video` 1. Install 1.50.121 2. launched Brave with above seeded profile 3. close Brave 4. installed 1.51.105 5. renamed the profiled to Brave-Brower-Beta 6. launched Brave 7. enabled `Use vertical tabs` in the context menu 1.50.121 example | example ---- | ----- | - Confirmed Pinned tabs (audio and non audio) are shown in the Pinned tab section - Confirmed Tab groups are shown (Social media & Audio & video) - Confirmed multiple tabs are shown as expected - Confirmed reading list is shown - Confirmed bookmarks are shown in bookmarks bar and sidebar panel and brave://bookmarks - Confirmed Mute/Unmute tabs and Mute/Unmute sites are working as expected - Confirmed audio played thru media control icon - Confirmed title is shown when Search title bar is enabled - Confirmed full screen worked as expected - Confirmed able to select multiple tabs 1.51.105 Expanded mode|Float mode|Minmized mode|readinglist|bookmarks| -------|-------|----------|---------|---------- |||| tab search bubble|show title bar|full screen|multiple sites|Audio Playing tab -------|-------|------|-------|-------- ||||

[stephendonner]

Verification PASSED using

Brave	1.51.93 Chromium: 112.0.5615.121 (Official Build) beta (x86_64)
Revision	39cc4e45904ae9f1741c4fbaa866e629c96f2268-refs/branch-heads/5615_51@{#8}
OS	macOS Version 13.4 (Build 22F5037d)

AND

Brave	1.51.96 Chromium: 112.0.5615.121 (Official Build) beta (x86_64)
Revision	39cc4e45904ae9f1741c4fbaa866e629c96f2268-refs/branch-heads/5615_51@{#8}
OS	macOS Version 13.4 (Build 22F5037d)

Testcase area 1 - Appearance

Case 1 - Vertical tabs enabled via brave://flags - PASSED

1. installed `1.51.93` 2. launched Brave 3. clicked `Set Brave as default browser` 4. clicked `Import` to import from `Chrome Canary` 5. selected `Canary Person 1` >> `Import profile` 6. clicked `Finish` 7. opened `brave://flags` 8. selected `Enabled` for `#brave-vertical-tabs` 9. clicked `Relaunch` 10. clicked to open CNN bookmark 11. loaded `msnbc.com` 12. right-clicked on the tab to open context menu step 4 | step 5 | step 8 | step 12 -------|-------|--------|-------- | | |

Case 2: Vertical tabs appearance/UI - PASSED

`Light` mode | `Dark` mode --------------|-------------- |

Case 3: Tab-view orientation - Vertical tabs to horizontal, and vice-versa - PASSED

Continued from `Case 1` 1. `Use Vertical Tabs` entry is shown in the context menu 2. clicked `Use Vertical Tabs` entry in the context menu 3. Unchecked `Use Vertical Tabs` entry 4. rechecked `Use Vertical Tabs` entry - Confirmed orientation of the tab view changed from horizontal to vertical tab view - Confirmed Vertical tab sidebar shown on the left side of the screen - Confirmed Sidebar and sidepanel moved to right side of the screen - Confirmed orientation switched back to horizontal view when `Use Vertical Tabs` entry unchecked in the context menu - Confirmed Vertical tab sidebar displayed again when `Use Vertical Tabs` checked step 2 | step 3 | step 4 -------|--------|------ | |

Case 4: Vertical tab view visual modes - Floating, Expanded, & Minimized modes - PASSED

_Floating on mouseover - default_ Continued from `Case 3` 1. vertical-tab sidebar is shown on the left of the screen 2. context-clicked on a vertical tab (`nbcnews.com`) 3. confirmed context menu shows `Float on mouseover` checked 4. clicked `Expand`/`Minimize tabs` button 5. hovered/un-hovered over the sidebar to expand/minimize the vertical-tab view 6. clicked `+ New Tab` at the bottom left to add new tabs while in float mode 7. clicked `x` while float/expand mode to close the tab - Confirmed vertical tab view is on `Float mode` when hovered over - Confirmed when clicked `Expand`/`Minimize` tabs-toggle button, the vertical tab view can be expanded/collapsed - Confirmed able to add new tabs by clicking `New Tab` or keyboard shortcut `command` + `T` - Confirmed able to close the tab by clicking `x` or with keyboard shortcut `command` + `W` expanded | collapsed | example ----------|-----------|--------- | | _Expanded mode and minimized mode_ 1. continued with above `Floating on mouseover` - context menu shows `Float on mouseover` - vertical-tab sidebar/expanded mode is shown 2. unchecked `Float on mouseover` in the context menu 3. toggled `Expand`/`Minimize` tabs button 4. hovered over a favicon and click to display `x` button and closed the tab - Confirmed `Expand`/`Minimize tabs` button toggled, vertical-tab sidebar is minimized/expanded and `Float mode` is not available - Confirmed able to close the tab by clicking `x` or with keyboard shortcut `command` + `W` in both modes - Confirmed able to add new tabs by clicking `New Tab` or keyboard shortcut `command` + `T` in both modes example | example | example | example | example ---------|---------|----------|----------|--------- | | | |

Case 5: Tab drag & drop - PASSED

### Logged: * https://github.com/brave/brave-browser/issues/29668 * https://github.com/brave/brave-browser/issues/29873 ### Encountered: * https://github.com/brave/brave-browser/issues/29836 * https://github.com/brave/brave-browser/issues/29876 * https://github.com/brave/brave-browser/issues/29915

---

Testcase area 2: Tab-view orientation with Groups & Pins

Case 1: Groups in the horizontal tab view carried over to vertical-tab view - PASSED

Prerequisite: Create multiple tabs for tab grouping and pin-tab horizontal view `News`, `Tech`, `Food`, `Social media`, `Travel` & pinned tabs (`Brave`, `The Browser Company`, `Mozilla`) 1. new profile 2. launched Brave 3. created multiple tabs in multiple tab groups (prerequisite step) 4. context-clicked on tab (`bbc.com`) and selected `Use Vertical Tabs` * confirmed all tabs in group, pinned, and individual tabs are carried over to vertical tabs * confirmed `Float on mouseover` is selected by default * confirmed `Float on mouseover`, `Expanded` and `Minimized` modes worked as expected * confirmed drag & drop of the tabs and groups work as expected * confirmed scrolling works as expected * confirmed `Expand` and `Collapse` of the vertical tab sidepanel works as expected step 3 | step 4 | vertical view | float mode | min mode | group context menu -------|-------|--------------|------------|-----------|--------------------- | | | | | ...

(I preserved numbering from @MadhaviSeelam 's original test plan, so as not to diverge - will try to sync to it/fix.))

Case 1: Group functionality - PASSED

*_Group tabs from horizontal view carried to vertical view_* 1. new Profile 2. launch Brave 3. open `cnbc.com` in a new tab 4. context-click the tab >> `Add to New Group` >> `Name this Group` >> `News` 5. add few more tabs to News groups (`cnn.com`, `usatoday.com`) 6. click to minimize and expand the group tab 7. enable vertical tabs in `brave://flags` 8. enable vertical tabs in a tab context menu - Confirmed `News` group is shown in minimized and expanded state in the vertical view - Confirmed able to drag and drop tabs inside the group example | example | example | example | example ------- | ------- | ------- | ------- | ------- | | | | *_Label, color and add tab the group_* 1. right click on group name (`Tech`) 2. added a new site in the URL bar #### Confirmed I could label the group and added the tab to the group (`Tech`) step 1|step 2|result ----|----|----- | | *_Group/Ungroup_* 1. context-clicked on group name (`News`) 2. selected `Ungroup` #### Confirmed tabs are no longer in group and group name was deleted ex|ex|ex ---|----|--- | | *_Group/Close Group_* 1. context-clicked on group name (`Tech`) 2. selected `Close group` #### Confirmed all tabs are closed and group name was deleted ex|ex|ex ---|----|--- | | *_Group/Move to a new window_* 1. context-clicked on group name (`Social Media`) 2. selected `Move to a new window` #### Confirmed a new window opened with all tabs are shown in the group ex|ex|ex ---|----|--- | |

Case 2: Pin functionality - PASSED

*_Pinned tabs carried from horizontal tab view to vertical tab view_* - `PASSED` 1. new profile 2. launched Brave 3. loaded a bunch of sites in tabs 4. visited `bbc.com` in a new tab 5. add few more tabs (`cnn.com`, `euronews.com`, `nbcnews.com`) 6. context-clicked on `bbc.com` and selected `Pin` in the context menu 7. pinned rest of the tabs (`cnn.com`, `euronews.com`, `nbcnews.com`) 8. enabled `#brave-vertical-tabs` via `brave://flags` 9. enabled vertical tab view via `Use Vertical Tabs` in pinned-tab's context menu - Confirmed pinned tabs are carried from horizontal tab view to vertical tab view - Confirmed vertical tab view is in expanded state when pinned tabs are carried from horizontal view - Confirmed , `expanded`, `minimized` and `Float on Mouseover` views worked as expected with pinned tab view example | example | example | example | example | example ------- | ------- | ------- | ------- | ------- | ------- | | | | | *_Floating on mouseover_* - Default mode (`Pin`, `Unpin` & `drag & drop`) - `PASSED` 1. new profile 2. launched Brave 3. loaded a bunch of sites in tabs 4. enabled `#brave-vertical-tabs` via `brave://flags` 5. visited `nytimes.com` in a new tab 6. enabled vertical-tab view via `Use Vertical Tabs` in the context menu for `nytimes.com` 7. Added a few more tabs 8. right clicked to open the context menu and Pinned few tabs in vertical tab view 9. selected `Unpin` in the context menu to unpin a pinned tab - Confirmed `nytimes.com` tab is carried over to vertical tab view and is in expanded state initially - Confirmed pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed unpinned tabs will be placed right under the pinned tabs section/separator at the top of the vertical tabs panel - Confirmed a separator shown between pinned and unpinned tabs - Confirmed able to drag & drop the pinned tabs in the pinned tabs section step 3| step 6| example | example | drag | drop | drag | drop ------- | ------- | ------- | ------- | ------- | ------- | -------- | ------- | | | | | | | *_Expanded mode_* - `PASSED` 1. new profile 2. imported my `Chrome Canary Person 1` profile 3. loaded `nbcbayarea.com` and chose `Use Vertical Tabs` from its context menu 4. context-clicked to open the context menu and pinned a few tabs in vertical-tab view 5. deselected `Float on mouseover` in the context menu for `Expand/Minimize` views 6. toggled `Expand/Minimize` tabs button in the vertical-tab view 7. selected `Unpin` in the context menu to unpin a pinned tab in both `Expand/Minimize` views 8. toggled `Show title` in the context menu to show the title of active tab - Confirmed `nbcbayarea.com` tab is carried over to vertical-tab view and is in expanded state initially - Confirmed pinned tabs with favicons shown in grid while in expanded mode - Confirmed subsequent pinned tabs will be pinned to right with overflow in expanded mode - Confirmed unpinned tabs will be placed right under the pinned tabs section/separator at the top of the vertical tabs panel - Confirmed able to drag & drop the pinned tabs in the pinned tabs section in expanded mode - Confirmed title bar is shown step 3| step 6| example | example | example | example |example ------- | ------- | ------- | ------- | ------- | ------- | -------- | | | | | | *_Minimized mode_* - `PASSED` 1. continued (re-created) from above `Expand mode` case 2. toggled `Expand/Minimize` tabs button in the vertical tab view to minimize the view 3. active tab is shown with `x` while minimized mode - Confirmed pinned tabs with favicons are shown in column while in minimized mode - Confirmed subsequent pinned tabs will be pinned below in column in minimized mode - Confirmed able to drag & drop the pinned tabs in the pinned-tabs section in minimized mode - Confirmed unpinned tabs will be placed right under the pinned tabs section/separator at the top of the vertical tabs panel - Confirmed active tab is shown with `x` - Confirmed able to close active with `x` or keyboard shortcut `command` + `W` `Expanded` | `Minimized` | `"x" to close, on hover` | `pinned (blue) tabs` | `command` + `w` ------- | ---------- | -------- | -------- | ------ | | | |

Case 3: Creating a new tab - PASSED

1. continued from above `Minimized` testcase 2. added a few new tabs using `New tab`, `(+)`, and keyboard shortcut keys `command` + `T` - Confirmed a new tab opened when clicked + at the bottom left of the browser window in minimized mode - Confirmed a new tab opened when clicked `New Tab`, which will be highlighted in `Expanded` mode/`Floating` mode - Confirmed a new tab opened with `command` + `T` keyboard shortcut for all 3 modes - Confirmed new tabs added to the bottom of the page and will scroll contents up to show the new tab - Confirmed added new tab in vertical-tab view by clicking bookmark in the bookmarks bar example | example | example | example ---------|----------|---------|---------- | | |

Case 4: Context-menu options - PASSED

1. created a new profile 3. loaded `newsweek.com` 4. opened two more tabs (`techcrunch.com`, `theverge.com`) 5. context-clicked on a tab to open its context menu 6. verified `New Tab to the Right`, `Close Other Tabs` to the right options are available in horizontal view 7. enabled `Use Vertical Tabs` in the context menu 8. opened context menu - Confirmed the renaming of `New Tab to the Right` --> `New Tab Below` - Confirmed the renaming of `Close Tabs to the Right` --> `Close Tabs Below` - Confirmed when clicking on `New Tab Below`, a new tab is added below - Confirmed when clicking on `Close Tabs Below` from active tab, all of the tabs are closed example | example | example | example | example | example ---------|----------|---------|----------|---------|---------- | | | | | |

Case 5: Normal Window, Private Window, Private Window with Tor, and Guest window - PASSED

New Window - `PASSED`

1. new profile 2. launched Brave 3. clicked `Set Brave as default Browser` 4. clicked Import to import `Chrome Canary` 5. clicked `Import profiles` 6. clicked `Finish` 7. selected `Chrome Canary Person 1` 8. clicked to open `abcnews.com` bookmark 9. enabled `Use vertical tabs` in the context menu 10. clicked in the hamburger menu to open `New window` 11. clicked `+` to add a few tabs - Confirmed vertical tab view carried to New window with New Tab shown and is in expanded mode initially - Confirmed when news tabs, they are added to the bottom of the page and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, `Expanded` mode and `Minimized` mode worked as expected - Confirmed pinned tabs with favicons shown in column while in minimized mode - Confirmed pinned tabs with favicons shown in grid while in expanded mode - Confirmed pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example | example ---------|----------|---------|----------|-------- | | | |

Private window - `PASSED`

1. continue from `Case 5 (New window)` - vertical tabs enabled in Normal window - vertical tab view is shown 2. clicked `New Private Window` in the hamburger menu 3. clicked `+` to add a few tabs - Confirmed vertical-tab view carried to `New Private Window` with New Private Tab shown and is in expanded mode initially - Confirmed when news tabs, they are added to the bottom of the panel and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, `Expanded` mode, and `Minimized` mode worked as expected - Confirmed pinned tabs with favicons shown in column while in minimized mode - Confirmed pinned tabs with favicons shown in grid while in expanded mode - Confirmed pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example | example | example ---------|----------|---------|----------|---------|---------- | | | | |

Private window w/Tor - `PASSED`

1. continue from `Case 5 (New window)` - vertical tabs enabled in Normal window - vertical tab view is shown 2. clicked `New Private Window with Tor` in the hamburger menu 3. clicked `+` to add a few tabs - Confirmed vertical-tab view carried to `New Private Window with Tor` with `New Private Tab` shown and is in expanded mode initially - Confirmed when news tabs, they are added to the bottom of the panel and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, `Expanded` mode and `Minimized` mode worked as expected - Confirmed pinned tabs with favicons shown in column while in minimized mode - Confirmed pinned tabs with favicons shown in grid while in expanded mode - Confirmed pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example | example ---------|----------|---------|----------|--------- | | | |

Guest window - `PASSED`

1. continue from `Case 5 (New window)` - vertical tabs enabled in `Normal window` - vertical-tab view is shown 2. clicked `Open Guest Window` in the hamburger menu 3. clicked `+` to add a few tabs - Confirmed `Guest window` shows horizontal tab and vertical-tab views - Confirmed tabs are added horizontal tab view as expected example | example | example | example ---------|---------|----------|--------- | | |

Case 6: Full-screen tabs - PASSED

1. loaded a few tabs in horizontal view 2. enabled vertical tab view and few more tabs 3. changed to Full screen mode via F11 keyboard shortcut 4. changed to Full screen mode via hamburger menu>>Zoom >>Full screen icon - Confirmed vertical tab view shows in expanded mode initially - Confirmed enabling and exiting of Full screen works as expected with vertical tab view - Confirmed when news tabs added, they are added to the bottom of the panel and will scroll contents up to show the new tab - Confirmed visually no scroll bar is available but able to scroll up and down with trackpad - Confirmed `Float on mouseover`, `Expanded` mode, and `Minimized` mode worked as expected - Confirmed pinned tabs with favicons shown in column while in minimized mode - Confirmed pinned tabs with favicons shown in grid while in expanded mode - Confirmed pinned tabs will take the full length of the panel to and display the tab title along with favicons - Confirmed drag & drop worked as expected with pinned and unpinned tabs - Confirmed able to label, color code, create new tab, group, ungroup, close & move a group to new window example | example | example | example ---------|----------|---------|---------- |  |  |

Brave	1.51.103 Chromium: 112.0.5615.165 (Official Build) beta (x86_64)
Revision	c262f36e6b1d711ee42d4fbe1343b49960593f18-refs/branch-heads/5615@{#1297}
OS	macOS Version 13.4 (Build 22F5037d)

Case 7: Bookmarks Bar - PASSED

_Show bookmarks_ - `Only on the new tab page` - Default 1. new profile 2. launch Brave 3. `Skip` -> `Skip` -> `Finish` 4. `Import bookmarks now...` link is available on the bookmarks bar 5. opened `brave://settings/appearance` 6. enabled vertical-tab view with new tab * Confirmed `Show bookmarks` entry shows `Only on the new tab page` * Confirmed bookmarks bar appeared to the right of the vertical-tabs panel, as the vertical-tabs panel is flushed to the top of the main toolbar example | example ---------|--------- | _Show bookmarks_ - `Always` 1. (continued from above, `Default` - enabled vertical-tab view 2. clicked `Import bookmarks now...` link in the bookmarks bar 3. selected my `Chrome Canary` profile in the `Import bookmarks and settings` window 4. clicked `Import` -> `Done` example | example | example ---------|---------|--------- | | _Show bookmarks_ - `Never` 1. (continued from above, `Always`) - enabled vertical-tab view - bookmarks shown 2. select `Never` for `Show bookmarks` entry in `brave://settings/appearance` 3. go to the previous tab * Confirmed bookmarks bar is hidden as expected example | example ---------|--------- |

Case 8: Multiple-tab selection - PASSED

1. new profile 2. launch Brave 3. loaded a bunch of sites in new tabs 4. enabled vertical tabs _Close_ * selected multiple tabs * context-clicked and selected `Close` - Confirmed selected multiple tabs are closed - Confirmed selected multiple tabs are closed with keyboard shortcut `command` + `W` example | example ---------|--------- | _Group_ * selected multiple tabs * context-clicked and selected `Add Tabs to New Group` * named the group `travel` - Confirmed 3 tabs were added to the `travel` group example | example | example ---------|----------|--------- | | _Reload_ * selected multiple tabs * context-clicked and selected `Reload` * Confirmed selected multiple tabs are reloaded * Confirmed selected 5 tabs are closed with keyboard shortcut `command` + `R` example | example | example ---------|---------|---------- | | _Duplicate_ * selected multiple tabs * context-clicked and selected `Duplicate` - Confirmed selected tabs are duplicated example | example ---------|--------- | _Mute & unmute tabs_ * loaded a couple audio-playing videos on youtube.com * `shift` + `clicked` to select two adjacent tabs * context-clicked and chose `Mute tabs` * opened another youtube.com audio-playing video - Confirmed the 1st two youtube.com tabs were muted - Confirmed the 3rd youtube.com tab was NOT muted example | example | example ---------|---------|--------- | | _Mute & unmute sites_ * loaded a couple audio-playing videos on youtube.com * `shift` + `clicked` to select two adjacent tabs * context-clicked and chose `Mute sites` * opened another youtube.com audio-playing video - Confirmed the 1st two youtube.com tabs were muted - Confirmed the 3rd youtube.com tab was also muted * opened `https://www.twitch.tv/tarik` - Confirmed audio was playing on the Twitch.tv tab example | example | example ---------|----------|--------- | |

Case 9: Upgrade - PASSED

Brave | 1.51.104 Chromium: 112.0.5615.165 (Official Build) beta (x86_64) -- | -- Revision | c262f36e6b1d711ee42d4fbe1343b49960593f18-refs/branch-heads/5615@{#1297} OS | macOS Version 13.4 (Build 22F5049e) 1. installed `1.50.121` 2. launched Brave 3. loaded several sites in new tabs 4. added several groups, and added some tabs to the groups 5. opened `brave://settings/appearance` 6. set `Show bookmarks` to `Always` (confirm the `Import bookmarks now...` section shows up) 7. shut down Brave 8. installed `1.51.104` 9. copied `Brave-Browser` and renamed the copy to `Brave-Browser-Beta` 10. relaunched Brave 11. context-clicked on a tab 12. chose `Use Vertical Tabs` ### `1.50.121` `Many tabs` | `Tab search` | `brave://settings/appearance` ---------|---------|----------- | | ### `1.51.104` `Use Vertical Tabs`, `enabled` | `Vertical-tab mode` | `Float on mouseover` (default) | `Tab-scrolled to find active tab` | `Use Vertical Tabs`, `disabled` | `Tab search` | `brave://settings/appearance` ---------|----------|---------|----------|-----------|-----------|----------------- | | | | | |

[rebron]

Closing per verifications. Still need https://github.com/brave/brave-browser/issues/29659.

[LaurenWags]

Per discussion in today's desktop call, marking this as QA Pass-Linux as the Linux vertical tab testing was crowdsourced from internal folks via https://bravesoftware.slack.com/archives/C042KL922P3/p1684265068786289. Special thanks to @srirambv @rillian for helping out and reporting issues.

Some open issues include:

• https://github.com/brave/brave-browser/issues/30389
• https://github.com/brave/brave-browser/issues/30392
• https://github.com/brave/brave-browser/issues/30398