NEW: Material icon image (#2909)

AppKit/CPImage.j

@@ -26,10 +26,13 @@
 @import <Foundation/CPRunLoop.j>
 @import <Foundation/CPString.j>
 @import <Foundation/CPData.j>
+@import <Foundation/CPKeyedArchiver.j>
+@import <Foundation/CPKeyedUnarchiver.j>
 
 @import "CGGeometry.j"
 @import "CPCompatibility.j"
 
+@class CPColor
 
 @protocol CPImageDelegate <CPObject>
 
@@ -85,9 +88,7 @@ function CPImageInBundle()
 
     if (typeof(arguments[1]) === "number")
     {
-        if (arguments[1] != nil)
-            size = CGSizeMake(arguments[1], arguments[2]);
-
+        size = CGSizeMake(arguments[1], arguments[2]);
         bundle = arguments[3];
     }
     else if (typeof(arguments[1]) === "object")
@@ -446,6 +447,11 @@ function CPAppKitImage(aFilename, aSize)
     return NO;
 }
 
+- (BOOL)isMaterialIconImage
+{
+    return NO;
+}
+
 - (CPString)description
 {
     var filename = [self filename],
@@ -564,6 +570,7 @@ function CPAppKitImage(aFilename, aSize)
     CPDictionary            _cssDictionary              @accessors(property=cssDictionary);
     CPDictionary            _cssBeforeDictionary        @accessors(property=cssBeforeDictionary);
     CPDictionary            _cssAfterDictionary         @accessors(property=cssAfterDictionary);
+    CGSize                  _displaySize;
 }
 
 + (CPImage)imageWithCSSDictionary:(CPDictionary)aDictionary size:(CGSize)aSize
@@ -582,6 +589,16 @@ function CPAppKitImage(aFilename, aSize)
     return [[CPImage alloc] initWithCSSDictionary:@{} beforeDictionary:nil afterDictionary:nil size:aSize];
 }
 
++ (CPImage)imageWithMaterialIconNamed:(CPString)iconName size:(CGSize)size
+{
+    return [_CPMaterialIconImage imageWithIconNamed:iconName size:size];
+}
+
++ (CPImage)imageWithMaterialIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color
+{
+    return [_CPMaterialIconImage imageWithIconNamed:iconName size:size color:color];
+}
+
 - (id)initWithCSSDictionary:(CPDictionary)aDictionary beforeDictionary:(CPDictionary)beforeDictionary afterDictionary:(CPDictionary)afterDictionary size:(CGSize)aSize
 {
     self = [super init];
@@ -594,6 +611,7 @@ function CPAppKitImage(aFilename, aSize)
         _cssDictionary = aDictionary;
         _cssBeforeDictionary = beforeDictionary;
         _cssAfterDictionary = afterDictionary;
+        _displaySize = CGSizeMakeCopy(aSize);
     }
 
     return self;
@@ -707,6 +725,11 @@ function CPAppKitImage(aFilename, aSize)
 #endif
 }
 
+- (BOOL)_shouldBeResized
+{
+    return NO;
+}
+
 @end
 
 var CPImageCSSDictionaryKey       = @"CPImageCSSDictionaryKey",
@@ -750,6 +773,168 @@ var CPImageCSSDictionaryKey       = @"CPImageCSSDictionaryKey",
 
 @end
 
+#pragma mark -
+
+@implementation _CPMaterialIconImage : CPImage
+{
+    CPMutableDictionary     _cachedColorVersions;
+    CPColor                 _cachedInvertedColor;
+}
+
++ (_CPMaterialIconImage)imageWithIconNamed:(CPString)iconName size:(CGSize)size
+{
+    return [[_CPMaterialIconImage alloc] initWithIconName:iconName size:size];
+}
+
++ (_CPMaterialIconImage)imageWithIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color
+{
+    return [[_CPMaterialIconImage alloc] initWithIconName:iconName size:size color:color];
+}
+
++ (_CPMaterialIconImage)imageWithIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color additionalCSSDictionary:(CPDictionary)additionalCSSDictionary
+{
+    return [[_CPMaterialIconImage alloc] initWithIconName:iconName size:size color:color additionalCSSDictionary:additionalCSSDictionary];
+}
+
+- (CPDictionary)_baseMaterialIconCSSDictionaryForIconName:(CPString)iconName size:(CGSize)size
+{
+    return @{
+             @"width": size.width + @"px",
+             @"height": size.height + @"px",
+             @"top": @"0px",
+             @"left": @"0px",
+             @"content": @"'" + iconName + @"'",
+
+             @"position": @"absolute",
+             @"z-index": @"300",
+
+             @"font-family": @"'Material Icons'",
+             @"font-weight": @"normal",
+             @"font-style": @"normal",
+             @"font-size": MIN(size.width, size.height) + @"px",
+             @"display": @"inline-block",
+             @"line-height": @"1",
+             @"text-transform": @"none",
+             @"letter-spacing": @"normal",
+             @"word-wrap": @"normal",
+             @"white-space": @"nowrap",
+             @"direction": @"ltr",
+             @"-webkit-font-smoothing": @"antialiased",
+             @"text-rendering": @"optimizeLegibility",
+             @"-moz-osx-font-smoothing": @"grayscale",
+             @"font-feature-settings": @"'liga'"
+             };
+}
+
+- (_CPMaterialIconImage)initWithIconName:(CPString)iconName size:(CGSize)size
+{
+    return [super initWithCSSDictionary:@{}
+                       beforeDictionary:@{}
+                        afterDictionary:[self _baseMaterialIconCSSDictionaryForIconName:iconName size:size]
+                                   size:size];
+}
+
+- (_CPMaterialIconImage)initWithIconName:(CPString)iconName size:(CGSize)size color:(CPColor)color
+{
+    var materialIconCSSDictionary = [self _baseMaterialIconCSSDictionaryForIconName:iconName size:size];
+
+    [materialIconCSSDictionary setObject:[color cssString] forKey:@"color"];
+
+    return [super initWithCSSDictionary:@{}
+                       beforeDictionary:@{}
+                        afterDictionary:materialIconCSSDictionary
+                                   size:size];
+}
+
+- (void)addRotationEffectWithAngle:(float)angle
+{
+    [self addCSSDictionary:@{
+                             @"transform":  @"rotate("+angle+"deg)",
+                             @"transition": @"transform 0.35s ease"
+                             }];
+}
+
+- (void)addCSSDictionary:(CPDictionary)additionalCSSDictionary
+{
+    [_cssAfterDictionary addEntriesFromDictionary:additionalCSSDictionary];
+}
+
+- (void)setSize:(CGSize)aSize
+{
+    [self _setDisplaySize:aSize];
+    [super setSize:aSize];
+}
+
+- (void)_setDisplaySize:(CGSize)aSize
+{
+    if (CGSizeEqualToSize(_displaySize, aSize))
+        return;
+
+    _displaySize = CGSizeMakeCopy(aSize);
+
+    [_cssAfterDictionary setObject:(aSize.width + @"px") forKey:@"width"];
+    [_cssAfterDictionary setObject:(aSize.height + @"px") forKey:@"height"];
+    [_cssAfterDictionary setObject:(MIN(aSize.width, aSize.height) + @"px") forKey:@"font-size"];
+}
+
+- (BOOL)_shouldBeResized
+{
+    return YES;
+}
+
+- (BOOL)isMaterialIconImage
+{
+    return YES;
+}
+
+- (_CPMaterialIconImage)invertedImage
+{
+    if (!_cachedInvertedColor)
+    {
+        var sourceCSSColor = [_cssAfterDictionary objectForKey:@"color"] || @"rgba(0,0,0,1)",
+            sourceColor    = [CPColor colorWithCSSString:sourceCSSColor];
+
+        _cachedInvertedColor = [CPColor colorWithRed:(1-[sourceColor redComponent])
+                                               green:(1-[sourceColor greenComponent])
+                                                blue:(1-[sourceColor blueComponent])
+                                               alpha:[sourceColor alphaComponent]];
+    }
+
+    return [self imageVersionWithColor:_cachedInvertedColor];
+}
+
+- (_CPMaterialIconImage)imageVersionWithColor:(CPColor)aColor
+{
+    // We can't just set the color in the cssAfterDictionary as this would not be noticed as a new image,
+    // so -setImage won't do anything, so no visual refresh won't occur.
+    // The trick here is to keep in cache a clone of this image for each needed color.
+    var colorCSSString = [aColor cssString];
+
+    if (!_cachedColorVersions)
+        _cachedColorVersions = @{};
+
+    var cachedColorVersion = [_cachedColorVersions objectForKey:colorCSSString];
+
+    if (!cachedColorVersion)
+    {
+        cachedColorVersion = [self duplicate];
+        [cachedColorVersion _setCSSColor:colorCSSString];
+
+        [_cachedColorVersions setObject:cachedColorVersion forKey:colorCSSString];
+    }
+
+    return cachedColorVersion;
+}
+
+- (void)_setCSSColor:(CPString)aCSSColor
+{
+    [_cssAfterDictionary setObject:aCSSColor forKey:@"color"];
+}
+
+@end
+
+#pragma mark -
+
 @implementation CPThreePartImage : CPObject
 {
     CPArray _imageSlices;
@@ -890,3 +1075,14 @@ var CPNinePartImageImageSlicesKey   = @"CPNinePartImageImageSlicesKey";
 }
 
 @end
