Changeset 30931 in webkit

Timestamp:

Mar 10, 2008 9:17:38 AM (16 years ago)

Author:

Adam Roben

Message:

Refactor CSS editing code so we can share it with DOM editing

Add WebInspector.startEditing, which takes the element to be edited, a
committedCallback, a cancelledCallback, and a context parameter. This
function takes care of setting up the element for editing, and calls
either the cancelledCallback or committedCallback when editing ends.

Reviewed by Tim.

• page/inspector/StylesSidebarPane.js: (WebInspector.StylePropertyTreeElement.startEditing):
  • Call WebInspector.isBeingEdited and WebInspector.startEditing
  • Removed code now handled by WebInspector.startEditing

(WebInspector.StylePropertyTreeElement.editingEnded):

• Renamed from endEditing
• Removed code now handled by WebInspector.startEditing

(WebInspector.StylePropertyTreeElement.editingCancelled):

• Renamed from cancelEditing
• Changed parameters to match WebInspector.startEditing's cancelledCallback

(WebInspector.StylePropertyTreeElement.editingCommitted):

• Renamed from commitEditing
• Changed parameters to match WebInspector.startEditing's committedCallback

• page/inspector/inspector.js: (WebInspector.changeFocus): Changed a call to firstParentWithClassName to firstParentOrSelfWithClassName so that if the focusable element itself is the target it will be recognized. I don't know why this change wasn't needed before this. (WebInspector.isBeingEdited): Added. (WebInspector.startEditing): Added.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/inspector/StylesSidebarPane.js (modified) (2 diffs)
• page/inspector/inspector.js (modified) (2 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2008-03-09  Adam Roben  <aroben@apple.com>
+
+        Refactor CSS editing code so we can share it with DOM editing
+
+        Add WebInspector.startEditing, which takes the element to be edited, a
+        committedCallback, a cancelledCallback, and a context parameter. This
+        function takes care of setting up the element for editing, and calls
+        either the cancelledCallback or committedCallback when editing ends.
+
+        Reviewed by Tim.
+
+        * page/inspector/StylesSidebarPane.js:
+        (WebInspector.StylePropertyTreeElement.startEditing):
+          - Call WebInspector.isBeingEdited and WebInspector.startEditing
+          - Removed code now handled by WebInspector.startEditing
+        (WebInspector.StylePropertyTreeElement.editingEnded):
+          - Renamed from endEditing
+          - Removed code now handled by WebInspector.startEditing
+        (WebInspector.StylePropertyTreeElement.editingCancelled):
+          - Renamed from cancelEditing
+          - Changed parameters to match WebInspector.startEditing's
+            cancelledCallback
+        (WebInspector.StylePropertyTreeElement.editingCommitted):
+          - Renamed from commitEditing
+          - Changed parameters to match WebInspector.startEditing's
+            committedCallback
+        * page/inspector/inspector.js:
+        (WebInspector.changeFocus): Changed a call to firstParentWithClassName
+        to firstParentOrSelfWithClassName so that if the focusable element
+        itself is the target it will be recognized. I don't know why this
+        change wasn't needed before this.
+        (WebInspector.isBeingEdited): Added.
+        (WebInspector.startEditing): Added.
+
 2008-03-10  Adam Roben  <aroben@apple.com>
 

trunk/WebCore/page/inspector/StylesSidebarPane.js

@@ -542 +542 @@
             return;
 
-        if (this.editing || (this.treeOutline.section && !this.treeOutline.section.editable))
-            return;
-
-        this.editing = true;
-        this.previousTextContent = this.listItemElement.textContent;
-
-        this.listItemElement.addStyleClass("focusable");
-        this.listItemElement.addStyleClass("editing");
-        this.wasExpanded = this.expanded;
+        if (WebInspector.isBeingEdited(this.listItemElement) || (this.treeOutline.section && !this.treeOutline.section.editable))
+            return;
+
+        var wasExpanded = this.expanded;
         this.collapse();
         // Lie about out children to prevent toggling on click.
@@ -560 +555 @@
         window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
 
-        var treeElement = this;
-        this.listItemElement.blurred = function() { treeElement.commitEditing() };
-        this.listItemElement.handleKeyEvent = function(event) {
-            if (event.keyIdentifier === "Enter") {
-                treeElement.commitEditing();
-                event.preventDefault();
-            } else if (event.keyCode === 27) { // Escape key
-                treeElement.cancelEditing();
-                event.preventDefault();
-            }
-        };
-
-        this.previousFocusElement = WebInspector.currentFocusElement;
-        WebInspector.currentFocusElement = this.listItemElement;
-    },
-
-    endEditing: function()
-    {
-        // Revert the changes done in startEditing().
-        delete this.listItemElement.blurred;
-        delete this.listItemElement.handleKeyEvent;
-
-        WebInspector.currentFocusElement = this.previousFocusElement;
-        delete this.previousFocusElement;
-
-        delete this.previousTextContent;
-        delete this.editing;
-
-        this.listItemElement.removeStyleClass("focusable");
-        this.listItemElement.removeStyleClass("editing");
+        WebInspector.startEditing(this.listItemElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), wasExpanded);
+    },
+
+    editingEnded: function(wasExpanded)
+    {
         this.hasChildren = (this.children.length ? true : false);
-        if (this.wasExpanded) {
-            delete this.wasExpanded;
+        if (wasExpanded)
             this.expand();
-        }
-    },
-
-    cancelEditing: function()
-    {
-        this.endEditing();
+    },
+
+    editingCancelled: function(e, wasExpanded)
+    {
+        this.editingEnded(wasExpanded);
         this.updateTitle();
     },
 
