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;
 }