Devtools: [ElementsPanel] Add dom listeners in sidebars

Source/devtools/front_end/sdk/DOMModel.js

Index: Source/devtools/front_end/sdk/DOMModel.js
diff --git a/Source/devtools/front_end/sdk/DOMModel.js b/Source/devtools/front_end/sdk/DOMModel.js
index 614cad6fcc441a940fd7fd94d44e0cc4beb89236..ae5e8b03a8b49cd711f8bfdd7e90972c2e014aae 100644
--- a/Source/devtools/front_end/sdk/DOMModel.js
+++ b/Source/devtools/front_end/sdk/DOMModel.js
@@ -1126,6 +1126,54 @@ WebInspector.DOMModel.cancelSearch = function()
 }
 
 WebInspector.DOMModel.prototype = {
+
+    _fireMutationEvent: function()
+    {
+        this._lastMutationId = (this._lastMutationId || 0) + 1;

[pfeldman, 2015/04/29 13:53:15]

fast return if no listeners.

[sergeyv, 2015/04/30 12:34:13]

Done.

+        Promise.resolve().then(callObserve.bind(this, this._lastMutationId));
+
+        /**
+         * @this {WebInspector.DOMModel}
+         * @param {number} mutationId
+         */
+        function callObserve(mutationId)
+        {
+            if (!this._mutationsObservers || this._lastMutationId !== mutationId)
+                return;
+
+                for (var observerInfo of this._mutationsObservers)

[pfeldman, 2015/04/29 13:53:15]

this.dispatchEventToListeners(DOMMutated);

[sergeyv, 2015/04/30 12:34:13]

Done.

+                    observerInfo.observer.call(observerInfo.thisObject);
+        }
+    },
+
+    /**
+     * @param {function()} observer
+     * @param {!Object=} thisObject
+     */
+    addDOMMutationsObserver: function(observer, thisObject)
+    {
+        if (!this._mutationsObservers)
+            this._mutationsObservers = [];
+
+        this._mutationsObservers.push({observer: observer, thisObject: thisObject});
+    },
+
+    /**
+     * @param {function()} observer
+     * @param {!Object=} thisObject
+     */
+    removeDOMMutationsObserver: function(observer, thisObject)
+    {
+        if (!this._mutationsObservers)
+            return;
+
+        for (var i = 0; i < this._mutationsObservers.length; ++i) {
+            if (this._mutationsObservers[i].observer === observer && this._mutationsObservers[i].thisObject === thisObject)
+                this._mutationsObservers.splice(i--, 1);
+        }

[pfeldman, 2015/04/29 13:53:15]

delete if empty (along with the methods).

[sergeyv, 2015/04/30 12:34:13]

Done.

+
+    },
+
     /**
      * @param {function(!WebInspector.DOMDocument)=} callback
      */
@@ -1430,6 +1478,7 @@ WebInspector.DOMModel.prototype = {
         var node = parent._insertChild(prev, payload);
         this._idToDOMNode[node.id] = node;
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeInserted, node);
+        this._fireMutationEvent();
     },
 
     /**
@@ -1443,6 +1492,7 @@ WebInspector.DOMModel.prototype = {
         parent._removeChild(node);
         this._unbind(node);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeRemoved, {node: node, parent: parent});
+        this._fireMutationEvent();
     },
 
     /**
@@ -1459,6 +1509,7 @@ WebInspector.DOMModel.prototype = {
         this._idToDOMNode[node.id] = node;
         host._shadowRoots.unshift(node);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeInserted, node);
+        this._fireMutationEvent();
     },
 
     /**
@@ -1476,6 +1527,7 @@ WebInspector.DOMModel.prototype = {
         host._removeChild(root);
         this._unbind(root);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeRemoved, {node: root, parent: host});
+        this._fireMutationEvent();
     },
 
     /**
@@ -1493,6 +1545,7 @@ WebInspector.DOMModel.prototype = {
         console.assert(!parent._pseudoElements.get(node.pseudoType()));
         parent._pseudoElements.set(node.pseudoType(), node);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeInserted, node);
+        this._fireMutationEvent();
     },
 
     /**
@@ -1510,6 +1563,7 @@ WebInspector.DOMModel.prototype = {
         parent._removeChild(pseudoElement);
         this._unbind(pseudoElement);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeRemoved, {node: pseudoElement, parent: parent});
+        this._fireMutationEvent();
     },
 
     /**
@@ -1523,6 +1577,7 @@ WebInspector.DOMModel.prototype = {
             return;
         insertionPoint._setDistributedNodePayloads(distributedNodes);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.DistributedNodesChanged, insertionPoint);
+        this._fireMutationEvent();
     },
 
     /**