MozillaWiki

DevTools/Features/StyleInspector: Difference between revisions

Page Discussion

DevTools/Features/StyleInspector (view source)

Revision as of 13:42, 30 August 2012

9,370 bytes added ,  30 August 2012
no edit summary
mNo edit summary
No edit summary
 
(33 intermediate revisions by 6 users not shown)
Line 1: Line 1:
{{FeatureStatus
{{FeatureStatus
|Feature name=Style Inspector
|Feature name=Style Inspector
|Feature stage=Development
|Feature stage=Complete
|Feature status=In progress
|Feature status=Complete
|Feature version=Firefox 8
|Feature version=Firefox 10
|Feature health=OK
|Feature health=OK
|Feature status note=Initial patch is undergoing review
}}
}}
{{FeatureTeam
{{FeatureTeam
Line 11: Line 10:
|Feature feature manager=Kevin Dangoor
|Feature feature manager=Kevin Dangoor
|Feature lead engineer=Mike Ratcliffe
|Feature lead engineer=Mike Ratcliffe
|Feature qa lead=Strugariu Florin (irc:Bebe)
}}
}}
{{FeaturePageBody
{{FeaturePageBody
|Feature overview=The Style Inspector works in conjunction with the [[DevTools/Features/Highlighter|Highlighter]] to allow the user to view the CSS rules being applied to an element. It will be an updated version of the style inspector that shipped disabled in Firefox 4.
|Feature overview=The Style Inspector works in conjunction with the [[DevTools/Features/Highlighter|Highlighter]] to allow the user to view the CSS rules being applied to an element. It will be an updated version of the style inspector that shipped disabled in Firefox 4.


The initial focus is on providing a property-oriented view. For example, you'll be able to look up the "color" property and see the rules that went into deciding what color a given element should be.
The initial focus is on providing a property-oriented view. For example, you'll be able to look up the "color" property and see the CSS selectors that went into deciding what color a given element should be.
|Feature users and use cases=All web developers need to be able to analyze the styles applied to a node.
|Feature users and use cases=Users of all experience levels need to work with CSS.
}}
 
{{FeatureInfo
==== Use case 1: looking at how an element is set up. ====
|Feature priority=P1
 
|Feature roadmap=Developer Tools
I want to see how headline links on CNN's front page are styled. I want to see what font and font size they went with.
|Feature list=Desktop
 
|Feature engineering team=DevTools
==== User case 2: troubleshooting a problem ====
}}
 
{{FeatureTeamStatus
The Style Inspector is part of the [http://people.mozilla.org/~kdangoor/usecases/minotaur/index.html#Font%20Fixing Font Fixing] use case.
|Feature products status=tbd
|Feature dependencies=This is an element-centric tool. That means that while it's possible to select an element with a command and then open this tool, practically speaking we need to have the Highlighter working first.
|Feature engineering status=tbd
|Feature requirements=# {{done|}} [[#F1]] Styles button in Page Inspector (aka Highlighter) that opens Style Inspector in a sidebar
|Feature security status=tbd
# {{done|}} [[#F3]] Display only user-defined styles by default
|Feature privacy status=tbd
# {{done|}} [[#F15]] Filter the list of styles by a search
|Feature localization status=tbd
 
|Feature accessibility status=tbd
Desired, but not required in initial release:
|Feature qa status=tbd
 
|Feature ux status=tbd
# [[#F5]] Finalized collapsed style view
}}
# [[#F24]] Updates to the element's styles are reflected in the style inspector
{| class="fullwidth-table"
# {{done|}} [[#F6]] Click property name to expand the property
|-
# [[#F10]] Display values as they appear in the style sheet
| style="font-weight: bold; background: #DDD;" | Feature
# {{done|}} [[#F14]] Include default styles option
| style="font-weight: bold; background: #DDD;" | Status
# [[#F9]] Property name is displayed when it doesn't match the property shown
| style="font-weight: bold; background: #DDD;" | ETA
# [[#F7]] New-style MDN links
| style="font-weight: bold; background: #DDD;" | Owner
# [[#F13]] Actual values vs. stylesheet values
|-
# [[#F16]] Unit conversions during filtering
<section begin="status" />
# [[#F12]] Display color swatches
| [[DevTools/Features/StyleInspector|Style Inspector tool]]
# [[#F11]] Show as few properties as possible to reflect the way the user is styling the element
| {{StatusAtRisk|status=Not yet landed and integrated with Highlighter}}
# [[#F26]] Click on name:lineno to jump to Style Editor (depends on Style Editor, obviously)
| 2011-07-15
# [[#F17]] Edit property value for the selected element
| Kevin Dangoor
# [[#F18]] Edit property value for the stylesheet rule
<section end="status" />
# [[#F2]] Command to open the Style Inspector
|-
# [[#F19]] Rule changes are also visible in the Style Editor
|}
|Feature functional spec===== Invoking ====
 
Open the Highlighter and click on "Styles" in the Highlighter Toolbar. The Style Inspector will open in the sidebar on the right (default positioning) (<span id="F1">F1</span>).
 
The Style Inspector can also be opened and closed using the command line (<span id="F2">F2</span>).
 
==== Basic Description ====
 
See the [http://people.mozilla.org/~kdangoor/usecases/minotaur/steps/Fix_a_Font__Proposed_.html#The%20Style%20Inspector Mockup] in the Font Fixing use case section "The Style Inspector".
 
The Style Inspector displays a list of property/value pairs. Items in this list can be expanded to display the CSS selectors that went into the final choice of the value and further expanded to display the rules that ''didn't'' go into the selected value.
 
Ultimately, what we're going for is a cross between a computed styles view and a stylesheets-organized-by-properties view.
 
==== Initial Display ====
 
See the [http://people.mozilla.org/~kdangoor/usecases/minotaur/steps/Fix_a_Font__Proposed_.html#The%20Style%20Inspector Mockup] in the Font Fixing use case section "The Style Inspector".
 
'''Only user-provided, non-default styles are displayed''' (<span id="F3">F3</span>) in order to minimize the number of items the user needs to wade through in order to find what they're looking for. These styles are displayed in '''alphabetical order''' by property name.
 
All properties are initially '''collapsed'''. The collapsed view shows the property name, selected value and number of rules (<span id="F5">F5</span>). '''Clicking the property name or the disclosure arrow will expand''' the view for the property (see Expanded View below) (<span id="F6">F6</span>).
 
When you hover over a row, a '''? icon''' is displayed (<span id="F7">F7</span>). Clicking this will take you to the '''MDN page for that CSS property''' (<span id="F8">F8</span>).
 
==== Property and Value Display ====
 
As a computed styles-based view, the property list contains all of the possible properties. An extreme example of this is the "border" shorthand property. Each border property (width, color, etc.) can be set independently on all four sides of the box. This means that 20 border properties will be displayed, even for a user that sets "border: 1px solid blue".
 
If the user has set the border as "border: 1px solid blue", the "border-left-color" property will show rgb(0,0,255). When you expand that property, you'll see the rule displayed as, for example, "h1 -> border: 1px solid blue". The '''property name is displayed because it does not match the property name shown''' (<span id="F9">F9</span>). Additionally, "1px solid blue" is displayed for the value because '''that is how the stylesheet lists it''' (<span id="F10">F10</span>).
 
(optional) A better default than showing all of the possible CSS properties is to show shorthand properties as appropriate, based on how the user has specified their styles. Using "border" as an example:
 
* if the styles for an element only have "border", then border is the property displayed
* if there is a border-color, then the border-(color, width, etc) properties are displayed, but not the properties for the sides
* if there is a border-left, then the border-(left, right, top, bottom) properties are displayed
* if there is a border-left-color, then all of the border properties are displayed
 
In other words, '''show as few properties as possible to reflect the way the user is styling the node in question''' (<span id="F11">F11</span>). Similar rules would apply to properties like "font".
 
(optional) Computed styles automatically converts all of the colors to rgb(). The user may have specified the colors using some other system. In order to help them make sense of the color, '''display a color swatch next to the color label, in both the initial and expanded views'''. (<span id="F12">F12</span>)
 
(optional) For a number of CSS properties, there is a difference between what the browser ultimately decides to show and what the user has specified. For example, "font-family: SuperBlingUltra, Verdana, sans-serif" will ultimately select some font from the user's system. There's no way to tell what that font is, however. The value of the font-family property in the initial view should be the actual font chosen for display. The expanded view would show the list as it appears in the stylesheet.
 
* if the user has SuperBlingUltra or Verdana, that would be displayed for font-family
* if they do not, the font used by the browser for "sans-serif" will be displayed as the value for font-family
 
Other examples of '''showing displayed values vs. the values specified in the stylesheet''' (<span id="F13">F13</span>) are things like "width: 1em" which is translated into px by the browser.
 
==== Expanded View ====
 
See the "Expanding the font-family" section [http://people.mozilla.org/~kdangoor/usecases/minotaur/steps/Fix_a_Font__Proposed_.html#Expanding%20the%20font-family of the Font Fixing use case].
 
When a property is expanded, the list of rules that include the property are displayed.
 
Each row of that list contains the '''CSS selector, the value provided for that selector in that rule, and the stylesheet:line number''' on which that rule/property is defined.
 
The rows are sorted '''in order of selector precedence'''. So, the first rule listed is the one that was selected for use. All of the other rows are displayed with '''strike through''' because they were not selected.
 
After the list of selectors that match the selected page element, there is an "unmatched rules" entry. Expanding that displays all of the rules providing the current property that had CSS selectors that did not much that currently selected page element. Those rules are sorted by how close they are to matching the original element.
 
==== Include Default Styles ====
 
The user can choose to '''include the default styles''' (<span id="F14">F14</span>) and not just the overridden ones. These styles are '''sorted alphabetically''' by property name.


== Summary ==
==== Filtering ====


The Style Inspector works in conjunction with the [[DevTools/Features/Highlighter|Highlighter]] to allow the user to view the CSS rules being applied to an element. It will be an updated version of the style inspector that shipped disabled in Firefox 4.
The user can '''filter the list of styles''' (<span id="F15">F15</span>) by typing in the provided search box. The list is filtered '''as the user types''' subject to performance constraints.


The initial focus is on providing a property-oriented view. For example, you'll be able to look up the "color" property and see the rules that went into deciding what color a given element should be.
Only rows that match '''in either the property name, CSS selector or the value''' are displayed after the filter is applied.


== Release Requirements ==
For example, searching for ".even" would find all of the properties to which  the ".even" class went into the style calculation. The CSS selectors for selected and unselected rules will be searched.


* Uses the shared notion of selected element(s)
A search for "border" will display all of the border properties.


== Next Steps ==
(optional) the '''filter applied to the value could do unit conversions''' (<span id="F16">F16</span>) to find equivalents. For example, the filter could match equivalent colors (black, #000, rgb(0,0,0)) or equivalent sizes (1em, 12px).


* Review of the big patch
==== Editing Values ====
* Highlighter integration
* Command Line integration
* Determine remainder of scope for Firefox 7


== Related Bugs & Dependencies ==
When viewing a rule that contributes to a property, you can '''click the stylesheet name:line number link to display the stylesheet in the Style Editor'''(<span id="F26">F26</span>). Using the Style Editor, you can change the styles directly and see the changes live. The Style Editor also allows you to save the revised stylesheet.


See the [http://mozilla.github.com/devtools/2011/status.html#styleinspector status page].
(optional) A single click on the value of a property will '''edit that value for the selected element''' (<span id="F17">F17</span>). For example, if you have a background-color of "black" set by stylesheets on the current element, you can click on "black" and change it to "white". The result is equivalent to setting style="background-color: white" on the element.


== Team ==
(optional) A single click on the value of a property in a rule for an element will '''edit the value for that rule''' (<span id="F18">F18</span>). If background-color property for a rule with a selector of "h1" is "black", you can click it and change it to white. Ideally, this change would be synchronized with the Style Editor so that viewing the same rule in the Style Editor would then show "white" after the change.


* Mike Ratcliffe: Lead developer
(optional) A rule change as described in the previous paragraph would ideally also be visible in the Style Editor (<span id="F19">F19</span>).
* Kevin Dangoor: PM
* Strugariu Florin (irc:Bebe): QA


== Designs ==
==== Changes from the Highlighter ====


Current state can be seen in [http://www.youtube.com/watch?v=rttP-HB9j74 this video].
If the Style Inspector is open and the user changes the selected element in the Highlighter, the '''Style Inspector should display the newly selected element's styles'''. While the user is visually highlighting different elements on the page, the Style Inspector is dimmed. But, once an element is selected, the Style Inspector will display the properties of the newly selected element.


== Goals/Use Cases ==
If the '''user toggles classes on an element''' (<span id="F22">F22</span>) via the Highlighter Infobar, the Style Inspector should update to show the new styles applied to the element.


Help user spot what styles are applied to an element and why.
==== Changes from the Command Line ====


== Non-Goals ==
If the user takes an action such as '''toggling classes or changing the selected element via the Command Line''' (<span id="F23">F23</span>), the Style Inspector should update when the command is complete.


The Style Inspector does not attempt to advise the user on how to fix CSS problems, it just shows them what is being applied. The [[DevTools/Features/StyleDoctor|Style Doctor]] will help users with the fixes.
==== Changes from the Page ====


== Other Documentation ==
If the Style Inspector is visible and '''the page is changed via JavaScript''' (<span id="F24">F24</span>), the Style Inspector should update (possibly after a small delay in order to deal with performance considerations).


See "computed styles" in Firebug or the style views in the WebKit Inspector.
==== Changes from the Style Editor ====


__NOTOC__
If the user '''edits the page's styles in the Style Editor''' (<span id="F25">F25</span>), the changes should be reflected in the Style Inspector when the Inspector is next visible.


[[Category:Feature]]
(last feature number: 26)
[[Category:Firefox]]
|Feature qa review=https://wiki.mozilla.org/QA/Waverley/Developer-Tools/StyleInspector/Test-plan
[[Category:DevTools]]
}}
[[Category:Priority 1]]
{{FeatureInfo
|Feature priority=P1
|Feature rank=2
|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=[[Security/reviews/firefox/PageInspectorHighlighter | Notes]]
}}
Kdangoor
canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/326101...465747"