+
+#pragma mark -
+
+@implementation CPImage (Duplication)
+
+- (CPImage)duplicate
+{
+    return [CPKeyedUnarchiver unarchiveObjectWithData:[CPKeyedArchiver archivedDataWithRootObject:self]];
+}
+
+@end

AppKit/CPImageView.j

@@ -99,8 +99,8 @@ var CPImageViewEmptyPlaceholderImage = nil;
 {
 #if PLATFORM(DOM)
     var image = [self objectValue],
-    isCSSBasedImage = [image isCSSBased],
-    isIMGImageElement = _DOMImageElement && (_DOMImageElement.nodeName == "IMG");
+        isCSSBasedImage = [image isCSSBased],
+        isIMGImageElement = _DOMImageElement && (_DOMImageElement.nodeName == "IMG");
 
     // First, check if we need to destroy a current DOM image element. This is the case if :
     // - we have one but not the right one (that is a DIV but needing an IMG, and vice versa)
@@ -444,6 +444,18 @@ var CPImageViewEmptyPlaceholderImage = nil;
 #endif
     }
 
+#if PLATFORM(DOM)
+    if ([image isCSSBased] && [image _shouldBeResized])
+    {
+        [image _setDisplaySize:CGSizeMake(ROUND(width), ROUND(height))];
+
+        _cssStyleNode = [image applyCSSImageForView:self
+                                       onDOMElement:_DOMImageElement
+                                          styleNode:_cssStyleNode
+                                      previousState:@ref(_cssStylePreviousState)];
+    }
+#endif
+
     _imageRect = CGRectMake(x, y, width, height);
 
     if (_hasShadow)

AppKit/Cib/_CPCibCustomResource.j

@@ -54,8 +54,9 @@ var _CPCibCustomResourceClassNameKey    = @"_CPCibCustomResourceClassNameKey",
         return;
 
     _CPCibCustomResourceTemplateImageMap = @{
-        "CPAddTemplate": "button-image-plus",
-        "CPRemoveTemplate": "button-image-minus"
+        "CPAddTemplate":    "button-image-plus",
+        "CPRemoveTemplate": "button-image-minus",
+        "CPActionTemplate": "button-image-action"
     };
 }
 + (id)imageResourceWithName:(CPString)aResourceName size:(CGSize)aSize
