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 = {
+    _scheduleMutationEvent: function()
+    {
+        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 140 matching lines @@
      * @param {string} value
      */
     _attributeModified: function(nodeId, name, value)
     {
         var node = this._idToDOMNode[nodeId];
         if (!node)
             return;
 
         node._setAttribute(name, value);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.AttrModified, { node: node, name: name });
+        this._scheduleMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {string} name
      */
     _attributeRemoved: function(nodeId, name)
     {
         var node = this._idToDOMNode[nodeId];
         if (!node)
             return;
         node._removeAttribute(name);
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.AttrRemoved, { node: node, name: name });
+        this._scheduleMutationEvent();
     },
 
     /**
      * @param {!Array.<!DOMAgent.NodeId>} nodeIds
      */
     _inlineStyleInvalidated: function(nodeIds)
     {
         for (var i = 0; i < nodeIds.length; ++i)
             this._attributeLoadNodeIds[nodeIds[i]] = true;
         if ("_loadNodeAttributesTimeout" in this)
@@ skipping 10 matching lines @@
          * @param {!Array.<string>} attributes
          */
         function callback(nodeId, error, attributes)
         {
             if (error) {
                 // We are calling _loadNodeAttributes asynchronously, it is ok if node is not found.
                 return;
             }
             var node = this._idToDOMNode[nodeId];
             if (node) {
-                if (node._setAttributesPayload(attributes))
+                if (node._setAttributesPayload(attributes)) {
                     this.dispatchEventToListeners(WebInspector.DOMModel.Events.AttrModified, { node: node, name: "style" });
+                    this._scheduleMutationEvent();
+                }
             }
         }
 
         delete this._loadNodeAttributesTimeout;
 
         for (var nodeId in this._attributeLoadNodeIds) {
             var nodeIdAsNumber = parseInt(nodeId, 10);
             this._agent.getAttributes(nodeIdAsNumber, callback.bind(this, nodeIdAsNumber));
         }
         this._attributeLoadNodeIds = {};
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {string} newValue
      */
     _characterDataModified: function(nodeId, newValue)
     {
         var node = this._idToDOMNode[nodeId];
         node._nodeValue = newValue;
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.CharacterDataModified, node);
+        this._scheduleMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @return {?WebInspector.DOMNode}
      */
     nodeForId: function(nodeId)
     {
         return this._idToDOMNode[nodeId] || null;
     },
@@ skipping 44 matching lines @@
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {number} newValue
      */
     _childNodeCountUpdated: function(nodeId, newValue)
     {
         var node = this._idToDOMNode[nodeId];
         node._childNodeCount = newValue;
         this.dispatchEventToListeners(WebInspector.DOMModel.Events.ChildNodeCountUpdated, node);
+        this._scheduleMutationEvent();
     },
 
     /**
      * @param {!DOMAgent.NodeId} parentId
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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._scheduleMutationEvent();
     },
 
     /**
      * @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 592 matching lines @@
 }
 
 /**
  * @param {!WebInspector.Target} target
  * @return {?WebInspector.DOMModel}
  */
 WebInspector.DOMModel.fromTarget = function(target)
 {
     return /** @type {?WebInspector.DOMModel} */ (target.model(WebInspector.DOMModel));
 }