DevTools/Features/EasyAttributeEditing
Status
| Easy Attribute Editing | |
| Stage | On hold |
| Status | ` |
| Release target | ` |
| Health | OK |
| Status note | Putting on hold so that we can focus on making the HTML tree do what people need. |
{{#set:Feature name=Easy Attribute Editing
|Feature stage=On hold |Feature status=` |Feature version=` |Feature health=OK |Feature status note=Putting on hold so that we can focus on making the HTML tree do what people need. }}
Team
| Product manager | Kevin Dangoor |
| Directly Responsible Individual | Kevin Dangoor |
| Lead engineer | ` |
| Security lead | ` |
| Privacy lead | ` |
| Localization lead | ` |
| Accessibility lead | ` |
| QA lead | ` |
| UX lead | ` |
| Product marketing lead | ` |
| Operations lead | ` |
| Additional members | ` |
{{#set:Feature product manager=Kevin Dangoor
|Feature feature manager=Kevin Dangoor |Feature lead engineer=` |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}
Open issues/risks
`
Stage 1: Definition
1. 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.
2. Users & 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.
3. Dependencies
`
4. 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
Non-goals
This feature is not concerned with making structural changes to the document.
Stage 2: Design
5. Functional specification
`
6. User experience design
Some discussion of 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.
Stage 3: Planning
7. Implementation plan
`
8. Reviews
Security review
`
Privacy review
`
Localization review
`
Accessibility
`
Quality Assurance review
`
Operations review
`
Stage 4: Development
9. Implementation
`
Stage 5: Release
10. Landing criteria
` {{#set:Feature open issues and risks=` |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 dependencies=` |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 functional spec=` |Feature ux design=Some discussion of 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. |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}
Feature details
| Priority | P2 |
| Rank | 1 |
| Theme / Goal | ` |
| Roadmap | Developer Tools |
| Secondary roadmap | ` |
| Feature list | Desktop |
| Project | ` |
| Engineering team | DevTools |
{{#set:Feature priority=P2
|Feature rank=1 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}
Team status notes
| status | notes | |
| Products | ` | ` |
| Engineering | ` | ` |
| Security | ` | ` |
| Privacy | ` | ` |
| Localization | ` | ` |
| Accessibility | ` | ` |
| Quality assurance | ` | ` |
| User experience | ` | ` |
| Product marketing | ` | ` |
| Operations | ` | ` |
{{#set:Feature products status=`
|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=` |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}