@breakside/jskit 2021.37.0 → 2021.39.0

package/Root/Frameworks/UIKit/UICheckbox.js

@@ -17,6 +17,7 @@
 // #import "UILabel.js"
 // #import "UIImageView.js"
 // #import "UIEvent.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -255,16 +256,16 @@ JSClass("UICheckboxDefaultStyler", UICheckboxStyler, {
     shadowRadius: 1,
 
     init: function(){
-        this.normalBackgroundColor = UICheckboxDefaultStyler.NormalBackgroundColor;
-        this.disabledBackgroundColor = UICheckboxDefaultStyler.DisabledBackgroundColor;
-        this.activeBackgroundColor = UICheckboxDefaultStyler.ActiveBackgroundColor;
-        this.normalBorderColor = UICheckboxDefaultStyler.NormalBorderColor;
-        this.disabledBorderColor = UICheckboxDefaultStyler.DisabledBorderColor;
-        this.activeBorderColor = UICheckboxDefaultStyler.ActiveBorderColor;
-        this.normalTitleColor = UICheckboxDefaultStyler.NormalTitleColor;
-        this.disabledTitleColor = UICheckboxDefaultStyler.DisabledTitleColor;
-        this.activeTitleColor = UICheckboxDefaultStyler.ActiveTitleColor;
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.1);
+        this.normalBackgroundColor = JSColor.controlBackground;
+        this.disabledBackgroundColor = JSColor.disabledControlBackground;
+        this.activeBackgroundColor = JSColor.activeControlBackground;
+        this.normalBorderColor = JSColor.controlBorder;
+        this.disabledBorderColor = JSColor.disabledControlBorder;
+        this.activeBorderColor = JSColor.activeControlBorder;
+        this.normalTitleColor = JSColor.controlTitle;
+        this.disabledTitleColor = JSColor.disabledControlTitle;
+        this.activeTitleColor = JSColor.activeControlTitle;
+        this.shadowColor = JSColor.controlShadow;
         this.shadowOffset = JSPoint(0, 1);
     },
 
@@ -344,18 +345,6 @@ JSClass("UICheckboxDefaultStyler", UICheckboxStyler, {
 
 });
 
