Devtools UI: Update inspect element node description label UI

Source/core/inspector/InspectorOverlayPage.html

Index: Source/core/inspector/InspectorOverlayPage.html
diff --git a/Source/core/inspector/InspectorOverlayPage.html b/Source/core/inspector/InspectorOverlayPage.html
index 0e880340df2fff312baefc3aed4e58420cdc2b98..2e9a8f0c54621e605d0fe235cfe619d94069ca54 100644
--- a/Source/core/inspector/InspectorOverlayPage.html
+++ b/Source/core/inspector/InspectorOverlayPage.html
@@ -36,16 +36,28 @@ body {
 
 body.platform-mac {
     font-size: 11px;
-    font-family: Menlo, Monaco;
+    font-family: 'Lucida Grande', sans-serif;
 }
 
 body.platform-windows {
     font-size: 12px;
-    font-family: Consolas, Lucida Console;
+    font-family: 'Segoe UI', Tahoma, sans-serif;
 }
 
 body.platform-linux {
     font-size: 11px;
+    font-family: Ubuntu, Arial, sans-serif;
+}
+
+body.platform-mac .monospace {
+    font-family: Menlo, Monaco;
+}
+
+body.platform-windows .monospace {
+    font-family: Consolas, Lucida Console;
+}
+
+body.platform-linux .monospace {
     font-family: dejavu sans mono;
 }
 
@@ -61,6 +73,10 @@ body.platform-linux {
     background-color: rgba(0, 0, 0, 0.31);
 }
 
+.hidden {
+    display: none;
+}
+
 #canvas, #labels-canvas {
     pointer-events: none;
 }
@@ -122,28 +138,73 @@ body.platform-linux {
     -webkit-mask-size: 18px 10px;
 }
 
-.px {
-    color: rgb(128, 128, 128);
-}
-
-#element-title {
+#element-tooltip,
+#element-tooltip-arrow {
     position: absolute;
     z-index: 10;
+    -webkit-user-select: none;
+}
+
+#element-tooltip {
+    background-color: hsl(0, 0%, 25%);
+    font-size: 11px;
+    line-height: 14px;
+    padding: 5px 10px;
+    border-radius: 2px;
+    color: white;
+    display: flex;
+    align-content: stretch;
+    box-sizing: border-box;
+    max-width: calc(100% - 4px);
+    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+#element-tooltip-arrow {
+    border: solid;
+    border-color: hsl(0, 0%, 25%) transparent;
+    border-width: 0 5px 5px 5px;
+}
+
+#element-tooltip-arrow.tooltip-arrow-top {
+    border-width: 5px 5px 0 5px;
 }
 
 #tag-name {
-    /* Keep this in sync with view-source.css (.html-tag) */
-    color: rgb(136, 18, 128);
+    color: #E387FF;
 }
 
 #node-id {
-    /* Keep this in sync with view-source.css (.html-attribute-value) */
-    color: rgb(26, 26, 166);
+    margin-left: 4px;
+    color: #E0BDB1;
 }
 
 #class-name {
-    /* Keep this in sync with view-source.css (.html-attribute-name) */
-    color: rgb(153, 69, 0);
+    margin-left: 4px;
+    color: #52B4FF;
+}
+
+#element-description {
+    flex: 1 1;
+    word-wrap: break-word;
+}
+
+#dimensions {
+    border-left: 1px solid hsl(0, 0%, 35%);
+    padding-left: 10px;
+    margin-left: 10px;
+    float: right;
+    flex: 0 0 auto;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+#node-width {
+    margin-right: 2px;
+}
+
+#node-height {
+    margin-left: 2px;
 }
 
 .editor-anchor {
@@ -354,7 +415,8 @@ function reset(resetData)
 
     window._controlsVisible = false;
     document.querySelector(".controls-line").style.visibility = "hidden";
-    document.getElementById("element-title").style.visibility = "hidden";
+    document.getElementById("element-tooltip").style.visibility = "hidden";
+    document.getElementById("element-tooltip-arrow").style.visibility = "hidden";

[dgozman, 2015/07/24 13:57:10]

Migrate to "hidden" class?

[samli, 2015/07/27 01:19:20]

Done.

     var editor = document.getElementById("editor");
     editor.style.visibility = "hidden";
     editor.textContent = "";
@@ -364,75 +426,53 @@ function reset(resetData)
 
 function _drawElementTitle(elementInfo, bounds)
 {
+    // Reset position before measuring to ensure line-wraps are consistent.
+    var elementTitle = document.getElementById("element-tooltip");
+    elementTitle.style.top = "0px";

[dgozman, 2015/07/24 13:57:10]

We usually use "0" without "px".

[samli, 2015/07/27 01:19:20]

Done.

+    elementTitle.style.left = "0px";
+
     document.getElementById("tag-name").textContent = elementInfo.tagName;
     document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
+    document.getElementById("node-id").classList.toggle("hidden", !elementInfo.idValue);
     var className = elementInfo.className;
     if (className && className.length > 50)
        className = className.substring(0, 50) + "\u2026";
     document.getElementById("class-name").textContent = className || "";
+    document.getElementById("class-name").classList.toggle("hidden", !className);
     document.getElementById("node-width").textContent = elementInfo.nodeWidth;
     document.getElementById("node-height").textContent = elementInfo.nodeHeight;
-    var elementTitle = document.getElementById("element-title");
-
-    var titleWidth = elementTitle.offsetWidth + 6;
-    var titleHeight = elementTitle.offsetHeight + 4;
-
-    var anchorTop = bounds.minY;
-    var anchorBottom = bounds.maxY;
-    var anchorLeft = bounds.minX;
-
-    const arrowHeight = 7;
-    var renderArrowUp = false;
-    var renderArrowDown = false;
-
-    var boxX = Math.max(2, anchorLeft);
-    if (boxX + titleWidth > canvasWidth)
-        boxX = canvasWidth - titleWidth - 2;
-
-    var boxY;
-    if (anchorTop > canvasHeight) {
-        boxY = canvasHeight - titleHeight - arrowHeight;
-        renderArrowDown = true;
-    } else if (anchorBottom < 0) {
-        boxY = arrowHeight;
-        renderArrowUp = true;
-    } else if (anchorBottom + titleHeight + arrowHeight < canvasHeight) {
-        boxY = anchorBottom + arrowHeight - 4;
-        renderArrowUp = true;
-    } else if (anchorTop - titleHeight - arrowHeight > 0) {
-        boxY = anchorTop - titleHeight - arrowHeight + 3;
-        renderArrowDown = true;
-    } else
-        boxY = arrowHeight;
 
-    context.save();
-    context.translate(0.5, 0.5);
-    context.beginPath();
-    context.moveTo(boxX, boxY);
-    if (renderArrowUp) {
-        context.lineTo(boxX + 2 * arrowHeight, boxY);
-        context.lineTo(boxX + 3 * arrowHeight, boxY - arrowHeight);
-        context.lineTo(boxX + 4 * arrowHeight, boxY);
-    }
-    context.lineTo(boxX + titleWidth, boxY);
-    context.lineTo(boxX + titleWidth, boxY + titleHeight);
-    if (renderArrowDown) {
-        context.lineTo(boxX + 4 * arrowHeight, boxY + titleHeight);
-        context.lineTo(boxX + 3 * arrowHeight, boxY + titleHeight + arrowHeight);
-        context.lineTo(boxX + 2 * arrowHeight, boxY + titleHeight);
+    var titleWidth = elementTitle.offsetWidth;
+    var titleHeight = elementTitle.offsetHeight;
+    const arrowRadius = 5;
+    const pageMargin = 2;

[dgozman, 2015/07/24 13:57:10]

var

[samli, 2015/07/27 01:19:20]

Done.

+
+    var boxX = Math.max(pageMargin, bounds.minX + (bounds.maxX - bounds.minX) / 2 - titleWidth / 2);
+    boxX = Math.min(boxX, canvasWidth - titleWidth - pageMargin);
+
+    var boxY = bounds.minY - arrowRadius - titleHeight;
+    var arrowY = bounds.minY - arrowRadius;
+    var onTop = true;
+    if (boxY < 0) {
+        boxY = bounds.maxY + arrowRadius;
+        arrowY = bounds.maxY;
+        onTop = false;
+    } else if (bounds.minY > canvasHeight) {
+        boxY = canvasHeight - arrowRadius - titleHeight;
+        arrowY = canvasHeight - arrowRadius;
     }
-    context.lineTo(boxX, boxY + titleHeight);
-    context.closePath();
-    context.fillStyle = "rgb(255, 255, 194)";
-    context.fill();
-    context.strokeStyle = "rgb(128, 128, 128)";
-    context.stroke();
-
-    context.restore();
 
     elementTitle.style.visibility = "visible";
-    elementTitle.style.top = (boxY + 3) + "px";
-    elementTitle.style.left = (boxX + 3) + "px";
+    elementTitle.style.top = boxY + "px";
+    elementTitle.style.left = boxX + "px";
+
+    var tooltipArrow = document.getElementById("element-tooltip-arrow");
+    var arrowX = bounds.minX + (bounds.maxX - bounds.minX) / 2 - arrowRadius;
+
+    tooltipArrow.classList.toggle("tooltip-arrow-top", onTop);
+    tooltipArrow.style.visibility = "visible";
+    tooltipArrow.style.top = arrowY + "px";
+    tooltipArrow.style.left = arrowX + "px";
 }
 
 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
@@ -838,10 +878,11 @@ document.addEventListener("keydown", onDocumentKeyDown);
 </body>
 <canvas id="canvas" class="fill"></canvas>
 <canvas id="labels-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 id="element-tooltip">
+  <div id="element-description"><span id="tag-name"></span><span id="node-id"></span><span id="class-name"></span></div>
+  <div id="dimensions"><span id="node-width"></span>&#xD7;<span id="node-height"></span></div>
 </div>
+<div id="element-tooltip-arrow"></div>
 <div id="editor" class="fill"></div>
 <div id="log"></div>
 </html>