Multi-selection: Selection mode

[0nko]

Task/Issue URL: https://app.asana.com/0/72649045549333/1207969573539955

Description

This PR adds the tab selection UI and allows the tabs to be selected after triggering the selection mode. The selection mode can be cancelled by tapping anywhere outside a tab.

Some menu items and buttons are already functional, namely:

• New Tab
• FAB New Tab
• Select Tabs (triggers the selection mode)
• Select All (in selection mode)
• Close All Tabs (in selection mode)

Non-functional items:

• All sharing menu items and toolbar buttons
• All bookmarking menu items and toolbar buttons
• All selection-related tab closing (including the FAB)

Steps to test this PR

Entering and leaving the selection mode

• Navigate to the tab switcher
• Make sure you have at least 3 tabs
• Tap on the More menu button
• Tap on Select Tabs
• Verify the selection mode is triggered
• Verify all tabs are deselected
• Verify the sharing and bookmark toolbar buttons are disabled
• Verify the FAB shows "New Tab"
• Tap on a tab
• Verify the tab gets selected (both with a checkmark and decoration)
• Verify the sharing and bookmark toolbar buttons are enabled
• Verify the FAB shows "Close Tabs"
• Verify the toolbar title shows the correct number of selected tabs
• Tap on the empty area
• Verify the tab switcher goes back to the normal mode

Selecting all tabs

• Navigate to the tab switcher
• Make sure you have at least 3 tabs
• Trigger the selection mode
• Tap on the more menu and tap on Select All
• Verify all tabs are selected
• Verify the toolbar title shows the correct number of selected tabs
• Tap on the more menu again
• Verify the sharing, bookmarking and closing menu items show the correct number of selected tabs
• Verify the Select all menu item is gone
• Verify the Close Other Tabs item is gone
• Deselect one tab
• Tap on the more menu
• Verify the Select All and Close Other Tabs are back
• Verify the correct number of tabs is shown in the menu items and the toolbar

Closing all tabs

• Navigate to the tab switcher
• Trigger the selection mode
• Tap on the more menu and tap on Close All Tabs
• Verify a confirmation dialog is displayed
• Tap on Close
• Verify all tabs are removed

Adding a new tab

• Navigate to the tab switcher
• Tap on the more menu and tap on New tab
• Verify a new tab is added (or selected, if a NTP already exists) and the app navigates back to the browser
• Go back to the tab switcher
• Tap on the FAB with a New tab title
• Verify a new tab is added again the same way

List layout selection

• Navigate to the tab switcher
• Tap on the list layout toolbar button
• Tap on the More menu and tap on Select Tabs
• Verify the selection mode is triggered
• Smoke test the selection behavior and verify it behaves the same way as grid layout

Demo

Screen_recording_20250213_123419.mp4

[0nko]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• Multi-selection: Selection mode #5623 👈 (View in Graphite)
• Multi-selection: Dynamic menu #5588
• Multi-selection: Add new FAB to the tab switcher #5467
• Multi-selection: Add a new feature flag for multi-selection #5464
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.