Add performance tests measuring FlexboxLayout versus StackLayout and GridLayout

apps/app/ui-tests-app/flexbox/flexbox-main-page.ts

@@ -11,6 +11,7 @@ export function pageLoaded(args: EventData) {
 
     examples.set("flexboxall", "flexbox/flexbox");
     examples.set("flexrepeat", "flexbox/flexbox-repeater");
+    examples.set("flex-perf", "flexbox/flexbox-perf-comparison");
 
     let viewModel = new FlexboxMainPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

apps/app/ui-tests-app/flexbox/flexbox-perf-comparison.ts

@@ -0,0 +1,64 @@
+import {TabView} from "ui/tab-view";
+import * as utils from "utils/utils";
+
+const titles = ["Etiam lacinia", "Imperdiet ante", "A interdum", "Quisque tempus", "Sodales viverra"];
+const bodies = [
+    "Vivamus ipsum neque, commodo rutrum finibus sit amet, cursus id sapien.",
+    "Duis et iaculis odio. Class aptent taciti.",
+    "Sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.",
+    "Etiam vitae lacinia purus. Vestibulum laoreet nibh a porta aliquet.",
+    "Vivamus ut eros vitae felis volutpat aliquet.",
+    "Aliquam fermentum mauris consequat hendrerit elementum.",
+    "Nam odio tortor, malesuada congue diam volutpat, placerat ullamcorper risus.",
+    "Curabitur eget nunc viverra justo bibendum rutrum ut nec lectus.",
+    "Pellentesque et lacus vel turpis suscipit posuere sed non sapien.",
+    "Integer eget ornare nunc. In lacinia congue sollicitudin.",
+    "Quisque lobortis quam in risus porttitor, ac laoreet lacus auctor."
+];
+
+const items = [];
+for (var i = 0; i < 64; i++) {
+    items.push({
+        icon: "~/ui-tests-app/flexbox/icons/icon" + (1 + (i % 3)) + ".jpg",
+        title: titles[i % titles.length],
+        body: bodies[i % bodies.length],
+        up: (i * 991) % 100,
+        down: (i * 997) % 100
+    });
+}
+
+export function selectionChanged(args) {
+    clear(args);
+}
+
+let repeaterIds = ["repeaterFlexGrid", "repeaterGrid", "repeaterFlexStack", "repeaterStack"];
+
+export function clear(args) {
+    repeaterIds
+        .map(name => args.object.page.getViewById(name))
+        .forEach(repeater => {
+            repeater.bindingContext = null;
+        });
+
+    args.object.page.getViewById("title").text = "---";
+
+    utils.GC();
+}
+
+export function generate(args) {
+    let tab: TabView = args.object.page.getViewById("tabview");
+    let index = tab.selectedIndex;
+
+    let repeater = args.object.page.getViewById(repeaterIds[index]);
+
+    clear(args);
+    setTimeout(() => {
+        let start = Date.now();
+        repeater.bindingContext = items;
+        setTimeout(() => {
+            let end = Date.now();
+            args.object.page.getViewById("title").text = (end - start).toString();
+            console.log("Duration: " + (end - start));
+        });
+    });
+}

apps/app/ui-tests-app/flexbox/flexbox-perf-comparison.xml

@@ -0,0 +1,86 @@
+<Page>
+    <ActionBar id="actionbar">
+        <Label id="title" text="---" />
+        <ActionItem ios.systemIcon="17" android.systemIcon="ic_menu_play_clip" tap="generate" ios.position="right" />
+    </ActionBar>
+    <TabView id="tabview" selectedIndexChanged="selectionChanged">
+        <TabView.items>
+            <TabViewItem title="flex-grid">
+                <TabViewItem.view>
+                    <ScrollView style="flex: 1 0; height: 0;">
+                        <Repeater id="repeaterFlexGrid" items="{{ $value }}">
+                            <Repeater.itemTemplate>
+                                <FlexboxLayout style="flex-flow: row wrap; align-items: center; border-width: 0 0 1 0; border-color: #EEEEEE">
+                                    <Image src="{{ icon }}" style="flex: 0 1; margin: 6 4 4 4; border-width: 1; border-color: gray; border-radius: 16; width: 32; height: 32;" />
+                                    <Label text="{{ title }}" style="flex: 1 0; width: 0; margin: 1 4 0 0;" />
+                                    <Label text="{{ body }}" textWrap="true" style="width: 100%; margin: 4 4 6 4; font-size: 11;" />
+                                    <Image src="~/ui-tests-app/flexbox/icons/thumbsdown.png" style="width: 18; height: 18; margin: 4;" />
+                                    <Label text="{{ up }}" style="flex: 1 0; width: 0; font-size: 13;" />
+                                    <Image src="~/ui-tests-app/flexbox/icons/thumbsup.png" style="width: 18; height: 18; margin: 4;" />
+                                    <Label text="{{ down }}" style="flex: 1 0; width: 0; font-size: 13;" />
+                                </FlexboxLayout>
+                            </Repeater.itemTemplate>
+                        </Repeater>
+                    </ScrollView>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem title="grid">
+                <TabViewItem.view>
+                    <ScrollView>
+                        <Repeater id="repeaterGrid" items="{{ $value }}">
+                            <Repeater.itemTemplate>
+                                <GridLayout columns="*, *" rows="auto, auto, auto" borderWidth="0 0 1 0" borderColor="#EEEEEE">
+                                    <Image src="{{ icon }}" colSpan="2" horizontalAlignment="left" width="32" height="32" margin="6 4 4 4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
+                                    <Label text="{{ title }}" colSpan="2" margin="4 4 0 41" verticalAlignment="center" />
+                                    <Label text="{{ body }}" colSpan="2" row="1" textWrap="true" margin="4 4 6 4" fontSize="11" />
+                                    <Image src="~/thumbsdown.png" row="2" width="18" height="18" margin="4" horizontalAlignment="left" />
+                                    <Label text="{{ up }}" row="2" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
+                                    <Image src="~/thumbsup.png" row="2" col="1" width="18" height="18" margin="4" horizontalAlignment="left" />
+                                    <Label text="{{ down }}" row="2" col="1" fontSize="13" margin="0 0 0 26" verticalAlignment="center" />
+                                </GridLayout>
+                            </Repeater.itemTemplate>
+                        </Repeater>
+                    </ScrollView>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem title="flex-stack">
+                <TabViewItem.view>
+                    <ScrollView style="flex: 1 0; height: 0;">
+                        <Repeater id="repeaterFlexStack" items="{{ $value }}">
+                            <Repeater.itemTemplate>
+                                <FlexboxLayout flexDirection="column">
+                                    <Image src="{{ icon }}" alignSelf="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
+                                    <Label text="{{ title }}" margin="4" />
+                                    <Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
+                                    <Image src="~/thumbsdown.png" width="18" height="18" margin="4" />
+                                    <Label text="{{ up }}" fontSize="13" alignSelf="center" />
+                                    <Image src="~/thumbsup.png" width="18" height="18" margin="4" />
+                                    <Label text="{{ down }}" fontSize="13" alignSelf="center" />
+                                </FlexboxLayout>
+                            </Repeater.itemTemplate>
+                        </Repeater>
+                    </ScrollView>
+                </TabViewItem.view>
+            </TabViewItem>
+            <TabViewItem title="stack">
+                <TabViewItem.view>
+                    <ScrollView style="flex: 1 0; height: 0;">
+                        <Repeater id="repeaterStack" items="{{ $value }}">
+                            <Repeater.itemTemplate>
+                                <StackLayout>
+                                    <Image src="{{ icon }}" horizontalAlignment="center" width="32" height="32" margin="4" borderWidth="1" borderRadius="16" borderColor="16" borderColor="gray" />
+                                    <Label text="{{ title }}" margin="4" />
+                                    <Label text="{{ body }}" textWrap="true" margin="4" fontSize="11" />
+                                    <Image src="~/thumbsdown.png" width="18" height="18" margin="4" />
+                                    <Label text="{{ up }}" fontSize="13" horizontalAlignment="center" />
+                                    <Image src="~/thumbsup.png" width="18" height="18" margin="4" />
+                                    <Label text="{{ down }}" fontSize="13" horizontalAlignment="center" />
+                                </StackLayout>
+                            </Repeater.itemTemplate>
+                        </Repeater>
+                    </ScrollView>
+                </TabViewItem.view>
+            </TabViewItem>
+        </TabView.items>
+    </TabView>
+</Page>