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

Dynamic highlighting working better. Tree selection on highlight now working. Need to suppress some events, and handle others, like scrolling. Added initial patch to bug 547453

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)
  • OOB testing, boundaries largely sanitized now
• [done] dynamic highlighting
• [done] create and install background image for highlighter panel - remove, we don't need this
• fix dynamic highlighter offset bug(s)
• [done] select dynamically highlit node in tree panel
• propagate events through highlighter panel
  • click done
  • mousemoves mostly working, some weirdness happening
• [done] create browser chrome tests
• [done] ensure working on windows and linux (currently developing on mac)
  • tested on windows
• [done] handle document scrolling
• style panel

Related Bugs

bug 547453

Team

• Project Lead: robcee
• Design consultant: alimi

Designs

Main view and panels

Tool button palette

We'll need a place to control the various functions of the Inspector. A toolbar palette suggested itself to me based on the look of the rest of the UI. The palette contains controls for (in order, from top left to right):

• Inspect (mouseover) i
• Rectangular Select Inspect r
• Rulers and guides (toggle) g
• Tree panel t
• Style Panel s
• DOM panel d
• previous/next inspected nodes (inspected node history) p/n

The palette also provides a space to add features without affecting base Firefox UI. These buttons will all require icons.

Quick keyboard shortcuts should be available for each function.

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

Alpha release requirements

• Testcases (est. time remaining: 2days, eta Tuesday, April 6)
  • basic highlighter activation and deactivation done
  • selecting a node in the tree panel done
  • highlighting a node in a web page done
  • highlighting a node in a web page with scrolling

• functionality (optional, est. time 2.5-3 days)
  • highlighter panel boundary sanitization (some panels can fly off into desktop space currently) (0.5 day)
  • panel event propagation (highlighter panels are dumb. can't highlight sub-nodes through the panel) (0.5-1 day) done
    • still some offset bugs
  • document scrolling (panels stay when the document scrolls, drift away from the node they're supposed to be highlighting) (0.5 day) done

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