Canmove, confirm, emeritus
1,093
edits
Changes
no edit summary
You can also launch the Highlighter via the "Web Developer" menu ("Highlighter" menu option). The Highlighter will start out in the "highlight" mode.
When the Developer Toolbar lands, there will also be a Highlighter button there.
==== Modes ====
[[File:HighlighterInfobar.png|Highlighter Infobar]]
When you highlight a page element, the "infobar" appears to quickly give you the most useful information about that element (. Features: * displays tag name, ID of the element and the , CSS classes * clicking on the element). Additionally, if you click a class name, the Highlighter will toggle toggles that class for that the element.
==== Highlighter Toolbar ====
[[File:HighlighterToolbar.png|Highlighter Toolbar]]
The Highlighter Toolbar appears above the Developer Toolbar at the bottom of the window and provides breadcrumbaccess to element-oriented tools and quick, precise access to other elements. Features: * Breadcrumb-style navigation from the selected element all the way up to other elements in the top of the document and buttons to * Buttons toggle other element the toolssidebar on/off and which tool is in the sidebar. When you toggle * Can expand to make space for the other element HTML Tree. ==== Sidebar ==== Today's screens tend to be wider than they are tall. By placing as many tools, they appear as possible in the a sidebar on the right. Only one tool is visible in , we can take better advantage of the sidebar at a timeavailable screen real estate. 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)
* Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows.
|Feature ux design=In progress mockups are here:
