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

Status: RESOLVED FIXED

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

Description

[Victoria Wang [:victoria]]

Attachment: 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).

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

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.

Comment 2

[Victoria Wang [: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.

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1580631 - [Inactive CSS] Tooltip should hang off to right side in LTR mode r?jdescottes!

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b46946d6e446
[Inactive CSS] Tooltip should hang off to right side in LTR mode r=jdescottes

Comment 5

[Andreea Pavel [:apavel]]

Backed out for failing browser_html_tooltip_doorhanger-01.js

Push that started the failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&group_state=expanded&resultStatus=testfailed%2Cbusted%2Cexception&revision=b46946d6e446cf50fc2c3fcc62e2cb8ec84c4064&selectedJob=267636189

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=267636189&repo=autoland&lineNumber=1343

Tier1 failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=267654723&repo=autoland&lineNumber=22959

Backout: https://hg.mozilla.org/integration/autoland/rev/5ecd5f4f59ae00cab5d0bb16a434a28e0d73ec27

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5b1ceefff112
[Inactive CSS] Tooltip should hang off to right side in LTR mode r=jdescottes

Comment 7

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/5b1ceefff112