702576 - Inspector: show image tooltip

Status: RESOLVED DUPLICATE of bug 765105

(DevTools :: Inspector, defect)

Description

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

When a URL points to an image then hovering over that URL should display the image as well as the image dimensions

Comment 1

[bobi]

Also one should remember the possibility of : 

1/ svg-as-image
2/ html-element-as-image 


------
http://twitter.com/signap

Comment 2

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

Excellent point

Comment 3

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

Bug triage, filter on PEGASUS.

Comment 4

[Paul Rouget [:paul]]

triage. Filter on PINKISBEAUTIFUL

Comment 5

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

Attachment: URL Preview

It should look something like this (screenshot courtesy of Lea Verou).

The code she users for her previews is at https://github.com/LeaVerou/dabblet/blob/master/code/previewers.js

If we use her code (with changes) we should credit her in the file header.

Comment 6

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

URL matching regex:
/\burl\(['"]?.*?['"]?\)/gi

Comment 7

[briangrinstead]

I made a demo to experiment with the UI here: http://jsbin.com/icugos/4.  Basically, it loads the image that a link refers to in a little popover container and positions the popover container either above or below the link.  Any thoughts on the UI / behavior?

I have it pulled into devtools, and it is kind of working - still need to get the positioning to work properly in the scrolling style inspector panel.

Comment 8

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

I think we should probably use panels here, to make sure the popup is also shown outside the toolbox container.

Comment 9

[briangrinstead]

Ah, did not realize there was an existing object for this type of popup.  I had looked around and didn't find anything that really matched this type of popup - where else are these panels in use?

Comment 10

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

You could use a tooltip and style it to make it transparent and do the rest inside of the tooltip.

Not sure of any examples though.

Comment 11

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

Or maybe a doorhanger would be better? That way you get the node pointer for free.

Comment 12

[briangrinstead]

The thought with the Popup object is that it could be reused for a variety of displays (such as other custom previewers like dabblet implements), and it could accurately handle collisions, min/max height, scrolling, and other UI concerns.  For instance, it would just show up below / on top of the link if needed to fit inside of the devtools window.  If the devtools window was too small to contain it, it could even potentially shrink and start overflowing to fit to the display - though I'm not sure that would be too common.

It is great if there is an existing UI component to handle this, as all of that functionality should hopefully only be implemented in one place, but I wasn't able to find one.  As far as I can tell, the Tooltip object appears to be part of the command line in gcli.jsm and tailored towards autocompletion.  I am not finding anything about doorhangers in the code - are you talking about this: https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/doorhanger?

I'm happy to use any of the suggested alternatives as a container for the preview. Luckily, I think implementing the actual preview is going to be really easy now that the URLs are already detected and stored as separate links.

Comment 13

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

(In reply to Brian Grinstead from comment #12)
> The thought with the Popup object is that it could be reused for a variety
> of displays (such as other custom previewers like dabblet implements), and
> it could accurately handle collisions, min/max height, scrolling, and other
> UI concerns.  For instance, it would just show up below / on top of the link
> if needed to fit inside of the devtools window.  If the devtools window was
> too small to contain it, it could even potentially shrink and start
> overflowing to fit to the display - though I'm not sure that would be too
> common.
> 
> It is great if there is an existing UI component to handle this, as all of
> that functionality should hopefully only be implemented in one place, but I
> wasn't able to find one.

That is what doorhangers are. See:
- https://developer.mozilla.org/en-US/docs/Using_popup_notifications
- PopupNotifications.jsm

Also notice that you can specify the anchor via the open method.

> I am not finding anything about doorhangers in the code -
> are you talking about this:
> https://developer.mozilla.org/en-US/docs/Extensions/Mobile/API/NativeWindow/
> doorhanger?
> 

Yes, but the above references are probably more useful.

> As far as I can tell, the Tooltip object appears
> to be part of the command line in gcli.jsm and tailored towards
> autocompletion.

Tooltip is a standard XUL element. GCLI customizes one for autocompletion.
https://developer.mozilla.org/en-US/docs/XUL/PopupGuide/Tooltips#The_tooltip_element

> I'm happy to use any of the suggested alternatives as a container for the
> preview. Luckily, I think implementing the actual preview is going to be
> really easy now that the URLs are already detected and stored as separate
> links.

Yes, ideally we will have a simple way to say "put this HTML inside a doorhanger." This should be in a module under devtools/shared and should be shared amongst all of our tools. Injecting HTML into them is not documented but is not too difficult.

Doorhangers are certainly a better choice than tooltips.

Comment 14

[briangrinstead]

(In reply to Michael Ratcliffe [:miker] [:mratcliffe] from comment #13)

> That is what doorhangers are. See:
> - https://developer.mozilla.org/en-US/docs/Using_popup_notifications
> - PopupNotifications.jsm
> 
> Also notice that you can specify the anchor via the open method.

I've had a bit of a hang up on how to open a basic popup inside of devtools.  For instance, what to pass as the first parameter to PopupNotifications.show. I've been playing around with it in the browser console, and can get the demo to open on the browser chrome, but when trying to get it to open inside the devtools window (within rule-view.js) I haven't figured out what to replace `gBrowser.selectedBrowser` and some of the other parameters with.  I've been using this documentation to try and find information: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/PopupNotifications.jsm.

Do you have any ideas or a basic code sample on how to get a simple popup showing inside of devtools?  I think I can get this running if I could get a simple popup showing.