Skip to content

Instantly share code, notes, and snippets.

@captainbrosset
Last active December 23, 2015 19:19
Show Gist options
  • Save captainbrosset/6681978 to your computer and use it in GitHub Desktop.
Save captainbrosset/6681978 to your computer and use it in GitHub Desktop.
Firefox DevTools doorhangers

DevTools Doorhangers

Goal

Provide rich preview or interaction about inspected objects across the DevTools, in the form of floating popups.

Yay! Screenshots!

These are for illustration only, just cause a picture is worth a thousand words, however final implementation may differ.

color preview image preview canvas preview conditional breakpoint searchbox help css transform preview

Solution proposal

XUL Panels!

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.

Shared widget

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.

Configuration

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?

Use cases

All of these use cases should be tracked in the meta bug http://bugzil.la/711947

Markup inspector

  • 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
  • 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

Style inspector (rule and computed views)

Style editor

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

Web console

  • 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

Debugger

  • 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

Network monitor

  • 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.

Shader editor

  • Compilation error reporting
    • DONE
@nt1m
Copy link

nt1m commented Oct 11, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment