Merge remote-tracking branch 'origin/master' into svetoslavtsenov/merge-release-in-master-patch

.gitignore

@@ -1,6 +1,7 @@
 # Folders
 dist
 hooks
+ios-typings-prj
 libs
 node_modules
 package
@@ -45,7 +46,6 @@ tsconfig.tns.json
 *.map
 *.tgz
 .baseDir.ts
-.sublime-grunt.cache
 tscommand*.tmp.txt
 .tscache
 
@@ -54,7 +54,6 @@ tscommand*.tmp.txt
 # https://github.com/NativeScript/nativescript-dev-webpack/issues/932
 !tns-core-modules/xml/xml.js
 !tests/hooks/**/*.*
-!gruntfile.js
 !js-libs/**/*.*
 !css/**/*.*
 !css-value/**/*.*

.travis.yml

@@ -1,5 +1,13 @@
+language: node_js
+node_js:
+  - "node"
 script:
-- cd tns-core-modules && npm i && cd ..
+# circular references check
+- cd tests && npm i
+- node_modules/.bin/webpack --env.android
+- node_modules/.bin/webpack --env.ios
+# modules transpilation
+- cd ../tns-core-modules && npm i && cd ..
 - npm install
 - npm run tsc
 - npm run tslint

CONTRIBUTING.md

@@ -124,7 +124,7 @@ If the commit reverts a previous commit, it should begin with `revert: `, follow
 ### Type
 Must be one of the following:
 
-* **build**: Changes that affect the build system or external dependencies (example scopes: npm, grunt)
+* **build**: Changes that affect the build system or external dependencies (example scopes: npm)
 * **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Jenkins)
 * **docs**: Documentation only changes
 * **feat**: A new feature

DevelopmentWorkflow.md

@@ -4,11 +4,12 @@ Development Workflow
 ## Project Structure
 
 The repository contains several packages and apps:
- - `tns-core-modules` - The core NativeScript TypeScript modules used to develop NativeScript apps.
- - `apps` - UI app used for manual testing and automation.
- - `e2e` - applications and *e2e* tests.
- - `tests` - Unit tests app for the `tns-core-modules`.
- - `tns-platform-declarations` - TypeScript definitions for Android and iOS native APIs.
+ - `tns-core-modules` - The core NativeScript TypeScript modules used to develop NativeScript apps
+ - `tns-core-modules-widgets` - The native widgets (Java and Objective-C) used by the core NativeScript modules
+ - `e2e/ui-tests-app` - UI app used for manual testing and automation
+ - `e2e` - applications and *e2e* tests
+ - `tests` - Unit tests app for the `tns-core-modules`
+ - `tns-platform-declarations` - TypeScript definitions for Android and iOS native APIs
 
 Working with the repo is organized with npm scripts,
 go and read through the `scripts` section in the [package.json](./package.json).
@@ -16,7 +17,7 @@ go and read through the `scripts` section in the [package.json](./package.json).
 Managing dependencies:
  - `tns-core-modules` depends on:
     - `tns-platform-declarations`
- - `apps` depends on:
+ - `e2e/ui-tests-app` depends on:
     - `tns-platform-declarations`
     - `tns-core-modules`
  - `e2e` depends on:
@@ -26,88 +27,66 @@ Managing dependencies:
     - `tns-core-modules`
 
 > NOTE: `tns-core-modules` depends on `tns-core-modules-widgets`,
-this dependency contains native code and is rarely modified so for now it remains outside this repo.
 
 ## Initial Setup
 
 Clone (or fork/clone) the repo:
 
-```bash
+``` bash
 git clone https://github.com/NativeScript/NativeScript.git
 ```
 
-Install devDependencies:
+Install dependencies:
 
-```bash
+``` bash
 npm install
 ```
 
-<!---
-## TypeScript
-
-The following commands are commonly used to compile the `tns-core-modules`:
-```bash
-# Full tsc with type checking ~22.2s.
-tsc
-
-# Fast tsc ~11.2s.
-tsc --skipLibCheck
-
-# Fast watcher, ~4s. on save
-tsc --skipLibCheck -w
-```
-
-NOTE: transpile `tns-core-modules` only.
-
-The modules have `typescript` as a devDependency so you should also be able to use the locally installed TypeScript compiler from node_modules:
-
-```bash
-./node_modules/.bin/tsc
-```
-
-You can compile the TypeScript files in the `tns-core-modules` and `tns-platform-declarations` at once at the root of the repo:
-
-```bash
-npm run tsc
-```
---->
-
 ## Running Unit Tests
 
-```
-cd ./tests
-tns run android| ios
+``` bash
+cd tests
+tns run android | ios
 ```
 
-## Running the Test App
+## Running the UI Test App
 
-The test app is an ordinary NativeScript app that logs the test results as it go.
+The UI test app is an ordinary NativeScript app that logs the test results on the go.
 After the [initial setup](#initial-setup) you can run the tests with:
 
-```
-# Make sure TypeScript is transpiled
-tsc
+``` bash
+cd e2e/ui-tests-app
+
+# Run the Android app
+tns platform add android@next # NOTE: do not commit this change to package.json
+tns run android
+
+# Run the iOS app
+tns platform add ios@next # NOTE: do not commit this change to package.json
+tns run ios
 
-# Run the app
-tns run ios --path apps
-tns run android --path apps
 ```
 
 ## Running Another App
 
