DevTools: render DOM markers with their colors

Source/devtools/front_end/elements/ElementsPanel.js

Index: Source/devtools/front_end/elements/ElementsPanel.js
diff --git a/Source/devtools/front_end/elements/ElementsPanel.js b/Source/devtools/front_end/elements/ElementsPanel.js
index 112fd5f91c1f00f7164ef58ca3c94c4371c9b3cc..61bc2af103397def03877c52926d3ef7b217cf3b 100644
--- a/Source/devtools/front_end/elements/ElementsPanel.js
+++ b/Source/devtools/front_end/elements/ElementsPanel.js
@@ -1232,11 +1232,11 @@ 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(", :")) };
     }
 }
 
@@ -1252,10 +1252,10 @@ 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") };
     }
 }