-UICheckboxDefaultStyler.NormalBackgroundColor = JSColor.initWithRGBA(250/255,250/255,250/255);
-UICheckboxDefaultStyler.ActiveBackgroundColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-UICheckboxDefaultStyler.DisabledBackgroundColor = JSColor.initWithRGBA(240/255,240/255,240/255);
-
-UICheckboxDefaultStyler.NormalBorderColor = JSColor.initWithRGBA(204/255,204/255,204/255);
-UICheckboxDefaultStyler.ActiveBorderColor = JSColor.initWithRGBA(192/255,192/255,192/255);
-UICheckboxDefaultStyler.DisabledBorderColor = JSColor.initWithRGBA(224/255,224/255,224/255);
-
-UICheckboxDefaultStyler.NormalTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-UICheckboxDefaultStyler.ActiveTitleColor = JSColor.initWithRGBA(51/255,51/255,51/255);
-UICheckboxDefaultStyler.DisabledTitleColor = JSColor.initWithRGBA(152/255,152/255,152/255);
-
 var images = Object.create({}, {
 
     bundle: {

package/Root/Frameworks/UIKit/UIColorPanel.js

@@ -1,3 +1,18 @@
+// Copyright 2021 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
 // #import "UIPopupWindow.js"
 // #import "UISlider.js"
 // #import "UITextField.js"
@@ -153,16 +168,13 @@ JSClass("UIColorPanelViewController", UIViewController, {
         wellStyler.disabledBorderWidth = 0;
         wellStyler.cornerRadius = 3;
         var componentStyler = UITextFieldCustomStyler.init();
-        componentStyler.backgroundColor = JSColor.white.colorWithAlpha(0.4);
-        componentStyler.activeBackgroundColor = JSColor.white.colorWithAlpha(0.8);
+        componentStyler.backgroundColor = JSColor.initWithUIStyles(JSColor.white, JSColor.white.colorWithAlpha(0.1));
         componentStyler.cornerRadius = 3;
         componentStyler.textInsets = JSInsets(3, 4);
-        componentStyler.textColor = JSColor.black;
-        componentStyler.placeholderColor = JSColor.black.colorWithAlpha(0.4);
+        componentStyler.textColor = JSColor.text;
+        componentStyler.placeholderColor = JSColor.placeholderText;
         componentStyler.borderWidth = 1;
-        componentStyler.borderColor = JSColor.black.colorWithAlpha(0.2);
-        componentStyler.activeBorderColor = JSColor.black.colorWithAlpha(0.4);
-        componentStyler.disabledBorderColor = JSColor.black.colorWithAlpha(0.2);
+        componentStyler.borderColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.black.colorWithAlpha(0.4));
         this.saturationBrightnessControl = UIColorPanelTwoAxisSlider.init();
         this.hueSlider = UISlider.initWithStyler(hueStyler);
         this.alphaSlider = UISlider.initWithStyler(alphaStyler);
@@ -203,7 +215,7 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.hexLabel.text = "Hex";
         this._updateComponentLabels();
         this.component4Label.text = "Alpha";
-        this.hexLabel.textColor = JSColor.initWithWhite(0.5);
+        this.hexLabel.textColor = JSColor.text.colorWithAlpha(0.5);
         this.component1Label.textColor = this.hexLabel.textColor;
         this.component2Label.textColor = this.hexLabel.textColor;
         this.component3Label.textColor = this.hexLabel.textColor;
@@ -216,7 +228,7 @@ JSClass("UIColorPanelViewController", UIViewController, {
 
         var hashLabel = UILabel.init();
         hashLabel.font = this.hexField.font;
-        hashLabel.textColor = JSColor.initWithWhite(0.6);
+        hashLabel.textColor = JSColor.text.colorWithAlpha(0.4);
         hashLabel.text = "#";
         hashLabel.sizeToFit();
         this.hexField.leftAccessoryView = hashLabel;
@@ -733,12 +745,12 @@ JSClass("UIColorPanelTwoAxisSlider", UIControl, {
         this._maximumValue = JSPoint(1, 1);
         this.knobSize = JSSize(16, 16);
         this._value = JSPoint(0, 0);
-        this.normalKnobBackgroundColor = JSColor.white;
-        this.activeKnobBackgroundColor = JSColor.white;
-        this.disabledKnobBackgroundColor = this.normalKnobBackgroundColor.colorWithAlpha(0.5);
-        this.normalKnobBorderColor = JSColor.black.colorWithAlpha(0.2);
-        this.activeKnobBorderColor = JSColor.black.colorWithAlpha(0.3);
-        this.disabledKnobBorderColor = JSColor.black.colorWithAlpha(0.1);
+        this.normalKnobBackgroundColor = JSColor.controlBackground;
+        this.activeKnobBackgroundColor = JSColor.activeControlBackground;
+        this.disabledKnobBackgroundColor = JSColor.disabledControlBackground;
+        this.normalKnobBorderColor = JSColor.controlBorder;
+        this.activeKnobBorderColor = JSColor.activeControlBorder;
+        this.disabledKnobBorderColor = JSColor.disabledControlBorder;
         this.xLayer = UILayer.init();
         this.yLayer = UILayer.init();
         this.yLayer.backgroundGradient = JSGradient.initWithColors([JSColor.black, JSColor.black.colorWithAlpha(0)]);

package/Root/Frameworks/UIKit/UIColorSpace.js

@@ -0,0 +1,132 @@
+// Copyright 2021 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// #import Foundation
+// #import "UIUserInterface.js"
+/* global UIApplication */
+"use strict";
+
+JSClass("UIColorSpace", JSMappedColorSpace, {
+
+    name: "ui",
+    numberOfComponents: 1,
+    componentNames: {},
+    colors: null,
+
+    initWithStyles: function(lightColor, darkColor, lightContrastColor, darkContrastColor){
+        if (darkColor === undefined){
+            darkColor = lightColor;
+        }
+        if (lightContrastColor === undefined){
+            lightContrastColor = lightColor;
+        }
+        if (darkContrastColor === undefined){
+            darkContrastColor = darkColor;
+        }
+        this.colors = [
+            lightColor,
+            darkColor,
+            lightContrastColor,
+            darkContrastColor
+        ];
+    },
+
+    colorFromComponents: function(components){
+        var color = this.colors[UIColorSpace.colorIndex];
+        if (components[0] < 1){
+            color = color.colorDarkenedByPercentage(1 - components[0]);
+        }else if (components[0] > 1){
+            color = color.colorLightenedByPercentage(components[0] - 1);
+        }
+        return color;
+    },
+
+    componentsDarkenedByPercentage: function(components, percentage){
+        return [
+            components[0] * (1.0 - percentage)
+        ];
+    },
+
+    componentsLightenedByPercentage: function(components, percentage){
+        return [
+            components[0] * (1.0 + percentage)
+        ];
+    }
+
+});
+
+UIColorSpace.colorIndex = 0;
+
+UIColorSpace.setTraitCollection = function(traitCollection){
+    if (traitCollection.accessibilityContrast === UIUserInterface.Contrast.high){
+        if (traitCollection.userInterfaceStyle === UIUserInterface.Style.dark){
+            UIColorSpace.colorIndex = 3;
+        }else{
+            UIColorSpace.colorIndex = 2;
+        }
+    }else{
+        if (traitCollection.userInterfaceStyle === UIUserInterface.Style.dark){
+            UIColorSpace.colorIndex = 1;
+        }else{
+            UIColorSpace.colorIndex = 0;
+        }
+    }
+    if (JSColor.invalidateCSSCache){
+        JSColor.invalidateCSSCache();
+    }
+};
+
+JSClass("UINamedColorSpace", JSNamedColorSpace, {
+
+    setColorForName: function(name, color){
+        var namedColor = UINamedColorSpace.$super.setColorForName.call(this, name, color);
+        if (JSGlobalObject.UIApplication && UIApplication.shared){
+            UIApplication.shared.windowServer.setNeedsRedisplay();
+            if (JSColor.invalidateCSSCache){
+                JSColor.invalidateCSSCache();
+            }
+        }
+        var space = this;
+        Object.defineProperty(JSColor, name, {
+            configurable: true,
+            get: function(){
+                return namedColor;
+            },
+            set: function(color){
+                space.setColorForName(name, color);
+            }
+        });
+        return namedColor;
+    },
+
+    setStylesForName: function(name, lightColor, darkColor, lightContrastColor, darkContrastColor){
+        var color = JSColor.initWithUIStyles(lightColor, darkColor, lightContrastColor, darkContrastColor);
+        this.setColorForName(name, color);
+    }
+
+});
+
+Object.defineProperties(JSColorSpace, {
+
+    ui: {
+        configurable: true,
+        get: function(){
+            var space = UINamedColorSpace.init();
+            Object.defineProperty(this, "ui", {value: space});
+            return space;
+        }
+    }
+
+});

package/Root/Frameworks/UIKit/UIColorWell.js

@@ -1,3 +1,18 @@
+// Copyright 2021 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
 // #import "UIControl.js"
 // #import "UIPasteboard.js"
 // #import "UIColorPanel.js"
@@ -12,11 +27,12 @@ JSClass("UIColorWell", UIControl, {
     initWithSpec: function(spec){
         UIColorWell.$super.initWithSpec.call(this, spec);
         if (spec.containsKey("color")){
-            this._color = spec.valueForKey("color", JSColor);
+            this._color = spec.valueForKey("color", JSColor).rgbaColor();
         }
         if (spec.containsKey("allowsAlpha")){
             this._allowsAlpha = spec.valueForKey("allowsAlpha", JSColor);
         }
+        this.update();
     },
 
     commonUIControlInit: function(){
@@ -36,7 +52,7 @@ JSClass("UIColorWell", UIControl, {
     color: JSDynamicProperty("_color", JSColor.black),
 
     setColor: function(color){
-        this._color = color;
+        this._color = color.rgbaColor();
         this.update();
     },
 

package/Root/Frameworks/UIKit/UIHTMLDisplayServer.js

@@ -216,7 +216,6 @@ JSClass("UIHTMLDisplayServer", UIDisplayServer, {
     setLayerNeedsDisplay: function(layer){
         var context = this.contextForLayer(layer);
         context.needsCustomDisplay = true;
-        layer._UIHTMLDisplayServerCustomDrawing = true;
         UIHTMLDisplayServer.$super.setLayerNeedsDisplay.call(this, layer);
     },
 
@@ -433,10 +432,7 @@ JSClass("UIHTMLDisplayServer", UIDisplayServer, {
 
     _removeLayerFromDOM: function(layer){
         layer._displayServer = null;
-        if (layer._UIHTMLDisplayServerCustomDrawing){
-            // So the layer will redraw if it's ever re-added
-            layer.setNeedsDisplay();
-        }
+        layer.setNeedsRedisplay();
         var context = this.contextsByObjectID[layer.objectID];
         if (context){
             if (context.element.isConnected){

package/Root/Frameworks/UIKit/UIHTMLTextField.js

@@ -153,7 +153,7 @@ JSClass("UIHTMLTextField", UIControl, {
     // MARK: - Placeholder
 
     placeholder: JSDynamicProperty("_placeholder", null),
-    placeholderColor: JSDynamicProperty("_placeholderColor", null),
+    placeholderColor: JSDynamicProperty("_placeholderColor", JSColor.placeholderText),
 
     setPlaceholder: function(placeholder){
         this._placeholder = placeholder;
@@ -169,15 +169,6 @@ JSClass("UIHTMLTextField", UIControl, {
         this.setNeedsDisplay();
     },
 
-    _createPlaceholderColor: function(){
-        var backgroundColor = this.backgroundColor;
-        if (backgroundColor === null){
-            backgroundColor = JSColor.white;
-        }
-        this._placeholderColor = backgroundColor.colorByBlendingColor(this.textColor, 0.3);
-        this._needsPlaceholderColor = true;
-    },
-
     // --------------------------------------------------------------------
     // MARK: - Secure Entry
 
@@ -205,8 +196,8 @@ JSClass("UIHTMLTextField", UIControl, {
     // MARK: - Styling
 
     textAlignment: JSDynamicProperty("_textAlignment", JSTextAlignment.left),
-    textColor: JSDynamicProperty("_textColor", JSColor.black),
-    localCursorColor: JSDynamicProperty("_localCursorColor", JSColor.black),
+    textColor: JSDynamicProperty("_textColor", JSColor.text),
+    localCursorColor: JSDynamicProperty("_localCursorColor", JSColor.highlight),
     font: JSDynamicProperty("_font", null),
 
     setTextAlignment: function(textAlignment){
@@ -291,9 +282,6 @@ JSClass("UIHTMLTextField", UIControl, {
             UIHTMLTextField.sharedStyleElement.type = "text/css";
             layer.element.ownerDocument.head.appendChild(UIHTMLTextField.sharedStyleElement);
         }
-        if (this._placeholderColor === null){
-            this._createPlaceholderColor();
-        }
         var stylesheet = UIHTMLTextField.sharedStyleElement.sheet;
         var index = stylesheet.insertRule("#%s::selection { }".sprintf(this.inputElement.id));
         this.selectionStyleRule = stylesheet.cssRules.item(index);

package/Root/Frameworks/UIKit/UIHTMLWindowServer.js

@@ -65,6 +65,7 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
     rootElement: null,
     domDocument: null,
     domWindow: null,
+    themeColorElement: null,
     _screenClientOrigin: null,
 
     setupRenderingEnvironment: function(){
@@ -85,11 +86,24 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
             body.style.overflow = 'hidden';
             body.style.borderLeft = "env(safe-area-inset-left) solid black";
             body.style.borderRight = "env(safe-area-inset-right) solid black";
+            var head = this.domDocument.head;
+            var child;
+            for (var i = head.childNodes.length - 1; i >= 0; --i){
+                child = head.childNodes[i];
+                if (child.nodeType == Node.ELEMENT_NODE){
+                    if (child.tagName.toLowerCase() === "meta" && child.getAttribute("name") == "theme-color"){
+                        head.removeChild(child);
+                    }
+                }
+            }
+            this.themeColorElement = head.appendChild(this.domDocument.createElement("meta"));
+            this.themeColorElement.setAttribute("name", "theme-color");
         }else{
             var style = this.domWindow.getComputedStyle(this.rootElement);
             if (style.position != 'absolute' && style.position != 'relative' && style.position != 'fixed'){
                 this.rootElement.style.position = 'relative';
             }
+            this.themeColorElement = null;
         }
         this.rootElement.style.userSelect = 'none';
         this.rootElement.style.mozUserSelect = 'none';
@@ -267,16 +281,21 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
     // --------------------------------------------------------------------
     // MARK: - Media Queries
 
+    darkColorSchemeListener: null,
     highContrastListener: null,
     reducedMotionListener: null,
 
     setupMediaListeners: function(){
+        this.darkColorSchemeListener = this.handleDarkColorSchemeChanged.bind(this);
+        this.darkColorSchemeQuery = this.domWindow.matchMedia("(prefers-color-scheme: dark)");
+        this.darkColorSchemeQuery.addListener(this.darkColorSchemeListener);
         this.highContrastListener = this.handleHighContrastChanged.bind(this);
         this.highContrastQuery = this.domWindow.matchMedia("(prefers-contrast: more)");
         this.highContrastQuery.addListener(this.highContrastListener);
         this.reducedMotionListener = this.handleReducedMotionChanged.bind(this);
         this.reducedMotionQuery = this.domWindow.matchMedia("(prefers-reduced-motion)");
         this.reducedMotionQuery.addListener(this.reducedMotionListener);
+        this.handleDarkColorSchemeChanged(this.darkColorSchemeQuery);
         this.handleHighContrastChanged(this.highContrastQuery);
         this.handleReducedMotionChanged(this.reducedMotionQuery);
     },
@@ -286,8 +305,16 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         this.reducedMotionQuery.removeListener(this.reducedMotionListener);
     },
 
+    handleDarkColorSchemeChanged: function(query){
+        var style = query.matches ? UIUserInterface.Style.dark : UIUserInterface.Style.light;
+        this.traitCollection = this._traitCollection.traitsWithUserInterfaceStyle(style);
+        this.updateThemeColorElement();
+    },
+
     handleHighContrastChanged: function(query){
-        this.contrast = query.matches ? UIUserInterface.Contrast.high : UIUserInterface.Contrast.normal;
+        var contrast = query.matches ? UIUserInterface.Contrast.high : UIUserInterface.Contrast.normal;
+        this.traitCollection = this._traitCollection.traitsWithContrast(contrast);
+        this.updateThemeColorElement();
     },
 
     handleReducedMotionChanged: function(query){
@@ -872,6 +899,50 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         }
     },
 
+    orderWindowFront: function(window){
+        UIHTMLWindowServer.$super.orderWindowFront.call(this, window);
+        if (window.subviewIndex === 0){
+            this.updateThemeColorElement();
+        }
+    },
+
+    // --------------------------------------------------------------------
+    // MARK: - Menu Bar
+
+    setMenuBar: function(menuBar){
+        UIHTMLWindowServer.$super.setMenuBar.call(this, menuBar);
+        this.updateThemeColorElement();
+    },
+
+    updateThemeColorElement: function(){
+        if (this.themeColorElement === null){
+            return;
+        }
+        var window = this._menuBar;
+        var color = null;
+        if (window === null && this.windowStack.length > 0){
+            window = this.windowStack[0];
+        }
+        if (window !== null){
+            var vc = window.contentViewController;
+            if ((vc instanceof UISplitViewController) && vc.view.mainHidden){
+                vc = vc.leadingViewController;
+            }
+            if (vc instanceof UINavigationController){
+                color = vc.navigationBar.backgroundColor;
+            }else if (window.backgroundGradient !== null){
+                color = window.backgroundGradient.stops[0].color;
+            }else if (window.backgroundColor !== null){
+                color = window.backgroundColor;
+            }
+        }
+        if (color !== null){
+            this.themeColorElement.setAttribute("content", color.cssString());
+        }else{
+            this.themeColorElement.setAttribute("content", JSColor.background);
+        }
+    },
+
     // --------------------------------------------------------------------
     // MARK: - Screen Updates
 

package/Root/Frameworks/UIKit/UIImageView.js

@@ -15,6 +15,7 @@
 
 // #import "UIView.js"
 // #import "UIImageLayer.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 JSClass("UIImageView", UIView, {
@@ -32,6 +33,7 @@ JSClass("UIImageView", UIView, {
     initWithFrame: function(frame){
         UIImageView.$super.initWithFrame.call(this, frame);
         this._contentInsets = JSInsets.Zero;
+        this.templateColor = JSColor.text;
         this._commonImageViewInit();
     },
 
@@ -39,6 +41,8 @@ JSClass("UIImageView", UIView, {
         UIImageView.$super.initWithSpec.call(this, spec);
         if (spec.containsKey('templateColor')){
             this.templateColor = spec.valueForKey("templateColor", JSColor);
+        }else{
+            this.templateColor = JSColor.text;
         }
         if (spec.containsKey("automaticRenderMode")){
             this.automaticRenderMode = spec.valueForKey("automaticRenderMode", JSImage.RenderMode);

package/Root/Frameworks/UIKit/UIKit.js

@@ -26,6 +26,8 @@
 // Application
 // #import "UIApplication.js"
 // #import "UIPlatform.js"
+// #import "JSColor+UIKit.js"
+// #import "UIColorSpace.js"
 
 // Layers & Views
 // #import "UIResponder.js"

package/Root/Frameworks/UIKit/UILabel.js

@@ -38,7 +38,8 @@ JSClass('UILabel', UIView, {
     initWithFrame: function(frame){
         UILabel.$super.initWithFrame.call(this, frame);
         this.maximumNumberOfLines = 1;
-        this._selectionColor = JSColor.white.colorWithAlpha(0.2);
+        this.textColor = JSColor.text;
+        this._selectionColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
     },
 
     initWithSpec: function(spec){
@@ -51,6 +52,8 @@ JSClass('UILabel', UIView, {
         }
         if (spec.containsKey("textColor")){
             this.textColor = spec.valueForKey("textColor", JSColor);
+        }else{
+            this.textColor = JSColor.text;
         }
         if (spec.containsKey("textAlignment")){
             this.textAlignment = spec.valueForKey("textAlignment", JSTextAlignment);
@@ -72,7 +75,16 @@ JSClass('UILabel', UIView, {
         if (spec.containsKey("selectionColor")){
             this._selectionColor = spec.valueForKey("selectionColor");
         }else{
-            this._selectionColor = JSColor.white.colorWithAlpha(0.2);
+            this._selectionColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
+        }
+    },
+
+    tooltip: JSDynamicProperty("_tooltip"),
+
+    setTooltip: function(tooltip){
+        this._tooltip = tooltip;
+        if (this._tooltip !== null){
+            this.userInteractionEnabled = true;
         }
     },
 

package/Root/Frameworks/UIKit/UILayer.js

@@ -686,6 +686,16 @@ JSClass("UILayer", JSObject, {
         }
     },
 
+    setNeedsRedisplay: function(){
+        this.didChangeProperty("backgroundColor");
+        this.didChangeProperty("backgroundGradient");
+        this.didChangeProperty("borderColor");
+        this.didChangeProperty("shadowColor");
+        if (this.performsCustomDrawing){
+            this.setNeedsDisplay();
+        }
+    },
+
     displayIfNeeded: function(){
         if (this._displayServer !== null){
             this._displayServer.displayLayerIfNeeded(this);
@@ -699,6 +709,15 @@ JSClass("UILayer", JSObject, {
         }
     },
 
+    performsCustomDrawing: JSReadOnlyProperty(),
+
+    getPerformsCustomDrawing: function(){
+        if (this.delegate && this.delegate.drawLayerInContext){
+            return true;
+        }
+        return this.drawInContext !== UILayer.prototype.drawInContext;
+    },
+
     drawInContext: function(context){
     },
 
@@ -714,7 +733,16 @@ JSClass("UILayer", JSObject, {
         if (this._displayServer !== null){
             var displayContext = this._displayServer.contextForLayer(this);
             if (context === displayContext){
-                this.setNeedsDisplay();
+                var layers = [this];
+                var layer;
+                var i, l;
+                while (layers.length > 0){
+                    layer = layers.shift();
+                    layer.setNeedsRedisplay();
+                    for (i = 0, l = layer.sublayers.length; i < l; ++i){
+                        layers.push(layer.sublayers[i]);
+                    }
+                }
                 return;
             }
         }