Revision as of 20:42, 14 July 2011

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.

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

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

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

@@ Line 29: / Line 29: @@
 === buglist ===
-* Dockable* HTML panel
+* Inspector Toolbar {{bug|666650}}
-* Inspector Toolbar
+* Dockable* HTML panel {{bug|}}
-** Expand/collapse HTML+Style panels.
+* Dockable* Style inspectors {{bug|}}
-** Create auto-truncating nodepath (XPath) selection tool
+* create highlighter infobar for selected node {{bug|663833}}
-** querySelector search box
+* Expand/collapse HTML+Style panels. {{bug|}}
-* Dockable* Style inspectors
+* Create breadcrumb nodepath selection tool {{bug|}}
-* create highlighter infobar for selected node
+* togglable classes {{bug|}}
-* Layout Information
+* 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
@@ Line 44: / Line 51: @@
 ** Dark
 ** Checkerboard
-* Annotations
-** Inspector toolbar button
-** Doorhanger style editor for entering code to evaluate
-** Highlighter display of annotations on selected node
 == Web Console ==