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

apps/app/devtools-app/app.css

@@ -0,0 +1,13 @@
+.btn1 {
+    background-color: lightgreen;
+    color: coral;
+    font-size: 20;
+    font-family: monospace;
+}
+
+.btn2 {
+    background-color: coral;
+    color: lightgreen;
+    font-size: 24;
+    font-family: serif;
+}

apps/app/devtools-app/app.ts

@@ -0,0 +1,6 @@
+import * as application from "tns-core-modules/application";
+
+// Needed only for build infrastructure
+application.setCssFileName("devtools-app/app.css");
+
+application.start({ moduleName: "devtools-app/main-page" });

apps/app/devtools-app/main-page.ts

@@ -0,0 +1,36 @@
+import * as frame from "tns-core-modules/ui/frame";
+import { Label } from "tns-core-modules/ui/label";
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+// import { DOMNode } from "tns-core-modules/debugger/dom-node";
+
+export function print(args) {
+    // const node = new DOMNode(frame.topmost());
+    // console.dir(node.toJSON());
+
+    // const btn = args.object.page.getViewById("btn");
+    // btn.ensureDomNode();
+    // console.dir(btn.domNode.getComputedProperties());
+}
+
+let i = 0;
+export function add(args) {
+    const container = args.object.page.getViewById("container");
+    const lbl = new Label();
+    lbl.text = "label " + i++;
+    container.addChild(lbl);
+}
+
+export function remove(args) {
+    const container = <StackLayout>args.object.page.getViewById("container");
+    const lbl = container.getChildAt(container.getChildrenCount() - 1);
+    container.removeChild(lbl);
+}
+
+export function navigate() {
+    frame.topmost().navigate("gallery-app/main-page");
+}
+
+export function change(args){
+    args.object.text = "hi " + Math.random();
+
+}

apps/app/devtools-app/main-page.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page navigatedTo="print">
+    <GridLayout rows="* * *" columns="* * *">
+        
+        <Button id="btn"
+                customProp="custom" 
+                text="hi there" 
+                fontSize="30" 
+                row="1"
+                col="1"
+                color="red"
+                backgroundColor="lightgreen"
+                class="btn" 
+                tap="change"/>
+        <Button text="class: btn1" class="btn1" row="1" col="0"/>
+        <Button text="class: btn2" class="btn2" row="1" col="2"/>
+
+        <Button text="add" tap="add" />
+        <Button text="remove" tap="remove" col="2" />
+        
+        <Button text="move beach" tap="navigate" col="1" />
+        <StackLayout colSpan="3" row="2" id="container">
+            <TextField hint="hint" text="123" />
+            <TextField hint="hint" text="456" />
+            
+            
+        </StackLayout>
+    </GridLayout>
+</Page>