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

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 44 matching lines @@
     this._shadowRootType = payload.shadowRootType;
     this._frameId = payload.frameId || null;
 
     this._shadowRoots = [];
 
     this._attributes = [];
     this._attributesMap = {};
     if (payload.attributes)
         this._setAttributesPayload(payload.attributes);
 
-    this._userProperties = {};
-    this._descendantUserPropertyCounters = {};
+    this._markers = {};
+    this._subtreeMarkerCount = 0;
 
     this._childNodeCount = payload.childNodeCount || 0;
     this._children = null;
 
     this.nextSibling = null;
     this.previousSibling = null;
     this.firstChild = null;
     this.lastChild = null;
     this.parentNode = null;
 
@@ skipping 565 matching lines @@
         } else {
             var shadowRootIndex = this._shadowRoots.indexOf(node);
             if (shadowRootIndex !== -1) {
                 this._shadowRoots.splice(shadowRootIndex, 1);
             } else {
                 console.assert(this._children.indexOf(node) !== -1);
                 this._children.splice(this._children.indexOf(node), 1);
             }
         }
         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();
     },
 
     /**
      * @param {!Array.<!DOMAgent.Node>} payloads
      */
     _setChildrenPayload: function(payloads)
     {
         // We set children in the constructor.
         if (this._contentDocument)
@@ skipping 114 matching lines @@
     },
 
     /**
      * @return {boolean}
      */
     isXMLNode: function()
     {
         return !!this.ownerDocument && !!this.ownerDocument.xmlVersion;
     },
 
-    _updateChildUserPropertyCountsOnRemoval: function(parentNode)
-    {
-        var result = {};
-        if (this._userProperties) {
-            for (var name in this._userProperties)
-                result[name] = (result[name] || 0) + 1;
-        }
-
-        if (this._descendantUserPropertyCounters) {
-            for (var name in this._descendantUserPropertyCounters) {
-                var counter = this._descendantUserPropertyCounters[name];
-                result[name] = (result[name] || 0) + counter;
-            }
-        }
-
-        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)
+    /**
+     * @param {string} name
+     * @param {?*} value
+     */
+    setMarker: function(name, value)
     {
         if (value === null) {
-            this.removeUserProperty(name);
+            if (!this._markers.hasOwnProperty(name))
+                return;
+
+            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 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);
     },
 
     /**
      * @param {string} name
      * @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);
+    },
+
+    /**
      * @param {string} url
      * @return {?string}
      */
     resolveURL: function(url)
     {
         if (!url)
             return url;
         for (var frameOwnerCandidate = this; frameOwnerCandidate; frameOwnerCandidate = frameOwnerCandidate.parentNode) {
             if (frameOwnerCandidate.baseURL)
                 return WebInspector.ParsedURL.completeURL(frameOwnerCandidate.baseURL, url);
@@ skipping 209 matching lines @@
     DOMMutated: "DOMMutated",
     NodeInserted: "NodeInserted",
     NodeInspected: "NodeInspected",
     NodeRemoved: "NodeRemoved",
     DocumentUpdated: "DocumentUpdated",
     ChildNodeCountUpdated: "ChildNodeCountUpdated",
     UndoRedoRequested: "UndoRedoRequested",
     UndoRedoCompleted: "UndoRedoCompleted",
     DistributedNodesChanged: "DistributedNodesChanged",
     ModelSuspended: "ModelSuspended",
-    InspectModeWillBeToggled: "InspectModeWillBeToggled"
+    InspectModeWillBeToggled: "InspectModeWillBeToggled",
+    MarkersChanged: "MarkersChanged"
 }
 
 
 /**
  * @param {!WebInspector.RemoteObject} object
  */
 WebInspector.DOMModel.highlightObjectAsDOMNode = function(object)
 {
     var domModel = WebInspector.DOMModel.fromTarget(object.target());
     if (domModel)
@@ skipping 1066 matching lines @@
 }
 
 /**
  * @param {!WebInspector.Target} target
  * @return {?WebInspector.DOMModel}
  */
 WebInspector.DOMModel.fromTarget = function(target)
 {
     return /** @type {?WebInspector.DOMModel} */ (target.model(WebInspector.DOMModel));
 }