-The [initial setup](#initial-setup) will `npm-link` the `tns-core-modules` globally. You can use it in any local project:
-
+1. Open the app, where you will use the module from the repository in the console.
+2. Add the `tns-core-modules` in the application via:
+```bash
+npm install --save <path to tns-core-modules>
+# Example: npm install --save ../NativeScript/tns-core-modules
+```
+3. Run the app
 ```bash
-# Run once: Link tns-core-modules in your project
-npm link tns-core-modules
-
-# Run the app
 tns run ios
 tns run android
 ```
 
-> Note: You still have to rebuild the TypeScript if you have made changes in the code of the core-modules.
+---
+**NOTE**
 
+Linking `tns-core-modules` in Angular app does not work at the moment. Check [#7905](https://github.com/NativeScript/NativeScript/issues/7905) for more details on the issue.
+
+---
 
 ## Platform declarations
 To update the platform declarations (the ios.d.ts-es) you can run:

README.md

@@ -4,7 +4,7 @@
 
 [NativeScript](http://www.nativescript.org) is a framework for building native iOS and Android apps using JavaScript and CSS. NativeScript renders UIs with the native platform’s rendering engine, no [WebViews](http://developer.telerik.com/featured/what-is-a-webview/), resulting in native-like performance and UX.
 
-NativeScript provides a best-of-both-worlds development experience. Our cross-platform JavaScript modules give you the convenience of writing iOS and Android apps from a single JavaScript codebase, while our runtimes give you the power of accessing native APIs, SDKs, and frameworks when you need them—all without needing to open Xcode or Android Studio. NativeScript was created and is supported by [Telerik](http://www.telerik.com/).
+NativeScript provides a best-of-both-worlds development experience. Our cross-platform JavaScript modules give you the convenience of writing iOS and Android apps from a single JavaScript codebase, while our runtimes give you the power of accessing native APIs, SDKs, and frameworks when you need all of them without having to open Xcode or Android Studio. NativeScript was created and is supported by [Telerik](http://www.telerik.com/).
 
 Check out the links below to get started:
 
@@ -54,16 +54,16 @@ Below is a common NativeScript architecture diagram. In more detail, read the [H
 The NativeScript framework consists of a number of components, all of which are open source and on GitHub. Here are the major ones:
 
 - **[Cross-platform modules](//github.com/NativeScript/NativeScript/)**
-    [![npm](https://img.shields.io/npm/dm/tns-core-modules.svg)](https://www.npmjs.com/package/tns-core-modules) [![Waffle.io - NativeScript Modules and Angular](https://badge.waffle.io/NativeScript/NativeScript.svg?columns=In%20Progress)](https://waffle.io/NativeScript/NativeScript)
+    [![npm](https://img.shields.io/npm/dm/tns-core-modules.svg)](https://www.npmjs.com/package/tns-core-modules) 
     - This repo contains the [NativeScript cross-platform modules](http://docs.nativescript.org/core-concepts/modules), which abstract iOS and Android APIs into JavaScript APIs—e.g. `camera.takePicture()`. The modules are written in TypeScript.
 - **[iOS runtime](//github.com/NativeScript/ios-runtime/)**
-    [![npm](https://img.shields.io/npm/dm/tns-ios.svg)](https://www.npmjs.com/package/tns-ios) [![Waffle.io - NativeScript iOS Runtime](https://badge.waffle.io/NativeScript/ios-runtime.svg?columns=In%20Progress)](https://waffle.io/NativeScript/ios-runtime)
+    [![npm](https://img.shields.io/npm/dm/tns-ios.svg)](https://www.npmjs.com/package/tns-ios) 
     - This repo contains the NativeScript iOS runtime—the code that hosts NativeScript iOS apps, and allows JavaScript code to be executed on iOS devices. The iOS runtime is written in a fun mix of C++, Objective-C, and more.
 - **[Android runtime](//github.com/NativeScript/android-runtime)**
-    [![npm](https://img.shields.io/npm/dm/tns-android.svg)](https://www.npmjs.com/package/tns-android) [![Waffle.io - NativeScript Runtimes and CLI](https://badge.waffle.io/NativeScript/android-runtime.svg?columns=In%20Progress)](https://waffle.io/NativeScript/android-runtime)
+    [![npm](https://img.shields.io/npm/dm/tns-android.svg)](https://www.npmjs.com/package/tns-android) 
     - This repo contains the NativeScript Android—the code that hosts NativeScript Android apps, and allows JavaScript code to be executed on Android devices. The Android runtime is written in a fun mix of C++ and Java.
 - **[CLI](//github.com/NativeScript/nativescript-cli)**
-    [![npm](https://img.shields.io/npm/dm/nativescript.svg)](https://www.npmjs.com/package/nativescript) [![Waffle.io - NativeScript CLI](https://badge.waffle.io/NativeScript/nativescript-cli.svg?columns=In%20Progress)](https://waffle.io/NativeScript/nativescript-cli)
+    [![npm](https://img.shields.io/npm/dm/nativescript.svg)](https://www.npmjs.com/package/nativescript) 
     - This repo contains the NativeScript command-line interface, which lets you create, build, and run apps using the NativeScript framework. The CLI is written in TypeScript.
 - **[Docs](//github.com/NativeScript/docs)**
     - This repo contains the NativeScript framework documentation, which is available at <http://docs.nativescript.org/>. The docs are written in Markdown.
@@ -72,14 +72,14 @@ In addition to the code that makes up the NativeScript framework itself, we also
 
 ## Contributing
 
-We love PRs, and accept them for all of our repositories—even docs! Please follow our [contribution guide](https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md) if you want to become part of the project.
+We love PRs, and accept them for all of our repositories — even docs! Please follow our [contribution guide](https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md) if you want to become part of the project.
 
 ## Angular
 
-We [worked together with the Google Angular team](http://angularjs.blogspot.com/2015/12/building-mobile-apps-with-angular-2-and.html) to make Angular 2+ work on top of NativeScript. To use Angular with NativeScript please follow the [getting started](http://docs.nativescript.org/angular/tutorial/ng-chapter-0) article.
+We [worked together with the Google Angular team](https://angularjs.blogspot.com/2015/12/building-mobile-apps-with-angular-2-and.html) to make Angular 2+ work on top of NativeScript. To use Angular with NativeScript please follow the [getting started](http://docs.nativescript.org/angular/tutorial/ng-chapter-0) article.
 
 ## Get Help
 
-Please, use [github issues](https://github.com/NativeScript/NativeScript/issues) strictly for [reporting a bugs](https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#bugs) or [requesting features](https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#features). For general NativeScript questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](http://developer.telerik.com/wp-login.php?action=slack-invitation).
+Please, use [github issues](https://github.com/NativeScript/NativeScript/issues) strictly for [reporting a bugs](https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#bugs) or [requesting features](https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#features). For general NativeScript questions and support, check out [Stack Overflow](https://stackoverflow.com/questions/tagged/nativescript) or ask our experts in [NativeScript community Slack channel](https://www.nativescript.org/slack-invitation-form).
 
 ![](https://ga-beacon.appspot.com/UA-111455-24/nativescript/nativescript?pixel) 

build-docs.sh

@@ -36,16 +36,6 @@ extract_snippets() {
     archive_dist_dir "snippets"
 }
 
-extract_cookbook() {
-    COOKBOOK_DIR="$DIST_DIR/cookbook"
-    rm -rf "$COOKBOOK_DIR"
-    
-    npm_install
-    grunt articles
-    mv "$DIST_DIR/articles" "$COOKBOOK_DIR"
-    archive_dist_dir "cookbook"
-}
-
 extract_apiref() {
     APIREF_DIR="$DIST_DIR/api-reference"
     rm -rf "$APIREF_DIR"
@@ -62,6 +52,5 @@ mkdir -p "$TARGET_DIR"
 
 if [ "${BASH_SOURCE[0]}" == "$0" ] ; then
     extract_snippets
-    extract_cookbook
     extract_apiref
 fi

e2e/ui-tests-app/README.md

@@ -2,8 +2,8 @@
 
 1. Local setup
     - install appium and all requirments related to `nativescript-dev-appium` plugin usage
-    - download images: 
-    
+    - download images:
+
         ```npm run load-images Emulator-Api23-Default "iPhone X 12"```
 
         or load multiple folders:
@@ -15,21 +15,21 @@
         ``` npm run load-images all```
 
         This command will download https://github.com/NativeScript/functional-tests-images/tree/master/uitestsapp and sparse all passed directories [emulator-name|simulator-name]
-    - rename/ create your device so that it matches folder name, respectively api level and density of emulators. 
-    
+    - rename/ create your device so that it matches folder name, respectively api level and density of emulators.
+
         You can also use scripts:
-    
-        `npm run update-emulators` to update your emulator density. 
-    
+
+        `npm run update-emulators` to update your emulator density.
+
         If you need to download system image and create emulator use:
 
         `npm run update-emulators -- --update-system-images`
 2. Test execution
     - Run test compilation in separate terminal and don't kill it.
-    
+
         `npm run test-watch`
-    - It is highly recommended during the development to use 
-    
+    - It is highly recommended during the development to use
+
         `npm run test [android|ios]` along with `tns run [android|ios]`. This command will use already installed app on the device.
         For example: Open terminal1 and run: `tns run android` and open new terminal2 and run: `npm run test android`
 3. Debug test.
@@ -64,7 +64,7 @@ mocha opt file is located at "../config/mocha.opts".
 
        --timeout 999999
        --recursive e2e
-       --reporter mochawesome 
+       --reporter mochawesome
        --reporter-options quiet=true,html=true,inline=true,autoOpen=true
        --exit
 

e2e/ui-tests-app/app/action-bar/background-css-page.xml

@@ -3,4 +3,4 @@
   <StackLayout>
     <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/background-page.xml

@@ -10,4 +10,4 @@
   <StackLayout>
     <Button text="go to cleared page" tap="navigate" style="background-color: green;"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/clean-page.xml

@@ -10,4 +10,4 @@
   <StackLayout>
     <Button text="go to previous page" tap="navigate"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/color-page.xml

@@ -10,4 +10,4 @@
   <StackLayout>
     <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/flat-layout-page.xml

@@ -7,4 +7,4 @@
     <StackLayout backgroundColor="red">
         <Label text="lorem ipsum" backgroundColor="green"></Label>
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/flat-page.xml

@@ -1,5 +1,5 @@
 <Page navigatedTo="onNavigateTo" backgroundColor="yellow">
-  
+
   <ActionBar backgroundColor="blue" automationText="actionBar">
       <Label text="flat action bar"></Label>
   </ActionBar>
@@ -8,4 +8,4 @@
     <Button margin="30" text="change flat property" tap="changeFlatPropertyValue"/>
     <Label id="flatPropertyValue" backgroundColor="green" />
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/flat-scrollview-page.xml

@@ -7,4 +7,4 @@
     <ScrollView backgroundColor="red">
         <Label text="lorem ipsum" backgroundColor="green"></Label>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/flat-tab-opaque-bar-page.xml

@@ -10,4 +10,4 @@
           </StackLayout>
       </TabViewItem>
   </TabView>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/flat-tab-page.xml

@@ -7,8 +7,8 @@
     <TabView selectedTabTextColor="green">
         <TabViewItem title="First">
             <GridLayout backgroundColor="green">
-                <Button text="test" backgroundColor="red"></Button> 
+                <Button text="test" backgroundColor="red"></Button>
             </GridLayout>
         </TabViewItem>
     </TabView>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/font-icons-page.css

@@ -8,4 +8,4 @@
 
 .color {
     color: blue;
-}
+}

e2e/ui-tests-app/app/action-bar/font-icons-page.xml

@@ -1,6 +1,7 @@
 <Page>
   <Page.actionBar>
     <ActionBar automationText="actionBar">
+      <NavigationButton icon="font://&#xF137;" class="font-awesome font-size color"/>
       <ActionBar.actionItems>
         <!-- font family + font size + color -->
         <ActionItem icon="font://&#xF10B;" class="font-awesome font-size color" tap="navigate"/>
@@ -16,4 +17,4 @@
     <Button text="go to cleared page" tap="navigate"/>
     <Button text="undefined" tap="onChangeRenderingMode"/>
   </StackLayout>
-</Page> 
+</Page>

e2e/ui-tests-app/app/action-bar/icons-page.xml

@@ -11,4 +11,4 @@
     <Button text="go to cleared page" automationText="goToClearedPage" tap="navigate"/>
     <Button text="undefined" tap="onChangeRenderingMode"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/local-icons-page.xml

@@ -11,4 +11,4 @@
     <Button text="go to cleared page" automationText="goToClearedPage" tap="navigate"/>
     <Button text="undefined" tap="onChangeRenderingMode"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/main-page.xml

@@ -3,4 +3,4 @@
     <ScrollView orientation="vertical" row="1">
         <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/modal-page-hidden-action-bar-page.ts

@@ -8,4 +8,4 @@ export function onShownModally(args: ShownModallyData) {
 
 export function onTap() {
     closeCallback("sample text\n");
-}
+}

e2e/ui-tests-app/app/action-bar/modal-page-hidden-action-bar-page.xml

@@ -2,4 +2,4 @@
     <StackLayout id="layout" >
         <Button text="Close" tap="onTap" />
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/modal-page.ts

@@ -25,4 +25,4 @@ export function change(args) {
 
     var label2: Label = <Label>page.getViewById("label2");
     label2.text = "foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo";
-}
+}

e2e/ui-tests-app/app/action-bar/modal-page.xml

@@ -5,4 +5,4 @@
         <Button text="Change text" tap="change" />
         <Button text="Close" tap="onTap" />
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/modal-test-hidden-action-bar-page.ts

@@ -12,4 +12,4 @@ export function btnClick(args: EventData) {
 
 export function btnBack(args: EventData) {
     topmost().goBack();
-}
+}

e2e/ui-tests-app/app/action-bar/modal-test-hidden-action-bar-page.xml

@@ -3,4 +3,4 @@
     <button text="Open Modal" tap="btnClick" />
     <button text="Go Back" tap="btnBack" />
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/modal-test-with-action-bar-page.xml

@@ -12,4 +12,4 @@
         <button text="Open Modal" tap="btnClick" />
         <button text="Go Back" tap="btnBack" />
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/system-icons-page.xml

@@ -11,4 +11,4 @@
   <StackLayout>
     <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/action-bar/transparent-bg-css-page.css

@@ -4,4 +4,4 @@
 
 Page {
   background-color: green;
-}
+}

e2e/ui-tests-app/app/animation/animation-army-100-page.ts

@@ -23,10 +23,10 @@ export function onUnloaded() {
 }
 
 export function getBoxPropertyAnimationData(property: string,
-                                            animateEase: string,
-                                            target: View,
-                                            extentX: number = 128,
-                                            extentY: number = 128) {
+    animateEase: string,
+    target: View,
+    extentX: number = 128,
+    extentY: number = 128) {
     let animateKey;
     let animateValueTo;
     let animateValueFrom;
@@ -66,8 +66,8 @@ export function getBoxPropertyAnimationData(property: string,
         case "scale":
             target.originX = target.originY = 0.5;
             animateKey = "scale";
-            animateValueTo = {x: 0.1, y: 0.1};
-            animateValueFrom = {x: 1, y: 1};
+            animateValueTo = { x: 0.1, y: 0.1 };
+            animateValueFrom = { x: 1, y: 1 };
             break;
         default:
             throw new Error(`demo animation for "${property}" is not implemented`);

e2e/ui-tests-app/app/animation/animation-curves-page.ts

@@ -50,8 +50,8 @@ export function easeAnimate(args) {
         case "scale":
             animateKey = "scale";
             target.originX = target.originY = 0.5;
-            animateValueTo = {x: 1.5, y: 1.5};
-            animateValueFrom = {x: 1, y: 1};
+            animateValueTo = { x: 1.5, y: 1.5 };
+            animateValueFrom = { x: 1, y: 1 };
             break;
     }
     target

e2e/ui-tests-app/app/animation/main-page.xml

@@ -3,4 +3,4 @@
     <ScrollView orientation="vertical" row="1">
         <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/bindings/basics-page.ts

@@ -54,7 +54,7 @@ export function createPage() {
 
     stack.addChild(targetOneWay);
     stack.addChild(buttonOneWay);
-    
+
     // TwoWay Binding
     var bindingOptionTwoWay = {
         sourceProperty: "textSource",

e2e/ui-tests-app/app/bindings/main-page.xml

@@ -3,4 +3,4 @@
     <ScrollView orientation="vertical" row="1">
         <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/bindings/xmlbasics-page.xml

@@ -18,4 +18,4 @@
       </ListView>
     </StackLayout>
   </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/background-color-page.css

@@ -16,4 +16,4 @@ TabStripItem.special {
 
 TabStripItem.special:active {
   background-color: yellowgreen;
-}
+}

e2e/ui-tests-app/app/bottom-navigation/background-color-page.xml

@@ -21,4 +21,4 @@
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/binding-page.ts

@@ -3,4 +3,4 @@ import { BottomNavigationViewModel } from "./bottom-navigation-view-model";
 export function bottomNavigaitonLoaded(args) {
     const bottomNav = args.object.page;
     bottomNav.bindingContext = new BottomNavigationViewModel();
-}
+}

e2e/ui-tests-app/app/bottom-navigation/binding-page.xml

@@ -7,13 +7,13 @@
     <StackLayout row="0" >
         <Button automationText="add-tab" text="add-tab" tap="{{ createItems }}"/>
         <Button automationText="remove-last-tab" text="remove-last-tab" tap="{{ removeLastItem }}"/>
-      
+
     </StackLayout>
         <GridLayout row="1">
             <BottomNavigation automationText="tabNavigation"  loaded="bottomNavigaitonLoaded" items="{{ tabContentItems }}">
                 <TabStrip items="{{ tabStripItems }}" iosIconRenderingMode="alwaysOriginal">
                 </TabStrip>
-            </BottomNavigation> 
+            </BottomNavigation>
         </GridLayout>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-css-page.xml

@@ -32,4 +32,4 @@
       </GridLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.ts

@@ -3,10 +3,10 @@ import { Page } from "tns-core-modules/ui/page";
 import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
 
 export function goToFirst(args: EventData) {
-    const page = <Page>(<any>args.object).page;
-    const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
 
-    bottomNav.selectedIndex = 0;
+  bottomNav.selectedIndex = 0;
 }
 
 export function goToSecond(args: EventData) {

e2e/ui-tests-app/app/bottom-navigation/bottom-navigation-page.xml

@@ -56,4 +56,4 @@
       </StackLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/color-page.xml

@@ -30,4 +30,4 @@
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/custom-tabstrip-page.ts

@@ -3,10 +3,10 @@ import { Page } from "tns-core-modules/ui/page";
 import { BottomNavigation } from "tns-core-modules/ui/bottom-navigation";
 
 export function goToFirst(args: EventData) {
-    const page = <Page>(<any>args.object).page;
-    const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
+  const page = <Page>(<any>args.object).page;
+  const bottomNav = <BottomNavigation>page.getViewById("bottomNav");
 
-    bottomNav.selectedIndex = 0;
+  bottomNav.selectedIndex = 0;
 }
 
 export function goToSecond(args: EventData) {

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.css

@@ -23,8 +23,9 @@ BottomNavigation {
     background-color: black;
 }
 
-TabStripItem:active, #lastStripItem:active {
-    background-color:coral;
+TabStripItem:active,
+#lastStripItem:active {
+    background-color: coral;
 }
 
 #second-tab-content-item {
@@ -41,4 +42,4 @@ TabStripItem:active, #lastStripItem:active {
 
 #fifth-tab-content-item {
     background-color: brown;
-}
+}

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.ts

@@ -7,4 +7,4 @@ export const selectTab = (args: EventData) => {
 
     const index = (<any>args.object).tag;
     bottomNav.selectedIndex = index;
-};
+};

e2e/ui-tests-app/app/bottom-navigation/fancy-fonts-page.xml

@@ -10,7 +10,7 @@
       <TabStripItem iconSource="res://up" title="ICON-RES"></TabStripItem>
 
       <TabStripItem title="Simply Long Title"></TabStripItem>
-      
+
       <TabStripItem iconSource="res://icon" id="lastStripItem" title="LAST"></TabStripItem>
 
     </TabStrip>
@@ -79,4 +79,4 @@
 
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/font-icons-page.xml

@@ -5,7 +5,7 @@
 
   <BottomNavigation automationText="tabNavigation" >
     <TabStrip>
-        <!-- font family + font size + color -->        
+        <!-- font family + font size + color -->
         <TabStripItem class="special">
             <Label text="All Set"/>
             <Image src="font://&#xF10B;" class="font-awesome font-size" />
@@ -60,4 +60,4 @@
         </StackLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/font-page.xml

@@ -30,4 +30,4 @@
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/icon-change-page.ts

@@ -2,7 +2,7 @@ import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-module
 
 export function onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
     const bottomNav = <BottomNavigation>args.object;
-    
+
     const newItem = bottomNav.tabStrip.items[args.newIndex];
     if (newItem) {
         newItem.iconSource = "res://icon";

e2e/ui-tests-app/app/bottom-navigation/icon-change-page.xml

@@ -20,4 +20,4 @@
             </GridLayout>
         </TabContentItem>
     </BottomNavigation>
-</Page> 
+</Page>

e2e/ui-tests-app/app/bottom-navigation/icon-title-placement-page.xml

@@ -27,4 +27,4 @@
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/issue-5470-page.xml

@@ -24,4 +24,4 @@
         </TabContentItem>
     </BottomNavigation>
 
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/main-page.xml

@@ -3,4 +3,4 @@
     <ScrollView orientation="vertical" row="1">
         <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/bottom-navigation/text-transform-page.xml

@@ -30,4 +30,4 @@
         </GridLayout>
     </TabContentItem>
   </BottomNavigation>
-</Page>
+</Page>

e2e/ui-tests-app/app/button/background-page.xml

@@ -4,7 +4,7 @@
     <WrapLayout row="1">
       <Button width="40" height="40" text="r" tap="resetTap"/>
 
-      <!-- Background and Border -->      
+      <!-- Background and Border -->
       <Button width="40" height="40" text="1" tap="applyTap" tag="margin: 20; background-color: lightgreen;"/>
       <Button width="40" height="40" text="21" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 20; border-width: 40;"/>
       <Button width="40" height="40" text="22" tap="applyTap" tag="margin: 20; background-color: lightgreen; border-color: lightpink; border-radius: 40; border-width: 40;"/>
@@ -28,7 +28,7 @@
       <Button width="40" height="40" text="50" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center;"/>
       <Button width="40" height="40" text="51" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: left;"/>
       <Button width="40" height="40" text="52" tap="applyTap" tag="margin: 20; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: bottom;"/>
-      
+
       <!-- Size -->
       <Button width="40" height="40" text="61" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100px 100px;"/>
       <Button width="40" height="40" text="62" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: center center; background-size: 100% 100%;"/>
@@ -38,7 +38,7 @@
       <!-- All -->
       <Button width="40" height="40" text="71" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-x; background-position: 20% 80%; background-size: 25% 50%; border-radius: 20; border-width: 4; border-color: lightpink;"/>
       <Button width="40" height="40" text="72" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-y; background-position: 80 20; background-size: 50 25; border-radius: 20; border-width: 4; border-color: lightpink; opacity: 0.5;"/>
-      
+
       <!-- Antialiasing -->
       <Button width="40" height="40" text="73" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-x; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
       <Button width="40" height="40" text="74" tap="applyTap" tag="margin: 20; background-color: lightgreen; background-image: url('~/resources/images/test2.png'); background-repeat:repeat-y; background-position: -15% -15%; background-size: 50% 50%; border-radius: 9; border-width: 3; border-color: black;"/>
@@ -48,4 +48,4 @@
       <Button width="40" height="40" text="78" tap="applyTap" tag="margin: 20; background-color: #FF00FF00; background-image: url('~/resources/images/test2.png'); background-repeat:no-repeat; background-position: -15% -15%; background-size: 50% 50%; border-width: 10; border-color: #66FF0000;"/>
     </WrapLayout>
   </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/button/border-playground-page.css

@@ -10,4 +10,4 @@ Button {
 
 TextView {
     font-size: 8;
-}
+}

e2e/ui-tests-app/app/button/border-playground-page.ts

@@ -36,7 +36,7 @@ export function onToggle(args: EventData) {
     }
     else if (button.text === "BGGradient") {
         const gradient = "linear-gradient(to right, purple, red)";
-        target.backgroundImage = typeof target.backgroundImage === "object" ? undefined :  gradient;
+        target.backgroundImage = typeof target.backgroundImage === "object" ? undefined : gradient;
         debugConsole.text += `> background-image: ${gradient} \n`;
     }
 

e2e/ui-tests-app/app/button/border-playground-page.xml

@@ -37,4 +37,4 @@
             <TextView id="debugConsole" text=""/>
         </ScrollView>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/button/btn-wrap-text-alignment-4266-page.xml

@@ -10,4 +10,4 @@
         <Button row="2" text="This a test of a wrapping button [LEFT]" textWrap="true" style="text-align:left;width:100" />
         <Button row="3" text="&#xf8ff; This a test of a wrapping button [CENTER ICON]" textWrap="true" style="text-align:center;width:100" />
     </GridLayout>
-</Page> 
+</Page>

e2e/ui-tests-app/app/button/button-border-page.css

@@ -10,43 +10,56 @@ Button {
 }
 
 #s1 {
-    border-width: 5; border-color: red;
+    border-width: 5;
+    border-color: red;
 }
 
 #s2 {
-    border-width: 5; border-color: red red red green;
+    border-width: 5;
+    border-color: red red red green;
 }
 
 #s3 {
-    border-width: 5; border-color: red; border-radius: 5;
+    border-width: 5;
+    border-color: red;
+    border-radius: 5;
 }
 
 #s4 {
-    border-width: 5; border-color: red; border-radius: 50;
+    border-width: 5;
+    border-color: red;
+    border-radius: 50;
 }
 
 #s5 {
-    border-width: 5 10 15 20; border-color: red;
+    border-width: 5 10 15 20;
+    border-color: red;
 }
 
 #s6 {
-    border-width: 5; border-color: red green blue yellow;
+    border-width: 5;
+    border-color: red green blue yellow;
 }
 
 #s7 {
-    border-width: 5 10 15 20; border-color: red green blue yellow;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
 }
 
 #s8 {
-    border-width: 5 10; border-color: red green;
+    border-width: 5 10;
+    border-color: red green;
 }
 
 #s9 {
-    border-width: 15 10 5; border-color: red green blue;
+    border-width: 15 10 5;
+    border-color: red green blue;
 }
 
 #s10 {
-    android-elevation: 0; border-width: 5 0; border-color: black;
+    android-elevation: 0;
+    border-width: 5 0;
+    border-color: black;
 }
 
 #s11 {
@@ -54,25 +67,37 @@ Button {
 }
 
 #s12 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5 10 15 20;
 }
 
 #s13 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5;
 }
 
 #s14 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-color: magenta;
 }
 
 #s15 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/resources/images/test2.png');
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-image: url('~/resources/images/test2.png');
 }
 
 #s16 {
-    border-width: 5; border-color: red; padding: 5;
+    border-width: 5;
+    border-color: red;
+    padding: 5;
 }
 
 #s17 {
-    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+    border-width: 5 6 7 8;
+    border-color: red green blue yellow;
+    padding: 5 6 7 8;
 }

e2e/ui-tests-app/app/button/button-border-page.xml

@@ -19,4 +19,4 @@
         <Button id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
         <Button id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/button/highlight-4740/highlight-4740-page.css

@@ -4,4 +4,4 @@
 
 .btn:highlighted {
     background-color: red
-}
+}

e2e/ui-tests-app/app/button/highlight-4740/highlight-4740-page.xml

@@ -1,7 +1,7 @@
 
-<Page 
+<Page
     xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
     <StackLayout class="p-20">
         <Button text="go to sub" tap="onTap" class="btn"/>
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/button/highlight-4740/sub-page.ts

@@ -2,4 +2,4 @@ import * as frame from "tns-core-modules/ui/frame";
 
 export function goBack() {
     frame.goBack();
-}
+}

e2e/ui-tests-app/app/button/highlight-4740/sub-page.xml

@@ -1,4 +1,4 @@
-<Page 
+<Page
     xmlns="http://www.nativescript.org/tns.xsd">
     <Button text="goBack" tap="goBack" />
-</Page>
+</Page>

e2e/ui-tests-app/app/button/issue-4287-page.xml

@@ -1,9 +1,9 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
     <GridLayout columns="auto * auto" rows="auto *" borderWidth="1" borderColor="black" iosOverflowSafeArea="false">
-        
+
         <StackLayout borderWidth="1" borderColor="black" verticalAlignment="top" width="150">
             <Label text="textWrap: false" horizontalAlignment="center"/>
-            
+
             <Button textWrap="false" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3"/>
             <Button textWrap="false" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3" style="padding: 5"/>
             <Button textWrap="false" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3" style="padding: 10; border-width: 10; border-color: blue;"/>
@@ -15,7 +15,7 @@
 
         <StackLayout col="2" borderWidth="1" borderColor="black" verticalAlignment="top" width="150">
             <Label text="textWrap: true" horizontalAlignment="center" />
-        
+
             <Button textWrap="true" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3"/>
             <Button textWrap="true" backgroundColor="lightblue" horizontalAlignment="left" text="1 2 3" style="padding: 5"/>
             <Button textWrap="true" backgroundColor="lightgreen" horizontalAlignment="left" text="1 2 3" style="padding: 10; border-width: 10; border-color: blue;"/>

e2e/ui-tests-app/app/button/issue-4385-page.css

@@ -1,4 +1,4 @@
 .btnIcon {
    font-family: "FontAwesome";
    font-size: 60;
-}
+}

e2e/ui-tests-app/app/button/issue-4385-page.ts

@@ -16,8 +16,8 @@ export class TestPage extends Observable {
         super();
     }
 
-// new line of span can be set with \n from code behind
+    // new line of span can be set with \n from code behind
     get test(): string {
         return "\ntest";
     }
-}
+}

e2e/ui-tests-app/app/button/issue-4385-page.xml

@@ -1,4 +1,4 @@
-<Page 
+<Page
     xmlns="http://schemas.nativescript.org/tns.xsd" loaded="navigatingTo">
     <Page.actionBar>
         <ActionBar title="4385">
@@ -32,4 +32,4 @@
             </button.formattedText>
         </Button>
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/button/main-page.xml

@@ -3,4 +3,4 @@
     <ScrollView orientation="vertical" row="1">
         <WrapLayout id="wrapLayoutWithExamples"/>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/all-non-uniform-border-page.css

@@ -1,6 +1,7 @@
 .s0 {
-    border-width: 1 2 5 10; border-color: red green blue yellow;
+    border-width: 1 2 5 10;
+    border-color: red green blue yellow;
     width: 80;
     height: 80;
     font-size: 6;
-}
+}

e2e/ui-tests-app/app/css/all-non-uniform-border-page.xml

@@ -18,7 +18,7 @@
                 <SegmentedBarItem title="SB 1" />
                 <SegmentedBarItem title="SB 2" />
             </SegmentedBar.items>
-        </SegmentedBar> 
+        </SegmentedBar>
         <DatePicker class="s0" row="4" col="2" year="1980" month="2" day="9"/>
         <TimePicker class="s0" row="5" col="0" hour="5" minute="30"/>
         <ListPicker class="s0" row="5" col="1" items="123"/>
@@ -26,4 +26,4 @@
             <Label text="ScrollView"  autocorrect="false" width="160" height="160" style.backgroundColor="gray"/>
         </ScrollView>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/all-uniform-border-page.css

@@ -1,6 +1,8 @@
 .s0 {
-    border-width: 5; border-color: red; border-radius: 5;
+    border-width: 5;
+    border-color: red;
+    border-radius: 5;
     width: 80;
     height: 80;
     font-size: 6;
-}
+}

e2e/ui-tests-app/app/css/all-uniform-border-page.xml

@@ -26,4 +26,4 @@
             <Label text="ScrollView" autocorrect="false" width="160" height="160" style.backgroundColor="gray"/>
         </ScrollView>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/background-image-linear-gradient-page.ts

@@ -5,19 +5,19 @@ import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
 
 let testIndex = 0;
 const tests = [
-    { name: "black-blue only", backgroundImage: "linear-gradient(to bottom, black, blue)"},
-    { name: "to bottom green-blue", backgroundImage: "linear-gradient(to bottom, green, blue)"},
-    { name: "to left yellow-blue", backgroundImage: "linear-gradient(to left, yellow, green)"},
-    { name: "to right yellow-blue", backgroundImage: "linear-gradient(to right, yellow, green)"},
-    { name: "-45deg green-blue", backgroundImage: "linear-gradient(-45deg, green, blue)"},
-    { name: "45deg green-blue", backgroundImage: "linear-gradient(45deg, green, blue)"},
+    { name: "black-blue only", backgroundImage: "linear-gradient(to bottom, black, blue)" },
+    { name: "to bottom green-blue", backgroundImage: "linear-gradient(to bottom, green, blue)" },
+    { name: "to left yellow-blue", backgroundImage: "linear-gradient(to left, yellow, green)" },
+    { name: "to right yellow-blue", backgroundImage: "linear-gradient(to right, yellow, green)" },
+    { name: "-45deg green-blue", backgroundImage: "linear-gradient(-45deg, green, blue)" },
+    { name: "45deg green-blue", backgroundImage: "linear-gradient(45deg, green, blue)" },
 
-    { name: "black-blue-pink only", backgroundImage: "linear-gradient(to bottom, black, blue, pink)"},
-    { name: "to bottom green-blue-pink", backgroundImage: "linear-gradient(to bottom, green, blue, pink)"},
-    { name: "to left yellow-blue-pink", backgroundImage: "linear-gradient(to left, yellow, green, pink)"},
-    { name: "to right yellow-blue-pink", backgroundImage: "linear-gradient(to right, yellow, green, pink)"},
-    { name: "-45deg green-blue-pink", backgroundImage: "linear-gradient(-45deg, green, blue, pink)"},
-    { name: "45deg green-blue-pink", backgroundImage: "linear-gradient(45deg, green, blue, pink)"},
+    { name: "black-blue-pink only", backgroundImage: "linear-gradient(to bottom, black, blue, pink)" },
+    { name: "to bottom green-blue-pink", backgroundImage: "linear-gradient(to bottom, green, blue, pink)" },
+    { name: "to left yellow-blue-pink", backgroundImage: "linear-gradient(to left, yellow, green, pink)" },
+    { name: "to right yellow-blue-pink", backgroundImage: "linear-gradient(to right, yellow, green, pink)" },
+    { name: "-45deg green-blue-pink", backgroundImage: "linear-gradient(-45deg, green, blue, pink)" },
+    { name: "45deg green-blue-pink", backgroundImage: "linear-gradient(45deg, green, blue, pink)" },
 ];
 
 export function onLoaded(args) {
@@ -37,4 +37,4 @@ function applyNextStyle(args) {
     gridElement.backgroundImage = tests[testIndex].backgroundImage;
 
     testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
-}
+}

e2e/ui-tests-app/app/css/background-image-linear-gradient-page.xml

@@ -4,4 +4,4 @@
 
     <GridLayout id="Container" fontSize="12" borderColor="black" margin="5" borderWidth="1" row="1"/>
   </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/background-image-page.xml

@@ -1,29 +1,29 @@
 <Page>
     <GridLayout rows="*,*,*,*,*,*" >
-        <Button backgroundImage="url('~/resources/images/no-image.png')" 
-            borderRadius='125' borderWidth='2' borderColor='black' 
-            backgroundRepeat="repeat" backgroundSize="contain" 
+        <Button backgroundImage="url('~/resources/images/no-image.png')"
+            borderRadius='125' borderWidth='2' borderColor='black'
+            backgroundRepeat="repeat" backgroundSize="contain"
             />
-        <Button row="1" backgroundImage="url('~/resources/images/no-image.png')" 
-            borderRadius='5' borderWidth='2' borderColor='black' 
+        <Button row="1" backgroundImage="url('~/resources/images/no-image.png')"
+            borderRadius='5' borderWidth='2' borderColor='black'
             backgroundRepeat="repeat-y"
             />
-        <Button row="2" backgroundImage="url('~/resources/images/no-image.png')" 
-            borderRadius='25' borderWidth='2' borderColor='black' 
+        <Button row="2" backgroundImage="url('~/resources/images/no-image.png')"
+            borderRadius='25' borderWidth='2' borderColor='black'
             backgroundRepeat="repeat-x"
             />
-         <Button row="3" backgroundImage="url('res://icon')" 
-            borderRadius='10' borderWidth='2' borderColor='black' 
+         <Button row="3" backgroundImage="url('res://icon')"
+            borderRadius='10' borderWidth='2' borderColor='black'
             backgroundRepeat="no-repeat"
-            backgroundSize="contain" 
+            backgroundSize="contain"
             height="80" width="180"
             />
         <Button row="4" text="css background no-repeat" class="testBtn"/>
-        <Button row="5" backgroundImage="url('res://icon')" 
-            borderRadius='10' borderWidth='2' borderColor='black' 
+        <Button row="5" backgroundImage="url('res://icon')"
+            borderRadius='10' borderWidth='2' borderColor='black'
             style="background-repeat: no-repeat"
-            backgroundSize="contain" 
+            backgroundSize="contain"
             height="80" width="180"
             />
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/background-shorthand-page.ts

@@ -10,7 +10,7 @@ const tests = [
     { name: "blue color only", background: "blue" },
 
     { name: "repeat image only", background: "url(\"~/resources/images/icon.png\")" },
-    { name: "linear gradient red-blue only", background: "linear-gradient(to bottom, red, blue)"},
+    { name: "linear gradient red-blue only", background: "linear-gradient(to bottom, red, blue)" },
 
     { name: "[straight] image only, no-repeat ", background: "url(\"~/resources/images/icon.png\") no-repeat" },
     { name: "[straight] green color, image, no-repeat", background: "green url(\"~/resources/images/icon.png\") no-repeat" },
@@ -46,4 +46,4 @@ function applyNextStyle(args) {
     gridElement.background = tests[testIndex].background;
 
     testIndex = testIndex < tests.length - 1 ? ++testIndex : 0;
-}
+}

e2e/ui-tests-app/app/css/background-shorthand-page.xml

@@ -4,4 +4,4 @@
 
     <GridLayout id="Container" fontSize="12" borderColor="black" margin="5" borderWidth="1" row="1"/>
   </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/clip-path-inset-page.xml

@@ -3,7 +3,7 @@
         <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
             <Button width="100" height="100" text="no clip-path" style="background-image: url('~/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
-        
+
         <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
             <Button width="100" height="100" text="inset(10)" style="clip-path: inset(10); background-image: url('~/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
@@ -16,7 +16,7 @@
         <StackLayout col="0" row="4" width="100" height="100" style.backgroundColor="magenta">
             <Button width="100" height="100" text="inset(10 20 30 40)" style="clip-path: inset(10 20 30 40); background-image: url('~/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
-        
+
         <StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
             <Button width="100" height="100" text="inset(10%)" style="clip-path: inset(10%); background-image: url('~/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;" />
         </StackLayout>
@@ -31,4 +31,4 @@
         </StackLayout>
 
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/clip-path-page.xml

@@ -22,4 +22,4 @@
             <Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
         </StackLayout>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/combinators-page.css

@@ -1,32 +1,32 @@
-.direct-child--type > Button {
+.direct-child--type>Button {
   background-color: red;
   color: white;
 }
 
-.direct-child--class > .test-child {
+.direct-child--class>.test-child {
   background-color: blue;
   color: white;
 }
 
-.direct-sibling--type Button + Label {
+.direct-sibling--type Button+Label {
   background-color: green;
   color: white;
 }
 
-.direct-sibling--id #test-child + #test-child-2 {
+.direct-sibling--id #test-child+#test-child-2 {
   background-color: pink;
 }
 
-.direct-sibling--class .test-child + .test-child-2 {
+.direct-sibling--class .test-child+.test-child-2 {
   background-color: yellow;
 }
 
-.direct-sibling--attribute Button[data="test-child"] + Button[data="test-child-2"] {
+.direct-sibling--attribute Button[data="test-child"]+Button[data="test-child-2"] {
   background-color: blueviolet;
   color: white;
 }
 
-.direct-sibling--pseudo-selector Button + Button:disabled {
+.direct-sibling--pseudo-selector Button+Button:disabled {
   background-color: black;
   color: white;
 }

e2e/ui-tests-app/app/css/decoration-transform-formattedtext-page.xml

@@ -1,6 +1,6 @@
 <Page>
     <StackLayout>
-    
+
       <Label autocorrect="false" text="labelLabel" style="text-transform: uppercase; text-decoration: underline line-through;" />
       <Label autocorrect="false" style="text-transform: uppercase; text-decoration: underline line-through;">
         <Label.formattedText>
@@ -90,4 +90,4 @@
       </TextView>
 
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/elevation-page.css

@@ -1,4 +1,5 @@
-Label, Button {
+Label,
+Button {
     text-align: center;
     padding: 10;
     margin: 16;
@@ -36,8 +37,9 @@ Label, Button {
 .round {
     color: #fff;
     background-color: #ff1744;
-    border-radius: 50%; /* TODO kills elevation */
+    border-radius: 50%;
+    /* TODO kills elevation */
     width: 80;
     height: 80;
     android-elevation: 8;
-}
+}

e2e/ui-tests-app/app/css/elevation-page.ts

@@ -17,4 +17,4 @@ export function buttonTap(args: EventData) {
     }
     btn.className = states[currentState].class;
     btn.text = states[currentState].text;
-}
+}

e2e/ui-tests-app/app/css/elevation-page.xml

@@ -22,4 +22,4 @@
             <Button class="elevation-10" text="elevation 10"/>
         </StackLayout>
     </ScrollView>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/gradient-border-page.css

@@ -9,43 +9,55 @@ StackLayout {
 }
 
 #s1 {
-    border-width: 5; border-color: red;
+    border-width: 5;
+    border-color: red;
 }
 
 #s2 {
-    border-width: 5; border-color: red red red green;
+    border-width: 5;
+    border-color: red red red green;
 }
 
 #s3 {
-    border-width: 5; border-color: red; border-radius: 5;
+    border-width: 5;
+    border-color: red;
+    border-radius: 5;
 }
 
 #s4 {
-    border-width: 5; border-color: red; border-radius: 50;
+    border-width: 5;
+    border-color: red;
+    border-radius: 50;
 }
 
 #s5 {
-    border-width: 5 10 15 20; border-color: red;
+    border-width: 5 10 15 20;
+    border-color: red;
 }
 
 #s6 {
-    border-width: 5; border-color: red green blue yellow;
+    border-width: 5;
+    border-color: red green blue yellow;
 }
 
 #s7 {
-    border-width: 5 10 15 20; border-color: red green blue yellow;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
 }
 
 #s8 {
-    border-width: 5 10; border-color: red green;
+    border-width: 5 10;
+    border-color: red green;
 }
 
 #s9 {
-    border-width: 15 10 5; border-color: red green blue;
+    border-width: 15 10 5;
+    border-color: red green blue;
 }
 
 #s10 {
-    border-width: 5 0; border-color: black;
+    border-width: 5 0;
+    border-color: black;
 }
 
 #s11 {
@@ -53,25 +65,37 @@ StackLayout {
 }
 
 #s12 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5 10 15 20;
 }
 
 #s13 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5;
 }
 
 #s14 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-color: magenta;
 }
 
 #s15 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/resources/images/test2.png');
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-image: url('~/resources/images/test2.png');
 }
 
 #s16 {
-    border-width: 5; border-color: red; padding: 5;
+    border-width: 5;
+    border-color: red;
+    padding: 5;
 }
 
 #s17 {
-    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+    border-width: 5 6 7 8;
+    border-color: red green blue yellow;
+    padding: 5 6 7 8;
 }

e2e/ui-tests-app/app/css/gradient-border-page.xml

@@ -19,4 +19,4 @@
         <StackLayout id="s16" row="5" col="1"/>
         <StackLayout id="s17" row="5" col="2"/>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/image-border-page.css

@@ -9,43 +9,55 @@ Image {
 }
 
 #s1 {
-    border-width: 5; border-color: red;
+    border-width: 5;
+    border-color: red;
 }
 
 #s2 {
-    border-width: 5; border-color: red red red green;
+    border-width: 5;
+    border-color: red red red green;
 }
 
 #s3 {
-    border-width: 5; border-color: red; border-radius: 5;
+    border-width: 5;
+    border-color: red;
+    border-radius: 5;
 }
 
 #s4 {
-    border-width: 5; border-color: red; border-radius: 50;
+    border-width: 5;
+    border-color: red;
+    border-radius: 50;
 }
 
 #s5 {
-    border-width: 5 10 15 20; border-color: red;
+    border-width: 5 10 15 20;
+    border-color: red;
 }
 
 #s6 {
-    border-width: 5; border-color: red green blue yellow;
+    border-width: 5;
+    border-color: red green blue yellow;
 }
 
 #s7 {
