@breakside/jskit 2026.11.0 → 2026.27.0

package/Root/Frameworks/UIKit/UIColorPanel.js

@@ -21,6 +21,8 @@
 
 JSProtocol("UIColorPanelDelegate", JSProtocol, {
 
+    colorPanelDidBeginEditing: function(panel, event){},
+    colorPanelDidEndEditing: function(panel, event){},
     colorPanelDidChangeColor: function(panel, color){},
     colorPanelDidClose: function(panel){}
 
@@ -239,8 +241,14 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.hexField.leftAccessoryVisibility = UITextField.AccessoryVisibility.always;
 
         this.saturationBrightnessControl.addAction(this.saturationBrightnessChanged, this);
+        this.saturationBrightnessControl.addAction(this.saturationBrightnessEditingBegan, this, UIControl.Event.editingDidBegin);
+        this.saturationBrightnessControl.addAction(this.saturationBrightnessEditingEnded, this, UIControl.Event.editingDidEnd);
         this.hueSlider.addAction(this.hueSliderChanged, this);
+        this.hueSlider.addAction(this.hueSliderEditingBegan, this, UIControl.Event.editingDidBegin);
+        this.hueSlider.addAction(this.hueSliderEditingEnded, this, UIControl.Event.editingDidEnd);
         this.alphaSlider.addAction(this.alphaSliderChanged, this);
+        this.alphaSlider.addAction(this.alphaSliderEditingBegan, this, UIControl.Event.editingDidBegin);
+        this.alphaSlider.addAction(this.alphaSliderEditingEnded, this, UIControl.Event.editingDidEnd);
         this.hexField.addAction(this.hexFieldChanged, this);
         this.component1Field.addAction(this.component1FieldChanged, this);
         this.component2Field.addAction(this.component2FieldChanged, this);
@@ -308,6 +316,18 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.notifyDelegateOfColor();
     },
 
+    saturationBrightnessEditingBegan: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidBeginEditing){
+            this.delegate.colorPanelDidBeginEditing(this, event);
+        }
+    },
+
+    saturationBrightnessEditingEnded: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidEndEditing){
+            this.delegate.colorPanelDidEndEditing(this, event);
+        }
+    },
+
     hueSliderChanged: function(slider){
         this._hsvComponents[0] = slider.value;
         this._recalculateColorFromHSV();
@@ -315,12 +335,36 @@ JSClass("UIColorPanelViewController", UIViewController, {
         this.notifyDelegateOfColor();
     },
 
+    hueSliderEditingBegan: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidBeginEditing){
+            this.delegate.colorPanelDidBeginEditing(this, event);
+        }
+    },
+
+    hueSliderEditingEnded: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidEndEditing){
+            this.delegate.colorPanelDidEndEditing(this, event);
+        }
+    },
+
     alphaSliderChanged: function(slider){
         this._color = this._color.colorWithAlpha(slider.value);
         this._alphaChanged(slider);
         this.notifyDelegateOfColor();
     },
 
