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

chrome/browser/ui/cocoa/circular_activity_indicator_view.mm

+// 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 "circular_activity_indicator_view.h"
+
+#include "base/mac/scoped_cftyperef.h"
+#include "base/mac/scoped_nsobject.h"
+
+#define DEGREES_90            (M_PI / 2)

[groby-ooo-7-16, 2015/03/30 23:28:31]

Please don't #define constants. Chromium customarily uses the kXYZ notation in
an anonymous namespace - i.e.

namespace {
...
const CGFloat kArcRadius = 12.5;
...
}  // namespace

[shrike, 2015/03/31 07:05:53]

Acknowledged.

+#define DEGREES_180           (M_PI)
+#define DEGREES_270           (3 * M_PI / 2)
+#define DEGREES_360           (2 * M_PI)
+#define DESIGN_WIDTH          28.0
+#define ARC_RADIUS            12.5
+#define ARC_LENGTH            58.9
+#define ARC_STROKE_WIDTH      3.0
+#define ARC_ANIMATION_TIME    1.333
+#define ARC_START_ANGLE       DEGREES_180
+#define ARC_END_ANGLE         (ARC_START_ANGLE + DEGREES_270)
+
+@implementation CircularActivityIndicatorView

[groby-ooo-7-16, 2015/03/30 23:28:31]

nit: I'd call it "SpinnerView" - that's the common term in Chrome for spinning
indicators.

[shrike, 2015/03/31 07:05:53]

But that's not what the designers call it (per their design spec.). It doesn't
seem like calling it by its correct name can be the wrong choice.

[groby-ooo-7-16, 2015/03/31 23:07:01]

Then do ignore me. I had no idea that's the official name :)

+
+- (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 circular activity indicator was designed to be |DESIGN_WIDTH| points
+  // wide. Compute the scale factor needed to scale design parameters like
+  // |RADIUS| so that the activity indicator scales to fit the view's bounds.
+  CGFloat scale_factor = bounds.size.width / DESIGN_WIDTH;
+
+  shape_layer_ = [CAShapeLayer layer];
+  [shape_layer_ setBounds:bounds];
+  [shape_layer_ setLineWidth:ARC_STROKE_WIDTH * scale_factor];
+  [shape_layer_ setLineCap:kCALineCapSquare];
+  [shape_layer_ setLineDashPattern:[NSArray arrayWithObject:
+      [NSNumber numberWithFloat:ARC_LENGTH * scale_factor]]];
+  [shape_layer_ setFillColor:NULL];
+
+  // Create the arc that, when stroked, creates the activity indicator.
+  base::ScopedCFTypeRef<CGMutablePathRef> shape_path(CGPathCreateMutable());
+  CGPathAddArc(shape_path, NULL, bounds.size.width / 2.0,
+               bounds.size.height / 2.0, ARC_RADIUS * scale_factor,
+               ARC_START_ANGLE, ARC_END_ANGLE, 0);
+  [shape_layer_ setPath:shape_path];
+
+  // Place |shape_layer_| in a parent layer so that it's easy to rotate
+  // |shape_layer_| around the center of the view.
+  CALayer* parent_layer = [CALayer layer];
+  [parent_layer setBounds:bounds];
+  [parent_layer addSublayer:shape_layer_];
+  [shape_layer_ setPosition:CGPointMake(bounds.size.width / 2.0,
+                                        bounds.size.height / 2.0)];
+
+  return parent_layer;
+}
+
+// The circular activity indicator animation consists of four cycles that it
+// continually repeats. Each cycle consists of one complete rotation of the
+// circular activity indicator's arc drawn in one of four colors (blue, red,
+// yellow, or green). The arc's length also grows and shrinks over the course
+// of each cycle, which we achieve by drawing the arc using a (solid) dashed

[groby-ooo-7-16, 2015/03/30 23:28:31]

tiny nit: "we achieve" -> Please do clarify who "we" is. (It's a Chrome
peculiarity - the comments try to avoid "we", "I', etc. and pinpoint the
culprit)

[shrike, 2015/03/31 07:05:53]

