Update keyboard accessory style to match specs (part 2)

Changes in this CL:
- added a drop shadow
- added a divider at the top of the accessory sheet
- centered text for accessory options (e.g. Manage passwords...)

Bug: 856180, 887258
Change-Id: I7b71670ef551d8d5f86501ba47011ae590323676
Reviewed-on: https://chromium-review.googlesource.com/1225803
Commit-Queue: Ioana Pandele <ioanap@chromium.org>
Reviewed-by: Friedrich Horschig [CEST] <fhorschig@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Reviewed-by: Vasilii Sukhanov <vasilii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#592727}

chrome/android/java/res/layout/keyboard_accessory.xml

@@ -6,31 +6,47 @@
 <org.chromium.chrome.browser.autofill.keyboard_accessory.KeyboardAccessoryView
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/keyboard_accessory"
     android:layout_gravity="start|bottom"
-    android:background="@color/modern_grey_100"
     android:contentDescription="@string/autofill_keyboard_accessory_content_description"
-    android:fillViewport="true"
     android:scrollbars="none"
     android:visibility="gone"
-    android:orientation="horizontal"
-    android:layout_height="@dimen/keyboard_accessory_height"
+    android:orientation="vertical"
+    android:layout_height="@dimen/keyboard_accessory_height_with_shadow"
     android:layout_width="match_parent"
     android:paddingEnd="0dp"
     android:clickable="true"
     android:focusable="true">
 
-    <android.support.design.widget.TabLayout
-        android:id="@+id/tabs"
-        app:tabIndicatorHeight="0dp"
-        android:layout_width="wrap_content"
-        android:layout_height="match_parent"/>
+     <ImageView
+        android:id="@+id/accessory_shadow"
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/keyboard_accessory_shadow"
+        android:src="@drawable/modern_toolbar_shadow"
+        android:scaleType="fitXY"
+        android:scaleY="-1"
+        tools:ignore="ContentDescription" />
 
-    <View style="@style/VerticalDivider" />
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="@dimen/keyboard_accessory_height"
+        android:layout_gravity="start|bottom"
+        android:orientation="horizontal"
+        android:background="@color/modern_grey_100">
 
-    <android.support.v7.widget.RecyclerView
-        android:id="@+id/actions_view"
-        android:layout_width="wrap_content"
-        android:layout_height="match_parent"/>
+        <android.support.design.widget.TabLayout
+            android:id="@+id/tabs"
+            app:tabIndicatorHeight="0dp"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"/>
+
+        <View style="@style/VerticalDivider" />
+
+        <android.support.v7.widget.RecyclerView
+            android:id="@+id/actions_view"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"/>
+    </LinearLayout>
 
 </org.chromium.chrome.browser.autofill.keyboard_accessory.KeyboardAccessoryView>

chrome/android/java/res/layout/main.xml

@@ -31,7 +31,7 @@
             android:id="@+id/keyboard_accessory_stub"
             android:inflatedId="@+id/keyboard_accessory"
             android:layout="@layout/keyboard_accessory"
-            android:layout_height="@dimen/keyboard_accessory_height"
+            android:layout_height="@dimen/keyboard_accessory_height_with_shadow"
             android:layout_width="match_parent"
             android:layout_gravity="start|bottom"/>
 

chrome/android/java/res/layout/password_accessory_sheet_label.xml

@@ -5,12 +5,10 @@
 
 <TextView
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:paddingTop="8dp"
-    android:paddingBottom="8dp"
     android:paddingStart="16dp"
     android:paddingEnd="16dp"
     android:fillViewport="true"
-    android:gravity="center_vertical"
+    android:gravity="center_vertical|start"
     android:textAppearance="@style/BlackHint1"
     android:minHeight="48dp"
     android:layout_height="wrap_content"

chrome/android/java/res/layout/password_accessory_sheet_option.xml

@@ -5,12 +5,12 @@
 
 <TextView
     xmlns:android="http://schemas.android.com/apk/res/android"
-    android:paddingTop="8dp"
-    android:paddingBottom="8dp"
     android:paddingStart="16dp"
     android:paddingEnd="16dp"
     android:fillViewport="true"
