DevTools: render DOM markers with their colors

BUG=521200

Review URL: https://codereview.chromium.org/1300743002

git-svn-id: svn://svn.chromium.org/blink/trunk@200757 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/components/DOMBreakpointsSidebarPane.js

@@ -501,11 +501,11 @@ WebInspector.DOMBreakpointsSidebarPane.MarkerDecorator.prototype = {
     /**
      * @override
      * @param {!WebInspector.DOMNode} node
-     * @return {?string}
+     * @return {?{title: string, color: string}}
      */
     decorate: function(node)
     {
-        return WebInspector.UIString("DOM Breakpoint");
+        return { title: WebInspector.UIString("DOM Breakpoint"), color: "rgb(105, 140, 254)" };
     }
 }
 

third_party/WebKit/Source/devtools/front_end/components/DOMPresentationUtils.js

@@ -620,7 +620,7 @@ WebInspector.DOMPresentationUtils.MarkerDecorator = function()
 WebInspector.DOMPresentationUtils.MarkerDecorator.prototype = {
     /**
      * @param {!WebInspector.DOMNode} node
-     * @return {?string}
+     * @return {?{title: string, color: string}}
      */
     decorate: function(node) { }
 }

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

@@ -1230,11 +1230,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(", :")) };
     }
 }
 
@@ -1250,10 +1250,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") };
     }
 }

third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js

@@ -1127,12 +1127,51 @@ WebInspector.ElementsTreeElement.prototype = {
          */
         function setTitle()
         {
-            this._decorationsElement.classList.toggle("elements-gutter-decoration", decorations.length || (descendantDecorations.length && !this.expanded));
-            this._decorationsElement.classList.toggle("elements-has-decorated-children", descendantDecorations.length && !this.expanded);
-            var title = decorations.join("\n");
-            if (descendantDecorations.length)
-                title += WebInspector.UIString("\nChildren:\n") + descendantDecorations.join("\n");
-            this._decorationsElement.title = title;
+            this._decorationsElement.removeChildren();
+            if (!decorations.length && !descendantDecorations.length)
+                return;
+
+            var colors = new Set();
+            var titles = [];
+
+            for (var decoration of decorations) {
+                titles.push(decoration.title);
+                colors.add(decoration.color);
+            }
+            if (this.expanded && !decorations.length)
+                return;
+
+            var descendantColors = new Set();
+            if (descendantDecorations.length) {
+                titles.push(WebInspector.UIString("Children:"));
+                for (var decoration of descendantDecorations) {
+                    titles.push(decoration.title);
+                    descendantColors.add(decoration.color);
+                }
+            }
+
+            var offset = 0;
+            processColors.call(this, colors, "elements-gutter-decoration");
+            if (!this.expanded)
+                processColors.call(this, descendantColors, "elements-gutter-decoration elements-has-decorated-children");
+            WebInspector.Tooltip.install(this._decorationsElement, titles.join("\n"));
+
+            /**
+             * @param {!Set<string>} colors
+             * @param {string} className
+             * @this {WebInspector.ElementsTreeElement}
+             */
+            function processColors(colors, className)
+            {
+                for (var color of colors) {
+                    var child = this._decorationsElement.createChild("div", className);
+                    child.style.backgroundColor = color;
+                    child.style.borderColor = color;
+                    if (offset)
+                        child.style.marginLeft = offset + "px";
+                    offset += 3;
+                }
+            }
         }
     },
 

third_party/WebKit/Source/devtools/front_end/ui/tooltip.css

@@ -17,6 +17,7 @@
     border: 1px solid hsla(0, 0%, 0%, 0.1);
     background-clip: padding-box;
     box-sizing: border-box;
+    white-space: pre;
 }
 
 .tooltip {