canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/StyleInspector: Difference between revisions
DevTools/Features/StyleInspector (view source)
Revision as of 13:42, 30 August 2012
, 30 August 2012no edit summary
No edit summary |
No edit summary |
||
| (23 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
{{FeatureStatus | {{FeatureStatus | ||
|Feature name=Style Inspector | |Feature name=Style Inspector | ||
|Feature stage= | |Feature stage=Complete | ||
|Feature status= | |Feature status=Complete | ||
|Feature version=Firefox | |Feature version=Firefox 10 | ||
|Feature health=OK | |Feature health=OK | ||
}} | }} | ||
{{FeatureTeam | {{FeatureTeam | ||
| Line 14: | Line 13: | ||
}} | }} | ||
{{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 | 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=Users of all experience levels need to work with CSS. | |Feature users and use cases=Users of all experience levels need to work with CSS. | ||
| Line 31: | Line 26: | ||
The Style Inspector is part of the [http://people.mozilla.org/~kdangoor/usecases/minotaur/index.html#Font%20Fixing Font Fixing] use case. | The Style Inspector is part of the [http://people.mozilla.org/~kdangoor/usecases/minotaur/index.html#Font%20Fixing Font Fixing] use case. | ||
|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 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 requirements= | |Feature requirements=# {{done|}} [[#F1]] Styles button in Page Inspector (aka Highlighter) that opens Style Inspector in a sidebar | ||
# {{done|}} [[#F3]] Display only user-defined styles by default | |||
# {{done|}} [[#F15]] Filter the list of styles by a search | |||
Desired, but not required in initial release: | |||
# [[#F5]] Finalized collapsed style view | |||
# [[#F24]] Updates to the element's styles are reflected in the style inspector | |||
# {{done|}} [[#F6]] Click property name to expand the property | |||
# [[#F10]] Display values as they appear in the style sheet | |||
# {{done|}} [[#F14]] Include default styles option | |||
# [[#F9]] Property name is displayed when it doesn't match the property shown | |||
# [[#F7]] New-style MDN links | |||
# [[#F13]] Actual values vs. stylesheet values | |||
# [[#F16]] Unit conversions during filtering | |||
# [[#F12]] Display color swatches | |||
# [[#F11]] Show as few properties as possible to reflect the way the user is styling the element | |||
# [[#F26]] Click on name:lineno to jump to Style Editor (depends on Style Editor, obviously) | |||
# [[#F17]] Edit property value for the selected element | |||
# [[#F18]] Edit property value for the stylesheet rule | |||
# [[#F2]] Command to open the Style Inspector | |||
# [[#F19]] Rule changes are also visible in the Style Editor | |||
|Feature functional spec===== Invoking ==== | |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). | 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. | The Style Inspector can also be opened and closed using the command line (<span id="F2">F2</span>). | ||
==== Basic Description ==== | ==== Basic Description ==== | ||
| Line 47: | Line 58: | ||
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". | 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 | 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 ==== | ==== Initial Display ==== | ||
| Line 53: | Line 66: | ||
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". | 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''' 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. | '''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. | 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 ==== | ==== Expanded View ==== | ||
| Line 67: | Line 106: | ||
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. | 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. | 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 ==== | ==== Include Default Styles ==== | ||
The user can choose to include the default styles and not just the overridden ones. These styles are '''sorted alphabetically''' by property name. | 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. | ||
==== Filtering ==== | ==== Filtering ==== | ||
The user can filter the list of styles by typing in the provided search box. The list is filtered '''as the user types''' subject to performance constraints. | 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. | ||
Only rows that match '''in either the property name, CSS selector or the value''' are displayed after the filter is applied. | |||
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. | |||
A search for "border" will display all of the border properties. | |||
(optional) the filter applied to the value could do unit conversions to find equivalents. For example, the filter could match equivalent colors (black, #000, rgb(0,0,0)) or equivalent sizes (1em, 12px). | (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). | ||
==== | ==== Editing Values ==== | ||
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. | |||
< | (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. | ||
(optional) | (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. | ||
(optional) A rule change as described in the previous paragraph would ideally also be visible in the Style Editor (<span id="F19">F19</span>). | |||
==== Changes from the Highlighter ==== | ==== Changes from the Highlighter ==== | ||
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'''. | 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. | ||
If the '''user toggles classes on an element''' via the Highlighter Infobar, the Style Inspector should update to show the new styles applied to the element. | 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. | ||
==== Changes from the Command Line ==== | ==== Changes from the Command Line ==== | ||
If the user takes an action such as '''toggling classes or changing the selected element via the Command Line''', the Style Inspector should update when the command is complete. | 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. | ||
==== Changes from the Page ==== | ==== Changes from the Page ==== | ||
If the Style Inspector is visible and '''the page is changed via JavaScript''', the Style Inspector should update (possibly after a small delay in order to deal with performance considerations). | 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). | ||
==== Changes from the Style Editor ==== | |||
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. | |||
(last feature number: 26) | |||
|Feature qa review=https://wiki.mozilla.org/QA/Waverley/Developer-Tools/StyleInspector/Test-plan | |||
}} | }} | ||
{{FeatureInfo | {{FeatureInfo | ||
|Feature priority=P1 | |Feature priority=P1 | ||
|Feature rank=2 | |||
|Feature roadmap=Developer Tools | |Feature roadmap=Developer Tools | ||
|Feature list=Desktop | |Feature list=Desktop | ||
| Line 110: | Line 163: | ||
}} | }} | ||
{{FeatureTeamStatus | {{FeatureTeamStatus | ||
|Feature security status=sec-review- | |Feature security status=sec-review-complete | ||
|Feature security health=OK | |||
|Feature security notes=[[Security/reviews/firefox/PageInspectorHighlighter | Notes]] | |||
}} | }} | ||