-    border-width: 5 10 15 20; border-color: red green blue yellow;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
 }
 
 #s8 {
-    border-width: 5 10; border-color: red green;
+    border-width: 5 10;
+    border-color: red green;
 }
 
 #s9 {
-    border-width: 15 10 5; border-color: red green blue;
+    border-width: 15 10 5;
+    border-color: red green blue;
 }
 
 #s10 {
-    border-width: 5 0; border-color: black;
+    border-width: 5 0;
+    border-color: black;
 }
 
 #s11 {
@@ -53,25 +65,37 @@ Image {
 }
 
 #s12 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5 10 15 20;
 }
 
 #s13 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5;
 }
 
 #s14 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-color: magenta;
 }
 
 #s15 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/resources/images/test2.png');
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-image: url('~/resources/images/test2.png');
 }
 
 #s16 {
-    border-width: 5; border-color: red; padding: 5;
+    border-width: 5;
+    border-color: red;
+    padding: 5;
 }
 
 #s17 {
-    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+    border-width: 5 6 7 8;
+    border-color: red green blue yellow;
+    padding: 5 6 7 8;
 }

e2e/ui-tests-app/app/css/image-border-page.xml

@@ -19,4 +19,4 @@
         <Image id="s16" row="5" col="1" src="~/resources/images/gravatar.png" stretch="fill"/>
         <Image id="s17" row="5" col="2" src="~/resources/images/gravatar.png" stretch="fill"/>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/label-background-image-page.css

