Changeset 35317 in webkit

Timestamp:

Jul 23, 2008 7:48:36 PM (16 years ago)

Author:

timothy@apple.com

Message:

Updates the elements DOM tree when nodes are added or removed from
the inspected document.

​https://bugs.webkit.org/show_bug.cgi?id=6590
<rdar://problem/5712921>

Reviewed by Adam Roben.

• loader/FrameLoader.cpp: (WebCore::FrameLoader::dispatchWindowObjectAvailable): Added a call to InspectorController::inspectedWindowScriptObjectCleared.
• page/InspectorController.cpp: (WebCore::InspectorController::inspectedWindowScriptObjectCleared): Calls the WebInspector.inspectedWindowCleared script function.
• page/InspectorController.h:
• page/inspector/ElementsPanel.js: (WebInspector.ElementsPanel): Create the event listener callback wrappers. (WebInspector.ElementsPanel.prototype.show): Call _updateModifiedNodes if there are any recently modified nodes. (WebInspector.ElementsPanel.prototype.reset): Remove previous mutation event listeners. Adds a check for InspectorController.isWindowVisible to prevent adding event listeners when the window isn't visible. (WebInspector.ElementsPanel.prototype.inspectedWindowCleared): (WebInspector.ElementsPanel.prototype._addMutationEventListeners): Add DOMNodeInserted, DOMNodeRemoved and DOMContentLoaded event listeners to the passed in window or window's document. (WebInspector.ElementsPanel.prototype._removeMutationEventListeners): Removes the event listeners added in _addMutationEventListeners. (WebInspector.ElementsPanel.prototype.updateMutationEventListeners): Call _addMutationEventListeners again to reinstate the listners if the document changed or window cleared them. (WebInspector.ElementsPanel.prototype.registerMutationEventListeners): Append the window to _mutationMonitoredWindows and call _addMutationEventListeners. (WebInspector.ElementsPanel.prototype.unregisterMutationEventListeners): Remove the window from _mutationMonitoredWindows and call _removeMutationEventListeners. (WebInspector.ElementsPanel.prototype.unregisterAllMutationEventListeners): Call _removeMutationEventListeners for all windows in _mutationMonitoredWindows and clear _mutationMonitoredWindows. (WebInspector.ElementsPanel.prototype._contentLoaded): Append the node and parent to the recentlyModifiedNodes array. Call _updateModifiedNodesSoon if visible. (WebInspector.ElementsPanel.prototype._nodeInserted): Ditto. (WebInspector.ElementsPanel.prototype._nodeRemoved): Ditto. (WebInspector.ElementsPanel.prototype._updateModifiedNodesSoon): Call _updateModifiedNodes on a zero timeout. (WebInspector.ElementsPanel.prototype._updateModifiedNodes): Iterate over the recentlyModifiedNodes array and call updateChildren on all the parent elements that had changes. Only calls updateChildren once per parent element. (WebInspector.ElementsPanel.prototype._isAncestorIncludingParentFrames): Return false if the nodes are the same. Return true if the nodes are the same while looking at ancestor frame elements. THis use to return false, which was incorrect. (WebInspector.DOMNodeTreeElement.prototype.onpopulate): Call updateChildren. (WebInspector.DOMNodeTreeElement.prototype.updateChildren): Copied from onpopulate and changed to rebuild the children elements by adding new children, moving existing children and removed old children. (WebInspector.DOMNodeTreeElement.prototype.onexpand): If the node has a contentDocument call registerMutationEventListeners to track any mutations.
• page/inspector/inspector.js: (WebInspector.inspectedWindowCleared): Call ElementsPanel.inspectedWindowCleared.
• page/inspector/treeoutline.js: (TreeElement.prototype.get hasChildren): Return _hasChildren. (TreeElement.prototype.set hasChildren): Set _hasChildren and update the className. (TreeElement.prototype.hasAncestor): Return true if the element has the passed in ancestor. (TreeElement.prototype.expand): Fix an exception that can happen if expand is called before _attach.
• WebCore/manual-tests/inspector/dom-mutation.html: Added.
• WebCore/manual-tests/inspector/resources/mutate-frame-2.html: Added.
• WebCore/manual-tests/inspector/resources/mutate-frame.html: Added.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• loader/FrameLoader.cpp (modified) (1 diff)
• manual-tests/inspector/dom-mutation.html (added)
• manual-tests/inspector/resources/mutate-frame-2.html (added)
• manual-tests/inspector/resources/mutate-frame.html (added)
• page/InspectorController.cpp (modified) (1 diff)
• page/InspectorController.h (modified) (1 diff)
• page/inspector/ElementsPanel.js (modified) (9 diffs)
• page/inspector/inspector.js (modified) (1 diff)
• page/inspector/treeoutline.js (modified) (4 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+2008-07-23  Timothy Hatcher  <timothy@apple.com>
+
+        Updates the elements DOM tree when nodes are added or removed from
+        the inspected document.
+
+        https://bugs.webkit.org/show_bug.cgi?id=6590
+        <rdar://problem/5712921>
+
+        Reviewed by Adam Roben.
+
+        * loader/FrameLoader.cpp:
+        (WebCore::FrameLoader::dispatchWindowObjectAvailable): Added a call to
+        InspectorController::inspectedWindowScriptObjectCleared.
+        * page/InspectorController.cpp:
+        (WebCore::InspectorController::inspectedWindowScriptObjectCleared):
+        Calls the WebInspector.inspectedWindowCleared script function.
+        * page/InspectorController.h:
+        * page/inspector/ElementsPanel.js:
+        (WebInspector.ElementsPanel): Create the event listener callback wrappers.
+        (WebInspector.ElementsPanel.prototype.show): Call _updateModifiedNodes if
+        there are any recently modified nodes.
+        (WebInspector.ElementsPanel.prototype.reset): Remove previous mutation event listeners.
+        Adds a check for InspectorController.isWindowVisible to prevent adding
+        event listeners when the window isn't visible.
+        (WebInspector.ElementsPanel.prototype.inspectedWindowCleared): 
+        (WebInspector.ElementsPanel.prototype._addMutationEventListeners): Add DOMNodeInserted,
+        DOMNodeRemoved and DOMContentLoaded event listeners to the passed in window or window's document.
+        (WebInspector.ElementsPanel.prototype._removeMutationEventListeners): Removes the event listeners
+        added in _addMutationEventListeners.
+        (WebInspector.ElementsPanel.prototype.updateMutationEventListeners): Call _addMutationEventListeners
+        again to reinstate the listners if the document changed or window cleared them.
+        (WebInspector.ElementsPanel.prototype.registerMutationEventListeners): Append the window to
+        _mutationMonitoredWindows and call _addMutationEventListeners.
+        (WebInspector.ElementsPanel.prototype.unregisterMutationEventListeners): Remove the window from
+        _mutationMonitoredWindows and call _removeMutationEventListeners.
+        (WebInspector.ElementsPanel.prototype.unregisterAllMutationEventListeners): Call
+        _removeMutationEventListeners for all windows in _mutationMonitoredWindows and
+        clear _mutationMonitoredWindows.
+        (WebInspector.ElementsPanel.prototype._contentLoaded): Append the node and parent
+        to the recentlyModifiedNodes array. Call _updateModifiedNodesSoon if visible.
+        (WebInspector.ElementsPanel.prototype._nodeInserted): Ditto.
+        (WebInspector.ElementsPanel.prototype._nodeRemoved): Ditto.
+        (WebInspector.ElementsPanel.prototype._updateModifiedNodesSoon): Call
+        _updateModifiedNodes on a zero timeout.
+        (WebInspector.ElementsPanel.prototype._updateModifiedNodes): Iterate over
+        the recentlyModifiedNodes array and call updateChildren on all the parent
+        elements that had changes. Only calls updateChildren once per parent element.
+        (WebInspector.ElementsPanel.prototype._isAncestorIncludingParentFrames): Return
+        false if the nodes are the same. Return true if the nodes are the same while
+        looking at ancestor frame elements. THis use to return false, which was incorrect.
+        (WebInspector.DOMNodeTreeElement.prototype.onpopulate): Call updateChildren.
+        (WebInspector.DOMNodeTreeElement.prototype.updateChildren): Copied from
+        onpopulate and changed to rebuild the children elements by adding new children,
+        moving existing children and removed old children.
+        (WebInspector.DOMNodeTreeElement.prototype.onexpand): If the node has a contentDocument
+        call registerMutationEventListeners to track any mutations.
+        * page/inspector/inspector.js:
+        (WebInspector.inspectedWindowCleared): Call ElementsPanel.inspectedWindowCleared.
+        * page/inspector/treeoutline.js:
+        (TreeElement.prototype.get hasChildren): Return _hasChildren.
+        (TreeElement.prototype.set hasChildren): Set _hasChildren and update the className.
+        (TreeElement.prototype.hasAncestor): Return true if the element has the passed in ancestor.
+        (TreeElement.prototype.expand): Fix an exception that can happen if expand is
+        called before _attach.
+        * WebCore/manual-tests/inspector/dom-mutation.html: Added.
+        * WebCore/manual-tests/inspector/resources/mutate-frame-2.html: Added.
+        * WebCore/manual-tests/inspector/resources/mutate-frame.html: Added.
+
 2008-07-22  Timothy Hatcher  <timothy@apple.com>
 

trunk/WebCore/loader/FrameLoader.cpp

@@ -4785 +4785 @@
 
     m_client->windowObjectCleared();
-    if (Page* page = m_frame->page())
+
+    if (Page* page = m_frame->page()) {
+        if (InspectorController* inspector = page->inspectorController())
+            inspector->inspectedWindowScriptObjectCleared(m_frame);
         if (InspectorController* inspector = page->parentInspectorController())
             inspector->windowScriptObjectAvailable();
+    }
 }
 

