Changeset 46429 in webkit

Timestamp:

Jul 27, 2009 2:58:19 PM (15 years ago)

Author:

timothy@apple.com

Message:

Adds support to the Web Inspector for tabbing through element attributes and CSS properties when editing.

2009-07-27 Joseph Pecoraro <​joepeck02@gmail.com>

Inspector: Tab Through Element Attributes and CSS Properties When Editing

​https://bugs.webkit.org/show_bug.cgi?id=27673

Reviewed by Timothy Hatcher.

• inspector/front-end/ElementsTreeOutline.js: (WebInspector.ElementsTreeElement): (WebInspector.ElementsTreeElement.prototype._startEditing): refactored parameter (WebInspector.ElementsTreeElement.prototype._addNewAttribute): refactored to remove excess (WebInspector.ElementsTreeElement.prototype._triggerEditAttribute): provide an attribute name and this will start editing it (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.moveToNextAttributeIfNeeded): move between attributes (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted):
• inspector/front-end/StylesSidebarPane.js: (WebInspector.StylePropertiesSection.prototype.onpopulate): (WebInspector.StylePropertiesSection.prototype.findTreeElementWithName): search through treeElements for a style property name (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty): initialize a blank property for adding new properties (WebInspector.StylePropertyTreeElement.prototype.updateTitle): add references to the name and value elements (WebInspector.StylePropertyTreeElement.prototype.): (WebInspector.StylePropertyTreeElement.prototype):
• inspector/front-end/inspector.js: (WebInspector.startEditing.editingCommitted): include the move direction as a parameter to the commit callback (WebInspector.startEditing.element.handleKeyEvent): handle the tab key to specify the move direction (WebInspector.startEditing):

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/ElementsTreeOutline.js (modified) (8 diffs)
• inspector/front-end/StylesSidebarPane.js (modified) (7 diffs)
• inspector/front-end/inspector.js (modified) (3 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2009-07-27  Joseph Pecoraro  <joepeck02@gmail.com>
+
+        Inspector: Tab Through Element Attributes and CSS Properties When Editing
+
+        https://bugs.webkit.org/show_bug.cgi?id=27673
+
+        Reviewed by Timothy Hatcher.
+
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeElement):
+        (WebInspector.ElementsTreeElement.prototype._startEditing): refactored parameter
+        (WebInspector.ElementsTreeElement.prototype._addNewAttribute): refactored to remove excess
+        (WebInspector.ElementsTreeElement.prototype._triggerEditAttribute): provide an attribute name and this will start editing it
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted.moveToNextAttributeIfNeeded): move between attributes
+        (WebInspector.ElementsTreeElement.prototype._attributeEditingCommitted):
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylePropertiesSection.prototype.onpopulate):
+        (WebInspector.StylePropertiesSection.prototype.findTreeElementWithName): search through treeElements for a style property name
+        (WebInspector.StylePropertiesSection.prototype.addNewBlankProperty): initialize a blank property for adding new properties
+        (WebInspector.StylePropertyTreeElement.prototype.updateTitle): add references to the name and value elements
+        (WebInspector.StylePropertyTreeElement.prototype.):
+        (WebInspector.StylePropertyTreeElement.prototype):
+        * inspector/front-end/inspector.js:
+        (WebInspector.startEditing.editingCommitted): include the move direction as a parameter to the commit callback
+        (WebInspector.startEditing.element.handleKeyEvent): handle the tab key to specify the move direction
+        (WebInspector.startEditing):
+
 2009-07-27  Mike Fenton  <mike.fenton@torchmobile.com>
 

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

@@ -2 +2 @@
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
@@ -256 +257 @@
     // The title will be updated in onattach.
     TreeElement.call(this, "", node, titleInfo.hasChildren);
-    
-    // Can add attributes
+
     if (this.representedObject.nodeType == Node.ELEMENT_NODE)
         this._canAddAttributes = true;
@@ -554 +554 @@
         var attribute = event.target.enclosingNodeOrSelfWithClass("webkit-html-attribute");
         if (attribute)
-            return this._startEditingAttribute(attribute, event);
+            return this._startEditingAttribute(attribute, event.target);
 
         var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
         if (newAttribute)
-            return this._addNewAttribute(event, treeElement);
+            return this._addNewAttribute(treeElement.listItemElement);
 
         return false;
     },
 
