improve custom tabs toolbar

packages/flutter_mozilla_components/android/src/main/res/drawable/custom_tab_menu_bg.xml

@@ -5,6 +5,9 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
-    <solid android:color="?attr/colorSurfaceContainer" />
-    <corners android:radius="16dp" />
+    <solid android:color="?attr/colorSurfaceContainerHigh" />
+    <corners android:radius="20dp" />
+    <stroke
+        android:width="1dp"
+        android:color="?attr/colorOutlineVariant" />
 </shape>

packages/flutter_mozilla_components/android/src/main/res/layout/custom_tab_menu.xml

@@ -8,29 +8,29 @@
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:background="@drawable/custom_tab_menu_bg"
-    android:paddingVertical="4dp"
-    android:minWidth="192dp">
+    android:paddingVertical="8dp"
+    android:minWidth="220dp">
 
     <!-- Navigation row: Back / Forward -->
     <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="40dp"
+        android:layout_height="48dp"
         android:orientation="horizontal"
         android:gravity="center"
-        android:paddingHorizontal="12dp">
+        android:paddingHorizontal="14dp">
 
         <ImageButton
             android:id="@+id/menuBack"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
             android:background="?attr/selectableItemBackgroundBorderless"
             android:scaleType="center"
             android:contentDescription="@string/custom_tab_navigate_back" />
 
         <ImageButton
             android:id="@+id/menuForward"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
             android:background="?attr/selectableItemBackgroundBorderless"
             android:scaleType="center"
             android:contentDescription="@string/custom_tab_navigate_forward" />
@@ -40,33 +40,33 @@
     <View
         android:layout_width="match_parent"
         android:layout_height="1dp"
-        android:layout_marginHorizontal="12dp"
-        android:layout_marginVertical="4dp"
+        android:layout_marginHorizontal="14dp"
+        android:layout_marginVertical="6dp"
         android:background="?attr/colorOutlineVariant" />
 
     <!-- Refresh -->
     <LinearLayout
         android:id="@+id/menuRefresh"
         android:layout_width="match_parent"
-        android:layout_height="40dp"
+        android:layout_height="48dp"
         android:orientation="horizontal"
         android:gravity="center_vertical"
-        android:paddingHorizontal="12dp"
+        android:paddingHorizontal="14dp"
         android:background="?attr/selectableItemBackground"
         android:clickable="true"
         android:focusable="true">
 
         <ImageView
             android:id="@+id/menuRefreshIcon"
-            android:layout_width="20dp"
-            android:layout_height="20dp"
-            android:layout_marginEnd="12dp" />
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="14dp" />
 
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/custom_tab_refresh"
-            android:textAppearance="?attr/textAppearanceBodyMedium"
+            android:textAppearance="?attr/textAppearanceBodyLarge"
             android:textColor="?attr/colorOnSurface" />
     </LinearLayout>
 
@@ -74,25 +74,25 @@
     <LinearLayout
         android:id="@+id/menuShare"
         android:layout_width="match_parent"
-        android:layout_height="40dp"
+        android:layout_height="48dp"
         android:orientation="horizontal"
         android:gravity="center_vertical"
-        android:paddingHorizontal="12dp"
+        android:paddingHorizontal="14dp"
         android:background="?attr/selectableItemBackground"
         android:clickable="true"
         android:focusable="true">
 
         <ImageView
             android:id="@+id/menuShareIcon"
-            android:layout_width="20dp"
-            android:layout_height="20dp"
-            android:layout_marginEnd="12dp" />
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="14dp" />
 
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/custom_tab_share"
-            android:textAppearance="?attr/textAppearanceBodyMedium"
+            android:textAppearance="?attr/textAppearanceBodyLarge"
             android:textColor="?attr/colorOnSurface" />
     </LinearLayout>
 
@@ -100,26 +100,26 @@
     <LinearLayout
         android:id="@+id/menuDesktopSite"
         android:layout_width="match_parent"
-        android:layout_height="40dp"
+        android:layout_height="48dp"
         android:orientation="horizontal"
         android:gravity="center_vertical"
-        android:paddingHorizontal="12dp"
+        android:paddingHorizontal="14dp"
         android:background="?attr/selectableItemBackground"
         android:clickable="true"
         android:focusable="true">
 
         <ImageView
             android:id="@+id/menuDesktopIcon"
