Show the icon for the typed in credit card in editor |
||||||
Issue descriptionWhat steps will reproduce the problem? (1) Click "Buy" on https://rsolomakhin.github.io/pr/. (2) Click "Add card" "Payment" section of UI. (3) Type in "4111" for credit card number What is the expected output? A [VISA] icon should show up on the right side of the card number input when I type in "4111". (Other types of cards should show other icons.) What do you see instead? The icon does not show. Please use labels and text to provide additional information. Beware of the credit card scan icon that can be shown with chrome://flags#scan-cards-in-web-payments flag. The scan icon UX is still in development, which is why it's behind a flag. You can get the type of "4111" by calling PersonalDataManager.getInstance().getBasicCardPaymentTypeIfValid("4111"). That returns a string, like "visa". You can convert that to an icon drawable ID through CardEditor.mCardTypes.get("visa").icon; Attached is a mockup of where the [VISA] icon should be located when the [SCAN] icon is visible. Whatever subset of icons is showing, they should all be right-aligned.
,
Oct 19 2016
re:c#1 go/card-type-detected-png-folio Thanks!
,
Oct 20 2016
Hi Hwi@, I've re-implemented scan icon as part of this bug, please help check whether it matches the spec. We probably also need a string of description for accessibility since it represents an operation.
,
Oct 20 2016
I've been using "Scan credit card" string from Autofill for accessibility: https://cs.chromium.org/chromium/src/chrome/android/java/src/org/chromium/chrome/browser/payments/CardEditor.java?rcl=0&l=383
,
Oct 20 2016
Hi gogerald@, - I missed the icon color in the redline: #4285F4 Could you add? It's the same color value as DONE and PAY button color. - "Scan credit card" as A11y label SGTM Thanks!
,
Oct 20 2016
Hi hwi@ It seems this icon only been used in one place for one purpose, could we just change the asset color to avoid tint it programmatically, might be more efficient.
,
Oct 20 2016
re: c6 I think programmatic tinting is preferred for future color changes and potential use on other context (although neither is the case now).
,
Oct 24 2016
,
Oct 24 2016
👍
,
Oct 25 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c3da4b51497fca50ebed5e4adbec3f7ada68ceda commit c3da4b51497fca50ebed5e4adbec3f7ada68ceda Author: gogerald <gogerald@chromium.org> Date: Tue Oct 25 01:37:21 2016 Float card scanner icon at the end of EditText instead of compound drawable This gives better user experience since compound drawable do not support click event. BUG= 657178 , 640430 Review-Url: https://codereview.chromium.org/2434383002 Cr-Commit-Position: refs/heads/master@{#427222} [modify] https://crrev.com/c3da4b51497fca50ebed5e4adbec3f7ada68ceda/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/c3da4b51497fca50ebed5e4adbec3f7ada68ceda/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorTextField.java
,
Oct 25 2016
If you give me the card border 🐭 🍪 =), I ask that border for all others in "Card accepted". Is it something you can add together as part of this code or should it be a different crbug?
,
Oct 26 2016
,
Oct 26 2016
Got it, I will do it separately and remove card border for now.
,
Oct 26 2016
hwi@: Are you dead set on that fractional dp? It will make things blurry and scale poorly on different devices.
,
Oct 27 2016
dfalcantara@ - I was crazy on this redline. Probably I wouldn't put the exact width in the code, but just height only. The screenshot on crbug.com/657952#c4 by gogerald@ looks fine to me.
,
Oct 28 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/6d062f24e1ede7485051d12eea9909f24c453362 commit 6d062f24e1ede7485051d12eea9909f24c453362 Author: gogerald <gogerald@chromium.org> Date: Fri Oct 28 02:17:03 2016 Increase spacing for payment request credit card and address editors This CL also adds cards icon border and changes the cardEditor title. BUG= 657178 , 657952 Review-Url: https://codereview.chromium.org/2450113003 Cr-Commit-Position: refs/heads/master@{#428247} [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/res/layout/payment_request_editor.xml [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/res/layout/payment_request_editor_dropdown.xml [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/res/layout/payment_request_editor_icons.xml [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/src/org/chromium/chrome/browser/payments/CardEditor.java [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorIconsField.java [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/SectionInformation.java [modify] https://crrev.com/6d062f24e1ede7485051d12eea9909f24c453362/chrome/android/java/strings/android_chrome_strings.grd
,
Oct 28 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/7f1a60f6847ee8063df797738a37b9ab299026d5 commit 7f1a60f6847ee8063df797738a37b9ab299026d5 Author: gogerald <gogerald@chromium.org> Date: Fri Oct 28 14:03:52 2016 Show the icon for the typed in credit card in editor BUG= 657178 Review-Url: https://codereview.chromium.org/2442933003 Cr-Commit-Position: refs/heads/master@{#428359} [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/src/org/chromium/chrome/browser/autofill/PersonalDataManager.java [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/src/org/chromium/chrome/browser/payments/AddressEditor.java [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/src/org/chromium/chrome/browser/payments/CardEditor.java [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/src/org/chromium/chrome/browser/payments/ContactEditor.java [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorFieldModel.java [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorTextField.java [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/browser/autofill/android/personal_data_manager_android.cc [modify] https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5/chrome/browser/autofill/android/personal_data_manager_android.h
,
Oct 28 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/a5177deb35cba34c1f167062584c633688a873cc commit a5177deb35cba34c1f167062584c633688a873cc Author: xidachen <xidachen@chromium.org> Date: Fri Oct 28 17:40:39 2016 Revert of [Payments] Show the icon for the typed in credit card in editor (patchset #4 id:240001 of https://codereview.chromium.org/2442933003/ ) Reason for revert: Cause test failure: https://uberchromegw.corp.google.com/i/chromium.linux/builders/Android%20Tests%20%28dbg%29/builds/36746 Original issue's description: > Show the icon for the typed in credit card in editor > > BUG= 657178 > > Committed: https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5 > Cr-Commit-Position: refs/heads/master@{#428359} TBR=rouslan@chromium.org,mathp@chromium.org,dfalcantara@chromium.org,gogerald@chromium.org # Skipping CQ checks because original CL landed less than 1 days ago. NOPRESUBMIT=true NOTREECHECKS=true NOTRY=true BUG= 657178 Review-Url: https://codereview.chromium.org/2456053007 Cr-Commit-Position: refs/heads/master@{#428411} [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/src/org/chromium/chrome/browser/autofill/PersonalDataManager.java [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/src/org/chromium/chrome/browser/payments/AddressEditor.java [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/src/org/chromium/chrome/browser/payments/CardEditor.java [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/src/org/chromium/chrome/browser/payments/ContactEditor.java [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorFieldModel.java [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorTextField.java [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/browser/autofill/android/personal_data_manager_android.cc [modify] https://crrev.com/a5177deb35cba34c1f167062584c633688a873cc/chrome/browser/autofill/android/personal_data_manager_android.h
,
Oct 28 2016
FYI, here's how to run the integration tests locally:
ninja -Cout/and \
chrome_public_apk_incremental \
chrome_public_test_apk_incremental \
&& out/and/bin/run_chrome_public_test_apk_incremental \
-vvv -f "org.chromium.chrome.browser.payments.*"
,
Oct 28 2016
From https://uberchromegw.corp.google.com/i/chromium.linux/builders/Android%20Tests%20%28dbg%29/builds/36746/steps/chrome_public_test_apk%3A%20generate%20result%20details/logs/result_details java.lang.RuntimeException: Exception occured while waiting for runnable at org.chromium.base.ThreadUtils.runOnUiThreadBlocking(ThreadUtils.java:74) at org.chromium.chrome.browser.payments.PaymentRequestContactDetailsTest.testQuickAddContactAndCloseShouldNotCrash(PaymentRequestContactDetailsTest.java:96) at java.lang.reflect.Method.invokeNative(Native Method) at android.test.InstrumentationTestCase.runMethod(InstrumentationTestCase.java:214) at android.test.InstrumentationTestCase.runTest(InstrumentationTestCase.java:199) at android.test.ActivityInstrumentationTestCase2.runTest(ActivityInstrumentationTestCase2.java:192) at org.chromium.chrome.test.ChromeActivityTestCaseBase.runTest(ChromeActivityTestCaseBase.java:726) at org.chromium.base.test.BaseTestResult.runParameterized(BaseTestResult.java:161) at org.chromium.base.test.BaseTestResult.run(BaseTestResult.java:124) at android.test.AndroidTestRunner.runTest(AndroidTestRunner.java:191) at android.test.AndroidTestRunner.runTest(AndroidTestRunner.java:176) at android.test.InstrumentationTestRunner.onStart(InstrumentationTestRunner.java:554) at android.app.Instrumentation$InstrumentationThread.run(Instrumentation.java:1701) Caused by: java.util.concurrent.ExecutionException: java.lang.AssertionError at java.util.concurrent.FutureTask.report(FutureTask.java:93) at java.util.concurrent.FutureTask.get(FutureTask.java:163) at org.chromium.base.ThreadUtils.runOnUiThreadBlocking(ThreadUtils.java:72) ... 18 more Caused by: java.lang.AssertionError at org.chromium.chrome.browser.payments.ui.EditorFieldModel.getValueIconGenerator(EditorFieldModel.java:323) at org.chromium.chrome.browser.payments.ui.EditorTextField.<init>(EditorTextField.java:88) at org.chromium.chrome.browser.payments.ui.EditorView.addFieldViewToEditor(EditorView.java:378) at org.chromium.chrome.browser.payments.ui.EditorView.prepareEditor(EditorView.java:305) at org.chromium.chrome.browser.payments.ui.EditorView.show(EditorView.java:416) at org.chromium.chrome.browser.payments.ContactEditor.edit(ContactEditor.java:173) at org.chromium.chrome.browser.payments.PaymentRequestImpl.editContact(PaymentRequestImpl.java:862) at org.chromium.chrome.browser.payments.PaymentRequestImpl.onSectionAddOption(PaymentRequestImpl.java:819) at org.chromium.chrome.browser.payments.ui.PaymentRequestUI.onAddPaymentOption(PaymentRequestUI.java:689) at org.chromium.chrome.browser.payments.ui.PaymentRequestSection$OptionSection.handleClick(PaymentRequestSection.java:933) at org.chromium.chrome.browser.payments.ui.PaymentRequestSection.onClick(PaymentRequestSection.java:205) at android.view.View.performClick(View.java:4438) at org.chromium.chrome.browser.payments.PaymentRequestContactDetailsTest$1.run(PaymentRequestContactDetailsTest.java:99) at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:422) at java.util.concurrent.FutureTask.run(FutureTask.java:237) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:136) at android.app.ActivityThread.main(ActivityThread.java:5001) at java.lang.reflect.Method.invokeNative(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:785) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:601) at dalvik.system.NativeStart.main(Native Method)
,
Oct 31 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/fdf42fb9c2987cd86ac15e5963af0ad0f0153456 commit fdf42fb9c2987cd86ac15e5963af0ad0f0153456 Author: gogerald <gogerald@chromium.org> Date: Mon Oct 31 20:43:06 2016 Show the icon for the typed in credit card in editor BUG= 657178 Committed: https://crrev.com/7f1a60f6847ee8063df797738a37b9ab299026d5 Review-Url: https://codereview.chromium.org/2442933003 Cr-Original-Commit-Position: refs/heads/master@{#428359} Cr-Commit-Position: refs/heads/master@{#428797} [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/src/org/chromium/chrome/browser/autofill/PersonalDataManager.java [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/src/org/chromium/chrome/browser/payments/AddressEditor.java [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/src/org/chromium/chrome/browser/payments/CardEditor.java [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/src/org/chromium/chrome/browser/payments/ContactEditor.java [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorFieldModel.java [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorTextField.java [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/browser/autofill/android/personal_data_manager_android.cc [modify] https://crrev.com/fdf42fb9c2987cd86ac15e5963af0ad0f0153456/chrome/browser/autofill/android/personal_data_manager_android.h
,
Nov 1 2016
Verified in 56.0.2906.0 build
,
Nov 1 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/ce76404e0039ea48174770ecfc09e356aed8bd1b commit ce76404e0039ea48174770ecfc09e356aed8bd1b Author: Rouslan Solomakhin <rouslan@chromium.org> Date: Tue Nov 01 22:01:12 2016 [Merge M-55] Float card scanner icon at the end of EditText instead of compound drawable This gives better user experience since compound drawable do not support click event. BUG= 657178 , 640430 Review-Url: https://codereview.chromium.org/2434383002 Cr-Commit-Position: refs/heads/master@{#427222} (cherry picked from commit c3da4b51497fca50ebed5e4adbec3f7ada68ceda) Review URL: https://codereview.chromium.org/2474493002 . Cr-Commit-Position: refs/branch-heads/2883@{#410} Cr-Branched-From: 614d31daee2f61b0180df403a8ad43f20b9f6dd7-refs/heads/master@{#423768} [modify] https://crrev.com/ce76404e0039ea48174770ecfc09e356aed8bd1b/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/ce76404e0039ea48174770ecfc09e356aed8bd1b/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorTextField.java
,
Nov 1 2016
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/f3d44f7512a3002ebd2583e585e3a13a4e5b0011 commit f3d44f7512a3002ebd2583e585e3a13a4e5b0011 Author: Rouslan Solomakhin <rouslan@chromium.org> Date: Tue Nov 01 22:25:39 2016 [Merge M-55] Increase spacing for payment request credit card and address editors This CL also adds cards icon border and changes the cardEditor title. BUG= 657178 , 657952 Review-Url: https://codereview.chromium.org/2450113003 Cr-Commit-Position: refs/heads/master@{#428247} (cherry picked from commit 6d062f24e1ede7485051d12eea9909f24c453362) Review URL: https://codereview.chromium.org/2463293005 . Cr-Commit-Position: refs/branch-heads/2883@{#412} Cr-Branched-From: 614d31daee2f61b0180df403a8ad43f20b9f6dd7-refs/heads/master@{#423768} [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/res/layout/payment_request_editor.xml [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/res/layout/payment_request_editor_dropdown.xml [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/res/layout/payment_request_editor_icons.xml [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/res/layout/payments_request_editor_textview.xml [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/src/org/chromium/chrome/browser/payments/CardEditor.java [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/EditorIconsField.java [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/src/org/chromium/chrome/browser/payments/ui/SectionInformation.java [modify] https://crrev.com/f3d44f7512a3002ebd2583e585e3a13a4e5b0011/chrome/android/java/strings/android_chrome_strings.grd
,
Nov 1 2016
,
Nov 2 2016
This issue is still reproducible on latest M55-55.0.2883.36, hence reopening.
,
Nov 18 2016
,
Jun 27 2017
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by gogerald@chromium.org
, Oct 19 2016