Canmove, confirm, emeritus
1,093
edits
Changes
no edit summary
The Highlighter is a visual entry point into tools that help web developers work om their page designs. It gets its name from the distinctive way in which it highlights an element on the page. The Highlighter presents some information and controls right near the element itself, making the most common operations quick and easy.
The Highlighter is a gateway to "nodeelement-centric" tools. The most important of these tools is the [[DevTools/Features/StyleInspector|Style Inspector]], which provides detailed information about the CSS applied to the selected node. These other tools are selected via a toolbar that also provides quick access to other elements around the highlighted node.
It is also planned that the HTML Tree view will be available as another way to move the highlight from one node to another.
|Feature users and use cases=All web developers and designers of many different skill levels need to work with CSSand therefore will use the Highlighter regularly.
==== Investigating Tracking Down a Page Styling Issue ====
In the course of developing a page, I need to figure out why my headline is the wrong color. I This use case uses Highlighter as a gateway to other tools. ==== Learning About a Page ==== Starting with the Highlighter on original "developer tool" for the headline in question and web, View Source, people have always used tools to look at existing sites and learn about what makes them work. The Highlighter and the Style Inspectorelement-centric tools that are accessed through it can help with this. Not seeing my answer there, I use On the front page of [[DevToolshttp:/Features/StyleDoctor|Style Doctorcnn.com CNN.com]] to , there is an accordion widget. How does that get specific information about the stylesheet rule that I expected to work.its sleek grey gradient?
|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.
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 also launch the Highlighter via the "Web Developer " menu ("Highlighter" menu option). The Highlighter will start out in the "unlockedhighlight" statemode. ==== 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 ==== ==== Highlighter Toolbar ====
|Feature ux design=In progress mockups are here:
