Devtools[LayoutEditor]: Rework layout-editor workflow

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 f822541446d5883f9fd892bbd140b34c69d00c01..1657a0df9040a2e0201f2471a5644dca10ff73c1 100644
--- a/Source/core/inspector/InspectorOverlayPage.html
+++ b/Source/core/inspector/InspectorOverlayPage.html
@@ -447,7 +447,12 @@ function reset(resetData)
     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;
@@ -810,7 +815,11 @@ function showLayoutEditor(info)
     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)
@@ -1023,15 +1032,15 @@ function anchorColorForProperty(anchorInfo)
     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)) {
-            event.preventDefault();
             showLabels(type);
             return;
         }
@@ -1039,6 +1048,26 @@ function onGlobalMouseMove(event)
     resetLabelCanvas();
 }
 
+function onLayoutEditorClick(event)
+{
+    event.preventDefault();
+    InspectorOverlayHost.clearSelection(true);
+}
+
+function onLayoutEditorKeyDown(event)
+{
+    // clear selection on ESC
+    if (event.keyIdentifier === "U+001B") {
+        event.preventDefault();
+        InspectorOverlayHost.clearSelection(false);
+    }
+}
+
+function consumeEvent(event)
+{
+    event.preventDefault();
+}
+
 function resetLabelCanvas()
 {
     delete window.labelCanvasState;