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

Source/devtools/front_end/sdk/CSSStyleModel.js

Index: Source/devtools/front_end/sdk/CSSStyleModel.js
diff --git a/Source/devtools/front_end/sdk/CSSStyleModel.js b/Source/devtools/front_end/sdk/CSSStyleModel.js
index 1f974d7f27dbd1281233e9e6a12e5ddc21a462dc..ae2c8f10b1c8b1291c3978f11368f093f10840c4 100644
--- a/Source/devtools/front_end/sdk/CSSStyleModel.js
+++ b/Source/devtools/front_end/sdk/CSSStyleModel.js
@@ -49,8 +49,6 @@ WebInspector.CSSStyleModel = function(target)
     this._styleSheetIdsForURL = new Map();
 }
 
-WebInspector.CSSStyleModel.PseudoStatePropertyName = "pseudoState";
-
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!Array.<!CSSAgent.RuleMatch>|undefined} matchArray
@@ -78,6 +76,8 @@ WebInspector.CSSStyleModel.Events = {
 
 WebInspector.CSSStyleModel.MediaTypes = ["all", "braille", "embossed", "handheld", "print", "projection", "screen", "speech", "tty", "tv"];
 
+WebInspector.CSSStyleModel.PseudoStateMarker = "pseudo-state-marker";
+
 WebInspector.CSSStyleModel.prototype = {
     /**
      * @return {!Promise.<!Array.<!WebInspector.CSSMedia>>}
@@ -250,18 +250,18 @@ WebInspector.CSSStyleModel.prototype = {
      */
     forcePseudoState: function(node, pseudoClass, enable)
     {
-        var pseudoClasses = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || [];
+        var pseudoClasses = node.marker(WebInspector.CSSStyleModel.PseudoStateMarker) || [];
         if (enable) {
             if (pseudoClasses.indexOf(pseudoClass) >= 0)
                 return false;
             pseudoClasses.push(pseudoClass);
-            node.setUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName, pseudoClasses);
+            node.setMarker(WebInspector.CSSStyleModel.PseudoStateMarker, pseudoClasses);
         } else {
             if (pseudoClasses.indexOf(pseudoClass) < 0)
                 return false;
             pseudoClasses.remove(pseudoClass);
             if (!pseudoClasses.length)
-                node.removeUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName);
+                node.setMarker(WebInspector.CSSStyleModel.PseudoStateMarker, null);
         }
 
         this._agent.forcePseudoState(node.id, pseudoClasses);
@@ -270,6 +270,15 @@ WebInspector.CSSStyleModel.prototype = {
     },
 
     /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {?Array<string>} state
+     */
+    pseudoState: function(node)
+    {
+        return node.marker(WebInspector.CSSStyleModel.PseudoStateMarker) || [];
+    },
+
+    /**
      * @param {!CSSAgent.CSSRule} rule
      * @param {!DOMAgent.NodeId} nodeId
      * @param {string} newSelector