Add right-side display support for Sidebar

[UjCbFwtBayFM]

Currently there is a setting in brave://settings/appearance that should allow for moving the Sidebar on the right side of the window, but it seems it is not linked to the backend.
It would be great to have this setting implemented so it actually works.

Brave	1.44.101 Chromium: 106.0.5249.65 (Official Build) (64-bit)

[mlntr]

It's already confirmed to be coming, it's in nightly

[UjCbFwtBayFM]

From Nightly:

It looks like they preferred to remove the setting than have it work.

[mlntr]

Not everything is necessarily meant to be working yet in nightly

[rebron]

@UjCbFwtBayFM This one is in progress. We removed the setting in the UI since it wasn't doing anything yet.

[mlntr]

@UjCbFwtBayFM This one is in progress. We removed the setting in the UI since it wasn't doing anything yet.

The icon should be horizontally flipped (i.e. have the sidebar on the right of the image) when the panel is set to be on the right

[MadhaviSeelam]

Verification PASSED using

Brave | 1.46.73 Chromium: 107.0.5304.62 (Official Build) beta (64-bit)
-- | --
Revision | 1eec40d3a5764881c92085aaee66d25075c159aa-refs/branch-heads/5304@{#942}
OS | Windows 11 Version 21H2 (Build 22000.1098)

Case 1: Select Show on right radio button in brave://settings/appearance - Sidebar displayed right side

1. Install 1.46.73
2. launch Brave
3. load brave://settings/appearance
4. confirmed default option for Side panel is Show on left'
5. clicked Show on right radio button in the Side panel section
6. Sidebar is visible on the right with all four widgets displayed
7. Side panel button on the toolbar is rotated to right
8. clicked on Reading list icon on Sidebar to open and close the side panel
9. clicked on Bookmarks icon on the Sidebar to open and close the side panel
10. clicked Brave talk & Brave Wallet icons and are working as expected

step 4	step 5	step 8	step 9

Case 2:- Show on left radio button as a default in brave://settings/appearance

1. clean profile
2. load brave://settings/appearance
3. confirmed default option for Side panel is Show on left'
4. side bar is visible on the left with all four widgets displayed
5. Side panel button on the toolbar is rotated to left
6. click on reading list icon on the sidebar to open and close the side panel
7. click on bookmarks icon on the sidebar to open and close the side panel

step 3	step 6	step 7

Case 3: click Side panel toolbar button will open the side panel right side

1. continue from Case 2
2. load brave://settings/appearance
3. clicked Show on right radio button in the Side panel
4. Sidebar is visible on the right with all four widgets displayed
5. Show side panel button on the toolbar is rotated to right
6. click on the Show side panel toolbar button
7. confirmed Show side panel toolbar button is selected
8. confirmed Side panel on the right opened with Reading list icon enabled by default
9. clicked the Show side panel toolbar button again
10. confirmed no sidebar buttons were shown as selected and Side panel is closed
11. confirmed the Side panel toolbar button was not shown as selected

step 4-5	step 7-8	step 10-11

Case 4: Enable #brave-veritcal-tabs in brave://flags - Vertical tab displayed on the left

1. clean profile
2. leave the default Always for Show Sidebar in brave://settings/appearance
3. leave the default Show on left for Side panel in brave://settings/appearance`
4. open brave://flags
5. select Enabled for vertical tabs #brave-vertical-tabs
6. click Relaunch button
7. vertical tab is displayed on the left and aligned with sidebar
8. click + on the vertical tab to open NTP
9. visit a site brave.com/web3
10. tab title displayed as Web3 Information Hub|Brave browser-Brave
11. click on the Reading list icon
12. confirmed the reading list opened
13. click Add current tab to add the currently opened page to the reading list in the side panel
14. successfully opened several tabs and visited several websites
15. minimized and maximized the vertical tab by clicking >

step 2-3	step 5-6	step 7	step 9	step 12	step 13	step 15

light mode	dark mode

Case 5: Show Sidebar on the right while Vertical tab is enabled to show in the left

1. continue from Case 4
   • leave the default Always for Show Sidebar in brave://settings/appearance
   • open brave://flags
   • select Enabled for vertical tabs #brave-vertical-tabs
   • click Relaunch button
   • vertical tab is displayed on the left and aligned with sidebar
2. load brave://settings/appearance
3. clicked Show on right radio button in the Side panel
4. Sidebar is visible on the right with all four widgets displayed along with any added site favicons
5. confirmed vertical tab is still remained left and aligned
6. added several sites to the sidebar by clicking + on the Sidebar (time.com)
7. added some of the sites to reading list (cnbc.com)
8. successfully opened several NTPs from the vertical tab

Ex1	Ex2	Ex3

Case 6: Show Sidebar Never in brave://settings/appearance while vertical tab is displayed

1. continue from Case 5
   • open brave://flags
   • select Enabled for vertical tabs #brave-vertical-tabs
   • click Relaunch button
   • Show on right radio button in the Side panel in the brave://settings/appearance
2. vertical tab is displayed on the left and aligned with sidebar
3. switch to Never for Show Sidebar in brave://settings/appearance
4. click on Side panel toolbar button in the tool bar
5. Sidebar and Reading list in the Side panel is displayed in the right
6. switch Side panel to Show on left in brave://settings/appearance
7. click Side panel toolbar button again
8. confirmed the Side panel is closed and Sidebar was hidden
9. vertical tab is still shown

step 3	step 5	step 9

Case 7: Vertical tab and Sidebar display right side - New window, Private window and Private window with TOR

open in New window

1. click hamburger menu>>New window
2. vertical tab is shown on the left

Ex1	Ex2	Ex3	Ex4

open in Private window

1. click hamburger menu>>New window
2. vertical tab is shown on the left

Ex1	Ex2	Ex3	Ex4

open in private window with TOR

1. click hamburger menu>>New window
2. vertical tab is shown on the left

Ex1	Ex2	Ex3	Ex4

Case 8: Upgrade

1. Install 1.45.113
2. launch Brave
3. seed the profile with data (bookmarks, open tabs, sync)
4. close the browser
5. rename the profile Beta
6. relaunch Brave with 1.46.73
7. visit brave://settings/appearance
8. confirmed default option for Side panel is Show on left'
9. clicked Show on right radio button in the Side panel section
10. Sidebar is visible on the right with all four widgets displayed
11. Side panel button on the toolbar is rotated to right
12. open brave://flags
13. select Enabled for vertical tabs #brave-vertical-tabs
14. click Relaunch button
15. vertical tab is displayed on the left and is aligned
16. all of the opened tabs from before upgrade shown in the vertical tab
17. click + on the vertical tab to open NTP
18. visit couple of sites (brave.com/web3 and cnn.com)
19. click on the Reading list icon to open reading list
20. click Add current tab to add the currently opened page to the reading list in the side panel
21. successfully opened several tabs and visited several websites
22. minimized and maximized the vertical tab by clicking >

Ex1	Ex2	Ex3	Ex4	Ex5

Bugs filed:

• Sidebar not visible on On mouseoever show mode #26208
• Preview for a hovered over tab is not shown when Card with preview is selected in brave://settings/appearance #26251