DevTools/Features/Highlighter

Please use "Edit with form" above to edit this page.

Status

Highlighter
Stage	Development
Status	In progress
Release target	Firefox 8
Health	OK
Status note	Initial patch landed. Working on refinements.

{{#set:Feature name=Highlighter

|Feature stage=Development |Feature status=In progress |Feature version=Firefox 8 |Feature health=OK |Feature status note=Initial patch landed. Working on refinements. }}

Team

Product manager	Kevin Dangoor
Directly Responsible Individual	Kevin Dangoor
Lead engineer	Rob Campbell
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	`
UX lead	`
Product marketing lead	`
Operations lead	`
Additional members	Paul Rouget

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=Rob Campbell |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=Paul Rouget }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

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.

2. Users & use cases

All web developers.

3. Dependencies

`

4. Requirements

`

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

`

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

`

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=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. |Feature users and use cases=All web developers. |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec=` |Feature ux design=` |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}

Feature details

Priority	P1
Rank	999
Theme / Goal	`
Roadmap	Developer Tools
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	DevTools

{{#set:Feature priority=P1

|Feature rank=999 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}

Team status notes

	status	notes
Products	`	`
Engineering	`	`
Security	sec-review-needed	`
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	`
User experience	`	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=sec-review-needed |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}

Feature	Status	ETA	Owner
Highlighter tool	Initial code landed, but missing important parts	2011/07/15	Kevin Dangoor

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 status page.

Repository: 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 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.

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.