@breakside/jskit 2021.36.0 → 2021.39.0

package/Root/Frameworks/UIKit/UITextField.js

@@ -21,6 +21,7 @@
 // #import "UITextAttachmentView.js"
 // #import "UIImageView.js"
 // #import "UIPasteboard.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -133,6 +134,9 @@ JSClass("UITextField", UIControl, {
         if (this._styler === null){
             this._styler = UITextField.Styler.default;
         }
+        this.hasOverState = this._styler.showsOverState;
+        this.textColor = JSColor.text;
+        this._placeholderColor = JSColor.placeholderText;
         this._styler.initializeControl(this);
     },
 
@@ -237,22 +241,11 @@ JSClass("UITextField", UIControl, {
         this._placeholderLabel.hidden = true;
         this._placeholderLabel.layer.widthTracksText = this._textLayer.widthTracksText;
         this._placeholderLabel.layer.heightTracksText = true;
-        if (this._placeholderColor === null){
-            this._createPlaceholderColor();
-        }
         this._placeholderLabel.textColor = this._placeholderColor;
         this._clipView.insertSubviewAtIndex(this._placeholderLabel, 0);
         this._clipView.layer.insertSublayerBelowSibling(this._placeholderLabel.layer, this._textLayer);
     },
 
-    _createPlaceholderColor: function(){
-        var backgroundColor = this.backgroundColor;
-        if (backgroundColor === null){
-            backgroundColor = JSColor.white;
-        }
-        this._placeholderColor = backgroundColor.colorByBlendingColor(this.textColor, 0.3);
-    },
-
     _placeholderLabel: null,
 
     _isShowingPlaceholder: false,
@@ -1266,7 +1259,7 @@ JSClass("UITextFieldStyler", UIControlStyler, {
 
     _commonStylerInit: function(){
         if (this.localCursorColor === null){
-            this.localCursorColor = JSColor.initWithRGBA(0, 128/255.0, 255/255.0, 1);
+            this.localCursorColor = JSColor.highlight;
         }
     },
 
@@ -1316,8 +1309,8 @@ JSClass("UITextFieldDefaultStyler", UITextFieldStyler, {
     },
 
     _commonDefaultStylerInit: function(){
-        this.activeColor = JSColor.black;
-        this.inactiveColor = JSColor.initWithWhite(0.8);
+        this.activeColor = JSColor.highlight;
+        this.inactiveColor = JSColor.text.colorWithAlpha(0.2);
         this.textInsets = JSInsets(3, 0);
     },
 
@@ -1354,6 +1347,8 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
     activeBackgroundColor: null,
     disabledBackgroundColor: null,
     borderColor: null,
+    overBackgroundColor: null,
+    overBorderColor: null,
     activeBorderColor: null,
     disabledBorderColor: null,
     borderWidth: 0,
@@ -1363,6 +1358,11 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
     textInsets: null,
     showsFocusRing: true,
 
+    init: function(){
+        UITextFieldCustomStyler.$super.init.call(this);
+        this.textColor = JSColor.text;
+    },
+
     initWithSpec: function(spec){
         UITextFieldCustomStyler.$super.initWithSpec.call(this, spec);
         if (spec.containsKey("backgroundColor")){
@@ -1385,6 +1385,8 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
         }
         if (spec.containsKey("textColor")){
             this.textColor = spec.valueForKey("textColor", JSColor);
+        }else{
+            this.textColor = JSColor.text;
         }
         if (spec.containsKey("placeholderColor")){
             this.placeholderColor = spec.valueForKey("placeholderColor", JSColor);
@@ -1399,7 +1401,13 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
             this.textInsets = spec.valueForKey("textInsets", JSInsets);
         }
         if (spec.containsKey("showsFocusRing")){
-            this.showsFocusRing = spec.valueForKey("showsFocusRing", JSInsets);
+            this.showsFocusRing = spec.valueForKey("showsFocusRing");
+        }
+        if (spec.containsKey("overBackgroundColor")){
+            this.overBackgroundColor = spec.valueForKey("overBackgroundColor", JSColor);
+        }
+        if (spec.containsKey("overBorderColor")){
+            this.overBorderColor = spec.valueForKey("overBorderColor", JSColor);
         }
     },
 
@@ -1422,16 +1430,19 @@ JSClass("UITextFieldCustomStyler", UITextFieldStyler, {
     updateControl: function(textField){
         UITextFieldCustomStyler.$super.updateControl.call(this, textField);
         if (textField.active){
-            if (this.activeBackgroundColor){
-                textField.backgroundColor = this.activeBackgroundColor;
-                textField.borderColor = this.activeBorderColor;
+            textField.backgroundColor = this.activeBackgroundColor || this.backgroundColor;
+            textField.borderColor = this.activeBorderColor || this.borderColor;
+        }else if (textField.enabled){
+            if (textField.over){
+                textField.backgroundColor = this.overBackgroundColor || this.backgroundColor;
+                textField.borderColor = this.overBorderColor || this.borderColor;
+            }else{
+                textField.backgroundColor = this.backgroundColor;
+                textField.borderColor = this.borderColor;
             }
-        }else if (!textField.enabled && this.disabledBackgroundColor !== null){
-            textField.backgroundColor = this.disabledBackgroundColor;
-            textField.borderColor = this.disabledBorderColor;
         }else{
-            textField.backgroundColor = this.backgroundColor;
-            textField.borderColor = this.borderColor;
+            textField.backgroundColor = this.disabledBackgroundColor || this.backgroundColor;
+            textField.borderColor = this.disabledBorderColor || this.borderColor;
         }
     },
 

package/Root/Frameworks/UIKit/UITextLayer.js

@@ -261,6 +261,11 @@ JSClass("UITextLayer", UILayer, {
         return this._textContainer;
     },
 
+    setNeedsRedisplay: function(){
+        UITextLayer.$super.setNeedsRedisplay.call(this);
+        this._textLayoutManager.setNeedsLayout();
+    }
+
 });
 
 })();

package/Root/Frameworks/UIKit/UITokenField.js

@@ -173,7 +173,7 @@ JSClass("UITokenField", UITextField, {
         }
         str = representedObject.toString();
         return UITokenFieldTokenView.initWithString(str, this);
-    },
+    }
 
 });
 
@@ -194,8 +194,8 @@ JSClass("UITokenFieldTokenView", UIView, {
         this.textField = textField;
         this.tokenLabel.font = this.textField.font;
         this.tokenLabel.text = str;
-        this.tokenLabel.backgroundColor = JSColor.initWithRGBA(210/255, 231/255, 251/255, 1.0);
-        this.tokenLabel.borderColor = JSColor.initWithRGBA(116/255, 181/255, 243/255, 1.0);
+        this.tokenLabel.backgroundColor = JSColor.initWithUIStyles(JSColor.highlight.colorLightenedByPercentage(0.8), JSColor.highlight.colorDarkenedByPercentage(0.6));
+        this.tokenLabel.borderColor = JSColor.initWithUIStyles(JSColor.highlight, JSColor.black);
         this.backgroundColor = null;
         this.tokenLabel.borderWidth = 0.5;
         this.tokenLabel.cornerRadius = 3.0;

package/Root/Frameworks/UIKit/UIToolbar.js

@@ -32,6 +32,7 @@ JSClass("UIToolbar", UIView, {
     },
 
     initWithStyler: function(styler){
+        UIToolbar.$super.init.call(this);
         this._items = [];
         this._imageSize = UIToolbar.ImageSize.default;
         this._styler = styler;
@@ -117,7 +118,7 @@ JSClass("UIToolbar", UIView, {
 
     setShowsTitles: function(showsTitles){
         this._showsTitles = showsTitles;
-        this._styler.updateToolbar();
+        this._styler.updateToolbar(this);
     },
 
     imageSize: JSDynamicProperty('_imageSize', 0),
@@ -176,7 +177,7 @@ UIToolbar.Styler = Object.create({}, {
     default: {
         configurable: true,
         get: function UIToolbarStyler_getDefault(){
-            var styler = UIToolbarCustomStyler.initWithItemColor(JSColor.initWithWhite(0.2));
+            var styler = UIToolbarCustomStyler.init();
             styler.itemSpacing = 7;
             Object.defineProperty(this, 'default', {writable: true, value: styler});
             return styler;
@@ -235,6 +236,14 @@ JSClass("UIToolbarItemView", UIView, {
                     break;
             }
         }
+        if (item.toolbar.showsTitles){
+            this.titleLabel.hidden = false;
+            this.titleLabel.text = item.title;
+        }else{
+            if (this._titleLabel !== null){
+                this._titleLabel.hidden = true;
+            }
+        }
         this.contentView.tooltip = item.tooltip;
         this.addSubview(this.contentView);
     },
@@ -242,38 +251,64 @@ JSClass("UIToolbarItemView", UIView, {
     _createTitleLabel: function(){
         var label = UILabel.init();
         label.textAlignment = JSTextAlignment.center;
+        label.font = this.item.toolbar.styler.itemFont;
         this.addSubview(label);
         return label;
     },
 
     layoutSubviews: function(){
         var toolbar = this._item.toolbar;
-        if (this._item.identifier == UIToolbarItem.Identifier.custom && toolbar.showsTitles){
-            var titleHeight = toolbar.styler.itemFont.displayLineHeight;
+        if (this._item.identifier == UIToolbarItem.Identifier.custom){
+            var bounds = this.bounds;
+            if (toolbar.showsTitles){
+                var titleHeight = toolbar.styler.itemFont.displayLineHeight;
+                this.titleLabel.frame = JSRect(0, bounds.size.height - titleHeight, bounds.size.width, titleHeight);
+                bounds = bounds.rectWithInsets(0, 0, titleHeight, 0);
+            }
             var width;
+            var height;
+            if (!isNaN(this._item.minimumWidth) && this._item.minimumWidth > 0){
+                width = this._item.minimumWidth;
+            }else if (this._item.view !== null){
+                width = this._item.view.intrinsicSize.width;
+            }else{
+                width = this._item.image.size.width * toolbar._imageSize / this._item.image.size.height;
+            }
             if (this._item.view !== null){
-                width = this._item.minimumSize.width;
+                height = this._item.view.intrinsicSize.height;
+                if (height === UIView.noIntrinsicSize){
+                    height = bounds.size.height;
+                }
             }else{
-                width = this._item.image.size.width * toolbar.imageSize / this._item.image.size.height;
+                height = bounds.size.height;
             }
-            this.contentView.frame = JSRect((this.bounds.size.width - width) / 2.0, 0, width, this.bounds.size.height - titleHeight);
-            this.titleLabel.frame = JSRect(0, this.bounds.size.height - titleHeight, this.bounds.size.width, titleHeight);
+            this.contentView.frame = JSRect((bounds.size.width - width) / 2.0, (bounds.size.height - height) / 2.0, width, height);
         }else{
             this.contentView.frame = this.bounds;
         }
     },
 
     getIntrinsicSize: function(){
-        var minWidth = this._item.minimumWidth;
-        if (!isNaN(minWidth) && minWidth > 0){
-            return JSSize(minWidth, UIView.noIntrinsicSize);
-        }
-        var contentSize = this.contentView.intrinsicSize;
-        if (this._item.toolbar.showsTitles){
-            var titleSize = this.titleLabel.intrinsicSize;
-            return JSSize(Math.max(contentSize.width, titleSize.width), UIView.noIntrinsicSize);
+        var toolbar = this._item.toolbar;
+        var width;
+        if (this._item.identifier == UIToolbarItem.Identifier.custom){
+            if (!isNaN(this._item.minimumWidth) && this._item.minimumWidth > 0){
+                width = this._item.minimumWidth;
+            }else if (this._item.view !== null){
+                width = this._item.view.intrinsicSize.width;
+            }else{
+                width = this._item.image.size.width * toolbar._imageSize / this._item.image.size.height;
+            }
+            if (toolbar.showsTitles){
+                var titleSize = this.titleLabel.intrinsicSize;
+                if (titleSize.width > width){
+                    width = Math.ceil(titleSize.width);
+                }
+            }
+        }else{
+            width = this.contentView.intrinsicSize.width;
         }
-        return contentSize;
+        return JSSize(width, UIView.noIntrinsicSize);
     },
 
     mouseDown: function(event){
@@ -432,9 +467,14 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
     contentInsets: null,
     itemSpacing: 0,
 
-    initWithItemColor: function(itemColor){
+    init: function(){
         this.contentInsets = JSInsets(5);
+        this._fillInMissingStyles();
+    },
+
+    initWithItemColor: function(itemColor){
         this.itemColor = itemColor;
+        this.contentInsets = JSInsets(5);
         this._fillInMissingStyles();
     },
 
@@ -468,13 +508,14 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
             this.itemFont = JSFont.systemFontOfSize(JSFont.Size.detail).fontWithWeight(JSFont.Weight.normal);
         }
         if (this.itemColor === null){
-            this.itemColor = JSColor.initWithWhite(0.8);
+            this.itemColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.7), JSColor.white.colorWithAlpha(0.7));
+            this.activeItemColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.9), JSColor.white.colorWithAlpha(0.5));
         }
         if (this.activeItemColor === null){
             this.activeItemColor = this.itemColor.colorDarkenedByPercentage(0.5);
         }
         if (this.disabledItemColor === null){
-            this.disabledItemColor = this.itemColor.colorWithAlpha(0.5);
+            this.disabledItemColor = this.itemColor.colorWithAlpha(0.4);
         }
     },
 
@@ -517,14 +558,22 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
                 itemView.contentView.alpha = 0.4;
             }
         }
+        if (itemView.contentView instanceof UIImageView){
+            if (itemView.active){
+                itemView.contentView.templateColor = this.activeItemColor;
+            }else if (item.enabled){
+                itemView.contentView.templateColor = this.itemColor;
+            }else{
+                itemView.contentView.templateColor = this.disabledItemColor;
+            }
+        }
         if (toolbar.showsTitles){
-            item.titleLabel.text = item.title;
             if (itemView.active){
-                item.titleLabel.textColor = this.activeItemColor;
+                itemView.titleLabel.textColor = this.activeItemColor;
             }else if (item.enabled){
-                item.titleLabel.textColor = this.itemColor;
+                itemView.titleLabel.textColor = this.itemColor;
             }else{
-                item.titleLabel.textColor = this.disabledItemColor;
+                itemView.titleLabel.textColor = this.disabledItemColor;
             }
         }
     },
@@ -532,7 +581,7 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
     createOverflowButtonForToolbar: function(toolbar){
         var styler = UIButtonCustomStyler.initWithColor(this.itemColor);
         var button = UIButton.initWithStyler(styler);
-        button.image = images.toolbarOverflow;
+        button.setImageForState(images.toolbarOverflow, UIControl.State.normal);
         button.addAction(function(){
             var menu = this.createOverflowMenuForToolbar(toolbar);
             if (menu !== null){
@@ -581,7 +630,7 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
     },
 
     showOverflowMenuForToolbar: function(menu, toolbar, overflowButton){
-        menu.openAdjacentToView(overflowButton, UIMenu.placement.below);
+        menu.openAdjacentToView(overflowButton, UIMenu.Placement.below);
     },
 
     layoutToolbar: function(toolbar){
@@ -619,9 +668,9 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
                 props.overflowButton = this.createOverflowButtonForToolbar(toolbar);
             }
             size = props.overflowButton.intrinsicSize;
-            props.overflowButton.frame = JSRect(toolbar.width - this.contentInsets.right - size.width, y + (maxHeight - size.height) / 2.0, size.width, size.height);
+            props.overflowButton.frame = JSRect(toolbar.bounds.size.width - this.contentInsets.right - size.width, y + (maxHeight - size.height) / 2.0, size.width, size.height);
             // reduce available width by overflow button width
-            availableWidth -= props.overflowButton.frame.width - this.itemSpacing;
+            availableWidth -= props.overflowButton.bounds.size.width - this.itemSpacing;
             // Back up over any overflowing items
             for (; props.lastVisibleIndex >= 0 && itemsWidth > availableWidth; --props.lastVisibleIndex){
                 size = itemSizes[props.lastVisibleIndex];
@@ -647,20 +696,17 @@ JSClass("UIToolbarCustomStyler", UIToolbarStyler, {
         }
 
         // Position each item, centered vertically in the middle
+        var titleHeight = this.itemFont.displayLineHeight;
         for (i = 0, l = props.itemViews.length; i <= props.lastVisibleIndex; ++i){
             itemView = props.itemViews[i];
             itemView.hidden = false;
             item = itemView.item;
             size = itemSizes[i];
-            if (item.view !== null){
-                size.height = item.minimumSize.height;
-            }else{
-                size.height = toolbar.imageSize;
-            }
-            itemView.frame = JSRect(x, y + (maxHeight - size.height) / 2.0, size.width, size.height);
+            size.height = maxHeight;
+            itemView.frame = JSRect(x, y, size.width, size.height);
             x += size.width + this.itemSpacing;
         }
-        for (i = props.lastVisibleIndex + 1; i < itemView.length; ++i){
+        for (i = props.lastVisibleIndex + 1; i < props.itemViews.length; ++i){
             itemView = props.itemViews[i];
             itemView.hidden = true;
         }
@@ -693,9 +739,9 @@ var images = Object.create({}, {
     toolbarOverflow: {
         configurable: true,
         get: function(){
-            var image = JSImage.initWithResourceName("UIToolbarOverflow", this.bundle);
-            Object.defineProperty(this, 'toolbarOverflow', {value: image.imageWithRenderingMode(JSImage.RenderMode.template) });
-            return this.toolbarOverflow;
+            var image = JSImage.initWithResourceName("UIToolbarOverflow", this.bundle).imageWithRenderMode(JSImage.RenderMode.template);
+            Object.defineProperty(this, 'toolbarOverflow', {value: image });
+            return image;
         }
     },
 

package/Root/Frameworks/UIKit/UIToolbarOverflow.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>UIToolbarOverflow</title>
+    <g id="UIToolbarOverflow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <polygon id="Path-Copy" fill="#000000" fill-rule="nonzero" points="8 1 8 4 11 7.5 8 11 8 14 14 7.5"></polygon>
+        <polygon id="Path" fill="#000000" fill-rule="nonzero" points="2 1 2 4 5 7.5 2 11 2 14 8 7.5"></polygon>
+    </g>
+</svg>

package/Root/Frameworks/UIKit/UITooltipWindow.js

@@ -20,18 +20,12 @@
 JSClass("UITooltipWindow", UIWindow, {
 
     initWithString: function(str, maxSize){
-        var font = JSFont.systemFontOfSize(12.0);
-        var color = JSColor.initWithRGBA(0.2, 0.2, 0.2, 1.0);
-        var labelInsets = JSInsets(4, 6);
-        this.initWithProperties(str, font, color, labelInsets, maxSize);
-    },
-
-    initWithProperties: function(str, font, textColor, labelInsets, maxSize){
-        this._styler = UIWindow.Styler.custom;
+        this._styler = UIWindow.Styler.tooltip;
         UITooltipWindow.$super.init.call(this);
+        this.layer._domPointerEventsNone = true;
         var label = UILabel.init();
-        label.font = font;
-        label.textInsets = labelInsets;
+        label.font = this._styler.font;
+        label.textInsets = this._styler.textInsets;
         if (str.isKindOfClass && str.isKindOfClass(JSAttributedString)){
             label.attributedText = str;
         }else{
@@ -42,11 +36,6 @@ JSClass("UITooltipWindow", UIWindow, {
         this.contentView = UIView.init();
         this.contentView.addSubview(label);
         this.frame = JSRect(JSPoint.Zero, label.frame.size);
-        this.backgroundColor = JSColor.initWithRGBA(240/255, 240/255, 240/255, 1.0);
-        this.borderColor = JSColor.initWithRGBA(0.7, 0.7, 0.7, 1.0);
-        this.shadowColor = JSColor.initWithRGBA(0.0, 0.0, 0.0, 0.2);
-        this.borderWidth = 0.5;
-        this.shadowRadius = 15;
     },
 
     canBecomeKey: function(){
@@ -61,4 +50,38 @@ JSClass("UITooltipWindow", UIWindow, {
 
     accessibilitySubrole: UIAccessibility.Subrole.tooltip
 
+});
+
+JSClass("UITooltipWindowStyler", UIWindowStyler, {
+
+    font: null,
+    textColor: null,
+    textInsets: null,
+    backgroundColor: null,
+    borderColor: null,
+    borderWidth: 0.5,
+    shadowColor: null,
+    shadowRadius: 15,
+    cornerRadius: 0,
+
+    init: function(){
+        UITooltipWindowStyler.$super.init.call(this);
+        this.backgroundColor = JSColor.tooltip;
+        this.borderColor = JSColor.tooltipBorder;
+        this.shadowColor = JSColor.tooltipShadow;
+        this.font = JSFont.systemFontOfSize(JSFont.Size.detail);
+        this.textColor = JSColor.tooltipText;
+        this.textInsets = JSInsets(4, 6);
+    },
+
+    initializeWindow: function(window){
+        UITooltipWindowStyler.$super.initializeWindow.call(this, window);
+        window.backgroundColor = this.backgroundColor;
+        window.borderColor = this.borderColor;
+        window.shadowColor = this.shadowColor;
+        window.borderWidth = this.borderWidth;
+        window.shadowRadius = this.shadowRadius;
+        window.cornerRadius = this.cornerRadius;
+    }
+
 });

package/Root/Frameworks/UIKit/UITraitCollection.js

@@ -27,12 +27,30 @@ JSClass("UITraitCollection", JSObject, {
         var traits = UITraitCollection.init();
         traits.horizontalSizeClass = this.horizontalSizeClass;
         traits.verticalSizeClass = this.verticalSizeClass;
+        traits.userInterfaceStyle = this.userInterfaceStyle;
         traits.accessibilityContrast = contrast;
         return traits;
     },
 
+    traitsWithUserInterfaceStyle: function(style){
+        var traits = UITraitCollection.init();
+        traits.horizontalSizeClass = this.horizontalSizeClass;
+        traits.verticalSizeClass = this.verticalSizeClass;
+        traits.userInterfaceStyle = style;
+        traits.accessibilityContrast = this.accessibilityContrast;
+        return traits;
+    },
+
+    traitsWithSize: function(size){
+        var traits = UITraitCollection.initWithSize(size);
+        traits.accessibilityContrast = this.accessibilityContrast;
+        traits.userInterfaceStyle = this.userInterfaceStyle;
+        return traits;
+    },
+
     horizontalSizeClass: UIUserInterface.SizeClass.unspecified,
     verticalSizeClass: UIUserInterface.SizeClass.unspecified,
+    userInterfaceStyle: UIUserInterface.Style.unspecified,
     accessibilityContrast: UIUserInterface.Contrast.unspecified,
 
     isEqual: function(other){
@@ -45,6 +63,9 @@ JSClass("UITraitCollection", JSObject, {
         if (this.accessibilityContrast !== other.accessibilityContrast){
             return false;
         }
+        if (this.userInterfaceStyle !== other.userInterfaceStyle){
+            return false;
+        }
         return true;
     }
 

package/Root/Frameworks/UIKit/UIUserInterface.js

@@ -49,4 +49,10 @@ UIUserInterface.Contrast = {
     unspecified: 0,
     normal: 1,
     high: 2
+};
+
+UIUserInterface.Style = {
+    unspecified: 0,
+    light: 1,
+    dark: 2
 };

package/Root/Frameworks/UIKit/UIWebView.js

@@ -14,6 +14,7 @@
 // limitations under the License.
 
 // #import "UIView.js"
+// #import "JSColor+UIKit.js"
 'use strict';
 
 (function(){
@@ -30,14 +31,14 @@ JSClass("UIWebView", UIView, {
 
     initWithFrame: function(frame){
         UIWebView.$super.initWithFrame.call(this, frame);
-        this.backgroundColor = JSColor.white;
+        this.backgroundColor = JSColor.background;
         this.setNeedsDisplay();
     },
 
     initWithSpec: function(spec){
         UIWebView.$super.initWithSpec.call(this, spec);
         if (this.backgroundColor === null){
-            this.backgroundColor = JSColor.white;
+            this.backgroundColor = JSColor.background;
         }
         if (spec.containsKey("delegate")){
             this.delegate = spec.valueForKey("delegate");