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

Still working on landing patch in bug 547453. Waiting for another review. Style panel, aka milestone 0.2 progressing well in bug 560692.

Next Steps

• [done] watch for tab switches, close inspector UI
• better highlighter logic
  • [done] watch for out-of-bounds
  • [done] invisible nodes
  • nested documents
  • [done] OOB testing, boundaries largely sanitized now
• propagate events through highlighter panel
  • [done] click
  • mousemove mostly working, some weirdness happening bug 560829
• style panel [0.2]
  • [done] create panel
  • [done] listbox
  • [done] CSS rules for element
  • [done] inherited CSS rules for element
  • resizer - partially working, not resizing vertically?
• experiment with WindowDragging utils on toolbars
• DOM panel [0.3]
• inspector control panel / toolbar [0.4]
  • [done] add control toolbar to tree panel
  • [done] add resizer to tree panel
• rewrite tree view [0.5]

Completed Steps

• [done] migrate startup extension code to Firefox
• [done] create dom tree panel (+ associated widgetry)
• [done] highlight node code
• [done] document tree model
• [done] dynamic highlighting
• [done] create and install background image for highlighter panel - remove, we don't need this
• [done] select dynamically highlit node in tree panel
• [done] create browser chrome tests
• [done] ensure working on windows and linux (currently developing on mac)
  • tested on windows
• [done] handle document scrolling

Related Bugs

bug 547453, bug 560692, bug 560829, bug 560830, bug 560831

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) bug 560692
  • panel
    • auto-dim on inspecting.
    • toolbar as titlebar.
  • richlistbox|listbox ?
    • Currently using listbox due to lack of documentation on richlistbox. Investigating.
  • test cases
    • panel open
    • styles for object in page

Estimated Time: 1 week

0.2.1

• view source integration for style panel
  • links to view-source's CSS document and line
  • would like to see syntax highlighting and line numbers in view source, a separate bug
  • testcases
    • select node
    • display css file link in style panel
    • verify link is to the correct place

Estimated Time: 2-3 days

0.3

• DOM panel (read-only)
  • panel
  • richlistbox or tree?
  • 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
  • add toolbar to treepanel
  • 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
  • keyboard controls
  • testcases
    • inspect on/off
    • style panel on/off
    • dom panel on/off
    • test inspect back/forward
    • test keys

Estimated Time: 2-3 days

0.4.1

• Inspector keyboard controls
  • navigate nodes by keyboard when inspecting
  • testcase
    • keyboard events when highlighting

Estimated Time: 2-3 days

0.5

• Rewriting the treeview
  • replace xul tree widget with html? richlistbox?
  • use jquery based tree implementation? (jstree)
  • or, can this be done with xul tree widget and a smarter treeview object?
  • features
    • twisties
    • scrolling
    • keyboard nav
    • row selection
    • editor compatible / editable
    • selection events
  • testcases
    • selecting a node / row
    • editing
    • expanding collapsing

Estimated Time: 2-4 weeks

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?
  • testcases
    • highlighting based on tree selection
    • checking boundaries
    • rehighlighting
    • document scrolling
    • mouse moves

Estimated Time: 1-2 weeks

0.8

• Rulers and guides
  • image or CSS-based panel backgrounds, (require top-level panels from XUL panel improvements)
  • 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?

Estimated Time: 1-2 weeks depending on features implemented

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.
• panel resizing

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.

1.1

• css workspaces
  • similar to CSSDesk
  • text area for modifying the CSS of a selected node
  • save/export CSS
  • testcases
    • select node
    • add css text to workspace
    • verify style object on node

Estimated Time: 1-2 weeks