DevTools/Features/Highlighter: Difference between revisions
No edit summary |
No edit summary |
||
| Line 20: | Line 20: | ||
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 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 " | The Highlighter is a gateway to "element-centric" tools. The most important of these tools is the [[DevTools/Features/StyleInspector|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. | 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. | |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. | 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 [http://cnn.com CNN.com], there is an accordion widget. How does that get its sleek grey gradient? | |||
|Feature requirements=As a new feature, this should be designed to be e10s ready. | |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 non-goals=The initial version does not need to be remotable. | ||
| Line 33: | Line 39: | ||
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 " | 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 ==== | |||
==== Highlighter Toolbar ==== | |||
|Feature ux design=In progress mockups are here: | |Feature ux design=In progress mockups are here: | ||
Revision as of 14:57, 15 August 2011
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
`
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
Highlighter Toolbar
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 "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
Highlighter Toolbar
|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=` }}