Well, the "we" is actually me, but I didn't figure I could put my name in the
source.

I don't like using "we" in comments, and in fact I don't do that in my own code.
I only used it here because I'm following the lead of the chrome codebase
(there' a huge number of instances). I have changed it, but writing that the
activity indicator achieves the drawing sounds implausible (the activity
indicator didn't actually do anything to achieve its abilities).

[groby-ooo-7-16, 2015/03/31 23:07:01]

There's a huge number of instances because it slipped through code review :)
(It's also not officially part of the standard, so it varies by section)

I prefer non-we for clarity, but if it leads to contorted passive-voice
comments, fine.

+// line pattern and animating the "phase" property.

[groby-ooo-7-16, 2015/03/30 23:28:30]

I assume that's lineDashPhase?

[shrike, 2015/03/31 07:05:53]

Eh. I've changed it, but the APIs that do the actual work don't have anything
called "lineDashPhase".

+- (void)initializeAnimation {
+  CGRect bounds = [self bounds];
+  CGFloat scale_factor = bounds.size.width / DESIGN_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(
+      [[CAMediaTimingFunction alloc] initWithControlPoints:0.4 :0.0 :0.2 :1]);
+  base::scoped_nsobject<CAKeyframeAnimation> first_half_animation(
+      [[CAKeyframeAnimation alloc] init]);
+  [first_half_animation setTimingFunction:timing_function];
+  [first_half_animation setKeyPath:@"lineDashPhase"];
+  NSMutableArray* animation_values = [NSMutableArray array];
+  [animation_values addObject:[NSNumber numberWithFloat:-58.5 * scale_factor]];
+  [animation_values addObject:[NSNumber numberWithFloat:0.0]];
+  [first_half_animation setValues:animation_values];
+  NSMutableArray* key_times = [NSMutableArray array];
+  [key_times addObject:[NSNumber numberWithFloat:0.0]];
+  [key_times addObject:[NSNumber numberWithFloat:1.0]];
+  [first_half_animation setKeyTimes:key_times];
+  [first_half_animation setDuration:ARC_ANIMATION_TIME / 2.0];
+  [first_half_animation setRemovedOnCompletion:NO];
+  [first_half_animation 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> second_half_animation(
+      [[CAKeyframeAnimation alloc] init]);
+  [second_half_animation setTimingFunction:timing_function];
+  [second_half_animation setKeyPath:@"lineDashPhase"];
+  animation_values = [NSMutableArray array];
+  [animation_values addObject:[NSNumber numberWithFloat:0.0]];
+  [animation_values addObject:[NSNumber numberWithFloat:58.6 * scale_factor]];

[groby-ooo-7-16, 2015/03/30 23:28:30]

What is 58.6?

[shrike, 2015/03/31 07:05:53]

It's a value that's just short of the full arc length of 58.9 - if the animation
were allowed to reach the full arc length the arc would have zero length at the
end of the animation. I have clarified this in the code and removed this
anonymous constant.

[groby-ooo-7-16, 2015/03/31 23:07:01]

Awesome, thanks. (The proximity to 57.3 - rad-2-deg - confused the heck out of
me :)

+  [second_half_animation setValues:animation_values];
+  [second_half_animation setKeyTimes:key_times];
+  [second_half_animation setDuration:ARC_ANIMATION_TIME / 2.0];
+  [second_half_animation setRemovedOnCompletion:NO];
+  [second_half_animation setFillMode:kCAFillModeForwards];
+
+  // Make four copies of the arc animations, to cover the four complete cycles
+  // of the full animation.
+  NSMutableArray* animations = [NSMutableArray array];
+  NSUInteger i;
+  CGFloat begin_time = 0;
+  for (i = 0; i < 4; i++, begin_time += ARC_ANIMATION_TIME) {
+    [first_half_animation setBeginTime:begin_time];
+    [second_half_animation setBeginTime:begin_time + ARC_ANIMATION_TIME / 2.0];
+    [animations addObject:first_half_animation];

[groby-ooo-7-16, 2015/03/30 23:28:30]

Out of curiosity: Why not [[[first_half_animation] copy] autorelease]  

To avoid a bunch of autoreleased objects? Or am I missing something subtle here?
(Entirely possible. Coffee is running low ;)

[shrike, 2015/03/31 07:05:53]

I was thinking that the Chrome codebase frowned upon autorelease but I see that
is not the case. This is my first time coding with the scoped_nsobject
mechanism, so I'm really just trying to figure out and do the right thing with
object lifetimes. What do you recommend?

[groby-ooo-7-16, 2015/03/31 23:07:01]

We're torn on autorelease :)

Leaving this as-is is fine - I was just curious if I was missing something.

+    [animations addObject:second_half_animation];
+    first_half_animation.reset([first_half_animation copy]);
+    second_half_animation.reset([second_half_animation 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"];
+  animation_values = [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.
+  [animation_values addObject:[NSNumber numberWithFloat:0.0]];
+  [animation_values addObject:[NSNumber numberWithFloat:-1 * DEGREES_360]];
+  [animation_values addObject:
+      [NSNumber numberWithFloat:-1 * DEGREES_360 + DEGREES_90]];
+  [animation_values addObject:
+      [NSNumber numberWithFloat:-2 * DEGREES_360 + DEGREES_90]];
+  [animation_values addObject:
+      [NSNumber numberWithFloat:-2 * DEGREES_360 + DEGREES_180]];
+  [animation_values addObject:
+      [NSNumber numberWithFloat:-3 * DEGREES_360 + DEGREES_180]];
+  [animation_values addObject:
+      [NSNumber numberWithFloat:-3 * DEGREES_360 + DEGREES_270]];
+  [animation_values addObject:
+      [NSNumber numberWithFloat:-4 * DEGREES_360 + DEGREES_270]];
+  [rotation_animation setValues:animation_values];
+  key_times = [NSMutableArray array];
+  [key_times addObject:[NSNumber numberWithFloat:0.0]];
+  [key_times addObject:[NSNumber numberWithFloat:0.25]];
+  [key_times addObject:[NSNumber numberWithFloat:0.25]];
+  [key_times addObject:[NSNumber numberWithFloat:0.5]];
+  [key_times addObject:[NSNumber numberWithFloat:0.5]];
+  [key_times addObject:[NSNumber numberWithFloat:0.75]];
+  [key_times addObject:[NSNumber numberWithFloat:0.75]];
+  [key_times addObject:[NSNumber numberWithFloat:1.0]];
+  [rotation_animation setKeyTimes:key_times];
+  [rotation_animation setDuration:ARC_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 *color_animation = [CAKeyframeAnimation animation];
+  color_animation.timingFunction =
+      [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
+  color_animation.keyPath = @"strokeColor";
+  CGColorRef blueColor = [[NSColor colorWithDeviceRed:62.0 / 255.0

[groby-ooo-7-16, 2015/03/30 23:28:30]

It might be worth defining them as constants in the anon namespace:

  const SkColor kBlue = SkColorSetRGB(...)
  ...

and then converting to an NSColor here with SkColorToCalibratedNSColor

That way, we can share them with Views code. (Assuming somebody writes a Views
spinner at some point)

[shrike, 2015/03/31 07:05:53]

OK.

+                                             green:130.0 / 255.0

[groby-ooo-7-16, 2015/03/30 23:42:06]

Sorry, forgot that -CGColor doesn't work before 10.8. So, with SKColors, you
want to use CGColorCreateFromSkColor

[shrike, 2015/03/31 07:05:53]

Done.

+                                              blue:241.0 / 255.0
+                                             alpha:1.0] CGColor];
+  CGColorRef redColor = [[NSColor colorWithDeviceRed:232.0 / 255.0
+                                            green:83.0 / 255.0
+                                             blue:51.0 / 255.0
+                                            alpha:1.0] CGColor];
+  CGColorRef yellowColor = [[NSColor colorWithDeviceRed:252.0 / 255.0
+                                               green:177.0 / 255.0
+                                                blue:42.0 / 255.0
+                                               alpha:1.0] CGColor];
+  CGColorRef greenColor = [[NSColor colorWithDeviceRed:19.0 / 255.0
+                                              green:140.0 / 255.0
+                                               blue:86.0 / 255.0
+                                              alpha:1.0] CGColor];
+  animation_values = [NSMutableArray array];
+  [animation_values addObject:(id)blueColor];
+  [animation_values addObject:(id)blueColor];
+  [animation_values addObject:(id)redColor];
+  [animation_values addObject:(id)redColor];
+  [animation_values addObject:(id)yellowColor];
+  [animation_values addObject:(id)yellowColor];
+  [animation_values addObject:(id)greenColor];
+  [animation_values addObject:(id)greenColor];
+  [animation_values addObject:(id)blueColor];
+  [color_animation setValues:animation_values];
+  key_times = [NSMutableArray array];
+  // Begin the transition bewtween colors a short time before the end of each
+  // cycle.
+  CGFloat transition_offset = 0.05;

[groby-ooo-7-16, 2015/03/30 23:28:31]

Probably worth moving out as a constant.

[shrike, 2015/03/31 07:05:53]

Done.

+  [key_times addObject:[NSNumber numberWithFloat:0.0]];
+  [key_times addObject:[NSNumber numberWithFloat:0.25 - transition_offset]];
+  [key_times addObject:[NSNumber numberWithFloat:0.25]];
+  [key_times addObject:[NSNumber numberWithFloat:0.50 - transition_offset]];
+  [key_times addObject:[NSNumber numberWithFloat:0.5]];
+  [key_times addObject:[NSNumber numberWithFloat:0.75 - transition_offset]];
+  [key_times addObject:[NSNumber numberWithFloat:0.75]];
+  [key_times addObject:[NSNumber numberWithFloat:0.999 - transition_offset]];
+  [key_times addObject:[NSNumber numberWithFloat:0.999]];
+  [color_animation setKeyTimes:key_times];
+  [color_animation setDuration:ARC_ANIMATION_TIME * 4.0];
+  [color_animation setRemovedOnCompletion:NO];
+  [color_animation setFillMode:kCAFillModeForwards];
+  [color_animation setRepeatCount:HUGE_VALF];
+  [animations addObject:color_animation];
+
+  // Use an animation group so that the animations are easier to manage, and to
+  // given them the best chance of firing to the same timing.
+  CAAnimationGroup* group = [CAAnimationGroup animation];
+  [group setDuration:ARC_ANIMATION_TIME * 4];
+  [group setRepeatCount:HUGE_VALF];
+  [group setFillMode:kCAFillModeForwards];
+  [group setRemovedOnCompletion:NO];
+  [group setAnimations:animations];
+
+  spinner_animation_.reset([group retain]);
+}
+
+- (void)updateAnimation:(NSNotification*)notification {
+  // Only animate the activity indicator if we are within a window, and that
+  // window is not currently minimized or being minimized.
+  if ([self window] && ![[self window] isMiniaturized] && ![self isHidden] &&

[groby-ooo-7-16, 2015/03/30 23:28:31]

Do we need the [self window] check? (I assume it's here for the case where you
generate a SpinnerView but don't add it to a window immediately?)

[shrike, 2015/03/31 07:05:53]

It's more for the case where you remove the activity indicator from a window
(make sure it's no longer spinning), and if you later add it back (make sure it
starts spinning).

[groby-ooo-7-16, 2015/03/31 23:07:01]

Acknowledged.

+      ![[notification name] isEqualToString:
+            NSWindowWillMiniaturizeNotification]) {
+    if (spinner_animation_.get() == nil) {
+      [self initializeAnimation];
+    }
+    if (!is_animating_) {
+      [shape_layer_ addAnimation:spinner_animation_.get() forKey:nil];
+      is_animating_ = true;
+    } else {
+    }
+  } else {
+    [shape_layer_ removeAllAnimations];
+    is_animating_ = false;
+  }
+}
+
+// Register/unregister for window miniaturization event notifications so that
+// we can stop the animation 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];
+}
+
+
+@end