Merge 135720 - Web Inspector: object preview does not render node id, className; logs too many func…

Source/WebCore/inspector/front-end/ConsoleMessage.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * 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 300 matching lines @@
         for (var i = 0; i < preview.properties.length; ++i) {
             if (i > 0)
                 titleElement.createTextChild(", ");
 
             var property = preview.properties[i];
             if (!isArray || property.name != i) {
                 titleElement.createChild("span", "name").textContent = property.name;
                 titleElement.createTextChild(": ");
             }
 
-            var span = titleElement.createChild("span", "console-formatted-" + property.type);
-            if (property.type === "object") {
-                if (property.subtype === "node")
-                    span.addStyleClass("console-formatted-preview-node");
-                else if (property.subtype === "regexp")
-                    span.addStyleClass("console-formatted-string");
-                span.textContent = property.value;
-            } else if (property.type === "function")
-                span.textContent = "function";
-            else
-                span.textContent = property.value;
+            this._appendPropertyPreview(titleElement, property);
         }
         if (preview.overflow)
             titleElement.createChild("span").textContent = "\u2026";
         titleElement.createTextChild(isArray ? "]" : "}");
         return preview.lossless;
     },
 
+    /**
+     * @param {Element} titleElement
+     * @param {RuntimeAgent.PropertyPreview} property
+     */
+    _appendPropertyPreview: function(titleElement, property)
+    {
+        var span = titleElement.createChild("span", "console-formatted-" + property.type);
+
+        if (property.type === "function") {
+            span.textContent = "function";
+            return;
+        }
+
+        if (property.type === "object" && property.subtype === "regexp") {
+            span.addStyleClass("console-formatted-string");
+            span.textContent = property.value;
+            return;
+        }
+
+        if (property.type === "object" && property.subtype === "node") {
+            span.addStyleClass("console-formatted-preview-node");
+            var match = property.value.match(/([^#.]+)(#[^.]+)?(\..*)?/);
+            span.createChild("span", "webkit-html-tag-name").textContent = match[1];
+            if (match[2])
+                span.createChild("span", "webkit-html-attribute-value").textContent = match[2];
+            if (match[3])
+                span.createChild("span", "webkit-html-attribute-name").textContent = match[3];
+            return;
+        }
+
+        span.textContent = property.value;
+    },
+
     _formatParameterAsNode: function(object, elem)
     {
         function printNode(nodeId)
         {
             if (!nodeId) {
                 // Sometimes DOM is loaded after the sync message is being formatted, so we get no
                 // nodeId here. So we fall back to object formatting here.
                 this._formatParameterAsObject(object, elem, false);
                 return;
             }
@@ skipping 393 matching lines @@
     /**
      * @return {WebInspector.ConsoleMessage}
      */
     clone: function()
     {
         return WebInspector.ConsoleMessage.create(this.source, this.level, this._messageText, this.type, this.url, this.line, this.repeatCount, this._parameters, this._stackTrace, this._request ? this._request.requestId : undefined, this._isOutdated);
     },
 
     __proto__: WebInspector.ConsoleMessage.prototype
 }