Implement CredentialItemView and tests for the Mac account chooser.

chrome/browser/ui/cocoa/passwords/credential_item_view.mm

Index: chrome/browser/ui/cocoa/passwords/credential_item_view.mm
diff --git a/chrome/browser/ui/cocoa/passwords/credential_item_view.mm b/chrome/browser/ui/cocoa/passwords/credential_item_view.mm
new file mode 100644
index 0000000000000000000000000000000000000000..49801dd049860103f56699423a0fa8eb0d3f22a1
--- /dev/null
+++ b/chrome/browser/ui/cocoa/passwords/credential_item_view.mm
@@ -0,0 +1,227 @@
+// 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/passwords/credential_item_view.h"
+
+#include <algorithm>
+
+#include "base/i18n/rtl.h"
+#include "base/mac/foundation_util.h"
+#include "base/strings/sys_string_conversions.h"
+#include "chrome/browser/ui/passwords/manage_passwords_bubble_model.h"
+#include "chrome/browser/ui/passwords/manage_passwords_view_utils.h"
+#include "grit/theme_resources.h"
+#include "ui/base/resource/resource_bundle.h"
+#include "ui/gfx/image/image_skia.h"
+#include "ui/gfx/image/image_skia_util_mac.h"
+
+namespace {
+const CGFloat kVerticalPaddingBetweenCredentials = 10.0f;
+const CGFloat kHorizontalPaddingBetweenAvatarAndLabels = 10.0f;
+const CGFloat kVerticalPaddingBetweenLabels = 2.0f;
+}  // namespace
+
+// Custom button cell that draws nothing.
+@interface CredentialItemViewCell : NSButtonCell

[groby-ooo-7-16, 2015/02/19 17:01:33]

Are you sure you need an NSButton at all? :)

[dconnelly, 2015/02/20 15:36:06]

Replaced all this handling and ListView stuff with an NSTableView in the view
controller - removed

