Canmove, confirm, emeritus
1,093
edits
Changes
no edit summary
}}
{{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 route)
|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.
|Feature non-goals=The initial version does not need to be remotable.
|Feature functional spec===== 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.
==== Modes ====
The Highlighter has two modes: "highlight" and "selected".In "highlight" 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 "Highlight" button in the Highlighter Toolbar to switch back into highlight mode.
==== 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 (tag name, ID of the element and the CSS classes on the element). Additionally, if you click a class name, the Highlighter will toggle that class for that element.
==== Highlighter Toolbar ====
[[File:HighlighterToolbar.png|Highlighter Toolbar]]
The Highlighter Toolbar provides breadcrumb-style navigation to other elements in the document and buttons to toggle other element tools. When you toggle the other element tools, they appear in the sidebar on the right. Only one tool is visible in the sidebar at a time.
|Feature ux design=In progress mockups are here:
