Merge pull request #2994 from NativeScript/apply-css

Don't apply css on unloaded

apps/app/ui-tests-app/action-bar/background-css.css

@@ -0,0 +1,3 @@
+.action {
+  background-color: red;
+}

apps/app/ui-tests-app/action-bar/background-css.ts

@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("ui-tests-app/action-bar/clean");
+}

apps/app/ui-tests-app/action-bar/background-css.xml

@@ -0,0 +1,6 @@
+<Page>
+  <ActionBar title="This is RED" class="action" />
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+  </StackLayout>
+</Page>

apps/app/ui-tests-app/action-bar/main-page.ts

@@ -16,6 +16,7 @@ export function pageLoaded(args: EventData) {
     examples.set("actIcons", "action-bar/system-icons");
     examples.set("actView", "action-bar/action-view");
     examples.set("actionItemPosition", "action-bar/action-item-position");
+    examples.set("actBGCss", "action-bar/background-css");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;

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

@@ -10,13 +10,13 @@ import utils = require("utils/utils");
 import color = require("color");
 import observable = require("data/observable");
 import keyframeAnimationModule = require("ui/animation/keyframe-animation");
-import {PropertyMetadata, ProxyObject} from "ui/core/proxy";
+import { PropertyMetadata, ProxyObject } from "ui/core/proxy";
-import {PropertyMetadataSettings, PropertyChangeData, Property, ValueSource, PropertyMetadata as doPropertyMetadata} from "ui/core/dependency-observable";
+import { PropertyMetadataSettings, PropertyChangeData, Property, ValueSource, PropertyMetadata as doPropertyMetadata } from "ui/core/dependency-observable";
-import {registerSpecialProperty} from "ui/builder/special-properties";
+import { registerSpecialProperty } from "ui/builder/special-properties";
-import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
+import { CommonLayoutParams, nativeLayoutParamsProperty } from "ui/styling/style";
 import * as animModule from "ui/animation";
-import {CssState} from "ui/styling/style-scope";
+import { CssState } from "ui/styling/style-scope";
-import {Source} from "utils/debug";
+import { Source } from "utils/debug";
 
 registerSpecialProperty("class", (instance: definition.View, propertyValue: string) => {
     instance.className = propertyValue;
@@ -99,7 +99,7 @@ export function getAncestor(view: View, criterion: string | Function): definitio
     return null;
 }
 
-export function PseudoClassHandler(... pseudoClasses: string[]): MethodDecorator {
+export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator {
     let stateEventNames = pseudoClasses.map(s => ":" + s);
     let listeners = Symbol("listeners");
     return <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => {
@@ -647,8 +647,7 @@ export class View extends ProxyObject implements definition.View {
     }
 
     public onUnloaded() {
-        this._onCssStateChange(this._cssState, null);
+        this._setCssState(null);
-        this._cssState = null;
 
         this._unloadEachChildView();
 
@@ -1010,7 +1009,7 @@ export class View extends ProxyObject implements definition.View {
     }
 
     protected static adjustChildLayoutParams(view: View, widthMeasureSpec: number, heightMeasureSpec: number): void {
-        if(!view) {
+        if (!view) {
             return;
         }
 
@@ -1052,7 +1051,7 @@ export class View extends ProxyObject implements definition.View {
     }
 
     protected static restoreChildOriginalParams(view: View): void {
-        if(!view) {
+        if (!view) {
             return;
         }
         let lp: CommonLayoutParams = view.style._getValue(style.nativeLayoutParamsProperty);
@@ -1180,8 +1179,7 @@ export class View extends ProxyObject implements definition.View {
         if (!view) {
             throw new Error("Expecting a valid View instance.");
         }
-        if(!(view instanceof View))
+        if (!(view instanceof View)) {
-        {
             throw new Error(view + " is not a valid View instance.");
         }
         if (view._parent) {
@@ -1439,7 +1437,9 @@ export class View extends ProxyObject implements definition.View {
     }
 
     // TODO: Make sure the state is set to null and this is called on unloaded to clean up change listeners...
-    _onCssStateChange(previous: CssState, next: CssState): void {
+    _setCssState(next: CssState): void {
+        const previous = this._cssState;
+        this._cssState = next;
 
         if (!this._invalidateCssHandler) {
             this._invalidateCssHandler = () => {

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

@@ -605,7 +605,7 @@ declare module "ui/core/view" {
         _domId: number;
 
         _cssState: any /* "ui/styling/style-scope" */;
-        _onCssStateChange(previous: any /* "ui/styling/style-scope" */, any /* "ui/styling/style-scope" */);
+        _setCssState(next: any /* "ui/styling/style-scope" */);
 
         _registerAnimation(animation: keyframeAnimationModule.KeyframeAnimation);
         _unregisterAnimation(animation: keyframeAnimationModule.KeyframeAnimation);

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

@@ -201,10 +201,8 @@ export class StyleScope {
 
         let state = this._selectors.query(view);
 
-        let previousState = view._cssState;
         let nextState = new CssState(view, state);
-        view._cssState = nextState;
+        view._setCssState(nextState);
-        view._onCssStateChange(previousState, nextState);
     }
 
     public query(node: Node): SelectorCore[] {