DevTools/Features/Highlighter: Difference between revisions

no edit summary
No edit summary
No edit summary
Line 25: Line 25:
|Feature users and use cases=All web developers and designers of many different skill levels need to work with CSS.
|Feature users and use cases=All web developers and designers of many different skill levels need to work with CSS.


=== Investigating a Page ===
==== Investigating a Page ====


In the course of developing a page, I need to figure out why my headline is the wrong color. I use the Highlighter on the headline in question and look at the Style Inspector. Not seeing my answer there, I use the [[DevTools/Features/StyleDoctor|Style Doctor]] to get specific information about the stylesheet rule that I expected to work.
In the course of developing a page, I need to figure out why my headline is the wrong color. I use the Highlighter on the headline in question and look at the Style Inspector. Not seeing my answer there, I use the [[DevTools/Features/StyleDoctor|Style Doctor]] to get specific information about the stylesheet rule that I expected to work.
|Feature functional spec==== Invoking the Highlighter ===
|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.
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 "unlocked" state.
You can also launch the Highlighter via the Web Developer menu ("Highlighter" menu option). The Highlighter will start out in the "unlocked" state.
|Feature ux design=In progress mockups are here:
https://wiki.mozilla.org/User:Rcampbell/DevToolsPlanning
|Feature qa review=https://wiki.mozilla.org/DevTools/Features/Highlighter/TestPlan
|Feature qa review=https://wiki.mozilla.org/DevTools/Features/Highlighter/TestPlan
}}
}}
canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093

edits