Split view MVP tasks

[sangwoo108]

Figma designs: https://www.figma.com/file/uiDbQ0ocpqiraWEeQVUyId/Tabs---Vertical-%2F-Split-%2F-Sidebar?type=design&node-id=35%3A6412&mode=dev

Spec: https://bravesoftware.slack.com/archives/CKNHM4RTK/p1740163891132429?thread_ts=1739912894.037299&cid=CKNHM4RTK

Relevant Figma images and spec details are included in the issues below.

Tasks

Preview Give feedback

1. Make flag to enable split view
2. Tab group should be considered
3. Drag and drop should work for both tabs.
4. Make data structure to manage split view data #37088
   OS/Desktop QA/No priority/P3 release-notes/exclude +4
   
5. Make context menu item to tile two tabs in split view / unset tiled views
6. BrowserView::GetAccessiblePane
7. Make secondary web view to support SplitView #37231
   OS/Desktop QA/No priority/P3 release-notes/exclude +4
   
8. Draw bounding rects for split view tiles #37274
   QA/No priority/P3 release-notes/exclude +3
   
9. Adjust split view tile layout in vertical tab #37539
   OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
   
10. Devtools for secondary web view is not visible #37413
    OS/Desktop QA/No priority/P3 release-notes/exclude +4
    
11. Open link test
12. Tabs created from split view is located between tiled tabs #37326
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
13. Break tiles when moved tabs are between tiles #37328
    OS/Desktop QA/No priority/P3 release-notes/exclude +4
    
14. Split view crashes when switching tabs orientation #37408
    OS/Desktop QA/No priority/P3 release-notes/exclude +4
    
15. Replace weakptr with raw_ptr in OnTabDragEndedClosure #37576
    OS/Desktop QA/No dev-concern release-notes/exclude +4
    
16. Replace base::FeatureList::IsEnabled(kSplitView) with SplitViewBrowserData::FromBrowser() if possible #37577
    OS/Desktop QA/No priority/P3 release-notes/exclude +4
    
17. Activate tab in secondary web view when it's focused #37677
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
18. Synchronize grouped state on tiling two tabs #37717
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
19. Dragging a tab in a tile should move the other tab paired move together #37678
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
20. Update split view tile design in vertical tab mode #37712
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
21. Synchronize pinned state on tiling tabs #37761
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
22. Make test for case where tile breaks after moving tabs Break tile when moved tabs are between tiles brave-core#22933 (comment)
23. Blank tab behavior - Brave crashes with Split View flag enabled when getting a popup window. #37447 (comment)
24. When there're multiple pinned tabs, opening split view for a pinned tab tiles wrong tab #37803
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
25. Draw border for contents web views in split view mode #37804
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
26. Rename tab context menu label break into tabs => Unsplit tabs #37850
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
27. Remove 'Close SplitView' tab context menu item #37851
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
28. SplitView's Tile should be kept after detaching into new window #37852
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
29. Update SplitView tile background color #37919
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
30. Update secondary web view and focus border's radius #37924
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
31. Hide the Splitview flag in Release channel #38302
    OS/Desktop QA Pass-Win64 QA/Yes release-notes/exclude split view +5
    
32. Add resize handle for split view #38356
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
33. Resized amount for split view tile should be kept per tile #38392
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
34. Add Menu button to split view separator #38584
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
35. Add "Swap Split view position" #38656
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
36. Alleviate flickering when switching tabs with split view #38691
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
37. Show split view menu button only when it's hovered #38908
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
38. Add "Open in split view" render context menu #38903
    OS/Desktop QA/No closed/duplicate priority/P3 release-notes/exclude split view +6
    
39. Enable #brave-split-view #38710
    OS/Desktop QA Pass-Win64 QA/Yes priority/P3 release-notes/exclude split view +6
    
40. Need minimum width for each split view #39004
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
41. Support Stacked Mode in Split View #38740
    OS/Desktop QA/No feature-request needs-discussion priority/P3 release-notes/exclude split view +7
    
42. Extend hit test area for split tab #39006
    +0
    
43. Lay out Javascript tab modal dialog centered to related web view in Split View mode #39598
    OS/Desktop QA/No priority/P3 release-notes/exclude split view +5
    
44. Show origin on file chooser dialog #39682
    OS/Desktop QA Pass-Linux QA Pass-Win64 QA Pass-macOS QA/Test-All-Platforms QA/Test-Plan-Specified QA/Yes priority/P3 release-notes/exclude +9
    
