DevTools/DesignMockups

DevTools Future Planning

This is a document based on mockups created by Paul Rouget. Notes taken to synthesize bugs from features and hopefully, features from bugs.

Possible Visual Design

Here is a possible aesthetic for the interface by Faaborg: [1]

Developer Tools Toolbar

buglist

• create toolbar for developer tools
• migrate command line to developer tools toolbar
  • Some interesting challenges with this, will possibly need additional bugs around popping up doorhangers for output, including output in the commandline itself, what happens with positioning the console in other locations, etc.
• create API for registering tools with main developer toolbar
• create API for adding badges to toolbar buttons
• create "Web Developer" toolbar button
  • popup menu that derives its contents from the Web Developer menu

Highlighter

buglist

• Inspector Toolbar bug 666650
• Dockable* HTML panel bug
• Dockable* Style inspectors bug
• create highlighter infobar for selected node bug 663833
• Expand/collapse HTML+Style panels. bug
• Create breadcrumb nodepath selection tool bug
• togglable classes bug
• Layout Information bug
  • highlight parent element
  • Layout info in the inspector toolbar
  • Layout box in the highlighter (margins, borders and paddings)
• Annotations
  • Inspector toolbar button
  • Doorhanger style editor for entering code to evaluate
  • Highlighter display of annotations on selected node
• multiple highlighting
• querySelector search box
• Highlighter background controls
  • Grids
  • Light
  • Dark
  • Checkerboard

Web Console

buglist

• Dockable "HTTP Requests" and "Object Inspector"