javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

Style perf improvements (#2342)

Browse Source 
* Add css-perf app.

* Style properties now check only properties that are set.
Image utils module required on top (instead of in onMeasure) to improve performance.
Remove try/catch block when Style applies native property.

* fix tslint

* Fix broken merge
Update package.json version

* Failed miserably - if the try/catch around applyProperty method is removed - TextField fails big time.
TextField needs some good refactoring as well as calls to _updateTextDecoration & _updateTextTransform
utils - setTextTransform & setTextDecoration should be split, typing support should be added.
This commit is contained in:
Hristo Hristov
2016-07-08 14:39:43 +03:00
committed by GitHub
parent 81dc102031
commit 8d40782191
21 changed files with 611 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/App_Resources/Android/AndroidManifest.xml Normal file
View File

@@ -0,0 +1,40 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="__PACKAGE__"
android:versionCode="1"
android:versionName="1.0">
<supports-screens
android:smallScreens="true"
android:normalScreens="true"
android:largeScreens="true"
android:xlargeScreens="true"/>
<uses-sdk
android:minSdkVersion="17"
android:targetSdkVersion="__APILEVEL__"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:name="com.tns.NativeScriptApplication"
android:allowBackup="true"
android:icon="@drawable/icon"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.tns.NativeScriptActivity"
android:label="@string/title_activity_kimera"
android:configChanges="keyboardHidden|orientation|screenSize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.tns.ErrorReportActivity"/>
</application>
</manifest>

66
apps/App_Resources/iOS/Info.plist Normal file
View File

@@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
<string>${PRODUCT_NAME}</string>
<key>CFBundleExecutable</key>
<string>${EXECUTABLE_NAME}</string>
<key>CFBundleIconFile</key>
<string>icon.png</string>
<key>CFBundleIcons</key>
<dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>icon-40</string>
<string>icon-60</string>
<string>icon-72</string>
<string>icon-76</string>
<string>Icon-Small</string>
<string>Icon-Small-50</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>${PRODUCT_NAME}</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIRequiresFullScreen</key>
<true/>
<key>UIRequiredDeviceCapabilities</key>
<array>
<string>armv7</string>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
</dict>
</plist>

12
apps/css-perf-test/app.ts Normal file
View File

@@ -0,0 +1,12 @@
import application = require("application");
global.time = function(): number {
if (global.android) {
return java.lang.System.nanoTime() / 1000000; // 1 ms = 1000000 ns
}
else {
return CACurrentMediaTime() * 1000;
}
}
application.start({ moduleName: "css-perf-test/root" });

29
apps/css-perf-test/main-page.css Normal file
View File

@@ -0,0 +1,29 @@
.title {
font-size: 20;
margin: 3;
}
.author {
font-size: 14;
horizontal-align: left;
vertical-align: bottom;
margin: 3;
}
.comments {
color: #10C2B0;
font-size: 14;
vertical-align: bottom;
margin: 3;
}
.thumbnail {
width: 72;
height: 72;
margin: 3;
vertical-align: top;
}
TabView {
background-color: white;
}

7
apps/css-perf-test/main-page.ts Normal file
View File

@@ -0,0 +1,7 @@
import {EventData as ObservableEventData} from "data/observable";
export function navigatedTo(args: ObservableEventData) {
setTimeout(() => {
console.log(`Time: ${global.time() - global.startTime} ms`);
});
}

307
apps/css-perf-test/main-page.xml Normal file
View File

@@ -0,0 +1,307 @@
<Page
xmlns="http://schemas.nativescript.org/tns.xsd" navigatedTo="navigatedTo">
<ScrollView>
<StackLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
</StackLayout>
</ScrollView>
</Page>

29
apps/css-perf-test/main-page2.css Normal file
View File

@@ -0,0 +1,29 @@
.title {
font-size: 20;
margin: 3;
}
.author {
font-size: 14;
horizontal-align: left;
vertical-align: bottom;
margin: 3;
}
.comments {
color: #10C2B0;
font-size: 14;
vertical-align: bottom;
margin: 3;
}
.thumbnail {
width: 72;
height: 72;
margin: 3;
vertical-align: top;
}
TabView {
background-color: white;
}

BIN
apps/css-perf-test/res/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

7
apps/css-perf-test/root.ts Normal file
View File

@@ -0,0 +1,7 @@
import {Page} from "ui/page";
export function onTap(args: any) {
global.startTime = global.time();
let page = <Page>args.object.page;
page.frame.navigate("css-perf-test/main-page");
}

3
apps/css-perf-test/root.xml Normal file
View File

@@ -0,0 +1,3 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Button text="Start test" tap="onTap" />
</Page>

7
apps/package.json Normal file
View File

@@ -0,0 +1,7 @@
{ "name" : "Apps",
"main" : "css-perf-test/app.js",
"android": {
"v8Flags":"--expose_gc",
"profilerOutputDir": "/sdcard"
}
}

10
tests/app/ui/helper.ts
View File

@@ -138,6 +138,16 @@ export function getCurrentPage(): page.Page {
return frame.topmost().currentPage;
}
export function getClearCurrentPage(): page.Page {
let page = frame.topmost().currentPage;
page.style._resetValue(styling.properties.backgroundColorProperty);
page.style._resetValue(styling.properties.colorProperty);
page._resetValue(button.Button.bindingContextProperty);
page._resetValue(button.Button.cssClassProperty);
page._resetValue(button.Button.idProperty);
return page;
}
export function waitUntilNavigatedFrom(oldPage: page.Page) {
TKUnit.waitUntilReady(() => getCurrentPage() && getCurrentPage() !== oldPage);
}

28
tests/app/ui/styling/style-tests.ts
View File

@@ -143,8 +143,9 @@ export function test_setting_css() {
// Basic selector tests
export function test_type_selector() {
let page = helper.getCurrentPage();
page.color = null;
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn: buttonModule.Button;
let label: labelModule.Label;
@@ -169,8 +170,7 @@ export function test_type_selector() {
}
export function test_class_selector() {
let page = helper.getCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let page = helper.getClearCurrentPage();
let btnWithClass: buttonModule.Button;
let btnWithNoClass: buttonModule.Button;
@@ -195,7 +195,7 @@ export function test_class_selector() {
}
export function test_multiple_class_selector() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
let btnWithClasses: buttonModule.Button;
page.css = ".style1 { color: red; } .style2 { background-color: blue } ";
@@ -213,7 +213,7 @@ export function test_multiple_class_selector() {
}
export function test_id_selector() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btnWithId: buttonModule.Button;
let btnWithNoId: buttonModule.Button;
@@ -240,7 +240,7 @@ export function test_id_selector() {
// State selector tests
export function test_state_selector() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn: buttonModule.Button;
var testStack = new stackModule.StackLayout();
@@ -255,7 +255,7 @@ export function test_state_selector() {
}
export function test_type_and_state_selector() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
var btn: buttonModule.Button;
@@ -273,7 +273,7 @@ export function test_type_and_state_selector() {
}
export function test_class_and_state_selector() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn = new buttonModule.Button();
@@ -288,7 +288,7 @@ export function test_class_and_state_selector() {
}
export function test_class_and_state_selector_with_multiple_classes() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn = new buttonModule.Button();
@@ -304,7 +304,7 @@ export function test_class_and_state_selector_with_multiple_classes() {
}
export function test_id_and_state_selector() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn = new buttonModule.Button();
@@ -320,7 +320,7 @@ export function test_id_and_state_selector() {
}
export function test_restore_original_values_when_state_is_changed() {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn = new buttonModule.Button();
@@ -398,7 +398,7 @@ export var test_composite_selector_type_class_state = function () {
}
export var test_style_is_applied_when_control_is_added_after_load = function () {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
let btn = new buttonModule.Button();
let testStack = new stackModule.StackLayout();
page.content = testStack;
@@ -569,7 +569,7 @@ export function test_selector_priorities_6() {
}
function testSelectorsPrioritiesTemplate(css: string) {
let page = helper.getCurrentPage();
let page = helper.getClearCurrentPage();
page.style._resetValue(styling.properties.colorProperty);
let btn: buttonModule.Button;
let btnWithClass: buttonModule.Button;

6
tests/package.json
View File

@@ -6,10 +6,10 @@
"nativescript": {
"id": "org.nativescript.tests",
"tns-ios": {
"version": "2.0.0"
"version": "2.1.0"
},
"tns-android": {
"version": "2.0.0"
"version": "2.1.1"
}
},
"dependencies": {
@@ -22,4 +22,4 @@
"filewalker": "0.1.2",
"lazy": "1.0.11"
}
}
}

1
tns-core-modules/ui/core/dependency-observable.d.ts vendored
View File

@@ -244,6 +244,7 @@ declare module "ui/core/dependency-observable" {
* Iterates all the properties which have a PropertyEntry registered for this instance.
*/
_eachSetProperty(callback: (property: Property) => boolean): void;
_eachSetPropertyValue(callback: (property: Property, value: any) => void): void;
//@endprivate
}

10
tns-core-modules/ui/core/dependency-observable.ts
View File

@@ -303,13 +303,21 @@ export class DependencyObservable extends Observable implements definition.Depen
public _eachSetProperty(callback: (property: Property) => boolean) {
for (let i = 0, keys = Object.keys(this._propertyEntries); i < keys.length; i++) {
let key = keys[i];
let entry = this._propertyEntries[key];
let entry: PropertyEntry = this._propertyEntries[key];
if (!callback(entry.property)) {
break;
}
}
}
public _eachSetPropertyValue(callback: (property: Property, value: any) => void): void {
for (let i = 0, keys = Object.keys(this._propertyEntries); i < keys.length; i++) {
let key = keys[i];
let entry: PropertyEntry = this._propertyEntries[key];
callback(entry.property, entry.effectiveValue);
}
}
public toString(): string {
return this.typeName;
}

5
tns-core-modules/ui/core/view-common.ts
View File

@@ -974,10 +974,8 @@ export class View extends ProxyObject implements definition.View {
public _addViewCore(view: View, atIndex?: number) {
this._propagateInheritableProperties(view);
view.style._inheritStyleProperties();
if (!view._isAddedToNativeVisualTree) {
var nativeIndex = this._childIndexToNativeChildIndex(atIndex);
let nativeIndex = this._childIndexToNativeChildIndex(atIndex);
view._isAddedToNativeVisualTree = this._addViewToNativeVisualTree(view, nativeIndex);
}
@@ -989,6 +987,7 @@ export class View extends ProxyObject implements definition.View {
public _propagateInheritableProperties(view: View) {
view._inheritProperties(this);
view.style._inheritStyleProperties(this);
}
public _inheritProperties(parentView: View) {

2
tns-core-modules/ui/image/image.ios.ts
View File

@@ -1,4 +1,4 @@
import imageCommon = require("./image-common");
import imageCommon = require("./image-common");
import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import enums = require("ui/enums");

4
tns-core-modules/ui/styling/style.d.ts vendored
View File

@@ -87,8 +87,8 @@ declare module "ui/styling/style" {
public _endUpdate();
public _resetCssValues(): void;
public _syncNativeProperties(): void;
public _inheritStyleProperty(property: Property): void;
public _inheritStyleProperties(): void;
// public _inheritStyleProperty(property: Property): void;
public _inheritStyleProperties(parent: View): void;
public _boundsChanged(): void;
public _updateTextDecoration(): void;
public _updateTextTransform(): void;

132
tns-core-modules/ui/styling/style.ts
View File

@@ -1,4 +1,4 @@
import application = require("application");
import application = require("application");
import styling = require("ui/styling");
import types = require("utils/types");
import trace = require("trace");
@@ -351,7 +351,7 @@ function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
}
function onBorderWidthPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid){
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderWidth) {
@@ -361,7 +361,7 @@ function onBorderWidthPropertyChanged(data: PropertyChangeData) {
}
function onBorderColorPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid){
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderColor) {
@@ -371,7 +371,7 @@ function onBorderColorPropertyChanged(data: PropertyChangeData) {
}
function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid){
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.borderRadius) {
@@ -381,7 +381,7 @@ function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
}
function onClipPathPropertyChanged(data: PropertyChangeData) {
if (platform.isAndroid){
if (platform.isAndroid) {
var style = <Style>data.object;
var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
if (data.newValue !== currentBackground.clipPath) {
@@ -445,7 +445,7 @@ function isNonNegativeFiniteNumber(value: number): boolean {
var supportedPaths = ["rect", "circle", "ellipse", "polygon"];
function isClipPathValid(value: string): boolean {
if (!value){
if (!value) {
return true;
}
var functionName = value.substring(0, value.indexOf("(")).trim();
@@ -543,19 +543,19 @@ export class Style extends DependencyObservable implements styling.Style {
set rotate(value: number) {
this._setValue(rotateProperty, value);
}
get scaleX(): number {
return this._getValue(scaleXProperty);
}
set scaleX(value: number) {
this._setValue(scaleXProperty, value);
}
get scaleY(): number {
return this._getValue(scaleYProperty);
}
set scaleY(value: number) {
this._setValue(scaleYProperty, value);
}
@@ -563,7 +563,7 @@ export class Style extends DependencyObservable implements styling.Style {
get translateX(): number {
return this._getValue(translateXProperty);
}
set translateX(value: number) {
this._setValue(translateXProperty, value);
}
@@ -571,11 +571,11 @@ export class Style extends DependencyObservable implements styling.Style {
get translateY(): number {
return this._getValue(translateYProperty);
}
set translateY(value: number) {
this._setValue(translateYProperty, value);
}
get color(): Color {
return this._getValue(colorProperty);
}
@@ -645,7 +645,7 @@ export class Style extends DependencyObservable implements styling.Style {
set clipPath(value: string) {
this._setValue(clipPathProperty, value);
}
get fontSize(): number {
return this._getValue(fontSizeProperty);
}
@@ -841,20 +841,20 @@ export class Style extends DependencyObservable implements styling.Style {
set whiteSpace(value: string) {
this._setValue(whiteSpaceProperty, value);
}
get letterSpacing(): number {
return this._getValue(letterSpacingProperty);
}
set letterSpacing(value: number) {
this._setValue(letterSpacingProperty, value);
}
get zIndex(): number {
return this._getValue(zIndexProperty);
}
set zIndex(value: number) {
this._setValue(zIndexProperty, value);
}
}
public _updateTextDecoration() {
if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
@@ -905,6 +905,27 @@ export class Style extends DependencyObservable implements styling.Style {
});
}
public _inheritStyleProperties(parent: View) {
parent.style._eachSetPropertyValue((property, value) => {
if (property.inheritable) {
// this._inheritStyleProperty(property, value);
this._setValue(property, value, ValueSource.Inherited);
}
return true;
});
}
// public _inheritStyleProperty(property: Property, value: any) {
// // let currentParent = this._view.parent;
// // if (currentParent) {
// // let valueSource = currentParent.style._getValueSource(property);
// // if (valueSource > ValueSource.Default) {
// this._setValue(property, value, ValueSource.Inherited);
// // }
// // }
// }
public _onPropertyChanged(property: Property, oldValue: any, newValue: any) {
if (trace.enabled) {
trace.write(
@@ -921,43 +942,36 @@ export class Style extends DependencyObservable implements styling.Style {
this._applyProperty(property, newValue);
}
public _syncNativeProperties() {
var that = this;
// loop all style properties and call the _applyProperty method
// TODO: Potential performance bottle-neck
styleProperty.eachProperty(function (p: styleProperty.Property) {
var value = that._getValue(p);
var valueSource = that._getValueSource(p);
if (valueSource !== ValueSource.Default && types.isDefined(value)) {
that._applyProperty(p, value);
}
});
}
public _sizeChanged() {
if (!(<background.Background>this._getValue(backgroundInternalProperty)).isEmpty()) {
this._applyProperty(backgroundInternalProperty, this._getValue(backgroundInternalProperty));
this._applyStyleProperty(backgroundInternalProperty, this._getValue(backgroundInternalProperty));
}
var clipPathPropertyValue = this._getValue(clipPathProperty);
if (types.isString(clipPathPropertyValue) && clipPathPropertyValue !== "") {
this._applyProperty(clipPathProperty, clipPathPropertyValue);
this._applyStyleProperty(clipPathProperty, clipPathPropertyValue);
}
}
public _syncNativeProperties() {
this._eachSetPropertyValue((property, value) => {
this._applyStyleProperty(property, value);
return true;
});
}
private _applyProperty(property: Property, newValue: any) {
this._applyStyleProperty(property, newValue);
// The effective value of an inheritable property has changed
// propagate the change down to the descendants to update their inherited properties.
if (this._view._childrenCount === 0 || !property.inheritable) {
return;
if (property.inheritable && this._view._childrenCount > 0) {
this._view._eachChildView((child: View) => {
// child.style._inheritStyleProperty(property);
child.style._setValue(property, newValue, ValueSource.Inherited);
return true;
});
}
this._view._eachChildView((child: View) => {
child.style._inheritStyleProperty(property);
return true;
});
}
private _applyStyleProperty(property: Property, newValue: any) {
@@ -972,7 +986,6 @@ export class Style extends DependencyObservable implements styling.Style {
try {
let handler: definition.StylePropertyChangedHandler = getHandler(property, this._view);
if (!handler) {
if (trace.enabled) {
trace.write("No handler for property: " + property.name + " with id: " + property.id + ", view:" + this._view, trace.categories.Style);
@@ -1007,31 +1020,6 @@ export class Style extends DependencyObservable implements styling.Style {
}
}
public _inheritStyleProperty(property: Property) {
if (!property.inheritable) {
throw new Error("An attempt was made to inherit a style property which is not marked as 'inheritable'.");
}
let currentParent = this._view.parent;
let valueSource: number;
while (currentParent) {
valueSource = currentParent.style._getValueSource(property);
if (valueSource > ValueSource.Default) {
this._setValue(property, currentParent.style._getValue(property), ValueSource.Inherited);
break;
}
currentParent = currentParent.parent;
}
}
public _inheritStyleProperties() {
styleProperty.eachInheritableProperty((p) => {
this._inheritStyleProperty(p);
});
}
get _nativeView(): any {
return this._view._nativeView;
}
@@ -1113,9 +1101,9 @@ export var borderColorProperty = new styleProperty.Property("borderColor", "bord
export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));
export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
@@ -1158,12 +1146,12 @@ export var textTransformProperty = new styleProperty.Property("textTransform", "
export var whiteSpaceProperty = new styleProperty.Property("whiteSpace", "white-space",
new PropertyMetadata(undefined, AffectsLayout, undefined, isWhiteSpaceValid), converters.whiteSpaceConverter);
export var letterSpacingProperty = new styleProperty.Property("letterSpacing", "letter-spacing",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
export var zIndexProperty = new styleProperty.Property("zIndex", "z-index",
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
new PropertyMetadata(Number.NaN, AffectsLayout, undefined, isFloatValueValid), converters.floatConverter);
// Helper property holding most layout related properties available in CSS.
// When layout related properties are set in CSS we chache them and send them to the native view in a single call.
@@ -1399,4 +1387,4 @@ export var ignorePropertyHandler = new StylePropertyChangedHandler(
// empty
});
registerNoStylingClass("Frame");
registerNoStylingClass("Frame");

5
tns-core-modules/ui/styling/styling.d.ts vendored
View File

@@ -2,7 +2,6 @@
import observable = require("ui/core/dependency-observable");
import color = require("color");
import view = require("ui/core/view");
import dependencyObservable = require("ui/core/dependency-observable");
/**
* Represents an observable property which can have its value set form CSS style.
@@ -218,8 +217,8 @@
public _endUpdate();
public _resetCssValues(): void;
public _syncNativeProperties(): void;
public _inheritStyleProperty(property: dependencyObservable.Property): void;
public _inheritStyleProperties(): void;
// public _inheritStyleProperty(property: dependencyObservable.Property): void;
public _inheritStyleProperties(parent: view.View): void;
public _updateTextDecoration(): void;
public _updateTextTransform(): void;
//@endprivate