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 15:32, 1 September 2011
, 1 September 2011no edit summary
mNo edit summary |
No edit summary |
||
| Line 38: | Line 38: | ||
|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) (<span id=" | 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 (F2). | The Style Inspector can also be opened and closed using the command line (<span id="F2">F2</span>). | ||
==== Basic Description ==== | ==== Basic Description ==== | ||
| Line 54: | Line 54: | ||
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''' (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. | '''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 (F5). '''Clicking the property name or the disclosure arrow will expand''' the view for the property (see Expanded View below) (F6). | 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 (F7). Clicking this will take you to the '''MDN page for that CSS property''' (F8). | 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 ==== | ==== Property and Value Display ==== | ||
| Line 64: | Line 64: | ||
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''' (F9). Additionally, "1px solid blue" is displayed for the value because '''that is how the stylesheet lists it''' (F10). | 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: | (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: | ||
| Line 73: | Line 73: | ||
* 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''' (F11). 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''' (<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'''. (F12) | (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. | (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 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. | 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 98: | Line 98: | ||
==== Include Default Styles ==== | ==== Include Default Styles ==== | ||
The user can choose to '''include the default styles''' (F14) 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''' (F15) 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. | Only rows that match '''in either the property name, CSS selector or the value''' are displayed after the filter is applied. | ||
| Line 110: | Line 110: | ||
A search for "border" will display all of the border properties. | A search for "border" will display all of the border properties. | ||
(optional) the '''filter applied to the value could do unit conversions''' (F16) 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 ==== | ==== Editing Values ==== | ||
| Line 116: | Line 116: | ||
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'''. 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. | 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'''. 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''' (F17). 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) 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) A single click on the value of a property in a rule for an element will '''edit the value for that rule''' (F18). 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 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 (F19). | (optional) A rule change as described in the previous paragraph would ideally also be visible in the Style Editor (<span id="F19">F19</span>). | ||
==== Multiple Selected Elements ==== | ==== Multiple Selected Elements ==== | ||
If there are multiple page elements selected, the Style Inspector will '''display a message'''(F20) instead of the normal contents of the Inspector. The message, in English, is: | If there are multiple page elements selected, the Style Inspector will '''display a message'''(<span id="F20">F20</span>) instead of the normal contents of the Inspector. The message, in English, is: | ||
<blockquote>Multiple elements are selected. Only one element's styles can be inspected at a time.</blockquote> | <blockquote>Multiple elements are selected. Only one element's styles can be inspected at a time.</blockquote> | ||
(optional) Display only the rules that all of the selected elements have in common (F21). | (optional) Display only the rules that all of the selected elements have in common (<span id="F21">F21</span>). | ||
==== Changes from the Highlighter ==== | ==== Changes from the Highlighter ==== | ||
| Line 134: | Line 134: | ||
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 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''' (F22) 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''' (F23), 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''' (F24), 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 ==== | ==== Changes from the Style Editor ==== | ||
If the user '''edits the page's styles in the Style Editor''' (F25), the changes should be reflected in the Style Inspector when the Inspector is next visible. | 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. | ||
}} | }} | ||
{{FeatureInfo | {{FeatureInfo | ||