Add sidebar as way to manage bookmarks and access favorite websites

[rebron]

Description

Add a sidebar to normal window, private window, and private window with Tor to provide users the ability to access their favorite websites.

A user will be able to add a site/url to the sidebar which will then display the website favicon. If no favicon is available an icon with the sites' first letter will be generated. A user will be able remove and reorder via drag and drop these website icons. We will provider an overflow UX to allow users to add sites beyond the visible window size.

Add a bookmarks sidebar panel to allow users to add, delete, rename, drag and drop, and organize their bookmarks from the panel. Selecting bookmarks from the sidebar will open and close a bookmarks sidebar panel.

The sidebar will special case three items, Brave Talk, Brave Wallet, and Bookmarks. If a user removes any of those items, a user can re-add via add to sidebar bubble

Sidebar will provide access to Brave Talk and Brave Wallet. When selected for the first time, clicking on the icon will open up a new Brave Talk page or Brave Wallet page. When either Brave Talk or Brave Wallet is selected again, we will set focus on the existing page (rather than opening up a new page).

Sidebar settings will be available from the hamburger menu and in brave://settings/appearance to show, never show, or show on mouseover.

This will constitute version 1 of the sidebar.

Design/Expected Result:

https://www.figma.com/file/xOdKFSr3P5AXSAbP2r8ung/Sidebar-Desktop?node-id=880%3A32542

