Toolbar popover menus appear in wrong position after zoom (shifted to the right)

[brumm]

macOS Mojave 10.14.6 (18G87)
Firefox 70.0.1 (64-bit)

After increasing the font size of the devtools via cmd-+, popover menus appear in the wrong position. Increasing the font size again causes the popover to shift even more to the right.

Here's a gif:

[juliandescottes]

@brumm Hi! Thanks for filing.

I can't reproduce your issue at the moment (also testing on 10.14.6 + 70.0.1), so I have a few questions :)
Does it happen consistently for you?
Anything else we should know about your setup? Are you using a retina (hi-dpi) screen or a regular monitor?
DevTools seem to be docked left on your browser?
Could you go to about:config and check the value "devtools.toolbox.zoomValue" takes when you zoom in / out ?

Thanks!

[brumm]

Hey, good catch regarding retina vs. regular monitor. I experienced this on a regular monitor. I'm not able to reproduce it on retina, but can do so consistently on a regular monitor.

Yeah, the devtools were docked to the left. I tried to reproduce the bug while docked to the right, but I wasn't able to. Switching back to the left I can reproduce it again. I can also reproduce it when docked to the bottom, although only with the toolbar overflow button, not the ... button.

zoomValue seems to consistently increase in 0.1 increments, here's a screenshot of about:config open with the zoomValue of 1.4 which is when the popover first started to appear misaligned.

Also, it seems like the horizontal window position affects this as well, moving the window to the right of the monitor seems to prevent the bug from appearing somehow :)

Not sure if it helps, but this happens with the Firefox Developer Edition as well.

[juliandescottes]

Thanks for the additional info, this definitely helps.

moving the window to the right of the monitor seems to prevent the bug from appearing somehow

And the way the popup looks when it is mis-positioned indicates that it thinks it's on the edge of the screen. When the popup has enough space to be displayed, the arrow is not near the edge of the popup as it is in your screenshot.

So for some reason we don't calculate correctly the available width.

Even with your added information I can't reproduce yet. So either there is something in the profile (another pref?) that impacts the scenario, or the hardware setup is still significantly different. To further investigate, could you:

• try with a clean profile (https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Multiple_profiles)
• share your monitor resolution and setup (dual screen? more?)

[brumm]

• Confirmed to happen with a fresh profile as well
• main screen retina virtual resolution of 1680x1050
  both external screens are 2560x1440
  setup like so:
  

[juliandescottes]

Thank you so much for all the details! I'll move the issue to Bugzilla where we normally track DevTools bugs. I have a strong feeling the dual/triple screen setup is why I can't repro for now, hopefully I can get help from peers who have a similar setup!

[brumm]

Yeah, I wasn't sure where to file this bug :) Thanks for your help!

[juliandescottes]

Well I hope I can actually fix it at some point :D
Here is the bugzilla link: https://bugzilla.mozilla.org/show_bug.cgi?id=1596120

[FezVrasta]

Have the Firefox Dev Tools maintainers consider to switch to Popper for the tooltip positioning? It should address all the edge cases for free.