commit 17bd3f7a0bb67dec750b97a3ef5e35999c470758
parent 4507193fa852a804507e2019737bb0de2ea06200
Author: Cathy Lu <calu@mozilla.com>
Date: Thu, 11 Dec 2025 21:41:03 +0000
Bug 1994277 - Add search top bar to tab management search screen r=android-reviewers,android-l10n-reviewers,flod,007
Differential Revision: https://phabricator.services.mozilla.com/D275664
Diffstat:
2 files changed, 62 insertions(+), 18 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/tabsearch/TabSearchScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/tabstray/ui/tabsearch/TabSearchScreen.kt
@@ -4,47 +4,87 @@
package org.mozilla.fenix.tabstray.ui.tabsearch
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
+import androidx.compose.material3.rememberSearchBarState
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
-import androidx.compose.ui.unit.dp
-import mozilla.components.compose.base.button.FilledButton
+import mozilla.components.compose.base.searchbar.TopSearchBar
+import org.mozilla.fenix.R
import org.mozilla.fenix.tabstray.TabsTrayAction
import org.mozilla.fenix.tabstray.TabsTrayState
import org.mozilla.fenix.tabstray.TabsTrayStore
import org.mozilla.fenix.theme.FirefoxTheme
+import mozilla.components.ui.icons.R as iconsR
/**
* The top-level Composable for the Tab Search feature within the Tab Manager.
*
* @param store [TabsTrayStore] used to listen for changes to [TabsTrayState].
*/
+@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TabSearchScreen(
store: TabsTrayStore,
) {
- Scaffold { paddingValues ->
- Column(
- modifier = Modifier
- .padding(paddingValues)
- .padding(all = 16.dp),
- ) {
- Text("Welcome to tab search!")
-
- Spacer(modifier = Modifier.height(16.dp))
-
- FilledButton(
- text = "Return to tab manager",
- ) { store.dispatch(TabsTrayAction.NavigateBackInvoked) }
+ val searchBarState = rememberSearchBarState()
+ var query by remember { mutableStateOf("") }
+ var expanded by remember { mutableStateOf(false) }
+ val focusRequester = remember { FocusRequester() }
+ LaunchedEffect(Unit) {
+ focusRequester.requestFocus()
+ }
+ Scaffold(
+ topBar = {
+ TopSearchBar(
+ state = searchBarState,
+ modifier = Modifier.focusRequester(focusRequester),
+ query = query,
+ onQueryChange = { query = it },
+ onSearch = { submitted -> query = submitted },
+ expanded = expanded,
+ onExpandedChange = { expanded = it },
+ placeholder = {
+ Text(stringResource(id = R.string.tab_manager_search_bar_placeholder))
+ },
+ leadingIcon = {
+ IconButton(
+ onClick = {
+ store.dispatch(TabsTrayAction.NavigateBackInvoked)
+ },
+ ) {
+ Icon(
+ painter = painterResource(id = iconsR.drawable.mozac_ic_back_24),
+ contentDescription = stringResource(
+ id = R.string.tab_manager_search_bar_back_content_description,
+ ),
+ )
+ }
+ },
+ )
+ },
+ ) { innerPadding ->
+ Box(modifier = Modifier.padding(innerPadding)) {
+ // TODO Bug 1994286: will add results UI
}
}
}
diff --git a/mobile/android/fenix/app/src/main/res/values/strings.xml b/mobile/android/fenix/app/src/main/res/values/strings.xml
@@ -1319,6 +1319,8 @@
<string name="tab_drawer_fab_content">Private</string>
<!-- Text for the new tab button to indicate syncing command on the synced tabs page -->
<string name="tab_drawer_fab_sync">Sync</string>
+ <!-- Text for the tab search bar placeholder -->
+ <string name="tab_manager_search_bar_placeholder">Search your tabs</string>
<!-- Text shown in the menu for sharing all tabs -->
<string name="tab_tray_menu_item_share">Share all tabs</string>
<!-- Text shown in the menu to view recently closed tabs -->
@@ -1367,6 +1369,8 @@
<string name="close_tab_title">Close tab %s</string>
<!-- Content description (not visible, for screen readers etc.): Opens the open tabs menu when pressed -->
<string name="open_tabs_menu">Open tabs menu</string>
+ <!-- Content description (not visible, for screen readers etc.): Return to tab manager -->
+ <string name="tab_manager_search_bar_back_content_description">Return to tab manager</string>
<!-- Open tabs menu item to save tabs to collection -->
<string name="tabs_menu_save_to_collection1">Save tabs to collection</string>
<!-- Text for the menu button to delete a collection -->
