Devtools[LayoutEditor]: Rework layout-editor workflow

Source/devtools/protocol.json

 {
     "version": { "major": "1", "minor": "1" },
     "domains": [{
         "domain": "Inspector",
         "hidden": true,
         "types": [],
         "commands": [
             {
                 "name": "enable",
                 "description": "Enables inspector domain notifications.",
@@ skipping 2339 matching lines @@
                 ],
                 "description": "Rectangle."
             },
             {
                 "id": "HighlightConfig",
                 "type": "object",
                 "properties": [
                     { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
                     { "name": "showRulers", "type": "boolean", "optional": true, "description": "Whether the rulers should be shown (default: false)." },
                     { "name": "showExtensionLines", "type": "boolean", "optional": true, "description": "Whether the extension lines from node to the rulers should be shown (default: false)." },
-                    { "name": "showLayoutEditor", "type": "boolean", "optional": true, "hidden": true},
                     { "name": "displayAsMaterial", "type": "boolean", "optional": true, "hidden": true},
                     { "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
                     { "name": "paddingColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
                     { "name": "borderColor", "$ref": "RGBA", "optional": true, "description": "The border highlight fill color (default: transparent)." },
                     { "name": "marginColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight fill color (default: transparent)." },
                     { "name": "eventTargetColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The event target element highlight fill color (default: transparent)." },
                     { "name": "shapeColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The shape outside fill color (default: transparent)." },
                     { "name": "shapeMarginColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The shape margin fill color (default: transparent)." }
                 ],
                 "description": "Configuration data for the highlighting of page elements."
@@ skipping 157 matching lines @@
                 "returns": [
                     { "name": "nodeId", "$ref": "NodeId", "description": "Node id for given object." }
                 ],
                 "description": "Requests that the node is sent to the caller given the JavaScript node object reference. All nodes that form the path from the node to the root are also sent to the client as a series of <code>setChildNodes</code> notifications."
             },
             {
                 "name": "setInspectModeEnabled",
                 "hidden": true,
                 "parameters": [
                     { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
-                    { "name": "inspectUAShadowDOM", "type": "boolean", "optional": true, "description": "True to enable inspection mode for user agent shadow DOM." },
+                    { "name": "mode", "type": "string", "enum": ["showUAShadowDOM", "showLayoutEditor"], "optional": true, "description": "True to enable inspection mode for user agent shadow DOM." },
                     { "name": "highlightConfig", "$ref": "HighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
                 ],
                 "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspectNodeRequested' event upon element selection."
             },
             {
                 "name": "highlightRect",
                 "parameters": [
                     { "name": "x", "type": "integer", "description": "X coordinate" },
                     { "name": "y", "type": "integer", "description": "Y coordinate" },
                     { "name": "width", "type": "integer", "description": "Rectangle width" },
@@ skipping 2663 matching lines @@
                 ],
                 "returns": [
                     { "name": "accessibilityNode", "$ref": "AXNode", "description": "The <code>Accessibility.AXNode</code> for this DOM node, if it exists.", "optional": true }
                 ],
                 "description": "Fetches the accessibility node for this DOM node, if it exists.",
                 "hidden": true
             }
         ]
     }]
 }