Exactly matching the background of a selected NSMenuItem

Question

I am creating a custom view for an NSMenuItem. In order to draw the background when selected, I adapted a couple of lines from the CustomMenus sample. The CustomMenus sample has:

    [[NSColor alternateSelectedControlColor] set];
    NSRectFillUsingOperation(dirtyRect, NSCompositeSourceOver);

.. and I am using the selectedMenuItemColor because the alternateSelectedControlColor was a solid color and it did not look very good:

    [[NSColor selectedMenuItemColor] set];
    NSRectFillUsingOperation(dirtyRect, NSCompositeSourceOver);

Using selectedMenuItemColor is better, but it's still not exactly the same as a real selected NSMenuItem.

Here is a screenshot showing the real selected NSMenuItem background on the left and the selectedMenuItemColor on the right in the "Blue" appearance:

You can see that there is an additional translucent white gradient overlay on the real selected NSMenuItem background.

How do I replicate the real selected NSMenuItem background?

EDIT: This is for Mac OS 10.9.5.

EDIT2: Here is a side-by-side comparison in the "Graphite" appearance:

Recant

You mean pearlescent. :-) – Cleanshaven

Answer 1

Through trial and error I came up with the following code that draws a background almost indistinguishable from the real selected NSMenuItem background in both "Blue" and "Graphite" appearances:

    [[NSColor selectedMenuItemColor] set];
    NSRectFillUsingOperation(dirtyRect, NSCompositeSourceOver);

    if (dirtyRect.size.height > 1) {
        const NSControlTint currentControlTint = [NSColor currentControlTint];

        const CGFloat startingOpacity = (NSBlueControlTint == currentControlTint ? (CGFloat)0.16 : (CGFloat)0.09);
        NSGradient *grad = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithWhite:(CGFloat)1.0 alpha:startingOpacity] endingColor:[NSColor colorWithWhite:(CGFloat)1.0 alpha:(CGFloat)0.0]];

        const CGFloat heightMinus1 = (CGFloat)(dirtyRect.size.height - 1);
        [grad drawFromPoint:NSMakePoint(dirtyRect.origin.x, dirtyRect.origin.y + heightMinus1) toPoint:NSMakePoint(dirtyRect.origin.x, dirtyRect.origin.y + 1) options:0u];

        if (NSBlueControlTint == currentControlTint) {
            [[NSColor colorWithWhite:(CGFloat)1.0 alpha:(CGFloat)0.1] set];
            NSRectFillUsingOperation(NSMakeRect(dirtyRect.origin.x, dirtyRect.origin.y + heightMinus1, dirtyRect.size.width, (CGFloat)1.0), NSCompositeSourceOver);
        }
    }

Here are side-by-side comparisons:

The left halves (80px) of the two images show the real selected NSMenuItem background and the right halves of the two images are the result of the code.

Recant

Looks good. But keep in mind 10.10 is going to be a a lot more complex with dark mode, vibrancy and accessibility changes. – Sancha

Just wanted to add a quick note that this appears to be a regression - OS X 10.6 draws the correct gradient for -[NSColor selectedMenuItemColor]. I'm not sure when it broke, but I get the same behavior as you on OS X 10.9. – Typography

I converted your code to Swift: gist.github.com/joelcox/28de2f0cb21ea47bd789 – Deon

Answer 2

It's not a translucent white gradient. It is drawing a gradient. To do that use NSGradient and NSBezierPath for drawing. Note, you also need to stay in line with what the user has preferred. Gray or Aqua style. This changes the menu highlight. Also, you are going to need to be prepared to do it differently on 10.10

Very differently. In 10.10 you will need to handle a combination of vibrancy Dark mode Light mode Accessibilty settings that further change the colors. Look at that now, and find all the notifications you should observe. but anticipate the colors are still moving targets.

Sancha