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	Teodosia Pop
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=Teodosia Pop |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 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.

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 "node-centric" tools. The most important of these tools is the 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.

2. Users & use cases

All web developers and designers of many different skill levels need to work with CSS.

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 Style Doctor to get specific information about the stylesheet rule that I expected to work.

3. Dependencies

`

4. Requirements

`

Non-goals

`

Stage 2: Design

5. Functional specification

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 also launch the Highlighter via the Web Developer menu ("Highlighter" menu option). The Highlighter will start out in the "unlocked" state.

6. User experience design

In progress mockups are here:

https://wiki.mozilla.org/User:Rcampbell/DevToolsPlanning

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

https://wiki.mozilla.org/QA/Waverley/Developer-Tools/Highlighter/TestPlan

Operations review

`

Stage 4: Development

9. Implementation

`

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |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.

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 "node-centric" tools. The most important of these tools is the 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 CSS.

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 Style Doctor to get specific information about the stylesheet rule that I expected to work. |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |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 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 implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=https://wiki.mozilla.org/QA/Waverley/Developer-Tools/Highlighter/TestPlan |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=` }}