@@ -1,8 +1,8 @@
 Label {
     background-image: url('~/resources/images/test2.png');
-    background-repeat: no-repeat; 
-    background-position: left; 
-    background-size: contain; 
-    margin: 10; 
+    background-repeat: no-repeat;
+    background-position: left;
+    background-size: contain;
+    margin: 10;
     border-width: 1;
-}
+}

e2e/ui-tests-app/app/css/label-background-image-page.xml

@@ -4,4 +4,4 @@
         <Label text="Label2" width="150" height="200" />
         <Label text="Label3" width="200" height="150"/>
     </StackLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/label-border-page.css

@@ -9,43 +9,55 @@ Label {
 }
 
 #s1 {
-    border-width: 5; border-color: rgba(255,0,0,1);
+    border-width: 5;
+    border-color: rgba(255, 0, 0, 1);
 }
 
 #s2 {
-    border-width: 5; border-color: red red red green;
+    border-width: 5;
+    border-color: red red red green;
 }
 
 #s3 {
-    border-width: 5; border-color: red; border-radius: 5;
+    border-width: 5;
+    border-color: red;
+    border-radius: 5;
 }
 
 #s4 {
-    border-width: 5; border-color: red; border-radius: 50;
+    border-width: 5;
+    border-color: red;
+    border-radius: 50;
 }
 
 #s5 {
