Changes

'''Note''': this terminology has changed from the original design of this feature. The tool that lets you visually select an element on that is used to dive into a page for use by is called the "element-centricPage Inspector" tools (such as or just the Style Inspector) is called the Highlighter. It has a menu item on If we refer to the Mac at Tools->Web Developer->"Highlighter and on Windows at Firefox->Web Developer->Highlighter. You can also get to it via a "Highlight Element" context menu itemthat is just the part of the Page Inspector that visually shows the selected page element.

The Highlighter tool that lets you visually select an element on that page for use by "element-centric" tools (such as the Style Inspector) is called the Page Inspector or just Inspector. It has two modes:a menu item on the Mac at Tools->Web Developer->Inspect and on Windows at Firefox->Web Developer->Inspect. You can also get to it via a "Inspect Element" context menu item.

The Inspector has two modes: * Highlight Inspection mode – as you move the mouse around, the highlight follows until you click a page element

The Highlighter Inspector Toolbar has a button, labeled "HighlightInspect" that switches between the Highlight Inspection and Selected modes.

==== Invoking the Highlighter Page Inspector ====

You can launch the Highlighter Page Inspector by right-clicking on an element and selecting "Highlight Inspect Element" from the context menu (<span id="F1">F1</span>). This will bring the Highlighter Inspector into view with the element under the cursor already selected. The element is in the "lockedselected" state.

You can also launch the Highlighter Inspector via the "Web Developer" menu ("HighlighterInspect" menu option) (<span id="F2">F2</span>). The Highlighter Inspector will start out in the "highlightinspection" mode.

When the Developer Toolbar lands, there will also be a Highlighter Inspect button there.

Finally, you can use the command line to highlight select an element (<span id="F3">F3</span>). Multiple selected elements are not supported right now.

The Highlighter Inspector has two modes: "highlightinspection" and "selected". In "highlightinspection" mode, moving the mouse around will highlight the element of the page that's under the cursor. If you click on the element, you switch to "selected" mode and you can then move your mouse around without changing which element is highlighted. You can click the "HighlightInspect" button in the Highlighter Inspector Toolbar to switch back into highlight inspection mode.

==== Highlighted Selected Element Display ====

When an element is highlightedselected, the rest of the page is dimmed. Near the element, there is an "Infobar" that provides a quick view of information that is useful to page designers (see below).

When you highlight select a page element, the "infobar" appears to quickly give you the most useful information about that element.

==== Highlighter Page Inspector Toolbar ====

The Highlighter Inspector Toolbar appears above the Developer Toolbar at the bottom of the window and provides access to element-oriented tools and quick, precise access to other elements.

* "HighlightInspect" button switches between highlight inspection (choose an element) and selected modes (<span id="F8">F8</span>)