Changeset 185716 in webkit

Timestamp:

Jun 18, 2015, 12:21:22 PM (10 years ago)

Author:

Joseph Pecoraro

Message:

Web Inspector: Improve a few more node preview types
​https://bugs.webkit.org/show_bug.cgi?id=146048

Reviewed by Timothy Hatcher.

• UserInterface/Views/FormattedValue.js:

(WebInspector.FormattedValue.createElementForNodePreview):

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/FormattedValue.js (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2015-06-18  Joseph Pecoraro  <pecoraro@apple.com>
+
+        Web Inspector: Improve a few more node preview types
+        https://bugs.webkit.org/show_bug.cgi?id=146048
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/FormattedValue.js:
+        (WebInspector.FormattedValue.createElementForNodePreview):
+
 2015-06-18  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js

@@ -70 +70 @@
 WebInspector.FormattedValue.createElementForNodePreview = function(preview)
 {
+    var value = preview.value;
     var span = document.createElement("span");
     span.className = "formatted-node-preview syntax-highlighted";
 
-    // A node preview has a very strict format, with at most a single attribute.
+    // Comment node preview.
+    if (value.startsWith("<!--")) {
+        var comment = span.appendChild(document.createElement("span"));
+        comment.className = "html-comment";
+        comment.textContent = value;
+        return span;
+    }
+
+    // Doctype node preview.
+    if (value.startsWith("<!DOCTYPE")) {
+        var doctype = span.appendChild(document.createElement("span"));
+        doctype.className = "html-doctype";
+        doctype.textContent = value;
+        return span;
+    }
+
+    // Element node previews have a very strict format, with at most a single attribute.
     // We can style it up like a DOMNode without interactivity.
-    var matches = preview.value.match(/^<(\S+?)(?: (\S+?)="(.*?)")?>$/);
+    var matches = value.match(/^<(\S+?)(?: (\S+?)="(.*?)")?>$/);
+
+    // Remaining node types are often #text, #document, etc, with attribute nodes potentially being any string.
     if (!matches) {
-        console.error("Node preview did not match format.", preview.value)
-        span.textContent = preview.value;
+        console.assert(!value.startsWith("<"), "Unexpected node preview format: " + value);
+        span.textContent = value;
         return span;
     }