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 1058 matching lines @@
     this._defaultHighlighter = new WebInspector.DefaultDOMNodeHighlighter(this._agent);
     this._highlighter = this._defaultHighlighter;
 
     this._agent.enable();
 }
 
 WebInspector.DOMModel.Events = {
     AttrModified: "AttrModified",
     AttrRemoved: "AttrRemoved",
     CharacterDataModified: "CharacterDataModified",
+    DOMMutated: "DOMMutated",
     NodeInserted: "NodeInserted",
     NodeInspected: "NodeInspected",
     NodeRemoved: "NodeRemoved",
     DocumentUpdated: "DocumentUpdated",
     ChildNodeCountUpdated: "ChildNodeCountUpdated",
     UndoRedoRequested: "UndoRedoRequested",
     UndoRedoCompleted: "UndoRedoCompleted",
     DistributedNodesChanged: "DistributedNodesChanged",
     ModelSuspended: "ModelSuspended",
     InspectModeWillBeToggled: "InspectModeWillBeToggled"
@@ skipping 30 matching lines @@
         domModel.highlightDOMNode(0);
 }
 
 WebInspector.DOMModel.cancelSearch = function()
 {
     for (var domModel of WebInspector.DOMModel.instances())
         domModel._cancelSearch();
 }
 
 WebInspector.DOMModel.prototype = {
+
+    _fireMutationEvent: function()

[pfeldman, 2015/05/05 14:13:07]

_scheduleMutationEvent

[sergeyv, 2015/05/06 08:35:54]

Done.

+    {
+        if (!this.hasEventListeners(WebInspector.DOMModel.Events.DOMMutated))
+            return;
+
+        this._lastMutationId = (this._lastMutationId || 0) + 1;
+        Promise.resolve().then(callObserve.bind(this, this._lastMutationId));
+
+        /**
+         * @this {WebInspector.DOMModel}
+         * @param {number} mutationId
+         */
+        function callObserve(mutationId)
+        {
+            if (!this.hasEventListeners(WebInspector.DOMModel.Events.DOMMutated) || this._lastMutationId !== mutationId)
+                return;
+
+            this.dispatchEventToListeners(WebInspector.DOMModel.Events.DOMMutated);
+        }
+    },
+
     /**
      * @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));
 }