Android Autofill card unmasking prompt - Add tooltip

for store locally checkbox

BUG=464640

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

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

5 files changed, 97 insertions, 11 deletions

diff --git a/chrome/android/java/res/drawable/store_locally_tooltip_background.xml b/chrome/android/java/res/drawable/store_locally_tooltip_background.xml
new file mode 100644
index 0000000..612ecbe
--- /dev/null
+++ b/chrome/android/java/res/drawable/store_locally_tooltip_background.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Copyright 2014 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.
+-->
+
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="#e6000000" />
+    <corners android:radius="2dp" />
+</shape>
diff --git a/chrome/android/java/res/layout/autofill_card_unmask_prompt.xml b/chrome/android/java/res/layout/autofill_card_unmask_prompt.xml
index a0091b6..8840207 100644
--- a/chrome/android/java/res/layout/autofill_card_unmask_prompt.xml
+++ b/chrome/android/java/res/layout/autofill_card_unmask_prompt.xml
@@ -116,17 +116,38 @@
             android:textColor="@color/input_underline_error_color"
             android:visibility="gone" />
 
-        <CheckBox
-            android:id="@+id/store_locally_checkbox"
+        <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginStart="17dp"
-            android:layout_marginEnd="10dp"
-            android:layout_marginTop="16dp"
-            android:paddingStart="7dp"
-            android:textSize="14sp"
-            android:textColor="@color/explanation_text_color"
-            android:text="@string/autofill_card_unmask_prompt_storage_checkbox" />
+            android:layout_marginTop="16dp">
+
+            <!-- TODO(estade): Content description? -->
+            <ImageView
+                android:id="@+id/store_locally_tooltip_icon"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="12dp"
+                android:layout_alignParentEnd="true"
+                android:layout_centerVertical="true"
+                android:padding="12dp"
+                android:src="@drawable/help_outline"
+                android:contentDescription="@null" />
+
+           <CheckBox
+                android:id="@+id/store_locally_checkbox"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_alignParentStart="true"
+                android:layout_toStartOf="@id/store_locally_tooltip_icon"
+                android:layout_centerVertical="true"
+                android:layout_marginStart="17dp"
+                android:layout_marginEnd="10dp"
+                android:paddingStart="7dp"
+                android:textSize="14sp"
+                android:textColor="@color/explanation_text_color"
+                android:text="@string/autofill_card_unmask_prompt_storage_checkbox" />
+
+        </RelativeLayout>
     </LinearLayout>
 
     <LinearLayout
diff --git a/chrome/android/java/res/values/dimens.xml b/chrome/android/java/res/values/dimens.xml
index 4f214e5..5da14ea 100644
--- a/chrome/android/java/res/values/dimens.xml
+++ b/chrome/android/java/res/values/dimens.xml
@@ -119,4 +119,8 @@
 
     <!-- Sign-in promo dimensions -->
     <dimen name="sign_in_promo_padding_bottom">16dp</dimen>
+
+    <!-- Autofill card unmasking prompt dimensions -->
+    <dimen name="autofill_card_unmask_tooltip_horizontal_padding">16dp</dimen>
+    <dimen name="autofill_card_unmask_tooltip_vertical_padding">4dp</dimen>
 </resources>
diff --git a/chrome/android/java/src/org/chromium/chrome/browser/autofill/CardUnmaskPrompt.java b/chrome/android/java/src/org/chromium/chrome/browser/autofill/CardUnmaskPrompt.java
index 2ee417e..efa0fb4 100644
--- a/chrome/android/java/src/org/chromium/chrome/browser/autofill/CardUnmaskPrompt.java
+++ b/chrome/android/java/src/org/chromium/chrome/browser/autofill/CardUnmaskPrompt.java
@@ -7,23 +7,30 @@ package org.chromium.chrome.browser.autofill;
 import android.app.AlertDialog;
 import android.content.Context;
 import android.content.DialogInterface;
+import android.content.res.Resources;
+import android.graphics.Color;
 import android.graphics.ColorFilter;
 import android.graphics.PorterDuff;
 import android.graphics.PorterDuffColorFilter;
 import android.os.Build;
 import android.os.Handler;
+import android.support.v4.view.MarginLayoutParamsCompat;
 import android.support.v4.view.ViewCompat;
 import android.text.Editable;
 import android.text.TextWatcher;
 import android.view.LayoutInflater;
 import android.view.View;
+import android.view.View.OnLongClickListener;
 import android.view.ViewGroup;
+import android.view.ViewGroup.LayoutParams;
 import android.view.inputmethod.InputMethodManager;
 import android.widget.Button;
 import android.widget.CheckBox;
 import android.widget.EditText;
 import android.widget.ImageView;
+import android.widget.PopupWindow;
 import android.widget.ProgressBar;
+import android.widget.RelativeLayout;
 import android.widget.TextView;
 
 import org.chromium.chrome.R;
@@ -33,12 +40,14 @@ import java.util.Calendar;
 /**
  * A prompt that bugs users to enter their CVC when unmasking a Wallet instrument (credit card).
  */