-    _addNewAttribute: function(event, treeElement)
+    _addNewAttribute: function(listItemElement)
     {
         var attr = document.createElement("span");
@@ -577 +577 @@
         attr.appendChild(value);
 
-        var tag = treeElement.listItemElement.getElementsByClassName("webkit-html-tag")[0];
+        var tag = listItemElement.getElementsByClassName("webkit-html-tag")[0];
         this._insertInLastAttributePosition(tag, attr);
-
-        // Start editing the attr span and highlight it first
-        // NOTE: _startEditingAttribute only looks at the "target", so we
-        // can fake an object here instead of passing the "event" with the
-        // wrong target element
-        return this._startEditingAttribute(attr, {target: attr});
-    },
-
-    _startEditingAttribute: function(attribute, event)
+        return this._startEditingAttribute(attr, attr);
+    },
+
+    _triggerEditAttribute: function(attributeName)
+    {
+        var attributeElements = this.listItemElement.getElementsByClassName("webkit-html-attribute-name");
+        for (var i = 0, len = attributeElements.length; i < len; ++i) {
+            if (attributeElements[i].textContent === attributeName) {
+                for (var elem = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
+                    if (elem.nodeType !== Node.ELEMENT_NODE)
+                        continue;
+
+                    if (elem.hasStyleClass("webkit-html-attribute-value"))
+                        return this._startEditingAttribute(attributeElements[i].parentNode, elem);
+                }
+            }
+        }
+    },
+
+    _startEditingAttribute: function(attribute, elementForSelection)
     {
         if (WebInspector.isBeingEdited(attribute))
@@ -618 +629 @@
 
         WebInspector.startEditing(attribute, this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
-        window.getSelection().setBaseAndExtent(event.target, 0, event.target, 1);
+        window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
 
         return true;
@@ -636 +647 @@
     },
 
-    _attributeEditingCommitted: function(element, newText, oldText, attributeName)
+    _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
     {
         delete this._editing;
+
+        // Before we do anything, determine where we should move
+        // next based on the current element's settings
+        var moveToAttribute;
+        var newAttribute;
+        if (moveDirection) {
+            var found = false;
+            var attributes = this.representedObject.attributes;
+            for (var i = 0, len = attributes.length; i < len; ++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 (!found && moveDirection === "backward")
+                moveToAttribute = attributes[attributes.length - 1].name;
+            else if (!found && moveDirection === "forward" && !/^\s*$/.test(newText))
+                newAttribute = true;
+        }
+
+        function moveToNextAttributeIfNeeded() {
+            if (moveToAttribute)
+                this._triggerEditAttribute(moveToAttribute);
+            else if (newAttribute)
+                this._addNewAttribute(this.listItemElement);
+        }
 
         var parseContainerElement = document.createElement("span");
         parseContainerElement.innerHTML = "<span " + newText + "></span>";
         var parseElement = parseContainerElement.firstChild;
-        if (!parseElement || !parseElement.hasAttributes()) {
+
+        if (!parseElement) {
             this._editingCancelled(element, attributeName);
+            moveToNextAttributeIfNeeded.call(this);
+            return;
+        }
+
+        if (!parseElement.hasAttributes()) {
+            InspectorController.inspectedWindow().Element.prototype.removeAttribute.call(this.representedObject, attributeName);
+            this._updateTitle();
+            moveToNextAttributeIfNeeded.call(this);
             return;
         }
@@ -652 +704 @@
             var attr = parseElement.attributes[i];
             foundOriginalAttribute = foundOriginalAttribute || attr.name === attributeName;
-            InspectorController.inspectedWindow().Element.prototype.setAttribute.call(this.representedObject, attr.name, attr.value);
+            try {
+                InspectorController.inspectedWindow().Element.prototype.setAttribute.call(this.representedObject, attr.name, attr.value);
+            } catch(e) {} // ignore invalid attribute (innerHTML doesn't throw errors, but this can)
         }
 
@@ -661 +715 @@
 
         this.treeOutline.focusedNodeChanged(true);
+
+        moveToNextAttributeIfNeeded.call(this);
     },
 

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

@@ -1 +1 @@
 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
@@ -388 +389 @@
             }
         }
+
+        if (this._afterUpdate) {
+            this._afterUpdate(this);
+            delete this._afterUpdate;
+        }
     },
 
@@ -426 +432 @@
             this.propertiesTreeOutline.appendChild(item);
         }
