add profile for functions, profile CSS-es on startup, use __time (#4227)

Call native setters once when a page is instantiated.

Fix background not being reset, Label's background is now set to background, not layer

Make the nativeView field instead of property for performance reasons

tests/app/testRunner.ts

@@ -223,6 +223,9 @@ allTests["SEGMENTED-BAR"] = segmentedBarTests;
 import * as animationTests from "./ui/animation/animation-tests";
 allTests["ANIMATION"] = animationTests;
 
+import * as lifecycle from "./ui/lifecycle/lifecycle-tests";
+allTests["LIFECYCLE"] = lifecycle;
+
 import * as cssAnimationTests from "./ui/animation/css-animation-tests";
 allTests["CSS-ANIMATION"] = cssAnimationTests;
 

tests/app/ui/button/button-tests.ts

@@ -224,6 +224,8 @@ var _testNativeBackgroundColorFromCss = function (views: Array<viewModule.View>)
     var page = <pagesModule.Page>views[1];
     page.css = "button { background-color: " + actualBackgroundColorHex + "; }";
 
+    helper.waitUntilLayoutReady(button);
+
     var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex;
     TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
 }
@@ -232,6 +234,8 @@ var _testNativeBackgroundColorFromLocal = function (views: Array<viewModule.View
     var button = <buttonModule.Button>views[0];
     button.style.backgroundColor = new colorModule.Color(actualBackgroundColorHex);
 
+    helper.waitUntilLayoutReady(button);
+
     var actualResult = buttonTestsNative.getNativeBackgroundColor(button).hex;
     TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
 }
