Changeset 49709 in webkit

Timestamp:

Oct 16, 2009 5:08:50 PM (15 years ago)

Author:

Joseph Pecoraro

Message:

2009-10-15 Joseph Pecoraro <Joseph Pecoraro>

Reviewed by Timothy Hatcher.

Web Inspector: Handle the Enter Key in the Elements Tree Hierarchy
​https://bugs.webkit.org/show_bug.cgi?id=30428

TextNode => Edit Text Node
Has Attributes => Edit First Attribute
No Attributes => Start Editing New Attribute

• inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeOutline.prototype.handleKeyEvent): handle the "Enter" key (WebInspector.ElementsTreeElement.prototype.set hovered): only add new attribute button on nodes with attributes (WebInspector.ElementsTreeElement.prototype._addNewAttribute): prevent moving backwards where there are no attributes (WebInspector.ElementsTreeElement.prototype._startEditingFromEvent): renamed to be clearer (WebInspector.ElementsTreeElement.prototype._startEditing): transition to the appropriate edit state for a tree element

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/ElementsTreeOutline.js (modified) (6 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-10-15  Joseph Pecoraro  <joepeck@webkit.org>
+
+        Reviewed by Timothy Hatcher.
+
+        Web Inspector: Handle the Enter Key in the Elements Tree Hierarchy
+        https://bugs.webkit.org/show_bug.cgi?id=30428
+
+        TextNode => Edit Text Node
+        Has Attributes => Edit First Attribute
+        No Attributes => Start Editing New Attribute
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeOutline.prototype.handleKeyEvent): handle the "Enter" key
+        (WebInspector.ElementsTreeElement.prototype.set hovered): only add new attribute button on nodes with attributes
+        (WebInspector.ElementsTreeElement.prototype._addNewAttribute): prevent moving backwards where there are no attributes
+        (WebInspector.ElementsTreeElement.prototype._startEditingFromEvent): renamed to be clearer
+        (WebInspector.ElementsTreeElement.prototype._startEditing): transition to the appropriate edit state for a tree element
+
 2009-10-16  Adam Barth  <abarth@webkit.org>
 

trunk/WebCore/inspector/front-end/ElementsTreeOutline.js

@@ -189 +189 @@
     {
         var selectedElement = this.selectedTreeElement;
-
         if (!selectedElement)
             return;
-        
-        if (event.keyCode == 8 || event.keyCode == 46) {
-            // Delete or backspace pressed, delete the node.
+
+        // Delete or backspace pressed, delete the node.
+        if (event.keyCode === 8 || event.keyCode === 46) {
             selectedElement.remove();
             return;
         }
-        
+
+        // On Enter or Return start editing the first attribute
+        // or create a new attribute on the selected element.
+        if (event.keyIdentifier === "Enter") {
+            if (this._editing)
+                return;
+
+            selectedElement._startEditing();
+
+            // prevent a newline from being immediately inserted
+            event.preventDefault();
+            return;
+        }
+
         TreeOutline.prototype.handleKeyEvent.call(this, event);
     },
@@ -296 +308 @@
                 this.updateSelection();
                 this.listItemElement.addStyleClass("hovered");
-                this._pendingToggleNewAttribute = setTimeout(this.toggleNewAttributeButton.bind(this, true), 500);
+                if (this._canAddAttributes)
+                    this._pendingToggleNewAttribute = setTimeout(this.toggleNewAttributeButton.bind(this, true), 500);
             } else {
                 this.listItemElement.removeStyleClass("hovered");
@@ -507 +520 @@
             return;
 
-        if (this._startEditing(event, treeElement))
+        if (this._startEditingFromEvent(event, treeElement))
             return;
 
@@ -532 +545 @@
     },
 
-    _startEditing: function(event, treeElement)
+    _startEditingFromEvent: function(event, treeElement)
     {
         if (this.treeOutline.focusedDOMNode != this.representedObject)
@@ -553 +566 @@
 
         return false;
+    },
+
+    _startEditing: function()
+    {
+        if (this.treeOutline.focusedDOMNode !== this.representedObject)
+            return;
+
+        var listItem = this._listItemNode;
+
+        if (this._canAddAttributes) {
+            this.toggleNewAttributeButton(false);
+            var attribute = listItem.getElementsByClassName("webkit-html-attribute")[0];
+            if (attribute)
+                return this._startEditingAttribute(attribute, attribute.getElementsByClassName("webkit-html-attribute-name")[0]);
+
+            return this._addNewAttribute(listItem);
+        }
+
+        if (this.representedObject.nodeType === Node.TEXT_NODE) {
+            var textNode = listItem.getElementsByClassName("webkit-html-text-node")[0];
+            if (textNode)
+                return this._startEditingTextNode(textNode);
+            return;
+        }
     },
 
@@ -662 +699 @@
             }
 
-            if (!found && moveDirection === "backward")
+            if (!found && moveDirection === "backward" && attributes.length > 0)
                 moveToAttribute = attributes[attributes.length - 1].name;
             else if (!found && moveDirection === "forward" && !/^\s*$/.test(newText))