Double clicking a node without attributes scopes the view. There's no way to easily add new attributes to a node.
Created attachment 33226 [details] Add Attributes to Nodes This allows users to add attributes to nodes from the Elements Panel in the Tree. NOTES: 1. Only nodes that are of type Node.ELEMENT_NODE will exhibit the behavior mentioned below, and only in the Elements Panel, not in the console when inspecting a node. 2. When hovering over the Node in the Tree view an ellipsis (…) will appear to the right of the text on the hovered line 3. Double Clicking the ellipsis (I didn't both with a single click at the moment) will trigger the usual dblclick 4. This notices it is inside the 'add-attribute' ellipsis and will dynamically create an attribute to start editing, like normal. Give it a whirl. Make suggestions on how to improve the User Interface to a tool like this. Sometimes I really wish I had a designer to work with.
Great ! Two comments : Make the ellipsis more button-like to help understand that it is clickable. Add a space before the editable zone to show that it's different from the previous attribute. Otherwise it's looking fine and it's a nice addition to the inspector.
Please attach a screenshot.
Created attachment 33337 [details] Video of Usage Maybe a video would have been better so I gave it a shot. Please forgive my improper use of terminology in the video. Doctypes, Text, and Comments are their own NODE Types (DOCUMENT_TYPE_NODE, TEXT_NODE, and COMMENT_NODE respectively). The ellipsis should only show up for element nodes (ELEMENT_NODE). http://screencast.com/t/PMZy8R419pD
Created attachment 33339 [details] Add Attributes to Nodes This has slightly better margins. When you add a new attribute the textfield is no longer overlapping text from the attribute/text before it. This was because the .editing class was giving it a negative margin. I overrule that with a direct style property for the new attribute.
Comment on attachment 33339 [details] Add Attributes to Nodes Thanks for the video! It helped a lot. I wonder if a icon (button looking) would be better than the text ellipsis. Or move the ellipsis to the inside of the tag so it is where the new attribute will be insterted? What do you think? > + var span = document.createElement('span'); > + span.className = 'add-attribute'; > + span.innerText = 'â¦'; > + this.listItemElement.appendChild(span); > + this._addAttributeElement = span; Better to use a escaped character (\uXXXX) instead of UTF8 here. Also we use double quotes for string almost esclusivly in our JS. The textContent property is better to use than innerText. It has no IE weirdness and is standard. > + this._addAttributeElement.parentNode.removeChild( this._addAttributeElement ); No spaces needed here. > + if ( tag.getElementsByClassName('webkit-html-attribute').length > 0 ) { No spaces needed here. > + return this._startEditingAttribute(attr, { target: attr }); No spaces needed here.
> + if ( tag.getElementsByClassName('webkit-html-attribute').length > 0 ) { I mean no spaces needed here next to the parenthesis.
Created attachment 33355 [details] Add Attributes to Nodes Improved NOTES: - I kept it a "..." but now everything else is out of the way so it will be easy to experiment with this. - Moved the "..." inside the tag. - Refactored to add _insertInLastAttributePosition function. - Still double-click, without cursor: pointer
Comment on attachment 33355 [details] Add Attributes to Nodes Improved > + var nodeName = tag.textContent.match(/^<(.*?)>$/)[1]; > + tag.textContent = ''; > + tag.appendChild(document.createTextNode('<'+nodeName)); > + tag.appendChild(node); > + tag.appendChild(document.createTextNode('>')); Double quote strings and spaces around "+".
Created attachment 33360 [details] Add Attributes to Nodes More Improved Fixes those styles issues and the ChangeLog.
Committing to http://svn.webkit.org/repository/webkit/trunk ... M WebCore/ChangeLog M WebCore/inspector/front-end/ElementsTreeOutline.js M WebCore/inspector/front-end/inspector.css Committed r46339 M WebCore/ChangeLog M WebCore/inspector/front-end/ElementsTreeOutline.js M WebCore/inspector/front-end/inspector.css r46339 = 8f096edd27f484633afdef0d31ec1e2b7dc5e327 (trunk) No changes between current HEAD and refs/remotes/trunk Resetting to the latest refs/remotes/trunk http://trac.webkit.org/changeset/46339