DevTools: render DOM markers with their colors

Source/devtools/front_end/elements/ElementsPanel.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 1214 matching lines @@
  * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
  */
 WebInspector.ElementsPanel.PseudoStateMarkerDecorator = function()
 {
 }
 
 WebInspector.ElementsPanel.PseudoStateMarkerDecorator.prototype = {
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
-     * @return {?string}
+     * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
-        return WebInspector.UIString("Element state: %s", ":" + WebInspector.CSSStyleModel.fromNode(node).pseudoState(node).join(", :"));
+        return { color: "orange", title: WebInspector.UIString("Element state: %s", ":" + WebInspector.CSSStyleModel.fromNode(node).pseudoState(node).join(", :")) };
     }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.DOMPresentationUtils.MarkerDecorator}
  */
 WebInspector.ElementsPanel.HiddenMarkerDecorator = function()
 {
 }
 
 WebInspector.ElementsPanel.HiddenMarkerDecorator.prototype = {
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
-     * @return {?string}
+     * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
-        return WebInspector.UIString("Element is hidden");
+        return { color: "#555", title: WebInspector.UIString("Element is hidden") };
     }
 }