Brave version (brave://version info)

Targeted for release in 1.37

Version/Channel Information:

• Can you reproduce this issue with the current release? n/a
• Can you reproduce this issue with the beta channel? yes, on by default and shown by default
• Can you reproduce this issue with the nightly channel? yes, on by default and shown by default

Other Additional Information:

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

Miscellaneous Information:

[LaurenWags]

@brave/legacy_qa I discussed a test plan for this one with @rebron and @kjozwiak.

Basically we should:

• confirm the designs against the figma (pending confirmation Figma is cleaned up/ready for us to verify against)
• basic functionality checks as mentioned in the description

[aguscruiz]

Latest designs matching production in this Figma page:
https://www.figma.com/file/xOdKFSr3P5AXSAbP2r8ung/?node-id=3693%3A65920

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.37.105 Chromium: 100.0.4896.46 (Official Build) (64-bit)
-- | --
Revision | 5ca33821b2211805855c77d334353d27c616a7ca-refs/branch-heads/4896@{#584}
OS | Windows 10 Version 21H2 (Build 19044.1586)

• Logged Item edit feature needs to be provided when same item (settings) is added multiple times #21751
• Logged When sidebar is not enabled the text Show Sidebar Enabled is shown in the brave://settings/appearance #21842
• Logged Re-order BM or Brave talk settings in the sidebar menu in normal window leads to lose the focus on existing window #21848

General testing on sidebar settings

Verify global sidebar settings and sidebar settings in hamburger menu_PASSED

• Confirmed Sidebar global settings is provided under brave://settings/appearance
  
• Confirmed by default sidebar settings is selected as Never under the hamburger menu when sidebar settings is not enabled
  
• Confirm user can enable/disable sidebar via brave://settings/appearance or Hamburger menu->Show sidebar
• Confirm sidebar settings changes made in the brave://settings/appearance settings appear in the Hamburger menu->Show sidebar and vice versa
• Confirmed sidebar settings are retained after browser restart

Example	Example

• Confirmed click on Bookmarks settings in sidebar opens up and close the bookmarks sidebar panel
  
• Confirmed that user can delete the default settings (Brave talk, wallet and bookmark) icons from the sidebar panel
• Confirmed deleted settings are removed from the sidebar menu and settings are retained after browser restart
• Confirmed user can re-add the default settings (Brave talk, wallet and bookmark) icons via add to sidebar bubble
  
• Confirmed mouse hover on each item in the sidebar menu shows the settings name as expected
  

Clean profile

Case 1: Sidebar_Add/remove/reorder the websites favicons_PASSED

Add

• Confirmed user has the ability to add favorite websites to the sidebar
• Confirmed website favicon gets added in the sidebar menu when the user add any website
• Confirmed user can access the added websites by clicking on the website favicon added in the sidebar menu
• Confirmed if website favicon is not available then website first letter gets added as a favicon in the sidebar
• Confirmed user can add the website only once, if user tries to add the same website 2nd time then + Add to side menu gets disabled

Example	Example

Remove:

• Confirmed user can remove the added website by right-clicking on the favicon
• Confirmed website favicon gets removed from the sidebar menu when the user clicks on the Remove icon
• Confirmed removed website can be readded to the sidebar

Example	Example	Example	Example

Reorder:

• Confirmed user can reorder the added favicons via the drag and drop option in the sidebar menu
• Confirmed user has the ability to access the favorite website by clicking on up/down arrows provided in the sidebar menu
• Confirmed users can access the websites after `favicons re-order

Example	Example

Case 2: Sidebar_Bookmarks settings_PASSED

Import BM

• Confirmed by default sidebar bookmarks panel shows Bookmarks and Other Bookmarks empty folders when no bookmarks are added
• Confirmed imported bookmarks are shown in the Bookmarks panel when bookmarks are imported via brave://settings/importData/ NTP import option/Bookmarks manager import option/Hamburger menu import BM option
• Confirmed imported bookmarks can be accessed by clicking on them

Example	Example	Example	Example

Add bookmarks

• Confirmed bookmarks added via the bookmarks icon in the URL bar are shown under the bookmarks panel in the sidebar menu
• Confirmed bookmarks added via bookmarks this tab via the hamburger menu are shown under the bookmarks panel in the sidebar menu
• Confirmed bookmarks added via bookmarks all the tabs via the hamburger menu are shown under the bookmarks panel in the sidebar menu
• Confirmed bookmarks added via the Add a new bookmarks option in the 3dot menu in bookmarks manager are shown under the bookmarks panel in the sidebar menu
• Confirm bookmarks can be re-named and reorganized

Example	Example	Example	Example	Example	Example	Example

Re-order

• Confirmed bookmarks that are showing up in the Sidebar panel should also show up in Bookmarks manager
• Confirmed bookmarks can be re-arranged via the drag and drop option
• Confirmed changes made in the bookmarks panel in the sidebar menu should reflect in Bookmarks manager and vice versa

Example	Example

Remove

• Confirmed bookmarks can be removed from the sidebar menu via the Delete option
• Confirmed that deleted bookmarks are removed from the sidebar bookmarks panel
• Confirmed deleted bookmarks is removed from bookmarks manager as well
• Confirmed that deleted bookmarks can be re-bookmarked and are shown in the sidebar bookmarks panel

Example	Example

Re-order bookmarks icon in the sidebar menu

• Confirmed that bookmarks icon default position can be altered in the sidebar menu via the drag and drop option
• Confirmed bookmarks can be accessed/edited when the bookmarks icon is re-ordered

Example	Example	Example

Case 3: Sidebar_Brave talk settings_PASSED

• Confirmed Brave talk settings icon is aligned properly in the sidebar menu
• Confirmed Brave talk settings icon position can be altered via drag and drop option
• Confirmed click on Brave talk icon for the 1st time it opens up https://talk.brave.com/widget in a new tab (behavior is same in PT and TOR windows)
• Confirmed user can a start call using brave talk settings via sidebar menu

Example	Example	Example

• Confirmed that if the user tries to open brave talk for the 2nd time, the focus will set on the existing brave talk opened tab (behavior is same in PT and TOR windows)
  

Case 4: Sidebar_Brave wallet settings_PASSED

• Confirmed Brave wallet settings icon is aligned properly in the sidebar menu
• Confirmed Brave wallet settings icon position can be altered via the drag and drop option
• Confirmed click on Brave talk icon for the 1st time opens up to brave://wallet/crypto/onboarding in a new tab
• Confirm user can create a wallet via sidebar wallet settings

Example	Example

• Confirmed that if the user tries to open the brave wallet for the 2nd time, the focus will set on the existing brave wallet opened tab
  

Case 5: Sidebar_TOR/Private windows_PASSED

• Confirmed by default sidebar menu is disabled or selected as Never in Normal, Private and TOR windows in the hamburger menu

Normal window	Private window	TOR windows

• Confirm enable sidebar (select Always) in normal window enables the sidebar in Private and Tor windows

Normal window	Private window	TOR windows

• Confirmed that changes (add/remove favicons or re-order icons) made in sidebar menu in one window (Normal/PT/TOR) reflects in other tab types
• Confirmed that changes are retained after the browser restart
• Confirmed changes made in sidebar settings (Never/Mouseover/Always) in the hamburger menu in one window (Normal/PT/TOR) reflects in other tab types
• Confirmed that settings changes are retained after the browser restart
• Confirmed that clicking on the brave wallet in PT/TOR window opens up the wallet page in the normal window as expected
• Confirmed user can access the added bookmarks in PT/TOR windows sidebar menu
  
• Confirmed bookmarks can be edited/deleted in one window (Normal/PT/TOR) window is reflected in other tab types

Upgrade profile

Upgrade profile_PASSED

• Install 1.36.x and import a few bookmarks and
• Upgrade the profile to 1.37.x and confirmed sidebar settings in brave://settings/appearance
• Enable the sidebar and confirmed bookmarks are shown in the sidebar panel in 1.37.x
• Confirmed bookmarks can be added/deleted/re-added in the upgraded profile
• Confirmed website favicons can be re-ordered in the sidebar menu in an upgraded profile

1.36.x	1.37.x - Normal window	1.37.x - Private window	1.37.x - Tor window

[MadhaviSeelam]

Verification Complete using

Brave | 1.37.105 Chromium: 100.0.4896.46 (Official Build) (64-bit)
Revision | 5ca33821b2211805855c77d334353d27c616a7ca-refs/branch-heads/4896@{#584}
OS | Windows 11 Version 21H2 (Build 22000.556)

Logged #21859
Logged #21861
Logged #21864
Logged #21865
Logged #21893
Logged #21894 - Closed

Prerequisite: Install 1.37.x

Testcase 1: Sidebar UI - Default Widgets

• Launch Brave
• Sidebar is displayed as a default
• Brave Talk, Wallet and Bookmarks items displayed as default items
• Hovered over Brave Talk and it was highlighted in red and description displayed as Brave Talk
• Hovered over Wallet and it was highlighted in red and description displayed as Wallet
• Hovered over Bookmarks and it was highlighted in red and description displayed Bookmarks
• Settings icon displayed at the bottom of the Sidebar
  ex1

---

Testcase 2: Sidebar - Remove and Re-add Default Widgets

• Remove Wallet from Sidebar

• Hovered over Wallet and clicked remove
• Wallet was removed

• Re-add Wallet thru bubble

• Clicked on add (+) button and Wallet entry displayed in the bubble
• Clicked Wallet to add
• Wallet is displayed on the Sidebar

• Verified Remove and Re-add for Brave Talk and Wallet and the results were same as above

ex1	ex2

Testcase 3: Sidebar UI

• Add favicons

• Navigate to brave.com
• Hovered over on add (+)button to add the site toSidebar`
• Brave favicon added to the Sidebar
• Added couple of more sites (youtube.com, bbc.com)
• Their favicons displayed on the Sidebar
• When hovered over a favicon, a description is displayed eg. Youtube
• If a site does not have a favicon, site's first letter will be generated Eg. Everlane "E"

• Drag and drop

Drag and drop Youtube favicon below bbc

• The reorder happens seamlessly without issues
• Clicked on the bbc favicon on the Sidebar to open the website

• Responsiveness

• Added few sites to Sidebar beyond the visible window size
• Up arrow and down arrow are visible and clickable to move thru website icons that are not visible
• Up and down arrows are disabled depending upon location

ex1	ex2	ex3

Testcase 4: Sidebar - Settings icon

• Click Settings icon on the Sidebar
• brave://settings/?search=Show%20Sidebar page opened
• Show Sidebar Enabled entry in Appearance page highlighted in Yellow
• Always option was selected as a default
• Select `on mouseover'
• Return to Normal window
• Sidebar is not displayed on the left
• Hover over to display the Sidebar
• Verified Sidebar is available only on hover state in the Private Window and Private Window with TOR
• Select Never in the drop down
• Return to Normal window
• Sidebar is not displayed for Normal window, Private Window and Private Window with TOR
• Select `Always' again
• Sidebar is displayed for Normal window, Private Window and Private Window with TOR

ex1	ex2

Testcase 5: `Sidebar` Should Be Available in Normal, Private and Private Window With TOR As a default

• Launch Brave
• Sidebar is displayed in the Normal window as a default with default widgets
• Click on Hamburger menu and select New Private window OR Ctrl+Shift+N
• Sidebar as a default is displayed in the Private window with any favicons and default widgets
• Click on Hamburger menu and select New private window with TOR OR Alt+Shift+N
• Sidebar as a default is displayed in the Private window with TOR and any favicons and default widgets

ex1	ex2	ex3

Testcase 6: Sidebar Options functionality

• Launch Brave
• Right click in the empty space on the Sidebar' to open up Show Sidebar` options
• Verified Always option is selected and is a default in the Sidebar
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Normal Window
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Private Window
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Private Window with TOR
• Verified Always option is selected for Show Sidebar enabled entry in brave://settings/Appearance as default
• Select On mouseover on the Sidebar
• Sidebar is displayed in hovered state
• Verified On mouseover option is selected and in the Sidebar
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Normal Window
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Private Window
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Private Window with TOR
• Verified On mouseover option is selected for Show Sidebar enabled entry in brave://settings/Appearance
• Select never in the Sidebar
• Verified Sidebar is no longer displayed
• Verified never option is selected in Show Sidebar in Hamburger menu in Normal Window
• Verified never option is selected in Show Sidebar in Hamburger menu in Private Window
• Verified never option is selected in Show Sidebar in Hamburger menu in Private Window with TOR
• Verified never option is selected for Show Sidebar enabled entry in `brave://settings/Appearanc

ex1	ex2	ex3

Testcase 7: Bookmarks Sidebar panel UI and Functionality

• Launch Brave
• Hovered over and click Bookmarks icon in the Sidebar
• Bookmarks sidebar panel is displayed with Bookmarks and Other bookmarks folders
• Clicked on Youtube favicon on the Sidebar to open Youtube.com website
• Add Bookmark

• Bookmarked Youtube.com site in the Bookmarks folder in the sidebar panel
• Verify the site is available in the Bookmarks folder in the sidebar panel
• Bookmarked one more site Sony.com and the site is displayed
• Added couple of folders for Media and Sports in the sidebar panel for Bookmarks folder
• Bookmark https://www.callawaygolf.com/ under Sports folder

• Drag and Drop

• Drag and drop Youtube and Sony sites to Media folder
• Drag and drop bookmarks to organize them
• Bookmark sidebar panel displayed both Media and Sports folders and bookmarked sites

• Remove

• Right click on Youtube bookmark in the bookmark sidebar panel to remove and the bookmark should be longer listed

• Rename

• Right click to rename Sony group portal bookmark and edit to Sony and new name should be displayed
• Bookmarked a site and drag and dropped a site from Bookmark folder to Other bookmarks folder

• Clicked Bookmarks icon to close the sidebar panel

ex1	ex2	ex3

Testcase 8: Bookmarks sidebar panel - Bookmark context menu

• Launch Brave
• Hover over bbc.com bookmark in the Bookmark sidebar panel
• Right click to open context menu for
• Select Open in Tab for BBC bookmark
• BBC site should open in a new Tab
• Hover over nytimes bookmark
• Select Open in New Window
• nytimes opens in new window
• Click on Bookmarks icon to verify all the bookmarks from original window are preserved
• Verified window is displayed with Sidebar with all the existing favicons preserved
• Hover over Time bookmark
• Right click and Select Open in Private window
• Time opens in a Private window
• Clicked on Bookmarks icon to verify all the bookmarks from original window are preserved
• Verified Sidebar with all existing favicons are preserved

ex1	ex2	ex3

Testcase 9: Wallet Icon on the Sidebar

• Launch Brave
• Click on Wallet icon on the Sidebar
• If the Wallet icon is selected first time, 'Welcome to the new Brave Wallet' onboarding page should be displayed
• Complete onboarding process to display portfolio page
• Close and relaunch the browser
• Click on Wallet icon on the Sidebar

ex1	ex2

Testcase 10: Brave Talk Icon on the Sidebar

- Launch Brave - Click on Brave Talk icon on the `Sidebar` - The icon is highlighted in red and Brave talk home page should be displayed

Testcase12: Verify Sidebar UI look and feel for Dark theme

ex1	ex2	ex3	ex4	ex5	ex6

ex7	ex8	ex9	ex10	ex11	ex12	ex13

Testcase 12: Upgrade

• Updated from 1.36.119 Chromium: 99.0.4844.83 to 1.37.105 Chromium: 100.0.4896.46
• Sidebar displayed on Normal, Private window and Private Window with TOR
• Sidebar is not enabled in Settings as per Logged set Show sidebar settings for release, beta, and nightly #21726
• Manually enabled in this test

ex1	ex2	ex3	ex4

[btlechowski]

Verification passed on

Brave	1.37.101 Chromium: 99.0.4844.83 (Official Build) beta (64-bit)
Revision	b11086e62d7c1a44b0942ac5568d22a425c7ae35-refs/branch-heads/4844_74@{#5}
OS	Ubuntu 18.04 LTS

Testcase 1: Sidebar UI - Default Widgets

• Launch Brave
• Sidebar is displayed as a default
• Brave Talk, Wallet and Bookmarks items displayed as default items
• Hovered over Brave Talk and it was highlighted in red and description displayed as Brave Talk
• Hovered over Wallet and it was highlighted in red and description displayed as Wallet
• Hovered over Bookmarks and it was highlighted in red and description displayed Bookmarks
• Settings icon displayed at the bottom of the Sidebar

Testcase 2: Sidebar - Remove and Re-add Default Widgets

• Remove Wallet from Sidebar

• Hovered over Wallet and clicked remove
• Wallet was removed

• Re-add Wallet thru bubble

• Clicked on add (+) button and Wallet entry displayed in the bubble
• Clicked Wallet to add
• Wallet is displayed on the Sidebar

• Verified Remove and Re-add for Brave Talk and Wallet and the results were same as above

Testcase 3: Sidebar UI

• Add favicons

• Navigate to brave.com
• Hovered over on add (+)button to add the site toSidebar`
• Brave favicon added to the Sidebar
• Added couple of more sites (youtube.com, bbc.com)
• Their favicons displayed on the Sidebar
• When hovered over a favicon, a description is displayed eg. Youtube
• If a site does not have a favicon, site's first letter will be generated Eg. Everlane "E"

• Drag and drop

Drag and drop Youtube favicon below bbc

• The reorder happens seamlessly without issues
• Clicked on the bbc favicon on the Sidebar to open the website

• Responsiveness

• Added few sites to Sidebar beyond the visible window size
• Up arrow and down arrow are visible and clickable to move thru website icons that are not visible
• Up and down arrows are disabled depending upon location

Testcase 4: Sidebar - Settings icon

• Click Settings icon on the Sidebar
• brave://settings/?search=Show%20Sidebar page opened
• Show Sidebar Enabled entry in Appearance page highlighted in Yellow
• Always option was selected as a default
• Select `on mouseover'
• Return to Normal window
• Sidebar is not displayed on the left
• Hover over to display the Sidebar
• Verified Sidebar is available only on hover state in the Private Window and Private Window with TOR
• Select Never in the drop down
• Return to Normal window
• Sidebar is not displayed for Normal window, Private Window and Private Window with TOR
• Select `Always' again
• Sidebar is displayed for Normal window, Private Window and Private Window with TOR

Testcase 5: `Sidebar` Should Be Available in Normal, Private and Private Window With TOR As a default

• Launch Brave
• Sidebar is displayed in the Normal window as a default with default widgets
• Click on Hamburger menu and select New Private window OR Ctrl+Shift+N
• Sidebar as a default is displayed in the Private window with any favicons and default widgets
• Click on Hamburger menu and select New private window with TOR OR Alt+Shift+N
• Sidebar as a default is displayed in the Private window with TOR and any favicons and default widgets

Testcase 6: Sidebar Options functionality

• Launch Brave
• Right click in the empty space on the Sidebar' to open up Show Sidebar` options
• Verified Always option is selected and is a default in the Sidebar
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Normal Window
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Private Window
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Private Window with TOR
• Verified Always option is selected for Show Sidebar enabled entry in brave://settings/Appearance as default
• Select On mouseover on the Sidebar
• Sidebar is displayed in hovered state
• Verified On mouseover option is selected and in the Sidebar
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Normal Window
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Private Window
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Private Window with TOR
• Verified On mouseover option is selected for Show Sidebar enabled entry in brave://settings/Appearance
• Select never in the Sidebar
• Verified Sidebar is no longer displayed
• Verified never option is selected in Show Sidebar in Hamburger menu in Normal Window
• Verified never option is selected in Show Sidebar in Hamburger menu in Private Window
• Verified never option is selected in Show Sidebar in Hamburger menu in Private Window with TOR
• Verified never option is selected for Show Sidebar enabled entry in `brave://settings/Appearanc

Testcase 7: `Bookmarks Sidebar panel` UI and Functionality

• Launch Brave
• Hovered over and click Bookmarks icon in the Sidebar
• Bookmarks sidebar panel is displayed with Bookmarks and Other bookmarks folders
• Clicked on Youtube favicon on the Sidebar to open Youtube.com website
• Add Bookmark

• Bookmarked Youtube.com site in the Bookmarks folder in the sidebar panel
• Verify the site is available in the Bookmarks folder in the sidebar panel
• Bookmarked one more site Sony.com and the site is displayed
• Added couple of folders for Media and Sports in the sidebar panel for Bookmarks folder
• Bookmark https://www.callawaygolf.com/ under Sports folder

• Drag and Drop

• Drag and drop Youtube and Sony sites to Media folder
• Drag and drop bookmarks to organize them
• Bookmark sidebar panel displayed both Media and Sports folders and bookmarked sites

• Remove

• Right click on Youtube bookmark in the bookmark sidebar panel to remove and the bookmark should be longer listed

• Rename

• Right click to rename Sony group portal bookmark and edit to Sony and new name should be displayed
• Bookmarked a site and drag and dropped a site from Bookmark folder to Other bookmarks folder

• Clicked Bookmarks icon to close the sidebar panel

Testcase 8: Bookmarks sidebar panel - Bookmark context menu

• Launch Brave
• Hover over bbc.com bookmark in the Bookmark sidebar panel
• Right click to open context menu for
• Select Open in Tab for BBC bookmark
• BBC site should open in a new Tab
• Hover over nytimes bookmark
• Select Open in New Window
• nytimes opens in new window
• Click on Bookmarks icon to verify all the bookmarks from original window are preserved
• Verified window is displayed with Sidebar with all the existing favicons preserved
• Hover over Time bookmark
• Right click and Select Open in Private window
• Time opens in a Private window
• Clicked on Bookmarks icon to verify all the bookmarks from original window are preserved
• Verified Sidebar with all existing favicons are preserved

Testcase 9: Wallet Icon on the Sidebar

• Launch Brave
• Click on Wallet icon on the Sidebar
• If the Wallet icon is selected first time, 'Welcome to the new Brave Wallet' onboarding page should be displayed
• Complete onboarding process to display portfolio page
• Close and relaunch the browser
• Click on Wallet icon on the Sidebar

Testcase 10: Brave Talk Icon on the Sidebar

- Launch Brave - Click on Brave Talk icon on the `Sidebar` - The icon is highlighted in red and Brave talk home page should be displayed

Testcase12: Verify Sidebar UI look and feel for Dark theme

Testcase 12: Upgrade

• Updated from 1.36.119 Chromium: 99.0.4844.83 to 1.37.105 Chromium: 100.0.4896.46
• Sidebar displayed on Normal, Private window and Private Window with TOR
• Sidebar is not enabled in Settings as per Logged set Show sidebar settings for release, beta, and nightly #21726
• Manually enabled in this test

[stephendonner]

Verification PASSED on

Brave	1.37.105 Chromium: 100.0.4896.46 (Official Build) (x86_64)
Revision	5ca33821b2211805855c77d334353d27c616a7ca-refs/branch-heads/4896@{#584}
OS	macOS Version 11.6.5 (Build 20G527)

Testcase 1: Sidebar UI - Default Widgets - PASSED

• Launch Brave
• Sidebar is displayed as a default
• Brave Talk, Wallet and Bookmarks items displayed as default items
• Hovered over Brave Talk and it was highlighted in red and description displayed as Brave Talk
• Hovered over Wallet and it was highlighted in red and description displayed as Wallet
• Hovered over Bookmarks and it was highlighted in red and description displayed Bookmarks
• Settings icon displayed at the bottom of the Sidebar

Brave Talk	Wallet	Bookmarks	Settings

Testcase 2: Sidebar - Remove and Re-add Default Widgets - PASSED

• Remove Wallet from Sidebar

• Hovered over Wallet and clicked remove
• Wallet was removed

• Re-add Wallet thru bubble

• Clicked on add (+) button and Wallet entry displayed in the bubble
• Clicked Wallet to add
• Wallet is displayed on the Sidebar

• Verified Remove and Re-add for Brave Talk and Wallet and the results were same as above

example	example	example	example

Testcase 3: Sidebar UI - PASSED

• Add favicons

• Navigate to brave.com
• Hovered over on add (+)button to add the site toSidebar`
• Brave favicon added to the Sidebar
• Added couple of more sites (youtube.com, bbc.com)
• Their favicons displayed on the Sidebar
• When hovered over a favicon, a description is displayed eg. YouTube
• If a site does not have a favicon, site's first letter will be generated Eg. Everlane "E"

• Drag and drop

Drag and drop YouTube favicon below bbc

• The reorder happens seamlessly without issues
• Clicked on the bbc favicon on the Sidebar to open the website

• Responsiveness

• Added few sites to Sidebar beyond the visible window size
• Up arrow and down arrow are visible and clickable to move thru website icons that are not visible
• Up and down arrows are disabled depending upon location

example	example	example	example	example

Testcase 4: Sidebar - Settings icon - PASSED

• Click Settings icon on the Sidebar
• brave://settings/?search=Show%20Sidebar page opened
• Show Sidebar Enabled entry in Appearance page highlighted in Yellow
• Always option was selected as a default
• Select `on mouseover'
• Return to Normal window
• Sidebar is not displayed on the left
• Hover over to display the Sidebar
• Verified Sidebar is available only on hover state in the Private Window and Private Window with TOR
• Select Never in the drop down
• Return to Normal window
• Sidebar is not displayed for Normal window, Private Window and Private Window with TOR
• Select `Always' again
• Sidebar is displayed for Normal window, Private Window and Private Window with TOR

example	example	example	example

Testcase 5: `Sidebar` Should Be Available in Normal, Private, and Private Window With TOR As a default - PASSED

• Launch Brave
• Sidebar is displayed in the Normal window as a default with default widgets
• Click on Hamburger menu and select New Private window OR Ctrl+Shift+N
• Sidebar as a default is displayed in the Private window with any favicons and default widgets
• Click on Hamburger menu and select New private window with TOR OR Alt+Shift+N
• Sidebar as a default is displayed in the Private window with TOR and any favicons and default widgets

example	example	example

Testcase 6: Sidebar Options functionality - PASSED

• Launch Brave
• Right click in the empty space on the Sidebar to open up Show Sidebar options
• Verified Always option is selected and is a default in the Sidebar
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Normal Window
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Private Window
• Verified Always option is selected in Show Sidebar in Hamburger menu as a default in Private Window with TOR
• Verified Always option is selected for Show Sidebar enabled entry in brave://settings/appearance as default
• Select On mouseover on the Sidebar
• Sidebar is displayed in hovered state
• Verified On mouseover option is selected and in the Sidebar
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Normal Window
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Private Window
• Verified On mouseover option is selected in Show Sidebar in Hamburger menu in Private Window with TOR
• Verified On mouseover option is selected for Show Sidebar enabled entry in brave://settings/appearance
• Select never in the Sidebar
• Verified Sidebar is no longer displayed
• Verified never option is selected in Show Sidebar in Hamburger menu in Normal Window
• Verified never option is selected in Show Sidebar in Hamburger menu in Private Window
• Verified never option is selected in Show Sidebar in Hamburger menu in Private Window with TOR
• Verified never option is selected for Show Sidebar enabled entry in brave://settings/appearance

Always

example	example	example

On mouseover

example	example	example

Testcase 7: `Bookmarks Sidebar panel` UI and Functionality - PASSED

• Launch Brave
• Hovered over and click Bookmarks icon in the Sidebar
• Bookmarks sidebar panel is displayed with Bookmarks and Other bookmarks folders
• Clicked on Youtube favicon on the Sidebar to open Youtube.com website
• Add Bookmark

• Bookmarked YouTube.com site in the Bookmarks folder in the sidebar panel
• Verify the site is available in the Bookmarks folder in the sidebar panel
• Bookmarked one more site Sony.com and the site is displayed
• Added couple of folders for Media and Sports in the sidebar panel for Bookmarks folder
• Bookmark https://www.callawaygolf.com/ under Sports folder

• Drag and Drop

• Drag and drop YouTube and Sony sites to Media folder
• Drag and drop bookmarks to organize them
• Bookmark sidebar panel displayed both Media and Sports folders and bookmarked sites

• Remove

• Right click on YouTube bookmark in the bookmark sidebar panel to remove and the bookmark should be longer listed

• Rename

• Right click to rename Sony group portal bookmark and edit to Sony and new name should be displayed
• Bookmarked a site and drag and dropped a site from Bookmark folder to Other bookmarks folder

• Clicked Bookmarks icon to close the sidebar panel

example	example	example

Testcase 8: Bookmarks sidebar panel - Bookmark context menu - PASSED

• Launch Brave
• Hover over bbc.com bookmark in the Bookmark sidebar panel
• Right click to open context menu for
• Select Open in Tab for BBC bookmark
• BBC site should open in a new Tab
• Hover over nytimes bookmark
• Select Open in New Window
• nytimes opens in new window
• Click on Bookmarks icon to verify all the bookmarks from original window are preserved
• Verified window is displayed with Sidebar with all the existing favicons preserved
• Hover over Time bookmark
• Right click and Select Open in Private window
• Time opens in a Private window
• Clicked on Bookmarks icon to verify all the bookmarks from original window are preserved
• Verified Sidebar with all existing favicons are preserved

Testcase 9: Wallet Icon on the Sidebar - PASSED

• Launch Brave
• Click on Wallet icon on the Sidebar
• If the Wallet icon is selected first time, 'Welcome to the new Brave Wallet' onboarding page should be displayed
• Complete onboarding process to display portfolio page
• Close and relaunch the browser
• Click on Wallet icon on the Sidebar

example	example

Testcase 10: Brave Talk Icon on the Sidebar - PASSED

- Launch Brave - Click on Brave Talk icon on the `Sidebar` - The icon is highlighted in red and Brave talk home page should be displayed

Testcase 11: Verify Sidebar UI look and feel for Dark theme - PASSED

Testcase 12: Upgrade - PASSED

• Updated from 1.36.220 Chromium: 99.0.4844.83 to 1.37.105 Chromium: 100.0.4896.46
• Sidebar displayed on Normal, Private window and Private Window with TOR
• Sidebar is not enabled in Settings as per Logged set Show sidebar settings for release, beta, and nightly #21726
• Manually enabled in this test

example	example	example	example