Devtools[LayoutEditor]: Rework layout-editor workflow

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 429 matching lines @@
     window.canvasHeight = viewportSize.height;
 
     window._controlsVisible = false;
     document.querySelector(".controls-line").style.visibility = "hidden";
     document.getElementById("element-title").style.visibility = "hidden";
     document.getElementById("tooltip-container").classList.add("hidden");
     var editor = document.getElementById("editor");
     editor.style.visibility = "hidden";
     editor.textContent = "";
     document.body.classList.remove("dimmed");
-    document.removeEventListener("mousemove", onGlobalMouseMove);
+    document.removeEventListener("mousedown", consumeEvent);
+    document.removeEventListener("mousemove", onLayoutEditorMouseMove);
+    document.removeEventListener("mouseup", consumeEvent);
+    document.removeEventListener("click", onLayoutEditorClick);
+    document.removeEventListener("keydown", onLayoutEditorKeyDown);
+
     delete window.hoverableAreas;
     delete window.anchorsByType;
     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;
@@ skipping 342 matching lines @@
             anchorsByType.set(anchorInfo.type, []);
         anchorsByType.get(anchorInfo.type).push(anchorInfo);
         editorElement.appendChild(createAnchor(anchorInfo));
         if (anchorInfo.propertyName === window.draggedPropertyName)
             selectedAnchorInfo = anchorInfo;
     }
 
     if (selectedAnchorInfo)
         showLabels(selectedAnchorInfo.type, selectedAnchorInfo.propertyName);
 
-    document.addEventListener("mousemove", onGlobalMouseMove);
+    document.addEventListener("mousedown", consumeEvent);
+    document.addEventListener("mousemove", onLayoutEditorMouseMove);
+    document.addEventListener("mouseup", consumeEvent);
+    document.addEventListener("click", onLayoutEditorClick);
+    document.addEventListener("keydown", onLayoutEditorKeyDown);
 }
 
 function createAnchor(anchorInfo)
 {
     var handleWidth = 5;
     context.save();
     context.shadowColor = "rgba(0, 0, 0, 0.34)";
     context.shadowBlur = 2;
     context.fillStyle = anchorColorForProperty(anchorInfo);
     context.beginPath();
@@ skipping 189 matching lines @@
     // TODO: find a better color
     if (!anchorInfo.propertyValue.mutable)
         return "rgb(159, 188, 191)";
 
     var propertyName = anchorInfo.propertyName;
     if (propertyName.startsWith("margin"))
         return "rgb(246, 167, 35)";
     return "rgb(107, 213, 0)";
 }
 
-function onGlobalMouseMove(event)
+function onLayoutEditorMouseMove(event)
 {
+    event.preventDefault();
     if (!window.hoverableAreas)
         return;
     var types = ["padding", "margin"];
     for (var type of types) {
         var path = hoverableAreas.get(type);
         if (path && context.isPointInPath(path, deviceScaleFactor * event.x, deviceScaleFactor * event.y)) {
             showLabels(type);
-            break;
+            return;
         }
     }
+    resetLabelCanvas();
+}
+
+function onLayoutEditorClick(event)
+{
+    event.preventDefault();
+    InspectorOverlayHost.clearSelection(true);
+}
+
+function onLayoutEditorKeyDown(event)
+{
+    if (window.draggedPropertyName)
+        return;
+
+    // Clear selection on Esc.
+    if (event.keyIdentifier === "U+001B") {
+        event.preventDefault();
+        InspectorOverlayHost.clearSelection(false);
+    }
 }
 
+function consumeEvent(event)
+{
+    event.preventDefault();
+}
+
 function resetLabelCanvas()
 {
     delete window.labelCanvasState;
     resetCanvas(labelsCanvas);
 }
 
 window.addEventListener("DOMContentLoaded", onLoaded);
 document.addEventListener("keydown", onDocumentKeyDown);
 
 </script>
@@ skipping 13 matching lines @@
 </div>
 <div id="tooltip-container" class="hidden">
     <div id="element-tooltip">
       <div id="element-description" class="monospace"><span id="material-tag-name"></span><span id="material-node-id"></span><span id="material-class-name"></span></div>
       <div id="dimensions"><span id="material-node-width"></span>&#xD7;<span id="material-node-height"></span></div>
     </div>
     <div id="element-tooltip-arrow"></div>
 <div id="editor" class="fill"></div>
 <div id="log"></div>
 </html>