-    border-width: 5 10 15 20; border-color: rgb(255, 0, 0); 
+    border-width: 5 10 15 20;
+    border-color: rgb(255, 0, 0);
 }
 
 #s6 {
-    border-width: 5; border-color: red green blue yellow;
+    border-width: 5;
+    border-color: red green blue yellow;
 }
 
 #s7 {
-    border-width: 5 10 15 20; border-color: red green blue yellow;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
 }
 
 #s8 {
-    border-width: 5 10; border-color: red green;
+    border-width: 5 10;
+    border-color: red green;
 }
 
 #s9 {
-    border-width: 15 10 5; border-color: red green blue;
+    border-width: 15 10 5;
+    border-color: red green blue;
 }
 
 #s10 {
-    border-width: 5 0; border-color: black;
+    border-width: 5 0;
+    border-color: black;
 }
 
 #s11 {
@@ -53,25 +65,37 @@ Label {
 }
 
 #s12 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5 10 15 20;
 }
 
 #s13 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5;
 }
 
 #s14 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-color: magenta;
 }
 
 #s15 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/resources/images/test2.png');
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-image: url('~/resources/images/test2.png');
 }
 
 #s16 {
-    border-width: 5; border-color: red; padding: 5;
+    border-width: 5;
+    border-color: red;
+    padding: 5;
 }
 
 #s17 {
