View source for DevTools/Features/EasyAttributeEditing

{{FeatureStatus
|Feature name=Easy Attribute Editing
|Feature stage=On hold
|Feature health=OK
|Feature status note=Putting on hold so that we can focus on making the HTML tree do what people need.
}}
{{FeatureTeam
|Feature product manager=Kevin Dangoor
|Feature feature manager=Kevin Dangoor
}}
{{FeaturePageBody
|Feature overview=When working on a design (or JavaScript code, in some cases), there are a handful of common changes that people will want to make to the attributes of an DOM node.
|Feature users and use cases===== 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 requirements=# Easily toggle classes or add classes to an element
# Add an ID to the element

Optional:

# Be able to change any attributes on the element
# Be able to change the text within the element
# Be able to change the element's tag
|Feature non-goals=This feature is not concerned with making structural changes to the document.
|Feature ux design=Some discussion of [http://groups.google.com/group/mozilla.dev.apps.firefox/browse_thread/thread/54353f20e1af8c17# putting this functionality in the Infobar] occurred on dev-apps-firefox. [[DevTools/Features/RichInfobar]] was created along those lines, but broken up and replaced by this page and [[DevTools/Features/PseudoClassLock]].
}}
{{FeatureInfo
|Feature priority=P2
|Feature rank=1
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
{{FeatureTeamStatus}}