Bug 1940628 - Add an URL background to BrowserEditToolbar r=android-reviewers,petru

- Adds a customizable URL background color to BrowserEditToolbar

Differential Revision: https://phabricator.services.mozilla.com/D233606

mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserEditToolbar.kt

@@ -4,8 +4,12 @@
 
 package mozilla.components.compose.browser.toolbar
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.Icon
@@ -13,6 +17,7 @@ import androidx.compose.material.IconButton
 import androidx.compose.material.TextField
 import androidx.compose.material.TextFieldDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
@@ -24,6 +29,8 @@ import androidx.compose.ui.unit.dp
 import mozilla.components.compose.base.theme.AcornTheme
 import mozilla.components.ui.icons.R as iconsR
 
+private val ROUNDED_CORNER_SHAPE = RoundedCornerShape(8.dp)
+
 /**
  * Sub-component of the [BrowserToolbar] responsible for allowing the user to edit the current
  * URL ("edit mode").
@@ -44,39 +51,50 @@ fun BrowserEditToolbar(
     onUrlCommitted: (String) -> Unit = {},
     editActions: @Composable () -> Unit = {},
 ) {
-    TextField(
+    Row(
-        url,
+        modifier = Modifier
-        onValueChange = { value ->
+            .background(color = colors.background)
-            onUrlEdit(value)
+            .padding(all = 8.dp)
-        },
+            .background(
-        colors = TextFieldDefaults.textFieldColors(
+                color = colors.urlBackground,
-            textColor = colors.text,
+                shape = ROUNDED_CORNER_SHAPE,
-            backgroundColor = colors.background,
+            ),
-            focusedIndicatorColor = Color.Transparent,
+        verticalAlignment = Alignment.CenterVertically,
-            unfocusedIndicatorColor = Color.Transparent,
+    ) {
-            disabledIndicatorColor = Color.Transparent,
+        TextField(
-            errorIndicatorColor = Color.Transparent,
+            value = url,
-        ),
+            onValueChange = { value ->
-        singleLine = true,
+                onUrlEdit(value)
-        keyboardOptions = KeyboardOptions(
+            },
-            keyboardType = KeyboardType.Uri,
+            colors = TextFieldDefaults.textFieldColors(
-            imeAction = ImeAction.Go,
+                textColor = colors.text,
-        ),
+                focusedIndicatorColor = Color.Transparent,
-        keyboardActions = KeyboardActions(
+                unfocusedIndicatorColor = Color.Transparent,
-            onGo = { onUrlCommitted(url) },
+                disabledIndicatorColor = Color.Transparent,
-        ),
+                errorIndicatorColor = Color.Transparent,
-        modifier = Modifier.fillMaxWidth(),
+            ),
-        trailingIcon = {
+            singleLine = true,
-            editActions()
+            keyboardOptions = KeyboardOptions(
+                keyboardType = KeyboardType.Uri,
+                imeAction = ImeAction.Go,
+            ),
+            keyboardActions = KeyboardActions(
+                onGo = { onUrlCommitted(url) },
+            ),
+            modifier = Modifier.fillMaxWidth(),
+            shape = ROUNDED_CORNER_SHAPE,
+            trailingIcon = {
+                editActions()
 
-            if (url.isNotEmpty()) {
+                if (url.isNotEmpty()) {
-                ClearButton(
+                    ClearButton(
-                    tint = colors.clearButton,
+                        tint = colors.clearButton,
-                    onButtonClicked = { onUrlEdit("") },
+                        onButtonClicked = { onUrlEdit("") },
-                )
+                    )
-            }
+                }
-        },
+            },
-    )
+        )
+    }
 }
 
 /**

mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserToolbarColors.kt

@@ -32,11 +32,13 @@ data class BrowserDisplayToolbarColors(
  * Represents the colors used by the browser edit toolbar.
  *
  * @property background Background color of the toolbar.
+ * @property urlBackground Background color of the URL text field.
  * @property text Text color of the URL.
  * @property clearButton Color tint for the icon shown when the URL is empty.
  */
 data class BrowserEditToolbarColors(
     val background: Color,
+    val urlBackground: Color,
     val text: Color,
     val clearButton: Color,
 )

mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/BrowserToolbarDefaults.kt

@@ -25,6 +25,7 @@ object BrowserToolbarDefaults {
         ),
         editToolbarColors: BrowserEditToolbarColors = BrowserEditToolbarColors(
             background = AcornTheme.colors.layer1,
+            urlBackground = AcornTheme.colors.layer3,
             text = AcornTheme.colors.textPrimary,
             clearButton = AcornTheme.colors.iconPrimary,
         ),

mobile/android/android-components/samples/toolbar/build.gradle

@@ -45,6 +45,7 @@ dependencies {
     implementation project(':browser-menu2')
     implementation project(':browser-domains')
     implementation project(':browser-state')
+    implementation project(':compose-base')
     implementation project(':compose-browser-toolbar')
 
     implementation project(':ui-colors')

mobile/android/android-components/samples/toolbar/src/main/java/org/mozilla/samples/toolbar/ToolbarActivity.kt

@@ -39,6 +39,7 @@ import mozilla.components.browser.menu.item.SimpleBrowserMenuItem
 import mozilla.components.browser.menu2.BrowserMenuController
 import mozilla.components.browser.toolbar.BrowserToolbar
 import mozilla.components.browser.toolbar.display.DisplayToolbar
+import mozilla.components.compose.base.theme.AcornTheme
 import mozilla.components.compose.browser.toolbar.store.BrowserEditToolbarAction
 import mozilla.components.compose.browser.toolbar.store.BrowserToolbarAction
 import mozilla.components.compose.browser.toolbar.store.BrowserToolbarStore
@@ -489,28 +490,30 @@ class ToolbarActivity : AppCompatActivity() {
         showToolbar(isCompose = true)
 
         binding.composeToolbar.setContent {
-            val store = remember {
+            AcornTheme {
-                BrowserToolbarStore()
+                val store = remember {
+                    BrowserToolbarStore()
+                }
+
+                val uiState by store.observeAsState(initialValue = store.state) { it }
+
+                BrowserToolbar(
+                    onDisplayMenuClicked = {},
+                    onDisplayToolbarClick = {
+                        store.dispatch(BrowserToolbarAction.ToggleEditMode(editMode = true))
+                    },
+                    onTextEdit = { text ->
+                        store.dispatch(BrowserEditToolbarAction.UpdateEditText(text = text))
+                    },
+                    onTextCommit = {
+                        store.dispatch(BrowserToolbarAction.ToggleEditMode(editMode = false))
+                    },
+                    url = "https://www.mozilla.org/en-US/firefox/mobile/",
+                    hint = "Search or enter address",
+                    editMode = uiState.editMode,
+                    editText = uiState.editState.editText,
+                )
             }
-
-            val uiState by store.observeAsState(initialValue = store.state) { it }
-
-            BrowserToolbar(
-                onDisplayMenuClicked = {},
-                onDisplayToolbarClick = {
-                    store.dispatch(BrowserToolbarAction.ToggleEditMode(editMode = true))
-                },
-                onTextEdit = { text ->
-                    store.dispatch(BrowserEditToolbarAction.UpdateEditText(text = text))
-                },
-                onTextCommit = {
-                    store.dispatch(BrowserToolbarAction.ToggleEditMode(editMode = false))
-                },
-                url = "https://www.mozilla.org/en-US/firefox/mobile/",
-                hint = "Search or enter address",
-                editMode = uiState.editMode,
-                editText = uiState.editState.editText,
-            )
         }
     }