NativeScript · MartoYankov · Feb 8, 2019 · Feb 10, 2019 · Feb 11, 2019 · Feb 14, 2019
diff --git a/apps/app/ui-tests-app/action-bar/flat-layout.xml b/apps/app/ui-tests-app/action-bar/flat-layout.xml
@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
+
+    <ActionBar flat="true" backgroundColor="blue">
+        <Label text="flat action bar"></Label>
+    </ActionBar>
+
+    <StackLayout backgroundColor="red">
+        <Label text="lorem ipsum" backgroundColor="green"></Label>
+    </StackLayout>
+</Page>
diff --git a/apps/app/ui-tests-app/action-bar/flat-scrollview.xml b/apps/app/ui-tests-app/action-bar/flat-scrollview.xml
@@ -1,10 +1,10 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
 
     <ActionBar flat="true" backgroundColor="blue">
         <Label text="flat action bar"></Label>
     </ActionBar>
 
-    <ScrollView backgroundColor="green">
-        <Label text="lorem ipsum" backgroundColor="red"></Label>
+    <ScrollView backgroundColor="red">
+        <Label text="lorem ipsum" backgroundColor="green"></Label>
     </ScrollView>
 </Page>
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts b/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.ts
@@ -0,0 +1,7 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { TabView } from "tns-core-modules/ui/tab-view";
+
+export function onLoaded(args: EventData) {
+    const tabView = <TabView>args.object;
+    tabView.ios.tabBar.translucent = false;
+}
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml b/apps/app/ui-tests-app/action-bar/flat-tab-opaque-bar.xml
@@ -0,0 +1,13 @@
+<Page backgroundColor="yellow">
+  <ActionBar flat="true" backgroundColor="blue">
+      <Label text="flat action bar"></Label>
+  </ActionBar>
+
+  <TabView androidTabsPosition="bottom" loaded="onLoaded">
+      <TabViewItem title="First">
+          <StackLayout backgroundColor="red">
+            <Label text="First View" backgroundColor="green"/>
+          </StackLayout>
+      </TabViewItem>
+  </TabView>
+</Page>
diff --git a/apps/app/ui-tests-app/action-bar/flat-tab.xml b/apps/app/ui-tests-app/action-bar/flat-tab.xml
@@ -1,13 +1,13 @@
-<Page xmlns="http://schemas.nativescript.org/tns.xsd">
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundColor="yellow">
 
-    <ActionBar flat="true">
+    <ActionBar flat="true" backgroundColor="blue">
         <Label text="flat action bar"></Label>
     </ActionBar>
 
     <TabView selectedTabTextColor="green">
         <TabViewItem title="First">
-            <GridLayout backgroundColor="red">
-                <Button text="test" backgroundColor="yellow"></Button> 
+            <GridLayout backgroundColor="green">
+                <Button text="test" backgroundColor="red"></Button> 
             </GridLayout>
         </TabViewItem>
     </TabView>

diff --git a/apps/app/ui-tests-app/action-bar/flat.xml b/apps/app/ui-tests-app/action-bar/flat.xml
@@ -1,9 +1,11 @@
-<Page navigatedTo="onNavigateTo" >
-  <Page.actionBar>
-    <ActionBar title="Flat property"/>
-  </Page.actionBar>
-  <StackLayout>
+<Page navigatedTo="onNavigateTo" backgroundColor="yellow">
+
+  <ActionBar flat="true" backgroundColor="blue">
+      <Label text="flat action bar"></Label>
+  </ActionBar>
+
+  <StackLayout backgroundColor="red">
     <Button margin="30" text="change flat property" tap="changeFlatPropertyValue"/>
-    <Label id="flatPropertyValue" />
+    <Label id="flatPropertyValue" backgroundColor="green" />
   </StackLayout>
 </Page>
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
@@ -23,6 +23,8 @@ export function loadExamples() {
     examples.set("modalShownActBar", "action-bar/modal-test-with-action-bar");
     examples.set("flat", "action-bar/flat");
     examples.set("flat-tab", "action-bar/flat-tab");
+    examples.set("flat-tab-opaque-bar", "action-bar/flat-tab-opaque-bar");
+    examples.set("flat-layout", "action-bar/flat-layout");
     examples.set("flat-scrollview", "action-bar/flat-scrollview");
 
     return examples;

diff --git a/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml b/apps/app/ui-tests-app/nested-frames/mid-screen-y-n-flat.xml
@@ -7,6 +7,6 @@
     <GridLayout rows="200, *" backgroundColor="blue">
         <GridLayout row="1">
             <Frame id="nestedFrame" defaultPage="ui-tests-app/nested-frames/nested-page" actionBarVisibility="never"></Frame>
-        </GridLayout>>
+        </GridLayout>
     </GridLayout>
 </Page>
diff --git a/tests/app/ui/styling/style-tests.ts b/tests/app/ui/styling/style-tests.ts
@@ -674,6 +674,23 @@ export function test_CSS_isAppliedOnPage_From_addCssFile() {
     });
 }
 
