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.

UI notes from limi

I will say — in general — that I'm not a big fan of icons for operations that aren't immediately obvious. E.g. Firebug's switch from an "Inspect" text labeled button to their current icon made the UI more confusing. Even Microsoft are moving away from icon-based UIs with their latest efforts (Windows 7, Office 2010, Win7 Mobile). Very few icons are universal, and text usually makes the UI clearer — especially in niche applications.

This is making me reconsider the toolpalette above. It might make more sense to drop a toolbar onto the Tree panel and used text-buttons. The extra space in the toolbar would also act as a drag-target en lieu of a title bar.

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 works on xul docs anyway
• 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

• Testcases
  • 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
  • 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)
  • panel
  • richlistbox
  • test cases
    • panel open
    • styles for object in page

Estimated Time: 1 week

0.3

• DOM panel (read-only)
  • display DOM object properties
  • may include additional information about nodes, e.g., namespaces
  • testcases
    • opening/closing panel
    • displaying properties for selected DOM object

Estimated Time: 1 week

0.4

• Inspector Controls
  • turn inspection on/off
  • enable/disable style and DOM panels
  • inspector object history (back forward)
  • initial thinking was an icon panel, currently looking at text buttons

Estimated Time: 2-3 days

0.5

• Rewriting the treeview

0.6

• Popup Editor
  • Editing styles, dom objects and html elements
  • popup text widgets over editor target

Estimated Time: 1-2 weeks

0.7

• Reimplement the highlighter panel
  • Make it look more like what's in the mockup.
  • Using a full-screen (content area) panel, can we use borders to darken the area around the object under inspection?
  • Use multiple panels to box the inspected object?
  • compositor?

0.8

• Rulers and guides
  • image or CSS-based panel backgrounds
  • guides should be drawn on the panel and intersect with the rulers
  • highlight rulers showing boundaries of the object
  • different lines for offsets, padding and margins

0.9

• Additional panel features as they become available
  • probably not a real milestone, just bits to add as they become available, see: XUL:Panel_Improvements.

Estimated Time: 0

1.0

• Styling
  • tree panel
  • style and DOM object panels
  • highlighter and rulers if not taken care of earlier
  • toolbar buttons for *stripe themes

Estimated Time: 1-2 weeks

possible to style some features during development. 0.2 and 0.3 should be styled initially. Tree panel may be styled during reimplementation.