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

2023-04-13_15h49_58.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 inExpanded` 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
4. changed to Full screen mode via F11 keyboard shortcut
5. 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 - #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:

• Vertical tabs' titles glyphs show after being drag and dropped in floating mode #29668
• Drag & drop of vertical tabs forces a tab selection/page load #29873

Encountered:

• Context menu doesn't always open for current/active tab in vertical tabs minimized mode #29836
• After tearing off a tab (Move tab to another window) in vertical tab minimized mode, unable to move/drop the tab back to original window  #29876
• After tearing off a tab (Move tab to another window) in vertical tab Full screen, unable to move/drop the tab back to original window #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
2. loaded newsweek.com
3. opened two more tabs (techcrunch.com, theverge.com)
4. context-clicked on a tab to open its 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 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 #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:

• Vertical tab disappears dragging between windows #30389
• Unable to move a tab in between tab groups when expanded #30392
• Vertical tab strip should self-collapse/minimize, after context-clicked (but not tab-focused) action #30398