Changeset 56684 in webkit

Timestamp:

Mar 28, 2010 1:49:52 AM (14 years ago)

Author:

Joseph Pecoraro

Message:

2010-03-27 Joseph Pecoraro <Joseph Pecoraro>

Reviewed by Pavel Feldman.

Web Inspector: Edit Tag Names
​https://bugs.webkit.org/show_bug.cgi?id=36481

Allow tabbing back and forth between the tag name and element
attributes when editing. Also, fixed a number of minor issues with
editing attributes and tabbing.

• inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeElement.prototype._startEditingTagName): find the tag name if it wasn't provided. (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted): fix tabbing issues, enable tab to tag name. (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.regenerateStyledAttribute): cleanup styles when tabbing.
• inspector/front-end/inspector.css: do not display <br>s while editing

Location:

trunk/WebCore

Files:

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

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-03-27  Joseph Pecoraro  <joepeck@webkit.org>
+
+        Reviewed by Pavel Feldman.
+
+        Web Inspector: Edit Tag Names
+        https://bugs.webkit.org/show_bug.cgi?id=36481
+
+        Allow tabbing back and forth between the tag name and element
+        attributes when editing. Also, fixed a number of minor issues with
+        editing attributes and tabbing.
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeElement.prototype._startEditingTagName): find the tag name if it wasn't provided.
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted): fix tabbing issues, enable tab to tag name.
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.regenerateStyledAttribute): cleanup styles when tabbing.
+        * inspector/front-end/inspector.css: do not display <br>s while editing
+
 2010-03-27  Joseph Pecoraro  <joepeck@webkit.org>
 

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

@@ -811 +811 @@
 
                     if (elem.hasStyleClass("webkit-html-attribute-value"))
-                        return this._startEditingAttribute(attributeElements[i].parentNode, elem);
+                        return this._startEditingAttribute(elem.parentNode, elem);
                 }
             }
@@ -868 +868 @@
     _startEditingTagName: function(tagNameElement)
     {
+        if (!tagNameElement) {
+            tagNameElement = this.listItemElement.getElementsByClassName("webkit-html-tag-name")[0];
+            if (!tagNameElement)
+                return false;
+        }
+ 
         if (WebInspector.isBeingEdited(tagNameElement))
             return true;
@@ -960 +966 @@
         // Before we do anything, determine where we should move
         // next based on the current element's settings
-        var moveToAttribute;
-        var newAttribute;
+        var moveToAttribute, moveToTagName, moveToNewAttribute;
         if (moveDirection) {
             var found = false;
+
+            // Search for the attribute's position, and then decide where to move to.
             var attributes = this.representedObject.attributes;
-            for (var i = 0, len = attributes.length; i < len; ++i) {
+            for (var i = 0; i < attributes.length; ++i) {
                 if (attributes[i].name === attributeName) {
                     found = true;
-                    if (moveDirection === "backward" && i > 0)
-                        moveToAttribute = attributes[i - 1].name;
-                    else if (moveDirection === "forward" && i < attributes.length - 1)
-                        moveToAttribute = attributes[i + 1].name;
-                    else if (moveDirection === "forward" && i === attributes.length - 1)
-                        newAttribute = true;
+                    if (moveDirection === "backward") {
+                        if (i === 0)
+                            moveToTagName = true;
+                        else
+                            moveToAttribute = attributes[i - 1].name;
+                    } else if (moveDirection === "forward") {
+                        if (i === attributes.length - 1)
+                            moveToNewAttribute = true;
+                        else 
+                            moveToAttribute = attributes[i + 1].name;
+                    }
                 }
             }
 
-            if (!found && moveDirection === "backward" && attributes.length > 0)
-                moveToAttribute = attributes[attributes.length - 1].name;
-            else if (!found && moveDirection === "forward" && !/^\s*$/.test(newText))
-                newAttribute = true;
-        }
-
-        function moveToNextAttributeIfNeeded() {
+            // Moving From the "New Attribute" position.
+            if (!found) {
+                if (moveDirection === "backward" && attributes.length > 0)
+                    moveToAttribute = attributes[attributes.length - 1].name;
+                else if (moveDirection === "forward" && !/^\s*$/.test(newText))
+                    moveToNewAttribute = true;
+            }
+        }
+
+        function moveToNextAttributeIfNeeded()
+        {
+            // Cleanup empty new attribute sections.
+            if (element.textContent.trim().length === 0)
+                element.parentNode.removeChild(element);
+
+            // Make the move.
             if (moveToAttribute)
                 this._triggerEditAttribute(moveToAttribute);
-            else if (newAttribute)
+            else if (moveToNewAttribute)
                 this._addNewAttribute();
+            else if (moveToTagName)
+                this._startEditingTagName();
+        }
+
+        function regenerateStyledAttribute(name, value)
+        {
+            var previous = element.previousSibling;
+            if (!previous || previous.nodeType !== Node.TEXT_NODE)
+                element.parentNode.insertBefore(document.createTextNode(" "), element);
+            element.outerHTML = "<span class=\"webkit-html-attribute\">" +
+                                  "<span class=\"webkit-html-attribute-name\">" + attr.name.escapeHTML() + "</span>=&#8203;\"" +
+                                  "<span class=\"webkit-html-attribute-value\">" + attr.value.escapeHTML() + "</span>&#8203;\"" +
+                                "</span>";
         }
 
@@ -1012 +1046 @@
             try {
                 this.representedObject.setAttribute(attr.name, attr.value);
+                regenerateStyledAttribute(attr.name, attr.value);
             } catch(e) {} // ignore invalid attribute (innerHTML doesn't throw errors, but this can)
         }

trunk/WebCore/inspector/front-end/inspector.css

@@ -1498 +1498 @@
 }
 
+.editing br {
+    display: none;
+}
+
 .elements-tree-editor {
     -webkit-user-select: text;