DevTools: render DOM markers with their colors

Source/devtools/front_end/elements/ElementsTreeElement.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 1109 matching lines @@
             (n === node ? decorations : descendantDecorations).push(decoration);
         }
 
         Promise.all(promises).then(setTitle.bind(this));
 
         /**
          * @this {WebInspector.ElementsTreeElement}
          */
         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;
+                }
+            }
         }
     },
 
     /**
      * @param {!Node} parentElement
      * @param {string} name
      * @param {string} value
      * @param {?WebInspector.ElementsTreeOutline.UpdateRecord} updateRecord
      * @param {boolean=} forceValue
      * @param {!WebInspector.DOMNode=} node
@@ skipping 395 matching lines @@
 
             if (object)
                 object.callFunction(scrollIntoView);
         }
 
         this._node.resolveToObject("", scrollIntoViewCallback);
     },
 
     __proto__: TreeElement.prototype
 }