1480886 - Position the form fields for the address-form and basic-card-form according to the spec

Status: VERIFIED FIXED

(Firefox :: WebPayments UI, enhancement, P1)

Description

[Jared Wein [:jaws] (please needinfo? me)]

The current layout of the form fields is a bit squished together and doesn't fit the grid-based layout that the spec has.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1480886 - Position the form fields for the address-form and basic-card-form according to the spec. r?MattN

Comment 2

[Matthew N. [:MattN]]

Attachment: Bug 1480886 - Move the autofill country warning message out of the <form>. r=sfoster

Comment 3

[Matthew N. [:MattN]]

Attachment: Bug 1480886 - Position the form fields for the address-form and basic-card-form according to the spec. r=sfoster

Based on work by Jared Wein.

A follow-up will handle the persist checkbox and billing address.

Depends on D4164

Comment 4

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 9003632 [details]
Bug 1480886 - Move the autofill country warning message out of the <form>. r=sfoster

Sam Foster [:sfoster] has approved the revision.

Comment 5

[Sam Foster [:sfoster] (he/him)]

Comment on attachment 9003659 [details]
Bug 1480886 - Position the form fields for the address-form and basic-card-form according to the spec. r=sfoster

Sam Foster [:sfoster] has approved the revision.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/63b68934f813
Move the autofill country warning message out of the <form>. r=sfoster
https://hg.mozilla.org/integration/mozilla-inbound/rev/55f933e0609f
Position the form fields for the address-form and basic-card-form according to the spec. r=sfoster

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c066358cf6fc
Follow-up to disable the cc-type field. r=MattN

Comment 8

[Dorel Luca [:dluca]]

Backed out 2 changesets (bug 1480886) for browser-chrome failures on browser/extensions/formautofill/test/browser/browser_editAddressDialog.js. CLOSED TREE

Log:
https://treeherder.mozilla.org/logviewer.html#?job_id=196303118&repo=mozilla-inbound&lineNumber=15249

TEST-PASS | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check family-name - 
14:44:32     INFO - Buffered messages finished
14:44:32     INFO - TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check organization - Got 02139, expected World Wide Web Consortium
14:44:32     INFO - Stack trace:
14:44:32     INFO - chrome://mochikit/content/browser-test.js:test_is:1304
14:44:32     INFO - chrome://mochitests/content/browser/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js:test_saveAddress:91
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1102
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1093
14:44:32     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:995
14:44:32     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
14:44:32     INFO - Not taking screenshot here: see the one that was previously logged
14:44:32     INFO - TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check street-address - Got World Wide Web Consortium, expected 32 Vassar Street
14:44:32     INFO - MIT Room 32-G524
14:44:32     INFO - Stack trace:
14:44:32     INFO - chrome://mochikit/content/browser-test.js:test_is:1304
14:44:32     INFO - chrome://mochitests/content/browser/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js:test_saveAddress:91
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1102
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1093
14:44:32     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:995
14:44:32     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
14:44:32     INFO - Not taking screenshot here: see the one that was previously logged
14:44:32     INFO - TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check address-level2 - Got 32 Vassar StreetMIT Room 32-G524, expected Cambridge
14:44:32     INFO - Stack trace:
14:44:32     INFO - chrome://mochikit/content/browser-test.js:test_is:1304
14:44:32     INFO - chrome://mochitests/content/browser/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js:test_saveAddress:91
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1102
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1093
14:44:32     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:995
14:44:32     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
14:44:32     INFO - Not taking screenshot here: see the one that was previously logged
14:44:32     INFO - TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check address-level1 - Got Cambridge, expected MA
14:44:32     INFO - Stack trace:
14:44:32     INFO - chrome://mochikit/content/browser-test.js:test_is:1304
14:44:32     INFO - chrome://mochitests/content/browser/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js:test_saveAddress:91
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1102
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1093
14:44:32     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:995
14:44:32     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
14:44:32     INFO - Not taking screenshot here: see the one that was previously logged
14:44:32     INFO - TEST-UNEXPECTED-FAIL | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check postal-code - Got MA, expected 02139
14:44:32     INFO - Stack trace:
14:44:32     INFO - chrome://mochikit/content/browser-test.js:test_is:1304
14:44:32     INFO - chrome://mochitests/content/browser/browser/extensions/formautofill/test/browser/browser_editAddressDialog.js:test_saveAddress:91
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest/<:1102
14:44:32     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1093
14:44:32     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:995
14:44:32     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/waitForFocusInner/focusedOrLoaded/<:795
14:44:32     INFO - TEST-PASS | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check country - 
14:44:32     INFO - TEST-PASS | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check tel - 
14:44:32     INFO - TEST-PASS | browser/extensions/formautofill/test/browser/browser_editAddressDialog.js | check email - 
14:44:32     INFO - Leaving test bound test_saveAddress
14:44:32     INFO - Entering test bound test_editAddress
14:44:32     INFO - expecting record retrievals: addresses
14:44:32     INFO - GECKO(960) | ++DOCSHELL 0x11dd35000 == 17 [pid = 960] [id = {9ff79517-19a2-394e-94f1-9c10b81f9023}]
14:44:32     INFO - GECKO(960) | ++DOMWINDOW == 34 (0x100864000) [pid = 960] [serial = 44] [outer = 0x0]
14:44:32     INFO - GECKO(960) | ++DOMWINDOW == 35 (0x122fbb000) [pid = 960] [serial = 45] [outer = 0x100864000]
14:44:32     INFO - must wait for load
14:44:32     INFO - must wait for focus

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=mozilla-inbound&revision=55f933e0609f69d6518de5d98ede9d46c73b42fc

Backout:

https://hg.mozilla.org/integration/mozilla-inbound/rev/15a4fb0d9e809a6e4254b394d6eab3bd8163d625

Comment 9

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/23f2da29b443
Backed out changeset c066358cf6fc for Browser-chrome failures on  browser/extensions/formautofill/test/browser/browser_editAddressDialog.js. CLOSED TREE

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/690f56519829
Move the autofill country warning message out of the <form>. r=sfoster
https://hg.mozilla.org/integration/mozilla-inbound/rev/ba1272b8b639
Position the form fields for the address-form and basic-card-form according to the spec. r=sfoster

Comment 11

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/690f56519829
https://hg.mozilla.org/mozilla-central/rev/ba1272b8b639

Comment 12

[Hani Yacoub]

The current layout of the form fields for the address-form isn't squished together any more, comparing the latest Firefox Nightly 63.0a1(2018-08-29) with the spec.

But some of the fields (Organization, Country and form) order differs from the spec, and I'm not sure if that is intended, also in Nightly the field is displayed as "Country or Region" and on the spec is displayed "Country".

Comment 13

[Matthew N. [:MattN]]

(In reply to Hani Yacoub from comment #12)
> But some of the fields (Organization, Country and form) order differs from
> the spec, and I'm not sure if that is intended,

We've been discussing this with UX and will file a bug. It's in our spreadsheet from the Wednesday meeting to file remaining differences from the spec: https://docs.google.com/spreadsheets/d/1qY0GrH9vDu7bnqjiLtRplh4Y10af_48WqHK1PPAoxyo/edit#gid=468547005

> also in Nightly the field is
> displayed as "Country or Region" and on the spec is displayed "Country".

This is a mistake in the specs. The Mozilla policy is "Country or Region": https://wiki.mozilla.org/Lists_of_Countries_and_Regions

Comment 14

[Hani Yacoub]

Verified as fixed on Firefox Nightly 64.0a1 on Windows 10 x 64, Windows 7 x32, Mac OS X 10.12 and Ubuntu 16.04 x64.