-public class CardUnmaskPrompt implements DialogInterface.OnDismissListener, TextWatcher {
+public class CardUnmaskPrompt
+        implements DialogInterface.OnDismissListener, TextWatcher, OnLongClickListener {
     private final CardUnmaskPromptDelegate mDelegate;
     private final AlertDialog mDialog;
     private final boolean mShouldRequestExpirationDate;
     private final int mThisYear;
 
+    private final View mMainView;
     private final TextView mNoRetryErrorMessage;
     private final EditText mCardUnmaskInput;
     private final EditText mMonthInput;
@@ -46,6 +55,8 @@ public class CardUnmaskPrompt implements DialogInterface.OnDismissListener, Text
     private final View mExpirationContainer;
     private final TextView mErrorMessage;
     private final CheckBox mStoreLocallyCheckbox;
+    private final ImageView mStoreLocallyTooltipIcon;
+    private PopupWindow mStoreLocallyTooltipPopup;
     private final ViewGroup mMainContents;
     private final View mVerificationOverlay;
     private final ProgressBar mVerificationProgressBar;
@@ -85,6 +96,7 @@ public class CardUnmaskPrompt implements DialogInterface.OnDismissListener, Text
         View v = inflater.inflate(R.layout.autofill_card_unmask_prompt, null);
         ((TextView) v.findViewById(R.id.instructions)).setText(instructions);
 
+        mMainView = v;
         mNoRetryErrorMessage = (TextView) v.findViewById(R.id.no_retry_error_message);
         mCardUnmaskInput = (EditText) v.findViewById(R.id.card_unmask_input);
         mMonthInput = (EditText) v.findViewById(R.id.expiration_month);
@@ -93,6 +105,8 @@ public class CardUnmaskPrompt implements DialogInterface.OnDismissListener, Text
         mErrorMessage = (TextView) v.findViewById(R.id.error_message);
         mStoreLocallyCheckbox = (CheckBox) v.findViewById(R.id.store_locally_checkbox);
         mStoreLocallyCheckbox.setChecked(defaultToStoringLocally);
+        mStoreLocallyTooltipIcon = (ImageView) v.findViewById(R.id.store_locally_tooltip_icon);
+        mStoreLocallyTooltipIcon.setOnLongClickListener(this);
         mMainContents = (ViewGroup) v.findViewById(R.id.main_contents);
         mVerificationOverlay = v.findViewById(R.id.verification_overlay);
         mVerificationProgressBar = (ProgressBar) v.findViewById(R.id.verification_progress_bar);
@@ -201,6 +215,41 @@ public class CardUnmaskPrompt implements DialogInterface.OnDismissListener, Text
     @Override
     public void onTextChanged(CharSequence s, int start, int before, int count) {}
 
+    @Override
+    public boolean onLongClick(View v) {
+        assert v == mStoreLocallyTooltipIcon;
+        if (mStoreLocallyTooltipPopup == null) {
+            mStoreLocallyTooltipPopup = new PopupWindow(mDialog.getContext());
+            TextView text = new TextView(mDialog.getContext());
+            text.setText(R.string.autofill_card_unmask_prompt_storage_tooltip);
+            // Width is the dialog's width less the margins and padding around the checkbox and
+            // icon.
+            text.setWidth(mMainView.getWidth() - ViewCompat.getPaddingStart(mStoreLocallyCheckbox)
+                    - ViewCompat.getPaddingEnd(mStoreLocallyTooltipIcon)
+                    - MarginLayoutParamsCompat.getMarginStart((RelativeLayout.LayoutParams)
+                            mStoreLocallyCheckbox.getLayoutParams())
+                    - MarginLayoutParamsCompat.getMarginEnd((RelativeLayout.LayoutParams)
+                            mStoreLocallyTooltipIcon.getLayoutParams()));
+            text.setTextColor(Color.WHITE);
+            Resources resources = mDialog.getContext().getResources();
+            int hPadding = resources.getDimensionPixelSize(
+                    R.dimen.autofill_card_unmask_tooltip_horizontal_padding);
+            int vPadding = resources.getDimensionPixelSize(
+                    R.dimen.autofill_card_unmask_tooltip_vertical_padding);
+            text.setPadding(hPadding, vPadding, hPadding, vPadding);
+
+            mStoreLocallyTooltipPopup.setContentView(text);
+            mStoreLocallyTooltipPopup.setWindowLayoutMode(
+                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
+            mStoreLocallyTooltipPopup.setOutsideTouchable(true);
+            mStoreLocallyTooltipPopup.setBackgroundDrawable(
+                    resources.getDrawable(R.drawable.store_locally_tooltip_background));
+        }
+        mStoreLocallyTooltipPopup.showAsDropDown(mStoreLocallyCheckbox,
+                ViewCompat.getPaddingStart(mStoreLocallyCheckbox), 0);
+        return true;
+    }
+
     private void setInitialFocus() {
         InputMethodManager imm = (InputMethodManager) mDialog.getContext().getSystemService(
                 Context.INPUT_METHOD_SERVICE);
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index 70d6999..1ff0038 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -11210,7 +11210,7 @@ Chrome ran out of memory.
       <message name="IDS_AUTOFILL_CARD_UNMASK_PROMPT_STORAGE_CHECKBOX" desc="Text for checkbox in card unmasking dialog that allows user to store a Wallet card on their local device. If checked, the dialog won't show up again for the given credit card." formatter_data="android_java">
         Don't ask again for this card
       </message>
-      <message name="IDS_AUTOFILL_CARD_UNMASK_PROMPT_STORAGE_TOOLTIP" desc="Text that provides further explanation for checkbox in card unmasking dialog that allows user to store a Wallet card on their local device.">
+      <message name="IDS_AUTOFILL_CARD_UNMASK_PROMPT_STORAGE_TOOLTIP" desc="Text that provides further explanation for checkbox in card unmasking dialog that allows user to store a Wallet card on their local device." formatter_data="android_java">
         If checked, Chrome will stash a copy of your card on this device for faster form filling.
       </message>
       <message name="IDS_AUTOFILL_CARD_UNMASK_CONFIRM_BUTTON" desc="Text for button that confirms the credit card CVC entry dialog." formatter_data="android_java">