1173057 - Can't add a class attribute to a tag

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Use case:

I'm working on styling a page and want to a) add a new rule based on a class selector, then b) add the class attribute to an element to view  / tweak the results.

STR:

1. go to bug 452453, open the inspector, search for this element:

#bz_show_bug_column_1 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1)

2. double click on the tr tag to edit it, add class="foo", hit return

Expected results: we add the class attribute to the tr element

Actual: nothing happens

Workarounds: 

 - if the element already has a class attribute, you can edit that class attribute.
 - run this code ( bugzilla uses jQuery ): 
$('#bz_show_bug_column_1 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1)').addClass('foo')

...or this code: 

document.querySelector('#bz_show_bug_column_1 > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1)').className = 'foo';

Comment 1

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.

Updated STRs: 

1. open data:text/html,<div>This div has no attribute</div><div a=1>This div has an attribute</div>
2. open the inspector
3. markup-view: double click on "div" in the opening tag of a div
4. change "div" to "div class='foo'"
5. press Enter

ER: class=foo is added on the div
AR: nothing happens

It is possible to add an attribute to an element which has no attribute: double-click in the right angular bracket next to "div". An empty editor appears and you can add attributes.

Still it would be nice if we could parse the value submitted when editing the tag name to extract potential attributes.

Comment 2

[Vadim Makeev]

This behavior led me to believe that somethin’s wrong with MathML’s support, but it wasn’t the case.

The quickest way to add/remove an attribute is to double-click the tag name, type a space, and start typing your attribute. I learned this behavior from Chrome DevTools and my code editor and expect this simplicity everywhere. It kind of makes sense. The UI doesn’t differentiate between two cases: when you double-click the attribute to modify/remove it and when you double-click the tag name. Since there’s a clear space between the tag name and whatever I’m typing, I expect it to be parsed as an attribute.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1173057 - [devtools] Allow to add attributes to a node from the "tagName" input. r=#devtools-reviewers.

When double clicking the tag name in the markup view, people can edit the tag,
but they might want to add attributes at the same time, and we didn't allow that.
This patch makes it possible, parsing the input to check for any attributes in
it, and in such case, setting them on the node before changing the tag name.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9ca655857281
[devtools] Allow to add attributes to a node from the "tagName" input. r=devtools-reviewers,jdescottes.

Comment 5

[Serban Stanca [:SerbanS]]

Backed out for causing devtools failures in browser_markup_tag_edit_03.js.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | devtools/client/inspector/markup/test/browser_markup_tag_edit_03.js | Found markup-container for selector: #retag-me -

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

I'm investigating the test failure

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/132975e9e0d0
[devtools] Allow to add attributes to a node from the "tagName" input. r=devtools-reviewers,jdescottes.

Comment 8

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/132975e9e0d0