DevTools: render DOM markers with their colors

Source/devtools/front_end/elements/ElementsTreeElement.js

Index: Source/devtools/front_end/elements/ElementsTreeElement.js
diff --git a/Source/devtools/front_end/elements/ElementsTreeElement.js b/Source/devtools/front_end/elements/ElementsTreeElement.js
index edfc44cb1ef4a7a12a21083d283a1be1a2028c6f..f6701cea1732daf5fe09073333041377bfb91839 100644
--- a/Source/devtools/front_end/elements/ElementsTreeElement.js
+++ b/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();
+            var colors = new Set();
+            var titles = [];
+
+            if (!decorations.length && !descendantDecorations.length)

[dgozman, 2015/08/18 18:35:20]

nit: can move this above colors and titles.

[pfeldman, 2015/08/18 18:40:05]

Done.

+                return;
+
+            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) {

[dgozman, 2015/08/18 18:35:20]

Should we limit the number of colors rendered to prevent overflow?

[pfeldman, 2015/08/18 18:40:05]

it is 3 currently :) lets see when it overflows?

+                    var child = this._decorationsElement.createChild("div", className);
+                    child.style.backgroundColor = color;
+                    child.style.borderColor = color;
+                    if (offset)
+                        child.style.marginLeft = offset + "px";

[dgozman, 2015/08/18 18:35:20]

Why not put them into a container which handles offset automatically?

[pfeldman, 2015/08/18 18:40:05]

It is extensible, so I don't really know how many containers I would need.

+                    offset += 3;
+                }
+            }
         }
     },