@@ -111,6 +112,19 @@ var _CPCibCustomResourceClassNameKey    = @"_CPCibCustomResourceClassNameKey",
         (![aCoder respondsToSelector:@selector(awakenCustomResources)] || [aCoder awakenCustomResources]))
         if (_className === @"CPImage")
         {
+            // Is this a material icon reference ?
+            if ([_resourceName hasSuffix:@"@MaterialIcons"])
+            {
+                var range = [_resourceName rangeOfString:@"@MaterialIcons"];
+
+                if (range.location <= 0)
+                    [CPException raise:CPRangeException reason:"Malformed Material Icon reference ("+_resourceName+")"];
+
+                var iconName = [_resourceName substringToIndex:range.location];
+
+                return [CPImage imageWithMaterialIconNamed:iconName size:CGSizeMake(16,16)];
+            }
+
             var templateImage = [_CPCibCustomResourceTemplateImageMap objectForKey:_resourceName];
 
             if (templateImage)

AppKit/Resources/fonts/MaterialIcons-Regular.ijmap

@@ -0,0 +1 @@
+{"icons":{"e84d":{"name":"3d Rotation"},"eb3b":{"name":"Ac Unit"},"e190":{"name":"Access Alarm"},"e191":{"name":"Access Alarms"},"e192":{"name":"Access Time"},"e84e":{"name":"Accessibility"},"e914":{"name":"Accessible"},"e84f":{"name":"Account Balance"},"e850":{"name":"Account Balance Wallet"},"e851":{"name":"Account Box"},"e853":{"name":"Account Circle"},"e60e":{"name":"Adb"},"e145":{"name":"Add"},"e439":{"name":"Add A Photo"},"e193":{"name":"Add Alarm"},"e003":{"name":"Add Alert"},"e146":{"name":"Add Box"},"e147":{"name":"Add Circle"},"e148":{"name":"Add Circle Outline"},"e567":{"name":"Add Location"},"e854":{"name":"Add Shopping Cart"},"e39d":{"name":"Add To Photos"},"e05c":{"name":"Add To Queue"},"e39e":{"name":"Adjust"},"e630":{"name":"Airline Seat Flat"},"e631":{"name":"Airline Seat Flat Angled"},"e632":{"name":"Airline Seat Individual Suite"},"e633":{"name":"Airline Seat Legroom Extra"},"e634":{"name":"Airline Seat Legroom Normal"},"e635":{"name":"Airline Seat Legroom Reduced"},"e636":{"name":"Airline Seat Recline Extra"},"e637":{"name":"Airline Seat Recline Normal"},"e195":{"name":"Airplanemode Active"},"e194":{"name":"Airplanemode Inactive"},"e055":{"name":"Airplay"},"eb3c":{"name":"Airport Shuttle"},"e855":{"name":"Alarm"},"e856":{"name":"Alarm Add"},"e857":{"name":"Alarm Off"},"e858":{"name":"Alarm On"},"e019":{"name":"Album"},"eb3d":{"name":"All Inclusive"},"e90b":{"name":"All Out"},"e859":{"name":"Android"},"e85a":{"name":"Announcement"},"e5c3":{"name":"Apps"},"e149":{"name":"Archive"},"e5c4":{"name":"Arrow Back"},"e5db":{"name":"Arrow Downward"},"e5c5":{"name":"Arrow Drop Down"},"e5c6":{"name":"Arrow Drop Down Circle"},"e5c7":{"name":"Arrow Drop Up"},"e5c8":{"name":"Arrow Forward"},"e5d8":{"name":"Arrow Upward"},"e060":{"name":"Art Track"},"e85b":{"name":"Aspect Ratio"},"e85c":{"name":"Assessment"},"e85d":{"name":"Assignment"},"e85e":{"name":"Assignment Ind"},"e85f":{"name":"Assignment Late"},"e860":{"name":"Assignment Return"},"e861":{"name":"Assignment Returned"},"e862":{"name":"Assignment Turned In"},"e39f":{"name":"Assistant"},"e3a0":{"name":"Assistant Photo"},"e226":{"name":"Attach File"},"e227":{"name":"Attach Money"},"e2bc":{"name":"Attachment"},"e3a1":{"name":"Audiotrack"},"e863":{"name":"Autorenew"},"e01b":{"name":"Av Timer"},"e14a":{"name":"Backspace"},"e864":{"name":"Backup"},"e19c":{"name":"Battery Alert"},"e1a3":{"name":"Battery Charging Full"},"e1a4":{"name":"Battery Full"},"e1a5":{"name":"Battery Std"},"e1a6":{"name":"Battery Unknown"},"eb3e":{"name":"Beach Access"},"e52d":{"name":"Beenhere"},"e14b":{"name":"Block"},"e1a7":{"name":"Bluetooth"},"e60f":{"name":"Bluetooth Audio"},"e1a8":{"name":"Bluetooth Connected"},"e1a9":{"name":"Bluetooth Disabled"},"e1aa":{"name":"Bluetooth Searching"},"e3a2":{"name":"Blur Circular"},"e3a3":{"name":"Blur Linear"},"e3a4":{"name":"Blur Off"},"e3a5":{"name":"Blur On"},"e865":{"name":"Book"},"e866":{"name":"Bookmark"},"e867":{"name":"Bookmark Border"},"e228":{"name":"Border All"},"e229":{"name":"Border Bottom"},"e22a":{"name":"Border Clear"},"e22b":{"name":"Border Color"},"e22c":{"name":"Border Horizontal"},"e22d":{"name":"Border Inner"},"e22e":{"name":"Border Left"},"e22f":{"name":"Border Outer"},"e230":{"name":"Border Right"},"e231":{"name":"Border Style"},"e232":{"name":"Border Top"},"e233":{"name":"Border Vertical"},"e06b":{"name":"Branding Watermark"},"e3a6":{"name":"Brightness 1"},"e3a7":{"name":"Brightness 2"},"e3a8":{"name":"Brightness 3"},"e3a9":{"name":"Brightness 4"},"e3aa":{"name":"Brightness 5"},"e3ab":{"name":"Brightness 6"},"e3ac":{"name":"Brightness 7"},"e1ab":{"name":"Brightness Auto"},"e1ac":{"name":"Brightness High"},"e1ad":{"name":"Brightness Low"},"e1ae":{"name":"Brightness Medium"},"e3ad":{"name":"Broken Image"},"e3ae":{"name":"Brush"},"e6dd":{"name":"Bubble Chart"},"e868":{"name":"Bug Report"},"e869":{"name":"Build"},"e43c":{"name":"Burst Mode"},"e0af":{"name":"Business"},"eb3f":{"name":"Business Center"},"e86a":{"name":"Cached"},"e7e9":{"name":"Cake"},"e0b0":{"name":"Call"},"e0b1":{"name":"Call End"},"e0b2":{"name":"Call Made"},"e0b3":{"name":"Call Merge"},"e0b4":{"name":"Call Missed"},"e0e4":{"name":"Call Missed Outgoing"},"e0b5":{"name":"Call Received"},"e0b6":{"name":"Call Split"},"e06c":{"name":"Call To Action"},"e3af":{"name":"Camera"},"e3b0":{"name":"Camera Alt"},"e8fc":{"name":"Camera Enhance"},"e3b1":{"name":"Camera Front"},"e3b2":{"name":"Camera Rear"},"e3b3":{"name":"Camera Roll"},"e5c9":{"name":"Cancel"},"e8f6":{"name":"Card Giftcard"},"e8f7":{"name":"Card Membership"},"e8f8":{"name":"Card Travel"},"eb40":{"name":"Casino"},"e307":{"name":"Cast"},"e308":{"name":"Cast Connected"},"e3b4":{"name":"Center Focus Strong"},"e3b5":{"name":"Center Focus Weak"},"e86b":{"name":"Change History"},"e0b7":{"name":"Chat"},"e0ca":{"name":"Chat Bubble"},"e0cb":{"name":"Chat Bubble Outline"},"e5ca":{"name":"Check"},"e834":{"name":"Check Box"},"e835":{"name":"Check Box Outline Blank"},"e86c":{"name":"Check Circle"},"e5cb":{"name":"CLine truncated

AppKit/Resources/fonts/material-icons.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(MaterialIcons-Regular.woff2) format('woff2'),
+       url(MaterialIcons-Regular.woff) format('woff'),
+       url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

AppKit/_CPImageAndTextView.j

@@ -662,17 +662,6 @@ var _CPimageAndTextViewFrameSizeChangedFlag         = 1 << 0,
         if (!imageStyle)
             var imageStyle = _DOMImageElement.style;
 
-        if (_flags & _CPImageAndTextViewImageChangedFlag)
-        {
-            if (isCSSBasedImage)
-                _cssStyleNode = [_image applyCSSImageForView:self
-                                                onDOMElement:_DOMImageElement
-                                                   styleNode:_cssStyleNode
-                                               previousState:@ref(_cssStylePreviousState)];
-            else
-                _DOMImageElement.src = [_image filename];
-        }
-
         var centerX = size.width / 2.0,
             centerY = size.height / 2.0,
             imageSize = [_image size],
@@ -737,6 +726,24 @@ var _CPimageAndTextViewFrameSizeChangedFlag         = 1 << 0,
             imageStyle.top = FLOOR(centerY - imageHeight / 2.0) + "px";
             imageStyle.left = FLOOR(centerX - imageWidth / 2.0) + "px";
         }
+
+        if (_flags & _CPImageAndTextViewImageChangedFlag)
+        {
+            if (isCSSBasedImage)
+            {
+                // For material icons images & co.
+                if ([_image _shouldBeResized])
+                    [_image _setDisplaySize:CGSizeMake(imageWidth, imageHeight)];
+
+                _cssStyleNode = [_image applyCSSImageForView:self
+                                                onDOMElement:_DOMImageElement
+                                                   styleNode:_cssStyleNode
+                                               previousState:@ref(_cssStylePreviousState)];
+            }
+            else
+                _DOMImageElement.src = [_image filename];
+        }
+
     }
 
     if (hasDOMTextElement)

Tools/nib2cib/NSCustomResource.j

@@ -34,6 +34,7 @@ var FILE = require("file"),
     supportedTemplateImages = {
         "NSAddTemplate": "CPAddTemplate",
         "NSRemoveTemplate": "CPRemoveTemplate",
+        "NSActionTemplate": "CPActionTemplate",
         "NSToolbarShowColors": "CPImageNameColorPanel"
     };
 
@@ -64,6 +65,12 @@ var FILE = require("file"),
             else
                 [CPException raise:Nib2CibException format:@"The built in image “%@” is not supported.", _resourceName];
         }
+        else if (/^(.+)@MaterialIcons+$/.test(_resourceName))
+        {
+            // Catch a material icon specified by "icon-name@MaterialIcons"
+            // Just do nothing and leave _resourceName as is.
+            // It will be treated during runtime by _CPCibCustomResource
+        }
         else
         {
             var match = /^(.+)@(.+)$/.exec(_resourceName);