Card unmasking prompt - crossfade progress overlay

also, only cover the controls and not the instructions
also various tweaks to colors and font sizes and layout as per latest mocks.

BUG=none

Review URL: https://codereview.chromium.org/1008233004

Cr-Commit-Position: refs/heads/master@{#322081}

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

@@ -10,26 +10,27 @@
     android:layout_height="wrap_content">
 
     <LinearLayout
-        android:id="@+id/main_contents"
+        android:id="@+id/instructions_container"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginBottom="16dp"
+        android:layout_alignStart="@+id/controls_container"
+        android:layout_alignEnd="@+id/controls_container"
         android:orientation="vertical">
 
         <TextView
             android:id="@+id/no_retry_error_message"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="23dp"
-            android:layout_marginBottom="2dp"
+            android:layout_marginTop="12dp"
+            android:layout_marginBottom="4dp"
             android:paddingStart="24dp"
             android:paddingEnd="24dp"
             android:paddingTop="12dp"
             android:paddingBottom="15dp"
             android:gravity="start"
             android:textSize="12sp"
-            android:textColor="@color/input_underline_error_color"
-            android:background="#e0e0e0"
+            android:textColor="@android:color/white"
+            android:background="@color/input_underline_error_color"
             android:visibility="gone" />
 
         <TextView
@@ -39,11 +40,20 @@
             android:layout_marginStart="24dp"
             android:layout_marginEnd="10dp"
             android:layout_marginBottom="8dp"
-            android:layout_marginTop="16dp"
-            android:textSize="16sp"
+            android:layout_marginTop="12dp"
+            android:textSize="12sp"
             android:textColor="@color/explanation_text_color"
             android:lineSpacingMultiplier="1.25"
             android:gravity="start" />
+    </LinearLayout>
+
+    <LinearLayout
+        android:id="@+id/controls_container"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_below="@id/instructions_container"
+        android:layout_marginBottom="16dp"
+        android:orientation="vertical">
 
         <LinearLayout
             android:layout_width="match_parent"
@@ -143,7 +153,7 @@
                 android:layout_marginStart="17dp"
                 android:layout_marginEnd="10dp"
                 android:paddingStart="7dp"
-                android:textSize="14sp"
+                android:textSize="12sp"
                 android:textColor="@color/explanation_text_color"
                 android:text="@string/autofill_card_unmask_prompt_storage_checkbox" />
 
@@ -154,20 +164,19 @@
         android:id="@+id/verification_overlay"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignTop="@+id/main_contents"
-        android:layout_alignBottom="@+id/main_contents"
-        android:layout_alignStart="@+id/main_contents"
-        android:layout_alignEnd="@+id/main_contents"
-        android:orientation="vertical"
+        android:layout_alignTop="@+id/controls_container"
+        android:layout_alignBottom="@+id/controls_container"
+        android:layout_alignStart="@+id/controls_container"
+        android:layout_alignEnd="@+id/controls_container"
+        android:orientation="horizontal"
         android:gravity="center"
         android:visibility="gone">
 
         <ProgressBar
             android:id="@+id/verification_progress_bar"
-            android:layout_width="36dp"
-            android:layout_height="36dp"
-            android:layout_marginBottom="8dp"
-            android:layout_marginTop="30dp"
+            android:layout_width="16dp"
+            android:layout_height="16dp"
+            style="@android:style/Widget.Material.Light.ProgressBar.Small"
             android:visibility="gone" />
 
         <!--  TODO(estade): add a real content description for this image. -->
@@ -183,7 +192,8 @@
             android:id="@+id/verification_message"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginStart="8dp"
             android:textColor="?attr/colorAccent"
-            android:textSize="20sp" />
+            android:textSize="12sp" />
     </LinearLayout>
 </RelativeLayout>

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

@@ -10,7 +10,7 @@
     <color name="light_normal_color">#5A5A5A</color>
     <color name="light_active_color">#4285F4</color>
     <color name="input_underline_color">#e5e5e5</color>
-    <color name="input_underline_error_color">#db4437</color>
+    <color name="input_underline_error_color">#d32f2f</color>
     <color name="explanation_text_color">#909090</color>
 
     <!-- Infobar colors -->

chrome/android/java/src/org/chromium/chrome/browser/autofill/CardUnmaskPrompt.java

@@ -59,7 +59,7 @@ public class CardUnmaskPrompt
     private final CheckBox mStoreLocallyCheckbox;
     private final ImageView mStoreLocallyTooltipIcon;
     private PopupWindow mStoreLocallyTooltipPopup;
-    private final ViewGroup mMainContents;
+    private final ViewGroup mControlsContainer;
     private final View mVerificationOverlay;
     private final ProgressBar mVerificationProgressBar;
     private final TextView mVerificationView;
@@ -109,7 +109,7 @@ public class CardUnmaskPrompt
         mStoreLocallyCheckbox.setChecked(defaultToStoringLocally);
         mStoreLocallyTooltipIcon = (ImageView) v.findViewById(R.id.store_locally_tooltip_icon);
         mStoreLocallyTooltipIcon.setOnLongClickListener(this);
-        mMainContents = (ViewGroup) v.findViewById(R.id.main_contents);
+        mControlsContainer = (ViewGroup) v.findViewById(R.id.controls_container);
         mVerificationOverlay = v.findViewById(R.id.verification_overlay);
         mVerificationProgressBar = (ProgressBar) v.findViewById(R.id.verification_progress_bar);
         mVerificationView = (TextView) v.findViewById(R.id.verification_message);
@@ -295,12 +295,18 @@ public class CardUnmaskPrompt
      */
     private void setOverlayVisibility(int visibility) {
         mVerificationOverlay.setVisibility(visibility);
+        mControlsContainer.setAlpha(1f);
         boolean contentsShowing = visibility == View.GONE;
-        mMainContents.setAlpha(contentsShowing ? 1.0f : 0.15f);
-        ViewCompat.setImportantForAccessibility(mMainContents,
+        if (!contentsShowing) {
+            int durationMs = 250;
+            mVerificationOverlay.setAlpha(0f);
+            mVerificationOverlay.animate().alpha(1f).setDuration(durationMs);
+            mControlsContainer.animate().alpha(0f).setDuration(durationMs);
+        }
+        ViewCompat.setImportantForAccessibility(mControlsContainer,
                 contentsShowing ? View.IMPORTANT_FOR_ACCESSIBILITY_AUTO
                                 : View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS);
-        mMainContents.setDescendantFocusability(
+        mControlsContainer.setDescendantFocusability(
                 contentsShowing ? ViewGroup.FOCUS_BEFORE_DESCENDANTS
                                 : ViewGroup.FOCUS_BLOCK_DESCENDANTS);
     }