-            android:layout_width="20dp"
-            android:layout_height="20dp"
-            android:layout_marginEnd="12dp" />
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="14dp" />
 
         <TextView
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="@string/custom_tab_desktop_site"
-            android:textAppearance="?attr/textAppearanceBodyMedium"
+            android:textAppearance="?attr/textAppearanceBodyLarge"
             android:textColor="?attr/colorOnSurface" />
 
         <com.google.android.material.materialswitch.MaterialSwitch
@@ -132,25 +132,25 @@
     <LinearLayout
         android:id="@+id/menuOpenInBrowser"
         android:layout_width="match_parent"
-        android:layout_height="40dp"
+        android:layout_height="48dp"
         android:orientation="horizontal"
         android:gravity="center_vertical"
-        android:paddingHorizontal="12dp"
+        android:paddingHorizontal="14dp"
         android:background="?attr/selectableItemBackground"
         android:clickable="true"
         android:focusable="true">
 
         <ImageView
             android:id="@+id/menuOpenInBrowserIcon"
-            android:layout_width="20dp"
-            android:layout_height="20dp"
-            android:layout_marginEnd="12dp" />
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="14dp" />
 
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/custom_tab_open_in_browser"
-            android:textAppearance="?attr/textAppearanceBodyMedium"
+            android:textAppearance="?attr/textAppearanceBodyLarge"
             android:textColor="?attr/colorOnSurface" />
     </LinearLayout>
 

packages/flutter_mozilla_components/android/src/main/res/layout/custom_tab_toolbar.xml

@@ -13,8 +13,8 @@
     <com.google.android.material.card.MaterialCardView
         android:id="@+id/toolbarCard"
         android:layout_width="match_parent"
-        android:layout_height="56dp"
-        app:cardCornerRadius="28dp"
+        android:layout_height="64dp"
+        app:cardCornerRadius="32dp"
         app:cardElevation="3dp"
         app:strokeWidth="0dp"
         app:cardBackgroundColor="?attr/colorSurface">
@@ -35,31 +35,50 @@
                 android:scaleType="center"
                 android:contentDescription="@string/mozac_feature_customtabs_exit_button" />
 
-            <!-- URL Section with Security Indicator -->
+            <!-- Leading security icon + title/hostname section -->
             <LinearLayout
                 android:layout_width="0dp"
                 android:layout_height="match_parent"
                 android:layout_weight="1"
                 android:orientation="horizontal"
                 android:gravity="center_vertical"
-                android:paddingHorizontal="8dp">
+                android:paddingHorizontal="8dp"
+                android:paddingVertical="6dp">
 
                 <ImageView
                     android:id="@+id/securityIcon"
                     android:layout_width="18dp"
                     android:layout_height="18dp"
-                    android:layout_marginEnd="6dp"
+                    android:layout_marginEnd="8dp"
                     android:contentDescription="@string/mozac_feature_customtabs_security_indicator" />
 
-                <TextView
-                    android:id="@+id/urlText"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:ellipsize="end"
-                    android:maxLines="1"
-                    android:textAppearance="?attr/textAppearanceBodyMedium"
-                    android:textColor="?attr/colorOnSurface"
-                    android:textSize="14sp" />
+                <LinearLayout
+                    android:layout_width="0dp"
+                    android:layout_height="match_parent"
+                    android:layout_weight="1"
+                    android:orientation="vertical"
+                    android:gravity="center_vertical">
+
+                    <TextView
+                        android:id="@+id/titleText"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:ellipsize="end"
+                        android:maxLines="1"
+                        android:textAppearance="?attr/textAppearanceBodyMedium"
+                        android:textColor="?attr/colorOnSurface"
+                        android:textSize="14sp" />
+
+                    <TextView
+                        android:id="@+id/urlText"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:ellipsize="end"
+                        android:maxLines="1"
+                        android:textAppearance="?attr/textAppearanceBodySmall"
+                        android:textColor="?attr/colorOnSurface"
+                        android:textSize="12sp" />
+                </LinearLayout>
             </LinearLayout>
 
             <!-- Action Buttons -->
@@ -76,7 +95,8 @@
                 android:layout_width="40dp"
                 android:layout_height="40dp"
                 android:background="?attr/selectableItemBackgroundBorderless"
-                android:scaleType="center"
+                android:padding="8dp"
+                android:scaleType="centerInside"
                 android:contentDescription="@string/custom_tab_open_in_browser" />
 
             <ImageButton