Add a Material Design Circular Activity Indicator (Spinner) view for Mac.

chrome/browser/ui/cocoa/spinner_view.mm

Index: chrome/browser/ui/cocoa/spinner_view.mm
diff --git a/chrome/browser/ui/cocoa/spinner_view.mm b/chrome/browser/ui/cocoa/spinner_view.mm
new file mode 100644
index 0000000000000000000000000000000000000000..e02d216153d53143f2d979001ad90b43d1f0262a
--- /dev/null
+++ b/chrome/browser/ui/cocoa/spinner_view.mm
@@ -0,0 +1,313 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "chrome/browser/ui/cocoa/spinner_view.h"
+
+#import <QuartzCore/QuartzCore.h>
+
+#include "base/mac/scoped_cftyperef.h"
+#include "skia/ext/skia_utils_mac.h"
+
+namespace {
+const CGFloat k90_Degrees           = (M_PI / 2);

[Robert Sesek, 2015/04/02 19:58:35]

We don't usually mix underscores and camel case. Consider naming kDegrees90,
kDegrees180, etc.

[shrike, 2015/04/02 21:14:58]

Done.

+const CGFloat k180_Degrees          = (M_PI);
+const CGFloat k270_Degrees          = (3 * M_PI / 2);
+const CGFloat k360_Degrees          = (2 * M_PI);
+const CGFloat kDesign_Width         = 28.0;

[Robert Sesek, 2015/04/02 19:58:35]

And then here and below, just remove _.

[shrike, 2015/04/02 21:14:57]

Done.

+const CGFloat kArc_Radius           = 12.5;
+const CGFloat kArc_Length           = 58.9;
+const CGFloat kArc_Stroke_Width     = 3.0;
+const CGFloat kArc_Animation_Time   = 1.333;
+const CGFloat kArc_Start_Angle      = k180_Degrees;
+const CGFloat kArc_End_Angle        = (kArc_Start_Angle + k270_Degrees);
+
+const SkColor kBlue   = SkColorSetRGB(66.0, 133.0, 244.0); // #4285f4.
+const SkColor kRed    = SkColorSetRGB(219.0, 68.0, 55.0);  // #db4437.
+const SkColor kYellow = SkColorSetRGB(244.0, 180.0, 0.0);  // #f4b400.
+const SkColor kGreen  = SkColorSetRGB(15.0, 157.0, 88.0);  // #0f9d58.
+}
+
+@interface SpinnerView () {
+  base::scoped_nsobject<CAAnimationGroup> spinnerAnimation_;
+  CAShapeLayer* shapeLayer_; //  Weak.

[Robert Sesek, 2015/04/02 19:58:35]

nit: two spaces before end-of-line comments

[shrike, 2015/04/02 21:14:58]

Sorry - I put the two spaces on the wrong side of the //.

+}
+@end
+
+
+@implementation SpinnerView
+
+- (instancetype)initWithFrame:(NSRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    [self setWantsLayer:YES];
+  }
+  return self;
+}
+
+- (void)dealloc {
+  [[NSNotificationCenter defaultCenter] removeObserver:self];
+  [super dealloc];
+}
+
+// Return a custom CALayer for the view (called from setWantsLayer:).
+- (CALayer*)makeBackingLayer {
+  CGRect bounds = [self bounds];
+  // The spinner was designed to be |kDesign_Width| points wide. Compute the
+  // scale factor needed to scale design parameters like |RADIUS| so that the
+  // spinner scales to fit the view's bounds.
+  CGFloat scaleFactor = bounds.size.width / kDesign_Width;
+
+  shapeLayer_ = [CAShapeLayer layer];
+  [shapeLayer_ setBounds:bounds];
+  [shapeLayer_ setLineWidth:kArc_Stroke_Width * scaleFactor];
+  [shapeLayer_ setLineCap:kCALineCapSquare];
+  [shapeLayer_ setLineDashPattern:[NSArray arrayWithObject:

[Robert Sesek, 2015/04/02 19:58:35]

Consider using @[ @(kArc_Length * scaleFactor) ]

[shrike, 2015/04/02 21:14:57]

Sounds good.

+      [NSNumber numberWithFloat:kArc_Length * scaleFactor]]];
+  [shapeLayer_ setFillColor:NULL];
+
+  // Create the arc that, when stroked, creates the spinner.
+  base::ScopedCFTypeRef<CGMutablePathRef> shape_path(CGPathCreateMutable());

[Robert Sesek, 2015/04/02 19:58:35]

naming: shapePath

[shrike, 2015/04/02 21:14:57]

Done.

+  CGPathAddArc(shape_path, NULL, bounds.size.width / 2.0,
+               bounds.size.height / 2.0, kArc_Radius * scaleFactor,
+               kArc_Start_Angle, kArc_End_Angle, 0);
+  [shapeLayer_ setPath:shape_path];
+
+  // Place |shapeLayer_| in a parent layer so that it's easy to rotate
+  // |shapeLayer_| around the center of the view.
+  CALayer* parent_layer = [CALayer layer];

[Robert Sesek, 2015/04/02 19:58:35]

naming: parentLayer

[shrike, 2015/04/02 21:14:58]

Done.

+  [parent_layer setBounds:bounds];
+  [parent_layer addSublayer:shapeLayer_];
+  [shapeLayer_ setPosition:CGPointMake(bounds.size.width / 2.0,
+                                       bounds.size.height / 2.0)];
+
+  return parent_layer;
+}
+
+// The spinner animation consists of four cycles that it continuously repeats.
+// Each cycle consists of one complete rotation of the spinner's arc drawn in
+// blue, red, yellow, or green. The arc's length also grows and shrinks over the
+// course of each cycle, which the spinner achieves by drawing the arc using
+// a (solid) dashed line pattern and animating the "lineDashPhase" property.
+- (void)initializeAnimation {

[Robert Sesek, 2015/04/02 19:58:35]

Move private methods below overrides. Generally the order is:

- Public class convenience functions
- init/dealloc
- Public methods
- Overridden methods
- viewDidX
- Private methods

[shrike, 2015/04/02 21:14:57]

Done.

+  CGRect bounds = [self bounds];
+  CGFloat scaleFactor = bounds.size.width / kDesign_Width;
+
+  // Create the first half of the arc animation, where it grows from a short
+  // block to its full length.
+  base::scoped_nsobject<CAMediaTimingFunction> timing_function(

[Robert Sesek, 2015/04/02 19:58:36]

naming: timingFunction

[shrike, 2015/04/02 21:14:57]

Done.

+      [[CAMediaTimingFunction alloc] initWithControlPoints:0.4 :0.0 :0.2 :1]);
+  base::scoped_nsobject<CAKeyframeAnimation> firstHalfAnimation(
+      [[CAKeyframeAnimation alloc] init]);
+  [firstHalfAnimation setTimingFunction:timing_function];
+  [firstHalfAnimation setKeyPath:@"lineDashPhase"];
+  NSMutableArray* animationValues = [NSMutableArray array];
+  // Begin the lineDashPhase animation just short of the full arc length,
+  // otherwise the arc will be zero length at start.
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-(kArc_Length - 0.2) * scaleFactor]];
+  [animationValues addObject:[NSNumber numberWithFloat:0.0]];
+  [firstHalfAnimation setValues:animationValues];
+  NSMutableArray* keyTimes = [NSMutableArray array];

