canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/Highlighter: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 42: | Line 42: | ||
You can also launch the Highlighter via the "Web Developer" menu ("Highlighter" menu option). The Highlighter will start out in the "highlight" mode. | 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 ==== | ==== Modes ==== | ||
| Line 51: | Line 53: | ||
[[File:HighlighterInfobar.png|Highlighter Infobar]] | [[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 | 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, CSS classes | |||
* clicking on a class name toggles that class for the element | |||
==== Highlighter Toolbar ==== | ==== Highlighter Toolbar ==== | ||
| Line 57: | Line 64: | ||
[[File:HighlighterToolbar.png|Highlighter Toolbar]] | [[File:HighlighterToolbar.png|Highlighter Toolbar]] | ||
The Highlighter Toolbar provides | The Highlighter 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. | ||
Features: | |||
* Breadcrumb-style navigation from the selected element all the way up to the top of the document | |||
* Buttons toggle the tools sidebar on/off and which tool is in the sidebar. | |||
* Can expand to make space for the HTML Tree. | |||
==== Sidebar ==== | |||
Today's screens tend to be wider than they are tall. By placing as many tools as possible in a sidebar on the right, we can take better advantage of the available 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: | |Feature ux design=In progress mockups are here: | ||