1616863 - Payment Request dialog container styles broken

Status: RESOLVED FIXED

(Firefox :: WebPayments UI, defect, P1)

Description

[Matthew N. [:MattN]]

Due to unrelated Firefox front-end changes and the fact we disabled tests while development of web payments was on hold, the PaymentRequest dialog position and size is now incorrect. We should run mozregression with the feature preffed on to see what broke it rather than layering new different CSS on top. The following is what I came up with for toolkit/components/prompts/content/tabprompts.cs when I didn't have access to mozregression:

 /* Tab-Modal Payment Request widget */
 .paymentDialogContainer:not([hidden]) {
   /* Center the .paymentDialogContainerFrame horizontally with flexbox. */
   display: flex;
   flex-direction: column;
   position: absolute;
+  z-index: 1000;
+  width: 100%;
 }

Comment 1

[Hani Yacoub, Desktop QA]

Hi Matt, could you please provide the prefs that I need to enable the feature and a test website that I could use?

I tried to change "dom.payments.request.enabled" and set "browser.search.region" to US or CA, using this test page "https://rsolomakhin.github.io/" but I received this message "PaymentRequest API is not supported."

Comment 2

[Matthew N. [:MattN]]

(In reply to Hani Yacoub from comment #1)

Hi Matt, could you please provide the prefs that I need to enable the feature and a test website that I could use?

I tried to change "dom.payments.request.enabled" and set "browser.search.region" to US or CA, using this test page "https://rsolomakhin.github.io/" but I received this message "PaymentRequest API is not supported."

That works for me after restarting the browser for them to take effect. You may also want extensions.formautofill.creditCards.available to true to test the rest of the dialog properly.

Comment 3

[Jim Mathies [:jimm]]

/* Tab-Modal Payment Request widget /
.paymentDialogContainer:not([hidden]) {
/ Center the .paymentDialogContainerFrame horizontally with flexbox. */
display: flex;
flex-direction: column;
position: absolute;

• z-index: 1000;
• width: 100%;
  }

Confirmed, this changed fixed the dialog on win10. Can we land this work around MattN? We'll never ship this particular dialog, so no hard here. Getting this running would be useful for testing purposes.

Comment 4

[Jim Mathies [:jimm]]

Attachment: win10dialog.png

Comment 5

[Matthew N. [:MattN]]

Well I still think it would be good to find the regression range as I suspect there is now some dead CSS that should be deleted/fixed rather than just adding more.

Comment 6

[Hani Yacoub, Desktop QA]

Attachment: Screenshot 2020-04-10 at 14.58.01.png

I still can't reproduce this issue, I tried on the latest Firefox Nightly on MacOS 10.14 and on Windows 10 x64.
Web Payments dialog is not visible. Please see the screenshot attached.

Comment 7

[Matthew N. [:MattN]]

That screenshot is showing the exact issue that this bug is about.

Comment 8

[Marcos Caceres [:marcosc]]

(In reply to Matthew N. [:MattN] (PM me if request are blocking you) from comment #7)

That screenshot is showing the exact issue that this bug is about.

Put another way, the payment sheet should appear. The payment sheet not showing up is indeed the bug :)

Comment 9

[Hani Yacoub, Desktop QA]

I did a regression range and I received https://phabricator.services.mozilla.com//D46595 as a differential revision.
Last good build is in 2019.10.01 and first bad build is 2019.10.02

Comment 10

[Matthew N. [:MattN]]

Thank you! Would you be able to identify the actual code change that caused the issue by running mozregression with that pref set?
You would add --pref browser.urlbar.megabar:true with --bad 2019-10-02 to mozregression.

Comment 11

[Hani Yacoub, Desktop QA]

The last comment I added and the results of the mozregression are not accurate, sorry for that.
I did more investigation today and found that the issue at first shifted the payment dialog to the left before it disappeared completely. (See screenshot attached)

The first mozregression results I considered the issue began when the dialog started to shift to the right.
Here are the results: https://phabricator.services.mozilla.com/D52420

The second mozregression results I considered the issue began when the dialog disappeared completely.
Here are the results: https://phabricator.services.mozilla.com/D49487

The results are not affected by adding "browser.urlbar.megabar:true" pref.
Please let me know if there is anything else I could do.

Comment 12

[Matthew N. [:MattN]]

Thank you. In the future commit links would be better than Phabricator ones.

Comment 13

[Marcos Caceres [:marcosc]]

Attachment: Fix Payment Request dialog container style

Bring the payment sheet back up, gives us something visual to work from.

Comment 14

[Marcos Caceres [:marcosc]]

Try https://treeherder.mozilla.org/#/jobs?repo=try&revision=30c92bff39675f8c1adbfc80e31c777b42592470

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9cc546760752
Fix Payment Request dialog container style r=MattN

Comment 16

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/9cc546760752