Closed Bug 1616863 Opened 1 year ago Closed 9 months ago

Payment Request dialog container styles broken

Categories

(Firefox :: WebPayments UI, defect, P1)

Desktop
All
defect

Tracking

()

RESOLVED FIXED
Firefox 80
Tracking Status
firefox-esr68 --- unaffected
firefox-esr78 --- wontfix
firefox78 --- wontfix
firefox79 --- wontfix
firefox80 --- fixed

People

(Reporter: MattN, Assigned: marcosc)

References

(Regression)

Details

(Keywords: regression, Whiteboard: ph1-mvp)

Attachments

(3 files)

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%;
 }
Has Regression Range: --- → no

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."

Flags: needinfo?(MattN+bmo)

(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.

Flags: needinfo?(MattN+bmo)
Blocks: 1621024
No longer blocks: 1621024

/* 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.

Attached image win10dialog.png

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.

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.

Flags: needinfo?(MattN+bmo)

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

Flags: needinfo?(MattN+bmo)

(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 :)

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

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.

Flags: needinfo?(hani.yacoub)
Regressed by: 1577541

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.

Flags: needinfo?(hani.yacoub)

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

Has Regression Range: no → yes
Regressed by: 1576946, 1492582
No longer regressed by: 1577541
Blocks: 1648867
Whiteboard: [PH1]
Assignee: nobody → mcaceres

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

Whiteboard: [PH1] → ph1-mvp
Status: NEW → ASSIGNED
Pushed by mcaceres@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/9cc546760752
Fix Payment Request dialog container style r=MattN
Status: ASSIGNED → RESOLVED
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 80
You need to log in before you can comment on or make changes to this bug.