DevTools/Features/RichInfobar: Difference between revisions

← Older edit

DevTools/Features/RichInfobar (view source)

Revision as of 15:52, 19 October 2011

3,216 bytes added , 19 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 name=Rich Infobar
-|Feature stage=Draft
+|Feature stage=On hold
 |Feature health=OK
+|Feature status note=Shifting gears. Breaking this into two separate features with different priorities and moving the UX design piece off to the near future.
 }}
 {{FeatureTeam
 |Feature product manager=Kevin Dangoor
 |Feature feature manager=Kevin Dangoor
+|Feature ux lead=Stephen Horlander
 }}
 {{FeaturePageBody
-|Feature overview=When styling web pages, you can create styles using "pseudo-classes" that only apply under certain circumstances. The pseudo-classes in use today are "active", "visited", "hover" and "focus".
+|Feature overview=The "Infobar" is part of the Page Inspector and appears around the highlighted element on the page. The first iteration of the Infobar provided the tag name, ID and classes for the element. This improvement to the Infobar adds features to allow the user to make common changes to the element quickly.
-The goal with this feature is to allow the users to view the styles with the desired pseudo-classes applied to a page element. For example, pseudo-classes like "hover" are normally applied only when the cursor is over the page element. When working on styling, however, you need to be able to keep the "hover" state while working in the developer tools area of the window.
+The most important part of this feature is the ability to set pseudo-classes for use in inspecting styles. For example, CSS styles that are applied on "hover" will naturally go away when you switch to the Page Inspector, because you're no longer hovering over the page element you're trying to examine. This feature adds to the infobar a mechanism for making "hover" and other pseudo-classes sticky while you're using the tools.
+Toggling classes and setting IDs on page elements are also useful styling features that fit naturally into the infobar.
 |Feature users and use cases=Anyone doing web design uses this feature.
+==== Examine Hover Styles ====
+It's common to set styles that appear only on hover, so the user needs a way to dig into those styles, see how they're being applied and possibly tweak them using the editing capabilities of other parts of the tools suite.
+==== See the effect of a class ====
+When tracking down styling issues, especially on elements with multiple classes applied to them, it can be useful to visually see the effect that a given class is having on an element. A convenient mechanism for toggling a class on an element is a good way to accomplish this.
+==== Set an ID on an element ====
+JavaScript developers often have collections of functions built up that are designed to take elements or element IDs. By being able to quickly set an ID on an element, these developers will have a handle they can pass into their functions.
 |Feature functional spec===== Selected in the Page Inspector ====
-Pseudo-classes can be toggled in the page inspector so that they can apply to any element-oriented tool (F1).
+Pseudo-classes can be toggled in the page inspector so that they can apply to any element-oriented tool <span id="F1">(F1)</span>.
-The user can toggle any of the four pseudo-classes (F2):
+The user can toggle any of these four common pseudo-classes <span id="F2">(F2)</span>:
 * active
@@ Line 24: / Line 40: @@
 * visited
-A command line command can also toggle pseudo-classes on the selected element (F3).
+Those are the four pseudo-classes supported by the most popular developer tools. There are other pseudo-classes that we should try to support as well <span id="F6">(F6)</span>:
+* link
+* enabled
+* disabled
+* valid
+* invalid
+* checked
+Many of these can be set in a "sticky" way by the user in the UI of their application. However, it would be more convenient as they're reviewing the styling for an element if they can just "pretend" to have checked the checkbox, for example.
+The tag name <span id="F9">(F9)</span> and ID <span id="F10">(F10)</span> can be edited.
+A command line command can also toggle pseudo-classes on the selected element <span id="F3">(F3)</span>. There should also be command line commands for toggling classes <span id="F7">(F7)</span> and setting the ID <span id="F8">(F8)</span>.
+One open question to acknowledge: when there's a separate [[DevTools/Features/ToolsWindow|tools window]] we may need a separate UI for doing this same thing from within the tools window.
 ==== Pseudo-Class Lifetime ====
-Pseudo-classes stay set until the page inspector is closed (F4).
+Pseudo-classes stay set until the page inspector is closed <span id="F4">(F4)</span>. All pseudo-classes are reset to their original values when the tools are closed. This will also require some thought for the interaction with a separate tools window.
-==== Support in Other Tools ====
+==== Lifetime of Other Changes ====
-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).
+Toggled classes and changed/added IDs remain in place after the tools are closed <span id="F9">(F9)</span>.
-|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?
-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:
+==== Support in Other Tools ====
-<code>div.foo:hover:</code>
-Clicking "hover" there would turn off hover.
+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 <span id="F5">(F5)</span>.
+|Feature ux design=Stephen Horlander offered the suggestion of putting a + at the end of the highlighter Infobar, and Paul Rouget had the suggestions of the click behavior on existing Infobar elements.
-One alternative would be to tie this in with a control that's used for adding classes.
+* double-clicking the tag name or ID switches the label to a text box for editing.
+* classes and pseudo-classes can be toggled by clicking on them in the Infobar. If the user switches to another page element and then back after turning off a class, that class will be gone from the Infobar.
+* 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.
+* ":a", ":h", etc. should autocomplete to the supported pseudo-classes
+* 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 #
 }}
 {{FeatureInfo
-|Feature priority=Unprioritized
+|Feature roadmap=Developer Tools
+|Feature list=Desktop
+|Feature engineering team=DevTools
 }}
 {{FeatureTeamStatus}}