45. When you click to activate a tab in split view, the window onfocus event is always called twice with different event.timeStamp - this might be because we swaps web views
46. Permission dialog pops up when the tab is not active in split view

TBD / Follow-ups

Preview Give feedback

1. location bar
2. Focuses wrong ui component - Brave crashes with Split View flag enabled when getting a popup window. #37447 (comment) - may not be problem
3. Video fullscreen doesn't work well
4. Split View tile should persist even after restarting the Browser #40062
   OS/Desktop QA/Yes priority/P3 release-notes/exclude split view +5
   
5. 3+ split view
6. Need menu button in the gap between split views

Test plan

Creating a Split View

1. Right click on a tab and check that New Split View is below Reload in the menu. Select New Split View. The selected tab should appear on the left and a new tab page should appear on the right. Focus should appear on the newly created split item. In the tab bar, the items in the split view should come together and look combined and the split in focus should be highlighted.
2. Open a web page of your choice that has a few links and right click on a link. Check that Open Link in Split View is below Open Link in Private Window with Tor. Select Open Link in Split View and the linked page should appear to the right of the existing page. Focus should appear on the newly created split item.
3. Select two tabs, and select Open in Split View. Ensure that both tabs are opened in split view of equal size within the window and the right side split is in focus.
4. Select two tabs like above but in three more variations, 1. Pinned tab and a normal tab. 2. Tabs within a group. 3. Tabs that are not adjacent to each other.
5. Repeat above steps in Vertical tab mode.

Unsplit Tabs

1. Right click on a split view tab and select Unsplit Tabs. Tabs should be unsplit and look like before and will be next to each other.
2. Have a split view open, and select the the Split view button in the middle of the split and select Unsplit Tabs. Tabs should be unsplit and look like before.

Closing a tab in split view

1. Closing a tab in split view should act like normal and close the tab, either by selecting the x or by shortcut. By closing a tab within a split view automatically unsplits the tab and the other tab should remain. Restoring that tab should only restore the tab and not the split.

Drag and Dropping a Split View

1. Have several tabs open and also have a split view. Select the split view tabs and drag and drop to different positions within a full tab bar.
2. From step 2 above, check that you can drag a split view into a tab group.
3. Select split view tabs and drag the split view out to create a new window with just the split view. Drag the split view items from the new window and ensure you can drag back into the original window or any other open window.

Pinning/unpinning a Split View

1. Pin a split view by selecting the split view tab and right clicking to Pin. Ensure that Pinned split view shows focus when selecting one of the split view items.
2. Ensure you can Unpin a split view by right clicking either Pinned split view item.

Resizing and Swapping Tab Positions

1. Right click on split tab and select Swap Tab Positions. Tab position should switch.
2. Select split view button in the middle of the screen and select Swap Tab Positions. Tabs positions should switch.
3. Hover over the separator (in the middle of the split) and the mouse pointer should turn into a resize pointer. Resize the window left and right and there should be a minimum width of the smaller window.

Appearance and security UI

1. When in a split view, check that the focused tab has a border around it and that the split tab in the tab bar is highlighted and also in focus.
2. Check that the unfocused tab shows the url of the page on the top left of the split view.
3. Select the tune/permissions button in the url bar and check that domain is the same as the focused tab.
4. Select the Shields button and check that domain is the same as the focused tab.

[bridiver]

Similar to the follow up issue we should include more content here rather than just linking to Figma. This is currently completely opaque to anyone outside of Brave and I don't even know if everyone inside of Brave already has a Figma login or not.

[sangwoo108]

I intentionally left figma link just in case. Asked @aguscruiz if it's okay to open our design public.

[aguscruiz]

Hi. This would probably be solved if we just add more screenshots to issues, right?

I try to add them sparingly because the problem with them is that they get outdated as soon as I make a tiny change. That's why I prefer figma links.

Regarding Figma access, everyone who has a @brave.com email has access to all of our Figma environment, so that shouldn't be a problem.

[bridiver]

I try to add them sparingly because the problem with them is that they get outdated as soon as I make a tiny change. That's why I prefer figma links.

I think that actually makes the problem here worse because this PR represents a snapshot in time, but figma is changing. That makes it particularly difficult to come back to changes in the future to see what they were supposed to do. Remember that these issues attached to PRs are not just about what we need to do right now, they are a record of what we did and why for the future.

