[Payments] Use Autofill card assets for Payment Request

* Desktop and iOS will use Autofill assets
* Android keeps using the drawables (vector)
* MIR card now has a border (fixes Autofill asset)

BUG=722651
TEST=visually tested on desktop, iOS
TBR=blundell

Review-Url: https://codereview.chromium.org/2889453004
Cr-Commit-Position: refs/heads/master@{#472311}

chrome/browser/ui/views/payments/payment_request_views_util.cc

@@ -246,9 +246,6 @@ std::unique_ptr<views::ImageView> CreateInstrumentIconView(
                                .GetImageNamed(icon_resource_id)
                                .AsImageSkia());
   card_icon_view->SetTooltipText(tooltip_text);
-  card_icon_view->SetBorder(views::CreateRoundedRectBorder(
-      1, 3, card_icon_view->GetNativeTheme()->GetSystemColor(
-                ui::NativeTheme::kColorId_UnfocusedBorderColor)));
   return card_icon_view;
 }
 

components/autofill/core/browser/autofill_data_util.cc

@@ -25,6 +25,8 @@ namespace {
 // Mappings from Chrome card types to Payment Request API basic card payment
 // spec types and icons. Note that "generic" is not in the spec.
 // https://w3c.github.io/webpayments-methods-card/#method-id
+#if defined(OS_ANDROID)
+// On Android, use the PR-specific resource IDs.
 const PaymentRequestData kPaymentRequestData[]{
     {"americanExpressCC", "amex", IDR_AUTOFILL_PR_AMEX, IDS_AUTOFILL_CC_AMEX},
     {"dinersCC", "diners", IDR_AUTOFILL_PR_DINERS, IDS_AUTOFILL_CC_DINERS},
@@ -40,6 +42,24 @@ const PaymentRequestData kPaymentRequestData[]{
 };
 const PaymentRequestData kGenericPaymentRequestData = {
     "genericCC", "generic", IDR_AUTOFILL_PR_GENERIC, IDS_AUTOFILL_CC_GENERIC};
+#else  // !defined(OS_ANDROID)
+// On other platforms, use the Autofill resource IDs.
+const PaymentRequestData kPaymentRequestData[]{
+    {"americanExpressCC", "amex", IDR_AUTOFILL_CC_AMEX, IDS_AUTOFILL_CC_AMEX},
+    {"dinersCC", "diners", IDR_AUTOFILL_CC_DINERS, IDS_AUTOFILL_CC_DINERS},
+    {"discoverCC", "discover", IDR_AUTOFILL_CC_DISCOVER,
+     IDS_AUTOFILL_CC_DISCOVER},
+    {"jcbCC", "jcb", IDR_AUTOFILL_CC_JCB, IDS_AUTOFILL_CC_JCB},
+    {"masterCardCC", "mastercard", IDR_AUTOFILL_CC_MASTERCARD,
+     IDS_AUTOFILL_CC_MASTERCARD},
+    {"mirCC", "mir", IDR_AUTOFILL_CC_MIR, IDS_AUTOFILL_CC_MIR},
+    {"unionPayCC", "unionpay", IDR_AUTOFILL_CC_UNIONPAY,
+     IDS_AUTOFILL_CC_UNION_PAY},
+    {"visaCC", "visa", IDR_AUTOFILL_CC_VISA, IDS_AUTOFILL_CC_VISA},
+};
+const PaymentRequestData kGenericPaymentRequestData = {
+    "genericCC", "generic", IDR_AUTOFILL_CC_GENERIC, IDS_AUTOFILL_CC_GENERIC};
+#endif
 
 const char* const name_prefixes[] = {
     "1lt",     "1st", "2lt", "2nd",    "3rd",  "admiral", "capt",

components/resources/autofill_scaled_resources.grdp

@@ -21,16 +21,20 @@
     <structure type="chrome_scaled_image" name="IDR_AUTOFILL_HTTPS_INVALID_WARNING" file="autofill/cc-generic.png" />
   </if>
 
-  <!-- PaymentRequest image variants. -->
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_AMEX" file="autofill/pr_amex.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_DINERS" file="autofill/pr_dinersclub.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_DISCOVER" file="autofill/pr_discover.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_GENERIC" file="autofill/pr_generic.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_JCB" file="autofill/pr_jcb.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_MASTERCARD" file="autofill/pr_mc.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_MIR" file="autofill/pr_mir.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_UNIONPAY" file="autofill/pr_unionpay.png" />
-  <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_VISA" file="autofill/pr_visa.png" />
+   <!-- Payment Request image variants.
+        NOTE: These are placeholders; actual values are not used, since IDs are
+        mapped to drawables in resource_id.h -->
+  <if expr="is_android">
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_AMEX" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_DINERS" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_DISCOVER" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_GENERIC" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_JCB" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_MASTERCARD" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_MIR" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_UNIONPAY" file="autofill/cc-generic.png" />
+    <structure type="chrome_scaled_image" name="IDR_AUTOFILL_PR_VISA" file="autofill/cc-generic.png" />
+  </if>
 
   <structure type="chrome_scaled_image" name="IDR_CREDIT_CARD_CVC_HINT" file="autofill/credit_card_cvc_hint.png" />
   <structure type="chrome_scaled_image" name="IDR_CREDIT_CARD_CVC_HINT_AMEX" file="autofill/credit_card_cvc_hint_amex.png" />