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,14 +51,23 @@ fun BrowserEditToolbar(
     onUrlCommitted: (String) -> Unit = {},
     editActions: @Composable () -> Unit = {},
 ) {
+    Row(
+        modifier = Modifier
+            .background(color = colors.background)
+            .padding(all = 8.dp)
+            .background(
+                color = colors.urlBackground,
+                shape = ROUNDED_CORNER_SHAPE,
+            ),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
         TextField(
-        url,
+            value = url,
             onValueChange = { value ->
                 onUrlEdit(value)
             },
             colors = TextFieldDefaults.textFieldColors(
                 textColor = colors.text,
-            backgroundColor = colors.background,
                 focusedIndicatorColor = Color.Transparent,
                 unfocusedIndicatorColor = Color.Transparent,
                 disabledIndicatorColor = Color.Transparent,
@@ -66,6 +82,7 @@ fun BrowserEditToolbar(
                 onGo = { onUrlCommitted(url) },
             ),
             modifier = Modifier.fillMaxWidth(),
+            shape = ROUNDED_CORNER_SHAPE,
             trailingIcon = {
                 editActions()
 
@@ -77,6 +94,7 @@ fun BrowserEditToolbar(
                 }
             },
         )
+    }
 }
 
 /**

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,6 +490,7 @@ class ToolbarActivity : AppCompatActivity() {
         showToolbar(isCompose = true)
 
         binding.composeToolbar.setContent {
+            AcornTheme {
                 val store = remember {
                     BrowserToolbarStore()
                 }
@@ -513,6 +515,7 @@ class ToolbarActivity : AppCompatActivity() {
                 )
             }
         }
+    }
 
     private fun showToolbar(isCompose: Boolean = false) {
         binding.toolbar.isVisible = !isCompose