Provide rich preview or interaction about inspected objects across the DevTools, in the form of floating popups.
These are for illustration only, just cause a picture is worth a thousand words, however final implementation may differ.
The proposal is to use XUL panel elements since they fit the job pretty nicely (most probably, but not restricted to, arrow type panels). See https://developer.mozilla.org/en-US/docs/XUL/panel for information about panels.
4 advantages of panels:
- they are floating popup windows,
- they may contain any type of content,
- they do not have any window decorations,
- and they may extend outside the border of the main window.
Furthermore, using panels makes it consistent with Firefox's download and https panels already available. Finally, the debugger already features panels for conditional breakpoints and search input.
The proposal is to wrap this into a reusable component and make it as easy to instantiate and attach to a new type of object as possible. Special care should be taken to try and hide the low level XUL part.
While consistency is important and doorhangers should have a common look and feel throughout the devtools, each instance should have the opportunity to make decisions about a few things:
- obviously content
- position
- show/hide behavior
- arrow type or not
- what else?
All of these use cases should be tracked in the meta bug http://bugzil.la/711947
- Previewing img tag images
- http://bugzil.la/765105
- Getting image dimensions via the client-server protocol (getting a data-uri)
- Resizing proportionally the image if it exceeds a certain width or height.
- Showing dimensions
- Showing transparency using a tiled background
- DONE
- Previewing canvas tag bitmaps
- As above. http://bugzil.la/765105
- DONE
- Previewing HTML entities
- Preview CSS values within style attributes (just like the style inspector, but within the inline HTML attribute).
- Not a high priority because clicking on the element will display the values in the style inspector
- Depends on the output parser in http://bugzil.la/918716
- TODO
- Color picker
- Possibility to pick a new color, convert between color formats, open the pixel inspector.
- http://bugzil.la/889638
- DONE
- Gradient preview/editor
- As for color swatches, it would be better to show the preview inline, in a small element, while providing gradient editing in the tooltip.
- http://bugzil.la/765105 introduces a simple gradient preview (will need to be removed when gradient swatches land)
- Possible candidate: http://briangrinstead.com/gradient/
- http://bugzil.la/706102
- TODO
- Background image preview (just like
in the markup inspector)
- Font preview
- Not really sure this is needed, perhaps a link to the font inspector panel would be better instead.
- A question regarding icon fonts has been raised. It could indeed be useful to visualize a palette of characters with this font. Knowing that usually, these fonts don't really use the typical character range (A-Z...) but characters far away in the UTF-8 range, so not really possible to play with in the font inspector.
- http://bugzil.la/702577
- DONE
- Box shadow
- A tooltip might not be the best way to inspect this, see http://bugzil.la/942176 instead.
- TODO
- Box border
- A tooltip might not be the best way to inspect this, see http://bugzil.la/942176 instead.
- TODO
- Length
- Not sure how interesting it would be display a 200px ruler when a 200px value is inspected though?
- Perhaps a length converter would help (converting from em to px to rem to %, in the context of the currently selected node)
- http://bugzil.la/711944
- TODO
- Angles
- Cubic bezier
- Preview the timing function curve. Perhaps allow to update it? Here is a nice demo http://matthewlein.com/ceaser/
- http://bugzil.la/711941
- TODO
- Time
- HTML entity
- CSS transforms
- Seeing the original and transformed version of the box. With projection of coordinates (linking corners of both boxes).
- Candidates http://codepen.io/captainbrosset/full/lHpnK and https://github.com/captainbrosset/csstransformer.
- This needs to be discussed still, as it may be better to just display that information in the highlighter: http://bugzil.la/663778
- http://bugzil.la/726427
- DONE
Pretty much all the rule and computed view cases apply here. Bug http://bugzil.la/971702 provides information about the hovered text in the style-editor. New bugs should be opened for the style editor. TODO
- If output is a DOM Element
- Image preview for img tags
- Sub DOM tree inspector for others? Might be overkill when we can simply link to the DOM inspector, but not sure
- Perhaps previewing the DOM element with styles, but without parents and children. Just to kind of see its box model styling perhaps?
- Needs a new bug
- If output is a HTTP request
- Preview of the waterfall graph?
- Needs a new bug
- Conditional breakpoint input
- Search inline help
- List object properties in watch expressions and variables view (not necessarily making it possible to expand through the sub-properties, this is already possible in the sidebar panel, the doorhanger could just be a way to quickly glimpse at an object content, saving a click).
- Needs a new bug
- List arrays items (same as above)
- Needs a new bug
- Evaluate expressions when debugger is paused. Hovering over a variable or expression shows the result in the tooltip
- Previewing image responses just like the markup inspector
- Previewing font responses just like the style inspector (and/or just link to the font panel?)
- What about using it to show the timings (waterfall graph for DNS resolution, ...) instead of using a sidebar panel.
- Compilation error reporting
- DONE
For the CSS-Transforms, well try to make just a small panel, not a huge one like box-shadow. And for the debugger, well yep they work fine. The conditional breakpoint panel could be kept, but the search inline help should use the "autocomplete element" like the developer toolbar command line (when typing help) for a more "unified" experience.
It would also be nice if the panels would interact with the developer tools theme (dark/light).