From a01fd7ecc5a1679e2fe9a223dd8688842967d912 Mon Sep 17 00:00:00 2001
From: Andreas Kling <kling@serenityos.org>
Date: Sat, 23 May 2020 21:05:26 +0200
Subject: [PATCH] LibWeb: Colorize tag names in layout tree dumps + show
 element IDs

Showing element IDs in layout tree dumps makes it much easier to
compare against the DOM.
---
 Libraries/LibWeb/Dump.cpp | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/Libraries/LibWeb/Dump.cpp b/Libraries/LibWeb/Dump.cpp
index 8ed28fc362..42cd88fb33 100644
--- a/Libraries/LibWeb/Dump.cpp
+++ b/Libraries/LibWeb/Dump.cpp
@@ -24,6 +24,7 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+#include <AK/StringBuilder.h>
 #include <AK/Utf8View.h>
 #include <LibWeb/CSS/PropertyID.h>
 #include <LibWeb/CSS/StyleSheet.h>
@@ -90,13 +91,25 @@ void dump_tree(const LayoutNode& layout_node)
     else
         tag_name = "???";
 
+    String identifier = "";
+    if (layout_node.node() && is<Element>(*layout_node.node())) {
+        auto id = to<Element>(*layout_node.node()).attribute("id");
+        if (!id.is_empty()) {
+            StringBuilder builder;
+            builder.append('#');
+            builder.append(id);
+            identifier = builder.to_string();
+        }
+    }
+
     if (!layout_node.is_box()) {
-        dbgprintf("%s {%s}\n", layout_node.class_name(), tag_name.characters());
+        dbgprintf("%s {\033[33m%s\033[0m%s}\n", layout_node.class_name(), tag_name.characters(), identifier.characters());
     } else {
         auto& layout_box = to<LayoutBox>(layout_node);
-        dbgprintf("%s {%s} at (%g,%g) size %gx%g",
+        dbgprintf("%s {\033[34m%s\033[0m%s} at (%g,%g) size %gx%g",
             layout_box.class_name(),
             tag_name.characters(),
+            identifier.characters(),
             layout_box.x(),
             layout_box.y(),
             layout_box.width(),