+@end
+
+@implementation CredentialItemViewCell
+- (void)drawWithFrame:(CGRect)frame inView:(NSView*)view {
+  // Do nothing.
+}
+@end
+
+@interface CredentialItemView()
+- (void)click:(id)sender;
+@end
+
+@implementation CredentialItemView
+
+- (id)initWithPasswordForm:(const autofill::PasswordForm&)passwordForm
+            credentialType:(password_manager::CredentialType)credentialType
+                  delegate:(id<CredentialItemDelegate>)delegate {
+  if ((self = [super init])) {
+    passwordForm_ = passwordForm;
+    credentialType_ = credentialType;
+    delegate_ = delegate;
+
+    // Forward clicks to the delegate.
+    [self setTarget:self];
+    [self setAction:@selector(click:)];
+
+    // -----------------------------------------------
+    // |      | John Q. Facebooker                   |
+    // | icon | john@somewhere.com                   |
+    // -----------------------------------------------
+
+    // Create the views.
+
+    avatarView_.reset([[NSImageView alloc] initWithFrame:CGRectZero]);

[groby-ooo-7-16, 2015/02/19 17:01:33]

I vaguely recall the profile switcher does similar magic for rounded frames -
worth sharing code? (Not because it's tremendous accounts of code, but because
the concept of applying that round frame should look identical everywhere. And I
think profile switcher doesn't just use cornerRadius, but I might be wrong)

[dconnelly, 2015/02/20 15:36:06]

The profile switchers I see on trunk Chromium and Chrome Beta have square
avatars -- can you point me to the dialog you mean?

+    [avatarView_ setWantsLayer:YES];
+    [[avatarView_ layer] setCornerRadius:kAvatarImageSize / 2.0f];
+    [[avatarView_ layer] setMasksToBounds:YES];
+    [self addSubview:avatarView_];
+
+    if (!passwordForm_.display_name.empty()) {
+      nameLabel_.reset([[NSTextField alloc] initWithFrame:NSZeroRect]);
+      [self addSubview:nameLabel_];
+      [nameLabel_ setBezeled:NO];
+      [nameLabel_ setDrawsBackground:NO];
+      [nameLabel_ setEditable:NO];
+      [nameLabel_ setSelectable:NO];
+      [nameLabel_
+          setStringValue:base::SysUTF16ToNSString(passwordForm_.display_name)];
+      [nameLabel_ setAlignment:base::i18n::IsRTL() ? NSRightTextAlignment
+                                                   : NSLeftTextAlignment];
+      [nameLabel_ sizeToFit];
+    }
+
+    usernameLabel_.reset([[NSTextField alloc] initWithFrame:NSZeroRect]);
+    [self addSubview:usernameLabel_];
+    [usernameLabel_ setBezeled:NO];
+    [usernameLabel_ setDrawsBackground:NO];
+    [usernameLabel_ setEditable:NO];
+    [usernameLabel_ setSelectable:NO];
+    [usernameLabel_
+        setStringValue:base::SysUTF16ToNSString(passwordForm_.username_value)];
+    [usernameLabel_ setAlignment:base::i18n::IsRTL() ? NSRightTextAlignment
+                                                     : NSLeftTextAlignment];
+    [usernameLabel_ sizeToFit];
+
+    // Compute the heights and widths of everything, as the layout depends on
+    // these measurements.
+    const CGFloat labelsHeight = CGRectGetHeight([nameLabel_ frame]) +
+                                 CGRectGetHeight([usernameLabel_ frame]) +
+                                 kVerticalPaddingBetweenLabels;
+    const CGFloat height = std::max(labelsHeight, CGFloat(kAvatarImageSize));
+    const CGFloat width = kAvatarImageSize +
+                          kHorizontalPaddingBetweenAvatarAndLabels +
+                          std::max(CGRectGetWidth([nameLabel_ frame]),
+                                   CGRectGetWidth([usernameLabel_ frame]));
+    self.frame = CGRectMake(0, 0, width, height);
+
+    // Lay out the views (RTL reverses the order horizontally).
+
+    const CGFloat avatarX = base::i18n::IsRTL() ? width - kAvatarImageSize : 0;
+    const CGFloat avatarY =
+        (kAvatarImageSize > height) ? 0 : (height - kAvatarImageSize) / 2.0f;
+    [avatarView_ setFrame:CGRectMake(avatarX, avatarY, kAvatarImageSize,
+                                     kAvatarImageSize)];
+
+    const CGFloat nameX = base::i18n::IsRTL()
+                              ? NSMinX([avatarView_ frame]) -
+                                    kHorizontalPaddingBetweenAvatarAndLabels -
+                                    CGRectGetWidth([nameLabel_ frame])
+                              : NSMaxX([avatarView_ frame]) +
+                                    kHorizontalPaddingBetweenAvatarAndLabels;
+    const CGFloat nameLabelY =
+        (labelsHeight > height) ? 0 : (height - labelsHeight) / 2.0f;
+    CGRect nameFrame = [nameLabel_ frame];
+    nameFrame.origin = CGPointMake(nameX, nameLabelY);

[groby-ooo-7-16, 2015/02/19 17:01:33]

NSMakePoint

[dconnelly, 2015/02/20 15:36:06]

Done.

+    [nameLabel_ setFrame:nameFrame];
+
+    const CGFloat usernameX =
+        base::i18n::IsRTL()
+            ? NSMinX([avatarView_ frame]) -
+                  kHorizontalPaddingBetweenAvatarAndLabels -
+                  CGRectGetWidth([usernameLabel_ frame])

[groby-ooo-7-16, 2015/02/19 17:01:33]

NSWidth - you *do* love CG functions, don't you? ;)

(here and elsewhere)

[dconnelly, 2015/02/20 15:36:06]

Sorry, yeah, the iOS idioms are just stickier in my brain.

+            : NSMaxX([avatarView_ frame]) +
+                  kHorizontalPaddingBetweenAvatarAndLabels;
+    const CGFloat usernameLabelY =
+        NSMaxY(nameFrame) + kVerticalPaddingBetweenLabels;
+    CGRect usernameFrame = [usernameLabel_ frame];
+    usernameFrame.origin = CGPointMake(usernameX, usernameLabelY);
+    [usernameLabel_ setFrame:usernameFrame];
+
+    // Use a default avatar and fetch the custom one, if it exists.
+    [self updateAvatar:[[self class] defaultAvatar]];
+    if (passwordForm_.avatar_url.is_valid())
+      [delegate_ fetchAvatar:passwordForm_.avatar_url forView:self];
+
+    // When resizing, stick to the left (resp. right for RTL) edge.
+    const NSUInteger autoresizingMask =
+        (base::i18n::IsRTL() ? NSViewMinXMargin : NSViewMaxXMargin);
+    [avatarView_ setAutoresizingMask:autoresizingMask];
+    [usernameLabel_ setAutoresizingMask:autoresizingMask];
+    [nameLabel_ setAutoresizingMask:autoresizingMask];
+    [self setAutoresizingMask:NSViewWidthSizable];
+  }
+
+  return self;
+}
+
+- (void)updateAvatar:(NSImage*)avatar {
+  [avatarView_ setImage:avatar];
+}
+
++ (NSImage*)defaultAvatar {
+  return gfx::NSImageFromImageSkia(ScaleImageForAccountAvatar(
+      *ResourceBundle::GetSharedInstance()
+           .GetImageNamed(IDR_PROFILE_AVATAR_PLACEHOLDER_LARGE)
+           .ToImageSkia()));
+}
+
++ (Class)cellClass {
+  return [CredentialItemViewCell class];
+}
+
+- (void)click:(id)sender {
+  DCHECK_EQ(sender, self);
+  [delegate_ selectPasswordForm:passwordForm_ credentialType:credentialType_];
+}
+
+- (NSTextField*)nameLabel {
+  return nameLabel_.get();
+}
+
+- (NSTextField*)usernameLabel {
+  return usernameLabel_.get();
+}
+
+- (NSImageView*)avatarView {
+  return avatarView_.get();
+}
+
+@end
+
+@interface CredentialItemListView()
+- (void)addCredentialItem:(CredentialItemView*)item;
+@end
+
+@implementation CredentialItemListView

[groby-ooo-7-16, 2015/02/19 17:01:33]

Question: Would this be better off as an NSTableView?

[dconnelly, 2015/02/20 15:36:06]

You know, I've never written an NSTableView before. Done.

+
+- (id)initWithItems:(NSArray*)items {
+  if ((self = [super initWithFrame:NSZeroRect])) {
+    for (CredentialItemView* item in items)
+      [self addCredentialItem:item];
+  }
+  return self;
+}
+
+- (void)addCredentialItem:(CredentialItemView*)item {
+  [self addSubview:item];
+
+  // Stack the credentials on top of each other.

[groby-ooo-7-16, 2015/02/19 17:01:33]

Shorter (and hopefully clearer) version:

NSRect viewFrame = [self frame];
if ([[self subviews] count])
  viewFrame.size.height += kVerticalPaddingBetweenCredentials;

NSRect itemFrame = [item frame];
itemFrame.origin = NSMakePoint(0, NSHeight(viewFrame));
viewFrame = NSUnionRect(viewFrame, itemFrame);
itemFrame.size.width = NSWidth(viewFrame);

[item setFrame:itemFrame];
[self setFrameSize:viewFrame.size];
[self addSubview:item];

[dconnelly, 2015/02/20 15:36:06]

TableView - removed all this

+  const CGFloat y =
+      CGRectGetHeight([self frame]) +
+      ([[self subviews] count] > 1 ? kVerticalPaddingBetweenCredentials : 0.0f);
+
+  // Update the size of the list view to accomodate the new item.
+  const CGFloat width =
+      std::max(CGRectGetWidth([self frame]), CGRectGetWidth([item frame]));
+  const CGFloat height = y + CGRectGetHeight([item frame]);
+  [self setFrameSize:CGSizeMake(width, height)];
+
+  const CGFloat x = 0;

[groby-ooo-7-16, 2015/02/19 17:01:33]

You could replace the entire code block with
[item setFrame:NSMakeRect(0, y, width, NSHeight([item frame])]

(Obvs ignore if you follow the above suggestion)

[dconnelly, 2015/02/20 15:36:06]

TableView - removed all this

+  NSRect itemFrame = [item frame];
+  itemFrame.size.width = width;
+  itemFrame.origin = CGPointMake(x, y);
+  [item setFrame:itemFrame];
+}
+
+- (NSArray*)items {
+  return [self subviews];
+}
+
+@end