@@ -267,6 +271,8 @@ export var test_StateHighlighted_also_fires_pressedState = function () {
         var expectedNormalizedColor = "#FF0000";
         page.css = "button:pressed { background-color: " + expectedColor + "; }";
 
+        helper.waitUntilLayoutReady(view);
+
         view._goToVisualState('highlighted');
 
         var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
@@ -282,6 +288,8 @@ export var test_StateHighlighted_also_fires_activeState = function () {
         var expectedNormalizedColor = "#FF0000";
         page.css = "button:active { background-color: " + expectedColor + "; }";
 
+        helper.waitUntilLayoutReady(view);
+
         view._goToVisualState('highlighted');
 
         var actualResult = buttonTestsNative.getNativeBackgroundColor(view);
@@ -297,6 +305,8 @@ export var test_applying_disabled_visual_State_when_button_is_disable = function
         var expectedNormalizedColor = "#FF0000";
         page.css = "button:disabled { background-color: " + expectedColor + "; }";
 
+        helper.waitUntilLayoutReady(view);
+
         view.isEnabled = false;
 
         var actualResult = buttonTestsNative.getNativeBackgroundColor(view);

tests/app/ui/helper.ts

@@ -153,6 +153,10 @@ export function waitUntilNavigatedFrom(oldPage: page.Page) {
     TKUnit.waitUntilReady(() => getCurrentPage() && getCurrentPage() !== oldPage);
 }
 
+export function waitUntilLayoutReady(view: view.View): void {
+    TKUnit.waitUntilReady(() => view.isLayoutValid);
+}
+
 export function navigateWithEntry(entry: frame.NavigationEntry): page.Page {
     let page = frame.resolvePageFromEntry(entry);
     entry.moduleName = null;

tests/app/ui/label/label-tests.ts

@@ -125,6 +125,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
 
         if (testLabel.android) {
             this.waitUntilTestElementIsLoaded();
+        } else {
+            helper.waitUntilLayoutReady(testLabel);
         }
         const actualNative = labelTestsNative.getNativeBackgroundColor(testLabel);
 
@@ -217,7 +219,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
         let expBackgroundColor;
 
         this.testPage.css = testCss;
-        this.waitUntilTestElementIsLoaded();
+        this.waitUntilTestElementLayoutIsValid();
+
         const testLabel = label;
 
         if (testLabel.android) {
@@ -480,6 +483,8 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
 
         view.isEnabled = false;
 
+        helper.waitUntilLayoutReady(view);
+
         let actualResult = labelTestsNative.getNativeBackgroundColor(view);
         TKUnit.assert(actualResult.hex === expectedNormalizedColor, "Actual: " + actualResult.hex + "; Expected: " + expectedNormalizedColor);
     };

tests/app/ui/lifecycle/lifecycle-tests.ts

@@ -0,0 +1,119 @@
+import * as helper from "../helper";
+import * as btnCounter from "./pages/button-counter";
+import * as TKUnit from "../../TKUnit";
+import { isIOS } from "tns-core-modules/platform";
+
+// Integration tests that asser sertain runtime behavior, lifecycle events atc.
+
+export function test_builder_sets_native_properties_once() {
+    const page = helper.navigateToModule("ui/lifecycle/pages/page-one");
+    const buttons = ["btn1", "btn2", "btn3", "btn4"].map(id => page.getViewById<btnCounter.Button>(id));
+    buttons.forEach(btn => {
+        TKUnit.assertEqual(btn.backgroundInternalSetNativeCount, 1, `Expected ${btn.id}'s backgroundInternal.setNative to be exactly once when inflating from xml.`);
+        TKUnit.assertEqual(btn.fontInternalSetNativeCount, 1, `Expected ${btn.id}'s fontInternal.setNative to be called exactly once when inflating from xml.`);
+        TKUnit.assertEqual(btn.nativeBackgroundRedraws, 1, `Expected ${btn.id}'s native background to propagated exactly once when inflating from xml.`);
+    });
+}
+
+export function test_setting_properties_does_not_makes_excessive_calls() {
+    const page = helper.navigateToModule("ui/lifecycle/pages/page-one");
+    const btn1 = page.getViewById<btnCounter.Button>("btn1");
+
+    function assert(count) {
+        TKUnit.assertEqual(btn1.backgroundInternalSetNativeCount, count, "backgroundInternal.setNative");
+        TKUnit.assertEqual(btn1.nativeBackgroundRedraws, count, "_redrawNativeBackground");
+    }
+
+    assert(1);
+
+    btn1.width = 50;
+    btn1.height = 50;
+    btn1.style.borderWidth = "18";
+    helper.waitUntilLayoutReady(btn1);
+
+    assert(2);
+
+    btn1.width = 80;
+    btn1.height = 80;
+    btn1.style.borderWidth = "22";
+    helper.waitUntilLayoutReady(btn1);
+
+    assert(3);
+
+    btn1.style.borderWidth = "26";
+    helper.waitUntilLayoutReady(btn1);
+
+    assert(4);
+}
+
+export function test_setting_one_property_while_suspedned_does_not_call_other_properties_native_setter() {
+    const page = helper.navigateToModule("ui/lifecycle/pages/page-one");
+    const btn1 = page.getViewById<btnCounter.Button>("btn1");
+
+    TKUnit.assertEqual(btn1.backgroundInternalSetNativeCount, 1, "backgroundInternal.setNative at step1");
+    TKUnit.assertEqual(btn1.fontInternalSetNativeCount, 1, "fontInternal.setNative at step1");
+
+    btn1._batchUpdate(() => {
+        // None
+    });
+
+    TKUnit.assertEqual(btn1.backgroundInternalSetNativeCount, 1, "backgroundInternal.setNative at step2");
+    TKUnit.assertEqual(btn1.fontInternalSetNativeCount, 1, "fontInternal.setNative at step2");
+
+    btn1._batchUpdate(() => {
+        btn1.style.borderWidth = "22";
+    });
+
+    TKUnit.assertEqual(btn1.backgroundInternalSetNativeCount, 2, "backgroundInternal.setNative at step3");
+    TKUnit.assertEqual(btn1.fontInternalSetNativeCount, 1, "fontInternal.setNative at step3");
+
+    btn1._batchUpdate(() => {
+        btn1.style.fontSize = 69;
+    });
+
+    TKUnit.assertEqual(btn1.backgroundInternalSetNativeCount, 2, "backgroundInternal.setNative at step4");
+    TKUnit.assertEqual(btn1.fontInternalSetNativeCount, 2, "fontInternal.setNative at step4");
+}
+
+export function test_css_properties_reset_only_once() {
+    const page = helper.navigateToModule("ui/lifecycle/pages/page-one");
+    const btn2 = page.getViewById<btnCounter.Button>("btn2");
+
+    TKUnit.assertEqual(btn2.backgroundInternalSetNativeCount, 1, `Expected ${btn2.id}'s backgroundInternal.setNative to be exactly once when inflating from xml.`);
+    TKUnit.assertEqual(btn2.fontInternalSetNativeCount, 1, `Expected ${btn2.id}'s fontInternal.setNative to be called exactly once when inflating from xml.`);
+    TKUnit.assertEqual(btn2.nativeBackgroundRedraws, 1, `Expected ${btn2.id}'s native background to propagated exactly once when inflating from xml.`);
+
+    page.css = "";
+
+    TKUnit.assertEqual(btn2.backgroundInternalSetNativeCount, 2, `Expected ${btn2.id}'s backgroundInternal.setNative to be exactly once when inflating from xml.`);
+    TKUnit.assertEqual(btn2.fontInternalSetNativeCount, 2, `Expected ${btn2.id}'s fontInternal.setNative to be called exactly once when inflating from xml.`);
+    TKUnit.assertEqual(btn2.nativeBackgroundRedraws, isIOS ? 1 : 2, `Expected ${btn2.id}'s native background to propagated exactly once when inflating from xml.`);
+
+    helper.waitUntilLayoutReady(btn2);
+
+    TKUnit.assertEqual(btn2.backgroundInternalSetNativeCount, 2, `Expected ${btn2.id}'s backgroundInternal.setNative to be exactly once when inflating from xml.`);
+    TKUnit.assertEqual(btn2.fontInternalSetNativeCount, 2, `Expected ${btn2.id}'s fontInternal.setNative to be called exactly once when inflating from xml.`);
+    TKUnit.assertEqual(btn2.nativeBackgroundRedraws, 2, `Expected ${btn2.id}'s native background to propagated exactly once when inflating from xml.`);
+}
+
+export function test_navigating_away_does_not_excessively_reset() {
+    const page = helper.navigateToModule("ui/lifecycle/pages/page-one");
+    const buttons = ["btn1", "btn2", "btn3", "btn4"].map(id => page.getViewById<btnCounter.Button>(id));
+    function assert(count) {
+        buttons.forEach(button => {
+            TKUnit.assertEqual(button.backgroundInternalSetNativeCount, count, `Expecting ${button.id}'s backgroundInternal.setNative call count`);
+            TKUnit.assertEqual(button.fontInternalSetNativeCount, count, `Expecting ${button.id}'s fontInternal.setNative call count`);
+            TKUnit.assertEqual(button.nativeBackgroundRedraws, count, `Expecting ${button.id}'s nativeBackgroundRedraws call count`);
+        })
+    }
+
+    assert(1);
+
+    const page2 = helper.navigateToModule("ui/lifecycle/pages/page-one");
+
+    helper.waitUntilLayoutReady(page2);
+
+    // NOTE: Recycling may mess this up so feel free to change the test,
+    // but ensure a reasonable amount of native setters were called when the views navigate away
+    assert(1);
+}

tests/app/ui/lifecycle/package.json

@@ -0,0 +1,3 @@
+{
+    "main": "lifecycle-tests"
+}

tests/app/ui/lifecycle/pages/button-counter.ts

@@ -0,0 +1,22 @@
+import * as button from "tns-core-modules/ui/button";
+import * as view from "tns-core-modules/ui/core/view";
+
+export class Button extends button.Button {
+    nativeBackgroundRedraws = 0;
+    backgroundInternalSetNativeCount = 0;
+    fontInternalSetNativeCount = 0;
+
+    [view.backgroundInternalProperty.setNative](value) {
+        this.backgroundInternalSetNativeCount++;
+        return super[view.backgroundInternalProperty.setNative](value);
+    }
+    [view.fontInternalProperty.setNative](value) {
+        this.fontInternalSetNativeCount++;
+        return super[view.fontInternalProperty.setNative](value);
+    }
+    _redrawNativeBackground(value: any): void {
+        this.nativeBackgroundRedraws++;
+        super._redrawNativeBackground(value);
+    }
+}
+Button.prototype.recycleNativeView = false;

tests/app/ui/lifecycle/pages/page-one.css

@@ -0,0 +1,7 @@
+#btn2, #btn3, #btn4 {
+    border-width: 2;
+    border-color: teal;
+    border-radius: 20;
+    font-weight: 400;
+    font-size: 32;
+}

tests/app/ui/lifecycle/pages/page-one.xml

@@ -0,0 +1,12 @@
+<Page xmlns:btnCount="ui/lifecycle/pages/button-counter">
+    <StackLayout>
+        <!-- This little piggy has just attributes -->
+        <btnCount:Button id="btn1" borderWidth="1" borderColor="gray" borderRadius="16" fontWeight="bold" fontSize="16" />
+        <!-- This little piggy has just CSS -->
+        <btnCount:Button id="btn2" />
+        <!-- This little piggy has both attributes and CSS -->
+        <btnCount:Button id="btn3" borderWidth="1" borderColor="gray" borderRadius="16" fontWeight="bold" fontSize="16" />
+        <!-- This one has it all -->
+        <btnCount:Button id="btn4" borderRadius="3" style="background-image: url('~/logo.png'); background-position: center; background-repeat: no-repeat; background-size: cover;" />
+    </StackLayout>
+</Page>

tests/app/ui/styling/style-properties-tests.ts

@@ -586,6 +586,10 @@ export function test_setting_font_properties_sets_native_font() {
 
 function test_native_font(style: "normal" | "italic", weight: "100" | "200" | "300" | "normal" | "400" | "500" | "600" | "bold" | "700" | "800" | "900") {
     const testView = new Button();
+
+    const page = helper.getCurrentPage();
+    page.content = testView;
+
     const fontName = "Roboto";
     let fontNameSuffix = "";
 

tests/app/ui/tab-view/tab-view-tests.ts

@@ -306,7 +306,7 @@ export class TabViewTest extends testModule.UITest<tabViewModule.TabView> {
         //console.log(`>>>>>>>>>>>>> CREATE 3 ITEMS`);
         this.testView.items = this._createItems(1);
         this.waitUntilTestElementIsLoaded();
-        
+
         let originalFont = tabViewTestsNative.getNativeFont(this.testView);
         //console.log(`>>>>>>>>>>>>> originalFont: ${fontToString(originalFont)}`);
         let nativeFont: any;

tests/app/ui/text-field/text-field-tests.ts

@@ -449,6 +449,8 @@ export var testNativeBackgroundColorFromCss = function () {
         var page = <pagesModule.Page>views[1];
         page.css = "textfield { background-color: " + expectedBackgroundColorHex + "; }";
 
+        helper.waitUntilLayoutReady(textField);
+
         var actualResult = textFieldTestsNative.getNativeBackgroundColor(textField).hex;
         TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
     });
@@ -459,6 +461,8 @@ export var testNativeBackgroundColorFromLocal = function () {
         var textField = <textFieldModule.TextField>views[0];
         textField.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex);
 
+        helper.waitUntilLayoutReady(textField);
+
         var actualResult = textFieldTestsNative.getNativeBackgroundColor(textField).hex;
         TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
     });

tests/app/ui/text-view/text-view-tests.ts

@@ -427,6 +427,8 @@ export var testNativeBackgroundColorFromCss = function () {
         var page = <pagesModule.Page>views[1];
         page.css = "textview { background-color: " + expectedBackgroundColorHex + "; }";
 
+        helper.waitUntilLayoutReady(textView);
+
         var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex;
         TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
     });
@@ -437,6 +439,8 @@ export var testNativeBackgroundColorFromLocal = function () {
         var textView = <textViewModule.TextView>views[0];
         textView.style.backgroundColor = new colorModule.Color(expectedBackgroundColorHex);
 
+        helper.waitUntilLayoutReady(textView);
+
         var actualResult = textViewTestsNative.getNativeBackgroundColor(textView).hex;
         TKUnit.assert(actualResult === expectedNormalizedBackgroundColorHex, "Actual: " + actualResult + "; Expected: " + expectedNormalizedBackgroundColorHex);
     });

