Devtools[LayoutEditor]: show resizer cursor over anchors

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 819 matching lines @@
     anchorElement.style.left = anchorInfo.x - handleWidth + "px";
     anchorElement.style.top = anchorInfo.y - handleWidth + "px";
     if (anchorInfo.propertyValue.mutable)
         anchorElement.addEventListener("mousedown", onAnchorMouseDown.bind(null, anchorInfo));
     anchorElement.addEventListener("mousemove", onAnchorMouseMove.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);
+    return scalarProduct(deltaVector, moveDelta) / Math.sqrt(scalarProduct(deltaVector, deltaVector));
 }
 
 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;
     showLabels(anchorInfo.type, anchorInfo.propertyName);
 }
 
 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 onDragEnd(event)
+{
+    document.removeEventListener("mousemove", boundDragMove);
+    delete window.boundDragMove;
+    delete window.draggedPropertyName;
+    document.removeEventListener("mouseup", onDragEnd);
+    event.preventDefault();
+    InspectorOverlayHost.endPropertyChange();
+    resetLabelCanvas();
+}
+
 function showLabel(anchorInfo, showLongDescription)
 {
     var context =  labelsCanvas.getContext("2d");
     var secondaryColor = "rgba(255, 255, 255, 0.7)";
     var labelColor = labelColorForProperty(anchorInfo);
     var textDescription = [
         {string: String(parseFloat(anchorInfo.propertyValue.value.toFixed(2))), color: "white" },
         {string: "\u2009" + anchorInfo.propertyValue.unit, color: secondaryColor}
     ];
 
@@ skipping 14 matching lines @@
     window.labelCanvasState = {type: type, fullLabelName: fullLabelName};
     var anchors = anchorsByType.get(type) || [];
     var selectedAnchorInfo = null;
     for (var anchorInfo of anchors) {
         if (fullLabelName !== anchorInfo.propertyName)
             showLabel(anchorInfo, false);
         else
             selectedAnchorInfo = anchorInfo;
     }
 
-    if (selectedAnchorInfo)
-        showLabel(selectedAnchorInfo, true);
-}
+    if (!selectedAnchorInfo)
+        return;
 
-function onDragEnd(event)
-{
-    document.removeEventListener("mousemove", boundDragMove);
-    delete window.boundDragMove;
-    delete window.draggedPropertyName;
-    document.removeEventListener("mouseup", onDragEnd);
-    event.preventDefault();
-    InspectorOverlayHost.endPropertyChange();
-    resetLabelCanvas();
+    showLabel(selectedAnchorInfo, true);
+    document.body.style.cursor = chooseAnchorPointer(selectedAnchorInfo.deltaVector);
 }
 
 function onAnchorMouseMove(anchorInfo)
 {
     if (window.draggedPropertyName)
         return;
     event.preventDefault();
     event.stopPropagation();
     showLabels(anchorInfo.type, anchorInfo.propertyName);
 }
@@ skipping 96 matching lines @@
 }
 
 function onGlobalMouseMove(event)
 {
     if (!window.hoverableAreas)
         return;
     var types = ["padding", "margin"];
     for (var type of types) {
         var path = hoverableAreas.get(type);
         if (path && context.isPointInPath(path, deviceScaleFactor * event.x, deviceScaleFactor * event.y)) {
+            event.preventDefault();
             showLabels(type);
-            break;
+            return;
         }
     }
+    resetLabelCanvas();
 }
 
 function resetLabelCanvas()
 {
     delete window.labelCanvasState;
     resetCanvas(labelsCanvas);
+    if (!window.draggedPropertyName && document.body.style.cursor)
+        document.body.style.cursor = "";
+}
+
+function scalarProduct(v1, v2)
+{
+    return v1.x * v2.x + v1.y * v2.y;
+}
+
+var pointers = [ {name: "ns-resize", vector: new Point(0, -1)}, {name: "ew-resize", vector: new Point(-1, 0)},
+    {name: "ns-resize", vector: new Point(0, 1)}, {name: "ew-resize", vector: new Point(1, 0)}];
+
+function chooseAnchorPointer(direction)
+{
+    var maxValue = scalarProduct(direction, pointers[0].vector);
+    var maxIndex = 0;
+    for (var i = 1; i < pointers.length; ++i) {
+        var currentValue = scalarProduct(direction, pointers[i].vector);
+        if (currentValue > maxValue) {
+            maxValue = currentValue;
+            maxIndex = i;
+        }
+    }
+    return pointers[maxIndex].name;
 }
 
 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="tooltip-container" class="hidden">
     <div id="element-tooltip">
       <div id="element-description" class="monospace"><span id="material-tag-name"></span><span id="material-node-id"></span><span id="material-class-name"></span></div>
       <div id="dimensions"><span id="material-node-width"></span>&#xD7;<span id="material-node-height"></span></div>
     </div>
     <div id="element-tooltip-arrow"></div>
 <div id="editor" class="fill"></div>
 <div id="log"></div>
 </html>