canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093
edits
DevTools/Features/StyleInspector: Difference between revisions
Jump to navigation
Jump to search
DevTools/Features/StyleInspector (view source)
Revision as of 17:00, 31 August 2011
, 31 August 2011no edit summary
No edit summary |
No edit summary |
||
| Line 39: | Line 39: | ||
|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) (F1). | ||
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 (F2). | ||
==== Basic Description ==== | ==== Basic Description ==== | ||
| Line 55: | Line 55: | ||
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''' (F3) 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. '''Clicking the property name or the disclosure arrow will expand''' the view for the property (see Expanded View below). | All properties are initially '''collapsed'''. The collapsed view shows the property name, selected value and number of rules (F5). '''Clicking the property name or the disclosure arrow will expand''' the view for the property (see Expanded View below) (F6). | ||
When you hover over a row, a '''? icon''' is displayed. Clicking this will take you to the '''MDN page for that CSS property'''. | When you hover over a row, a '''? icon''' is displayed (F7). Clicking this will take you to the '''MDN page for that CSS property''' (F8). | ||
==== Property and Value Display ==== | ==== Property and Value Display ==== | ||
| Line 65: | Line 65: | ||
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". | 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'''. Additionally, "1px solid blue" is displayed for the value because '''that is how the stylesheet lists it'''. | 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''' (F9). Additionally, "1px solid blue" is displayed for the value because '''that is how the stylesheet lists it''' (F10). | ||
(optional) A better default than showing all of the possible CSS properties is to show shortcut properties as appropriate, based on how the user has specified their styles. Using "border" as an example: | (optional) A better default than showing all of the possible CSS properties is to show shortcut properties as appropriate, based on how the user has specified their styles. Using "border" as an example: | ||
| Line 74: | Line 74: | ||
* if there is a border-left-color, then all of the border 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'''. Similar rules would apply to properties like "font". | In other words, '''show as few properties as possible to reflect the way the user is styling the node in question''' (F11). 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. | (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'''. (F12) | ||
(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. | (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. | ||
| Line 82: | Line 82: | ||
* if the user has SuperBlingUltra or Verdana, that would be displayed for font-family | * 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 | * 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''' (F13) are things like "width: 1em" which is translated into px by the browser. | |||
==== Expanded View ==== | ==== Expanded View ==== | ||
| Line 97: | Line 99: | ||
==== 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''' (F14) and not just the overridden ones. These styles are '''sorted alphabetically''' by property name. | ||
==== Filtering ==== | ==== Filtering ==== | ||