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

Source/devtools/front_end/elements/ElementStatePaneWidget.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.StylesSidebarPane.BaseToolbarPaneWidget}
  * @param {!WebInspector.ToolbarItem} toolbarItem
  */
 WebInspector.ElementStatePaneWidget = function(toolbarItem)
@@ skipping 83 matching lines @@
         this._updateTarget(newNode? newNode.target() : null);
         if (newNode)
             this._updateInputs(newNode);
     },
 
     /**
      * @param {!WebInspector.DOMNode} node
      */
     _updateInputs: function(node)
     {
-        var nodePseudoState = node.getUserProperty(WebInspector.CSSStyleModel.PseudoStatePropertyName) || [];
+        var nodePseudoState = this._target.cssModel.pseudoState(node);
         var inputs = this._inputs;
         for (var i = 0; i < inputs.length; ++i) {
             inputs[i].disabled = !!node.pseudoType();
             inputs[i].checked = nodePseudoState.indexOf(inputs[i].state) >= 0;
         }
     },
 
     __proto__: WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.prototype
 }
 
@@ skipping 27 matching lines @@
     },
 
     _nodeChanged: function()
     {
         var enabled = !!WebInspector.context.flavor(WebInspector.DOMNode);
         this._button.setEnabled(enabled);
         if (!enabled && this._button.toggled())
             WebInspector.ElementsPanel.instance().sidebarPanes.styles.showToolbarPane(null);
     }
 }