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: Tab closing #5725
• Multi-selection: Bookmarking #5716
• Multi-selection: Link sharing #5710
• 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.

[mikescamell]

Looks good and worked well! 🥳 A few comments but nothing blocking

[mikescamell]

❓ Is there a reason we can't make this accessible?

[mikescamell]

❓ Why do we need to hold this state? Can it not be held outside of this class? I would have imagined we would know the state of this externally to the decorator class

[mikescamell]

🔍 Add import for R class

[mikescamell]

🔍 Seeing as we're using a sealed interface it might be worth opting to use a when in case any new states are added in future

[mikescamell]

🔍 Personal preference but I find this easier to read, same goes for ln156

Suggested change

	(_selectionViewState.value.mode as? SelectionViewState.Mode.Selection)?.let { selectionMode ->
	_selectionViewState.update {
	it.copy(mode = SelectionViewState.Mode.Selection(selectionMode.selectedTabs + tab.tabId))
	}
	}
	val selectionMode = _selectionViewState.value.mode
	if(selectionMode is SelectionViewState.Mode.Selection) {
	_selectionViewState.update {
	it.copy(mode = SelectionViewState.Mode.Selection(selectionMode.selectedTabs - tab.tabId))
	}
	}

[mikescamell]

❓ What is the second it? It might be better to use an explicit parameter name in this case

[mikescamell]

💡 Maybe this would be easier to read

Suggested change

	_selectionViewState.update { it.copy(mode = SelectionViewState.Mode.Selection(tabSwitcherItems.value?.map { it.id } ?: emptyList())) }
	val selectedTabIds = tabSwitcherItems.value?.map { tabSwitcherItem -> tabSwitcherItem.id } ?: emptyList()
	_selectionViewState.update { it.copy(mode = SelectionViewState.Mode.Selection(selectedTabIds)) }

[mikescamell]

❓ Why did we need to change this? I do prefer the when statement but do we really need an else? Shouldn't this never be null?

[mikescamell]

💡Something doesn't sit right with us passing in some external state when we're using the TabSwitcherItemDiffCallback to compare items and their changes.

Did you explore anything where the Tab knows what selection mode it's in so then it can reflect that in it's UI?