Show corresponding window/widget/view in UIElement tree when clicking on a UI element.

components/ui_devtools/protocol.json

 {
     "domains": [
         {
             "commands": [
                 {
                     "description": "Enables DOM agent for the given page.",
                     "name": "enable"
                 },
                 {
                     "description": "Disables DOM agent for the given page.",
                     "name": "disable"
                 },
                 {
                     "description": "Returns the root DOM node to the caller.",
                     "name": "getDocument",
                     "returns": [
                         {
                             "$ref": "Node",
                             "description": "Resulting node.",
                             "name": "root"
                         }
                     ]
                 },
                 {
-                    "name": "highlightNode",
+                    "name": "setInspectMode",
                     "parameters": [
-                        { 
-                            "name": "highlightConfig", 
-                            "$ref": "HighlightConfig",  
-                            "description": "A descriptor for the highlight appearance."  
+                        {
+                            "description": "Enable or disable the highlighting inspector.",
+                            "optional": true,
+                            "name": "mode",
+                            "$ref": "Mode"
+                        },
+                        {
+                            "name": "highlightConfig",
+                            "$ref": "HighlightConfig",
+                            "description": "A descriptor for the highlight appearance."
                         },
                         {
                             "description": "Identifier of the node to highlight.",
+                            "optional": true,
+                            "name": "nodeId",
+                            "$ref": "NodeId"
+                        }
+                    ],
+                    "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+                },
+                {
+                    "name": "highlightNode",
+                    "parameters": [
+                        {
+                            "name": "highlightConfig",
+                            "$ref": "HighlightConfig",
+                            "description": "A descriptor for the highlight appearance."
+                        },
+                        {
+                            "description": "Identifier of the node to highlight.",
                             "optional": true,
                             "name": "nodeId",
                             "$ref": "NodeId"
                         }
                     ],
                     "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
                 },
                 {
                     "name": "hideHighlight",
                     "description": "Hides DOM node highlight."
                 }
 
             ],
             "events": [
                 {
+                    "name": "setInspectMode",
+                    "parameters": [
+                        {
+                            "description": "Enable or disable the highlighting inspector.",
+                            "optional": true,
+                            "name": "mode",
+                            "$ref": "Mode"
+                        }
+                    ],
+                    "description": "Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified."
+                },
+                {
+                    "name": "nodeHighlightRequested",
+                    "parameters": [
+                        {
+                            "name": "nodeId",
+                            "$ref": "NodeId",
+                            "description": "Identifier of the node to highlight in DOM tree."
+                        }
+                    ],
+                    "description": "In DOM tree, highlights DOM node with given id."
+                },
+                {
                     "name": "childNodeInserted",
                     "parameters": [
                         {
                             "description": "Id of the node that has changed.",
                             "name": "parentNodeId",
                             "$ref": "NodeId"
                         },
                         {
 
                             "description": "Id of the previous sibling (0 if this is at the beginning of the list).",
@@ skipping 87 matching lines @@
                             "optional": true,
                             "type": "string"
                         }
                     ],
                     "type": "object"
                 },
                 {
                     "id": "RGBA",
                     "type": "object",
                     "properties": [
-                        { 
+                        {
                             "name": "r",
                             "type": "integer",
                             "description": "The red component, in the [0-255] range."
                         },
-                        { 
-                            "name": "g", 
-                            "type": "integer", 
-                            "description": "The green component, in the [0-255] range." 
+                        {
+                            "name": "g",
+                            "type": "integer",
+                            "description": "The green component, in the [0-255] range."
                         },
                         {
-                            "name": "b", 
-                            "type": "integer", 
-                            "description": "The blue component, in the [0-255] range." 
+                            "name": "b",
+                            "type": "integer",
+                            "description": "The blue component, in the [0-255] range."
                         },
-                        { 
-                            "name": "a", 
-                            "type": "number", 
-                            "optional": true, 
-                            "description": "The alpha component, in the [0-1] range (default: 1)." 
+                        {
+                            "name": "a",
+                            "type": "number",
+                            "optional": true,
+                            "description": "The alpha component, in the [0-1] range (default: 1)."
                         }
                     ],
                     "description": "A structure holding an RGBA color."
                 },
                 {
+                    "id": "Mode",
+                    "type": "string",
+                    "description": "Enable or Disable the highlighting inspector."
+                },
+                {
                     "id": "HighlightConfig",
                     "type": "object",
                     "properties": [
-                        { 
-                            "name": "contentColor", 
-                            "$ref": "RGBA", 
-                            "optional": true, 
-                            "description": "The content box highlight fill color (default: transparent)." 
+                        {
+                            "name": "contentColor",
+                            "$ref": "RGBA",
+                            "optional": true,
+                            "description": "The content box highlight fill color (default: transparent)."
                         },
-                        { 
-                            "name": "borderColor", 
-                            "$ref": "RGBA", 
-                            "optional": true, 
-                            "description": "The border highlight fill color (default: transparent)." 
+                        {
+                            "name": "borderColor",
+                            "$ref": "RGBA",
+                            "optional": true,
+                            "description": "The border highlight fill color (default: transparent)."
                         }
                     ],
                     "description": "Configuration data for the highlighting of page elements."
-                } 
+                }
             ]
         },
         {
             "commands": [
                 {
                     "description": "Enables CSS agent for the given page.",
                     "name": "enable"
                 },
                 {
                     "description": "Disables CSS agent for the given page.",
@@ skipping 110 matching lines @@
                         {
                             "description": "The property name.",
                             "name": "name",
                             "type": "string"
                         },
                         {
                             "description": "The property value.",
                             "name": "value",
                             "type": "string"
                         },
-                        { 
-                            "name": "range", 
-                            "$ref": "SourceRange", 
-                            "optional": true, 
-                            "description": "The entire property range in the enclosing style declaration (if available)."  
+                        {
+                            "name": "range",
+                            "$ref": "SourceRange",
+                            "optional": true,
+                            "description": "The entire property range in the enclosing style declaration (if available)."
                         }
                     ],
                     "type": "object"
                 },
                 {
                     "description": "CSS style representation.",
                     "id": "CSSStyle",
                     "properties": [
                         {
                             "description": "The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from. For UI devtools, this is simply equivalent to the NodeId.",
@@ skipping 20 matching lines @@
                         {
                             "description": "Style declaration range in the enclosing stylesheet (if available).",
                             "optional": true,
                             "name": "range",
                             "$ref": "SourceRange"
                         }
                     ],
                     "type": "object"
                 }
             ]
+        },
+        {
+           "commands": [
+                {
+                    "description": "Enables CSS agent for the given page.",
+                    "name": "enable"
+                },
+                {
+                    "description": "Disables CSS agent for the given page.",
+                    "name": "disable"
+                },
+               {
+                   "name": "setInspectMode",
+                   "parameters": [
+                       {
+                           "description": "Set an inspection mode.",
+                           "name": "mode",
+                           "$ref": "InspectMode"
+                       },
+                       {
+                           "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>.",
+                           "optional": true,
+                           "name": "highlightConfig",
+                           "$ref": "HighlightConfig"
+                       }
+                   ],
+                   "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspectNodeRequested' event upon element selection."
+               }
+           ],
+           "description": "This domain provides various functionality related to drawing atop the inspected page.",
+           "domain": "Overlay",
+           "dependencies": [
+               "DOM"
+           ],
+           "experimental": true,
+           "events": [
+               {
+                   "name": "setInspectMode",
+                   "parameters": [
+                       {
+                           "description": "Set an inspection mode.",
+                           "name": "mode",
+                           "$ref": "InspectMode"
+                       },
+                       {
+                           "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>.",
+                           "optional": true,
+                        "name": "highlightConfig",
+                           "$ref": "HighlightConfig"
+                       }
+                   ],
+                   "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspectNodeRequested' event upon element selection."
+               }
+           ],
+           "types": [
+               {
+                   "description": "Configuration data for the highlighting of page elements.",
+                   "type": "object",
+                   "id": "HighlightConfig",
+                   "properties": [
+                       {
+                           "optional": true,
+                           "type": "boolean",
+                           "name": "showInfo",
+                           "description": "Whether the node info tooltip should be shown (default: false)."
+                       },
+                       {
+                           "optional": true,
+                           "type": "boolean",
+                           "name": "showRulers",
+                           "description": "Whether the rulers should be shown (default: false)."
+                       },
+                       {
+                           "optional": true,
+                           "type": "boolean",
+                           "name": "showExtensionLines",
+                           "description": "Whether the extension lines from node to the rulers should be shown (default: false)."
+                       },
+                       {
+                           "optional": true,
+                           "type": "boolean",
+                           "name": "displayAsMaterial"
+                       },
+                       {
+                           "description": "The content box highlight fill color (default: transparent).",
+                           "optional": true,
+                           "name": "contentColor",
+                           "$ref": "DOM.RGBA"
+                    },
+                       {
+                           "description": "The padding highlight fill color (default: transparent).",
+                           "optional": true,
+                           "name": "paddingColor",
+                           "$ref": "DOM.RGBA"
+                       },
+                       {
+                           "description": "The border highlight fill color (default: transparent).",
+                           "optional": true,
+                           "name": "borderColor",
+                           "$ref": "DOM.RGBA"
+                       },
+                       {
+                           "description": "The margin highlight fill color (default: transparent).",
+                           "optional": true,
+                           "name": "marginColor",
+                           "$ref": "DOM.RGBA"
+                       },
+                       {
+                           "description": "The event target element highlight fill color (default: transparent).",
+                           "optional": true,
+                           "name": "eventTargetColor",
+                           "$ref": "DOM.RGBA"
+                       },
+                       {
+                           "description": "The shape outside fill color (default: transparent).",
+                           "optional": true,
+                           "name": "shapeColor",
+                           "$ref": "DOM.RGBA"
+                       },
+                       {
+                           "description": "The shape margin fill color (default: transparent).",
+                           "optional": true,
+                           "name": "shapeMarginColor",
+                           "$ref": "DOM.RGBA"
+                       },
+                       {
+                           "optional": true,
+                           "type": "string",
+                           "name": "selectorList",
+                           "description": "Selectors to highlight relevant nodes."
+                       }
+                   ]
+               },
+               {
+                   "enum": [
+                       "searchForNode",
+                       "searchForUAShadowDOM",
+                       "none"
+                   ],
+                   "type": "string",
+                   "id": "InspectMode"
+               }
+           ]
         }
     ],
     "version": {
         "major": "1",
         "minor": "0"
     }
 }