2007-11-08 Timothy Hatcher <timothy@apple.com>

        Reviewed by Sam Weinig.

        Some Web Inspector CSS editing changes.
        - Only delete the property if all the text is delete or the new user input correctly parses.
          This prevents deleting the existing property if the new text is invalid.
        - Intercept the Escape key and cancel editing, not saving any changes.

        * page/inspector/StylesSidebarPane.js:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@27638 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index c6a44812130d8c02617ec1a3d4a58cd1499ee61f..b3a4e85fc8e07328fa8923eb0821f0c170162353 100644 (file)
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,14 @@
+2007-11-08  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by Sam Weinig.
+
+        Some Web Inspector CSS editing changes.
+        - Only delete the property if all the text is delete or the new user input correctly parses.
+          This prevents deleting the existing property if the new text is invalid.
+        - Intercept the Escape key and cancel editing, not saving any changes.
+
+        * page/inspector/StylesSidebarPane.js:
+
 2007-11-08  Kevin Ollivier  <kevino@theolliviers.com>
 
         Bakefiles for building WebCore, needed by wx port.

diff --git a/WebCore/page/inspector/StylesSidebarPane.js b/WebCore/page/inspector/StylesSidebarPane.js
index 57c8da56c26a89bc87f1b38b7194689da5669aa8..1896da6baa581356c10dda22d78dea1863a6ff59 100644 (file)
--- a/WebCore/page/inspector/StylesSidebarPane.js
+++ b/WebCore/page/inspector/StylesSidebarPane.js
@@ -567,10 +567,13 @@ WebInspector.StylePropertyTreeElement.prototype = {
         window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
 
         var treeElement = this;
-        this.listItemElement.blurred = function() { treeElement.endEditing() };
+        this.listItemElement.blurred = function() { treeElement.commitEditing() };
         this.listItemElement.handleKeyEvent = function(event) {
             if (event.keyIdentifier === "Enter") {
-                treeElement.endEditing();
+                treeElement.commitEditing();
+                event.preventDefault();
+            } else if (event.keyCode === 27) { // Escape key
+                treeElement.cancelEditing();
                 event.preventDefault();
             }
         };
@@ -588,6 +591,7 @@ WebInspector.StylePropertyTreeElement.prototype = {
         WebInspector.currentFocusElement = this.previousFocusElement;
         delete this.previousFocusElement;
 
+        delete this.previousTextContent;
         delete this.editing;
 
         this.listItemElement.removeStyleClass("focusable");
@@ -597,66 +601,88 @@ WebInspector.StylePropertyTreeElement.prototype = {
             delete this.wasExpanded;
             this.expand();
         }
+    },
+
+    cancelEditing: function()
+    {
+        this.endEditing();
+        this.updateTitle();
+    },
 
+    commitEditing: function()
+    {
         var previousContent = this.previousTextContent;
-        delete this.previousTextContent;
+
+        this.endEditing();
 
         var userInput = this.listItemElement.textContent;
         if (userInput === previousContent)
             return; // nothing changed, so do nothing else
 
-        // Remove the original property from the real style declaration, if this represents
-        // a shorthand remove all the longhand properties.
-        if (this.shorthand) {
-            var longhandProperties = this.style.getLonghandProperties(this.name);
-            for (var i = 0; i < longhandProperties.length; ++i)
-                this.style.removeProperty(longhandProperties[i]);
-        } else
-            this.style.removeProperty(this.name);
+        var userInputLength = userInput.trimWhitespace().length;
 
         // Create a new element to parse the user input CSS.
         var parseElement = document.createElement("span");
         parseElement.setAttribute("style", userInput);
 
         var userInputStyle = parseElement.style;
-        if (userInputStyle.length) {
-            // Iterate of the properties on the test element's style declaration and
-            // add them to the real style declaration. We take care to move shorthands.
+        if (userInputStyle.length || !userInputLength) {
+            // The input was parsable or the user deleted everything, so remove the
+            // original property from the real style declaration. If this represents
+            // a shorthand remove all the longhand properties.
+            if (this.shorthand) {
+                var longhandProperties = this.style.getLonghandProperties(this.name);
+                for (var i = 0; i < longhandProperties.length; ++i)
+                    this.style.removeProperty(longhandProperties[i]);
+            } else
+                this.style.removeProperty(this.name);
+        }
 
-            var foundShorthands = {};
-            var uniqueProperties = userInputStyle.getUniqueProperties();
+        if (!userInputLength) {
+            // The user deleted the everything, so remove the tree element and update.
+            if (this.treeOutline.section && this.treeOutline.section.pane)
+                this.treeOutline.section.pane.update();
+            this.parent.removeChild(this);
+            return;
+        }
 
-            for (var i = 0; i < uniqueProperties.length; ++i) {
-                var name = uniqueProperties[i];
-                var shorthand = userInputStyle.getPropertyShorthand(name);
+        if (!userInputStyle.length) {
+            // The user typed something, but it didn't parse. Just abort and restore
+            // the original title for this property.
+            this.updateTitle();
+            return;
+        }
 
-                if (shorthand && shorthand in foundShorthands)
-                    continue;
+        // Iterate of the properties on the test element's style declaration and
+        // add them to the real style declaration. We take care to move shorthands.
+        var foundShorthands = {};
+        var uniqueProperties = userInputStyle.getUniqueProperties();
+        for (var i = 0; i < uniqueProperties.length; ++i) {
+            var name = uniqueProperties[i];
+            var shorthand = userInputStyle.getPropertyShorthand(name);
 
-                if (shorthand) {
-                    var value = userInputStyle.getShorthandValue(shorthand);
-                    var priority = userInputStyle.getShorthandPriority(shorthand);
-                    foundShorthands[shorthand] = true;
-                } else {
-                    var value = userInputStyle.getPropertyValue(name);
-                    var priority = userInputStyle.getPropertyPriority(name);
-                }
+            if (shorthand && shorthand in foundShorthands)
+                continue;
 
-                // Set the property on the real style declaration.
-                this.style.setProperty((shorthand || name), value, priority);
+            if (shorthand) {
+                var value = userInputStyle.getShorthandValue(shorthand);
+                var priority = userInputStyle.getShorthandPriority(shorthand);
+                foundShorthands[shorthand] = true;
+            } else {
+                var value = userInputStyle.getPropertyValue(name);
+                var priority = userInputStyle.getPropertyPriority(name);
             }
 
-            if (this.treeOutline.section && this.treeOutline.section.pane)
-                this.treeOutline.section.pane.update(null, this.treeOutline.section);
-            else if (this.treeOutline.section)
-                this.treeOutline.section.update(true);
-            else
-                this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
-        } else {
-            if (this.treeOutline.section && this.treeOutline.section.pane)
-                this.treeOutline.section.pane.update();
-            this.parent.removeChild(this);
+            // Set the property on the real style declaration.
+            this.style.setProperty((shorthand || name), value, priority);
         }
+
+        if (this.treeOutline.section && this.treeOutline.section.pane)
+            this.treeOutline.section.pane.update(null, this.treeOutline.section);
+        else if (this.treeOutline.section)
+            this.treeOutline.section.update(true);
+        else
+            this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
     }
 }