DevTools/Features/Highlighter: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(44 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{FeatureStatus
{{FeatureStatus
|Feature name=Highlighter
|Feature name=Page Inspector / Highlighter
|Feature stage=Stage 4 - Development
|Feature stage=Complete
|Feature version=Firefox 8
|Feature status=Complete
|Feature version=Firefox 10
|Feature health=OK
|Feature health=OK
|Feature status note=Initial patch landed. Working on refinements.
}}
}}
{{FeatureTeam
{{FeatureTeam
Line 10: Line 10:
|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 Page 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
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 Page Inspector is a visual entry point into tools that help web developers work on their page designs. The central part of the Page Inspector is the Highlighter. 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 Page Inspector 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.
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 and therefore will use the Page Inspector regularly.
etc.) will work with the selected elements.
|Feature users and use cases=All web developers.
}}
{{FeatureInfo
|Feature priority=P1
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
{{FeatureTeamStatus
|Feature products status=tbd
|Feature engineering status=tbd
|Feature security status=tbd
|Feature privacy status=tbd
|Feature localization status=tbd
|Feature accessibility status=tbd
|Feature qa status=tbd
|Feature ux status=tbd
}}
{| 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 ==
==== Tracking Down a Styling Issue ====


The Inspector is a web designer-oriented feature that was initially planned
The Page Inspector is part of the [http://people.mozilla.org/~kdangoor/usecases/minotaur/index.html#Font%20Fixing Font Fixing] use case.
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
==== Learning About a Page ====
to take the UI in different directions than the original planned Inspector.


As originally conceived, the Inspector was a tool that allowed the visual
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.
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 ==
On the front page of [http://cnn.com CNN.com], there is an accordion widget. How does that get its sleek grey gradient?


* visibly highlight a node on the page without modifying the page
==== Making Common Changes To Nodes ====
* 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 ==
Add/remove CSS classes, manipulate the ID
|Feature requirements=# {{done|}} [[#F2]] Inspect in Web Developer menu
# {{done|}} [[#F8]] Button to switch between inspect and selected modes
# {{done|}} [[#F9]] Toolbar buttons to toggle other tools
# {{done|}} [[#F11]] Element tools are contained in a sidebar (ideally one that doesn't cause reflow)


* Land initial patch
Desired, but not required for release:
* Add subsequent features


== Related Bugs & Dependencies ==
# {{done|}} [[#F1]] Context menu item to inspect element
# {{done|}} [[#F10]] Toolbar button to display the HTML tree
# [[#F4]] Display margins and padding (now in [[DevTools/Features/LayoutInHighlighter]])
# {{done|}} [[#F3]] Select an element via the command line
# ''not now'' [[#F12]] Ability to pop the sidebar out into a separate window
|Feature non-goals=The initial version does not need to be remotable. The initial version does not support multiple element selection.
|Feature functional spec=[[File:HighlighterFolded.png|Highlighter in Action]]


See the [http://mozilla.github.com/devtools/2011/status.html#highlighter status page].
==== Terminology ====


Repository:
'''Note''': this terminology has changed from the original design of this feature. The tool that is used to dive into a page is called the "Page Inspector" or just the Inspector. If we refer to the "Highlighter" that is just the part of the Page Inspector that visually shows the selected page element.
[http://hg.mozilla.org/users/rcampbell_mozilla.com/patches-highlighter http://hg.mozilla.org/users/rcampbell_mozilla.com/patches-highlighter]


== Team ==
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 Page Inspector or just Inspector. It has a menu item on the Mac at Tools->Web Developer->Inspect and on Windows at Firefox->Web Developer->Inspect. You can also get to it via a "Inspect Element" context menu item.


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]].
The Inspector has two modes:


* Rob Campbell: lead developer
* Inspection mode – as you move the mouse around, the highlight follows until you click a page element
* Kevin Dangoor: PM
* Selected mode – an element is selected and you can freely move the mouse around without changing the selection
* Teodosia Pop: QA


== Designs ==
The Inspector Toolbar has a button, labeled "Inspect" that switches between the Inspection and Selected modes.


This mockup has largely been superceded, but the pieces are still somewhat consistent.


[[Image:DevTools_Highlighter_Mockup.png]]
==== Invoking the Page Inspector ====


[[Image:Highlighter-detail.png]]
You can launch the Page Inspector by right-clicking on an element and selecting "Inspect Element" from the context menu (<span id="F1">F1</span>). This will bring the Inspector into view with the element under the cursor already selected. The element is in the "selected" state.


== Goals/Use Cases ==
You can also launch the Inspector via the "Web Developer" menu ("Inspect" menu option) (<span id="F2">F2</span>). The Inspector will start out in the "inspection" mode.


=== A Story ===
When the Developer Toolbar lands, there will also be a Inspect button there.


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.
Finally, you can use the command line to select an element (<span id="F3">F3</span>). Multiple selected elements are not supported right now.


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.
==== Modes ====


=== Annotations ===
The Inspector has two modes: "inspection" and "selected". In "inspection" 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 "Inspect" button in the Inspector Toolbar to switch back into inspection mode.


(not sure what to call them, stickies or hangers-on doesn't sound particularly appealing. Tags could be confusing.)
==== Selected Element Display ====


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.
When an element is selected, 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).


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.
Around the element, the margins and padding are displayed (<span id="F4">F4</span>).


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.
==== Infobar ====


=== Side/Edge Panels ===
[[File:HighlighterInfobar.png|Highlighter Infobar]]


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.
When you select a page element, the "infobar" appears to quickly give you the most useful information about that element.


=== Selection ===
Features:


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.
* displays tag name, ID, CSS classes


Examples might be, export them as a list or manipulate them directly showing unions of style rules or only the intersections.
There is a separate feature to [[DevTools/Features/RichInfobar|add basic editing to the Infobar]].


==== Z-order selection ====
==== Page Inspector Toolbar ====


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)
[[File:HighlighterToolbar.png|Highlighter Toolbar]]
toggling pseudo-classes


==== Pseudo-classes ====
The Inspector 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.


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?
Features:


== Non-Goals ==
* "Inspect" button switches between inspection (choose an element) and selected modes (<span id="F8">F8</span>)
* 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. (<span id="F9">F9</span>)
* 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 (<span id="F10">F10</span>)


* Style Inspector, HTML tree and things of that nature were part of the original Inspector. They are not part of the Highlighter.
==== Sidebar ====


== Other Documentation ==
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.


See the Inspect Element feature in Firebug and Chrome.
Features:


__NOTOC__
* 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) (<span id="F11">F11</span>)
* Also similar to the Web Console, tools opened in the sidebar can be popped out into separate windows. (<span id="F12">F12</span>)
|Feature ux design=In progress mockups are here:


[[Category:Feature]]
https://wiki.mozilla.org/User:Rcampbell/DevToolsPlanning
[[Category:Firefox]]
|Feature qa review=https://wiki.mozilla.org/QA/Waverley/Developer-Tools/Highlighter/TestPlan
[[Category:DevTools]]
}}
[[Category:Priority 1]]
{{FeatureInfo
|Feature priority=P1
|Feature rank=1
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
{{FeatureTeamStatus
|Feature security status=sec-review-complete
|Feature security health=OK
|Feature security notes=9-Dec-2011
* [[Security/reviews/firefox/PageInspectorHighlighter | Notes]]
}}

Latest revision as of 13:41, 30 August 2012

Please use "Edit with form" above to edit this page.

Status

Page Inspector / Highlighter
Stage Complete
Status Complete
Release target Firefox 10
Health OK
Status note `

{{#set:Feature name=Page Inspector / Highlighter

|Feature stage=Complete |Feature status=Complete |Feature version=Firefox 10 |Feature health=OK |Feature status note=` }}

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 Page Inspector 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 Page Inspector is a visual entry point into tools that help web developers work on their page designs. The central part of the Page Inspector is the Highlighter. 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 Page Inspector 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 Page Inspector regularly.

Tracking Down a Styling Issue

The Page Inspector 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

  1. [DONE] #F2 Inspect in Web Developer menu
  2. [DONE] #F8 Button to switch between inspect and selected modes
  3. [DONE] #F9 Toolbar buttons to toggle other tools
  4. [DONE] #F11 Element tools are contained in a sidebar (ideally one that doesn't cause reflow)

Desired, but not required for release:

  1. [DONE] #F1 Context menu item to inspect element
  2. [DONE] #F10 Toolbar button to display the HTML tree
  3. #F4 Display margins and padding (now in DevTools/Features/LayoutInHighlighter)
  4. [DONE] #F3 Select an element via the command line
  5. not now #F12 Ability to pop the sidebar out into a separate window

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

Highlighter in Action

Terminology

Note: this terminology has changed from the original design of this feature. The tool that is used to dive into a page is called the "Page Inspector" or just the Inspector. If we refer to the "Highlighter" that is just the part of the Page Inspector that visually shows the selected page element.

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 Page Inspector or just Inspector. It has a menu item on the Mac at Tools->Web Developer->Inspect and on Windows at Firefox->Web Developer->Inspect. You can also get to it via a "Inspect Element" context menu item.

The Inspector has two modes:

  • Inspection 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 Inspector Toolbar has a button, labeled "Inspect" that switches between the Inspection and Selected modes.


Invoking the Page Inspector

You can launch the Page Inspector by right-clicking on an element and selecting "Inspect Element" from the context menu (F1). This will bring the Inspector into view with the element under the cursor already selected. The element is in the "selected" state.

You can also launch the Inspector via the "Web Developer" menu ("Inspect" menu option) (F2). The Inspector will start out in the "inspection" mode.

When the Developer Toolbar lands, there will also be a Inspect button there.

Finally, you can use the command line to select an element (F3). Multiple selected elements are not supported right now.

Modes

The Inspector has two modes: "inspection" and "selected". In "inspection" 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 "Inspect" button in the Inspector Toolbar to switch back into inspection mode.

Selected Element Display

When an element is selected, 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

Highlighter Infobar

When you select a page element, the "infobar" appears to quickly give you the most useful information about that element.

Features:

  • displays tag name, ID, CSS classes

There is a separate feature to add basic editing to the Infobar.

Page Inspector Toolbar

Highlighter Toolbar

The Inspector 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:

  • "Inspect" button switches between inspection (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:

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 Page Inspector 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 Page Inspector is a visual entry point into tools that help web developers work on their page designs. The central part of the Page Inspector is the Highlighter. 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 Page Inspector 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 Page Inspector regularly.

Tracking Down a Styling Issue

The Page Inspector 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=# [DONE] #F2 Inspect in Web Developer menu

  1. [DONE] #F8 Button to switch between inspect and selected modes
  2. [DONE] #F9 Toolbar buttons to toggle other tools
  3. [DONE] #F11 Element tools are contained in a sidebar (ideally one that doesn't cause reflow)

Desired, but not required for release:

  1. [DONE] #F1 Context menu item to inspect element
  2. [DONE] #F10 Toolbar button to display the HTML tree
  3. #F4 Display margins and padding (now in DevTools/Features/LayoutInHighlighter)
  4. [DONE] #F3 Select an element via the command line
  5. not now #F12 Ability to pop the sidebar out into a separate window

|Feature non-goals=The initial version does not need to be remotable. The initial version does not support multiple element selection. |Feature functional spec=Highlighter in Action

Terminology

Note: this terminology has changed from the original design of this feature. The tool that is used to dive into a page is called the "Page Inspector" or just the Inspector. If we refer to the "Highlighter" that is just the part of the Page Inspector that visually shows the selected page element.

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 Page Inspector or just Inspector. It has a menu item on the Mac at Tools->Web Developer->Inspect and on Windows at Firefox->Web Developer->Inspect. You can also get to it via a "Inspect Element" context menu item.

The Inspector has two modes:

  • Inspection 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 Inspector Toolbar has a button, labeled "Inspect" that switches between the Inspection and Selected modes.


Invoking the Page Inspector

You can launch the Page Inspector by right-clicking on an element and selecting "Inspect Element" from the context menu (F1). This will bring the Inspector into view with the element under the cursor already selected. The element is in the "selected" state.

You can also launch the Inspector via the "Web Developer" menu ("Inspect" menu option) (F2). The Inspector will start out in the "inspection" mode.

When the Developer Toolbar lands, there will also be a Inspect button there.

Finally, you can use the command line to select an element (F3). Multiple selected elements are not supported right now.

Modes

The Inspector has two modes: "inspection" and "selected". In "inspection" 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 "Inspect" button in the Inspector Toolbar to switch back into inspection mode.

Selected Element Display

When an element is selected, 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

Highlighter Infobar

When you select a page element, the "infobar" appears to quickly give you the most useful information about that element.

Features:

  • displays tag name, ID, CSS classes

There is a separate feature to add basic editing to the Infobar.

Page Inspector Toolbar

Highlighter Toolbar

The Inspector 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:

  • "Inspect" button switches between inspection (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-complete 9-Dec-2011
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-complete |Feature security health=OK |Feature security notes=9-Dec-2011

|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=465746"