-    android:layout_height="48dp"
+    android:minHeight="48dp"
+    android:gravity="center_vertical|start"
     android:textAppearance="@style/BlackTitle1"
+    android:layout_height="wrap_content"
     android:layout_width="match_parent"
-    android:background="?android:attr/selectableItemBackground"/>
\ No newline at end of file
+    android:background="?android:attr/selectableItemBackground"/>

chrome/android/java/res/layout/password_accessory_sheet_top_divider.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2018 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<View style="@style/HorizontalDivider"
+      xmlns:android="http://schemas.android.com/apk/res/android"
+      android:paddingBottom="8dp"/>
\ No newline at end of file

chrome/android/java/res/values/dimens.xml

@@ -128,7 +128,9 @@
     <dimen name="keyboard_accessory_action_padding">16dp</dimen>
     <dimen name="keyboard_accessory_half_padding">6dp</dimen>
     <dimen name="keyboard_accessory_height">48dp</dimen>
+    <dimen name="keyboard_accessory_height_with_shadow">50dp</dimen>
     <dimen name="keyboard_accessory_padding">6dp</dimen>
+    <dimen name="keyboard_accessory_shadow">2dp</dimen>
     <dimen name="keyboard_accessory_sheet_height">330dp</dimen>
     <dimen name="keyboard_accessory_suggestion_padding">16dp</dimen>
     <dimen name="keyboard_accessory_suggestion_height">48dp</dimen>

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/KeyboardAccessoryData.java

@@ -249,6 +249,14 @@ public class KeyboardAccessoryData {
             return new Item(ItemType.OPTION, caption, contentDescription, false, callback, null);
         }
 
+        /**
+         * Creates an Item of type {@link ItemType#TOP_DIVIDER}. A horizontal line meant to be
+         * displayed at the top of the accessory sheet.
+         */
+        public static Item createTopDivider() {
+            return new Item(ItemType.TOP_DIVIDER, null, null, false, null, null);
+        }
+
         /**
          * Creates a new item.
          * @param type Type of the item (e.g. non-clickable LABEL or clickable SUGGESTION).

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/PasswordAccessoryBridge.java

@@ -119,6 +119,9 @@ class PasswordAccessoryBridge {
                         nativeOnOptionSelected(mNativeView, item.getCaption());
                     });
                     continue;
+                case ItemType.TOP_DIVIDER:
+                    items[i] = Item.createTopDivider();
+                    continue;
             }
             assert false : "Cannot create item for type '" + type[i] + "'.";
         }

chrome/android/java/src/org/chromium/chrome/browser/autofill/keyboard_accessory/PasswordAccessorySheetViewBinder.java

@@ -61,6 +61,11 @@ class PasswordAccessorySheetViewBinder {
                             LayoutInflater.from(parent.getContext())
                                     .inflate(R.layout.password_accessory_sheet_option, parent,
                                             false));
+                case ItemType.TOP_DIVIDER:
+                    return new ItemViewHolder(
+                            LayoutInflater.from(parent.getContext())
+                                    .inflate(R.layout.password_accessory_sheet_top_divider, parent,
+                                            false));
             }
             assert false : viewType;
             return null;

chrome/browser/password_manager/password_accessory_controller.cc

@@ -376,6 +376,10 @@ std::vector<Item> PasswordAccessoryController::CreateViewItems(
   std::vector<Item> items;
   base::string16 passwords_title_str;
 
+  // Create a horizontal divider line before the title.
+  items.emplace_back(base::string16(), base::string16(), false,
+                     Item::Type::TOP_DIVIDER);
+
   // Create the title element
   passwords_title_str = l10n_util::GetStringFUTF16(
       suggestions.empty()

chrome/browser/password_manager/password_accessory_view_interface.h

@@ -41,6 +41,10 @@ class PasswordAccessoryViewInterface {
 
       // A single, usually static and interactive suggestion.
       OPTION = 5,  // e.g. the "Manage passwords..." link.
+
+      // A horizontal, non-interactive divider used to visually divide the
+      // accessory sheet from the accessory bar.
+      TOP_DIVIDER = 6,
     };
     // The |text| is caption of the item and what will be filled if selected.
     base::string16 text;