Devtools: Create layout editor 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 128 matching lines @@
 #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);
 }
 
+.editor-anchor {
+    height: 12px;
+    width: 12px;
+    position: absolute;
+}
+
 </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";
+    var editor = document.getElementById("editor");
+    editor.style.visibility = "hidden";
+    editor.textContent = "";
     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 204 matching lines @@
     if (highlight.showRulers)
         _drawGrid(rulerAtRight, rulerAtBottom);
 
     if (highlight.paths.length) {
         if (highlight.showExtensionLines)
             _drawRulers(bounds, rulerAtRight, rulerAtBottom);
 
         if (highlight.elementInfo)
            _drawElementTitle(highlight.elementInfo, bounds);
     }
-    context.restore();

[dgozman, 2015/06/23 14:00:30]

Bring it back!

[sergeyv, 2015/06/23 16:36:52]

Done.

+
+    if (highlight.wysiwygInfo)
+        showWYSIWYGEditor(highlight.wysiwygInfo);
 }
 
 function setPlatform(platform)
 {
     window.platform = platform;
     document.body.classList.add("platform-" + platform);
 }
 
 function dispatch(message)
 {
@@ skipping 32 matching lines @@
 function onDocumentKeyDown(event)
 {
     if (!window._controlsVisible)
         return;
     if (event.keyIdentifier == "F8" || eventHasCtrlOrMeta(event) && event.keyCode == 220 /* backslash */)
         InspectorOverlayHost.resume();
     else if (event.keyIdentifier == "F10" || eventHasCtrlOrMeta(event) && event.keyCode == 222 /* single quote */)
         InspectorOverlayHost.stepOver();
 }
 
+function showWYSIWYGEditor(info)
+{
+    var editorElement = document.getElementById("editor");
+    editorElement.style.visibility = "visible";
+    var anchors = info.anchors;
+    for (var i = 0; i < anchors.length; ++i)
+        editorElement.appendChild(createAnchor(anchors[i]));
+}
+
+function createAnchor(anchorInfo)
+{
+    var handleWidth = 5;
+    context.save();
+    context.shadowColor = "black";
+    context.shadowBlur = 2;
+    context.strokeStyle = "rgb(0, 0, 128)";
+    context.fillStyle = "rgb(0, 0, 128)";
+    context.beginPath();
+    context.arc(anchorInfo.x, anchorInfo.y, handleWidth, 0, 2 * Math.PI);
+    context.fill();
+    context.stroke();
+    context.restore();
+
+    var anchorElement = document.createElement("div");
+    anchorElement.className = "editor-anchor";
+    anchorElement.style.left = anchorInfo.x - handleWidth + "px";
+    anchorElement.style.top = anchorInfo.y - handleWidth + "px";
+    return anchorElement;
+}
+
 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>
 <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="editor"></div>

[dgozman, 2015/06/23 14:00:30]

Let's make it class=fill.

[sergeyv, 2015/06/23 16:36:52]

Done.

 <div id="log"></div>
 </html>