Chrome devtools elements tab support for Android (#4351)

* Enable chrome-devtools elemets tab

* Trigger updates when property is chaned form native

* Tslint fixes

* Don't run dom-elemet tests in IOS

* fix tests

* Create package.json

* Update package.json

* domNode changed to field for performance

tns-core-modules/debugger/devtools-elements.ts

@@ -0,0 +1,97 @@
+import { unsetValue } from "../ui/core/properties";
+import { ViewBase } from "../ui/core/view-base";
+import { topmost } from "../ui/frame";
+import { getNodeById } from "./dom-node";
+
+export interface Inspector {
+    // DevTools -> Application communication. Methods that devtools calls when needed.
+    getDocument(): string;
+    removeNode(nodeId: number): void;
+    getComputedStylesForNode(nodeId: number): string;
+    setAttributeAsText(nodeId: number, text: string, name: string): void;
+
+    // Application -> DevTools communication. Methods that the app should call when needed.
+    childNodeInserted(parentId: number, lastId: number, nodeStr: string): void;
+    childNodeRemoved(parentId: number, nodeId: number): void;
+    attributeModified(nodeId: number, attrName: string, attrValue: string): void;
+    attributeRemoved(nodeId: number, attrName: string): void;
+}
+
+function getViewById(nodeId: number): ViewBase {
+    const node = getNodeById(nodeId);
+    let view;
+    if (node) {
+        view = node.viewRef.get();
+    }
+
+    return view;
+}
+
+export function attachInspectorCallbacks(inspector: Inspector) {
+    inspector.getDocument = function () {
+        const topMostFrame = topmost();
+        topMostFrame.ensureDomNode();
+
+        return topMostFrame.domNode.toJSON();
+    }
+
+    inspector.getComputedStylesForNode = function (nodeId) {
+        const view = getViewById(nodeId);
+        if (view) {
+            return JSON.stringify(view.domNode.getComputedProperties());
+        }
+
+        return "[]";
+    }
+
+    inspector.removeNode = function (nodeId) {
+        const view = getViewById(nodeId);
+        if (view) {
+            // Avoid importing layout and content view
+            let parent = <any>view.parent;
+            if (parent.removeChild) {
+                parent.removeChild(view);
+            } else if (parent.content === view) {
+                parent.content = null;
+            }
+            else {
+                console.log("Can't remove child from " + parent);
+            }
+        }
+    }
+
+    inspector.setAttributeAsText = function (nodeId, text, name) {
+        const view = getViewById(nodeId);
+        if (view) {
+            // attribute is registered for the view instance
+            let hasOriginalAttribute = !!name.trim();
+
+            if (text) {
+                let textParts = text.split("=");
+
+                if (textParts.length === 2) {
+                    let attrName = textParts[0];
+                    let attrValue = textParts[1].replace(/['"]+/g, '');
+
+                    // if attr name is being replaced with another
+                    if (name !== attrName && hasOriginalAttribute) {
+                        view[name] = unsetValue;
+                        view[attrName] = attrValue;
+                    } else {
+                        view[hasOriginalAttribute ? name : attrName] = attrValue;
+                    }
+                }
+            } else {
+                // delete attribute
+                view[name] = unsetValue;
+            }
+
+            view.domNode.loadAttributes();
+        }
+    }
+}
+
+// Automatically attach callbacks if there is __inspector
+if (global && global.__inspector) {
+    attachInspectorCallbacks(global.__inspector)
+}