New: Modern Cocoa behavior for Menus (#2929)

More theme parameters
Modern Cocoa behavior
First menubar item can be displayed specifically
All 3 control sizes are now managed

AppKit/CPMenu/CPMenu.j

@@ -1293,6 +1293,37 @@ var CPMenuTitleKey              = @"CPMenuTitleKey",
 
 @end
 
+#pragma mark -
+
+@implementation CPMenu (CSSTheming)
+
++ (void)setNamedValue:(CPString)aName forKey:(CPString)aKey inAttributes:(CPDictionary)aDictionary forTheme:(CPTheme)aTheme
+{
+    var value = [aTheme valueForAttributeWithName:aName forClass:_CPMenuView];
+
+    if (value)
+        [aDictionary setObject:value forKey:aKey];
+    else
+        [aDictionary removeObjectForKey:aKey];
+}
+
++ (void)updateMenuBarAttributesWithTheme:(CPTheme)aTheme
+{
+    var newAttributes = @{};
+
+    [CPMenu setNamedValue:@"menu-bar-text-color"                  forKey:@"CPMenuBarTextColor"                inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-title-color"                 forKey:@"CPMenuBarTitleColor"               inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-text-shadow-color"           forKey:@"CPMenuBarTextShadowColor"          inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-title-shadow-color"          forKey:@"CPMenuBarTitleShadowColor"         inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-highlight-color"             forKey:@"CPMenuBarHighlightColor"           inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-highlight-text-color"        forKey:@"CPMenuBarHighlightTextColor"       inAttributes:newAttributes forTheme:aTheme];
+    [CPMenu setNamedValue:@"menu-bar-highlight-text-shadow-color" forKey:@"CPMenuBarHighlightTextShadowColor" inAttributes:newAttributes forTheme:aTheme];
+
+    [CPMenu setMenuBarAttributes:newAttributes];
+}
+
+@end
+
 @import "_CPMenuBarWindow.j"
 @import "_CPMenuWindow.j"
 

AppKit/CPMenu/_CPMenuBarWindow.j

@@ -25,6 +25,7 @@
 
 @class _CPMenuView
 @class CPMenu
+@class CPMenuItem
 
 @global CPMenuDidAddItemNotification
 @global CPMenuDidChangeItemNotification
@@ -129,10 +130,12 @@
 
 - (void)setColor:(CPColor)aColor
 {
+    var targetView = [[CPTheme defaultTheme] valueForAttributeWithName:@"css-based" forClass:CPView] ? [[self contentView] superview] : [self contentView];
+
     if (!aColor)
-        [[self contentView] setBackgroundColor:[[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-background-color" forClass:_CPMenuView]];
+        [targetView setBackgroundColor:[[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-background-color" forClass:_CPMenuView]];
     else
-        [[self contentView] setBackgroundColor:aColor];
+        [targetView setBackgroundColor:aColor];
 }
 
 - (void)setTextColor:(CPColor)aColor
@@ -277,6 +280,16 @@
         [menuItemView setTextColor:_textColor];
         [menuItemView setHidden:[item isHidden]];
 
+        // If first menu item has tag -1 and if there is a special theme value menu-bar-window-first-item-font,
+        // set the corresponding font. This is used to set bold on the first item of the menubar (à la Cocoa)
+        if ((index == 0) && ([item tag] == -1))
+        {
+            var firstItemFont = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-bar-window-first-item-font" forClass:_CPMenuView];
+
+            if (firstItemFont)
+                [item setFont:firstItemFont];
+        }
+
         [menuItemView synchronizeWithMenuItem];
 
         [contentView addSubview:menuItemView];

AppKit/CPMenu/_CPMenuManager.j

@@ -28,6 +28,8 @@
 
 @class CPWindow
 @class _CPMenuWindow
+@class _CPMenuView
+@class CPMenuItem
 
 
 @global CPApp
@@ -223,7 +225,7 @@ var STICKY_TIME_INTERVAL            = 0.4,
     _lastGlobalLocation = globalLocation;
 
     // If the item isn't enabled its as if we clicked on nothing.
-    if (![activeItem isEnabled] || [activeItem _isMenuBarButton])
+    if ([activeItem _isMenuBarButton])
     {
         activeItemIndex = CPNotFound;
         activeItem = nil;
@@ -352,7 +354,23 @@ var STICKY_TIME_INTERVAL            = 0.4,
         if ([activeMenuContainer isMenuBar])
             newMenuOrigin = CGPointMake(CGRectGetMinX(activeItemRect), CGRectGetMaxY(activeItemRect));
         else
-            newMenuOrigin = CGPointMake(CGRectGetMaxX(activeItemRect), CGRectGetMinY(activeItemRect));
+        {
+            // New theme attributes to have more precise submenus positioning
+
+            var defaultTheme     = [CPTheme defaultTheme],
+                themeDeltaX      = [defaultTheme valueForAttributeWithName:@"menu-window-submenu-delta-x" forClass:_CPMenuView],
+                themeDeltaY      = [defaultTheme valueForAttributeWithName:@"menu-window-submenu-delta-y" forClass:_CPMenuView],
+                themeFirstDeltaY = [defaultTheme valueForAttributeWithName:@"menu-window-submenu-first-level-delta-y" forClass:_CPMenuView],
+                activeMenuIndex  = [_menuContainerStack indexOfObject:activeMenuContainer],
+
+                deltaX = themeDeltaX ? themeDeltaX : 0,
+                deltaY = themeDeltaY ? themeDeltaY : 0;
+
+            if (themeFirstDeltaY && (activeMenuIndex == 1) && [_menuContainerStack[0] isMenuBar])
+                deltaY += themeFirstDeltaY;
+
+            newMenuOrigin = CGPointMake(CGRectGetMaxX(activeItemRect)+deltaX, CGRectGetMinY(activeItemRect)+deltaY);
+        }
 
         newMenuOrigin = [activeMenuContainer convertBaseToGlobal:newMenuOrigin];
 
@@ -580,6 +598,8 @@ var STICKY_TIME_INTERVAL            = 0.4,
         [self selectNextItemBeginningWith:_keyBuffer inMenu:menu];
         _lastGlobalLocation = nil;
     }
+
+    [[[anEvent window] platformWindow] _propagateCurrentDOMEvent:NO];
 }
 
 - (void)selectNextItemBeginningWith:(CPString)characters inMenu:(CPMenu)menu
@@ -725,39 +745,32 @@ var STICKY_TIME_INTERVAL            = 0.4,
 
 - (void)moveDown:(CPMenu)menu
 {
-    var index = menu._highlightedIndex + 1;
+    var index = menu._highlightedIndex + 1,
+        item;
+
+    // Search for the next enabled item
+    while ((index < [menu numberOfItems]) && (item = [menu itemAtIndex:index]) && ([item isSeparatorItem] || [item isHidden] || ![item isEnabled]))
+        index++;
 
     if (index < [menu numberOfItems])
-    {
         [menu _highlightItemAtIndex:index];
-
-        var item = [menu highlightedItem];
-
-        if ([item isSeparatorItem] || [item isHidden] || ![item isEnabled])
-            [self moveDown:menu];
-    }
     else if (menu == [CPApp mainMenu])
          [menu _highlightItemAtIndex:0];
 }
 
 - (void)moveUp:(CPMenu)menu
 {
-    var index = menu._highlightedIndex - 1;
+    var index = menu._highlightedIndex - 1,
+        item;
 
-    if (index < 0)
-    {
-        if (index != CPNotFound || menu == [CPApp mainMenu])
-            [menu _highlightItemAtIndex:[menu numberOfItems] - 1];
+    // Search for the previous enabled item
+    while ((index >= 0) && (item = [menu itemAtIndex:index]) && ([item isSeparatorItem] || [item isHidden] || ![item isEnabled]))
+        index--;
 
-        return;
-    }
-
-    [menu _highlightItemAtIndex:index];
-
-    var item = [menu highlightedItem];
-
-    if ([item isSeparatorItem] || [item isHidden] || ![item isEnabled])
-        [self moveUp:menu];
+    if (index >= 0)
+        [menu _highlightItemAtIndex:index];
+    else if (menu == [CPApp mainMenu])
+        [menu _highlightItemAtIndex:[menu numberOfItems] - 1];
 }
 
 - (void)insertNewline:(CPMenu)menu

AppKit/CPMenu/_CPMenuWindow.j

@@ -465,6 +465,7 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
             @"menu-bar-window-background-color": [CPNull null],
             @"menu-bar-window-background-selected-color": [CPNull null],
             @"menu-bar-window-font": [CPNull null],
+            @"menu-bar-window-first-item-font": [CPNull null],
             @"menu-bar-window-height": 30.0,
             @"menu-bar-window-margin": 10.0,
             @"menu-bar-window-left-margin": 10.0,
@@ -482,6 +483,9 @@ _CPMenuWindowAttachedMenuBackgroundStyle    = 2;
             @"menu-general-icon-new": [CPNull null],
             @"menu-general-icon-save": [CPNull null],
             @"menu-general-icon-open": [CPNull null],
+            @"menu-window-submenu-delta-x": 0.0,
+            @"menu-window-submenu-delta-y": 0.0,
+            @"menu-window-submenu-first-level-delta-y": 0.0
         };
 }
 

AppKit/CPMenuItem/_CPMenuItemSeparatorView.j

@@ -31,7 +31,9 @@
 
 + (id)view
 {
-    return [[self alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, 10.0)];
+    var themedHeight = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-item-separator-view-height" forClass:_CPMenuItemStandardView];
+
+    return [[self alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, (themedHeight ? themedHeight : 10.0))];
 }
 
 - (id)initWithFrame:(CGRect)aFrame
@@ -47,12 +49,25 @@
 - (void)drawRect:(CGRect)aRect
 {
     var context = [[CPGraphicsContext currentContext] graphicsPort],
-        bounds = [self bounds];
+        bounds = [self bounds],
+        height = CGRectGetMaxY(bounds),
+        themedHeight = [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-item-separator-height" forClass:_CPMenuItemStandardView],
+        lineHeight = themedHeight ? themedHeight : 1.0;
 
     CGContextBeginPath(context);
 
-    CGContextMoveToPoint(context, CGRectGetMinX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
-    CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
+    CGContextSetLineWidth(context, lineHeight);
+
+    if (!!((height - lineHeight) % 2))
+    {
+        CGContextMoveToPoint(context, CGRectGetMinX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
+        CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), FLOOR(CGRectGetMidY(bounds)) - 0.5);
+    }
+    else
+    {
+        CGContextMoveToPoint(context, CGRectGetMinX(bounds), FLOOR(CGRectGetMidY(bounds)));
+        CGContextAddLineToPoint(context, CGRectGetMaxX(bounds), FLOOR(CGRectGetMidY(bounds)));
+    }
 
     CGContextSetStrokeColor(context, [[CPTheme defaultTheme] valueForAttributeWithName:@"menu-item-separator-color" forClass:_CPMenuItemStandardView]);
     CGContextStrokePath(context);

AppKit/CPMenuItem/_CPMenuItemStandardView.j

@@ -41,6 +41,8 @@
     _CPImageAndTextView     _imageAndTextView;
     _CPImageAndTextView     _keyEquivalentView;
     CPView                  _submenuIndicatorView;
+
+    BOOL                    _hasSubmenuIndicatorImage;
 }
 
 + (CPString)defaultThemeClass
@@ -63,12 +65,17 @@
             @"menu-item-default-mixed-state-image": [CPNull null],
             @"menu-item-default-mixed-state-highlighted-image": [CPNull null],
             @"menu-item-separator-color": [CPNull null],
+            @"menu-item-separator-height": 1.0,
+            @"menu-item-separator-view-height": 10.0,
             @"left-margin": 3.0,
             @"right-margin": 17.0,
             @"state-column-width": 14.0,
             @"indentation-width": 17.0,
             @"vertical-margin": 4.0,
+            @"vertical-offset": 0.0,
             @"right-columns-margin": 30.0,
+            @"submenu-indicator-image": [CPNull null],
+            @"submenu-indicator-highlighted-image": [CPNull null]
         };
 }
 
@@ -91,6 +98,7 @@
         _stateView = [[CPImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 0.0, 0.0)];
 
         [_stateView setImageScaling:CPImageScaleNone];
+        [_stateView setImageAlignment:CPImageAlignCenter];
 
         [self addSubview:_stateView];
 
@@ -109,9 +117,24 @@
 
         [self addSubview:_keyEquivalentView];
 
-        _submenuIndicatorView = [[_CPMenuItemSubmenuIndicatorView alloc] initWithFrame:CGRectMake(0.0, 0.0, 8.0, 10.0)];
+        // Do we have a submenu indicator image specified in the theme ?
+        _hasSubmenuIndicatorImage = !![self valueForThemeAttribute:@"submenu-indicator-image"];
+
+        if (_hasSubmenuIndicatorImage)
+        {
+            // Yes, then use an imageView
+            _submenuIndicatorView = [[CPImageView alloc] initWithFrame:CGRectMakeZero()];
+
+            [_submenuIndicatorView setImageAlignment:CPImageAlignCenter];
+        }
+        else
+        {
+            // No, then use self drawing _CPMenuItemSubmenuIndicatorView
+            _submenuIndicatorView = [[_CPMenuItemSubmenuIndicatorView alloc] initWithFrame:CGRectMake(0.0, 0.0, 8.0, 10.0)];
+
+            [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
+        }
 
-        [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
         [_submenuIndicatorView setAutoresizingMask:CPViewMinXMargin];
 
         [self addSubview:_submenuIndicatorView];
@@ -149,11 +172,24 @@
     _font = aFont;
 }
 
+- (CPFont)font
+{
+    // Menu item font is forced local font or _menuItem font or system font
+    return _font || [_menuItem font] || [CPFont systemFontOfSize:CPFontCurrentSystemSize];
+}
+
+// FIXME: update is called 2 times at each display. Find why and fix.
 - (void)update
 {
     var x = [self valueForThemeAttribute:@"left-margin"] + [_menuItem indentationLevel] * [self valueForThemeAttribute:@"indentation-width"],
         height = 0.0,
-        hasStateColumn = [[_menuItem menu] showsStateColumn];
+        hasStateColumn = [[_menuItem menu] showsStateColumn],
+        myFont = [self font],
+
+        // When possible, use specific vertical margin/offset value based on font size (which could have been set by control size)
+        correspondingControlSize = [myFont controlSizeCorrespondingToFontSize],
+        verticalMargin = [self valueForThemeAttribute:@"vertical-margin" inState:CPControlSizeThemeStates[correspondingControlSize]],
+        verticalOffset = [self valueForThemeAttribute:@"vertical-offset" inState:CPControlSizeThemeStates[correspondingControlSize]];
 
     if (hasStateColumn)
     {
@@ -163,15 +199,15 @@
         switch ([_menuItem state])
         {
             case CPOnState:
-                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image"]];
+                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                 break;
 
             case CPOffState:
-                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image"]];
+                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                 break;
 
             case CPMixedState:
-                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image"]];
+                [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                 break;
 
             default:
@@ -188,7 +224,7 @@
     else
         [_stateView setHidden:YES];
 
-    [_imageAndTextView setFont:[_menuItem font] || _font];
+    [_imageAndTextView setFont:myFont];
     [_imageAndTextView setVerticalAlignment:CPCenterVerticalTextAlignment];
     [_imageAndTextView setImage:[_menuItem image]];
     [_imageAndTextView setText:[_menuItem title]];
@@ -201,7 +237,7 @@
 
     imageAndTextViewFrame.origin.x = x;
     x += CGRectGetWidth(imageAndTextViewFrame);
-    height = MAX(height, CGRectGetHeight(imageAndTextViewFrame));
+    height = MAX(height, CGRectGetHeight(imageAndTextViewFrame)); // FIXME: here, height = 0 -> MAX useless
 
     var hasKeyEquivalent = !![_menuItem keyEquivalent],
         hasSubmenu = [_menuItem hasSubmenu];
@@ -211,14 +247,14 @@
 
     if (hasKeyEquivalent)
     {
-        [_keyEquivalentView setFont:[_menuItem font] || _font];
+        [_keyEquivalentView setFont:myFont];
         [_keyEquivalentView setVerticalAlignment:CPCenterVerticalTextAlignment];
         [_keyEquivalentView setImage:[_menuItem image]];
         [_keyEquivalentView setText:[_menuItem keyEquivalentStringRepresentation]];
         [_keyEquivalentView setTextColor:[self textColor]];
         [_keyEquivalentView setTextShadowColor:[self textShadowColor]];
         [_keyEquivalentView setTextShadowOffset:CGSizeMake(0, 1)];
-        [_keyEquivalentView setFrameOrigin:CGPointMake(x, [self valueForThemeAttribute:@"vertical-margin"])];
+        [_keyEquivalentView setFrameOrigin:CGPointMake(x, verticalMargin)];
         [_keyEquivalentView sizeToFit];
 
         var keyEquivalentViewFrame = [_keyEquivalentView frame];
@@ -235,6 +271,14 @@
 
     if (hasSubmenu)
     {
+        if (_hasSubmenuIndicatorImage)
+        {
+            var submenuIndicatorImage = [self valueForThemeAttribute:@"submenu-indicator-image" inState:CPControlSizeThemeStates[correspondingControlSize]];
+
+            [_submenuIndicatorView setImage:submenuIndicatorImage];
+            [_submenuIndicatorView setFrameSize:[submenuIndicatorImage size]];
+        }
+
         [_submenuIndicatorView setHidden:NO];
 
         var submenuViewFrame = [_submenuIndicatorView frame];
@@ -247,9 +291,9 @@
     else
         [_submenuIndicatorView setHidden:YES];
 
-    height += 2.0 * [self valueForThemeAttribute:@"vertical-margin"];
+    height += 2.0 * verticalMargin;
 
-    imageAndTextViewFrame.origin.y = FLOOR((height - CGRectGetHeight(imageAndTextViewFrame)) / 2.0);
+    imageAndTextViewFrame.origin.y = FLOOR((height - CGRectGetHeight(imageAndTextViewFrame)) / 2.0) + verticalOffset;
     [_imageAndTextView setFrame:imageAndTextViewFrame];
 
     if (hasStateColumn)
@@ -257,7 +301,7 @@
 
     if (hasKeyEquivalent)
     {
-        keyEquivalentViewFrame.origin.y = FLOOR((height - CGRectGetHeight(keyEquivalentViewFrame)) / 2.0);
+        keyEquivalentViewFrame.origin.y = FLOOR((height - CGRectGetHeight(keyEquivalentViewFrame)) / 2.0) + verticalOffset;
         [_keyEquivalentView setFrame:keyEquivalentViewFrame];
     }
 
@@ -282,6 +326,8 @@
 
     _highlighted = shouldHighlight;
 
+    var correspondingControlSize = [[self font] controlSizeCorrespondingToFontSize];
+
     [_imageAndTextView setTextColor:[self textColor]];
     [_keyEquivalentView setTextColor:[self textColor]];
     [_imageAndTextView setTextShadowColor:[self textShadowColor]];
@@ -291,13 +337,21 @@
     {
         [self setBackgroundColor:[self valueForThemeAttribute:@"menu-item-selection-color"]];
         [_imageAndTextView setImage:[_menuItem alternateImage] || [_menuItem image]];
-        [_submenuIndicatorView setColor:[self textColor]];
+
+        if (_hasSubmenuIndicatorImage)
+            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+        else
+            [_submenuIndicatorView setColor:[self textColor]];
     }
     else
     {
         [self setBackgroundColor:nil];
         [_imageAndTextView setImage:[_menuItem image]];
-        [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
+
+        if (_hasSubmenuIndicatorImage)
+            [_submenuIndicatorView setImage:[self valueForThemeAttribute:@"submenu-indicator-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
+        else
+            [_submenuIndicatorView setColor:[self valueForThemeAttribute:@"submenu-indicator-color"]];
     }
 
     if ([[_menuItem menu] showsStateColumn])
@@ -307,15 +361,15 @@
             switch ([_menuItem state])
             {
                 case CPOnState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-highlighted-image"]];
+                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPOffState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-highlighted-image"]];
+                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPMixedState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-highlighted-image"]];
+                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-highlighted-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 default:
@@ -327,15 +381,15 @@
             switch ([_menuItem state])
             {
                 case CPOnState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image"]];
+                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-on-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPOffState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image"]];
+                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-off-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 case CPMixedState:
-                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image"]];
+                    [_stateView setImage:[self valueForThemeAttribute:@"menu-item-default-mixed-state-image" inState:CPControlSizeThemeStates[correspondingControlSize]]];
                     break;
 
                 default: