Devtools [LayouEditor]: Show label with size info

Source/core/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 43 matching lines @@
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 }
 
 .dimmed {
     background-color: rgba(0, 0, 0, 0.31);
 }
 
-#canvas {
+#canvas, #labels-canvas {
     pointer-events: none;
 }
 
 .controls-line {
     display: flex;
     justify-content: center;
     margin: 10px 0;
 }
 
 .message-box {
@@ skipping 242 matching lines @@
     var textWidth = context.measureText(text).width;
     context.fillStyle = gridBackgroundColor;
     context.fillRect(frameWidth - textWidth - 12, drawGridBoolean ? 15 : 0, frameWidth, 25);
     context.fillStyle = darkGridColor;
     context.fillText(text, frameWidth - textWidth - 6, drawGridBoolean ? 33 : 18);
     context.restore();
     if (drawGridBoolean)
         _drawGrid();
 }
 
+function resetCanvas(canvasElement)
+{
+    canvasElement.width = deviceScaleFactor * viewportSize.width;
+    canvasElement.height = deviceScaleFactor * viewportSize.height;
+    canvasElement.style.width = viewportSize.width + "px";
+    canvasElement.style.height = viewportSize.height + "px";
+    var context = canvasElement.getContext("2d");
+    context.scale(deviceScaleFactor, deviceScaleFactor);
+}
+
 function reset(resetData)
 {
     window.viewportSize = resetData.viewportSize;
     window.deviceScaleFactor = resetData.deviceScaleFactor;
     window.pageZoomFactor = resetData.pageZoomFactor;
     window.scrollX = Math.round(resetData.scrollX);
     window.scrollY = Math.round(resetData.scrollY);
 
     window.canvas = document.getElementById("canvas");
     window.context = canvas.getContext("2d");
+    resetCanvas(canvas);
 
-    canvas.width = deviceScaleFactor * viewportSize.width;
-    canvas.height = deviceScaleFactor * viewportSize.height;
-    canvas.style.width = viewportSize.width + "px";
-    canvas.style.height = viewportSize.height + "px";
-    context.scale(deviceScaleFactor, deviceScaleFactor);
+    window.labelsCanvas = document.getElementById("labels-canvas");
+    resetCanvas(labelsCanvas);
+
     window.canvasWidth = viewportSize.width;
     window.canvasHeight = viewportSize.height;
 
     window._controlsVisible = false;
     document.querySelector(".controls-line").style.visibility = "hidden";
     document.getElementById("element-title").style.visibility = "hidden";
     var editor = document.getElementById("editor");
     editor.style.visibility = "hidden";
     editor.textContent = "";
     document.body.classList.remove("dimmed");
@@ skipping 213 matching lines @@
     if (highlight.showRulers)
         _drawGrid(rulerAtRight, rulerAtBottom);
 
     if (highlight.paths.length) {
         if (highlight.showExtensionLines)
             _drawRulers(bounds, rulerAtRight, rulerAtBottom);
 
         if (highlight.elementInfo)
            _drawElementTitle(highlight.elementInfo, bounds);
     }
-
-    if (highlight.layoutEditorInfo)
-        showLayoutEditor(highlight.layoutEditorInfo);
-
     context.restore();
 }
 
 function setPlatform(platform)
 {
     window.platform = platform;
     document.body.classList.add("platform-" + platform);
 }
 
 function dispatch(message)
@@ skipping 38 matching lines @@
         InspectorOverlayHost.resume();
     else if (event.keyIdentifier == "F10" || eventHasCtrlOrMeta(event) && event.keyCode == 222 /* single quote */)
         InspectorOverlayHost.stepOver();
 }
 
 function showLayoutEditor(info)
 {
     var editorElement = document.getElementById("editor");
     editorElement.style.visibility = "visible";
     var anchors = info.anchors;
-    for (var i = 0; i < anchors.length; ++i)
-        editorElement.appendChild(createAnchor(anchors[i]));
+    for (var i = 0; i < anchors.length; ++i) {
+        var anchorInfo = anchors[i];
+        editorElement.appendChild(createAnchor(anchorInfo));
+        if (anchorInfo.propertyName === window.draggedPropertyName)
+            showLabel(anchorInfo);
+    }
 }
 
 function createAnchor(anchorInfo)
 {
     var handleWidth = 5;
     context.save();
-    context.shadowColor = "black";
+    context.shadowColor = "rgba(0, 0, 0, 0.34)";
     context.shadowBlur = 2;
-    context.strokeStyle = "rgb(0, 0, 128)";
-    context.fillStyle = "rgb(0, 0, 128)";
+    context.fillStyle = anchorColorForProperty(anchorInfo.propertyName);
     context.beginPath();
     context.arc(anchorInfo.x, anchorInfo.y, handleWidth, 0, 2 * Math.PI);
     context.fill();
-    context.stroke();
     context.restore();
 
     var anchorElement = document.createElement("div");
     anchorElement.className = "editor-anchor";
     anchorElement.style.left = anchorInfo.x - handleWidth + "px";
     anchorElement.style.top = anchorInfo.y - handleWidth + "px";
     anchorElement.addEventListener("mousedown", onAnchorMouseDown.bind(null, anchorInfo));
+    anchorElement.addEventListener("mouseenter", onAnchorMouseEnter.bind(null, anchorInfo));
+    anchorElement.addEventListener("mouseleave", onAnchorMouseLeave.bind(null, anchorInfo));
     return anchorElement;
 }
 
 function calculateDelta(deltaVector, moveDelta)
 {
     return (deltaVector.x * moveDelta.x + deltaVector.y * moveDelta.y) / Math.sqrt(deltaVector.x * deltaVector.x + deltaVector.y * deltaVector.y);
 }
 
 function onAnchorMouseDown(anchorInfo, event)
 {
     // Only drag upon left button. Right will likely cause a context menu. So will ctrl-click on mac.
     if (event.button || (window.platform == "mac" && event.ctrlKey))
         return;
 
     event.preventDefault();
     window.boundDragMove = onDragMove.bind(null, new Point(event.screenX, event.screenY), anchorInfo.deltaVector);
     document.addEventListener("mousemove", boundDragMove);
     document.addEventListener("mouseup", onDragEnd);
     InspectorOverlayHost.startPropertyChange(anchorInfo.propertyName);
+    window.draggedPropertyName = anchorInfo.propertyName;
+    resetCanvas(labelsCanvas);
+    showLabel(anchorInfo);
 }
 
 function onDragMove(mouseDownPoint, deltaVector, event)
 {
     if (event.buttons !== 1) {
         onDragEnd(event);
         return;
     }
     event.preventDefault();
     InspectorOverlayHost.changeProperty(calculateDelta(deltaVector, new Point(event.screenX - mouseDownPoint.x, event.screenY - mouseDownPoint.y)));
 }
 
+function showLabel(anchorInfo)
+{
+    var context =  labelsCanvas.getContext("2d");
+    var secondaryColor = "rgba(255, 255, 255, 0.7)";
+    var labelColor = labelColorForProperty(anchorInfo.propertyName);
+    _drawLabel(context, anchorInfo.x, anchorInfo.y, labelColor, [
+        {string: anchorInfo.propertyName + ": ", color: secondaryColor},
+        {string: anchorInfo.propertyValue.value, color: "white"},
+        {string: "\u2009" + anchorInfo.propertyValue.unit, color: secondaryColor}
+    ], anchorInfo.deltaVector.x < 0);
+}
+
 function onDragEnd(event)
 {
     document.removeEventListener("mousemove", boundDragMove);
     delete window.boundDragMove;
+    delete window.draggedPropertyName;
     document.removeEventListener("mouseup", onDragEnd);
     event.preventDefault();
     InspectorOverlayHost.endPropertyChange();
+    resetCanvas(labelsCanvas);
+}
+
+function onAnchorMouseEnter(anchorInfo)
+{
+    if (window.draggedPropertyName)
+        return;
+
+    resetCanvas(labelsCanvas);
+    showLabel(anchorInfo);
+}
+
+function onAnchorMouseLeave()
+{
+    if (window.draggedPropertyName)
+        return;
+
+    resetCanvas(labelsCanvas);
 }
 
 function Point(x, y)
 {
     this.x = x;
     this.y = y;
 }
 
+function _drawLabel(context, anchorX, anchorY, labelColor, textDescription, toLeft)
+{
+    var paddingX = 6;
+    var paddingY = 4;
+    var borderRadius = 2;
+    var arrowWidth = 6;
+    var offsetX = 6;
+    var fontSize = 10;
+
+    var wholeString = "";
+    for (var part of textDescription)
+        wholeString += part.string;
+
+    context.save();
+    context.font = fontSize + "px Arial, Roboto";
+    
+    var textWidth = context.measureText(wholeString).width;
+    var fullWidth = textWidth + offsetX + arrowWidth + paddingX;
+    var height = fontSize + paddingY;
+    var fitRight = anchorX + fullWidth < viewportSize.width;
+    var fitLeft = anchorX - fullWidth > 0;
+    var mirror = !fitLeft || (!toLeft && fitRight);
+
+    var arrowX = -offsetX;
+    var arrowY = 0;
+    var right = arrowX - arrowWidth;
+    var top = arrowY - height / 2;
+    var bottom = arrowY + height / 2;
+    var left = -fullWidth;
+
+    context.save();
+    context.translate(anchorX, anchorY);
+    if (mirror)
+      context.scale(-1, 1);
+
+    context.fillStyle = labelColor;
+    context.shadowColor = "rgba(0, 0, 0, 0.34)";
+    context.shadowOffsetY = 1;
+    context.shadowBlur = 1;  
+    context.beginPath();
+    context.moveTo(arrowX, arrowY);
+    context.lineTo(right, bottom);
+    context.lineTo(left + borderRadius, bottom);
+    context.quadraticCurveTo(left, bottom, left, bottom - borderRadius);
+    context.lineTo(left, top + borderRadius);
+    context.quadraticCurveTo(left, top, left + borderRadius, top);
+    context.lineTo(right, top);
+    context.lineTo(arrowX, arrowY);
+    context.closePath();
+    context.fill();
+    context.restore();
+
+    var textX = 0;
+    if (mirror) 
+        textX = anchorX - right + paddingX / 2;
+    else
+        textX = anchorX + left + paddingX / 2;
+    
+    var textY = anchorY + top + fontSize;
+    for (var part of textDescription) {
+        context.fillStyle = part.color;
+        context.fillText(part.string, textX, textY);
+        textX += context.measureText(part.string).width;
+    }
+    context.restore();      
+}
+
+function labelColorForProperty(propertyName)
+{
+    return "rgb(91, 181, 0)";
+}
+
+function anchorColorForProperty(propertyName)
+{
+    return "rgb(107, 213, 0)";
+}
+
 window.addEventListener("DOMContentLoaded", onLoaded);
 document.addEventListener("keydown", onDocumentKeyDown);
 
 </script>
 </head>
 <body class="fill">
 <div class="controls-line">
     <div class="message-box"><div id="paused-in-debugger"></div></div>
     <div class="button" id="resume-button" title="Resume script execution (F8)."><div class="glyph"></div></div>
     <div class="button" id="step-over-button" title="Step over next function call (F10)."><div class="glyph"></div></div>
 </div>
 </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>
 <div id="editor" class="fill"></div>
 <div id="log"></div>
 </html>