-    commitEditing: function()
-    {
-        var previousContent = this.previousTextContent;
-
-        this.endEditing();
-
-        var userInput = this.listItemElement.textContent;
+    editingCommitted: function(e, userInput, previousContent, wasExpanded)
+    {
+        this.editingEnded();
+
         if (userInput === previousContent)
             return; // nothing changed, so do nothing else

trunk/WebCore/page/inspector/inspector.js

@@ -321 +321 @@
 
     if (!nextFocusElement)
-        nextFocusElement = event.target.firstParentWithClass("focusable");
+        nextFocusElement = event.target.firstParentOrSelfWithClass("focusable");
 
     this.currentFocusElement = nextFocusElement;
@@ -1052 +1052 @@
 
     return String.vsprintf(string, Array.prototype.slice.call(arguments, 1));
+}
+
+WebInspector.isBeingEdited = function(element)
+{
+    return element.__editing;
+}
+
+WebInspector.startEditing = function(element, committedCallback, cancelledCallback, context)
+{
+    if (element.__editing)
+        return;
+    element.__editing = true;
+
+    var oldText = element.textContent;
+    var handleKeyEvent = element.handleKeyEvent;
+    var blurred = element.blurred;
+
+    element.addStyleClass("editing");
+    element.addStyleClass("focusable");
+
+    var previousFocusElement = WebInspector.currentFocusElement;
+
+    function cleanUpAfterEditing() {
+        delete this.__editing;
+
+        this.removeStyleClass("editing");
+        this.removeStyleClass("focusable");
+
+        this.handleKeyEvent = handleKeyEvent;
+        this.blurred = blurred;
+
+        WebInspector.currentFocusElement = previousFocusElement;
+    }
+
+    function editingCancelled() {
+        this.innerText = oldText;
+
+        cleanUpAfterEditing.call(this);
+
+        cancelledCallback(this, context);
+    }
+
+    function editingCommitted() {
+        cleanUpAfterEditing.call(this);
+
+        committedCallback(this, this.textContent, oldText, context);
+    }
+
+    element.handleKeyEvent = function(event) {
+        if (event.keyIdentifier === "Enter") {
+            editingCommitted.call(element);
+            event.preventDefault();
+        } else if (event.keyCode === 27) { // Escape key
+            editingCancelled.call(element);
+            event.preventDefault();
+        }
+    }
+
+    element.blurred = function() { editingCancelled.call(element); }
+
+    WebInspector.currentFocusElement = element;
 }