Devtools[LayoutEditor]: show resizer cursor over anchors

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 52fc463cf6e9023fce988a3f5b48beda9333133f..f822541446d5883f9fd892bbd140b34c69d00c01 100644
--- a/Source/core/inspector/InspectorOverlayPage.html
+++ b/Source/core/inspector/InspectorOverlayPage.html
@@ -837,7 +837,7 @@ function createAnchor(anchorInfo)
 
 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)
@@ -865,6 +865,17 @@ function onDragMove(mouseDownPoint, deltaVector, event)
     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");
@@ -899,19 +910,11 @@ function showLabels(type, fullLabelName)
             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)
@@ -1028,16 +1031,42 @@ function onGlobalMouseMove(event)
     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);