Devtools: Margin resizer in overlay experiment

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 109 matching lines @@
 #step-over-button .glyph {
     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAOFJREFUKM+N0j8rhXEUB/DPcxW35CqhvIBrtqibkklhV8qkTHe4ZbdblcXgPVhuMdqUTUl5A2KRRCF5LGc4PT1P7qnfcr5/zu/8KdTHLFaxjHnc4RZXKI0QYxjgLQTVd42l/0wmg5iFX3iq5H6w22RS4DyRH7CB8cAXcBTGJT6xUmd0mEwuMdFQcA3fwXvGTAan8BrgPabTL9fRRyfx91PRMwyjGwcJ2EyCfsrfpPw2Pipz24NT/MZciiQYVshzOKnZ5Hturxt3k2MnCpS4SPkeHpPR8Sh3tYgttBoW9II2/AHiaEqvD2Fc0wAAAABJRU5ErkJggg==);
     -webkit-mask-size: 18px 10px;
 }
 
 .px {
     color: rgb(128, 128, 128);
 }
 
 #element-title {
+    background-color: #ffff00;
     position: absolute;
     z-index: 10;
 }
 
 #tag-name {
     /* Keep this in sync with view-source.css (.html-tag) */
     color: rgb(136, 18, 128);
 }
 
 #node-id {
     /* Keep this in sync with view-source.css (.html-attribute-value) */
     color: rgb(26, 26, 166);
 }
 
 #class-name {
     /* Keep this in sync with view-source.css (.html-attribute-name) */
     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)";
 const darkGridColor = "rgba(0,0,0,0.7)";
 const transparentColor = "rgba(0, 0, 0, 0)";
 const gridBackgroundColor = "rgba(255, 255, 255, 0.8)";
 
 function drawPausedInDebuggerMessage(message)
 {
     window._controlsVisible = true;
@@ skipping 174 matching lines @@
     canvas.height = deviceScaleFactor * viewportSize.height;
     canvas.style.width = viewportSize.width + "px";
     canvas.style.height = viewportSize.height + "px";
     context.scale(deviceScaleFactor, deviceScaleFactor);
     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";
+    document.getElementById("margin-resizer").style.visibility = "hidden";
     document.body.classList.remove("dimmed");
     window._gridPainted = false;
 }
 
 function _drawElementTitle(elementInfo, bounds)
 {
     document.getElementById("tag-name").textContent = elementInfo.tagName;
     document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
     var className = elementInfo.className;
     if (className && className.length > 50)
@@ skipping 55 matching lines @@
     context.fillStyle = "rgb(255, 255, 194)";
     context.fill();
     context.strokeStyle = "rgb(128, 128, 128)";
     context.stroke();
 
     context.restore();
 
     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();
     var width = canvasWidth;
     var height = canvasHeight;
     context.strokeStyle = "rgba(128, 128, 128, 0.3)";
     context.lineWidth = 1;
     context.translate(0.5, 0.5);
 
     if (rulerAtRight) {
@@ skipping 159 matching lines @@
 function onResumeClick()
 {
     InspectorOverlayHost.resume();
 }
 
 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)
 {
     return window.platform == "mac" ? (event.metaKey && !event.ctrlKey) : (event.ctrlKey && !event.metaKey);
 }
 
 function onDocumentKeyDown(event)
 {
     if (!window._controlsVisible)
@@ skipping 14 matching lines @@
     <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>
 <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="margin-resizer">
+</div>
 <div id="log"></div>
 </html>