|Feature feature manager=Kevin Dangoor
|Feature lead engineer=Rob Campbell
|Feature qa lead=Teodosia Pop
|Feature additional members=Paul Rouget
}}
{{FeaturePageBody
|Feature overview=The Inspector Highlighter is a web designer-oriented feature that was initially plannedfor Firefox 4 (as the Inspector) but was not ready in time to ship. The code was written beforethe DevTools SDK and was left in an inactive state time in between has allowed us to rethink the Firefox treetool.
We are going to rebuild The Highlighter is a visual entry point into tools that help web developers work om their page designs. It gets its name from the Inspector as distinctive way in which it highlights an element on the page. The Highlighter presents some information and planto take controls right near the UI in different directions than element itself, making the original planned Inspectormost common operations quick and easy.
As originally conceivedThe Highlighter is a gateway to "node-centric" tools. The most important of these tools is the [[DevTools/Features/StyleInspector|Style Inspector]], which provides detailed information about the Inspector was CSS applied to the selected node. These other tools are selected via a tool toolbar that allowed also provides quick access to other elements around the visualhighlighted node.selection of an element 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 a set designers of panels that many different skill levels need to work with that elementCSS.The revised concept is === Investigating a "Highlighter" that is just Page === In the visual selector course of elements with the ability developing a page, I need to overlay additional information directly over figure out why my headline is the page being inspectedwrong color. Separate tools (I use the Highlighter on the headline in question and look at the Style DoctorInspector. Not seeing my answer there, I use the [[DevTools/Features/StyleDoctor|Style Inspector, Doctor]] to get specific information about the stylesheet rule that I expected to work.|Feature functional spec==== Invoking the Highlighter === etcYou can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu.) This will work bring the Highlighter into view with the element under the cursor already selected elements.The element is in the "locked" state. |Feature users and use cases=All web developersYou can also launch the Highlighter via the Web Developer menu ("Highlighter" menu option). The Highlighter will start out in the "unlocked" state.
|Feature qa review=https://wiki.mozilla.org/DevTools/Features/Highlighter/TestPlan
}}
|Feature security status=sec-review-needed
}}
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Status
| style="font-weight: bold; background: #DDD;" | ETA
| style="font-weight: bold; background: #DDD;" | Owner
|-
<section begin="status" />
| [[DevTools/Features/Highlighter|Highlighter tool]]
| {{StatusAtRisk|status=Initial code landed, but missing important parts}}
| 2011/07/15
| Kevin Dangoor
<section end="status" />
|-
|}
== Summary ==
The Inspector is a web designer-oriented feature that was initially planned
for Firefox 4 but was not ready in time to ship. The code was written before
the DevTools SDK and was left in an inactive state in the Firefox tree.
We are going to rebuild the Inspector as the Highlighter and plan
to take the UI in different directions than the original planned Inspector.
As originally conceived, the Inspector was a tool that allowed the visual
selection of an element and a set of panels that work with that element.
The revised concept is a "Highlighter" that is just the visual selector of elements with the ability to overlay additional information directly
over the page being inspected. Separate tools (Style Doctor, Style Inspector,
etc.) will work with the selected elements.
== Release Requirements ==
* visibly highlight a node on the page without modifying the page
* annotate a node with additional information (see below)
* visibly highlight multiple nodes without annotations
* node will be annotated with tag name, class list, ID
* tag name annotation can be expanded to HTML tree for that node
* ability to plug tools that work with nodes into the Highlighter (eg Style Inspector)
* $0 variable to get to selected element from the Web Console
* Uses a shared knowledge of selected element(s) (eg you can select a node from the command line and then open the highlighter)
* Reasonable handling of the "Inspect Element" context menu item if both Highlighter and Firebug are installed (likely via a Highlight Element context menu item)
== Next Steps ==
* Land initial patch
* Add subsequent features
== Related Bugs & Dependencies ==
See the [http://mozilla.github.com/devtools/2011/status.html#highlighter status page].
Repository:
[http://hg.mozilla.org/users/rcampbell_mozilla.com/patches-highlighter http://hg.mozilla.org/users/rcampbell_mozilla.com/patches-highlighter]
== Team ==
We would love to have additional input and help on the Highlighter and the tools that plug into it! Discuss on dev-apps-firefox or during our [[DevTools|weekly calls]].
* Rob Campbell: lead developer
* Kevin Dangoor: PM
* Teodosia Pop: QA
== Designs ==
This mockup has largely been superceded, but the pieces are still somewhat consistent.
[[Image:DevTools_Highlighter_Mockup.png]]
[[Image:Highlighter-detail.png]]
== Goals/Use Cases ==
=== A Story ===
Web Developer extraordinaire Petraeus Maximus loads his web page into Firefox to view it. He notices that the alignment on one of the divs is off by a couple of pixels so he fires up the Highlighter by clicking on the inspect button in the toolbar and hovering over the div he's interested in. Once highlighted, he clicks on the div which reveals the associated annotations and reveals the tabs for the various side panels.
Since Petraeus' interested in checking the alignment on this div, he opens the Style panel by clicking the tab on the side of the highlighter area. Everything looks reasonable, so he continues searching for the source of the offset in the adjacent nodes. Clicking outside his selected node in the highlighter area reactivates selection mode and he's able to hover over a spacer div next to the node he was originally highlighting. He clicks it, views the style and notices a margin declaration that causes his problem.
=== Annotations ===
(not sure what to call them, stickies or hangers-on doesn't sound particularly appealing. Tags could be confusing.)
Often, when one is using a traditional inspector, the HTML panel is useful for getting the ID of an element or inspecting classes. It's useful to get these to look them up in the source document, or provide a key to pass to a function in jQuery or using a DOM lookup. Making these visible through light, floating tags attached to the selected node makes them readily visible without having the bulk and screen space of a loaded HTML panel.
Providing an API to allow extension authors to create their own annotations could be useful as well, e.g., in the context of a JS library.
Not sure how best to display these. They're currently shown the same way as the ID and Class tags are. Some alternative suggestions could be a window blind / shade to expand and collapse them, or draw the text over the highlighter background.
=== Side/Edge Panels ===
A base set of panels should be available for users. The standard HTML, Style and DOM panels would make sense. But what if a developer wants to create their own? Having an API to create these panels associated with the Highlighter inspector could be useful for add-on authors.
=== Selection ===
Some nicer controls for selecting Parents, Siblings and Children might be useful (not pictured). Additionally, some selection controls for selecting floats, or elements with absolute position could be useful as well. One nice ability with a full screen highlighter like this is that we should be able to highlight certain classes of element and "do things" with that group.
Examples might be, export them as a list or manipulate them directly showing unions of style rules or only the intersections.
==== Z-order selection ====
It could be useful to select items beneath the visible node. Some mechanism to select hidden elements would be ideal preferably using the mouse. (one possibility: use mouse-wheel while hovering to ascend/descend through z-order)
toggling pseudo-classes
==== Pseudo-classes ====
Having a means to cycle through (and lock) :hover and :active states would be useful, if applicable. Maybe they should be displayed as clickable areas around the highlighted node?
== Non-Goals ==
* Style Inspector, HTML tree and things of that nature were part of the original Inspector. They are not part of the Highlighter.
== Other Documentation ==
See the Inspect Element feature in Firebug and Chrome.
__NOTOC__
[[Category:Feature]]
[[Category:Firefox]]
[[Category:DevTools]]
[[Category:Priority 1]]