[ghost]

Just throwing some general feedback of Split View progress.

1. ${{\color{Orange}\huge{\text{ Add Menu button to split view separator 38584}}}}$: In Vertical tabs, when you enable Split view, and then you you expand or minimize it the VT, the button doesn't follow the split line, just resizing a little will fix it though.
   

2. ${{\color{green}\huge{\text{ Resized amount for split view tile should be kept per tile 38392}}}}$: This is still keeping the size of the split view per window, so for example, you enable Split view and change the size and then you split other tabs in the same window, it will show the same size, but not in a new window.
   I don't mind about the size being per window, because I think it would be good to have a have a 'reset' button to quickly reset everything to be 50/50 or have a way to specify it.

3. ${{\color{green}\huge{\text{ Draw border for contents web views in split view mode 37804 }}}}$ this one looks nice, but doesn't let activate or move tabs by using the top of the tabs, like other normal tabs, so going from normal to split tabs can be weird.

4. ${{\color{red}\huge{\text{ Add "Swap Split view position" 38656}}}}$: the context menu "Swap tab positions" can be used when you select a split tab and a non-split tab(s), which causes Browser to crash.

5. ${{\color{BrickRed}\huge{\text{ alleviate flickering when switching tabs with split view 38691}}}}$: seems better but still happens sometimes, especially Vertical tabs, tested two twitch streams in a clean profile and it did a tiny flickering in VT but not in HT.
   I ran some tests, and the biggest issue is Custom Adblock rules too, for example, Outlook causes sometimes long black seconds while trying to redraw/layout the page in my main profile, and that's because I have a simple custom rule outlook.live.com###MainModule + div, without it, barely or no flickering but with it after my email is loaded, but with it, it can do even a 500ms long black screen. So there is something going on between Custom rules and the way it does it in split view.
   BTW, I modified the default list iodkpdagapdfkphljnddpjlldadblomo and added the same custom rule and the problem is not present BTW, so that's why I am 100% sure it is about the adblocking and what it does internally about the two engines it has and the merging and all that.

   PS: I added all my custom rules to the default list, and Twitch with all the hundred of rules I have made, doesn't have any super bad flickering anymore or the long black screen. The flicker is only visible a tiny fraction in Vertical Tabs but not Horizontal tabs. So I can double confirm my theory about custom cosmetic rules affecting the way this flickering affects split view tabs.
   So the problem is still present and almost unnoticeable in VT, but apparently (in my tests) I don't get it in HT anymore as much, sometimes but not as much as having a custom adblock rules that will cause long dark flickering.

1.68.61 Chromium: 126.0.6478.26 (Official Build) nightly (64-bit)
Windows 11 Version 23H2 (Build 22631.3672)

[sangwoo108]

Hi @TEMP-ad , Thanks for reporting.

As for the #3 one, I guess you mean the background around the tabs when they're in a split view, not the border around the web views. Let me check if we can do something.

And #5 would be tricky to tell what's going on. As far as I can tell, the long loading black screen with custom rule could be due to renderer or GPU part. If that's the case, it'd be hard to fix it perfectly.

[ghost]

• Yeah, since you added the background around the split views, it is not possible to click and go to the tabs or move the split view, it will move the window, so it is inconsistent with how the other tabs work.

  Recording.2024-05-31.221443.mp4

• Also, seems like the background color is the same as the titlebar in normal mode in Horizontal tab (you can see it in the video I posted) in private windows it looks better, but it is only in VT where the background is noticeable and looks great. That's also a tiny little issue.

  
  

  vs

  
  

• I also got a tiny little issue that I forgot to mention, it has to do with Cycle through the most recently used tabs with Ctrl-Tab; it doesn't work properly with Split view tabs, especially across different split view tabs.

  Recording.2024-05-31.190734.mp4

  • It's hard to tell what the video is about, but first I click on tab 2nd and then 3rd tab (so different split views) and then you see it goes to the 4th tab, now I did the opposite from 3 to 2, and it goes to the 1st tab.

  • Then it's hard to tell what I do, because you can't see when I press ctrl+tab, but it does what it is suppose to do but I have to press ctrl+tab twice, to go tom 4th tab to 2nd tab, then I have to press twice ctrl+tab for it to go back to the 4th tab.

  • And same from 1st to 3rd tab. and then trying to go back to the 1st tab.

  • When it comes to split view tabs vs nonsplit view tabs,

    • And clicking on a non split view tab, 5th tab, then I click on the 4th tab, and it will require require also two ctrl+tab to do the job.

    • And then the last part of the video is me showing how I click on the 5th tab (non split view) and then 3rd tab, but then it jumps to the 4th tab before going to the 5th tab which is the 'recent one' so basically if you go from one non split tab and click on the left tab of a split view it will go through both tabs when ctrl+tab, but if you click on the left tab of the split it will require two ctrl+tab to properly cycle with the recent tab.

