1759332 - Grid area tooltip not shown on edge of viewport

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Sebastian Zartner [:sebo]]

Attachment: test_case.html

Hovering the grid areas within the mini grid within the Layout side panel highlights the grid area within the page and shows a tooltip providing information related to it.

Though this tooltip is only shown when it fits into the viewport. On the edge of the viewport only the grid area is highlighted but no tooltip is shown making it impossible to get information regarding the grid area.

If there isn't enough space to show the tooltip above the grid area, it should be repositioned so that it can be displayed properly.

If possible, the logic for the normal highlighter tooltip should be reused which works properly.

Steps to reproduce for the attached test case:

1. Switch to the Inspector and there to the Layout side panel
2. Enable the highlighter for the grid
3. Hover over the different grid areas within Layout side panel

=> The tooltip is only shown for the grid area in the bottom right corner.

Sebastian

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thank you for the report and test case. I can easily reproduce on my machine (Win10, Firefox Nightly) following STRs from comment #0

Honza

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jdescottes, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Julian Descottes [:jdescottes]]

The reason why we have this behavior comes from https://bugzilla.mozilla.org/show_bug.cgi?id=1348919

Basically 2 tooltips might be displayed for a single grid element: the cell information, and the area information.
To avoid both being displayed on top of each other, it was decided that we would force the display of the cell information to "top", while we would force the area information to "bottom".

This is driven by 2 options for the moveInfobar helper: hideIfOffscreen and position.

In this case I think simply removing hideIfOffscreen should have the correct effect. The tooltip (called "infobar" here) will be offset as needed to fit on the screen, but will not swap between top/bottom positions.

So you could still have overlaps, but only in extreme cases (mostly with very small elements).

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: Bug 1759332 - [devtools] Remove options.hideIfOffscreen for highlighters infobar elements

This feature is currently not tested

Comment 5

[Sebastian Zartner [:sebo]]

Your explanation for the previous decision and to remove hideIfOffscreen sounds totally reasonable.

I think the optimal solution would be to move the tooltip to the bottom when it would otherwise be outside the viewport and there are no grid areas defined (so that there is no tooltip at the bottom). That would be consistent with the normal highlighter tooltip.
Though I guess that's also a real edge case (pun intended ;-) ) and the change fixes the more common cases, so it's fine.

So thank you for fixing this!

Sebastian

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/22f78b913611
[devtools] Remove options.hideIfOffscreen for highlighters infobar elements r=Honza

Comment 7

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/22f78b913611

Comment 8

[Ardelean Oana, Desktop QA [:oardelean]]

I managed to reproduce this issue on a 2022-03-12 Nightly build on macOS 11. Verified as fixed on Firefox 101.0b8(20220517185920) and Nightly 102.0a1(20220517212638) on macOS 11, Windows 10 64-bits and Ubuntu 20.04.