canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/Highlighter: Difference between revisions
DevTools/Features/Highlighter (view source)
Revision as of 16:59, 1 September 2011
, 1 September 2011no edit summary
mNo edit summary |
No edit summary |
||
| Line 16: | Line 16: | ||
{{FeaturePageBody | {{FeaturePageBody | ||
|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) | |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 | |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. | 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. | ||
| Line 40: | Line 42: | ||
Add/remove CSS classes, manipulate the ID | Add/remove CSS classes, manipulate the ID | ||
|Feature requirements=As a new feature, this should be designed to be e10s ready. | |Feature requirements=As a new feature, this should be designed to be e10s ready. | ||
|Feature non-goals=The initial version does not need to be remotable. | |Feature non-goals=The initial version does not need to be remotable. The initial version does not support multiple element selection. | ||
|Feature functional spec=[[File:HighlighterFolded.png|Highlighter in Action]] | |Feature functional spec=[[File:HighlighterFolded.png|Highlighter in Action]] | ||
| Line 57: | Line 59: | ||
==== Invoking the Highlighter ==== | ==== Invoking the Highlighter ==== | ||
You can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu. This will bring the Highlighter into view with the element under the cursor already selected. The element is in the "locked" state. | You can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu (F1). 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). The Highlighter will start out in the "highlight" mode. | You can also launch the Highlighter via the "Web Developer" menu ("Highlighter" menu option) (F2). The Highlighter will start out in the "highlight" mode. | ||
When the Developer Toolbar lands, there will also be a Highlighter button there. | When the Developer Toolbar lands, there will also be a Highlighter button there. | ||
Finally, you can use the command line to highlight an element (F3). Multiple selected elements are not supported right now. | |||
==== Modes ==== | ==== Modes ==== | ||
| Line 71: | Line 75: | ||
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). | 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. | Around the element, the margins and padding are displayed (F4). | ||
==== Infobar ==== | ==== Infobar ==== | ||
| Line 83: | Line 87: | ||
* displays tag name, ID, CSS classes | * displays tag name, ID, CSS classes | ||
* clicking on a class name toggles that class for the element | * clicking on a class name toggles that class for the element | ||
* add a class | * add a class (F5) | ||
* add an ID to an element that does not have one | * add an ID to an element that does not have one (F6) | ||
* edit the ID on an element | * edit the ID on an element (F7) | ||
==== Highlighter Toolbar ==== | ==== Highlighter Toolbar ==== | ||
| Line 95: | Line 99: | ||
Features: | Features: | ||
* "Highlight" button switches between highlight (choose an element) and selected modes | * "Highlight" button switches between highlight (choose an element) and selected modes (F8) | ||
* 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. | * 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. (F9) | ||
* Breadcrumb-style navigation from the selected element all the way up to the top of the document and down to the next child | * 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 | * Button to slide the toolbar up and make room for the HTML Tree (F10) | ||
==== Sidebar ==== | ==== Sidebar ==== | ||
| Line 106: | Line 110: | ||
Features: | 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) | * 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) (F11) | ||
* Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows. | * Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows. (F12) | ||
|Feature ux design=In progress mockups are here: | |Feature ux design=In progress mockups are here: | ||