1504675 - The re-sizable "Street Address" field severely affects the Add/Edit form's layout

Status: VERIFIED FIXED

(Firefox :: WebPayments UI, defect, P1)

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: Video of the issue

[Affected versions]: 
Nightly 65.0a1 

[Affected platforms]:
Platforms: Windows 10 x 64, Windows 7 x32, Mac OS X 10.13 and on Ubuntu 16.04 x64.

[Preconditions]:
1. Set the pref dom.payments.request.enabled to "true"
2. Set browser.search.region to "US" or "CA" if you are outside of the US or Canada
3. Make sure you have at least one Shipping Address and one Credit Card saved in your browser

[Steps to reproduce]:
1. Go to "https://rsolomakhin.github.io/pr/single/" page and click on "Buy".
2. Select "Add" for a new shipping address
3. Resize the "Street Address* field by dragging the right bottom corner of the field

[Expected result]:
The field should be resized within reasonable limits without messing up the form's layout.

[Actual result]:
The "Street Address" field can be resized in a manner that severely affects the Address Form layout. Please check the attached video. The created layout is also saved within the payment session for all Add/Edit forms.

Comment 1

[Matthew N. [:MattN]]

For one, we should allow it to only be resized vertically which is a trivial CSS fix.

Comment 2

[Diego Pino]

Attachment: Bug-1504675-Allow-vertical-resize-only-in-WebPayment.patch

Vertical resize only in addressForm street-address.

Comment 3

[Matthew N. [:MattN]]

Comment on attachment 9024686 [details] [diff] [review]
Bug-1504675-Allow-vertical-resize-only-in-WebPayment.patch

Review of attachment 9024686 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks

::: browser/components/payments/res/containers/address-form.css
@@ +55,5 @@
>  }
> +
> +#street-address {
> +  resize: vertical;
> +}

This is good but can you put it in https://searchfox.org/mozilla-central/rev/7f7c353e969e61a6a85201cc8ad3c3de12ac30d8/browser/extensions/formautofill/skin/shared/editAddress.css#109 so it's shared with the dialog in preferences (even though that doesn't seem to be affected) since this change is more about editAddress than about address-form.

Comment 4

[Diego Pino]

Attachment: Bug-1504675-Allow-vertical-resize-only-in-WebPayment.patch

Moved CSS formatting style rule to editAddress.css

Comment 5

[Matthew N. [:MattN]]

Comment on attachment 9024946 [details] [diff] [review]
Bug-1504675-Allow-vertical-resize-only-in-WebPayment.patch

Review of attachment 9024946 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/07332eea2976
Allow vertical resize only in WebPayments's address-form street-address field r=MattN

Comment 7

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/07332eea2976

Comment 8

[Hani Yacoub, Desktop QA]

Verified as fixed on Firefox Nightly 65.0a1 (2018-11-14) on Windows 10 x 64, Windows 7 x32, Mac OS X 10.13 and on Ubuntu 16.04 x64.