-    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+    border-width: 5 6 7 8;
+    border-color: red green blue yellow;
+    padding: 5 6 7 8;
 }

e2e/ui-tests-app/app/css/label-border-page.xml

@@ -19,4 +19,4 @@
         <Label id="s16" row="5" col="1" textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/>
         <Label id="s17" row="5" col="2" textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/layout-border-page.css

@@ -12,43 +12,55 @@ Label {
 }
 
 #s1 {
-    border-width: 5; border-color: red;
+    border-width: 5;
+    border-color: red;
 }
 
 #s2 {
-    border-width: 5; border-color: red red red green;
+    border-width: 5;
+    border-color: red red red green;
 }
 
 #s3 {
-    border-width: 5; border-color: red; border-radius: 5;
+    border-width: 5;
+    border-color: red;
+    border-radius: 5;
 }
 
 #s4 {
-    border-width: 5; border-color: red; border-radius: 50;
+    border-width: 5;
+    border-color: red;
+    border-radius: 50;
 }
 
 #s5 {
-    border-width: 5 10 15 20; border-color: red;
+    border-width: 5 10 15 20;
+    border-color: red;
 }
 
 #s6 {
-    border-width: 5; border-color: red green blue yellow;
+    border-width: 5;
+    border-color: red green blue yellow;
 }
 
 #s7 {