+    },
+
+    findTreeElementWithName: function(name)
+    {
+        var treeElement = this.propertiesTreeOutline.children[0];
+        while (treeElement) {
+            if (treeElement.name === name)
+                return treeElement;
+            treeElement = treeElement.traverseNextTreeElement(true, null, true);
+        }
+        return null;
+    },
+
+    addNewBlankProperty: function()
+    {
+        var item = new WebInspector.StylePropertyTreeElement(this.styleRule.style, "", false, false, false, false);
+        this.propertiesTreeOutline.appendChild(item);
+        item.listItemElement.textContent = "";
+        item._newProperty = true;
+        return item;
     }
 }
@@ -559 +585 @@
         nameElement.className = "name";
         nameElement.textContent = this.name;
+        this.nameElement = nameElement;
 
         var valueElement = document.createElement("span");
         valueElement.className = "value";
         valueElement.innerHTML = htmlValue;
+        this.valueElement = valueElement;
 
         if (priority) {
@@ -844 +872 @@
     },
 
-    editingCommitted: function(element, userInput, previousContent, context)
+    editingCommitted: function(element, userInput, previousContent, context, moveDirection)
     {
         this.editingEnded(context);
 
-        if (userInput === previousContent)
-            return; // nothing changed, so do nothing else
-
-        this.applyStyleText(userInput, true);
+        // Determine where to move to before making changes
+        var newProperty = false;
+        var moveToPropertyName;
+        var moveTo = (moveDirection === "forward" ? this.nextSibling : this.previousSibling);
+        if (moveTo)
+            moveToPropertyName = moveTo.name;
+        else if (moveDirection === "forward")
+            newProperty = true;
+
+        // Make the Changes and trigger the moveToNextCallback after updating
+        var blankInput = /^\s*$/.test(userInput);
+        if (userInput !== previousContent || (this._newProperty && blankInput)) { // only if something changed, or adding a new style and it was blank
+            this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput);
+            this.applyStyleText(userInput, true);
+        } else
+            moveToNextCallback(this._newProperty, false, this.treeOutline.section, false);
+
+        // The Callback to start editing the next property
+        function moveToNextCallback(alreadyNew, valueChanged, section) {
+            if (!moveDirection)
+                return;
+
+            // User just tabbed through without changes
+            if (moveTo && moveTo.parent) {
+                moveTo.startEditing(moveTo.valueElement);
+                return;
+            }
+
+            // User has made a change then tabbed, wiping all the original treeElements,
+            // recalculate the new treeElement for the same property we were going to edit next
+            if (moveTo && !moveTo.parent) {
+                var treeElement = section.findTreeElementWithName(moveToPropertyName);
+                if (treeElement)
+                    treeElement.startEditing(treeElement.valueElement);
+                return;
+            }
+
+            // Create a new attribute in this section
+            if (newProperty) {
+                if (alreadyNew && !valueChanged)
+                    return;
+
+                var item = section.addNewBlankProperty();
+                item.startEditing();
+            }
+        }
     },
 
@@ -877 +947 @@
         if (!styleTextLength) {
             if (updateInterface) {
-                // The user deleted the everything, so remove the tree element and update.
+                // The user deleted everything, so remove the tree element and update.
+                if (!this._newProperty)
+                    delete this.treeOutline.section._afterUpdate;
                 if (this.treeOutline.section && this.treeOutline.section.pane)
                     this.treeOutline.section.pane.update();
@@ -887 +959 @@
         if (!tempStyle.length) {
             // The user typed something, but it didn't parse. Just abort and restore
-            // the original title for this property.
+            // the original title for this property.  If this was a new attribute and
+            // we couldn't parse, then just remove it.
+            if (this._newProperty) {
+                this.parent.removeChild(this);
+                return;
+            }
             if (updateInterface)
                 this.updateTitle();

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

@@ -1320 +1320 @@
     var oldText = element.textContent;
     var oldHandleKeyEvent = element.handleKeyEvent;
+    var moveDirection = "";
 
     element.addStyleClass("editing");
@@ -1357 +1358 @@
         cleanUpAfterEditing.call(this);
 
-        committedCallback(this, this.textContent, oldText, context);
+        committedCallback(this, this.textContent, oldText, context, moveDirection);
     }
 
@@ -1373 +1374 @@
             event.preventDefault();
             event.handled = true;
-        }
+        } else if (event.keyIdentifier === "U+0009") // Tab key
+            moveDirection = (event.shiftKey ? "backward" : "forward");
     }