+    alphaSliderEditingBegan: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidBeginEditing){
+            this.delegate.colorPanelDidBeginEditing(this, event);
+        }
+    },
+
+    alphaSliderEditingEnded: function(sender, event){
+        if (this.delegate && this.delegate.colorPanelDidEndEditing){
+            this.delegate.colorPanelDidEndEditing(this, event);
+        }
+    },
+
     component1FieldChanged: function(textField){
         var value = textField.integerValue;
         if (isNaN(value)){
@@ -829,6 +873,7 @@ JSClass("UIColorPanelTwoAxisSlider", UIControl, {
             initialOffset: JSPoint.Zero,
         };
         this.active = true;
+        this.sendActionsForEvents(UIControl.Event.editingDidBegin, event);
         if (!isOnKnob){
             this.value = this.valueForPoint(location);
             this.didChangeValueForBinding('value');
@@ -852,6 +897,7 @@ JSClass("UIColorPanelTwoAxisSlider", UIControl, {
     _endSlide: function(event){
         if (this.active){
             this.active = false;
+            this.sendActionsForEvents(UIControl.Event.editingDidEnd, event);
         }
         this._drag = null;
     },

package/Root/Frameworks/UIKit/UIColorWell.js

@@ -211,6 +211,14 @@ JSClass("UIColorWell", UIControl, {
     // ----------------------------------------------------------------------
     // MARK: - Color Panel
 
+    colorPanelDidBeginEditing: function(panel, event){
+        this.sendActionsForEvents(UIControl.Event.editingDidBegin, event);
+    },
+
+    colorPanelDidEndEditing: function(panel, event){
+        this.sendActionsForEvents(UIControl.Event.editingDidEnd, event);
+    },
+
     colorPanelDidChangeColor: function(panel, color){
         this._changeColor(color);
     },

package/Root/Frameworks/UIKit/UIHTMLDisplayServer.js

@@ -419,12 +419,31 @@ JSClass("UIHTMLDisplayServer", UIDisplayServer, {
             }
             insertedLayersByParentContext[info.parentContext.objectID].push(info.layer);
         }
+        var parentContext;
+        var context;
+        var i, l;
         for (var contextId in insertedLayersByParentContext){
             insertedLayersByParentContext[contextId].sort(function(a, b){
                 return a.sublayerIndex - b.sublayerIndex;
             });
-            for (var i = 0, l = insertedLayersByParentContext[contextId].length; i < l; ++i){
-                this._insertLayerIntoDOM(insertedLayersByParentContext[contextId][i], parentContextsById[contextId]);
+            parentContext = parentContextsById[contextId];
+            // If a layer's element is already in the parent element (meaning it
+            // is just changing order), first remove it from the parent element
+            // so sublayer index calculations will work correctly. 
+            // NOTE: UIHTMLDisplayServerCanvasContext.insertSublayerContext()
+            // already checked for this, but its check only worked when moving a
+            // single layer.  When adding moving and adding multiple layers at
+            // a time, we need first to remove all elements that moving before
+            // trying to insert or re-insert any of moved/added elements.
+            for (i = 0, l = insertedLayersByParentContext[contextId].length; i < l; ++i){
+                layer = insertedLayersByParentContext[contextId][i];
+                context = this.contextsByObjectID[layer.objectID];
+                if (context && context.element.parentNode === parentContext.element){
+                    parentContext.element.removeChild(context.element);
+                }
+            }
+            for (i = 0, l = insertedLayersByParentContext[contextId].length; i < l; ++i){
+                this._insertLayerIntoDOM(insertedLayersByParentContext[contextId][i], parentContext);
             }
         }
         this._insertedLayers = {};

package/Root/Frameworks/UIKit/UIHTMLDisplayServerCanvasContext.js

@@ -578,6 +578,18 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
     },
 
     fillMaskedRect: function(rect, maskImage){
+        if (maskImage._htmlImage !== undefined && maskImage._htmlImage !== null){
+            var maskCanvas = this.canvasContext.canvas.ownerDocument.createElement("canvas");
+            maskCanvas.width = rect.size.width;
+            maskCanvas.height = rect.size.height;
+            var maskContext = maskCanvas.getContext('2d');
+            maskContext.fillStyle = this.state.fillColor.cssString();
+            maskContext.fillRect(0, 0, rect.size.width, rect.size.height);
+            maskContext.globalCompositeOperation = 'destination-in';
+            maskContext.drawImage(maskImage._htmlImage, 0, 0, rect.size.width, rect.size.height);
+            this.canvasContext.drawImage(maskCanvas, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
         var imageElement = this._dequeueReusableImageElement();
         this._positionImageElement(imageElement, maskImage, rect);
         var url = maskImage.htmlURLString();
@@ -602,6 +614,10 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
     _imageElementIndex: 0,
 
     drawImage: function(image, rect){
+        if (image._htmlImage !== null && image._htmlImage !== undefined){
+            this.canvasContext.drawImage(image._htmlImage, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
         if (image !== null){
             var url = image.htmlURLString();
             // FIXME: proof of concept, but really shouldn't do async
@@ -687,57 +703,96 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
 
     drawLinearGradient: function(gradient, rect){
         this.canvasContext.save();
-        var canvasGradient = this.canvasContext.createLinearGradient(
-            rect.origin.x + gradient.start.x * rect.size.width,
-            rect.origin.y + gradient.start.y * rect.size.height,
-            rect.origin.x + gradient.end.x * rect.size.width,
-            rect.origin.y + gradient.end.y * rect.size.height
-        );
-        var stop;
-        for (var i = 0, l = gradient.stops.length; i < l; ++i){
-            stop = gradient.stops[i];
-            canvasGradient.addColorStop(stop.position, stop.color.cssString());
-        }
+        var canvasGradient = this._linearGradientForCanvasContext(this.canvasContext, gradient, rect);
         this.canvasContext.fillStyle = canvasGradient;
         this.canvasContext.fillRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
         this.canvasContext.restore();
     },
 
     drawRadialGradient: function(gradient, rect){
-        var r0 = 0;
-        var start = JSPoint(
-            rect.origin.x + gradient.start.x * rect.size.width,
-            rect.origin.y + gradient.start.y * rect.size.height
-        );
-        var end = JSPoint(
-            rect.origin.x + gradient.end.x * rect.size.width,
-            rect.origin.y + gradient.end.y * rect.size.height
-        );
-        var r1 = start.distanceToPoint(end);
         this.canvasContext.save();
-        var canvasGradient = this.canvasContext.createRadialGradient(
-            start.x,
-            start.y,
-            r0,
-            start.x,
-            start.y,
-            r1
-        );
-        var stop;
-        for (var i = 0, l = gradient.stops.length; i < l; ++i){
-            stop = gradient.stops[i];
-            canvasGradient.addColorStop(stop.position, stop.color.cssString());
-        }
+        var canvasGradient = this._radialGradientForCanvasContext(this.canvasContext, gradient, rect);
         this.canvasContext.fillStyle = canvasGradient;
         this.canvasContext.fillRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
         this.canvasContext.restore();
     },
 
-    drawLinearGradientStroke: function(gradient, path){
+    drawMaskedLinearGradient: function(gradient, rect, maskImage){
+        if (maskImage._htmlImage !== undefined && maskImage._htmlImage !== null){
+            var maskCanvas = this.canvasContext.canvas.ownerDocument.createElement("canvas");
+            maskCanvas.width = rect.size.width;
+            maskCanvas.height = rect.size.height;
+            var maskContext = maskCanvas.getContext('2d');
+            var canvasGradient = this._linearGradientForCanvasContext(maskContext, gradient, JSRect(JSPoint.Zero, rect.size));
+            maskContext.fillStyle = canvasGradient;
+            maskContext.fillRect(0, 0, rect.size.width, rect.size.height);
+            maskContext.globalCompositeOperation = 'destination-in';
+            maskContext.drawImage(maskImage._htmlImage, 0, 0, rect.size.width, rect.size.height);
+            this.canvasContext.drawImage(maskCanvas, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
+        var imageElement = this._dequeueReusableImageElement();
+        this._positionImageElement(imageElement, maskImage, rect);
+        var url = maskImage.htmlURLString();
+        var cssURL = "url('" + url + "')";
+        imageElement.style.maskImage = cssURL;
+        imageElement.style.maskSize = '100% 100%';
+        imageElement.style.webkitMaskImage = cssURL;
+        imageElement.style.webkitMaskSize = '100% 100%';
+        imageElement.style.backgroundImage = gradient.cssString(rect.size);
+        this._insertChildElement(imageElement);
+    },
+
+    drawMaskedRadialGradient: function(gradient, rect, maskImage){
+        if (maskImage._htmlImage !== undefined && maskImage._htmlImage !== null){
+            var maskCanvas = this.canvasContext.canvas.ownerDocument.createElement("canvas");
+            maskCanvas.width = rect.size.width;
+            maskCanvas.height = rect.size.height;
+            var maskContext = maskCanvas.getContext('2d');
+            var canvasGradient = this._radialGradientForCanvasContext(maskContext, gradient, JSRect(JSPoint.Zero, rect.size));
+            maskContext.fillStyle = canvasGradient;
+            maskContext.fillRect(0, 0, rect.size.width, rect.size.height);
+            maskContext.globalCompositeOperation = 'destination-in';
+            maskContext.drawImage(maskImage._htmlImage, 0, 0, rect.size.width, rect.size.height);
+            this.canvasContext.drawImage(maskCanvas, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
+            return;
+        }
+        var imageElement = this._dequeueReusableImageElement();
+        this._positionImageElement(imageElement, maskImage, rect);
+        var url = maskImage.htmlURLString();
+        var cssURL = "url('" + url + "')";
+        imageElement.style.maskImage = cssURL;
+        imageElement.style.maskSize = '100% 100%';
+        imageElement.style.webkitMaskImage = cssURL;
+        imageElement.style.webkitMaskSize = '100% 100%';
+        imageElement.style.backgroundImage = gradient.radialCSSString(rect.size);
+        this._insertChildElement(imageElement);
+    },
+
+    drawLinearGradientStroke: function(gradient, path, alternateRect){
+        var rect = path.boundingRect;
+        this.canvasContext.save();
+        this.addPath(path);
+        var canvasGradient = this._linearGradientForCanvasContext(this.canvasContext, gradient, alternateRect || rect);
+        this.canvasContext.strokeStyle = canvasGradient;
+        this.canvasContext.stroke();
+        this.canvasContext.restore();
+        this.beginPath();
+    },
+
+    drawRadialGradientStroke: function(gradient, path, alternateRect){
         var rect = path.boundingRect;
         this.canvasContext.save();
         this.addPath(path);
-        var canvasGradient = this.canvasContext.createLinearGradient(
+        var canvasGradient = this._radialGradientForCanvasContext(this.canvasContext, gradient, alternateRect || rect);
+        this.canvasContext.strokeStyle = canvasGradient;
+        this.canvasContext.stroke();
+        this.canvasContext.restore();
+        this.beginPath();
+    },
+
+    _linearGradientForCanvasContext: function(canvasContext, gradient, rect){
+        var canvasGradient = canvasContext.createLinearGradient(
             rect.origin.x + gradient.start.x * rect.size.width,
             rect.origin.y + gradient.start.y * rect.size.height,
             rect.origin.x + gradient.end.x * rect.size.width,
@@ -748,14 +803,10 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
             stop = gradient.stops[i];
             canvasGradient.addColorStop(stop.position, stop.color.cssString());
         }
-        this.canvasContext.strokeStyle = canvasGradient;
-        this.canvasContext.stroke();
-        this.canvasContext.restore();
-        this.beginPath();
+        return canvasGradient;
     },
 
-    drawRadialGradientStroke: function(gradient, path){
-        var rect = path.boundingRect;
+    _radialGradientForCanvasContext: function(canvasContext, gradient, rect){
         var r0 = 0;
         var start = JSPoint(
             rect.origin.x + gradient.start.x * rect.size.width,
@@ -766,9 +817,7 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
             rect.origin.y + gradient.end.y * rect.size.height
         );
         var r1 = start.distanceToPoint(end);
-        this.canvasContext.save();
-        this.addPath(path);
-        var canvasGradient = this.canvasContext.createRadialGradient(
+        var canvasGradient = canvasContext.createRadialGradient(
             start.x,
             start.y,
             r0,
@@ -781,10 +830,7 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
             stop = gradient.stops[i];
             canvasGradient.addColorStop(stop.position, stop.color.cssString());
         }
-        this.canvasContext.strokeStyle = canvasGradient;
-        this.canvasContext.stroke();
-        this.canvasContext.restore();
-        this.beginPath();
+        return canvasGradient;
     },
 
     // ----------------------------------------------------------------------
@@ -917,6 +963,45 @@ JSClass("UIHTMLDisplayServerCanvasContext", UIHTMLDisplayServerContext, {
         }
     },
 
+    // ----------------------------------------------------------------------
+    // MARK: - Transparency Layers
+
+    _reusableTransparencyLayer: null,
+
+    createTransparencyLayer: function(){
+        var scale = this.deviceScale * this.renderScale;
+        if (this._reusableTransparencyLayer !== null){
+            layer = this._reusableTransparencyLayer;
+            this._reusableTransparencyLayer = null;
+            layer.context.resetTransform();
+            layer.context.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
+            this._canvasContextAdoptState(layer.context, this.state, scale);
+            layer.parentContext = this.canvasContext;
+            this._canvasContext = layer.context;
+            return layer;
+        }
+        var parentContext = this.canvasContext;
+        var canvas = this._canvasElements[0].ownerDocument.createElement("canvas");
+        canvas.width = this._canvasElements[0].width;
+        canvas.height = this._canvasElements[0].height;
+        var context = canvas.getContext("2d");
+        this._canvasContextAdoptState(context, this.state, scale);
+        var layer = {
+            canvas: canvas,
+            context: context,
+            parentContext: parentContext
+        };
+        this._canvasContext = context;
+        return layer;
+    },
+
+    drawTransparencyLayer: function(transparencyLayer){
+        this._canvasContext = transparencyLayer.parentContext;
+        this._canvasContext.resetTransform();
+        this._canvasContext.drawImage(transparencyLayer.canvas, 0, 0);
+        this._reusableTransparencyLayer = transparencyLayer;
+    },
+
     // ----------------------------------------------------------------------
     // MARK: - Clipping
 
@@ -1296,29 +1381,25 @@ JSClass("UIHTMLDisplayServerCanvasContextPath", JSPath, {
     canvasOperations: function(prototype, transform){
         var operations = [];
         var i, l;
-        var j, k;
-        var subpath;
-        var segment;
+        var elements = this.elements;
+        var element;
         var point;
         var cp1;
         var cp2;
-        for (i = 0, l = this.subpaths.length; i < l; ++i){
-            subpath = this.subpaths[i];
-            point = transform.convertPointToTransform(subpath.firstPoint);
-            operations.push({method: prototype.moveTo, arguments: [point.x, point.y]});
-            for (j = 0, k = subpath.segments.length; j < k; ++j){
-                segment = subpath.segments[j];
-                if (segment.type === JSPath.SegmentType.line){
-                    point = transform.convertPointToTransform(segment.end);
-                    operations.push({method: prototype.lineTo, arguments: [point.x, point.y]});
-                }else if (segment.type === JSPath.SegmentType.curve){
-                    point = transform.convertPointToTransform(segment.curve.p2);
-                    cp1 = transform.convertPointToTransform(segment.curve.cp1);
-                    cp2 = transform.convertPointToTransform(segment.curve.cp2);
-                    operations.push({method: prototype.bezierCurveTo, arguments: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]});
-                }
-            }
-            if (subpath.closed){
+        for (i = 0, l = elements.length; i < l; ++i){
+            element = elements[i];
+            if (element.type === JSPathElement.Type.move){
+                point = transform.convertPointToTransform(element.point);
+                operations.push({method: prototype.moveTo, arguments: [point.x, point.y]});
+            }else if (element.type === JSPathElement.Type.line){
+                point = transform.convertPointToTransform(element.point);
+                operations.push({method: prototype.lineTo, arguments: [point.x, point.y]});
+            }else if (element.type === JSPathElement.Type.cubicCurve){
+                point = transform.convertPointToTransform(element.curve.p2);
+                cp1 = transform.convertPointToTransform(element.curve.cp1);
+                cp2 = transform.convertPointToTransform(element.curve.cp2);
+                operations.push({method: prototype.bezierCurveTo, arguments: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]});
+            }else if (element.type === JSPathElement.Type.close){
                 operations.push({method: prototype.closePath, arguments: []});
             }
         }

package/Root/Frameworks/UIKit/UIHTMLTextRun.js

@@ -99,6 +99,11 @@ JSClass("UIHTMLTextRun", JSTextRun, {
                 context.translateBy(point.x, point.y + this.font.ascender);
                 context.setFont(this.font);
                 context.setFillColor(this.attributes.textColor);
+                if (this.attributes.strokeWidth){
+                    context.setLineWidth(this.attributes.strokeWidth);
+                    context.setStrokeColor(this.attributes.strokeColor);
+                    context.setTextDrawingMode(JSContext.TextDrawingMode.fillStroke);
+                }
                 context.showText(this.textNode.nodeValue);
                 context.restore();
             }

package/Root/Frameworks/UIKit/UIHTMLTextTypesetter.js

@@ -37,6 +37,7 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         this._lineElementQueue = [];
     },
 
+    _useCanvasMetricsForMeasure: true,
     _suggestedHTMLLineLayout: null,
 
     canvasContext: null,
@@ -204,6 +205,14 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         span.style.color = textColor ? textColor.cssString() : 'black';
         span.style.backgroundColor = backgroundColor ? backgroundColor.cssString() : '';
         span.style.pointerEvents = 'none';
+
+        // Stroke
+        var strokeColor = attributes[JSAttributedString.Attribute.strokeColor] || null;
+        var strokeWidth = attributes[JSAttributedString.Attribute.strokeWidth] || 0;
+        if (strokeWidth > 0){
+            span.style.webkitTextStrokeWidth = '%fpx'.sprintf(strokeWidth);
+            span.style.webkitTextStrokeColor = strokeColor ? strokeColor.cssString() : 'black';
+        }
     },
 
     _styleAttachmentElementWithAttributes: function(span, attributes, attachment){
@@ -260,10 +269,16 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
                 runDescriptor.attachment = attachment;
             }else{
                 if (!newline){
-                    if (attributes[JSAttributedString.Attribute.maskCharacter] !== undefined){
-                        metrics = this.canvasContext.measureText(attributes[JSAttributedString.Attribute.maskCharacter]);
+                    if (this._useCanvasMetricsForMeasure){
+                        if (attributes[JSAttributedString.Attribute.maskCharacter] !== undefined){
+                            metrics = this.canvasContext.measureText(attributes[JSAttributedString.Attribute.maskCharacter]);
+                        }else{
+                            metrics = this.canvasContext.measureText(iterator.utf16);
+                        }
                     }else{
-                        metrics = this.canvasContext.measureText(iterator.utf16);
+                        metrics = {
+                            width: runDescriptor.font.widthOfString(iterator.utf16)
+                        };
                     }
                     usedWidth += metrics.width;
                     runDescriptor.userPerceivedCharacterWidths.push(metrics.width);

package/Root/Frameworks/UIKit/UIListView.js

@@ -2229,17 +2229,19 @@ JSClass("UIListView", UIScrollView, {
 
     _contextSelectCell: function(cell, location){
         if (this.delegate && this.delegate.menuForListViewCellAtIndexPath){
+            if (this._selectionContainsIndexPath(cell.indexPath)){
+                this._contextSelectedIndexPaths = JSCopy(this._selectedIndexPaths);
+            }else{
+                this._contextSelectedIndexPaths = [cell.indexPath];
+            }
             var menu = this.delegate.menuForListViewCellAtIndexPath(this, cell.indexPath);
             if (menu !== null){
-                if (this._selectionContainsIndexPath(cell.indexPath)){
-                    this._contextSelectedIndexPaths = JSCopy(this._selectedIndexPaths);
-                }else{
-                    this._contextSelectedIndexPaths = [cell.indexPath];
-                }
                 this._updateVisibleCellStates();
                 var locationInCell = this.convertPointToView(location, cell);
                 menu.delegate = this;
                 menu.openAtLocationInContextView(locationInCell, cell);
+            }else{
+                this._contextSelectedIndexPaths = [];
             }
         }
     },

package/Root/Frameworks/UIKit/UIMenu.js

@@ -477,6 +477,7 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
     borderWidth: JSDynamicProperty('_borderWidth', 0.5),
     itemContentInsets: JSDynamicProperty('_itemContentInsets', JSInsets(2, 3, 2, 7)),
     indentationSize: JSDynamicProperty('_indentationSize', 10),
+    submenuIndicatorIcon: null,
     separatorSize: 10,
     separatorLineWidth: 1,
     separatorColor: null,
@@ -490,6 +491,7 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
         this.shadowColor = JSColor.menuShadow;
         this.shadowOffset = JSPoint.Zero;
         this.separatorColor = this.disabledTextColor;
+        this.submenuIndicatorIcon = JSImage.initWithResourceName("UIMenuItemSubmenu", this.bundle).imageWithRenderMode(JSImage.RenderMode.template);
     },
 
     initWithSpec: function(spec){
@@ -552,8 +554,17 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
         if (spec.containsKey('indentationSize')){
             this.indentationSize = spec.valueForKey("indentationSize", Number);
         }
+        if (spec.containsKey('submenuIndicatorIcon')){
+            this.submenuIndicatorIcon = spec.valueForKey("submenuIndicatorIcon", Number);
+        }else{
+            this.submenuIndicatorIcon = JSImage.initWithResourceName("UIMenuItemSubmenu", this.bundle).imageWithRenderMode(JSImage.RenderMode.template);
+        }
     },
 
+    bundle: JSLazyInitProperty(function(){
+        return JSBundle.initWithIdentifier("io.breakside.JSKit.UIKit");
+    }),
+
     presentMenuAdjacentToView: function(menu, view, preferredPlacement, spacing){
         if (preferredPlacement === undefined){
             preferredPlacement = UIMenu.Placement.below;
@@ -857,46 +868,47 @@ JSClass("UIMenuWindowStyler", UIMenuStyler, {
     invalidateMenuPresentation: function(menu){
         var window = menu.stylerProperties.window || null;
         if (window !== null && window.screen !== null){
-            menu.updateEnabled();
-            window.update();
-
-            var screenMetrics = this.metricsForScreen(window.screen);
-            var size = JSSize(window.frame.size);
+            window.invalidate();
+        }
+    },
 
-            // Ensure we're at least the minimum width
-            // (although max width will take precedence)
-            if (size.width < menu._minimumWidth){
-                size.width = menu._minimumWidth;
-            }
+    repositionWindow: function(window){
+        var menu = window._menu;
+        var screenMetrics = this.metricsForScreen(window.screen);
+        var size = JSSize(window.frame.size);
 
-            // Limit width to the max screen width
-            if (size.width > screenMetrics.maximumWidth){
-                size.width = screenMetrics.maximumWidth;
-            }
+        // Ensure we're at least the minimum width
+        // (although max width will take precedence)
+        if (size.width < menu._minimumWidth){
+            size.width = menu._minimumWidth;
+        }
 
-            // Set our origin so the origin of the target item matches the given location
-            var origin = JSPoint(window.frame.origin);
+        // Limit width to the max screen width
+        if (size.width > screenMetrics.maximumWidth){
+            size.width = screenMetrics.maximumWidth;
+        }
 
-            // Adjust our x position if we've overflowed
-            var over = origin.x + size.width - screenMetrics.safeFrame.origin.x - screenMetrics.safeFrame.size.width;
-            if (over > 0){
-                origin.x -= over;
-            }
-            if (origin.x < screenMetrics.safeFrame.origin.x){
-                origin.x = screenMetrics.safeFrame.origin.x;
-            }
+        // Set our origin so the origin of the target item matches the given location
+        var origin = JSPoint(window.frame.origin);
 
-            var offset = JSPoint.Zero;
+        // Adjust our x position if we've overflowed
+        var over = origin.x + size.width - screenMetrics.safeFrame.origin.x - screenMetrics.safeFrame.size.width;
+        if (over > 0){
+            origin.x -= over;
+        }
+        if (origin.x < screenMetrics.safeFrame.origin.x){
+            origin.x = screenMetrics.safeFrame.origin.x;
+        }
 
-            // If we extend beyond the bottom, adjust our height
-            over = origin.y + size.height - screenMetrics.safeFrame.origin.y - screenMetrics.safeFrame.size.height;
-            if (over > 0){
-                size.height -= over;
-            }
+        var offset = JSPoint.Zero;
 
-            window.frame = JSRect(origin, size);
-            window.layoutIfNeeded();
+        // If we extend beyond the bottom, adjust our height
+        over = origin.y + size.height - screenMetrics.safeFrame.origin.y - screenMetrics.safeFrame.size.height;
+        if (over > 0){
+            size.height -= over;
         }
+
+        window.frame = JSRect(origin, size);
     },
 
     metricsForScreen: function(screen){
@@ -1009,6 +1021,12 @@ UIMenu.keyEquivalentCodeForKeyCode = function(keyCode){
             case 0xBD:
                 characterCode = 0x2D; // -
                 break;
+            case 0xDB:
+                characterCode = 0x5B; // [
+                break;
+            case 0xDD:
+                characterCode = 0x5D; // [
+                break;
         }
     }
     return UIMenu.keyEquivalentCodeForCharacterCode(characterCode);