Status
| Highlighter | |
| Stage | Development |
| Status | In progress |
| Release target | Firefox 10 |
| Health | OK |
| Status note | Major parts landed. More being reviewed/landing. |
{{#set:Feature name=Highlighter
|Feature stage=Development |Feature status=In progress |Feature version=Firefox 10 |Feature health=OK |Feature status note=Major parts landed. More being reviewed/landing. }}
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 root)
- Finalize naming of the tool and associated terminology
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
The Highlighter is part of the Font Fixing use case.
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?
Making Common Changes To Nodes
Add/remove CSS classes, manipulate the ID
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. The initial version does not support multiple element selection.
Stage 2: Design
5. Functional specification
Terminology
The tool that lets you visually select an element on that page for use by "element-centric" tools (such as the Style Inspector) is called the Highlighter. It has a menu item on the Mac at Tools->Web Developer->Highlighter and on Windows at Firefox->Web Developer->Highlighter. You can also get to it via a "Highlight Element" context menu item.
The Highlighter has two modes:
- Highlight mode – as you move the mouse around, the highlight follows until you click a page element
- Selected mode – an element is selected and you can freely move the mouse around without changing the selection
The Highlighter Toolbar has a button, labeled "Highlight" that switches between the Highlight and Selected modes.
Invoking the Highlighter
You can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu (F1). 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) (F2). The Highlighter will start out in the "highlight" mode.
When the Developer Toolbar lands, there will also be a Highlighter button there.
Finally, you can use the command line to highlight an element (F3). Multiple selected elements are not supported right now.
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.
Highlighted Element Display
When an element is highlighted, the rest of the page is dimmed. Near the element, there is an "Infobar" that provides a quick view of information that is useful to page designers (see below).
Around the element, the margins and padding are displayed (F4).
Infobar
When you highlight a page element, the "infobar" appears to quickly give you the most useful information about that element.
Features:
- displays tag name, ID, CSS classes
- clicking on a class name toggles that class for the element
- add a class (F5)
- add an ID to an element that does not have one (F6)
- edit the ID on an element (F7)
Highlighter Toolbar
The Highlighter Toolbar appears above the Developer Toolbar at the bottom of the window and provides access to element-oriented tools and quick, precise access to other elements.
Features:
- "Highlight" button switches between highlight (choose an element) and selected modes (F8)
- Buttons toggle the tools sidebar on/off and which tool is in the sidebar. For example, clicking the Styles button will show the style inspector. The initial expected buttons cover the Layout and Styles. (F9)
- Breadcrumb-style navigation from the selected element all the way up to the top of the document and down to the next child
- Button to slide the toolbar up and make room for the HTML Tree (F10)
Sidebar
Today's screens tend to be wider than they are tall. By placing as many tools as possible in a sidebar on the right, we can take better advantage of the available screen real estate.
Features:
- As with the Web Console, opening a tool in the sidebar changes the viewport size but does not cause a reflow (instead adding a scrollbar if necessary) (F11)
- Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows. (F12)
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 root)
- Finalize naming of the tool and associated terminology
|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
The Highlighter is part of the Font Fixing use case.
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?
Making Common Changes To Nodes
Add/remove CSS classes, manipulate the ID
|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. The initial version does not support multiple element selection.
|Feature functional spec=
Terminology
The tool that lets you visually select an element on that page for use by "element-centric" tools (such as the Style Inspector) is called the Highlighter. It has a menu item on the Mac at Tools->Web Developer->Highlighter and on Windows at Firefox->Web Developer->Highlighter. You can also get to it via a "Highlight Element" context menu item.
The Highlighter has two modes:
- Highlight mode – as you move the mouse around, the highlight follows until you click a page element
- Selected mode – an element is selected and you can freely move the mouse around without changing the selection
The Highlighter Toolbar has a button, labeled "Highlight" that switches between the Highlight and Selected modes.
Invoking the Highlighter
You can launch the Highlighter by right-clicking on an element and selecting "Highlight Element" from the context menu (F1). 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) (F2). The Highlighter will start out in the "highlight" mode.
When the Developer Toolbar lands, there will also be a Highlighter button there.
Finally, you can use the command line to highlight an element (F3). Multiple selected elements are not supported right now.
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.
Highlighted Element Display
When an element is highlighted, the rest of the page is dimmed. Near the element, there is an "Infobar" that provides a quick view of information that is useful to page designers (see below).
Around the element, the margins and padding are displayed (F4).
Infobar
When you highlight a page element, the "infobar" appears to quickly give you the most useful information about that element.
Features:
- displays tag name, ID, CSS classes
- clicking on a class name toggles that class for the element
- add a class (F5)
- add an ID to an element that does not have one (F6)
- edit the ID on an element (F7)
Highlighter Toolbar
The Highlighter Toolbar appears above the Developer Toolbar at the bottom of the window and provides access to element-oriented tools and quick, precise access to other elements.
Features:
- "Highlight" button switches between highlight (choose an element) and selected modes (F8)
- Buttons toggle the tools sidebar on/off and which tool is in the sidebar. For example, clicking the Styles button will show the style inspector. The initial expected buttons cover the Layout and Styles. (F9)
- Breadcrumb-style navigation from the selected element all the way up to the top of the document and down to the next child
- Button to slide the toolbar up and make room for the HTML Tree (F10)
Sidebar
Today's screens tend to be wider than they are tall. By placing as many tools as possible in a sidebar on the right, we can take better advantage of the available screen real estate.
Features:
- As with the Web Console, opening a tool in the sidebar changes the viewport size but does not cause a reflow (instead adding a scrollbar if necessary) (F11)
- Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows. (F12)
|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 | 1 |
| Theme / Goal | ` |
| Roadmap | Developer Tools |
| Secondary roadmap | ` |
| Feature list | Desktop |
| Project | ` |
| Engineering team | DevTools |
{{#set:Feature priority=P1
|Feature rank=1 |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=` }}