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

Source/devtools/front_end/sdk/CSSStyleModel.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 31 matching lines @@
     this._styleLoader = new WebInspector.CSSStyleModel.ComputedStyleLoader(this);
     target.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.MainFrameNavigated, this._mainFrameNavigated, this);
     target.registerCSSDispatcher(new WebInspector.CSSDispatcher(this));
     this._agent.enable().then(this._wasEnabled.bind(this));
     /** @type {!Map.<string, !WebInspector.CSSStyleSheetHeader>} */
     this._styleSheetIdToHeader = new Map();
     /** @type {!Map.<string, !Object.<!PageAgent.FrameId, !Array.<!CSSAgent.StyleSheetId>>>} */
     this._styleSheetIdsForURL = new Map();
 }
 
-WebInspector.CSSStyleModel.PseudoStatePropertyName = "pseudoState";
-
 /**
  * @param {!WebInspector.CSSStyleModel} cssModel
  * @param {!Array.<!CSSAgent.RuleMatch>|undefined} matchArray
  * @return {!Array.<!WebInspector.CSSRule>}
  */
 WebInspector.CSSStyleModel.parseRuleMatchArrayPayload = function(cssModel, matchArray)
 {
     if (!matchArray)
         return [];
 
     var result = [];
     for (var i = 0; i < matchArray.length; ++i)
         result.push(WebInspector.CSSRule.parsePayload(cssModel, matchArray[i].rule, matchArray[i].matchingSelectors));
     return result;
 }
 
 WebInspector.CSSStyleModel.Events = {
     MediaQueryResultChanged: "MediaQueryResultChanged",
     ModelWasEnabled: "ModelWasEnabled",
     PseudoStateForced: "PseudoStateForced",
     StyleSheetAdded: "StyleSheetAdded",
     StyleSheetChanged: "StyleSheetChanged",
     StyleSheetRemoved: "StyleSheetRemoved"
 }
 
 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>>}
      */
     mediaQueriesPromise: function()
     {
         /**
          * @param {?Protocol.Error} error
          * @param {?Array.<!CSSAgent.CSSMedia>} payload
          * @return {!Array.<!WebInspector.CSSMedia>}
@@ skipping 152 matching lines @@
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      * @param {string} pseudoClass
      * @param {boolean} enable
      * @return {boolean}
      */
     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);
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.PseudoStateForced, { node: node, pseudoClass: pseudoClass, enable: enable });
         return true;
     },
 
     /**
+     * @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
      * @param {function(?WebInspector.CSSRule)} userCallback
      */
     setRuleSelector: function(rule, nodeId, newSelector, userCallback)
     {
         /**
          * @param {?Protocol.Error} error
          * @param {?CSSAgent.CSSRule} rulePayload
@@ skipping 1672 matching lines @@
  * @constructor
  * @param {?WebInspector.CSSStyleDeclaration} inlineStyle
  * @param {?WebInspector.CSSStyleDeclaration} attributesStyle
  */
 WebInspector.CSSStyleModel.InlineStyleResult = function(inlineStyle, attributesStyle)
 {
     this.inlineStyle = inlineStyle;
     this.attributesStyle = attributesStyle;
 }