DevTools/Features/RichInfobar: Difference between revisions

DevTools/Features/RichInfobar (view source)

Revision as of 20:01, 6 October 2011

474 bytes added , 6 October 2011

no edit summary

Kdangoor

canmove, Confirmed users, Bureaucrats and Sysops emeriti

1,093

edits

@@ Line 1: / Line 1: @@
 {{FeatureStatus
 |Feature name=Pseudo-Class View
-|Feature stage=Draft
+|Feature stage=Design
+|Feature status=In progress
 |Feature health=OK
+|Feature status note=Working out the UX
 }}
 {{FeatureTeam
 |Feature product manager=Kevin Dangoor
 |Feature feature manager=Kevin Dangoor
+|Feature ux lead=Stephen Horlander
 }}
 {{FeaturePageBody
@@ Line 35: / Line 38: @@
 The [[DevTools/Features/StyleInspector|Style Inspector]] and [[DevTools/Features/RulesView|Rules View]] will display the proper styles based on the pseudo-classes applied to the element (F5).
-|Feature ux design=The Infobar around the highlighted element uses a CSS-like style for displaying the element's tag, ID and classes. What if we added pseudo-classes in the same way?
+|Feature ux design=Stephen Horlander offered the suggestion of putting a + at the end of the highlighter Infobar.
-Assuming no pseudo-classes are applied to begin with, we could have a bare <tt>:</tt> at the end. Clicking that can pop up a menu with the pseudo-classes. If you select hover, you can end up with something like this:
+* Clicking the + displays a text field with placeholder text along the lines of <tt>:pseudo, #id, or .class</tt>.
+* If the user types :, it would the field would contain ":active, focus, hover, visited" with all of the text but the ":" selected.
-<code>div.foo:hover:</code>
+* :a, :f, :h and :v should autocomplete to the matching pseudo-class so that the user can just hit return to add the pseudo-class.
+* the ability to toggle classes by clicking then should also apply to pseudo-classes
-Clicking "hover" there would turn off hover.
+* if the user starts the field with anything but "#", "." or ":" the field should turn red (or otherwise show the error state)
+* if the user types "#" and the node has an ID, the existing ID should be placed in the field, preselected with the cursor after the #
-One alternative would be to tie this in with a control that's used for adding classes.
 }}
 {{FeatureInfo
-|Feature priority=Unprioritized
+|Feature priority=P1
+|Feature rank=5
+|Feature roadmap=Developer Tools
+|Feature list=Desktop
+|Feature engineering team=DevTools
 }}
 {{FeatureTeamStatus}}