Add reading list

[rebron]

Description

Follow-up from #17573. We need to add the reading list back from Chromium. Feature was disabled since this would be a new feature for Brave users and the side panel would conflict with Brave's.

Test Plans

Tabs can be added to reading list

• Open a tab to any link, right-click it and choose "Add tab to reading list"
  
• Reading list toolbar icon should show with highlight circle
  

Reading list shows for side bar in "always" mode

• Change side bar pref to "always" show
• Click the reading list icon
• Reading list should show
• Reading list icon should show as selected
  
• The toolbar side panel button should show as selected (highlighted background)
  
• Click the reading list icon again
• Reading list should hide
• Reading list icon should not show as selected
• The toolbar side panel button should not show as selected

The side panel toolbar button will open the panel

• Click the side panel toolbar button
• Reading list (or bookmarks) panel should open (whichever was the last open)
• The opened panel should have the relevant sidebar icon selected
• The toolbar button should show as selected (highlighted background)
• Click the side panel toolbar button again
• The panel should close
• No sidebar buttons should show as selected
• The toolbar side panel button should not show as selected

Reading list shows for side bar in "on mouseover" mode

• Change side bar pref to "on mouseover" show
• Click the reading list icon
• Reading list should show
• Reading list icon should show as selected
• Mouse away from the side bar and side panel to the web content and click focus there
  • Side bar and panel should stay open
• Click the reading list icon again
• Reading list should hide
• Reading list icon should not show as selected
• Mouse away from the side bar and side panel to the web content and click focus there
  • Side bar and panel should hide

Reading list shows for side bar in "never" mode

• Change side bar pref to "never" show
• Click the side panel toolbar button
• Reading list (or bookmarks) panel should open (whichever was the last open)
• The opened panel should have the relevant sidebar icon selected
• The toolbar button should show as selected (highlighted background)
• Click the side panel toolbar button again (or the selected sidebar button, to unselect it)
• The panel should close
• No sidebar buttons should show as selected
• The toolbar side panel button should not show as selected
• The entire sidebar should hide, since it is in "never" show mode

[dairefagan]

It would be great to see this functionality cross platform.

[jsolly]

Would love to have this. Bet others coming from Safari would like it too.

[stephendonner]

Verification PASSED using