trunk/WebCore/page/InspectorController.cpp

@@ -1244 +1244 @@
 }
 
+void InspectorController::inspectedWindowScriptObjectCleared(Frame* frame)
+{
+    if (!enabled() || !m_scriptContext || !m_scriptObject)
+        return;
+
+    JSDOMWindow* win = toJSDOMWindow(frame);
+    ExecState* exec = win->globalExec();
+
+    JSValueRef arg0;
+
+    {
+        KJS::JSLock lock(false);
+        arg0 = toRef(JSInspectedObjectWrapper::wrap(exec, win));
+    }
+
+    JSValueRef exception = 0;
+    callFunction(m_scriptContext, m_scriptObject, "inspectedWindowCleared", 1, &arg0, exception);
+}
+
 void InspectorController::windowScriptObjectAvailable()
 {

trunk/WebCore/page/InspectorController.h

@@ -121 +121 @@
     void setScriptContext(JSContextRef context) { m_scriptContext = context; };
 
+    void inspectedWindowScriptObjectCleared(Frame*);
     void windowScriptObjectAvailable();
 

trunk/WebCore/page/inspector/ElementsPanel.js

@@ -77 +77 @@
     this.element.appendChild(this.sidebarResizeElement);
 
+    this._mutationMonitoredWindows = [];
+    this._nodeInsertedEventListener = InspectorController.wrapCallback(this._nodeInserted.bind(this));
+    this._nodeRemovedEventListener = InspectorController.wrapCallback(this._nodeRemoved.bind(this));
+    this._contentLoadedEventListener = InspectorController.wrapCallback(this._contentLoaded.bind(this));
+
     this.reset();
 }
