[Mac][MD User Menu] Updated the profile badge icons

chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm

Index: chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
diff --git a/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm b/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
index 328a875de2aaf489e73b14c1d5577de94c879db3..9c027c3f783ef9ff250e315e2617c1f9311dcb91 100644
--- a/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
+++ b/chrome/browser/ui/cocoa/profiles/profile_chooser_controller.mm
@@ -655,6 +655,30 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
 @end
 
+// A custom view with a filled circular background.
+@interface BackgroundCircleView : NSView {
+ @private
+  base::scoped_nsobject<NSColor> fillColor_;
+}
+@end
+
+@implementation BackgroundCircleView
+- (id)initWithFrame:(NSRect)frameRect withFillColor:(NSColor*)fillColor {
+  if ((self = [super initWithFrame:frameRect]))
+    fillColor_.reset([fillColor retain]);
+  return self;
+}
+
+- (void)drawRect:(NSRect)dirtyRect {
+  [fillColor_ setFill];
+  NSBezierPath* circlePath = [NSBezierPath bezierPath];
+  [circlePath appendBezierPathWithOvalInRect:[self bounds]];
+  [circlePath fill];
+
+  [super drawRect:dirtyRect];
+}
+@end
+
 // A custom text control that turns into a textfield for editing when clicked.
 @interface EditableProfileNameButton : HoverImageButton<NSTextFieldDelegate> {
  @private
@@ -2064,24 +2088,32 @@ class ActiveProfileObserverBridge : public AvatarMenuObserver,
 
   // Profile badge for supervised account.
   if (browser_->profile()->IsSupervised()) {
-    base::scoped_nsobject<NSImageView> supervisedIcon(
-        [[NSImageView alloc] initWithFrame:NSZeroRect]);
-    // TODO(janeliulwq): Replace the following two profile badge icons with
-    // smaller versions of them (24 x 24) to adapt to smaller profile icons.
-    int imageId = browser_->profile()->IsChild()
-                      ? IDR_ICON_PROFILES_MENU_CHILD
-                      : IDR_ICON_PROFILES_MENU_LEGACY_SUPERVISED;
-    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-    [supervisedIcon setImage:rb.GetNativeImageNamed(imageId).ToNSImage()];
-
-    NSSize size = [[supervisedIcon image] size];
-    [supervisedIcon setFrameSize:size];
+    // Draw a circle as the background of the badge icon.
+    const int badgeSize = 24;

[groby-ooo-7-16, 2016/08/23 02:32:55]

Tiny nit: Maybe want to use constexpr here. (It's a tiny semantic difference -
constexpr is guaranteed to be known at compiletime - but it seems to be what
Chrome is doing for constants these days)

[Jane, 2016/08/23 13:33:04]

Done.

     const int badgeSpacing = 4;
-    [supervisedIcon setFrameOrigin:NSMakePoint(xOffset + kMdImageSide -
-                                                   size.width + badgeSpacing,
-                                               cardYOffset + kMdImageSide -
-                                                   size.height + badgeSpacing)];
-    [profileCard addSubview:supervisedIcon];
+    base::scoped_nsobject<BackgroundCircleView> badgeIconWithCircle([
+        [BackgroundCircleView alloc]
+        initWithFrame:NSMakeRect(

[groby-ooo-7-16, 2016/08/23 02:32:55]

is that formatted with git cl format? I'd think the method call would need to be
indented 4 here, but cl format is occasionally odd with long lines of code.

[Jane, 2016/08/23 13:33:04]

True, I see...

+                          xOffset + kMdImageSide - badgeSize + badgeSpacing,

[groby-ooo-7-16, 2016/08/23 02:32:55]

Maybe factor out either the entire rect, or at least the shared offset? I know,
it's ObjectiveC, lines _should_ be long, but maybe a bit shorter is good :)

[Jane, 2016/08/23 13:33:04]

Done. Factored out the rect above.

+                          cardYOffset + kMdImageSide - badgeSize + badgeSpacing,
+                          badgeSize, badgeSize)
+        withFillColor:GetDialogBackgroundColor()]);
+    // Draw the badge icon.

[groby-ooo-7-16, 2016/08/23 02:32:55]

Super nitpicky nit: Add the badge icon - you're not drawing here. 

[Jane, 2016/08/23 13:33:04]

Done.

+    const int borderWidth = 1;
+    const int badgeIconSize = badgeSize - borderWidth * 2;
+    base::scoped_nsobject<NSImageView> badgeIconView([[NSImageView alloc]
+        initWithFrame:NSMakeRect(borderWidth, borderWidth,
+                                 badgeIconSize, badgeIconSize)]);
+    gfx::VectorIconId badgeIcon =
+        browser_->profile()->IsChild()
+            ? gfx::VectorIconId::ACCOUNT_CHILD_CIRCLE
+            : gfx::VectorIconId::SUPERVISOR_ACCOUNT_CIRCLE;
+    [badgeIconView
+        setImage:NSImageFromImageSkia(gfx::CreateVectorIcon(
+                     badgeIcon, badgeIconSize, gfx::kChromeIconGrey))];
+    [badgeIconWithCircle addSubview:badgeIconView];
+
+    [profileCard addSubview:badgeIconWithCircle];
   }
 
   // Profile name, left-aligned to the right of profile icon.