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 https://github.com/brave/brave-browser/issues/21751
• Logged https://github.com/brave/brave-browser/issues/21842
• Logged https://github.com/brave/brave-browser/issues/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 to `Sidebar` > - `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 #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 to `Sidebar` > - `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 #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 to `Sidebar` > - `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 #21726 - Manually enabled in this test example | example | example | example ---------|----------|---------|--------- | | | |