DevTools/Features/Highlighter: Difference between revisions

no edit summary
(Created page with "= Highlighter = 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 DevT...")
 
No edit summary
Line 1: Line 1:
= Highlighter =
{| 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]]
| {{StatusHealthy|status=Working out scope, prototype implementation starting.}}
| TBD
| Kevin Dangoor
<section end="status" />
|-
|}
 
== Summary ==


The Inspector is a web designer-oriented feature that was initially planned
The Inspector is a web designer-oriented feature that was initially planned
Line 5: Line 21:
the DevTools SDK and was left in an inactive state in the Firefox tree.
the DevTools SDK and was left in an inactive state in the Firefox tree.


We are going to rebuild the Inspector on top of the DevTools SDK and plan
We are going to rebuild the Inspector as the Highlighter and plan
to take the UI in different directions than the original planned Inspector.
to take the UI in different directions than the original planned Inspector.


Line 14: Line 30:
etc.) will work with the selected elements.
etc.) will work with the selected elements.


= Highlighter Usage =
== Release Requirements ==
 
TBD
 
* Electrolysis-ready
* Uses a shared knowledge of selected element(s)
* Easy for tools and views to plug in
* Reasonable handling of the "Inspect Element" context menu item if both Highlighter and Firebug are installed
 
== Next Steps ==
 
* Determine scope for feature
 
== Related Bugs & Dependencies ==
 
See the [http://mozilla.github.com/devtools/2011/status.html#highlighter status page].
 
== 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
 
== Designs ==
 
[[Image:DevTools_Highlighter_Mockup.png]]
[[Image:DevTools_Highlighter_Mockup.png]]


== A Story ==
== 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.
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.
Line 23: Line 66:
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.
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 ==
=== Annotations ===


(not sure what to call them, stickies or hangers-on doesn't sound particularly appealing. Tags could be confusing.)
(not sure what to call them, stickies or hangers-on doesn't sound particularly appealing. Tags could be confusing.)
Line 33: Line 76:
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.
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 ==
=== 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.
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 ==
=== 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.
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.
Line 43: Line 86:
Examples might be, export them as a list or manipulate them directly showing unions of style rules or only the intersections.
Examples might be, export them as a list or manipulate them directly showing unions of style rules or only the intersections.


=== Z-order selection ===
==== 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)
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
toggling pseudo-classes


=== 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?
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]]
canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093

edits