[Robert Sesek, 2015/04/02 19:58:35]

Does this need to be mutable, or can you jus construct it with the two objects
on lines 111 and 112.

[shrike, 2015/04/02 21:14:57]

OK.

+  [keyTimes addObject:[NSNumber numberWithFloat:0.0]];
+  [keyTimes addObject:[NSNumber numberWithFloat:1.0]];
+  [firstHalfAnimation setKeyTimes:keyTimes];
+  [firstHalfAnimation setDuration:kArc_Animation_Time / 2.0];
+  [firstHalfAnimation setRemovedOnCompletion:NO];
+  [firstHalfAnimation setFillMode:kCAFillModeForwards];
+
+  // Create the second half of the arc animation, where it shrinks from full
+  // length back to a short block.
+  base::scoped_nsobject<CAKeyframeAnimation> secondHalfAnimation(
+      [[CAKeyframeAnimation alloc] init]);
+  [secondHalfAnimation setTimingFunction:timing_function];
+  [secondHalfAnimation setKeyPath:@"lineDashPhase"];
+  animationValues = [NSMutableArray array];
+  [animationValues addObject:[NSNumber numberWithFloat:0.0]];
+  // Stop the lineDashPhase animation just before it reaches the full arc
+  // length, otherwise the arc will be zero length at the end.
+  [animationValues addObject:
+      [NSNumber numberWithFloat:(kArc_Length - 0.3) * scaleFactor]];
+  [secondHalfAnimation setValues:animationValues];
+  [secondHalfAnimation setKeyTimes:keyTimes];
+  [secondHalfAnimation setDuration:kArc_Animation_Time / 2.0];
+  [secondHalfAnimation setRemovedOnCompletion:NO];
+  [secondHalfAnimation setFillMode:kCAFillModeForwards];
+
+  // Make four copies of the arc animations, to cover the four complete cycles
+  // of the full animation.
+  NSMutableArray* animations = [NSMutableArray array];
+  CGFloat begin_time = 0;
+  for (NSUInteger i = 0; i < 4; i++, begin_time += kArc_Animation_Time) {
+    [firstHalfAnimation setBeginTime:begin_time];
+    [secondHalfAnimation setBeginTime:begin_time + kArc_Animation_Time / 2.0];
+    [animations addObject:firstHalfAnimation];
+    [animations addObject:secondHalfAnimation];
+    firstHalfAnimation.reset([firstHalfAnimation copy]);
+    secondHalfAnimation.reset([secondHalfAnimation copy]);
+  }
+
+  // Create the rotation animation, which rotates the arc 360 degrees on each
+  // cycle. The animation also includes a separate 90 degree rotation in the
+  // opposite direction at the very end of each cycle. Ignoring the 360 degree
+  // rotation, each arc starts as a short block at degree 0 and ends as a
+  // short block at degree 270. Without a 90 degree rotation at the end of each
+  // cycle, the short block would appear to suddenly jump from 270 degrees to
+  // 360 degrees.
+  CAKeyframeAnimation *rotation_animation = [CAKeyframeAnimation animation];
+  [rotation_animation setTimingFunction:
+      [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
+  [rotation_animation setKeyPath:@"transform.rotation"];
+  animationValues = [NSMutableArray array];
+  // Use a key frame animation to rotate 360 degrees on each cycle, and then
+  // jump back 90 degrees at the end of each cycle.
+  [animationValues addObject:[NSNumber numberWithFloat:0.0]];
+  [animationValues addObject:[NSNumber numberWithFloat:-1 * k360_Degrees]];
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-1 * k360_Degrees + k90_Degrees]];
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-2 * k360_Degrees + k90_Degrees]];
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-2 * k360_Degrees + k180_Degrees]];
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-3 * k360_Degrees + k180_Degrees]];
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-3 * k360_Degrees + k270_Degrees]];
+  [animationValues addObject:
+      [NSNumber numberWithFloat:-4 * k360_Degrees + k270_Degrees]];
+  [rotation_animation setValues:animationValues];
+  keyTimes = [NSMutableArray array];

