Devtools[LayoutEditor]: Pass data about property change from InspectorOverlayPage

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 f075a7f2e7f45f68f3b405c76fbf80811fc0109d..9f790a7414214ae89a4ed134a8de9a9738b22a85 100644
--- a/Source/core/inspector/InspectorOverlayPage.html
+++ b/Source/core/inspector/InspectorOverlayPage.html
@@ -657,9 +657,53 @@ function createAnchor(anchorInfo)
     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));
     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);

[dgozman, 2015/06/25 12:30:59]

This will break with zero delta vector.

[sergeyv, 2015/06/25 12:54:30]

It can't be zero

+}
+
+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);
+}
+
+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;
+    document.removeEventListener("mouseup", onDragEnd);
+    event.preventDefault();
+    InspectorOverlayHost.endPropertyChange();
+}
+
+function Point(x, y)
+{
+    this.x = x;
+    this.y = y;
+}
+
 window.addEventListener("DOMContentLoaded", onLoaded);
 document.addEventListener("keydown", onDocumentKeyDown);