Merge remote-tracking branch 'origin/master' into tsenov/merge-release

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) {

tns-core-modules/ui/core/view/view.d.ts

@@ -2,7 +2,8 @@
  * @module "ui/core/view"
  */ /** */
 
-///<reference path="../../../tns-core-modules.d.ts" /> Include global typings
+/// <reference path="../../../tns-core-modules.d.ts" />
+
 import { ViewBase, Property, InheritedProperty, EventData, Color } from "../view-base";
 import { Animation, AnimationDefinition, AnimationPromise } from "../../animation";
 import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
@@ -18,14 +19,14 @@ export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
 /**
  * Specifies the type name for the instances of this View class,
  * that is used when matching CSS type selectors.
- * 
+ *
  * Usage:
  * ```
  * @CSSType("Button")
  * class Button extends View {
  * }
  * ```
- * 
+ *
  * Internally the decorator set `Button.prototype.cssType = "Button"`.
  * @param type The type name, e. g. "Button", "Label", etc.
  */
@@ -50,8 +51,8 @@ export type px = number;
 export type percent = number;
 
 /**
- * The Point interface describes a two dimensional location. 
- * It has two properties x and y, representing the x and y coordinate of the location. 
+ * The Point interface describes a two dimensional location.
+ * It has two properties x and y, representing the x and y coordinate of the location.
  */
 export interface Point {
     /**
@@ -66,8 +67,8 @@ export interface Point {
 }
 
 /**
- * The Size interface describes abstract dimensions in two dimensional space. 
- * It has two properties width and height, representing the width and height values of the size. 
+ * The Size interface describes abstract dimensions in two dimensional space.
+ * It has two properties width and height, representing the width and height values of the size.
  */
 export interface Size {
     /**
@@ -99,8 +100,8 @@ export interface ShownModallyData extends EventData {
 }
 
 /**
- * This class is the base class for all UI components. 
- * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within. 
+ * This class is the base class for all UI components.
+ * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within.
  */
 export abstract class View extends ViewBase {
     /**
@@ -475,13 +476,13 @@ export abstract class View extends ViewBase {
      * [Deprecated. Please use the on() instead.] Adds a gesture observer.
      * @param type - Type of the gesture.
      * @param callback - A function that will be executed when gesture is received.
-     * @param thisArg - An optional parameter which will be used as `this` context for callback execution. 
+     * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
      */
     observe(type: GestureTypes, callback: (args: GestureEventData) => void, thisArg?: any);
 
     /**
      * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change") or you can use gesture types. 
+     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change") or you can use gesture types.
      * @param callback - Callback function which will be executed when event is raised.
      * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
      */
@@ -527,12 +528,12 @@ export abstract class View extends ViewBase {
     modal: View;
 
     /**
-     * Animates one or more properties of the view based on the supplied options. 
+     * Animates one or more properties of the view based on the supplied options.
      */
     public animate(options: AnimationDefinition): AnimationPromise;
 
     /**
-     * Creates an Animation object based on the supplied options. 
+     * Creates an Animation object based on the supplied options.
      */
     public createAnimation(options: AnimationDefinition): Animation;
 
@@ -562,7 +563,7 @@ export abstract class View extends ViewBase {
     public getActualSize(): Size;
 
     /**
-     * Derived classes can override this method to handle Android back button press. 
+     * Derived classes can override this method to handle Android back button press.
      */
     onBackPressed(): boolean;
 
@@ -575,7 +576,7 @@ export abstract class View extends ViewBase {
     /**
      * @private
      * Adds a new values to current css.
-     * @param cssString - A valid css which will be added to current css. 
+     * @param cssString - A valid css which will be added to current css.
      */
     addCss(cssString: string): void;
 
@@ -586,13 +587,20 @@ export abstract class View extends ViewBase {
      */
     addCssFile(cssFileName: string): void;
 
+    /**
+     * @private
+     * Changes the current css to the content of the file.
+     * @param cssFileName - A valid file name (from the application root) which contains a valid css.
+     */
+    changeCssFile(cssFileName: string): void;
+
     // Lifecycle events
     _getNativeViewsCount(): number;
 
     _eachLayoutView(callback: (View) => void): void;
-    
+
     /**
-     * Iterates over children of type View. 
+     * Iterates over children of type View.
      * @param callback Called for each child of type View. Iteration stops if this method returns falsy value.
      */
     public eachChildView(callback: (view: View) => boolean): void;
@@ -673,7 +681,7 @@ export abstract class View extends ViewBase {
     /**
      * @private
      */
-    _onLivesync(): boolean;
+    _onLivesync(context?: { type: string, path: string }): boolean;
     /**
      * @private
      */
@@ -681,9 +689,9 @@ export abstract class View extends ViewBase {
 
     /**
      * Updates styleScope or create new styleScope.
-     * @param cssFileName 
-     * @param cssString 
-     * @param css 
+     * @param cssFileName
+     * @param cssString
+     * @param css
      */
     _updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void;
 
@@ -715,7 +723,7 @@ export abstract class View extends ViewBase {
 }
 
 /**
- * Base class for all UI components that are containers. 
+ * Base class for all UI components that are containers.
  */
 export class ContainerView extends View {
     /**
@@ -725,7 +733,7 @@ export class ContainerView extends View {
 }
 
 /**
- * Base class for all UI components that implement custom layouts. 
+ * Base class for all UI components that implement custom layouts.
  */
 export class CustomLayoutView extends ContainerView {
     //@private

tns-core-modules/ui/frame/frame-common.ts

@@ -76,7 +76,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
                     if (backstackIndex !== -1) {
                         backstack = backstackIndex;
                     } else {
-                        // NOTE: We don't search for entries in navigationQueue because there is no way for 
+                        // NOTE: We don't search for entries in navigationQueue because there is no way for
                         // developer to get reference to BackstackEntry unless transition is completed.
                         // At that point the entry is put in the backstack array.
                         // If we start to return Backstack entry from navigate method then
@@ -153,7 +153,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
     //     }
 
     //     let currentPage = this._currentEntry.resolvedPage;
-    //     let currentNavigationEntry = this._currentEntry.entry; 
+    //     let currentNavigationEntry = this._currentEntry.entry;
     //     if (currentPage["isBiOrientational"] && currentNavigationEntry.moduleName) {
     //         if (this.canGoBack()){
     //             this.goBack();
@@ -162,7 +162,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
     //             currentNavigationEntry.backstackVisible = false;
     //         }
     //         // Re-navigate to the same page so the other (.port or .land) xml is loaded.
-    //         this.navigate(currentNavigationEntry);                   
+    //         this.navigate(currentNavigationEntry);
     //     }
     // }
 
@@ -224,7 +224,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         newPage.onNavigatedTo(isBack);
 
         // Reset executing entry after NavigatedTo is raised;
-        // we do not want to execute two navigations in parallel in case 
+        // we do not want to execute two navigations in parallel in case
         // additional navigation is triggered from the NavigatedTo handler.
         this._executingEntry = null;
     }
@@ -259,7 +259,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
                 return true;
             }
         }
-    
+
         return false;
     }
 
@@ -563,7 +563,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         return result;
     }
 
-    public _onLivesync(): boolean {
+    public _onLivesync(context?: ModuleContext): boolean {
         super._onLivesync();
 
         if (!this._currentEntry || !this._currentEntry.entry) {
@@ -571,6 +571,17 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition {
         }
 
         const currentEntry = this._currentEntry.entry;
+        if (context && context.path) {
+            // Use topmost instead of this to cover nested frames scenario
+            const topmostFrame = topmost();
+            const moduleName = topmostFrame.currentEntry.moduleName;
+            const reapplyStyles = context.path.includes(moduleName);
+            if (reapplyStyles && moduleName) {
+                topmostFrame.currentPage.changeCssFile(context.path);
+                return true;
+            }
+        }
+
         const newEntry: NavigationEntry = {
             animated: false,
             clearHistory: true,

tns-core-modules/ui/frame/frame.android.ts

@@ -82,13 +82,13 @@ function getAttachListener(): android.view.View.OnAttachStateChangeListener {
     return attachStateChangeListener;
 }
 
-export function reloadPage(): void {
+export function reloadPage(context?: ModuleContext): void {
     const activity = application.android.foregroundActivity;
     const callbacks: AndroidActivityCallbacks = activity[CALLBACKS];
     if (callbacks) {
         const rootView: View = callbacks.getRootView();
 
-        if (!rootView || !rootView._onLivesync()) {
+        if (!rootView || !rootView._onLivesync(context)) {
             callbacks.resetActivityContent(activity);
         }
     } else {
@@ -153,7 +153,7 @@ export class Frame extends FrameBase {
         // In case activity was destroyed because of back button pressed (e.g. app exit)
         // and application is restored from recent apps, current fragment isn't recreated.
         // In this case call _navigateCore in order to recreate the current fragment.
-        // Don't call navigate because it will fire navigation events. 
+        // Don't call navigate because it will fire navigation events.
         // As JS instances are alive it is already done for the current page.
         if (!this.isLoaded || this._executingEntry || !this._attachedToWindow) {
             return;
@@ -183,13 +183,13 @@ export class Frame extends FrameBase {
         const entry = this._currentEntry;
         if (entry && manager && !manager.findFragmentByTag(entry.fragmentTag)) {
             // Simulate first navigation (e.g. no animations or transitions)
-            // we need to cache the original animation settings so we can restore them later; otherwise as the 
-            // simulated first navigation is not animated (it is actually a zero duration animator) the "popExit" animation 
+            // we need to cache the original animation settings so we can restore them later; otherwise as the
+            // simulated first navigation is not animated (it is actually a zero duration animator) the "popExit" animation
             // is broken when transaction.setCustomAnimations(...) is used in a scenario with:
             // 1) forward navigation
             // 2) suspend / resume app
-            // 3) back navigation -- the exiting fragment is erroneously animated with the exit animator from the 
-            // simulated navigation (NoTransition, zero duration animator) and thus the fragment immediately disappears; 
+            // 3) back navigation -- the exiting fragment is erroneously animated with the exit animator from the
+            // simulated navigation (NoTransition, zero duration animator) and thus the fragment immediately disappears;
             // the user only sees the animation of the entering fragment as per its specific enter animation settings.
             // NOTE: we are restoring the animation settings in Frame.setCurrent(...) as navigation completes asynchronously
             this._cachedAnimatorState = getAnimatorState(this._currentEntry);
@@ -727,7 +727,7 @@ function ensureFragmentClass() {
         return;
     }
 
-    // this require will apply the FragmentClass implementation 
+    // this require will apply the FragmentClass implementation
     require("ui/frame/fragment");
 
     if (!fragmentClass) {
@@ -855,11 +855,11 @@ class FragmentCallbacksImplementation implements AndroidFragmentCallbacks {
             entry.viewSavedState = null;
         }
 
-        // fixes 'java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first'.	
+        // fixes 'java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first'.
         // on app resume in nested frame scenarios with support library version greater than 26.0.0
-        // HACK: this whole code block shouldn't be necessary as the native view is supposedly removed from its parent 
-        // right after onDestroyView(...) is called but for some reason the fragment view (page) still thinks it has a 
-        // parent while its supposed parent believes it properly removed its children; in order to "force" the child to 
+        // HACK: this whole code block shouldn't be necessary as the native view is supposedly removed from its parent
+        // right after onDestroyView(...) is called but for some reason the fragment view (page) still thinks it has a
+        // parent while its supposed parent believes it properly removed its children; in order to "force" the child to
         // lose its parent we temporarily add it to the parent, and then remove it (addViewInLayout doesn't trigger layout pass)
         const nativeView = page.nativeViewProtected;
         if (nativeView != null) {
@@ -908,8 +908,8 @@ class FragmentCallbacksImplementation implements AndroidFragmentCallbacks {
         }
 
         // [nested frames / fragments] see https://github.com/NativeScript/NativeScript/issues/6629
-        // retaining reference to a destroyed fragment here somehow causes a cryptic 
-        // "IllegalStateException: Failure saving state: active fragment has cleared index: -1" 
+        // retaining reference to a destroyed fragment here somehow causes a cryptic
+        // "IllegalStateException: Failure saving state: active fragment has cleared index: -1"
         // in a specific mixed parent / nested frame navigation scenario
         entry.fragment = null;
 
@@ -1019,15 +1019,15 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
         }
 
         // NOTE: activity.onPostResume() is called when activity resume is complete and we can
-        // safely raise the application resume event; 
+        // safely raise the application resume event;
         // onActivityResumed(...) lifecycle callback registered in application is called too early
-        // and raising the application resume event there causes issues like 
+        // and raising the application resume event there causes issues like
         // https://github.com/NativeScript/NativeScript/issues/6708
         if ((<any>activity).isNativeScriptActivity) {
             const args = <application.ApplicationEventData>{
                 eventName: application.resumeEvent,
-                object: application.android, 
-                android: activity 
+                object: application.android,
+                android: activity
             };
             application.notify(args);
             application.android.paused = false;
@@ -1151,7 +1151,7 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
 
     // Paths that go trough this method:
     // 1. Application initial start - there is no rootView in callbacks.
-    // 2. Application revived after Activity is destroyed. this._rootView should have been restored by id in onCreate. 
+    // 2. Application revived after Activity is destroyed. this._rootView should have been restored by id in onCreate.
     // 3. Livesync if rootView has no custom _onLivesync. this._rootView should have been cleared upfront. Launch event should not fired
     // 4. _resetRootView method. this._rootView should have been cleared upfront. Launch event should not fired
     private setActivityContent(

tns-core-modules/ui/page/page.d.ts

@@ -3,7 +3,8 @@
  * @module "ui/page"
  */ /** */
 
-///<reference path="../../tns-core-modules.d.ts" /> Include global typings
+/// <reference path="../../tns-core-modules.d.ts" />
+
 import { ShownModallyData } from "../core/view";
 import { ContentView, EventData, Property, Color, CssProperty, Style } from "../content-view";
 import { Frame } from "../frame";
@@ -106,7 +107,7 @@ export class Page extends ContentView {
 
     /**
      * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
-     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 
+     * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change").
      * @param callback - Callback function which will be executed when event is raised.
      * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
      */
@@ -198,4 +199,4 @@ export const statusBarStyleProperty: CssProperty<Style, "light" | "dark">;
 /**
  * Property backing androidStatusBarBackground.
  */
-export const androidStatusBarBackgroundProperty: CssProperty<Style, Color>;
+export const androidStatusBarBackgroundProperty: CssProperty<Style, Color>;

tns-core-modules/ui/styling/style-scope.d.ts

@@ -29,6 +29,7 @@ export class CssState {
 export class StyleScope {
     public css: string;
     public addCss(cssString: string, cssFileName: string): void;
+    public changeCssFile(cssFileName: string): void;
 
     public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): RuleSet[];
     public static createSelectorsFromImports(tree: SyntaxTree, keyframes: Object): RuleSet[];

tns-core-modules/ui/styling/style-scope.ts

@@ -569,6 +569,19 @@ export class StyleScope {
         this.appendCss(null, cssFileName);
     }
 
+    @profile
+    private changeCssFile(cssFileName: string): void {
+        if (!cssFileName) {
+            return;
+        }
+
+        const cssSelectors = CSSSource.fromURI(cssFileName, this._keyframes);
+        this._css = cssSelectors.source;
+        this._localCssSelectors = cssSelectors.selectors;
+        this._localCssSelectorVersion++;
+        this.ensureSelectors();
+    }
+
     @profile
     private setCss(cssString: string, cssFileName?): void {
         this._css = cssString;