-    border-width: 5 10 15 20; border-color: red green blue yellow;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
 }
 
 #s8 {
-    border-width: 5 10; border-color: red green;
+    border-width: 5 10;
+    border-color: red green;
 }
 
 #s9 {
-    border-width: 15 10 5; border-color: red green blue;
+    border-width: 15 10 5;
+    border-color: red green blue;
 }
 
 #s10 {
-    border-width: 5 0; border-color: black;
+    border-width: 5 0;
+    border-color: black;
 }
 
 #s11 {
@@ -56,25 +68,37 @@ Label {
 }
 
 #s12 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5 10 15 20;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5 10 15 20;
 }
 
 #s13 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; border-radius: 5;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    border-radius: 5;
 }
 
 #s14 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-color: magenta;
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-color: magenta;
 }
 
 #s15 {
-    border-width: 5 10 15 20; border-color: red green blue yellow; background-image: url('~/resources/images/test2.png');
+    border-width: 5 10 15 20;
+    border-color: red green blue yellow;
+    background-image: url('~/resources/images/test2.png');
 }
 
 #s16 {
-    border-width: 5; border-color: red; padding: 5;
+    border-width: 5;
+    border-color: red;
+    padding: 5;
 }
 
 #s17 {
-    border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;
+    border-width: 5 6 7 8;
+    border-color: red green blue yellow;
+    padding: 5 6 7 8;
 }

e2e/ui-tests-app/app/css/layout-border-page.xml

@@ -19,4 +19,4 @@
         <StackLayout id="s16" row="5" col="1"><Label textWrap="true" text="border-width: 5; border-color: red; padding: 5;"/></StackLayout>
         <StackLayout id="s17" row="5" col="2"><Label textWrap="true" text="border-width: 5 6 7 8; border-color: red green blue yellow; padding: 5 6 7 8;"/></StackLayout>
     </GridLayout>
-</Page>
+</Page>

e2e/ui-tests-app/app/css/layouts-border-overlap-page.css

@@ -1,4 +1,8 @@
-StackLayout, AbsoluteLayout, DockLayout, GridLayout, WrapLayout {
+StackLayout,
+AbsoluteLayout,
+DockLayout,
+GridLayout,
+WrapLayout {
     margin: 5;
     background-color: yellow;
 }
@@ -23,5 +27,6 @@ Label {
 }
 
 .s2 {
-    border-width: 20 0 0 20; border-color:black;
-}
+    border-width: 20 0 0 20;
+    border-color: black;
+}

e2e/ui-tests-app/app/css/layouts-border-overlap-page.xml

@@ -4,22 +4,22 @@
         <StackLayout  class="s0" row="0" col="0"><Label textWrap="true" text="border-width: 20;"/></StackLayout>
         <StackLayout  class="s1" row="0" col="1"><Label textWrap="true" text="padding: 20;"/></StackLayout>
         <StackLayout  class="s2" row="0" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></StackLayout>
-        
+
         <AbsoluteLayout  class="s0" row="1" col="0"><Label textWrap="true" text="border-width: 20;"/></AbsoluteLayout>
         <AbsoluteLayout  class="s1" row="1" col="1"><Label textWrap="true" text="padding: 20;"/></AbsoluteLayout>
         <AbsoluteLayout  class="s2" row="1" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></AbsoluteLayout>
-        
+
         <DockLayout  class="s0" row="2" col="0"><Label textWrap="true" text="border-width: 20;"/></DockLayout>
         <DockLayout  class="s1" row="2" col="1"><Label textWrap="true" text="padding: 20;"/></DockLayout>
         <DockLayout  class="s2" row="2" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></DockLayout>
-        
+
         <GridLayout  class="s0" row="3" col="0"><Label textWrap="true" text="border-width: 20;"/></GridLayout>
         <GridLayout  class="s1" row="3" col="1"><Label textWrap="true" text="padding: 20;"/></GridLayout>
         <GridLayout  class="s2" row="3" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></GridLayout>
-        
+
         <WrapLayout  class="s0" row="4" col="0"><Label textWrap="true" text="border-width: 20;"/></WrapLayout>
         <WrapLayout  class="s1" row="4" col="1"><Label textWrap="true" text="padding: 20;"/></WrapLayout>
         <WrapLayout  class="s2" row="4" col="2"><Label textWrap="true" text="border-width: 20 0 0 20;"/></WrapLayout>
-        
+
     </GridLayout>
-</Page>
+</Page>