@breakside/jskit 2021.36.0 → 2021.39.0

package/Root/Frameworks/UIKit/UIWindow.js

@@ -24,6 +24,7 @@
 // #import "UIViewPropertyAnimator.js"
 // #import "UIViewController.js"
 // #import "UIFocusRingLayer.js"
+/* global UISplitView */
 'use strict';
 
 (function(){
@@ -118,7 +119,7 @@ JSClass('UIWindow', UIView, {
     _commonWindowInit: function(){
         this.window = this;
         if (this.backgroundColor === null){
-            this.backgroundColor = JSColor.white;
+            this.backgroundColor = JSColor.background;
         }
         this.clipsToBounds = true;
         if (this._contentView === null){
@@ -134,8 +135,7 @@ JSClass('UIWindow', UIView, {
                 this._styler = UIWindow.Styler.default;
             }
         }
-        this._traitCollection = UITraitCollection.initWithSize(this.frame.size);
-        this._traitCollection.accessibilityContrast = this.windowServer.contrast;
+        this._traitCollection = this.windowServer.traitCollection.traitsWithSize(this.bounds.size);
         this.stylerProperties = {};
         this._styler.initializeWindow(this);
     },
@@ -178,7 +178,7 @@ JSClass('UIWindow', UIView, {
 
     setToolbar: function(toolbar){
         this._toolbar = toolbar;
-        this._styler.updateWindow();
+        this._styler.updateWindow(this);
         this.setNeedsLayout();
     },
 
@@ -308,9 +308,10 @@ JSClass('UIWindow', UIView, {
     // MARK: Traits
 
     layerDidChangeSize: function(){
-        var traits = UITraitCollection.initWithSize(this.bounds.size);
-        traits.contrast = this.windowServer.contrast;
-        this._setTraitCollection(traits);
+        if (this._traitCollection !== null){
+            var traits = this._traitCollection.traitsWithSize(this.bounds.size);
+            this._setTraitCollection(traits);
+        }
     },
     
     traitCollection: JSReadOnlyProperty('_traitCollection', null),
@@ -1089,7 +1090,19 @@ UIWindow.Styler = Object.create({}, {
             Object.defineProperty(this, 'custom', {configurable: true, value: styler});
             return styler;
         },
-    }
+    },
+
+    tooltip: {
+        configurable: true,
+        get: function UIWindow_getTooltipStyler(){
+            var styler = UITooltipWindowStyler.init();
+            Object.defineProperty(this, 'tooltip', {configurable: true, value: styler});
+            return styler;
+        },
+        set: function UIWindow_setTooltipStyler(styler){
+            Object.defineProperty(this, 'tooltip', {configurable: true, value: styler});
+        }
+    },
 
 });
 
@@ -1111,7 +1124,7 @@ JSClass("UIWindowStyler", JSObject, {
     focusRingWidth: 3.5,
 
     init: function(){
-        this.focusRingColor = this.localCursorColor = JSColor.initWithRGBA(0, 128/255.0, 255/255.0, 0.6);
+        this.focusRingColor = JSColor.highlight;
     },
 
     initializeWindow: function(window){
@@ -1202,24 +1215,19 @@ JSClass("UIWindowDefaultStyler", UIWindowStyler, {
 
     init: function(){
         UIWindowDefaultStyler.$super.init.call(this);
-        this.activeTitleColor = JSColor.initWithWhite(51/255);
-        this.inactiveTitleColor = JSColor.initWithWhite(192/255);
-        this.shadowColor = JSColor.initWithRGBA(0, 0, 0, 0.4);
-        this.backgroundColor = JSColor.initWithRGBA(240/255,240/255,240/255,1);
-        this.titleBackgroundColor = null;
-        this.titleBackgroundGradient = JSGradient.initWithStops(
-            0, JSColor.initWithRGBA(230/255,230/255,230/255,1),
-            1, JSColor.initWithRGBA(204/255,204/255,204/255,1)
-        );
-        this.contentSeparatorColor = JSColor.initWithRGBA(0, 0, 0, 0.1);
+        this.activeTitleColor = JSColor.text;
+        this.inactiveTitleColor = JSColor.text.colorWithAlpha(0.3);
+        this.shadowColor = JSColor.windowShadow;
+        this.backgroundColor = JSColor.window;
+        this.titleBackgroundColor = JSColor.initWithUIStyles(JSColor.window.colorLightenedByPercentage(0.5), JSColor.window.colorLightenedByPercentage(0.05));
+        this.contentSeparatorColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.1), JSColor.black.colorWithAlpha(0.8));
         this.closeButtonImages = {
             inactive: images.closeInactive,
             normal: images.closeNormal,
             over: images.closeOver,
             active: images.closeActive
         };
-        this.toolbarTitleColor = JSColor.initWithWhite(102/255);
-        this.toolbarDisabledTitleColor = JSColor.initWithWhite(204/255);
+        this.toolbarTitleColor = JSColor.toolbarTitle;
     },
 
     initializeWindow: function(window){
@@ -1398,6 +1406,116 @@ JSClass("UIWindowDefaultStyler", UIWindowStyler, {
 
 });
 
+JSClass("UIWindowTitlelessStyler", UIWindowStyler, {
+
+    _titlebarSize: 22,
+    _controlButtonSize: 12,
+    shadowRadius: 40,
+    inactiveShadowRadius: 25,
+    cornerRadius: 6,
+    backgroundColor: null,
+    shadowColor: null,
+    closeButtonImages: null,
+
+    init: function(){
+        UIWindowDefaultStyler.$super.init.call(this);
+        this.shadowColor = JSColor.windowShadow;
+        this.backgroundColor = JSColor.window;
+        this.closeButtonImages = {
+            inactive: images.closeInactive,
+            normal: images.closeNormal,
+            over: images.closeOver,
+            active: images.closeActive
+        };
+        this.toolbarTitleColor = JSColor.toolbarTitle;
+    },
+
+    initializeWindow: function(window){
+        UIWindowDefaultStyler.$super.initializeWindow.call(this, window);
+        var closeButton = UIButton.initWithStyler(UIButton.Styler.custom);
+        closeButton.setImageForState(this.closeButtonImages.normal, UIControl.State.normal);
+        closeButton.setImageForState(this.closeButtonImages.over, UIControl.State.over);
+        closeButton.setImageForState(this.closeButtonImages.active, UIControl.State.active);
+        closeButton.addAction("close", window);
+
+        var controlsView = UIView.init();
+        controlsView.addSubview(closeButton);
+        window.addSubview(controlsView);
+
+        window.stylerProperties.controlsView = controlsView;
+        window.stylerProperties.closeButton = closeButton;
+        window.stylerProperties.toolbar = null;
+
+        window.shadowColor = this.shadowColor;
+        window.shadowRadius = this.shadowRadius;
+        window.cornerRadius = this.cornerRadius;
+        window.backgroundColor = this.backgroundColor;
+
+        this.updateWindow(window);
+    },
+
+    layoutWindow: function(window){
+        UIWindowDefaultStyler.$super.layoutWindow.call(this, window);
+        var controlsView = window.stylerProperties.controlsView;
+        var closeButton = window.stylerProperties.closeButton;
+        var toolbar = window.stylerProperties.toolbar;
+        var bounds = window.bounds;
+        var controlsHeight = this._controlButtonSize * 2;
+        if (toolbar){
+            controlsHeight = toolbar.frame.size.height;
+        }
+        var controlPadding = (controlsHeight - this._controlButtonSize) / 2;
+        closeButton.frame = JSRect(controlPadding, controlPadding, this._controlButtonSize, this._controlButtonSize);
+        controlsView.frame = JSRect(0, 0, controlsHeight, controlsHeight);
+        var x = controlsView.bounds.size.width;
+        if (window.contentView.isKindOfClass(UISplitView)){
+            var splitView = window.contentView;
+            x = splitView.leadingView.convertPointToView(JSPoint(splitView.leadingView.bounds.size.width, 0), window).x;
+        }
+        window.addSubview(controlsView);
+        if (toolbar){
+            toolbar.frame = JSRect(x, 0, bounds.size.width - x, toolbar.intrinsicSize.height);
+            window.insertSubviewBelowSibling(toolbar, controlsView);
+        }
+    },
+
+    updateWindow: function(window){
+        var closeButton = window.stylerProperties.closeButton;
+        var controlsView = window.stylerProperties.controlsView;
+        closeButton.hidden = !window.allowsClose;
+
+        if (window.isMainWindow || window.isKeyWindow){
+            window.shadowRadius = this.shadowRadius;
+        }else{
+            window.shadowRadius = this.inactiveShadowRadius;
+        }
+        if (window.isMainWindow){
+            closeButton.setImageForState(this.closeButtonImages.normal, UIControl.State.normal);
+        }else{
+            closeButton.setImageForState(this.closeButtonImages.inactive, UIControl.State.normal);
+        }
+
+        if (window.toolbar){
+            if (window.stylerProperties.toolbar && window.stylerProperties.toolbar !== window.toolbar){
+                window.stylerProperties.toolbar.removeFromSuperview();
+                window.stylerProperties.toolbar = null;
+            }
+            if (window.stylerProperties.toolbar === null){
+                window.stylerProperties.toolbar = window.toolbar;
+                window.insertSubviewBelowSibling(window.stylerProperties.toolbar, controlsView);
+            }
+        }else{
+            if (window.stylerProperties.toolbar !== null){
+                window.stylerProperties.toolbar.removeFromSuperview();
+                window.stylerProperties.toolbar = null;
+            }
+        }
+
+        window.contentInsets = JSInsets.Zero;
+    },
+
+});
+
 JSClass("UIWindowCustomStyler", UIWindowStyler, {
 
 });

package/Root/Frameworks/UIKit/UIWindowButtonCloseInactive.svg

@@ -5,6 +5,6 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="UIWindowButtonCloseInactive" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle id="Oval" stroke="#D8D8D8" cx="6" cy="6" r="5.5"></circle>
+        <circle id="Oval" stroke="rgb(0,0,0,0.1)" cx="6" cy="6" r="5.5"></circle>
     </g>
 </svg>

package/Root/Frameworks/UIKit/UIWindowButtonCloseNormal.svg

@@ -5,6 +5,6 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="UIWindowButtonCloseNormal" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <circle id="Oval" stroke="#979797" cx="6" cy="6" r="5.5"></circle>
+        <circle id="Oval" stroke="rgba(0,0,0,0.4)" cx="6" cy="6" r="5.5"></circle>
     </g>
 </svg>

package/Root/Frameworks/UIKit/UIWindowServer.js

@@ -21,6 +21,7 @@
 // #import "UITooltipWindow.js"
 // #import "UIDraggingSession.js"
 // #import "UIUserInterface.js"
+// #import "UIColorSpace.js"
 'use strict';
 
 (function(){
@@ -34,11 +35,10 @@ JSClass("UIWindowServer", JSObject, {
     textInputManager: null,
     keyWindow: null,
     mainWindow: null,
-    menuBar: JSDynamicProperty('_menuBar', null),
     screen: null,
-    contrast: JSDynamicProperty('_contrast', UIUserInterface.Contrast.normal),
     mouseLocation: null,
     fullKeyboardAccessEnabled: false,
+    darkModeEnabled: true,
     _windowsById: null,
     _mouseIdleTimer: null,
     _tooltipWindow: null,
@@ -51,6 +51,9 @@ JSClass("UIWindowServer", JSObject, {
     // MARK: - Creating a Window Server
 
     init: function(){
+        this._traitCollection = UITraitCollection.init();
+        this._traitCollection.accessibilityContrast = UIUserInterface.Contrast.normal;
+        this._traitCollection.userInterfaceStyle = UIUserInterface.Style.light;
         this.windowStack = [];
         this._windowsById = {};
         this._normalLevelRange = JSRange.Zero;
@@ -340,6 +343,8 @@ JSClass("UIWindowServer", JSObject, {
 
     // -----------------------------------------------------------------------
     // MARK: - Menu Bar
+    
+    menuBar: JSDynamicProperty('_menuBar', null),
 
     setMenuBar: function(menuBar){
         if (this._menuBar){
@@ -360,7 +365,12 @@ JSClass("UIWindowServer", JSObject, {
     // -----------------------------------------------------------------------
     // MARK: - Tooltips
 
+    _hideTooltipInterval: 0.15,
+
     showTooltipForView: function(view, screenLocation){
+        if (this._tooltipWindow !== null){
+            this.hideTooltip();
+        }
         var safeArea = view.window.screen.frame.rectWithInsets(3);
 
         this._tooltipSourceView = view;
@@ -389,7 +399,19 @@ JSClass("UIWindowServer", JSObject, {
         this._tooltipWindow.orderFront();
     },
 
+    _hideTooltipTimer: null,
+
+    _scheduleHideTooltip: function(){
+        if (this._hideTooltipTimer === null){
+            this._hideTooltipTimer = JSTimer.scheduledTimerWithInterval(this._hideTooltipInterval, this.hideTooltip, this);
+        }
+    },
+
     hideTooltip: function(){
+        if (this._hideTooltipTimer !== null){
+            this._hideTooltipTimer.invalidate();
+            this._hideTooltipTimer = null;
+        }
         this._tooltipWindow.close();
         this._tooltipWindow = null;
         this._tooltipSourceView = null;
@@ -412,9 +434,10 @@ JSClass("UIWindowServer", JSObject, {
             }
         }
         if (shouldHideTooltip){
-            this.hideTooltip();
             if (view !== null && view.tooltip !== null){
                 this.showTooltipForView(view, this.mouseLocation);
+            }else{
+                this._scheduleHideTooltip();
             }
         }
     },
@@ -986,17 +1009,57 @@ JSClass("UIWindowServer", JSObject, {
         }
     },
 
-    setContrast: function(contrast){
-        if (contrast === this._contrast){
+    // -----------------------------------------------------------------------
+    // MARK: - Traits
+
+    traitCollection: JSDynamicProperty("_traitCollection", null),
+
+    setTraitCollection: function(traitCollection){
+        if (!this.darkModeEnabled && traitCollection.userInterfaceStyle === UIUserInterface.Style.dark){
+            traitCollection = traitCollection.traitsWithUserInterfaceStyle(UIUserInterface.Style.light);
+        }
+        if (this._traitCollection.isEqual(traitCollection)){
+            return;
+        }
+        this._traitCollection = traitCollection;
+        UIColorSpace.setTraitCollection(traitCollection);
+        if (this.windowStack.length > 0){
+            var window;
+            for (var i = 0, l = this.windowStack.length; i < l; ++i){
+                window = this.windowStack[i];
+                window._setTraitCollection(this._traitCollection.traitsWithSize(window.bounds.size));
+            }
+            this.setNeedsRedisplay();
+        }
+    },
+
+    _needsRedisplay: false,
+
+    setNeedsRedisplay: function(){
+        if (this._needsRedisplay){
             return;
         }
-        this._contrast = contrast;
+        this._needsRedisplay = true;
+        var i, l;
+        var layers = [];
         var window;
-        for (var i = 0, l = this.windowStack.length; i < l; ++i){
+        for (i = 0, l = this.windowStack.length; i < l; ++i){
             window = this.windowStack[i];
-            window._setTraitCollection(window.traitCollection.traitsWithContrast(this._contrast));
+            layers.push(window.layer);
+        }
+        var layer;
+        var sublayer;
+        while (layers.length > 0){
+            layer = layers.shift();
+            layer.setNeedsRedisplay();
+            for (i = 0, l = layer.sublayers.length; i < l; ++i){
+                layers.push(layer.sublayers[i]);
+            }
         }
-    }
+        this.displayServer.schedule(function(){
+            this._needsRedisplay = false;
+        }, this);
+    },
 
 });
 

package/Root/Frameworks/UIKitTesting/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.UIKitTesting
-JSBundleVersion: 2021.36.0
+JSBundleVersion: 2021.39.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Templates/html/${PROJECT_NAME}/www/index.html

@@ -3,6 +3,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="rgb(38,38,38)">
   <title></title>
   <base href="/">
   <style id="bootstrap-style" type="text/css">
@@ -32,9 +34,9 @@
     font: 300 16px/24px "Source Sans Pro", "Helvetica", sans-serif;
     height: 24px;
     text-align: center;
-    color: rgb(164,164,164);
     transition-property: opacity, color, margin-top;
     transition-duration: .25s;
+    color: rgb(164,164,164);
   }
   #details {
     position: absolute;
@@ -47,9 +49,9 @@
     text-overflow: ellipsis;
     font: 300 16px/20px "Source Sans Pro", "Helvetica", sans-serif;
     text-align: center;
-    color: rgb(192,192,192);
     transition: opacity linear .5s .5s;
     opacity: 0;
+    color: rgb(192,192,192);
   }
   #progress {
     opacity: 0;
@@ -61,17 +63,17 @@
     margin-left: -51px;
     margin-top: -12px;
     border-radius: 5px;
-    background-color: rgba(245,245,245);
     height: 7px;
     overflow: hidden;
     transition-property: opacity;
     transition-duration: .25s;
+    background-color: rgba(245,245,245);
     box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
   }
   #progress-bar {
-    background-color: rgb(224,224,224);
     height: 100%;
     width: 0%;
+    background-color: rgb(224,224,224);
   }
   #splash.error #status {
     font-weight: 600;
@@ -79,6 +81,24 @@
   #splash.error #details {
     opacity: 1;
   }
+  @media (prefers-color-scheme: dark) {
+    #splash {
+      background-color: rgb(38,38,38);
+    }
+    #status {
+      color: rgb(128,128,128);
+    }
+    #details {
+      color: rgb(102,102,102);
+    }
+    #progress {
+      background-color: rgba(26,26,26);
+      box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
+    }
+    #progress-bar {
+      background-color: rgb(80,80,80);
+    }
+  }
   </style>
 </head>
 <body>

package/package.json

@@ -9,7 +9,7 @@
     "node": ">=10.10.0"
   },
   "name": "@breakside/jskit",
-  "version": "2021.36.0",
+  "version": "2021.39.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "files": [
     "*"