Status
| Highlighter | |
| Stage | Development |
| Status | In progress |
| Release target | Firefox 9 |
| Health | OK |
| Status note | Initial patch landed. Working on refinements. |
{{#set:Feature name=Highlighter
|Feature stage=Development |Feature status=In progress |Feature version=Firefox 9 |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
- What happens to the Highlighter Toolbar breadcrumbs when you have a very deeply nested tree? Is there truncation at one part of the tree or other? (my initial thought is to truncate at the tree's route)
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 "element-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 and therefore will use the Highlighter regularly.
Tracking Down a Styling Issue
In the course of developing a page, I need to figure out why my headline is the wrong color. This use case uses Highlighter as a gateway to other tools.
Learning About a Page
Starting with the original "developer tool" for the web, View Source, people have always used tools to look at existing sites and learn about what makes them work. The Highlighter and the element-centric tools that are accessed through it can help with this.
On the front page of CNN.com, there is an accordion widget. How does that get its sleek grey gradient?
3. Dependencies
`
4. Requirements
As a new feature, this should be designed to be e10s ready.
Non-goals
The initial version does not need to be remotable.
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 "highlight" mode.
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
When you highlight a page element, the "infobar" appears to quickly give you the most useful information about that element (tag name, ID of the element and the CSS classes on the element). Additionally, if you click a class name, the Highlighter will toggle that class for that element.
Highlighter Toolbar
The Highlighter Toolbar provides breadcrumb-style navigation to other elements in the document and buttons to toggle other element tools. When you toggle the other element tools, they appear in the sidebar on the right. Only one tool is visible in the sidebar at a time.
6. User experience design
In progress mockups are here:
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=* What happens to the Highlighter Toolbar breadcrumbs when you have a very deeply nested tree? Is there truncation at one part of the tree or other? (my initial thought is to truncate at the tree's route) |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 "element-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 and therefore will use the Highlighter regularly.
Tracking Down a Styling Issue
In the course of developing a page, I need to figure out why my headline is the wrong color. This use case uses Highlighter as a gateway to other tools.
Learning About a Page
Starting with the original "developer tool" for the web, View Source, people have always used tools to look at existing sites and learn about what makes them work. The Highlighter and the element-centric tools that are accessed through it can help with this.
On the front page of CNN.com, there is an accordion widget. How does that get its sleek grey gradient? |Feature dependencies=` |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. |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 "highlight" mode.
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
When you highlight a page element, the "infobar" appears to quickly give you the most useful information about that element (tag name, ID of the element and the CSS classes on the element). Additionally, if you click a class name, the Highlighter will toggle that class for that element.
Highlighter Toolbar
The Highlighter Toolbar provides breadcrumb-style navigation to other elements in the document and buttons to toggle other element tools. When you toggle the other element tools, they appear in the sidebar on the right. Only one tool is visible in the sidebar at a time. |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=` }}