+export function test_CSS_isAppliedOnPage_From_changeCssFile() {
+    const testButton = new buttonModule.Button();
+    testButton.text = "Test";
+
+    const testCss = "button { color: blue; }";
+
+    const testFunc = function (views: Array<viewModule.View>) {
+        helper.assertViewColor(testButton, "#0000FF");
+        const page: pageModule.Page = <pageModule.Page>views[1];
+        page.changeCssFile("~/ui/styling/test.css");
+        helper.assertViewBackgroundColor(page, "#FF0000");
+        TKUnit.assert(testButton.style.color === undefined, "Color should not have a value");
+    }
+
+    helper.buildUIAndRunTest(testButton, testFunc, { pageCss: testCss });
+}
+
 const invalidCSS = ".invalid { " +
     "color: invalidValue; " +
     "background-color: invalidValue; " +

diff --git a/tns-core-modules/application/application-common.ts b/tns-core-modules/application/application-common.ts
@@ -82,19 +82,23 @@ export function setApplication(instance: iOSApplication | AndroidApplication): v
 export function livesync(rootView: View, context?: ModuleContext) {
     events.notify(<EventData>{ eventName: "livesync", object: app });
     const liveSyncCore = global.__onLiveSyncCore;
-    let reapplyAppCss = false;
+    let reapplyAppStyles = false;
+    let reapplyLocalStyles = false;
 
-    if (context) {
-        const fullFileName = getCssFileName();
-        const fileName = fullFileName.substring(0, fullFileName.lastIndexOf(".") + 1);
+    if (context && context.path) {
         const extensions = ["css", "scss"];
-        reapplyAppCss = extensions.some(ext => context.path === fileName.concat(ext));
+        const appStylesFullFileName = getCssFileName();
+        const appStylesFileName = appStylesFullFileName.substring(0, appStylesFullFileName.lastIndexOf(".") + 1);
+        reapplyAppStyles = extensions.some(ext => context.path === appStylesFileName.concat(ext));
+        if (!reapplyAppStyles) {
+            reapplyLocalStyles = extensions.some(ext => context.path.endsWith(ext));
+        }
     }
 
-    if (reapplyAppCss && rootView) {
+    if (reapplyAppStyles && rootView) {
         rootView._onCssStateChange();
     } else if (liveSyncCore) {
-        liveSyncCore();
+        reapplyLocalStyles ? liveSyncCore(context) : liveSyncCore();
     }
 }
 

diff --git a/tns-core-modules/application/application.ios.ts b/tns-core-modules/application/application.ios.ts
@@ -225,9 +225,9 @@ class IOSApplication implements IOSApplicationDefinition {
         }
     }
 
-    public _onLivesync(): void {
+    public _onLivesync(context?: ModuleContext): void {
         // If view can't handle livesync set window controller.
-        if (this._rootView && !this._rootView._onLivesync()) {
+        if (this._rootView && !this._rootView._onLivesync(context)) {
             this.setWindowContent();
         }
     }
@@ -264,8 +264,8 @@ exports.ios = iosApp;
 setApplication(iosApp);
 
 // attach on global, so it can be overwritten in NativeScript Angular
-(<any>global).__onLiveSyncCore = function () {
-    iosApp._onLivesync();
+(<any>global).__onLiveSyncCore = function (context?: ModuleContext) {
+    iosApp._onLivesync(context);
 }
 
 let mainEntry: NavigationEntry;

diff --git a/tns-core-modules/debugger/webinspector-css.ios.ts b/tns-core-modules/debugger/webinspector-css.ios.ts
@@ -18,6 +18,10 @@ export class CSSDomainDebugger implements inspectorCommandTypes.CSSDomain.CSSDom
         this.commands = {};
 
         attachCSSInspectorCommandCallbacks(this.commands);
+
+        // By default start enabled because we can miss the "enable" event when
+        // running with `--debug-brk` -- the frontend will send it before we've been created
+        this.enable();
     }
 
     get enabled(): boolean {

diff --git a/tns-core-modules/debugger/webinspector-dom.ios.ts b/tns-core-modules/debugger/webinspector-dom.ios.ts
@@ -20,6 +20,10 @@ export class DOMDomainDebugger implements inspectorCommandTypes.DOMDomain.DOMDom
 
         attachDOMInspectorEventCallbacks(this.events);
         attachDOMInspectorCommandCallbacks(this.commands);
+
+        // By default start enabled because we can miss the "enable event when
+        // running with `--debug-brk` -- the frontend will send it before we've been created
+        this.enable();
     }
 
     get enabled(): boolean {

diff --git a/tns-core-modules/debugger/webinspector-network.ios.ts b/tns-core-modules/debugger/webinspector-network.ios.ts
@@ -64,7 +64,7 @@ export class Request {
                 this._resourceType = "Other";
                 return;
             }
-            
+
             this._mimeType = value;
 
             var resourceType = "Other";
@@ -112,19 +112,19 @@ export class Request {
                 this._resourceType = value;
         }
     }
-    
+
     public responseReceived(response: inspectorCommandTypes.NetworkDomain.Response): void {
         if (this._networkDomainDebugger.enabled) {
             this._networkDomainDebugger.events.responseReceived(this.requestID, frameId, loaderId, __inspectorTimestamp(), <any>this.resourceType, response);
         }
     }
-    
+
     public loadingFinished(): void {
         if (this._networkDomainDebugger.enabled) {
             this._networkDomainDebugger.events.loadingFinished(this.requestID, __inspectorTimestamp());
         }
     }
-    
+
     public requestWillBeSent(request: inspectorCommandTypes.NetworkDomain.Request): void {
         if (this._networkDomainDebugger.enabled) {
             this._networkDomainDebugger.events.requestWillBeSent(this.requestID, frameId, loaderId, request.url, request, __inspectorTimestamp(), { type: "Script" });
@@ -136,9 +136,13 @@ export class Request {
 export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomain.NetworkDomainDispatcher {
     private _enabled: boolean;
     public events: inspectorCommandTypes.NetworkDomain.NetworkFrontend;
-   
+
     constructor() {
         this.events = new inspectorCommands.NetworkDomain.NetworkFrontend();
+
+        // By default start enabled because we can miss the "enable" event when
+        // running with `--debug-brk` -- the frontend will send it before we've been created
+        this.enable();
     }
 
     get enabled(): boolean {
@@ -156,7 +160,7 @@ export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomai
         }
         this._enabled = true;
     }
-    
+
     /**
      * Disables network tracking, prevents network events from being sent to the client.
      */
@@ -166,14 +170,14 @@ export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomai
         }
         this._enabled = false;
     }
-    
+
     /**
      * Specifies whether to always send extra HTTP headers with the requests from this page.
      */
     setExtraHTTPHeaders(params: inspectorCommandTypes.NetworkDomain.SetExtraHTTPHeadersMethodArguments): void {
         //
     }
-    
+
     /**
      * Returns content served for the given request.
      */
@@ -187,9 +191,9 @@ export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomai
                  body: body,
                  base64Encoded: !resource_data.hasTextContent
              };
-        } 
+        }
     }
