devtools-core icon indicating copy to clipboard operation
devtools-core copied to clipboard

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

Open brumm opened this issue 4 years ago • 8 comments

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: Screen Recording 2019-11-11 at 13 28 49

brumm avatar Nov 11 '19 09:11 brumm

@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!

juliandescottes avatar Nov 13 '19 10:11 juliandescottes

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.

image

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.

brumm avatar Nov 13 '19 11:11 brumm

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?)

juliandescottes avatar Nov 13 '19 12:11 juliandescottes

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

brumm avatar Nov 13 '19 15:11 brumm

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!

juliandescottes avatar Nov 13 '19 15:11 juliandescottes

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

brumm avatar Nov 13 '19 15:11 brumm

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

juliandescottes avatar Nov 13 '19 15:11 juliandescottes

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

FezVrasta avatar Apr 25 '20 13:04 FezVrasta