tests/app/ui/view/view-tests-common.ts

@@ -297,7 +297,6 @@ class TestView extends Layout {
 
     public createNativeView() {
         if (isIOS) {
-            this.nativeView = this._nativeView;
             return this._nativeView;
         }
 
@@ -888,6 +887,7 @@ export function testSetInlineStyle() {
 export function testBorderWidth() {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
         const lbl = views[0];
+        helper.waitUntilLayoutReady(lbl);
         const expectedValue = Math.round(<number>lbl.borderWidth * utils.layout.getDisplayDensity());
         const actualValue = definition.getUniformNativeBorderWidth(lbl);
         TKUnit.assertAreClose(actualValue, expectedValue, 0.01, "borderWidth");
@@ -897,7 +897,7 @@ export function testBorderWidth() {
 export function testCornerRadius() {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
         const lbl = views[0];
-        TKUnit.waitUntilReady(() => lbl.isLayoutValid);
+        helper.waitUntilLayoutReady(lbl);
         const expectedValue = Math.round(<number>lbl.borderRadius * utils.layout.getDisplayDensity());
         const actualValue = definition.getUniformNativeCornerRadius(lbl);
         TKUnit.assertAreClose(actualValue, expectedValue, 0.01, "borderRadius");
@@ -907,6 +907,7 @@ export function testCornerRadius() {
 export function testBorderColor() {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
         const lbl = views[0];
+        helper.waitUntilLayoutReady(lbl);
         TKUnit.assertEqual(definition.checkUniformNativeBorderColor(lbl), true, "BorderColor not applied correctly!");
     });
 };
@@ -914,6 +915,7 @@ export function testBorderColor() {
 export function testBackgroundColor() {
     helper.buildUIAndRunTest(_createLabelWithBorder(), function (views: Array<View>) {
         const lbl = views[0];
+        helper.waitUntilLayoutReady(lbl);
         TKUnit.assertEqual(definition.checkNativeBackgroundColor(lbl), true, "BackgroundColor not applied correctly!");
     });
 };
@@ -970,7 +972,7 @@ export function test_getLocationRelativeToOtherView() {
     a1.addChild(a2);
 
     helper.buildUIAndRunTest(a1, function (views: Array<View>) {
-        TKUnit.waitUntilReady(() => a1.isLayoutValid);
+        helper.waitUntilLayoutReady(a1);
 
         const labelInA2 = label.getLocationRelativeTo(a2);
         const labelInA1 = label.getLocationRelativeTo(a1);
@@ -992,7 +994,7 @@ export function test_getActualSize() {
     label.width = 100;
     label.height = 200;
     helper.buildUIAndRunTest(label, function (views: Array<View>) {
-        TKUnit.waitUntilReady(() => label.isLayoutValid);
+        helper.waitUntilLayoutReady(label);
         const actualSize = label.getActualSize();
         TKUnit.assertAreClose(actualSize.width, 100, delta, "actualSize.width");
         TKUnit.assertAreClose(actualSize.height, 200, delta, "actualSize.height");
@@ -1003,6 +1005,6 @@ export function test_background_image_doesnt_throw() {
     var btn = new Button();
     btn.style.backgroundImage = 'https://www.bodybuilding.com/images/2016/june/8-benefits-to-working-out-in-the-morning-header-v2-830x467.jpg';
     helper.buildUIAndRunTest(btn, function (views: Array<View>) {
-        TKUnit.waitUntilReady(() => btn.isLayoutValid);
+        helper.waitUntilLayoutReady(btn);
     });
 }

tests/app/ui/view/view-tests.ios.ts

@@ -10,15 +10,12 @@ import * as utils from "tns-core-modules/utils/utils";
 global.moduleMerge(commonTests, exports);
 
 class MyGrid extends grid.GridLayout {
-    public backgroundSetterCount: number = 0;
+    public backgroundDrawCount: number = 0;
 
-    [view.backgroundInternalProperty.getDefault](): any {
-        return null;
+    _redrawNativeBackground(background: any) {
+        this.backgroundDrawCount++;
+        super._redrawNativeBackground(background);
     }
-    [view.backgroundInternalProperty.setNative](value: any) {
-        this.backgroundSetterCount ++;
-    }
-
 }
 
 export function getUniformNativeBorderWidth(v: view.View): number {
@@ -26,7 +23,7 @@ export function getUniformNativeBorderWidth(v: view.View): number {
 }
 
 export function checkUniformNativeBorderColor(v: view.View): boolean {
-    if (v.borderColor instanceof color.Color){
+    if (v.borderColor instanceof color.Color) {
         return (<UIView>v.ios).layer.borderColor === (<color.Color>v.borderColor).ios.CGColor;
     }
 
@@ -58,12 +55,12 @@ export function testBackgroundInternalChangedOnceOnResize() {
     layout.className = "myClass";
     layout.backgroundColor = new color.Color(255, 255, 0, 0);
 
-    root.css = ".myClass { background-image: url('~/tests/logo.png') }";
+    root.css = ".myClass { background-image: url('~/logo.png') }";
     root.content = layout;
 
     function trackCount() {
-        let result = layout.backgroundSetterCount;
-        layout.backgroundSetterCount = 0;
+        let result = layout.backgroundDrawCount;
+        layout.backgroundDrawCount = 0;
         return result;
     }
 
@@ -87,6 +84,7 @@ export function testBackgroundInternalChangedOnceOnResize() {
 export function test_automation_text_set_to_native() {
     var newButton = new button.Button();
     newButton.automationText = "Button1";
+    helper.getCurrentPage().content = newButton;
     TKUnit.assertEqual((<UIView>newButton.ios).accessibilityIdentifier, "Button1", "accessibilityIdentifier not set to native view.");
     TKUnit.assertEqual((<UIView>newButton.ios).accessibilityLabel, "Button1", "accessibilityIdentifier not set to native view.");
 }