Closed Bug 1580631 Opened 2 months ago Closed 2 months ago

[Inactive CSS] Tooltip should hang off to right side in LTR mode

Categories

(DevTools :: Inspector: Rules, defect, P3)

defect

Tracking

(firefox71 fixed)

RESOLVED FIXED
Firefox 71
Tracking Status
firefox71 --- fixed

People

(Reporter: victoria, Assigned: miker)

References

(Blocks 1 open bug)

Details

Attachments

(2 files)

Attached image image.png

I noticed that the Inactive CSS tooltip usually flips up and to the left, blocking the other declarations in view. It only wants to go to the right if there's more than enough space for it in the Rules column. (See attached)

It would be great to change this to flip to the right so that it covers up less of the rules. (The tooltips for event, color picker, font face, and variables all flip to the right side, even if this means overlapping the next column.)

I think the only cases in which it should go to the left is in RTL mode, or if it will be hanging off the side of the browser (e.g. when the user is in 2-pane mode).

Blocks: 1540753
Priority: -- → P3

The current implementation comes from the Photon docs:
https://design.firefox.com/photon/components/doorhangers.html#directional-arrow

When the design docs talk about the "view" they are talking about the main window.

Doorhangers opening on the right side of the view show the directional arrow on the right. Doorhangers opening on the left side of the view show the directional arrow on the left. Never place the directional arrow at the center of doorhangers.

So because the InactiveCSS icon is on the right of the main view doorhangers should open to the left. If the icon was on the left of the main view they would open to the right.

Flags: needinfo?(victoria)

I see. I think DevTools doorhangers that serve as tooltips (instead of menus) should work differently than the Photon pattern. Since it originates inside the content (rather than being up in a toolbar) it should stay out of the way of the content by going to the right.

Flags: needinfo?(victoria)
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
Has Regression Range: --- → irrelevant
Has STR: --- → yes
OS: Unspecified → All
Hardware: Unspecified → All
Summary: [Inactive CSS] Tooltip should hang off to right side instead of left (in most cases) → [Inactive CSS] Tooltip should hang off to right side in LTR mode
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b46946d6e446
[Inactive CSS] Tooltip should hang off to right side in LTR mode r=jdescottes
Flags: needinfo?(mratcliffe)
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/5b1ceefff112
[Inactive CSS] Tooltip should hang off to right side in LTR mode r=jdescottes
Regressions: 1582733
Status: ASSIGNED → RESOLVED
Closed: 2 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71
You need to log in before you can comment on or make changes to this bug.