[devtools] Add DOMSnapshot domain for dom+layout+style snapshots.

third_party/WebKit/Source/core/inspector/browser_protocol.json

 {
     "version": { "major": "1", "minor": "2" },
     "domains": [{
         "domain": "Inspector",
         "experimental": true,
         "types": [],
         "commands": [
             {
                 "name": "enable",
                 "description": "Enables inspector domain notifications."
@@ skipping 3259 matching lines @@
             {
                 "name": "styleSheetRemoved",
                 "parameters": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
                 ],
                 "description": "Fired whenever an active document stylesheet is removed."
             }
         ]
     },
     {
+        "domain": "DOMSnapshot",
+        "experimental": true,
+        "description": "This domain facilitates obtaining document snapshots with DOM, layout, and style information.",
+        "dependencies": ["CSS", "DOM"],
+        "commands": [
+            {
+                "name": "getSnapshot",
+                "parameters": [
+                    { "name": "computedStyleWhitelist", "type": "array", "items": { "type": "string" }, "description": "Whitelist of computed styles to return." },
+                    { "name": "domDepth", "type": "integer", "optional": true, "description": "The maximum depth at which children should be retrieved, defaults to 1. Use -1 for the entire subtree or provide an integer larger than 0." },
+                    { "name": "pierce", "type": "boolean", "optional": true, "description": "Whether or not iframes and shadow roots should be traversed when returning the subtree (default is false)." }
+                ],
+                "returns": [
+                    { "name": "domNodes", "type": "array", "items": { "$ref": "DOM.Node" }, "description": "The nodes in the DOM tree." },

[pfeldman, 2017/05/15 18:42:18]

When I was suggesting a separate domain, I meant that it would help isolating
the data structures as well. I.e. you don't need nodeId because it has front-end
specific semantics, you can drop other node properties you don't need, you could
inline layout and css info the way you needed.

If we are still using all the data structures from DOM and CSS, we can just put
this method into DOM domain, but it would need to push nodes to the front-end to
maintain present contracts.

[Eric Seckler, 2017/05/17 10:44:31]

Ah, I see. I think the only thing that's not really necessary for headless
snapshots are the devtools node ids. We'd like to keep the other fields of the
DOM/CSS domain types and we wouldn't inline css/layout info either. So this
would amount to duplicating the types into the new domain, which is a lot of
work without much benefit (other than removing devtools ids).

What may be more useful (if necessary in the future) would be wrapping some of
the DOM/CSS types to add snapshot/headless-specific fields to them that are
irrelevant for the frontend.
I see your point about pushing the nodes. Would moving this command to the DOM
domain avoid the need for additional pushing, as we also don't do that for
DOM.getFlattenedDocument? It's not useful for us if we get all nodes twice, once
via the DOM domain events and once in the snapshot.

I'd be happy to (optionally) piggyback the css/layout info in
DOM.getFlattenedDocument instead, but that would introduce a dependency from the
DOM domain to the CSS domain types - thus creating a cyclic dependency between
DOM and CSS, which seems unsupported.

+                    { "name": "layoutTreeNodes", "type": "array", "items": { "$ref": "CSS.LayoutTreeNode" }, "description": "The nodes in the layout tree." },
+                    { "name": "computedStyles", "type": "array", "items": { "$ref": "CSS.ComputedStyle" }, "description": "Whitelisted ComputedStyle properties for each node in the layout tree." }
+                ],
+                "description": "Returns a document snapshot, including the DOM tree of the root node up to the given depth in a flattened array, as well as layout and white-listed computed style information for the nodes. Requires that the DOM domain is enabled."
+            }
+        ]
+    },
+    {
         "domain": "IO",
         "description": "Input/Output operations for streams produced by DevTools.",
         "experimental": true,
         "types": [
             {
                 "id": "StreamHandle",
                 "type": "string"
             }
         ],
         "commands": [
@@ skipping 1382 matching lines @@
                 "parameters": [
                     { "name": "windowId", "$ref": "WindowID", "description": "Browser window id." }
                 ],
                 "returns": [
                     { "name": "bounds", "$ref": "Bounds", "description": "Bounds information of the window. When window state is 'minimized', the restored window position and size are returned." }
                 ]
             }
         ]
     }]
 }