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/ui/core/properties/properties.d.ts

@@ -108,7 +108,7 @@ export class CssAnimationProperty<T extends Style, U> {
 
     public register(cls: { prototype: T }): void;
     public isSet(instance: T): boolean;
-    
+
     public _valueConverter?: (value: string) => any;
     public static _getByCssName(name: string): CssAnimationProperty<any, any>;
 }
@@ -121,4 +121,7 @@ export function propagateInheritableCssProperties(parentStyle: Style, childStyle
 export function clearInheritedProperties(view: ViewBase): void;
 
 export function makeValidator<T>(...values: T[]): (value: any) => value is T;
-export function makeParser<T>(isValid: (value: any) => boolean): (value: any) => T;
+export function makeParser<T>(isValid: (value: any) => boolean): (value: any) => T;
+
+export function getSetProperties(view: ViewBase): [string, any][];
+export function getComputedCssValues(view: ViewBase): [string, any][];

tns-core-modules/ui/core/properties/properties.ts

@@ -12,6 +12,7 @@ export { Style };
 
 export const unsetValue: any = new Object();
 
+let cssPropertyNames: string[] = [];
 let symbolPropertyMap = {};
 let cssSymbolPropertyMap = {};
 
@@ -152,6 +153,14 @@ export class Property<T extends ViewBase, U> implements TypedPropertyDescriptor<
                 if (affectsLayout) {
                     this.requestLayout();
                 }
+
+                if (this.domNode) {
+                    if (reset) {
+                        this.domNode.attributeRemoved(propertyName);
+                    } else {
+                        this.domNode.attributeModified(propertyName, value);
+                    }
+                }
             }
         };
 
@@ -179,6 +188,10 @@ export class Property<T extends ViewBase, U> implements TypedPropertyDescriptor<
                 if (affectsLayout) {
                     owner.requestLayout();
                 }
+
+                if (owner.domNode) {
+                    owner.domNode.attributeModified(propertyName, value);
+                }
             }
         };
 
@@ -299,6 +312,14 @@ export class CoercibleProperty<T extends ViewBase, U> extends Property<T, U> imp
                 if (affectsLayout) {
                     this.requestLayout();
                 }
+
+                if (this.domNode) {
+                    if (reset) {
+                        this.domNode.attributeRemoved(propertyName);
+                    } else {
+                        this.domNode.attributeModified(propertyName, value);
+                    }
+                }
             }
         }
     }
@@ -399,6 +420,8 @@ export class CssProperty<T extends Style, U> implements definitions.CssProperty<
         const propertyName = options.name;
         this.name = propertyName;
 
+        cssPropertyNames.push(options.cssName);
+
         this.cssName = `css:${options.cssName}`;
         this.cssLocalName = options.cssName;
 
@@ -635,6 +658,8 @@ export class CssAnimationProperty<T extends Style, U> {
         const propertyName = options.name;
         this.name = propertyName;
 
+        cssPropertyNames.push(options.cssName);
+
         CssAnimationProperty.properties[propertyName] = this;
         if (options.cssName && options.cssName !== propertyName) {
             CssAnimationProperty.properties[options.cssName] = this;
@@ -1206,4 +1231,34 @@ export function makeParser<T>(isValid: (value: any) => boolean): (value: any) =>
             throw new Error("Invalid value: " + value);
         }
     };
+}
+
+export function getSetProperties(view: ViewBase): [string, any][] {
+    const result = [];
+
+    Object.getOwnPropertyNames(view).forEach(prop => {
+        result.push([prop, view[prop]]);
+    });
+
+    let symbols = Object.getOwnPropertySymbols(view);
+    for (let symbol of symbols) {
+        const property = symbolPropertyMap[symbol];
+        if (!property) {
+            continue;
+        }
+
+        const value = view[property.key];
+        result.push([property.name, value]);
+    }
+
+    return result;
+}
+
+export function getComputedCssValues(view: ViewBase): [string, any][] {
+    const result = [];
+    const style = view.style;
+    for (var prop of cssPropertyNames) {
+        result.push([prop, style[prop]]);
+    }
+    return result;
 }