-    
+
     /**
      * Tells whether clearing browser cache is supported.
      */
@@ -198,14 +202,14 @@ export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomai
             result: false
         };
     }
-    
+
     /**
      * Clears browser cache.
      */
     clearBrowserCache(): void {
         //
     }
-    
+
     /**
      * Tells whether clearing browser cookies is supported.
      */
@@ -214,21 +218,21 @@ export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomai
             result: false
         };
     }
-    
+
     /**
      * Clears browser cookies.
      */
     clearBrowserCookies(): void {
         //
     }
-    
+
     /**
      * Toggles ignoring cache for each request. If <code>true</code>, cache will not be used.
      */
     setCacheDisabled(params: inspectorCommandTypes.NetworkDomain.SetCacheDisabledMethodArguments): void {
         //
     }
-    
+
     /**
      * Loads a resource in the context of a frame on the inspected page without cross origin checks.
      */
@@ -245,7 +249,7 @@ export class NetworkDomainDebugger implements inspectorCommandTypes.NetworkDomai
             status: 200
         }
     }
-    
+
     public static idSequence: number = 0;
     create(): Request {
         let id = (++NetworkDomainDebugger.idSequence).toString();
@@ -264,4 +268,4 @@ export class RuntimeDomainDebugger {
     compileScript(): { scriptId?: string, exceptionDetails?: Object } {
         return {};
     }
-}
+}
diff --git a/tns-core-modules/module.d.ts b/tns-core-modules/module.d.ts
@@ -52,7 +52,7 @@ declare namespace NodeJS {
         __inspector?: any;
         __extends: any;
         __onLiveSync: (context?: { type: string, path: string }) => void;
-        __onLiveSyncCore: () => void;
+        __onLiveSyncCore: (context?: { type: string, path: string }) => void;
         __onUncaughtError: (error: NativeScriptError) => void;
         __onDiscardedError: (error: NativeScriptError) => void;
         TNS_WEBPACK?: boolean;

diff --git a/tns-core-modules/package.json b/tns-core-modules/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tns-core-modules",
   "description": "Telerik NativeScript Core Modules",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "homepage": "https://www.nativescript.org",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
   "license": "Apache-2.0",
   "typings": "tns-core-modules.d.ts",
   "dependencies": {
-    "tns-core-modules-widgets": "5.2.0",
+    "tns-core-modules-widgets": "next",
     "tslib": "^1.9.3"
   },
   "devDependencies": {

diff --git a/tns-core-modules/ui/core/view/view-common.ts b/tns-core-modules/ui/core/view/view-common.ts
@@ -105,6 +105,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         this._updateStyleScope(cssFileName);
     }
 
+    public changeCssFile(cssFileName: string): void {
+        const scope = this._styleScope;
+        if (scope && cssFileName) {
+            scope.changeCssFile(cssFileName);
+            this._onCssStateChange();
+        }
+    }
+
     public _updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void {
         let scope = this._styleScope;
         if (!scope) {