DevTools/Features/StyleInspector: Difference between revisions

DevTools/Features/StyleInspector (view source)

Revision as of 14:11, 30 August 2011

510 bytes added , 30 August 2011

no edit summary

Kdangoor

canmove, Confirmed users, Bureaucrats and Sysops emeriti

1,093

edits

@@ Line 17: / Line 17: @@
 * What is the command for displaying the Style Inspector?
-* How are pseudoclasses handled?
+* How are pseudo classes handled?
 |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.
@@ Line 57: / Line 57: @@
 '''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.
-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. '''Clicking the property name or the disclosure arrow will expand''' the view for the property (see Expanded View below).
+When you hover over a row, a '''? icon''' is displayed. Clicking this will take you to the '''MDN page for that CSS property'''.
 ==== Property and Value Display ====
@@ Line 73: / Line 75: @@
 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.
+''possible removal'' 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.
 ==== Include Default Styles ====
@@ Line 101: / Line 103: @@
 ==== 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'''. Since the selection in the Highlighter can change quickly during visual highlighting, the speed of changing the Style Inspector can be throttled for performance reasons.
+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.
@@ Line 112: / Line 114: @@
 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).
+==== Changes from the Style Editor ====
+If the user edits the page's styles in the Style Editor, the changes should be reflected in the Style Inspector when the Inspector is next visible.
 }}
 {{FeatureInfo