DevTools: [Elements] Highlight DOM updates

LayoutTests/http/tests/inspector/elements-test.js

 function getInspectorHighlightJSON(nodeId, opt_frameId)
 {
     var doc = document;
     if (opt_frameId)
         doc = document.getElementById(opt_frameId).contentDocument;
     return window.internals.inspectorHighlightJSON(doc.getElementById(nodeId));
 }
 
 var initialize_ElementTest = function() {
 
@@ skipping 489 matching lines @@
             else
                 print(children[i], prefix, depth);
         }
     }
 
     var treeOutline = InspectorTest.firstElementsTreeOutline();
     treeOutline._updateModifiedNodes();
     print(rootNode ? treeOutline.findTreeElement(rootNode) : treeOutline, "", depth || 10000);
 };
 
+InspectorTest.dumpDOMUpdateHighlights = function(rootNode, depth)
+{
+    var treeOutline = InspectorTest.firstElementsTreeOutline();
+    treeOutline._updateModifiedNodes();
+    print(rootNode ? treeOutline.findTreeElement(rootNode) : treeOutline, "", depth || 10000);
+
+    function print(treeItem, prefix, depth)
+    {
+        if (treeItem.listItemElement) {
+            var elementXPath = WebInspector.DOMPresentationUtils.xPath(treeItem._node, true);
+            var highlightedElements = treeItem.listItemElement.querySelectorAll(".dom-update-highlight");
+            for (var i = 0; i < highlightedElements.length; ++i) {
+                var element = highlightedElements[i];
+                var classList = element.classList;
+                var xpath = elementXPath;
+                if (classList.contains("webkit-html-attribute-name")) {
+                    xpath += "/@" + element.textContent + " (empty)";
+                } else if (classList.contains("webkit-html-attribute-value")) {
+                    name = element.parentElement.querySelector(".webkit-html-attribute-name").textContent;
+                    xpath += "/@" + name + " " + element.textContent;
+                } else if (classList.contains("webkit-html-text-node")) {
+                    xpath += "/text() \"" + element.textContent + "\"";
+                }
+                InspectorTest.addResult(prefix + xpath);
+            }
+        }
+
+        if (!treeItem.expanded)
+            return;
+
+        var children = treeItem.children;
+        var newPrefix = treeItem === treeItem.treeOutline ? "" : prefix + "    ";
+        for (var i = 0; depth && children && i < children.length; ++i) {
+            if (!children[i]._elementCloseTag)
+                print(children[i], newPrefix, depth - 1);
+        }
+    }
+}
+
 InspectorTest.expandElementsTree = function(callback)
 {
     var expandedSomething = false;
     callback = InspectorTest.safeWrap(callback);
 
     function expand(treeItem)
     {
         var children = treeItem.children;
         for (var i = 0; children && i < children.length; ++i) {
             var child = children[i];
@@ skipping 268 matching lines @@
     function innerCallback(result)
     {
         InspectorTest.addResult(nodeId + ": " + result.description);
         callback();
     }
     opt_frameId = opt_frameId || "";
     InspectorTest.evaluateInPage("getInspectorHighlightJSON(\"" + nodeId + "\", \"" + opt_frameId + "\")", innerCallback);
 }
 
 };