Devtools: Margin resizer in overlay experiment

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 36697b06934c80165ed4c47792f2377e61d46173..7f6cdede4ec8031392bd4a20c1064288cadb507d 100644
--- a/Source/core/inspector/InspectorOverlayPage.html
+++ b/Source/core/inspector/InspectorOverlayPage.html
@@ -127,6 +127,7 @@ body.platform-linux {
 }
 
 #element-title {
+    background-color: #ffff00;
     position: absolute;
     z-index: 10;
 }
@@ -146,6 +147,14 @@ body.platform-linux {
     color: rgb(153, 69, 0);
 }
 
+#margin-resizer {
+    background-color: red;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    z-index: 20;
+}
+
 </style>
 <script>
 const lightGridColor = "rgba(0,0,0,0.2)";
@@ -340,6 +349,7 @@ function reset(resetData)
     window._controlsVisible = false;
     document.querySelector(".controls-line").style.visibility = "hidden";
     document.getElementById("element-title").style.visibility = "hidden";
+    document.getElementById("margin-resizer").style.visibility = "hidden";
     document.body.classList.remove("dimmed");
     window._gridPainted = false;
 }
@@ -415,8 +425,19 @@ function _drawElementTitle(elementInfo, bounds)
     elementTitle.style.visibility = "visible";
     elementTitle.style.top = (boxY + 3) + "px";
     elementTitle.style.left = (boxX + 3) + "px";
+    _drawMarginResizer(elementInfo, bounds);
+}
+
+function _drawMarginResizer(elementInfo, bounds)
+{
+    var resizerElement = document.getElementById("margin-resizer");
+    resizerElement.style.left = bounds.minX + parseInt(elementInfo.marginLeft, 10) - 10 + "px";
+    resizerElement.style.top = bounds.minY + (bounds.maxY - bounds.minY) / 2 - 10 + "px";
+    resizerElement.style.visibility = "visible";
 }
 
+
+
 function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
 {
     context.save();
@@ -596,10 +617,41 @@ function onStepOverClick()
     InspectorOverlayHost.stepOver();
 }
 
+function onResizerDown(event)
+{
+    window.resizerDownX = event.clientX;
+    window.resizerDownY = event.clientY;
+
+    document.addEventListener("mousemove", onResizerMove, true);
+    document.addEventListener("mouseup", onResizerUp, true);
+    document.addEventListener("mouseout", onResizerOut, true);
+}
+
+function onResizerMove(event)
+{
+//    console.log("bbb "  + (event.clientX - resizerDownX));
+    InspectorOverlayHost.updateCSSProperty(event.clientX - resizerDownX);
+}
+
+function onResizerUp(event)
+{
+    delete window.resizerDownX;
+    delete window.resizerDownY;
+    document.removeEventListener("mousemove", onResizerMove, true);
+    document.removeEventListener("mouseup", onResizerUp, true);
+    document.removeEventListener("mouseout", onResizerOut, true);
+}
+
+function onResizerOut(event)
+{
+
+}
+
 function onLoaded()
 {
     document.getElementById("resume-button").addEventListener("click", onResumeClick);
     document.getElementById("step-over-button").addEventListener("click", onStepOverClick);
+    document.getElementById("margin-resizer").addEventListener("mousedown", onResizerDown);
 }
 
 function eventHasCtrlOrMeta(event)
@@ -634,5 +686,7 @@ document.addEventListener("keydown", onDocumentKeyDown);
   <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="margin-resizer">
+</div>
 <div id="log"></div>
 </html>