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

Source/WebCore/inspector/InspectorOverlayPage.html

 <!--
  Copyright (C) 2012 Google Inc. All rights reserved.
 
  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
      notice, this list of conditions and the following disclaimer.
  2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 65 matching lines @@
 .px {
     color: rgb(128, 128, 128);
 }
 
 #element-title {
     position: absolute;
     z-index: 10;
 }
 
 #tag-name {
+    /* Keep this in sync with view-source.css (.webkit-html-tag-name) */
     color: rgb(136, 18, 128);
 }
 
 #node-id {
+    /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
     color: rgb(26, 26, 166);
 }
 
+#class-name {
+    /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
+    color: rgb(153, 69, 0);
+}
+
 #right-gutter {
     display: none;
     right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     background-color: darkgray;
 }
 
 #bottom-gutter {
@@ skipping 225 matching lines @@
     document.body.classList.remove("dimmed");
 }
 
 function _drawElementTitle(highlight)
 {
     var elementInfo = highlight.elementInfo;
     if (!highlight.elementInfo)
         return;
 
     document.getElementById("tag-name").textContent = elementInfo.tagName;
-    document.getElementById("node-id").textContent = elementInfo.nodeId ? "#" + elementInfo.nodeId : "";
-    document.getElementById("class-name").textContent = elementInfo.className || "";
+    document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
+    var className = elementInfo.className;
+    if (className.length > 50)
+       className = className.substring(0, 50) + "\u2026";
+    document.getElementById("class-name").textContent = className;
     document.getElementById("node-width").textContent = elementInfo.nodeWidth;
     document.getElementById("node-height").textContent = elementInfo.nodeHeight;
     var elementTitle = document.getElementById("element-title");
 
     var marginQuad = highlight.quads[0];
 
     var titleWidth = elementTitle.offsetWidth + 6;
     var titleHeight = elementTitle.offsetHeight + 4;
 
     var anchorTop = marginQuad[0].y;
@@ skipping 213 matching lines @@
 </body>
 <canvas id="canvas" class="fill"></canvas>
 <div id="element-title">
   <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></span>
   <span id="node-width"></span><span class="px">px</span><span class="px"> &#xD7; </span><span id="node-height"></span><span class="px">px</span>
 </div>
 <div id="right-gutter"></div>
 <div id="bottom-gutter"></div>
 <div id="log"></div>
 </html>