tns-core-modules/ui/core/view-base/view-base.d.ts

@@ -15,6 +15,7 @@ import { layout } from "../../../utils/utils";
 import { Color } from "../../../color";
 import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "../../layouts/flexbox-layout";
 import { Length } from "../../styling/style-properties";
+import { DOMNode } from "../../../debugger/dom-node";
 
 export { isIOS, isAndroid, layout, Color };
 
@@ -57,6 +58,7 @@ export abstract class ViewBase extends Observable {
     col: number;
     rowSpan: number;
     colSpan: number;
+    domNode: DOMNode;
 
     order: Order;
     flexGrow: FlexGrow;
@@ -277,7 +279,7 @@ export abstract class ViewBase extends Observable {
 
     /**
      * Performs the core logic of adding a child view to the native visual tree. Returns true if the view's native representation has been successfully added, false otherwise.
-     */
+    */
     _addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean;
     _removeViewFromNativeVisualTree(view: ViewBase): void;
     _childIndexToNativeChildIndex(index?: number): number;
@@ -296,6 +298,12 @@ export abstract class ViewBase extends Observable {
      */
     public deletePseudoClass(name: string): void;
 
+    /**
+     * @unstable
+     * Ensures a dom-node for this view.
+     */
+    public ensureDomNode();
+
     //@private
     public _styleScope: any;
 

tns-core-modules/ui/core/view-base/view-base.ts

@@ -11,6 +11,7 @@ import { Binding, BindingOptions, Observable, WrappedValue, PropertyChangeData,
 import { isIOS, isAndroid } from "../../../platform";
 import { layout } from "../../../utils/utils";
 import { Length, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from "../../styling/style-properties";
+import { DOMNode } from "../../../debugger/dom-node";
 
 // TODO: Remove this import!
 import * as types from "../../../utils/types";
@@ -142,6 +143,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
     private _visualState: string;
     private _inlineStyleSelector: SelectorCore;
     private __nativeView: any;
+    public domNode: DOMNode;
 
     public bindingContext: any;
     public nativeView: any;
@@ -259,7 +261,13 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
         return null;
     }
 
-    // Overriden so we don't raise `poropertyChange`
+    public ensureDomNode() {
+        if (!this.domNode) {
+            this.domNode = new DOMNode(this);
+        }
+    }
+
+    // Overridden so we don't raise `poropertyChange`
     // The property will raise its own event.
     public set(name: string, value: any) {
         this[name] = WrappedValue.unwrap(value);
@@ -558,6 +566,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
         view.parent = this;
         this._addViewCore(view, atIndex);
         view._parentChanged(null);
+
+        if (this.domNode) {
+            this.domNode.onChildAdded(view);
+        }
     }
 
     @profile
@@ -590,7 +602,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
     }
 
     /**
-    * Core logic for removing a child view from this instance. Used by the framework to handle lifecycle events more centralized. Do not outside the UI Stack implementation.
+    * Core logic for removing a child view from this instance. Used by the framework to handle lifecycle events more centralized. Do not use outside the UI Stack implementation.
     */
     public _removeView(view: ViewBase) {
         if (traceEnabled()) {
@@ -601,6 +613,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
             throw new Error("View not added to this instance. View: " + view + " CurrentParent: " + view.parent + " ExpectedParent: " + this);
         }
 
+        if (this.domNode) {
+            this.domNode.onChildRemoved(view);
+        }
+
         this._removeViewCore(view);
         view.parent = undefined;
         view._parentChanged(this);
@@ -785,6 +801,12 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
         // this._iosView = null;
 
         this._context = null;
+
+        if (this.domNode) {
+            this.domNode.dispose();
+            this.domNode = undefined;
+        }
+
         traceNotifyEvent(this, "_onContextChanged");
         traceNotifyEvent(this, "_tearDownUI");
     }