chore: remove critical circular dependencies (#8114)

* chore: remove critical circular dependencies

* chore: fix tslint errors

* chore: remove platform specific types from interfaces

* chore: update unit tests polyfills

* fix: incorrect null check

* chore: update api.md file

* test: improve test case

* chore: apply comments

* test: avoid page style leaks in tests

e2e/ui-tests-app/app/app.ts

@@ -88,9 +88,7 @@ application.on(application.discardedErrorEvent, function (args: application.Disc
     console.log("### [Discarded] stack: " + args.error.stack);
 });
 
-application.setCssFileName("app.css");
-application._start({ moduleName: "main-page" });
+application.run({ moduleName: "app-root" });
 
 // TODO: investigate tab-view -> tabviewcss test crash
 // TODO: investigate css -> layouts border overlap failure
-// application.run({ moduleName: "app-root" });

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

@@ -0,0 +1 @@
+/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

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

@@ -0,0 +1 @@
+/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

e2e/ui-tests-app/app/css/margins-paddings-with-percentage-page.css

@@ -0,0 +1,21 @@
+.with-percent { background-color: orange; font-size: 8; }
+.with-percent GridLayout { margin: 3%; background-color: lightgreen; font-size: 8; }
+.with-percent StackLayout { border-color: red; border-width: 1; }
+.with-percent StackLayout * { border-color: blue; border-width: 1; }
+.with-percent GridLayout { border-color: green; border-width: 1; }
+.with-percent .test1 { padding: 10%; }
+.with-percent .test2 { padding: 10%; background-color: lightblue; }
+.with-percent .test3 { margin: 1% 2% 3% 4%; }
+.with-percent WrapLayout { orientation: vertical; width: 75%; height: 45% }
+.with-percent Button { color: black }
+
+.without-percent { background-color: orange; font-size: 8; }
+.without-percent GridLayout { margin:3; background-color: lightgreen; font-size: 8; }
+.without-percent StackLayout { border-color: red; border-width: 1; }
+.without-percent StackLayout * { border-color: blue; border-width: 1; }
+.without-percent GridLayout { border-color: green; border-width: 1; }
+.without-percent .test1 { padding: 10; }
+.without-percent .test2 { padding: 10; background-color: lightblue; }
+.without-percent .test3 { margin: 10 20 30 40; }
+.without-percent WrapLayout { orientation: vertical; width: 100; height: 120; }
+.without-percent Button { color: black }

e2e/ui-tests-app/app/css/margins-paddings-with-percentage-page.ts

@@ -1,53 +1,26 @@
-import * as view from "tns-core-modules/ui/core/view";
-import * as pages from "tns-core-modules/ui/page";
+import { View, getViewById } from "tns-core-modules/ui/core/view";
 import { EventData } from "tns-core-modules/data/observable";
-import * as button from "tns-core-modules/ui/button";
+import { Button } from "tns-core-modules/ui/button";
 
-const cssPercentage = `
-    Page { background-color: orange; font-size: 8; }
-    GridLayout { margin: 3%; background-color: lightgreen; font-size: 8; }
-    StackLayout { border-color: red; border-width: 1; }
-    StackLayout * { border-color: blue; border-width: 1; }
-    GridLayout { border-color: green; border-width: 1; }
-    .test1 { padding: 10%; }
-    .test2 { padding: 10%; background-color: lightblue; }
-    .test3 { margin: 1% 2% 3% 4%; }
-    WrapLayout { orientation: vertical; width: 75%; height: 45% }
-    Button { color: black }`;
-
-const cssWithouPercentage = `
-    Page { background-color: orange; font-size: 8; }
-    GridLayout { margin:3; background-color: lightgreen; font-size: 8; }
-    StackLayout { border-color: red; border-width: 1; }
-    StackLayout * { border-color: blue; border-width: 1; }
-    GridLayout { border-color: green; border-width: 1; }
-    .test1 { padding: 10; }
-    .test2 { padding: 10; background-color: lightblue; }
-    .test3 { margin: 10 20 30 40; }
-    WrapLayout { orientation: vertical; width: 100; height: 120; }
-    Button { color: black }`;
-
-var isSCCWithPercentage = true;
+let isSCCWithPercentage = true;
 
 export function pageLoaded(args: EventData) {
-    let page = <pages.Page>args.object;
-    page.css = cssPercentage;
-    getBtnText(args);
+    setBtnText(args);
 }
 
 export function applyTap(args: EventData) {
-    let page = <pages.Page>(<view.View>args.object).page;
-    let css = isSCCWithPercentage ? cssWithouPercentage : cssPercentage;
+    let page = (<View>args.object).page;
+    let cssClass = isSCCWithPercentage ? "without-percent" : "with-percent";
     isSCCWithPercentage = !isSCCWithPercentage;
-    console.log(css);
-    page.css = css;
-    getBtnText(args);
+    console.log(cssClass);
+    page.className = cssClass;
+    setBtnText(args);
 }
 
-function getBtnText(args: EventData) {
-    var parent = (<view.View>args.object).parent;
+function setBtnText(args: EventData) {
+    let parent = (<View>args.object).parent;
     if (parent) {
-        var btn = <button.Button>view.getViewById(parent, "button");
+        var btn = <Button>getViewById(parent, "button");
         if (btn) {
             if (isSCCWithPercentage) {
                 btn.text = "css with %";

e2e/ui-tests-app/app/css/margins-paddings-with-percentage-page.xml

@@ -1,4 +1,4 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded" class="with-percent">
   <GridLayout rows="40,*, *, *, *">
     <StackLayout>
       <Button text="Change css of page" tap="applyTap" id="button"></Button>

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

@@ -0,0 +1 @@
+/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

e2e/ui-tests-app/app/page/status-bar-css-page.css

@@ -0,0 +1 @@
+/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

e2e/ui-tests-app/app/tab-view/tab-view-css-page.css

@@ -0,0 +1,2 @@
+/* Currently need an empty css file to make this module a style scope host.
+This tests sets css on the module and without this empty file the css is set on the frame on top of it */

e2e/ui-tests-app/app/tab-view/text-transform-page.css

@@ -0,0 +1 @@
+/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */