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

components/ui_devtools/protocol.json

Index: components/ui_devtools/protocol.json
diff --git a/components/ui_devtools/protocol.json b/components/ui_devtools/protocol.json
index e69dd13c3cc37f010a7ef8394fffb8f0990a5ded..6bb6f319331bcd3473ef8d79a967a5d482ad1ebc 100644
--- a/components/ui_devtools/protocol.json
+++ b/components/ui_devtools/protocol.json
@@ -21,13 +21,36 @@
                         }
                     ]
                 },
+                {
+                    "name": "setInspectMode",
+                    "parameters": [
+                        {
+                            "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."  
+                        {
+                            "name": "highlightConfig",
+                            "$ref": "HighlightConfig",
+                            "description": "A descriptor for the highlight appearance."
                         },
                         {
                             "description": "Identifier of the node to highlight.",
@@ -45,6 +68,29 @@
 
             ],
             "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": [
@@ -153,49 +199,54 @@
                     "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."
-                } 
+                }
             ]
         },
         {
@@ -326,11 +377,11 @@
                             "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"
@@ -371,6 +422,149 @@
                     "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": {