DevTools/Features/Highlighter: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 11: Line 11:
|Feature feature manager=Kevin Dangoor
|Feature feature manager=Kevin Dangoor
|Feature lead engineer=Rob Campbell
|Feature lead engineer=Rob Campbell
|Feature qa lead=Teodosia Pop
|Feature additional members=Paul Rouget
|Feature additional members=Paul Rouget
}}
}}
{{FeaturePageBody
{{FeaturePageBody
|Feature overview=The Inspector is a web designer-oriented feature that was initially planned
|Feature overview=The Highlighter 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
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 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
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.
to take the UI in different directions than the original planned Inspector.


As originally conceived, the Inspector was a tool that allowed the visual
The Highlighter is a gateway to "node-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.
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
It is also planned that the HTML Tree view will be available as another way to move the highlight from one node to another.
over the page being inspected. Separate tools (Style Doctor, Style Inspector,
|Feature users and use cases=All web developers and designers of many different skill levels need to work with CSS.
etc.) will work with the selected elements.
 
|Feature users and use cases=All web developers.
=== 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 [[DevTools/Features/StyleDoctor|Style Doctor]] to get specific information about the stylesheet rule that I expected to work.
|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 qa review=https://wiki.mozilla.org/DevTools/Features/Highlighter/TestPlan
|Feature qa review=https://wiki.mozilla.org/DevTools/Features/Highlighter/TestPlan
}}
}}
Line 38: Line 44:
|Feature security status=sec-review-needed
|Feature security status=sec-review-needed
}}
}}
{| class="fullwidth-table"
|-
| style="font-weight: bold; background: #DDD;" | Feature
| style="font-weight: bold; background: #DDD;" | Status
| style="font-weight: bold; background: #DDD;" | ETA
| style="font-weight: bold; background: #DDD;" | Owner
|-
<section begin="status" />
| [[DevTools/Features/Highlighter|Highlighter tool]]
| {{StatusAtRisk|status=Initial code landed, but missing important parts}}
| 2011/07/15
| Kevin Dangoor
<section end="status" />
|-
|}
== 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 [http://mozilla.github.com/devtools/2011/status.html#highlighter status page].
Repository:
[http://hg.mozilla.org/users/rcampbell_mozilla.com/patches-highlighter 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 [[DevTools|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.
[[Image:DevTools_Highlighter_Mockup.png]]
[[Image:Highlighter-detail.png]]
== 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.
__NOTOC__
[[Category:Feature]]
[[Category:Firefox]]
[[Category:DevTools]]
[[Category:Priority 1]]

Revision as of 19:36, 20 July 2011

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

`

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

https://wiki.mozilla.org/DevTools/Features/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=` |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=https://wiki.mozilla.org/DevTools/Features/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=` }}


Retrieved from "https://wiki.allizom.org/index.php?title=DevTools/Features/Highlighter&oldid=331695"