Brave	1.44.73 Chromium: 105.0.5195.68 (Official Build) beta (x86_64)
Revision	ad13e82529051bac6a0e65f455e6d7a1e5fd7938-refs/branch-heads/5195@{#903}
OS	macOS Version 13.0 (Build 22A5331f)

Add tabs via context-menu item - PASSED (*)

1. installed 1.44.73
2. launched Brave
3. loaded theverge.com
4. right-clicked the tab and select Add Tab to Reading List
5. looked at the side panel toolbar icon
6. confirmed it does NOT have a new-notification icon
7. clicked the side panel toolbar icon
8. confirmed theverge.com has an entry in Unread

step 4	steps 5-6	steps 7-8

Add tabs via + Add current tab - PASSED

1. installed 1.44.73
2. launched Brave
3. loaded purple.com
4. clicked on the side panel toolbar icon to open the Reading List
5. looked at the side panel toolbar icon
6. confirmed it does NOT have a new-notification icon
7. confirmed purple.com has an entry in Unread

step 4	steps 5-6	steps 7-8

Reading list shows for sidebar in "always" show mode - PASSED

1. install 1.44.73
2. launch Brave
3. load wired.com
4. right-click on the tab and choose Add Tab to Reading List
5. click on the "hamburger menu" -> Show Sidebar -> Always
6. click the reading list toolbar icon
7. confirmed reading list was shown
8. confirmed reading list icon was shown as selected
9. confirmed the toolbar side panel button was shown as selected
10. click the reading list icon again
11. confirmed the reading list was hidden
12. confirmed the reading list icon was not shown as selected
13. confirmed the side panel toolbar button was not shown as selected

step 4	step 5	steps 6-8	steps 10-13

The side panel toolbar button will open the panel - PASSED

1. installed 1.44.73
2. launched Brave
3. loaded slashdot.org
4. right-clicked the tab and chose Add Tab to Reading List
5. clicked the side panel toolbar button
6. confirmed the reading list opens
7. confirmed the opened panel has the relevant sidebar icon selected
8. confirmed the toolbar button was shown as selected
9. clicked the side panel toolbar button again
10. confirmed the panel closed
11. confirmed no sidebar buttons were shown as selected
12. confirmed the toolbar side panel button was not shown as selected

step 4	steps 5-8	steps 9-12

Reading list shows for sidebar in "on mouseover" show mode - PASSED

1. installed 1.44.73
2. launched Brave
3. loaded reuters.com
4. clicked on the "hamburger menu" -> Show Sidebar -> On mouseover
5. clicked the reading list icon
6. confirmed reading list was shown
7. confirmed reading list icon was shown as selected
8. moved the mouse away from the side bar and side panel to the web content and clicked to focus there
9. confirmed side bar and panel stayed open
10. clicked the reading list icon again
11. confirmed the reading list was hidden
12. confirmed the reading list icon did not show as selected
13. moved the mouse away from the side bar and side panel to the web content and click focus there
14. side bar and panel were hidden

step 4	steps 5-7	steps 8-9	steps 13-14

Reading list shows for sidebar in "never" show mode - PASSED

1. install 1.44.73
2. launch Brave
3. load wired.com
4. click on the "hamburger menu" -> Show Sidebar -> Never
5. click the side panel toolbar button
6. confirmed Reading List opened
7. confirmed correct icon highlighted in sidebar
8. confirmed side panel toolbar button is shown as selected
9. click on the reading list icon
10. confirmed the side panel closed
11. confirmed no buttons are shown as selected
12. confirmed sidebar was hidden

step 3	step 4	steps 6-8	steps 9-12

Context menus - PASSED

Open in New Tab	Open in New Window	Open in Private Window	Mark as read	Delete

New Tab	New Window	Private Window	Read	Deleted

On-hover actions - PASSED

Mark as Read	Delete

Read	Deleted

Dark Mode - PASSED

example	example	example

Encountered:

• Update introductory graphic for Reading list panel  #24927
• Use last opened panel when selecting sidepanel button in toolbar #25229
• Missing new-notification icon indicator for "added to reading list" action #25237

[MadhaviSeelam]

Verification PASSED using

Brave | 1.44.77 Chromium: 105.0.5195.102 (Official Build) beta (64-bit)
-- | --
Revision | 4c16f5ffcc2da70ee2600d5db77bed423ac03a5a-refs/branch-heads/5195_55@{#4}
OS | Windows 11 Version 21H2 (Build 22000.856)

Case 1: Add tabs to reading list via context-menu item - PASSED (*)

1. installed 1.44.77
2. launched Brave
3. loaded nytimes.com
4. right-clicked the tab and select Add Tab to Reading List
5. looked at the side panel toolbar icon
6. confirmed it does NOT have a new-notification icon
7. clicked the side panel toolbar icon
8. confirmed nytimes.com has an entry in Unread

step 4	steps 5-6	steps 7-8

Case 2: Add tabs via + Add current tab - PASSED

1. new profile
2. launched Brave
3. loaded bbc.com
4. clicked on the side panel toolbar icon to open the Reading List
5. click + Add current tab button
6. confirmed it does NOT have a new-notification icon
7. confirmed bbc.com has an entry in Unread

step 3-4	step 5	step 7

Case 3: Reading list shows for sidebar in "always" show mode - PASSED

1. new profile
2. launch Brave
3. load wired.com
4. right-click on the tab and choose Add Tab to Reading List
5. click on the "hamburger menu" -> Show Sidebar -> Always
6. click the reading list toolbar icon
7. confirmed reading list was shown
8. confirmed reading list icon was shown as selected
9. confirmed the toolbar side panel button was shown as selected
10. click the reading list icon again
11. confirmed the reading list was hidden
12. confirmed the reading list icon was not shown as selected
13. confirmed the side panel toolbar button was not shown as selected

step 4	step 5	steps 6-9	steps 10-13

Case 4: The side panel toolbar button will open the panel - PASSED

1. new profile
2. launched Brave
3. loaded slashdot.org
4. right-clicked the tab and chose Add Tab to Reading List
5. clicked the side panel toolbar button
6. confirmed the reading list opens
7. confirmed the opened panel has the relevant sidebar icon selected
8. confirmed the toolbar button was shown as selected
9. clicked the side panel toolbar button again
10. confirmed the panel closed
11. confirmed no sidebar buttons were shown as selected
12. confirmed the toolbar side panel button was not shown as selected

step 4	steps 5-8	steps 9-12

Case 5: Reading list shows for sidebar in "on mouseover" show mode - PASSED

1. continue from Case 4
2. loaded reuters.com
3. clicked on the "hamburger menu" -> Show Sidebar -> On mouseover
4. clicked the reading list icon
5. confirmed reading list was shown
6. confirmed reading list icon was shown as selected
7. moved the mouse away from the side bar and side panel to the web content and clicked to focus there
8. confirmed side bar and panel stayed open
9. clicked the reading list icon again
10. confirmed the reading list was hidden
11. confirmed the reading list icon did not show as selected
12. moved the mouse away from the side bar and side panel to the web content and click focus there
13. side bar and panel were hidden

step 3	steps 4-6	steps 7-9	steps 10-12	step 13

Case 6: Reading list shows for sidebar in "never" show mode - PASSED

1. continue from Case 5
2. load wired.com
3. click on the "hamburger menu" -> Show Sidebar -> Never
4. sidebar is not available to display Reading List
5. click on side panel toolbar button
6. reading list panel opened with reading list icon highlighted in the sidebar
7. toolbar side panel button shows as selected (highlighted background)
8. click side panel toolbar button again
9. confirmed the panel is closed
10. confirmed sidebar was hidden
11. toolbar side panel button shows as un-selected

step 3-4	step 5-7	steps 8-11

Case 7: Tabs can be added to reading list in NTP, New Window, Private Window, Private Window With TOR - PASSED

NTP	new_window	private_window	TOR

Case 8: Context menus - PASSED

open in new tab

Ex1	Ex2

open in new window

Ex1	Ex2

open in private window

Ex1	Ex2

mark as read

Ex1	Ex2

delete

Ex1	Ex2	Ex3

Case 9: Reading List UI look and feel for Light theme - PASSED

Light mode

Ex1	Ex2	Ex3

Case 10: On-hover actions - PASSED

Delete

Ex1	Ex2

Mark as read	Read

Case 11: Upgrade - PASSED

1. installed 1.43.89
2. add bookmarks and close the browser
3. rename the profile folder to Beta
4. install 1.44.79
5. launch Brave
6. reading List icon is displayed in the sidebar
7. toolbar side panel button displayed

1.43.89	1.44.79-A	1.44.79-B	1.44.79-C

Encountered:

• Update introductory graphic for Reading list panel  #24927
• Use last opened panel when selecting sidepanel button in toolbar #25229
• Missing new-notification icon indicator for "added to reading list" action #25237
• Unable to add a site to reading list in Guest window as Add to current tab option is not getting activated #24930

[MadhaviSeelam]

Verification PASSED using

Brave | 1.44.97 Chromium: 106.0.5249.55 (Official Build) (64-bit)
-- | --
Revision | 4d5f098fca6ab7f4b6b7c240be3d9593c2357709-refs/branch-heads/5249@{#531}
OS | Linux

Case 1: Add tabs to reading list via context-menu item - PASSED (*)

1. installed 1.44.77
2. launched Brave
3. loaded washingtonpost.com
4. right-clicked the tab and select Add Tab to Reading List
5. looked at the side panel toolbar icon
6. confirmed it does NOT have a new-notification icon
7. clicked the side panel toolbar icon
8. confirmed washingtonpost.com has an entry in Unread

step 4	steps 5-6	steps 7-8

Case 2: Add tabs via + Add current tab - PASSED

1. new profile
2. launched Brave
3. loaded gulfnews.com
4. clicked on the side panel toolbar icon to open the Reading List
5. click + Add current tab button
6. confirmed it does NOT have a new-notification icon
7. confirmed gulfnews.com has an entry in Unread

step 3-5	step 7

Case 3: Reading list shows for sidebar in "always" show mode - PASSED

1. new profile
2. launch Brave
3. load techcrunch.com
4. right-click on the tab and choose Add Tab to Reading List
5. click on the "hamburger menu" -> Show Sidebar -> Always
6. click the reading list toolbar icon
7. confirmed reading list was shown
8. confirmed reading list icon was shown as selected
9. confirmed the toolbar side panel button was shown as selected
10. click the reading list icon again
11. confirmed the reading list was hidden
12. confirmed the reading list icon was not shown as selected
13. confirmed the side panel toolbar button was not shown as selected

step 4	step 5	steps 6-9	steps 10-13

Case 4: The side panel toolbar button will open the panel - PASSED

1. new profile
2. launched Brave
3. loaded bloomberg.com
4. right-clicked the tab and chose Add Tab to Reading List
5. click on the "hamburger menu" -> Show Sidebar -> Always
6. clicked the side panel toolbar button
7. confirmed the reading list opens
8. confirmed the opened panel has the relevant sidebar icon selected
9. confirmed the side panel toolbar button was shown as selected
10. clicked the side panel toolbar button again
11. confirmed the panel closed
12. confirmed no sidebar panel buttons were shown as selected
13. confirmed the side panel toolbar button was not shown as selected

step 4	steps 5	steps 7-9	step 10-13

Case 5: Reading list shows for sidebar in "on mouseover" show mode - PASSED

1. continue from Case 4
2. loaded reuters.com
3. clicked on the "hamburger menu" -> Show Sidebar -> On mouseover
4. clicked the reading list icon
5. confirmed reading list was shown
6. confirmed reading list icon was shown as selected
7. moved the mouse away from the side bar and side panel to the web content and clicked to focus there
8. confirmed side bar and panel stayed open
9. clicked the reading list icon again
10. confirmed the reading list was hidden
11. confirmed the reading list icon did not show as selected
12. moved the mouse away from the side bar and side panel to the web content and click focus there
13. side bar and panel were hidden

step 3	steps 4-6	steps 7-9	steps 10-13

Case 6: Reading list shows for sidebar in "never" show mode - PASSED

1. continue from Case 5
2. load theguardian.com
3. click on the "hamburger menu" -> Show Sidebar -> Never
4. sidebar is not available to display Reading List
5. click on side panel toolbar button
6. reading list panel opened with reading list icon highlighted in the sidebar
7. side panel tool bar button shows as selected (highlighted background)
8. click side panel toolbar button again
9. confirmed the panel is closed
10. confirmed sidebar was hidden
11. toolbar side panel button shows as un-selected

step 3-4	step 5-7	steps 8-11

Case 7: Tabs can be added to reading list in NTP, New Window, Private Window, Private Window With TOR - PASSED

NTP	new_window	private_window	Tor window

Case 8: Context menus - PASSED

open in new tab

Ex1	Ex2

open in new window

Ex1	Ex2

open in private window

Ex1	Ex2

mark as read

Ex1	Ex2

delete

Ex1	Ex2	Ex3

Case 9: Reading List UI look and feel for Light theme - PASSED

Dark theme

Ex1	Ex2	Ex3

Case 10: On-hover actions - PASSED

Delete

Ex1	Ex2

Mark as read	Read

Case 11: Upgrade - PASSED

1. installed 1.43.93
2. add bookmarks and close the browser
3. rename the profile folder to Beta
4. install 1.44.97
5. launch Brave
6. reading List icon is displayed in the sidebar panel
7. side panel toolbar button displayed

step 1-2	step 4-5	step 6-7

Encountered:

• Update introductory graphic for Reading list panel  #24927
• Use last opened panel when selecting sidepanel button in toolbar #25229
• Missing new-notification icon indicator for "added to reading list" action #25237
• Unable to add a site to reading list in Guest window as Add to current tab option is not getting activated #24930

[0x49D1]

Nice feature! But: if I hide the button from toolbar - it's difficult to get back to side panel again. Why not add F4 hotkey like in other browsers to toggle it from keyboard?

[mlntr]

The sidebar button is on the right of the window so it should be possible to have the sidebar on the right too, it's annoying to move the cursor to the other side

[stephendonner]

The sidebar button is on the right of the window so it should be possible to have the sidebar on the right too, it's annoying to move the cursor to the other side

Yes, it's already fixed in the latest nightly build.

[ShyneTurtle]

Could you add a button to show the reading list from the topbar ? it's annoying to have another bar eating screen space while there is a half empty one at the top already...

[dabat]

@ShyneTurtle There is a button in the top bar that will open the sidebar, where the reading list is available.

If you don't want the sidebar taking up space all the time just hide it.
In Settings/Appearance/Sidebar set the option to 'Never'.

[ShyneTurtle]

@dabat i don't want a button do display the sidebar, i want a button to display the reading list, as an overlay so it doesn't ruin the layout of the page i'm currently viewing.