@@ -104 +109 @@
         this.updateBreadcrumb();
         this.updateTreeSelection();
+        if (this.recentlyModifiedNodes.length)
+            this._updateModifiedNodes();
     },
 
@@ -129 +136 @@
         this.forceHoverHighlight = false;
 
+        this.recentlyModifiedNodes = [];
+        this.unregisterAllMutationEventListeners();
+
         var inspectedWindow = InspectorController.inspectedWindow();
         if (!inspectedWindow || !inspectedWindow.document)
@@ -142 +152 @@
 
             var contentLoadedCallback = InspectorController.wrapCallback(contentLoaded.bind(this));
-
             inspectedWindow.document.addEventListener("DOMContentLoaded", contentLoadedCallback, false);
             return;
         }
+
+        // If the window isn't visible, return early so the DOM tree isn't built
+        // and mutation event listeners are not added.
+        if (!InspectorController.isWindowVisible())
+            return;
+
+        this.registerMutationEventListeners(inspectedWindow);
 
         var inspectedRootDocument = inspectedWindow.document;
@@ -158 +174 @@
     },
 
+    inspectedWindowCleared: function(window)
+    {
+        if (InspectorController.isWindowVisible())
+            this.updateMutationEventListeners(window);
+    },
+
+    _addMutationEventListeners: function(monitoredWindow)
+    {
+        monitoredWindow.document.addEventListener("DOMNodeInserted", this._nodeInsertedEventListener, true);
+        monitoredWindow.document.addEventListener("DOMNodeRemoved", this._nodeRemovedEventListener, true);
+        if (monitoredWindow.frameElement)
+            monitoredWindow.addEventListener("DOMContentLoaded", this._contentLoadedEventListener, true);
+    },
+
+    _removeMutationEventListeners: function(monitoredWindow)
+    {
+        if (monitoredWindow.frameElement)
+            monitoredWindow.removeEventListener("DOMContentLoaded", this._contentLoadedEventListener, true);
+        if (!monitoredWindow.document)
+            return;
+        monitoredWindow.document.removeEventListener("DOMNodeInserted", this._nodeInsertedEventListener, true);
+        monitoredWindow.document.removeEventListener("DOMNodeRemoved", this._nodeRemovedEventListener, true);
+    },
+
+    updateMutationEventListeners: function(monitoredWindow)
+    {
+        this._addMutationEventListeners(monitoredWindow);
+    },
+
+    registerMutationEventListeners: function(monitoredWindow)
+    {
+        if (!monitoredWindow || this._mutationMonitoredWindows.indexOf(monitoredWindow) !== -1)
+            return;
+        this._mutationMonitoredWindows.push(monitoredWindow);
+        if (InspectorController.isWindowVisible())
+            this._addMutationEventListeners(monitoredWindow);
+    },
+
+    unregisterMutationEventListeners: function(monitoredWindow)
+    {
+        if (!monitoredWindow || this._mutationMonitoredWindows.indexOf(monitoredWindow) === -1)
+            return;
+        this._mutationMonitoredWindows.remove(monitoredWindow);
+        this._removeMutationEventListeners(monitoredWindow);
+    },
+
+    unregisterAllMutationEventListeners: function()
+    {
+        for (var i = 0; i < this._mutationMonitoredWindows.length; ++i)
+            this._removeMutationEventListeners(this._mutationMonitoredWindows[i]);
+        this._mutationMonitoredWindows = [];
+    },
+
     updateTreeSelection: function()
     {
@@ -257 +326 @@
         else
             this._updateHoverHighlight();
+    },
+
+    _contentLoaded: function(event)
+    {
+        this.recentlyModifiedNodes.push({node: event.target, parent: event.target.defaultView.frameElement, replaced: true});
+        if (this.visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _nodeInserted: function(event)
+    {
+        this.recentlyModifiedNodes.push({node: event.target, parent: event.relatedNode, inserted: true});
+        if (this.visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _nodeRemoved: function(event)
+    {
+        this.recentlyModifiedNodes.push({node: event.target, parent: event.relatedNode, removed: true});
+        if (this.visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _updateModifiedNodesSoon: function()
+    {
+        if ("_updateModifiedNodesTimeout" in this)
+            return;
+        this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 0);
+    },
+
+    _updateModifiedNodes: function()
+    {
+        if ("_updateModifiedNodesTimeout" in this) {
+            clearTimeout(this._updateModifiedNodesTimeout);
+            delete this._updateModifiedNodesTimeout;
+        }
+
+        var updatedParentTreeElements = [];
+        var updateBreadcrumbs = false;
+
+        for (var i = 0; i < this.recentlyModifiedNodes.length; ++i) {
+            var replaced = this.recentlyModifiedNodes[i].replaced;
+            var parent = this.recentlyModifiedNodes[i].parent;
+            if (!parent)
+                continue;
+
+            var parentNodeItem = this.treeOutline.findTreeElement(parent, null, null, objectsAreSame);
+            if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
+                parentNodeItem.updateChildren(replaced);
+                parentNodeItem.alreadyUpdatedChildren = true;
+                updatedParentTreeElements.push(parentNodeItem);
+            }
+
+            if (!updateBreadcrumbs && (objectsAreSame(this.focusedDOMNode, parent) || this._isAncestorIncludingParentFrames(this.focusedDOMNode, parent)))
+                updateBreadcrumbs = true;
+        }
+
+        for (var i = 0; i < updatedParentTreeElements.length; ++i)
+            delete updatedParentTreeElements[i].alreadyUpdatedChildren;
+
+        this.recentlyModifiedNodes = [];
+
+        if (updateBreadcrumbs)
+            this.updateBreadcrumb(true);
     },
 
@@ -889 +1022 @@
     _isAncestorIncludingParentFrames: function(a, b)
     {
+        if (objectsAreSame(a, b))
+            return false;
         for (var node = b; node; node = this._getDocumentForNode(node).defaultView.frameElement)
-            if (isAncestorNode.call(a, node))
+            if (objectsAreSame(a, node) || isAncestorNode.call(a, node))
                 return true;
         return false;
@@ -1038 +1173 @@
             return;
 
-        this.removeChildren();
         this.whitespaceIgnored = Preferences.ignoreWhitespace;
 
+        this.updateChildren();
+    },
+
+    updateChildren: function(fullRefresh)
+    {
+        if (fullRefresh) {
+            var selectedTreeElement = this.treeOutline.selectedTreeElement;
+            if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
+                this.select();
+            this.removeChildren();
+        }
+
         var treeElement = this;
-        function appendChildrenOfNode(node)
+        var treeChildIndex = 0;
+
+        function updateChildrenOfNode(node)
         {
+            var treeOutline = treeElement.treeOutline;
             var child = (Preferences.ignoreWhitespace ? firstChildSkippingWhitespace.call(node) : node.firstChild);
             while (child) {
-                treeElement.appendChild(new WebInspector.DOMNodeTreeElement(child));
+                var currentTreeElement = treeElement.children[treeChildIndex];
+                if (!currentTreeElement || !objectsAreSame(currentTreeElement.representedObject, child)) {
+                    // Find any existing element that is later in the children list.
+                    var existingTreeElement = null;
+                    for (var i = (treeChildIndex + 1); i < treeElement.children.length; ++i) {
+                        if (objectsAreSame(treeElement.children[i].representedObject, child)) {
+                            existingTreeElement = treeElement.children[i];
+                            break;
+                        }
+                    }
+
+                    if (existingTreeElement && existingTreeElement.parent === treeElement) {
+                        // If an existing element was found and it has the same parent, just move it.
+                        var wasSelected = existingTreeElement.selected;
+                        treeElement.removeChild(existingTreeElement);
+                        treeElement.insertChild(existingTreeElement, treeChildIndex);
+                        if (wasSelected)
+                            existingTreeElement.select();
+                    } else {
+                        // No existing element found, insert a new element.
+                        treeElement.insertChild(new WebInspector.DOMNodeTreeElement(child), treeChildIndex);
+                    }
+                }
+
                 child = Preferences.ignoreWhitespace ? nextSiblingSkippingWhitespace.call(child) : child.nextSibling;
-            }
+                ++treeChildIndex;
+            }
+        }
+
+        // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
+        for (var i = (this.children.length - 1); i >= 0; --i) {
+            if ("elementCloseTag" in this.children[i])
+                continue;
+
+            var currentChild = this.children[i];
+            var currentNode = currentChild.representedObject;
+            var currentParentNode = currentNode.parentNode;
+
+            if (objectsAreSame(currentParentNode, this.representedObject))
+                continue;
+            if (this.representedObject.contentDocument && objectsAreSame(currentParentNode, this.representedObject.contentDocument))
+                continue;
+
+            var selectedTreeElement = this.treeOutline.selectedTreeElement;
+            if (selectedTreeElement && (selectedTreeElement === currentChild || selectedTreeElement.hasAncestor(currentChild)))
+                this.select();
+
+            this.removeChildAtIndex(i);
+
+            if (currentNode.contentDocument)
+                this.treeOutline.panel.unregisterMutationEventListeners(currentNode.contentDocument.defaultView);
         }
 
         if (this.representedObject.contentDocument)
-            appendChildrenOfNode(this.representedObject.contentDocument);
-
-        appendChildrenOfNode(this.representedObject);
-
-        if (this.representedObject.nodeType == Node.ELEMENT_NODE) {
+            updateChildrenOfNode(this.representedObject.contentDocument);
+        updateChildrenOfNode(this.representedObject);
+
+        var lastChild = this.children[this.children.length - 1];
+        if (this.representedObject.nodeType == Node.ELEMENT_NODE && (!lastChild || !lastChild.elementCloseTag)) {
             var title = "<span class=\"webkit-html-tag close\">&lt;/" + this.representedObject.nodeName.toLowerCase().escapeHTML() + "&gt;</span>";
-            var item = new TreeElement(title, this.representedObject, false);
+            var item = new TreeElement(title, null, false);
             item.selectable = false;
+            item.elementCloseTag = true;
             this.appendChild(item);
         }
@@ -1067 +1265 @@
     {
         this.treeOutline.panel.updateTreeSelection();
+
+        if (this.representedObject.contentDocument)
+            this.treeOutline.panel.registerMutationEventListeners(this.representedObject.contentDocument.defaultView);
     },
 

trunk/WebCore/page/inspector/inspector.js

@@ -785 +785 @@
 
     this.console.clearMessages();
+}
+
+WebInspector.inspectedWindowCleared = function(inspectedWindow)
+{
+    this.panels.elements.inspectedWindowCleared(inspectedWindow);
 }
 

trunk/WebCore/page/inspector/treeoutline.js

@@ -467 +467 @@
     },
 
+    get hasChildren() {
+        return this._hasChildren;
+    },
+
+    set hasChildren(x) {
+        if (this._hasChildren === x)
+            return;
+
+        this._hasChildren = x;
+
+        if (!this._listItemNode)
+            return;
+
+        if (x)
+            this._listItemNode.addStyleClass("parent");
+        else {
+            this._listItemNode.removeStyleClass("parent");
+            this.collapse();
+        }
+    },
+
     get hidden() {
         return this._hidden;
@@ -629 +650 @@
         return;
 
-    if (!this._childrenListNode || this._shouldRefreshChildren) {
+    if (this.treeOutline && (!this._childrenListNode || this._shouldRefreshChildren)) {
         if (this._childrenListNode && this._childrenListNode.parentNode)
             this._childrenListNode.parentNode.removeChild(this._childrenListNode);
@@ -651 +672 @@
     if (this._listItemNode) {
         this._listItemNode.addStyleClass("expanded");
-        if (this._childrenListNode.parentNode != this._listItemNode.parentNode)
+        if (this._childrenListNode && this._childrenListNode.parentNode != this._listItemNode.parentNode)
             this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
     }
@@ -686 +707 @@
 }
 
+TreeElement.prototype.hasAncestor = function(ancestor) {
+    if (!ancestor)
+        return false;
+
+    var currentNode = this.parent;
+    while (currentNode) {
+        if (ancestor === currentNode)
+            return true;
+        currentNode = currentNode.parent;
+    }
+
+    return false;
+}
+
 TreeElement.prototype.reveal = function()
 {