Merge pull request #2363 from NativeScript/take-2

Background performance optimizations

tns-core-modules/org.nativescript.widgets.d.ts

@@ -10,8 +10,6 @@
                     clipPath: string,
                     backgroundColor: number,
                     backgroundImage: android.graphics.Bitmap,
-                    backgroundImageWidth: number,
-                    backgroundImageHeight: number,
                     backgroundRepeat: string,
                     backgroundPosition: string,
                     backgroundPositionParsedCSSValues: native.Array<CSSValue>,
@@ -24,8 +22,6 @@
                 public getClipPath(): string;
                 public getBackgroundColor(): number;
                 public getBackgroundImage(): android.graphics.Bitmap;
-                public getBackgroundImageWidth(): number;
-                public getBackgroundImageHeight(): number;
                 public getBackgroundRepeat(): string;
                 public getBackgroundPosition(): string;
                 public getBackgroundSize(): string;

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

@@ -455,11 +455,11 @@ export class CustomLayoutView extends View implements viewDefinition.CustomLayou
 
 export class ViewStyler implements style.Styler {
     // Background and borders methods
-    private static setBackgroundBorderProperty(view: View, newValue: any, defaultValue?: any) {
+    private static setBackgroundAndBorder(view: View, newValue: any, defaultValue?: any) {
         background.ad.onBackgroundOrBorderPropertyChanged(view);
     }
 
-    private static resetBackgroundBorderProperty(view: View, nativeValue: any) {
+    private static resetBackgroundAndBorder(view: View, nativeValue: any) {
         background.ad.onBackgroundOrBorderPropertyChanged(view);
     }
 
@@ -705,15 +705,11 @@ export class ViewStyler implements style.Styler {
 
         // Use the same handler for all background/border properties
         // Note: There is no default value getter - the default value is handled in background.ad.onBackgroundOrBorderPropertyChanged
-        var borderHandler = new style.StylePropertyChangedHandler(
+        var backgroundAndBorderHandler = new style.StylePropertyChangedHandler(
-            ViewStyler.setBackgroundBorderProperty,
+            ViewStyler.setBackgroundAndBorder,
-            ViewStyler.resetBackgroundBorderProperty);
+            ViewStyler.resetBackgroundAndBorder);
 
-        style.registerHandler(style.backgroundInternalProperty, borderHandler);
+        style.registerHandler(style.backgroundInternalProperty, backgroundAndBorderHandler);
-        style.registerHandler(style.borderWidthProperty, borderHandler);
-        style.registerHandler(style.borderColorProperty, borderHandler);
-        style.registerHandler(style.borderRadiusProperty, borderHandler);
-        style.registerHandler(style.clipPathProperty, borderHandler);
 
         style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setNativeLayoutParamsProperty,

tns-core-modules/ui/styling/background-common.ts

@@ -21,46 +21,74 @@ interface CSSValue {
 }
 
 export class Background implements definition.Background {
-    public static default = new Background(undefined, undefined, undefined, undefined, undefined);
+    public static default = new Background(undefined, undefined, undefined, undefined, undefined, 0, undefined, 0, undefined);
 
     color: colorModule.Color;
     image: imageSource.ImageSource;
     repeat: string;
     position: string;
     size: string;
+    borderWidth: number = 0;
+    borderColor: colorModule.Color;
+    borderRadius: number = 0;
+    clipPath: string;
 
     constructor(
         color: colorModule.Color,
         image: imageSource.ImageSource,
         repeat: string,
         position: string,
-        size: string) {
+        size: string,
-
+        borderWidth: number,
+        borderColor: colorModule.Color,
+        borderRadius: number,
+        clipPath: string
+    ) {
         this.color = color;
         this.image = image;
         this.repeat = repeat;
         this.position = position;
         this.size = size;
+        this.borderWidth = borderWidth;
+        this.borderColor = borderColor;
+        this.borderRadius = borderRadius;
+        this.clipPath = clipPath;
     }
 
     public withColor(value: colorModule.Color): Background {
-        return new Background(value, this.image, this.repeat, this.position, this.size);
+        return new Background(value, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
     }
 
     public withImage(value: imageSource.ImageSource): Background {
-        return new Background(this.color, value, this.repeat, this.position, this.size);
+        return new Background(this.color, value, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
     }
 
     public withRepeat(value: string): Background {
-        return new Background(this.color, this.image, value, this.position, this.size);
+        return new Background(this.color, this.image, value, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
     }
 
     public withPosition(value: string): Background {
-        return new Background(this.color, this.image, this.repeat, value, this.size);
+        return new Background(this.color, this.image, this.repeat, value, this.size, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
     }
 
     public withSize(value: string): Background {
-        return new Background(this.color, this.image, this.repeat, this.position, value);
+        return new Background(this.color, this.image, this.repeat, this.position, value, this.borderWidth, this.borderColor, this.borderRadius, this.clipPath);
+    }
+    
+    public withBorderWidth(value: number): Background {
+        return new Background(this.color, this.image, this.repeat, this.position, this.size, value, this.borderColor, this.borderRadius, this.clipPath);
+    }
+
+    public withBorderColor(value: colorModule.Color): Background {
+        return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, value, this.borderRadius, this.clipPath);
+    }
+
+    public withBorderRadius(value: number): Background {
+        return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, value, this.clipPath);
+    }
+
+    public withClipPath(value: string): Background {
+        return new Background(this.color, this.image, this.repeat, this.position, this.size, this.borderWidth, this.borderColor, this.borderRadius, value);
     }
 
     public getDrawParams(width: number, height: number): definition.BackgroundDrawParams {
@@ -222,7 +250,11 @@ export class Background implements definition.Background {
     public isEmpty(): boolean {
         ensureTypes();
 
-        return types.isNullOrUndefined(this.image) && types.isNullOrUndefined(this.color);
+        return types.isNullOrUndefined(this.image) 
+            && types.isNullOrUndefined(this.color) 
+            && !this.borderWidth
+            && !this.borderRadius
+            && !this.clipPath;
     }
 
     public static equals(value1: Background, value2: Background): boolean {
@@ -236,11 +268,15 @@ export class Background implements definition.Background {
             return false;
         }
 
-        return value1.image === value2.image &&
+        return value1.image === value2.image 
-            value1.position === value2.position &&
+            && value1.position === value2.position 
-            value1.repeat === value2.repeat &&
+            && value1.repeat === value2.repeat 
-            value1.size === value2.size &&
+            && value1.size === value2.size 
-            colorModule.Color.equals(value1.color, value2.color);
+            && colorModule.Color.equals(value1.color, value2.color) 
+            && value1.borderWidth === value2.borderWidth
+            && colorModule.Color.equals(value1.borderColor, value2.borderColor) 
+            && value1.borderRadius === value2.borderRadius
+            && value1.clipPath === value2.clipPath;
     }
 }
 

tns-core-modules/ui/styling/background.android.ts

@@ -8,8 +8,8 @@ import { CacheLayerType } from "utils/utils";
 import cssValue = require("css-value");
 import background = require("ui/styling/background");
 
-var button: typeof buttonModule;
+let button: typeof buttonModule;
-var style: typeof styleModule;
+let style: typeof styleModule;
 
 function ensureLazyRequires() {
     if (!button) {
@@ -25,7 +25,7 @@ global.moduleMerge(common, exports);
 
 // We are using "ad" here to avoid namespace collision with the global android object
 export module ad {
-    var SDK: number;
+    let SDK: number;
     function getSDK() {
         if (!SDK) {
             SDK = android.os.Build.VERSION.SDK_INT;
@@ -34,62 +34,46 @@ export module ad {
         return SDK;
     }
 
-    var _defaultBackgrounds = new Map<string, android.graphics.drawable.Drawable>();
+    let _defaultBackgrounds = new Map<string, android.graphics.drawable.Drawable>();
 
     export function onBackgroundOrBorderPropertyChanged(v: view.View) {
-        var nativeView = <android.view.View>v._nativeView;
+        let nativeView = <android.view.View>v._nativeView;
-        var cache = <CacheLayerType>v._nativeView;
-        
         if (!nativeView) {
             return;
         }
-
+        
         ensureLazyRequires();
 
-        var clipPathValue = v.style._getValue(style.clipPathProperty);
+        let clipPath = v.style._getValue(style.clipPathProperty);
-
+        let background = <background.Background>v.style._getValue(style.backgroundInternalProperty);
-        var backgroundValue = <background.Background>v.style._getValue(style.backgroundInternalProperty);
+        let borderWidth = v.borderWidth;
-        var borderWidth = v.borderWidth;
+        let backgroundDrawable = nativeView.getBackground();
-        var bkg = nativeView.getBackground();
+        let density = utils.layout.getDisplayDensity();
-
+        let cache = <CacheLayerType>v._nativeView;
-        var density = utils.layout.getDisplayDensity();
+        if (v instanceof button.Button && !types.isNullOrUndefined(backgroundDrawable) && types.isFunction(backgroundDrawable.setColorFilter) &&
-
+            v.borderWidth === 0 && v.borderRadius === 0 && !clipPath &&
-        if (v instanceof button.Button && !types.isNullOrUndefined(bkg) && types.isFunction(bkg.setColorFilter) &&
-            v.borderWidth === 0 && v.borderRadius === 0 && !clipPathValue &&
             types.isNullOrUndefined(v.style._getValue(style.backgroundImageProperty)) &&
             !types.isNullOrUndefined(v.style._getValue(style.backgroundColorProperty))) {
-            let backgroundColor = (<any>bkg).backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
+            let backgroundColor = (<any>backgroundDrawable).backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
-            bkg.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
+            backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
-            (<any>bkg).backgroundColor = backgroundColor;
+            (<any>backgroundDrawable).backgroundColor = backgroundColor;
         } 
-        else if (v.borderWidth || v.borderRadius || clipPathValue || !backgroundValue.isEmpty()) {
+        else if (v.borderWidth || v.borderRadius || clipPath || !background.isEmpty()) {
-            if (!(bkg instanceof org.nativescript.widgets.BorderDrawable)) {
+            if (!(backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable)) {
-                bkg = new org.nativescript.widgets.BorderDrawable(density);
                 let viewClass = types.getClass(v);
                 if (!(v instanceof button.Button) && !_defaultBackgrounds.has(viewClass)) {
                     _defaultBackgrounds.set(viewClass, nativeView.getBackground());
                 }
-
+                
-                nativeView.setBackground(bkg);
+                backgroundDrawable = new org.nativescript.widgets.BorderDrawable(density);
+                refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
+                nativeView.setBackground(backgroundDrawable);
+            }
+            else {
+                refreshBorderDrawable(v, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
             }
             
-            (<org.nativescript.widgets.BorderDrawable>bkg).refresh(
+            if ((v.borderWidth || v.borderRadius || clipPath) && getSDK() < 18) {
-                v.borderWidth, 
-                v.borderColor ? v.borderColor.android : 0,
-                v.borderRadius,
-                clipPathValue,
-                (backgroundValue.color && backgroundValue.color.android) ? backgroundValue.color.android : 0,
-                (backgroundValue.image && backgroundValue.image.android) ? backgroundValue.image.android : null,
-                (backgroundValue.image && backgroundValue.image.android) ? backgroundValue.image.width : 0,
-                (backgroundValue.image && backgroundValue.image.android) ? backgroundValue.image.height : 0,
-                backgroundValue.repeat,
-                backgroundValue.position,
-                backgroundValue.position ? createNativeCSSValueArray(backgroundValue.position) : null,
-                backgroundValue.size,
-                backgroundValue.size ? createNativeCSSValueArray(backgroundValue.size) : null
-            );
-
-            if ((v.borderWidth || v.borderRadius || clipPathValue) && getSDK() < 18) {
                 // Switch to software because of unsupported canvas methods if hardware acceleration is on:
                 // http://developer.android.com/guide/topics/graphics/hardware-accel.html
                 cache.layerType = cache.getLayerType();
@@ -99,7 +83,7 @@ export module ad {
         else {
             // reset the value with the default native value
             if (v instanceof button.Button) {
-                var nativeButton = new android.widget.Button(nativeView.getContext());
+                let nativeButton = new android.widget.Button(nativeView.getContext());
                 nativeView.setBackground(nativeButton.getBackground());
             }
             else {
@@ -124,7 +108,55 @@ export module ad {
     }
 }
 
-function createNativeCSSValueArray(css: string): any{
+function refreshBorderDrawable(view: view.View, borderDrawable: org.nativescript.widgets.BorderDrawable){
+    let background = <background.Background>view.style._getValue(style.backgroundInternalProperty);
+    let borderWidth: number = view.borderWidth;
+    let borderColor: number = 0;
+    if (view.borderColor && view.borderColor.android){
+        borderColor = view.borderColor.android;
+    }
+    let borderRadius: number = view.borderRadius;
+    let clipPath: string = view.style._getValue(style.clipPathProperty);
+    let backgroundColor: number = 0;
+    let backgroundImage: android.graphics.Bitmap = null;
+    let backgroundRepeat: string = null;
+    let backgroundPosition: string = null;
+    let backgroundPositionParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
+    let backgroundSize: string = null;
+    let backgroundSizeParsedCSSValues: native.Array<org.nativescript.widgets.CSSValue> = null;
+    if (background){
+        if (background.color && background.color.android){
+            backgroundColor = background.color.android;
+        }
+        if (background.image && background.image.android){
+            backgroundImage = background.image.android;
+        }
+        if (background.position){
+            backgroundPosition = background.position;
+            backgroundPositionParsedCSSValues = createNativeCSSValueArray(background.position); 
+        }
+        if (background.size){
+            backgroundSize = background.size;
+            backgroundSizeParsedCSSValues = createNativeCSSValueArray(background.size); 
+        }
+    }
+    
+    borderDrawable.refresh(
+        borderWidth, 
+        borderColor,
+        borderRadius,
+        clipPath,
+        backgroundColor,
+        backgroundImage,
+        backgroundRepeat,
+        backgroundPosition,
+        backgroundPositionParsedCSSValues,
+        backgroundSize,
+        backgroundSizeParsedCSSValues
+    );
+}
+
+function createNativeCSSValueArray(css: string): native.Array<org.nativescript.widgets.CSSValue>{
     if (!css){
         return null;
     }

tns-core-modules/ui/styling/background.d.ts

@@ -19,22 +19,32 @@ declare module "ui/styling/background" {
         repeat: string;
         position: string;
         size: string;
+        borderWidth: number;
+        borderColor: colorModule.Color;
+        borderRadius: number;
+        clipPath: string;
 
         constructor(
             color: colorModule.Color,
             image: imageSource.ImageSource,
             repeat: string,
             position: string,
-            size: string);
+            size: string,
+            borderWidth: number,
+            borderColor: colorModule.Color,
+            borderRadius: number,
+            clipPath: string
+        );
 
         public withColor(value: colorModule.Color): Background;
         public withImage(value: imageSource.ImageSource): Background;
-
         public withRepeat(value: string): Background;
-
         public withPosition(value: string): Background;
-
         public withSize(value: string): Background;
+        public withBorderWidth(value: number): Background;
+        public withBorderColor(value: colorModule.Color): Background;
+        public withBorderRadius(value: number): Background;
+        public withClipPath(value: string): Background;
 
         public getDrawParams(width: number, height: number): BackgroundDrawParams;
 

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

@@ -273,6 +273,14 @@ function isMinWidthHeightValid(value: number): boolean {
     return !isNaN(value) && value >= 0.0 && isFinite(value);
 }
 
+function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (!Color.equals(currentBackground.color, data.newValue)) {
+        style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
+    }
+}
+
 function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
     var style = <Style>data.object;
     var url: string = data.newValue;
@@ -318,22 +326,6 @@ function onBackgroundImagePropertyChanged(data: PropertyChangeData) {
     }
 }
 
-function onBackgroundColorPropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (!Color.equals(currentBackground.color, data.newValue)) {
-        style._setValue(backgroundInternalProperty, currentBackground.withColor(data.newValue));
-    }
-}
-
-function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
-    var style = <Style>data.object;
-    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
-    if (data.newValue !== currentBackground.size) {
-        style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
-    }
-}
-
 function onBackgroundRepeatPropertyChanged(data: PropertyChangeData) {
     var style = <Style>data.object;
     var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
@@ -350,6 +342,46 @@ function onBackgroundPositionPropertyChanged(data: PropertyChangeData) {
     }
 }
 
+function onBackgroundSizePropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.size) {
+        style._setValue(backgroundInternalProperty, currentBackground.withSize(data.newValue));
+    }
+}
+
+function onBorderWidthPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderWidth) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderWidth(data.newValue));
+    }
+}
+
+function onBorderColorPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderColor) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderColor(data.newValue));
+    }
+}
+
+function onBorderRadiusPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.borderRadius) {
+        style._setValue(backgroundInternalProperty, currentBackground.withBorderRadius(data.newValue));
+    }
+}
+
+function onClipPathPropertyChanged(data: PropertyChangeData) {
+    var style = <Style>data.object;
+    var currentBackground = <background.Background>style._getValue(backgroundInternalProperty);
+    if (data.newValue !== currentBackground.clipPath) {
+        style._setValue(backgroundInternalProperty, currentBackground.withClipPath(data.newValue));
+    }
+}
+
 function getHandlerInternal(propertyId: number, classInfo: types.ClassInfo): definition.StylePropertyChangedHandler {
     var className = classInfo ? classInfo.name : "default";
     var handlerKey = className + propertyId;
@@ -399,7 +431,7 @@ function isWhiteSpaceValid(value: string): boolean {
     return value === enums.WhiteSpace.nowrap || value === enums.WhiteSpace.normal;
 }
 
-function isPaddingValid(value: number): boolean {
+function isNonNegativeFiniteNumber(value: number): boolean {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
 
@@ -1065,17 +1097,17 @@ export var backgroundSizeProperty = new styleProperty.Property("backgroundSize",
 export var backgroundPositionProperty = new styleProperty.Property("backgroundPosition", "background-position",
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBackgroundPositionPropertyChanged));
 
-export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
-    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals), converters.colorConverter);
-
 export var borderWidthProperty = new styleProperty.Property("borderWidth", "border-width",
-    new PropertyMetadata(0, AffectsLayout, null, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(0, AffectsLayout, onBorderWidthPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
+
+export var borderColorProperty = new styleProperty.Property("borderColor", "border-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, onBorderColorPropertyChanged, Color.isValid, Color.equals), converters.colorConverter);
 
 export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
-    new PropertyMetadata(0, AffectsLayout, null, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(0, AffectsLayout, onBorderRadiusPropertyChanged, isNonNegativeFiniteNumber), converters.numberConverter);
     
 export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
-    new PropertyMetadata(undefined, AffectsLayout, null, isClipPathValid));    
+    new PropertyMetadata(undefined, AffectsLayout, onClipPathPropertyChanged, isClipPathValid));    
 
 export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
     new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
@@ -1204,16 +1236,16 @@ export var nativePaddingsProperty = new styleProperty.Property("paddingNative",
 var defaultPadding = platform.device.os === platform.platformNames.android ? undefined : 0;
 
 export var paddingLeftProperty = new styleProperty.Property("paddingLeft", "padding-left",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 export var paddingRightProperty = new styleProperty.Property("paddingRight", "padding-right",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 export var paddingTopProperty = new styleProperty.Property("paddingTop", "padding-top",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 export var paddingBottomProperty = new styleProperty.Property("paddingBottom", "padding-bottom",
-    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isPaddingValid), converters.numberConverter);
+    new PropertyMetadata(defaultPadding, AffectsLayout, onPaddingValueChanged, isNonNegativeFiniteNumber), converters.numberConverter);
 
 // TODO: separate into .android/.ios files so that there is no need for such checks
 if (platform.device.os === platform.platformNames.android) {