Chrome DevTools DOM Domain

[petekanev]

Implement the DOM Agent, part of the Chrome Debugging Protocol, inside Chrome DevTools.

Features:

• Display Native/Virtual views in a tree-like structure
• Preview tree children's attributes
• CSS preview support Chrome DevTools CSS Domain #745

Requirements:

ping @vakrilov @hshristov @PanayotCankov

In order to display the visual tree, and to work properly, the DOM needs to be sent computed data about the view structure. It should come from the nativescript core-modules following a specific interface.

When the DevTools are connected and the Elements tab opened - the DevTools backend will request the whole visual tree.

Notifications [modules -> runtime] need to be emitted on the following occasions:

• a page is loaded/navigated to (changed)
• a child view is inserted inside another view (with the computed Node)
• a child view is removed from another view
• an attribute is modified on the view
• an attribute is removed from the view

Node class:

class DOMNode {
	nodeId: string
	nodeType: number // 9 = root, 1 = element
	nodeName: string
	localName: string // = this.nodeName
	nodeValue: string // = empty string 
	children?: DOMNode[]
	attributes?: string[] // pairs of strings - [attr1Name, attr1Value, attr2Name, attr2Value]	
}

Part of Epic #563

[petekanev]

The feature will be available immediately with the 3.1.0 release!