[Robert Sesek, 2015/04/02 19:58:35]

Same comment about mutability.

+  [keyTimes addObject:[NSNumber numberWithFloat:0.0]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.25]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.25]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.5]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.5]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.75]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.75]];
+  [keyTimes addObject:[NSNumber numberWithFloat:1.0]];
+  [rotation_animation setKeyTimes:keyTimes];
+  [rotation_animation setDuration:kArc_Animation_Time * 4.0];
+  [rotation_animation setRemovedOnCompletion:NO];
+  [rotation_animation setFillMode:kCAFillModeForwards];
+  [rotation_animation setRepeatCount:HUGE_VALF];
+  [animations addObject:rotation_animation];
+
+  // Create a four-cycle-long key frame animation to transition between
+  // successive colors at the end of each cycle.
+  CAKeyframeAnimation* colorAnimation = [CAKeyframeAnimation animation];
+  colorAnimation.timingFunction =
+      [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
+  colorAnimation.keyPath = @"strokeColor";
+  CGColorRef blueColor = gfx::CGColorCreateFromSkColor(kBlue);
+  CGColorRef redColor = gfx::CGColorCreateFromSkColor(kRed);
+  CGColorRef yellowColor = gfx::CGColorCreateFromSkColor(kYellow);
+  CGColorRef greenColor = gfx::CGColorCreateFromSkColor(kGreen);
+  animationValues = [NSMutableArray array];
+  [animationValues addObject:(id)blueColor];
+  [animationValues addObject:(id)blueColor];
+  [animationValues addObject:(id)redColor];
+  [animationValues addObject:(id)redColor];
+  [animationValues addObject:(id)yellowColor];
+  [animationValues addObject:(id)yellowColor];
+  [animationValues addObject:(id)greenColor];
+  [animationValues addObject:(id)greenColor];
+  [animationValues addObject:(id)blueColor];
+  [colorAnimation setValues:animationValues];
+  CGColorRelease(blueColor);
+  CGColorRelease(redColor);
+  CGColorRelease(yellowColor);
+  CGColorRelease(greenColor);
+  keyTimes = [NSMutableArray array];

[Robert Sesek, 2015/04/02 19:58:35]

Same.

+  // Begin the transition bewtween colors at T - 10% of the cycle.
+  const CGFloat transition_offset = 0.1 * 0.25;
+  [keyTimes addObject:[NSNumber numberWithFloat:0.0]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.25 - transition_offset]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.25]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.50 - transition_offset]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.5]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.75 - transition_offset]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.75]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.999 - transition_offset]];
+  [keyTimes addObject:[NSNumber numberWithFloat:0.999]];
+  [colorAnimation setKeyTimes:keyTimes];
+  [colorAnimation setDuration:kArc_Animation_Time * 4.0];
+  [colorAnimation setRemovedOnCompletion:NO];
+  [colorAnimation setFillMode:kCAFillModeForwards];
+  [colorAnimation setRepeatCount:HUGE_VALF];
+  [animations addObject:colorAnimation];
+
+  // Use an animation group so that the animations are easier to manage, and to
+  // give them the best chance of firing synchronously.
+  CAAnimationGroup* group = [CAAnimationGroup animation];
+  [group setDuration:kArc_Animation_Time * 4];
+  [group setRepeatCount:HUGE_VALF];
+  [group setFillMode:kCAFillModeForwards];
+  [group setRemovedOnCompletion:NO];
+  [group setAnimations:animations];
+
+  spinnerAnimation_.reset([group retain]);
+}
+
+- (void)updateAnimation:(NSNotification*)notification {
+  // Only animate the spinner if it's within a window, and that window is not
+  // currently minimized or being minimized.
+  if ([self window] && ![[self window] isMiniaturized] && ![self isHidden] &&
+      ![[notification name] isEqualToString:
+            NSWindowWillMiniaturizeNotification]) {
+    if (spinnerAnimation_.get() == nil) {
+      [self initializeAnimation];
+    }
+    // The spinner should never be animating at this point
+    DCHECK(!isAnimating_);
+    if (!isAnimating_) {
+      [shapeLayer_ addAnimation:spinnerAnimation_.get() forKey:nil];
+      isAnimating_ = true;
+    }
+  } else {
+    [shapeLayer_ removeAllAnimations];
+    isAnimating_ = false;
+  }
+}
+
+// Register/unregister for window miniaturization event notifications so that
+// the spinner can stop animating if the window is minaturized
+// (i.e. not visible).
+- (void)viewWillMoveToWindow:(NSWindow*)newWindow {
+  if ([self window]) {
+    [[NSNotificationCenter defaultCenter]
+        removeObserver:self
+                  name:NSWindowWillMiniaturizeNotification
+                object:[self window]];
+    [[NSNotificationCenter defaultCenter]
+        removeObserver:self
+                  name:NSWindowDidDeminiaturizeNotification
+                object:[self window]];
+  }
+
+  if (newWindow) {
+    [[NSNotificationCenter defaultCenter]
+        addObserver:self
+     selector:@selector(updateAnimation:)
+               name:NSWindowWillMiniaturizeNotification
+             object:newWindow];
+    [[NSNotificationCenter defaultCenter]
+        addObserver:self
+     selector:@selector(updateAnimation:)
+               name:NSWindowDidDeminiaturizeNotification
+             object:newWindow];
+  }
+}
+
+// Start or stop the animation whenever the view is added to or removed from a
+// window.
+- (void)viewDidMoveToWindow {
+  [self updateAnimation:nil];
+}
+
+// Start or stop the animation whenever the view is unhidden or hidden.
+- (void)setHidden:(BOOL)flag {
+  [super setHidden:flag];
+  [self updateAnimation:nil];
+}
+
+

[Robert Sesek, 2015/04/02 19:58:35]

nit: extra blank line

[shrike, 2015/04/02 21:14:58]

Done.

+@end