payment popup window close button is hidden on Firefox on Windows

[GorvGoyl]

payment popup window controls (minimize, close buttons) are hidden from screen. I have to make it small by resizing it from sides and then the controls are shown.

Current UI:

Expected UI:

Let me know if you need further details.

[Glench]

hm! what resolution is your screen?

[GorvGoyl]

1920x1080

It's HP pavilion x360 convertible laptop (13-u135TU)

[Glench]

Thanks for the bug report! I just tried the sample extension's popup window in Firefox on Windows with a screen resolution of 1920x1080 and the screen position of the popup was fine. So I think I need a bit more info to see if I can figure out what's going on.

1. Where is your extension calling extpay.openPaymentPage() from? The content script, background.js, or the browser's built-in extension popup?
2. What version of Firefox are you running and what version of Windows?
3. Is the ExtensionPay site or popup zoomed at all?
4. What is the Windows setting for text zoom on your computer pictured in the screenshot below?

[GorvGoyl]

It's okay if others aren't facing this issue, maybe it's specific to my laptop configuration.

Where is your extension calling extpay.openPaymentPage() from? The content script, background.js, or the browser's built-in extension popup? -> from browser's built-in extension popup

What version of Firefox are you running and what version of Windows? -> firefox v88 on Windows 10

Is the ExtensionPay site or popup zoomed at all? -> no, it's the default.

What is the Windows setting for text zoom on your computer pictured in the screenshot below? see below image. Also, taskbar is hidden, although, If I enable it issue still persists.

[Glench]

Thank you for the info! I have one more thing which should narrow down the problem a lot. What happens when you run the following from the console devtools for the extension (located in about:debugging -> this Firefox -> Inspect):

browser.windows.create({
                    url: 'http://google.com',
                    type: "popup",
                    width: 500,
                    height: 800,
                    left: 450
})

[GorvGoyl]

It says: Uncaught ReferenceError: browser is not defined

[Glench]

That's weird. Why isn't the browser object available? What about doing chrome.windows.create instead?

[GorvGoyl]

Why isn't the browser object available

I think i figured it out, it's because when I try to run it in devconsole the popup window gets closed so the object is no longer available. So, I try to run it programmatically from popup javascript and here are the results:

When running:

browser.windows.create({
    url: "http://google.com",
    type: "popup",
    width: 500,
    height: 800,
    left: 450,
  });

When running:

browser.windows.create({
    url: "http://google.com",
    type: "popup",
  });

[Glench]

ah ha! excellent. This tells me that this is more an issue with Firefox. But maybe we can fix this. What happens when you do

browser.windows.create({
                    url: `http://glench.com`,
                    type: "popup",
                    width: 500,
                    height: 800,
                    left: 450,
                    focused: true,
                })

I'm also curious what happens if you add top: 0. The API says that if top is left unspecified then the new window is offset from the previously focused window.

[GorvGoyl]

browser.windows.create({
                    url: `http://glench.com`,
                    type: "popup",
                    width: 500,
                    height: 800,
                    left: 450,
                    focused: true,
                })

It seems like top:0 has no effect on popup window size when I try it.

If I set height:700 then I'm able to see window controls:

[Glench]

Wow, so I think this clarifies things a bit. It's really weird that your resolution is 1920x1080 but a window opened with height: 800 is too tall for the screen. I think it has to do with the font-scaling setting from windows. I'll play around with it today.

[Glench]

Okay, so I reproduced it. It happens basically whenever the window height is larger than the screen height in Windows. I submitted a bug to Mozilla's bug tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1708304

I'm not sure how to work around this in the meantime. If the height of the popup is changed to be smaller then the pay button gets cut off and it looks ugly. I'm considering just leaving it as is for now.

[GorvGoyl]

I see. maybe you could consider omitting height and width value so that browser determines it based on the content of window. If you set explicit height then you also need to consider tablet screens like microsoft surface pro etc.

[Glench]

I may consider that. The problem is that if I omit the height then it's not clear that it will open with the necessary height. Here's what the spec says which is not very helpful:

number optional

The height in pixels of the new window, including the frame. If not specified, defaults to a natural height.

What the heck is a "natural height"?

[GorvGoyl]

I am not sure but I think if you omit the height, it should maintain atleast the overall height of a site (which comes after calculating all divs, span, img etc.). maybe experiment on different resolution devices and determine which one works nicely.

[Glench]

Here's a window I just tried to open via browser.windows.create on Mac Firefox without a height:

I think the best solution is for Firefox on Windows to fix the problem. If I get more user reports of issues with this then I'll take another look.