Canmove, confirm, emeritus
1,093
edits
Changes
no edit summary
|Feature open issues and risks=* What happens to the Highlighter Toolbar breadcrumbs when you have a very deeply nested tree? Is there truncation at one part of the tree or other? (my initial thought is to truncate at the tree's root)
* Finalize naming of the tool and associated terminology
|Feature overview=The Highlighter is a web designer-oriented feature that was initially planned
for Firefox 4 (as the Inspector) but was not ready in time to ship. The time in between has allowed us to rethink the tool.
==== Invoking the Highlighter ====
You can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu (<span id="F1">F1</span>). This will bring the Highlighter into view with the element under the cursor already selected. The element is in the "locked" state.
You can also launch the Highlighter via the "Web Developer" menu ("Highlighter" menu option) (<span id="F2">F2</span>). The Highlighter will start out in the "highlight" mode.
When the Developer Toolbar lands, there will also be a Highlighter button there.
Finally, you can use the command line to highlight an element (<span id="F3">F3</span>). Multiple selected elements are not supported right now.
==== Modes ====
When an element is highlighted, 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).
Around the element, the margins and padding are displayed (<span id="F4">F4</span>).
==== Infobar ====
* displays tag name, ID, CSS classes
* clicking on a class name toggles that class for the element
* add a class (<span id="F5">F5</span>)* add an ID to an element that does not have one (<span id="F6">F6</span>)* edit the ID on an element (<span id="F7">F7</span>)
==== Highlighter Toolbar ====
Features:
* "Highlight" button switches between highlight (choose an element) and selected modes (<span id="F8">F8</span>)* Buttons toggle the tools sidebar on/off and which tool is in the sidebar. For example, clicking the Styles button will show the style inspector. The initial expected buttons cover the Layout and Styles. (<span id="F9">F9</span>)
* Breadcrumb-style navigation from the selected element all the way up to the top of the document and down to the next child
* Button to slide the toolbar up and make room for the HTML Tree (<span id="F10">F10</span>)
==== Sidebar ====
Features:
* As with the Web Console, opening a tool in the sidebar changes the viewport size but does not cause a reflow (instead adding a scrollbar if necessary) (<span id="F11">F11</span>)* Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows. (<span id="F12">F12</span>)
|Feature ux design=In progress mockups are here:
