DevTools: introduce dom markers, decorate hidden, forced state and breakpoint elements using marker…

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 75735c42f5898e2011f62887d0f98e7f7a59f65a..a5e25a8daaa444896a2133bee8424ccf140c5213 100644
--- a/Source/devtools/front_end/sdk/DOMModel.js
+++ b/Source/devtools/front_end/sdk/DOMModel.js
@@ -62,8 +62,8 @@ WebInspector.DOMNode = function(domModel, doc, isInShadowTree, payload)
     if (payload.attributes)
         this._setAttributesPayload(payload.attributes);
 
-    this._userProperties = {};
-    this._descendantUserPropertyCounters = {};
+    this._markers = {};
+    this._subtreeMarkerCount = 0;
 
     this._childNodeCount = payload.childNodeCount || 0;
     this._children = null;
@@ -649,7 +649,8 @@ WebInspector.DOMNode.prototype = {
             }
         }
         node.parentNode = null;
-        node._updateChildUserPropertyCountsOnRemoval(this);
+        this._subtreeMarkerCount -= node._subtreeMarkerCount;
+        this._domModel.dispatchEventToListeners(WebInspector.DOMModel.Events.MarkersChanged, this);

[dgozman, 2015/08/07 23:35:05]

if (node._subtreeMarkerCount) ...

[pfeldman, 2015/08/10 21:35:17]

Done.

         this._renumber();
     },
 
@@ -784,57 +785,33 @@ WebInspector.DOMNode.prototype = {
         return !!this.ownerDocument && !!this.ownerDocument.xmlVersion;
     },
 
-    _updateChildUserPropertyCountsOnRemoval: function(parentNode)
+    /**
+     * @param {string} name
+     * @param {?*} value
+     */
+    setMarker: function(name, value)
     {
-        var result = {};
-        if (this._userProperties) {
-            for (var name in this._userProperties)
-                result[name] = (result[name] || 0) + 1;
-        }
+        if (value === null) {
+            if (!this._markers.hasOwnProperty(name))
+                return;
 
-        if (this._descendantUserPropertyCounters) {
-            for (var name in this._descendantUserPropertyCounters) {
-                var counter = this._descendantUserPropertyCounters[name];
-                result[name] = (result[name] || 0) + counter;
+            delete this._markers[name];
+            for (var node = this; node; node = node.parentNode) {
+                --node._subtreeMarkerCount;
+                this._domModel.dispatchEventToListeners(WebInspector.DOMModel.Events.MarkersChanged, node);

[dgozman, 2015/08/07 23:35:05]

This call is done below.

[pfeldman, 2015/08/10 21:35:17]

Done.

             }
-        }
-
-        for (var name in result)
-            parentNode._updateDescendantUserPropertyCount(name, -result[name]);
-    },
-
-    _updateDescendantUserPropertyCount: function(name, delta)
-    {
-        if (!this._descendantUserPropertyCounters.hasOwnProperty(name))
-            this._descendantUserPropertyCounters[name] = 0;
-        this._descendantUserPropertyCounters[name] += delta;
-        if (!this._descendantUserPropertyCounters[name])
-            delete this._descendantUserPropertyCounters[name];
-        if (this.parentNode)
-            this.parentNode._updateDescendantUserPropertyCount(name, delta);
-    },
-
-    setUserProperty: function(name, value)
-    {
-        if (value === null) {
-            this.removeUserProperty(name);
+            for (var node = this; node; node = node.parentNode)
+                this._domModel.dispatchEventToListeners(WebInspector.DOMModel.Events.MarkersChanged, node);

[dgozman, 2015/08/07 23:35:05]

This will make it O(n^2), since every event handler will traverse all child
nodes again. We can cache something or only issue this event for |this| and make
clients understand this implies changes on all parent nodes.

[pfeldman, 2015/08/10 21:35:17]

This will only be n^2 for the nodes that have markers set. We can improve this
when/if we have a lot of markers.

             return;
         }
 
-        if (this.parentNode && !this._userProperties.hasOwnProperty(name))
-            this.parentNode._updateDescendantUserPropertyCount(name, 1);
-
-        this._userProperties[name] = value;
-    },
-
-    removeUserProperty: function(name)
-    {
-        if (!this._userProperties.hasOwnProperty(name))
-            return;
-
-        delete this._userProperties[name];
-        if (this.parentNode)
-            this.parentNode._updateDescendantUserPropertyCount(name, -1);
+        if (this.parentNode && !this._markers.hasOwnProperty(name)) {
+            for (var node = this; node; node = node.parentNode)
+                ++node._subtreeMarkerCount;
+        }
+        this._markers[name] = value;
+        for (var node = this; node; node = node.parentNode)
+            this._domModel.dispatchEventToListeners(WebInspector.DOMModel.Events.MarkersChanged, node);
     },
 
     /**
@@ -842,18 +819,39 @@ WebInspector.DOMNode.prototype = {
      * @return {?T}
      * @template T
      */
-    getUserProperty: function(name)
+    marker: function(name)
     {
-        return (this._userProperties && this._userProperties[name]) || null;
+        return (this._markers && this._markers[name]) || null;

[dgozman, 2015/08/07 23:35:05]

|this._markers| is always an object.

[pfeldman, 2015/08/10 21:35:17]

Done.

     },
 
     /**
-     * @param {string} name
-     * @return {number}
+     * @return {!Array<string>}
      */
-    descendantUserPropertyCount: function(name)
+    markers: function()

[dgozman, 2015/08/07 23:35:05]

Is this one used?

[pfeldman, 2015/08/10 21:35:17]

It is.

     {
-        return this._descendantUserPropertyCounters && this._descendantUserPropertyCounters[name] ? this._descendantUserPropertyCounters[name] : 0;
+        return Object.values(this._markers);
+    },
+
+    /**
+     * @param {function(!WebInspector.DOMNode, string)} visitor
+     */
+    traverseMarkers: function(visitor)
+    {
+        /**
+         * @param {!WebInspector.DOMNode} node
+         */
+        function traverse(node)
+        {
+            if (!node._subtreeMarkerCount)
+                return;
+            for (var marker in node._markers)
+                visitor(node, marker);
+            if (!node._children)
+                return;
+            for (var child of node._children)
+                traverse(child);
+        }
+        traverse(this);
     },
 
     /**
@@ -1086,7 +1084,8 @@ WebInspector.DOMModel.Events = {
     UndoRedoCompleted: "UndoRedoCompleted",
     DistributedNodesChanged: "DistributedNodesChanged",
     ModelSuspended: "ModelSuspended",
-    InspectModeWillBeToggled: "InspectModeWillBeToggled"
+    InspectModeWillBeToggled: "InspectModeWillBeToggled",
+    MarkersChanged: "MarkersChanged"
 }