947144 - Inspection bubble panel is sometimes misplaced

Status: RESOLVED FIXED

(DevTools :: Debugger, defect, P3)

Description

[Panos Astithas (he/him) [:past] (please ni?)]

Attachment: bubble-gone-awry.png

The inspection bubble can sometimes appear very far from the identifier. It probably happens when showing the panel above the identifier can't fit on the screen. See the attached screenshot. Maybe we should switch the panel attachment if the identifier is on the top half part of the editor.

Comment 1

[Panos Astithas (he/him) [:past] (please ni?)]

(In reply to Panos Astithas [:past] from comment #0)
> the screen. See the attached screenshot. Maybe we should switch the panel
> attachment if the identifier is on the top half part of the editor.

...in the detached toolbox (or sidebar) case. The toolbox-on-the-bottom case should probably never face this issue.

Comment 2

[Victor Porof [:vporof][:vp]]

(In reply to Panos Astithas [:past] from comment #0)
> Created attachment 8343676 [details]
> bubble-gone-awry.png
> 

> Maybe we should switch the panel attachment if the identifier is on the top half part of the editor.

What if the toolbox window is at the bottom of the screen, and the popup height is larger than the window? :)

Granted, maybe this isn't going to be too common, but the <xul:panel> should be smart enough to handle such scenarios by itself, so this is a XUL bug. Nobody looks at panel bugs though, so I'm ok with hacky solutions like you suggested.

Comment 3

[Panos Astithas (he/him) [:past] (please ni?)]

Agreed that this should be the automatic behavior of the panel, but perhaps we are obstructing it by specifying before_start position? Maybe using flip="both" can do what we want?

https://developer.mozilla.org/en-US/docs/XUL/panel#Attributes

Comment 4

[Girish Sharma [:Optimizer]]

If this popup has a proper and valid anchor node, you can simply do .moveTo(-1, -1) to realign it to its anchor. If the popup is opened via openPopupAt, then if the size changes, then sometimes you are out of luck to put it at proper places :)
(Trust me, I have played with this issue for the css autocomplete feature in style editor)

Also, the current popup does not play well when the zoom level is not default.

Comment 5

[Panos Astithas (he/him) [:past] (please ni?)]

Attachment: Not working flip="both"

OK, so flip="both" doesn't seem to work, but I'm attaching the change anyway.

Comment 6

[Panos Astithas (he/him) [:past] (please ni?)]

No time to look at this right now.

Comment 7

[Victor Porof [:vporof][:vp]]

Was this fixed by bug 957187?

Comment 8

[Panos Astithas (he/him) [:past] (please ni?)]

Attachment: slightly-improved-bubble.png

(In reply to Victor Porof [:vporof][:vp] from comment #7)
> Was this fixed by bug 957187?

Not entirely, but it got better. The bubble is now close to the identifier, but the arrow always points downwards.

Comment 9

[Girish Sharma [:Optimizer]]

(If flip="both" was to work, then the arrow will point upwards)

So ideally, the issue is fixed.

Comment 10

[Victor Porof [:vporof][:vp]]

(In reply to Panos Astithas [:past] from comment #8)
> 
> Not entirely, but it got better. The bubble is now close to the identifier,
> but the arrow always points downwards.

Patrick, does the custom styling of the panel support such cases? AFAIK we have some smarts for different arrows in CSS.

Comment 11

[Patrick Brosset <:pbro>]

The custom XUL arrow panel styling we have should support these cases. There are custom arrow images for all top, left, bottom, right sides: http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/dark-theme.css#275
And the code in Tooltip.js doesn't make any assumption concerning the position of the panel.

Interestingly, the firefox bookmark toolbar button behaves exactly as we want, but I haven't been able to find what's different in that panel.

I've tried playing with the flip and side attributes, that didn't make any difference.
The thing is, when the tooltip does open to the bottom, its side attribute gets the correct value "bottom", but the CSS doesn't seem to apply in that case.

Comment 13

[Codacoder]

@Panos: Do you think bug 967096 is a dupe of this? (In which case it's worse on a multi-monitor setup)

Comment 14

[David Walsh :davidwalsh]

We don't use XUL in the new debugger and I'm confident our preview bubbles are displaying in the proper place.