Firefox/Projects/Inspector

	RESTRICTED
	Please do not edit this page without permission; comments should be added to the discussion page.

Summary

Analogous to the DOM inspector or Firebug inspector, this is a mechanism to get a fast drill-down into an HTML page with associated properties for the selected element.

Features

• fast and pretty
• Graphical highlighter
• Rulers & guides
• Properties, palettes?
• Canvas/Layer/ini-flasher?
• unobtrusive to inspected document

Repository

http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector/

Current Status

Created a panel-based inspector. Dynamic highlighting is partially working. Some bugs to fix.

Next Steps

• [done] migrate startup extension code to Firefox
• [done] create dom tree panel (+ associated widgetry)
• [done] highlight node code
• [done] document tree model
• better highlighter logic (watch for out-of-bounds, invisible nodes, test nested documents, etc)
• [done] dynamic highlighting
• create and install background image for highlighter panel
• fix dynamic highlighter offset bug(s)
• select dynamically highlit node in tree panel
• propagate events through highlighter panel
• create browser chrome tests
• ensure working on windows and linux (currently developing on mac)
• handle document scrolling
• style panel

Related Bugs

bug 547453

Team

• Project Lead: robcee
• Design consultant: alimi

Designs

Goals/Use Cases

• Provide basic web page inspector functionality
• be visually pleasing

Non Goals

• We are not providing mechanisms to construct Xpaths for a particular node
• XUL Inspector
• We should not try to present JavaScript or provide means to debug scripts

Milestones

0.1

• HTML/Tree Panel (read-only)
• node highlighting

Estimated time 2 weeks

0.2

• Style panel (read-only)

Estimated time 1 week

0.3

• DOM panel (read-only)
  • may include additional information about nodes

Estimated time 1 week Minimal feature set for landing