It is a tiny little miss behavior but forgot to report it, I am sure it will make more sense when you enable it (in brave://settings/braveContent)

[ghost]

Thanks for the fixes! Sorry if I reported even the smallest flickering, but everything is working great now with Reduce split view flickering using SetFastResize() Vertical and Horizontal tabs, switching from split to non-split tabs, and since I use 128391832 custom rules in every page, seems like that's not an issue anymore and there is no more flickering and/or seeing DOM being recalculated on switching tabs, everything feels smooth now.

Amazing superpowers work as usual Split views is a great feature for Brave to have 👍. Let's hope I won't bother anytime soon 😁

[sangwoo108]

@TEMP-ad your report never bothered. I really appreciate your reporting. It makes features a way better!

[ghost]

@sangwoo108

Thanks for the Horizontal Split view, it is a nice addition. It has a tiny little issue: the web content is not being updated to fix the new orientation.
When it switches mode, the content will stay just like Vertical split and leave a blank space on the right of the split view, and it will only update and fill the content window and move things around, until you click on the content (not the blank space) or you resize the split window or the window or use sidebar or something that triggers the tabs/website to do it.

1.69.38 Chromium: 126.0.6478.114 (Official Build) nightly (64-bit) - Windows 11 Version 23H2 (Build 22631.3737)

Recording.2024-06-20.145709.mp4

[issuant]

Based on #32071, it seems this has already been implemented for Android but is unfortunately limited to just tablets. Can this limitation please be removed?

[rodrigoswz]

Is this test for now available only on Nightly channel?

[issuant]

bump

Based on #32071, it seems this has already been implemented for Android but is unfortunately limited to just tablets. Can this limitation please be removed?

[bridiver]

bump

Based on #32071, it seems this has already been implemented for Android but is unfortunately limited to just tablets. Can this limitation please be removed?

You are misunderstanding, that ticket is about split view between two apps. Split view in Brave is not implemented on Android.

[issuant]

You are right. Sad to hear. #42047 it is then.

[MadhaviSeelam]

Verification PASSED using

Brave | 1.76.64 Chromium: 133.0.6943.126 (Official Build) beta (64-bit)
-- | --
Revision | 2dc93241b0b0866917c257f1598fe62790bb51d6
OS | Windows 11 Version 24H2 (Build 26100.2894)

and

Brave | 1.76.69 Chromium: 134.0.6998.24 (Official Build) beta (64-bit)
-- | --
Revision | 55ecc732897c3be718a5d828607782d3c54a2271
OS | Windows 11 Version 24H2 (Build 26100.3194)

Filed Following:

• If two sets of split view tabs are created in groups, one set incorrectly grab another set when dragged and dropped in and out of groups #44273
• Split view menu options are not selected/highlighted when hovered over #44290
• Split view tab Page crashed when resized the window in split view #44304
• Brave crashed when resizing sidepanel in a resized window in a split view #44306
• New Tab button is not shown when close tabs below was selected in vertical tabs view in pinned in state with split view #44308
• Brave crashed when drag and dropped split view tabs in and out of groups #44312
• Permission prompt is sticky and displays when switched to site 2 in split view #44313
  Encountered:
• Crash when drag and drop a split view tab #44150

1. Installed 1.76.64
2. launched Brave
3. closed and relaunched Brave
4. opened brave://flags/#brave-split-view in a new tab
5. confirmed #brave-split-view is enabled by default


Case 1: Creating a Split View - PASSED

Tab context menu

1. right clicked to open context menu of a tab
2. confirmed New Split View is below Reload in the menu
3. selected New Split View option
4. confirmed the selected tab appeared on the left and a new tab page appeared on the right.
5. confirmed Focus (with a border) ring appeared on the newly created split item.
6. In the tab bar, the items in the split view should come together and look combined and the split in focus should be highlighted.
7. opened a website with few links (time.com)
8. confirmed it opened on the right screen as it was focused

step 2-3	step 4-6	step 6(dark mode)	step 7-8

Website context menu - PASSED

1. New Profile
2. launched, close & relaunch Brave
3. loaded a website with few links (https://en.wikipedia.org/wiki/Main_Page)
4. right clicked on a link to open context menu
5. confirmed Open Link in Split View is below Open Link in Private Window with Tor
6. selected Open Link in Split View
7. confirmed the linked page appeared to the right of the existing page.
8. confirmed Focus appeared on the newly created split item.

step 5	step7-8

Open selected two tabs in split view with adjacent tabs - PASSED

1. Load two website pages in adjacent tabs
2. selected two adjacent tabs (tab 1 & tab 2)
3. enabled Split view via context menu of a tab 2
4. confirmed both tabs are opened in split view of equal size within the window
5. confirmed the right-side split is in focus.
6. confirmed the URL is shown on the non-focused page as expected

step 3	step 4-6

Open selected two tabs in split view with tabs not adjacent to each other - PASSED

1. opened few tabs and loaded websites
2. selected 2 tabs (tab 1 & tab 5)
3. enabled Split view via context menu of a tab 1
4. confirmed both tabs are opened in split view of equal size within the window
5. confirmed the right-side split is in focus.
6. confirmed the URL is shown on the non-focused page as expected

step 2-3	step 3-6

Pinned tab & a normal tab - PASSED

1. opened websites in two tabs
2. pinned tab 1 (theguardian.com) and leave another tab as unpinned tab (tab 2)
3. selected both tabs (tab 1 & tab 2)
4. enabled Split view via context menu of a pinned tab (tab 1)
5. confirmed both tabs are opened in split view of equal size within the window
6. confirmed the right-side split is in focus.
7. confirmed the URL is shown on the non-focused page as expected
8. confirmed Pinned tab is stilled pinned and unpinned tab became pinned

step 3-4	step 5-7

Tabs within a group - PASSED

1. opened few tabs
2. created few groups and added the tabs to the groups (eg. Restaurants, Automobiles, Airlines etc)
3. right clicked to open context menu of a tab in one of the groups (eg. Automobiles --> Tesla tab)
4. selected New Split View option
5. confirmed the selected tab appeared on the left and a new tab page appeared on the right.
6. confirmed Focus (with a border) appeared on the newly created split item.
7. In the tab bar, the items in the split view came together and look combined and the split in focus is highlighted.
8. opened a website site with few links (Retail group --> Costco tab)
9. right clicked on a link to open a context menu and selected Open link in split view
10. confirmed the link opened in the right screen as it was focused
11. In the tab bar, the items in the split view came together and look combined and the split in focus is highlighted.

step 2	step 3	step 5-6	step 9	step 10-11

Repeat above steps in Vertical tab mode - PASSED

1. Continue from above case
   • Tabs within a group
   • Split screen enabled (Retail group --> Costco tab)
2. selected Use vertical tabs via context menu of a tab
3. confirmed Split view state is retained when switched to Vertical view
4. selected Profile 2 via profile manager
5. opened few tabs and enabled vertical view
6. visited a website with links
7. opened context menu via webpage link
8. selected open link in split view
9. confirmed the link opened in the right screen as it was focused
10. In the tab bar, the items in the split view came together and look combined and the split in focus is highlighted.
11. pinned tab 1 (theguardian.com) and leave another tab (tab 2) as unpinned tab (wsj.com)
12. selected both tabs (tab 1 & tab 2)
13. enabled Split view via context menu of a pinned tab (tab 1)
14. confirmed both tabs are opened in split view of equal size within the window
15. confirmed the right-side split is in focus.
16. confirmed the URL is shown on the non-focused page as expected
17. confirmed Pinned tab is stilled pinned and unpinned tab became pinned
18. opened a website site with few links (Automobiles group --> Honda tab)
19. right clicked on a link to open a context menu and selected Open link in split view
20. confirmed the link opened in the right screen as it was focused

step 2	step 4	step 9-10	step 11-12	step 13	step 14-17	step 19	step 20

Case 2: Unsplit Tabs - PASSED

Select Unsplit Tabs via split view tab context menu - PASSED

1. Continue from Case 1:
   • Split tabs view is shown in a group in vertical view
2. selected Unsplit tabs from split view tab context menu

Confirmed tabs are unsplit and shown as expected both in vertical and horizontal view

step 1	step 2	step 3 (vertical)	step 3 (horizontal)

Select Unsplit Tabs via Split view button - PASSED

1. enabled Split view from one of the tabs in horizontal view
2. verified split view is shown as expected
3. clicked Split view button (3 dot menu) in the middle of the split
4. selected Unsplit tabs

Confirmed tabs are unsplit and shown as expected both in vertical and horizontal view

step 1	step 2-3	step 4	step 5

Case 3: Closing a tab in split view - PASSED

1. added split view shortcut Ctrl + Alt + S
2. enabled Split view via shortcut
3. verified split view is shown as expected
4. closed tab by selecting X
5. closed tab with a shortcut Ctrl + W
6. confirmed tabs are automatically unsplit and one of the tabs is remained as expected
7. confirmed tab in the split view can be closed both via shortcut & X

Confirmed closed tab is restored (via Reopen closed tab in the context menu or Ctrl +Shift +T) but not the split view

2025-02-25_11h21_45.mp4

Case 4: Drag and Dropping a Split View - PASSED

1. Have several tabs open and also have a split view. Select the split view tabs and drag and drop to different positions within a full tab bar.

Confirmed drag & drop to different positions worked as expected in Horizontal tab view & vertical tab view

2025-02-25_14h07_13.mp4

3. From step 2 above, check that you can drag a split view into a tab group.

Confirmed drag & drop the split view into a tab group worked as expected in Horizontal tab view & vertical tab view

2025-02-25_14h13_56.mp4

5. Select split view tabs and drag the split view out to create a new window with just the split view. Drag the split view items from the new window and ensure you can drag back into the original window or any other open window.

Confirmed drag the split view out to create a new window and drag back into new window in both horizontal & vertical tab view

2025-02-25_15h27_09.mp4

Case 5: Pinning/unpinning a Split View - PASSED

1. Pin a split view by selecting the split view tab and right clicking to Pin. Ensure that Pinned split view shows focus when selecting one of the split view items.
2. Ensure you can Unpin a split view by right clicking either Pinned split view item.

Confirmed split view is persistent after pinning and unpinning split view tabs and created split view from pinned tabs both horizontal & vertical tab view

2025-02-25_16h06_39.mp4

Case 6: Resizing and Swapping Tab Positions - PASSED

1. Right click on split tab and select Swap Tab Positions. Tab position should switch.
2. Select split view button in the middle of the screen and select Swap Tab Positions. Tabs positions should switch.
3. Hover over the separator (in the middle of the split) and the mouse pointer should turn into a resize pointer. Resize the window left and right and there should be a minimum width of the smaller window.

• Confirmed tab positions switched when selected Swap Tab Positions via tab context menu & via Split view menu button

• Confirmed able to resize the window left and right hovering over the separator and mouse pointer turned into a resize pointer

Case 7: Appearance and security UI - PASSED

1. When in a split view, check that the focused tab has a border around it and that the split tab in the tab bar is highlighted and also in focus.
2. Check that the unfocused tab shows the url of the page on the top left of the split view.
3. Select the tune/permissions button in the url bar and check that domain is the same as the focused tab.
4. Select the Shields button and check that domain is the same as the focused tab.
5. verified the focused tab border with various themes

Confirmed focused tab has border around it

Confirmed split tab in the tab bar is highlighted and also in focus.

Confirmed unfocused tab shows the url of the page on the top left of the split view

Confirmed tune/permissions button in the url bar shows the domain of the focused tab

Confirmed Shields panel shows the domain of the focused tab

Confirmed focused tab border shows selected themes

2025-02-26_12h50_58.mp4

Case 8: Permission prompt - Site specific permission prompt should display in the split view tabs - Failed

1. Opened Bestbuy.com in a new tab that auto triggered permission prompt
2. visited Bestbuy.com
3. enabled split view for the site
4. loaded permission.site in the new tab
5. when switched between tabs, permission prompts should be hidden - failed

Case 9: Multiple pinned tabs with split view - PASSED

1. Opened few tabs and pinned them
2. opened additional tab created split view
3. created a spilt view with pinned tabs

Confirmed split view worked as expected with pinned tabs when multiple tabs are pinned both horizontal & vertical tab view

2025-02-28_11h27_42.mp4

Case 10: Keyboard shortcuts-PASSED

1. opened brave://settings/system/shortcuts
2. created short cuts for New split view, open in split view, Unsplit tabs & Swap tab positions
3. keyboard short cuts worked as expected

example	example	example	example	example

Case 11: Dev tools shown for both the sites in the split view - PASSED

1. opened a tab and enabled split view
2. pressed F12 to enable dev tools
3. confirmed devtools opened for focus page/screen

example	example

Case 12: New window, Private window & Tor windows & Guest window - PASSED

New window

focus tab 2	focus tab 1

Private window

focus tab 2	focus tab 1

Tor window

focus tab 2	focus tab 1

focus tab 2	focus tab 1

Case 13: Upgrade - PASSED

1. Installed 1.75.181
2. launched Brave
3. opened few tabs in horizontal view
4. closed Brave
5. renamed the profile Brave-Browser-Beta
6. Installed 1.76.64
7. launched Brave
8. opened brave://flags
9. confirmed #brave-split-view flag is enabed
10. enabled New split view via a tab
11. swapped tabs via Swap tab positions via Split view menu button
12. confirmed split view functionality worked as expected

step 1	step 9	step 10	step 11

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.76.67 Chromium: 134.0.6998.24 (Official Build) beta (arm64)
-- | --
Revision | 37df3410fb57f74420f170361ec1d834c6953a75
OS | macOS Version 12.5 (Build 21G72)

• Verified the test plan from Use proper bounding box for positioning SidebarShowOptionsEventDetectWidget brave-core#27553

Case 1_Creating a Split View_PASSED

1. Right click on a tab and check that New Split View is below Reload in the menu. Select New Split View. The selected tab should appear on the left and a new tab page should appear on the right. Focus should appear on the newly created split item. In the tab bar, the items in the split view should come together and look combined and the split in focus should be highlighted.

Screen.Recording.2025-02-26.at.11.41.04.AM.mov

Case 2_Creating a Split View_PASSED

2. Open a web page of your choice that has a few links and right click on a link. Check that Open Link in Split View is below Open Link in Private Window with Tor. Select Open Link in Split View and the linked page should appear to the right of the existing page. Focus should appear on the newly created split item.

Screen.Recording.2025-02-26.at.11.43.37.AM.mov

Case 3_Creating a Split View_PASSED

3. Select two tabs, and select Open in Split View. Ensure that both tabs are opened in split view of equal size within the window and the right side split is in focus.

Screen.Recording.2025-02-26.at.11.46.54.AM.mov

Case 4_Creating a Split View_PASSED

4. Select two tabs like above but in three more variations, 1. Pinned tab and a normal tab. 2. Tabs within a group. 3. Tabs that are not adjacent to each other.

Case 5_Creating a Split View_PASSED

• Verified the steps above 1, 2, 3 and 4 on Vertical tabs
• Confirmed that split tabs works fine on Vertical tab orientation

Case 6_Unsplit Tabs_PASSED

Unsplit Tabs

1. Right click on a split view tab and select Unsplit Tabs. Tabs should be unsplit and look like before and will be next to each other.
2. Have a split view open, and select the the Split view button in the middle of the split and select Unsplit Tabs. Tabs should be unsplit and look like before.

Case 7_Unsplit Tabs_PASSED

Closing a tab in split view

1. Closing a tab in split view should act like normal and close the tab, either by selecting the x or by shortcut. By closing a tab within a split view automatically unsplits the tab and the other tab should remain. Restoring that tab should only restore the tab and not the split.

Case 8_Drag and Dropping a Split View_PASSED

Drag and Dropping a Split View

1. Have several tabs open and also have a split view. Select the split view tabs and drag and drop to different positions within a full tab bar.
2. From step 2 above, check that you can drag a split view into a tab group.
3. Select split view tabs and drag the split view out to create a new window with just the split view. Drag the split view items from the new window and ensure you can drag back into the original window or any other open window.

• Encountered Crash when drag and drop a split view tab #44150
• Encountered An existing tab can be dragged in between the split view and split focus is highlighted for all the three tabs #44151
• Encountered dragging an existing tab on the tab bar will also drag a split view if the Split view is present before or after the tab #44153

Known/expected:

1. When 2 split view tabs are adjacent, drag and drop 1st split view will drag 2nd split tab view as well 

2. When a split view tab is dragged to a new window, along with split view the tab that is present next to the split view will also be dragged to a new window 

3. When there are two split views on a tab bar (not adjacent, there few tabs in-between the two split views) add/remove a split view into a tab group will add/remove both split views 

Case 9_Pinning/unpinning a Split View_PASSED

Pinning/unpinning a Split View

1. Pin a split view by selecting the split view tab and right clicking to Pin. Ensure that Pinned split view shows focus when selecting one of the split view items.
2. Ensure you can Unpin a split view by right clicking either Pinned split view item.

• Encountered the issue Unpinning a split pinned tab removes the pin on original tab #44089
• Encountered when a split view is dragged into a tab group the extra tab gets dragged and same gets pinned when a split view is pinned #44155

Case 10_Resizing and Swapping Tab Positions_PASSED

Resizing and Swapping Tab Positions

1. Right click on split tab and select Swap Tab Positions. Tab position should switch.
2. Select split view button in the middle of the screen and select Swap Tab Positions. Tabs positions should switch.
3. Hover over the separator (in the middle of the split) and the mouse pointer should turn into a resize pointer. Resize the window left and right and there should be a minimum width of the smaller window.

Case 11_Appearance and security UI_PASSED

Appearance and security UI

1. When in a split view, check that the focused tab has a border around it and that the split tab in the tab bar is highlighted and also in focus.
2. Check that the unfocused tab shows the url of the page on the top left of the split view.
3. Select the tune/permissions button in the url bar and check that domain is the same as the focused tab.
4. Select the Shields button and check that domain is the same as the focused tab.

• Provided a suggestion on split view on dark mode via https://bravesoftware.slack.com/archives/CKNHM4RTK/p1740151592633749?thread_ts=1739912894.037299&cid=CKNHM4RTK
• Focus tab doesn't have border on a split view in an vertical tab orientation - Looks like known issue @rebron mentioned in the walkthrough

Case 12_Permission prompt split views_PASSED

• Confirmed that able to add permission prompt tab and normal tab without any issues
• Unable to add two permission prompt tabs in split view - logged Two Permission tabs can't be added to split view #44323
• Encountered the issue Permission prompt is sticky and displays when switched to site 2 in split view #44313

Case 13_Split view for local file system tabs_PASSED

• Confirmed that user can add local file systems tabs to split view
• Split view tab width for local file system tabs is smaller - logged split view tabs width is not equally distributed when pdf/word file added to split view #44326

Case 14_Split views in Private and Tor tabs_PASSED

Private tabs:

• Confirmed that split view cab be created via context menu by right clicking on existing tab by selecting the context menu option New split view
• Confirmed that split view cab be created between the two tabs via context menu
• Confirmed that user can create split view by right clicking on the link on webpage by selecting the context menu New split view
• Confirmed that user can create split view within the tab group
• Confirmed that user can create split view between the adjacent tabs on the tab bar
• Confirmed that user can create split view between the distant tabs on the tab bar
• Confirmed that user can un-split tabs using context menu option
• Confirmed that user can swap the tabs using the context menu
• Confirmed that user can drag and drop split view on the tab bar
• Confirmed that user can drag and drop the split view on the tab group
• Confirmed that user can pin the the split view on the tab bar
• Confirmed that user can create the split view between the pin tab and normal tab
• Confirmed that user can drag the split view out to create a new window
• Verified the above steps on vertical tab orientation on Private tab

example	example	example	example	example

Tor tabs:

• Confirmed that split view cab be created via context menu by right clicking on existing tab by selecting the context menu option New split view
• Confirmed that split view cab be created between the two tabs via context menu
• Confirmed that user can create split view by right clicking on the link on webpage by selecting the context menu New split view
• Confirmed that user can create split view within the tab group
• Confirmed that user can create split view between the adjacent tabs on the tab bar
• Confirmed that user can create split view between the distant tabs on the tab bar
• Confirmed that user can un-split tabs using context menu option
• Confirmed that user can swap the tabs using the context menu
• Confirmed that user can drag and drop split view on the tab bar
• Confirmed that user can drag and drop the split view on the tab group
• Confirmed that user can pin the the split view on the tab bar
• Confirmed that user can create the split view between the pin tab and normal tab
• Confirmed that user can drag the split view out to create a new window
• Verified the above steps on vertical tab orientation on Private tab