Devtools: [ElementsPanel] Add dom listeners in sidebars

Source/devtools/front_end/sdk/DOMModel.js

 /*
  * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 1108 matching lines @@
         domModel.highlightDOMNode(0);
 }
 
 WebInspector.DOMModel.cancelSearch = function()
 {
     for (var domModel of WebInspector.DOMModel.instances())
         domModel._cancelSearch();
 }
 
 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
      */
     requestDocument: function(callback)
     {
         if (this._document) {
             if (callback)
                 callback(this._document);
             return;
         }
@@ skipping 284 matching lines @@
      * @param {!DOMAgent.NodeId} prevId
      * @param {!DOMAgent.Node} payload
      */
     _childNodeInserted: function(parentId, prevId, payload)
     {
         var parent = this._idToDOMNode[parentId];
         var prev = this._idToDOMNode[prevId];
         var node = parent._insertChild(prev, payload);
         this._idToDOMNode[node.id] = node;
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeInserted, node);
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} parentId
      * @param {!DOMAgent.NodeId} nodeId
      */
     _childNodeRemoved: function(parentId, nodeId)
     {
         var parent = this._idToDOMNode[parentId];
         var node = this._idToDOMNode[nodeId];
         parent._removeChild(node);
         this._unbind(node);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeRemoved, {node: node, parent: parent});
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} hostId
      * @param {!DOMAgent.Node} root
      */
     _shadowRootPushed: function(hostId, root)
     {
         var host = this._idToDOMNode[hostId];
         if (!host)
             return;
         var node = new WebInspector.DOMNode(this, host.ownerDocument, true, root);
         node.parentNode = host;
         this._idToDOMNode[node.id] = node;
         host._shadowRoots.unshift(node);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeInserted, node);
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} hostId
      * @param {!DOMAgent.NodeId} rootId
      */
     _shadowRootPopped: function(hostId, rootId)
     {
         var host = this._idToDOMNode[hostId];
         if (!host)
             return;
         var root = this._idToDOMNode[rootId];
         if (!root)
             return;
         host._removeChild(root);
         this._unbind(root);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeRemoved, {node: root, parent: host});
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} parentId
      * @param {!DOMAgent.Node} pseudoElement
      */
     _pseudoElementAdded: function(parentId, pseudoElement)
     {
         var parent = this._idToDOMNode[parentId];
         if (!parent)
             return;
         var node = new WebInspector.DOMNode(this, parent.ownerDocument, false, pseudoElement);
         node.parentNode = parent;
         this._idToDOMNode[node.id] = node;
         console.assert(!parent._pseudoElements.get(node.pseudoType()));
         parent._pseudoElements.set(node.pseudoType(), node);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeInserted, node);
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} parentId
      * @param {!DOMAgent.NodeId} pseudoElementId
      */
     _pseudoElementRemoved: function(parentId, pseudoElementId)
     {
         var parent = this._idToDOMNode[parentId];
         if (!parent)
             return;
         var pseudoElement = this._idToDOMNode[pseudoElementId];
         if (!pseudoElement)
             return;
         parent._removeChild(pseudoElement);
         this._unbind(pseudoElement);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.NodeRemoved, {node: pseudoElement, parent: parent});
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} insertionPointId
      * @param {!Array.<!DOMAgent.BackendNode>} distributedNodes
      */
     _distributedNodesUpdated: function(insertionPointId, distributedNodes)
     {
         var insertionPoint = this._idToDOMNode[insertionPointId];
         if (!insertionPoint)
             return;
         insertionPoint._setDistributedNodePayloads(distributedNodes);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.DistributedNodesChanged, insertionPoint);
+        this._fireMutationEvent();
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
     _unbind: function(node)
     {
         delete this._idToDOMNode[node.id];
         for (var i = 0; node._children && i < node._children.length; ++i)
             this._unbind(node._children[i]);
@@ skipping 652 matching lines @@
 }
 
 /**
  * @param {!WebInspector.Target} target
  * @return {?WebInspector.DOMModel}
  */
 WebInspector.DOMModel.fromTarget = function(target)
 {
     return /** @type {?WebInspector.DOMModel} */ (target.model(WebInspector.DOMModel));
 }