Show device connection and paired status in chooser on Mac

chrome/browser/ui/cocoa/chooser_content_view_cocoa.mm

 // Copyright 2016 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/chooser_content_view_cocoa.h"
 
 #include <algorithm>
 
 #include "base/macros.h"
 #include "base/strings/sys_string_conversions.h"
 #include "chrome/browser/chooser_controller/chooser_controller.h"
 #import "chrome/browser/ui/cocoa/constrained_window/constrained_window_button.h"
 #include "chrome/browser/ui/cocoa/spinner_view.h"
 #include "chrome/grit/generated_resources.h"
+#include "skia/ext/skia_utils_mac.h"
 #import "third_party/google_toolbox_for_mac/src/AppKit/GTMUILocalizerAndLayoutTweaker.h"
 #import "ui/base/cocoa/controls/hyperlink_button_cell.h"
 #include "ui/base/l10n/l10n_util_mac.h"
 #include "ui/base/resource/resource_bundle.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/image/image_skia_util_mac.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/vector_icons_public.h"
 #include "ui/resources/grit/ui_resources.h"
 
 namespace {
 
 // Chooser width.
 const CGFloat kChooserWidth = 350.0f;
 
 // Chooser height.
 const CGFloat kChooserHeight = 300.0f;
 
-// Signal strength level image size.
-const CGFloat kSignalStrengthLevelImageSize = 20.0f;
+// Row view image size.
+const CGFloat kRowViewImageSize = 20.0f;
 
 // Table row view height.
-const CGFloat kTableRowViewHeight = 23.0f;
+const CGFloat kTableRowViewOneLineHeight = 23.0f;
+const CGFloat kTableRowViewTwoLinesHeight = 39.0f;
 
 // Spinner size.
 const CGFloat kSpinnerSize = 24.0f;
 
 // Distance between the chooser border and the view that is closest to the
 // border.
 const CGFloat kMarginX = 20.0f;
 const CGFloat kMarginY = 20.0f;
 
 // Distance between two views inside the chooser.
 const CGFloat kHorizontalPadding = 10.0f;
 const CGFloat kVerticalPadding = 10.0f;
 
 // Separator alpha value.
 const CGFloat kSeparatorAlphaValue = 0.6f;
 
 // Separator height.
 const CGFloat kSeparatorHeight = 1.0f;
 
+// Distance between two views inside the table row view.
+const CGFloat kTableRowViewHorizontalPadding = 5.0f;
+const CGFloat kTableRowViewVerticalPadding = 1.0f;
+
 // The lookup table for signal strength level image.
 const int kSignalStrengthLevelImageIds[5] = {IDR_SIGNAL_0_BAR, IDR_SIGNAL_1_BAR,
                                              IDR_SIGNAL_2_BAR, IDR_SIGNAL_3_BAR,
                                              IDR_SIGNAL_4_BAR};
 
+// Creates a label with |text|.
+base::scoped_nsobject<NSTextField> CreateLabel(NSString* text) {
+  base::scoped_nsobject<NSTextField> label(
+      [[NSTextField alloc] initWithFrame:NSZeroRect]);
+  [label setDrawsBackground:NO];
+  [label setBezeled:NO];
+  [label setEditable:NO];
+  [label setSelectable:NO];
+  [label setStringValue:text];
+  [label setFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]];
+  [label sizeToFit];
+  return label;
+}
+
 }  // namespace
 
 // A table row view that contains one line of text, and optionally contains an
 // image in front of the text.
 @interface ChooserContentTableRowView : NSView {
  @private
   base::scoped_nsobject<NSImageView> image_;
   base::scoped_nsobject<NSTextField> text_;
+  base::scoped_nsobject<NSTextField> pairedStatus_;
 }
 
-// Designated initializer.
+// This initializer is used when the chooser needs to show no devices found

[Jeffrey Yasskin, 2016/09/14 20:08:36]

"show the no-devices-found message"

[juncai, 2016/09/14 23:13:07]

Done.

+// message.
+- (instancetype)initWithText:(NSString*)text;

[Jeffrey Yasskin, 2016/09/14 20:08:36]

https://google.github.io/styleguide/objcguide.xml?showone=Identify_Designated...
says to always have a designated initializer, but here we have two separate
ones. I don't know ObjC well enough to say if that's a problem. Maybe comment
both as designated initializers?

[juncai, 2016/09/14 23:13:07]

Done.

+
 - (instancetype)initWithText:(NSString*)text
-         signalStrengthLevel:(NSInteger)level;
+         signalStrengthLevel:(NSInteger)level
+                 isConnected:(bool)isConnected
+                    isPaired:(bool)isPaired
+                   rowHeight:(CGFloat)rowHeight
+         textNeedIndentation:(bool)textNeedIndentation;
 
 // Gets the image in front of the text.
 - (NSImageView*)image;
 
 // Gets the text.
 - (NSTextField*)text;
 
+// Gets the paired status.
+- (NSTextField*)pairedStatus;
+
 @end
 
 @implementation ChooserContentTableRowView
 
-- (instancetype)initWithText:(NSString*)text
-         signalStrengthLevel:(NSInteger)level {
+- (instancetype)initWithText:(NSString*)text {
   if ((self = [super initWithFrame:NSZeroRect])) {
-    if (level != -1) {
-      DCHECK_GE(level, 0);
-      DCHECK_LT(level, base::checked_cast<NSInteger>(
-                           arraysize(kSignalStrengthLevelImageIds)));
-      ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-      NSImage* signalStrengthLevelImage =
-          rb.GetNativeImageNamed(kSignalStrengthLevelImageIds[level])
-              .ToNSImage();
-
-      image_.reset([[NSImageView alloc]
-          initWithFrame:NSMakeRect(0, (kTableRowViewHeight -
-                                       kSignalStrengthLevelImageSize) /
-                                          2,
-                                   kSignalStrengthLevelImageSize,
-                                   kSignalStrengthLevelImageSize)]);
-      [image_ setImage:signalStrengthLevelImage];
-      [self addSubview:image_];
-    }
-
-    text_.reset([[NSTextField alloc] initWithFrame:NSZeroRect]);
-    [text_ setDrawsBackground:NO];
-    [text_ setBezeled:NO];
-    [text_ setEditable:NO];
-    [text_ setSelectable:NO];
-    [text_ setStringValue:text];
-    [text_ setFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]];
-    [text_ sizeToFit];
+    text_ = CreateLabel(text);
     CGFloat textHeight = NSHeight([text_ frame]);
-    [text_ setFrameOrigin:NSMakePoint(
-                              level == -1 ? 0 : kSignalStrengthLevelImageSize +
-                                                    kHorizontalPadding,
-                              (kTableRowViewHeight - textHeight) / 2)];
+    CGFloat textOriginX = kTableRowViewHorizontalPadding;
+    CGFloat textOriginY = (kTableRowViewOneLineHeight - textHeight) / 2;
+    [text_ setFrameOrigin:NSMakePoint(textOriginX, textOriginY)];
     [self addSubview:text_];
   }
 
   return self;
+}
+
+- (instancetype)initWithText:(NSString*)text
+         signalStrengthLevel:(NSInteger)level
+                 isConnected:(bool)isConnected
+                    isPaired:(bool)isPaired
+                   rowHeight:(CGFloat)rowHeight
+         textNeedIndentation:(bool)textNeedIndentation {
+  if ((self = [super initWithFrame:NSZeroRect])) {
+    // Create the views.
+    // Image.
+    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+    NSImage* image = nullptr;
+    if (isConnected) {
+      image = gfx::NSImageFromImageSkia(gfx::CreateVectorIcon(
+          gfx::VectorIconId::BLUETOOTH_CONNECTED, gfx::kChromeIconGrey));
+    } else if (level != -1) {
+      DCHECK_GE(level, 0);
+      DCHECK_LT(level, base::checked_cast<NSInteger>(
+                           arraysize(kSignalStrengthLevelImageIds)));
+      image = rb.GetNativeImageNamed(kSignalStrengthLevelImageIds[level])
+                  .ToNSImage();
+    }
+
+    CGFloat imageOriginX = kTableRowViewHorizontalPadding;
+    CGFloat imageOriginY = (rowHeight - kRowViewImageSize) / 2;
+    if (image) {
+      image_.reset([[NSImageView alloc]
+          initWithFrame:NSMakeRect(imageOriginX, imageOriginY,
+                                   kRowViewImageSize, kRowViewImageSize)]);
+      [image_ setImage:image];
+      [self addSubview:image_];
+    }
+
+    // Text.
+    text_ = CreateLabel(text);
+    CGFloat textHeight = NSHeight([text_ frame]);
+
+    // Paired status.
+    CGFloat pairedStatusHeight = 0.0f;
+    if (isPaired) {
+      pairedStatus_ = CreateLabel(
+          l10n_util::GetNSString(IDS_DEVICE_CHOOSER_PAIRED_STATUS_TEXT));
+      [pairedStatus_
+          setTextColor:skia::SkColorToCalibratedNSColor(gfx::kGoogleGreen700)];
+      pairedStatusHeight = NSHeight([pairedStatus_ frame]);
+    }
+
+    // Lay out the views.
+    // Text.
+    CGFloat textOriginX = kTableRowViewHorizontalPadding;
+    if (textNeedIndentation)
+      textOriginX += imageOriginX + kRowViewImageSize;
+    CGFloat textOriginY;
+    if (isPaired) {
+      textOriginY = pairedStatusHeight +
+                    (rowHeight - textHeight - pairedStatusHeight -
+                     kTableRowViewVerticalPadding) /
+                        2 +
+                    kTableRowViewVerticalPadding;
+    } else {
+      textOriginY = (rowHeight - textHeight) / 2;
+    }
+
+    [text_ setFrameOrigin:NSMakePoint(textOriginX, textOriginY)];
+    [self addSubview:text_];
+
+    // Paired status.
+    if (isPaired) {
+      CGFloat pairedStatusOriginX = textOriginX;
+      CGFloat pairedStatusOriginY =
+          (rowHeight - textHeight - pairedStatusHeight -
+           kTableRowViewVerticalPadding) /
+          2;
+      [pairedStatus_
+          setFrameOrigin:NSMakePoint(pairedStatusOriginX, pairedStatusOriginY)];
+      [self addSubview:pairedStatus_];
+    }
+  }
+
+  return self;
 }
 
 - (NSImageView*)image {
   return image_.get();
 }
 
 - (NSTextField*)text {
   return text_.get();
 }
 
+- (NSTextField*)pairedStatus {
+  return pairedStatus_.get();
+}
+
 @end
 
 class ChooserContentViewController : public ChooserController::View {
  public:
   ChooserContentViewController(ChooserContentViewCocoa* chooser_content_view,
                                ChooserController* chooser_controller,
                                NSTableView* table_view,
                                SpinnerView* spinner,
                                NSTextField* status,
                                NSButton* rescan_button);
@@ skipping 162 matching lines @@
 
   if ((self = [super initWithFrame:chooserFrame])) {
     chooserController_ = std::move(chooserController);
 
     // Create the views.
     // Title.
     titleView_ = [self createChooserTitle:chooserTitle];
     titleHeight_ = NSHeight([titleView_ frame]);
 
     // Status.
-    status_ = [self createTextField:l10n_util::GetNSString(
-                                        IDS_BLUETOOTH_DEVICE_CHOOSER_SCANNING)];
+    status_ = CreateLabel(
+        l10n_util::GetNSString(IDS_BLUETOOTH_DEVICE_CHOOSER_SCANNING));
     CGFloat statusWidth = kChooserWidth / 2 - kMarginX;
     // The height is arbitrary as it will be adjusted later.
     [status_ setFrameSize:NSMakeSize(statusWidth, 0.0f)];
     [GTMUILocalizerAndLayoutTweaker sizeToFitFixedWidthTextField:status_];
     statusHeight_ = NSHeight([status_ frame]);
 
     // Re-scan button.
     rescanButton_ =
         [self createHyperlinkButtonWithText:
                   l10n_util::GetNSString(IDS_BLUETOOTH_DEVICE_CHOOSER_RE_SCAN)];
     rescanButtonHeight_ = NSHeight([rescanButton_ frame]);
 
     // Connect button.
     connectButton_ = [self createConnectButton];
     connectButtonWidth_ = NSWidth([connectButton_ frame]);
     connectButtonHeight_ = NSHeight([connectButton_ frame]);
 
     // Cancel button.
     cancelButton_ = [self createCancelButton];
     cancelButtonWidth_ = NSWidth([cancelButton_ frame]);
     cancelButtonHeight_ = NSHeight([cancelButton_ frame]);
 
     CGFloat buttonRowHeight =
         std::max(connectButtonHeight_, cancelButtonHeight_);
 
     // Separator.
     separator_ = [self createSeparator];
 
     // Message.
-    message_ = [self createTextField:l10n_util::GetNSStringF(
-                                         IDS_DEVICE_CHOOSER_FOOTNOTE_TEXT,
-                                         base::string16())];
+    message_ = CreateLabel(l10n_util::GetNSStringF(
+        IDS_DEVICE_CHOOSER_FOOTNOTE_TEXT, base::string16()));
     CGFloat messageWidth = NSWidth([message_ frame]);
     messageHeight_ = NSHeight([message_ frame]);
 
     // Help button.
     helpButton_ = [self
         createHyperlinkButtonWithText:
             l10n_util::GetNSString(IDS_DEVICE_CHOOSER_GET_HELP_LINK_TEXT)];
 
     // ScollView embedding with TableView.
     noStatusOrRescanButtonShown_.scroll_view_frame =
@@ skipping 125 matching lines @@
   [titleView setEditable:NO];
   [titleView setSelectable:NO];
   [titleView setStringValue:title];
   [titleView setFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]];
   // The height is arbitrary as it will be adjusted later.
   [titleView setFrameSize:NSMakeSize(kChooserWidth - 2 * kMarginX, 0.0f)];
   [GTMUILocalizerAndLayoutTweaker sizeToFitFixedWidthTextField:titleView];
   return titleView;
 }
 
-- (base::scoped_nsobject<NSView>)createTableRowView:(NSInteger)rowIndex {
+- (base::scoped_nsobject<NSView>)createTableRowView:(NSInteger)row {
   NSInteger level = -1;
+  bool isConnected = false;
+  bool isPaired = false;
   size_t numOptions = chooserController_->NumOptions();
-  if (chooserController_->ShouldShowIconBeforeText() && numOptions > 0) {
-    DCHECK_GE(rowIndex, 0);
-    DCHECK_LT(rowIndex, base::checked_cast<NSInteger>(numOptions));
-    level = base::checked_cast<NSInteger>(
-        chooserController_->GetSignalStrengthLevel(
-            base::checked_cast<size_t>(rowIndex)));
+  base::scoped_nsobject<NSView> tableRowView;
+  if (numOptions == 0) {
+    DCHECK_EQ(0, row);
+    tableRowView.reset([[ChooserContentTableRowView alloc]
+        initWithText:[self optionAtIndex:row]]);
+  } else {
+    DCHECK_GE(row, 0);
+    DCHECK_LT(row, base::checked_cast<NSInteger>(numOptions));
+    size_t rowIndex = base::checked_cast<size_t>(row);
+    if (chooserController_->ShouldShowIconBeforeText()) {
+      level = base::checked_cast<NSInteger>(
+          chooserController_->GetSignalStrengthLevel(rowIndex));
+    }
+    isConnected = chooserController_->IsConnected(rowIndex);
+    isPaired = chooserController_->IsPaired(rowIndex);
+    bool textNeedIndentation = false;
+    for (size_t i = 0; i < numOptions; ++i) {
+      if (chooserController_->GetSignalStrengthLevel(i) != -1 ||

[Jeffrey Yasskin, 2016/09/14 20:08:36]

I think we want to indent rows that have neither a signal strength nor a
connected icon. Your ChromeOS screenshot
(https://bugs.chromium.org/p/chromium/issues/detail?id=543466#c62) shows this,
but your Mac screenshot
(https://bugs.chromium.org/p/chromium/issues/detail?id=543466#c61) only shows
rows with icons, so the UI folks didn't get a chance to comment on the varying
indentation that I think you've implemented here.

[juncai, 2016/09/14 23:13:07]

I uploaded a screenshot from Mac showing the text is indented in a row which has
no image while other row has image.

[Jeffrey Yasskin, 2016/09/14 23:52:03]

Thanks, I missed the loop somehow. :-/ If the first couple devices don't have
signal strengths, is the text going to jump horizontally when one gets
connected?

[juncai, 2016/09/15 01:00:02]

Yes, it will keep all the text aligned. It was suggested by comment at:
https://bugs.chromium.org/p/chromium/issues/detail?id=543466#c41

+          chooserController_->IsConnected(i)) {
+        textNeedIndentation = true;
+        break;
+      }
+    }
+    tableRowView.reset([[ChooserContentTableRowView alloc]
+               initWithText:[self optionAtIndex:row]
+        signalStrengthLevel:level
+                isConnected:isConnected
+                   isPaired:isPaired
+                  rowHeight:[self tableRowViewHeight:row]
+        textNeedIndentation:textNeedIndentation]);
   }
 
-  base::scoped_nsobject<NSView> tableRowView([[ChooserContentTableRowView alloc]
-             initWithText:[self optionAtIndex:rowIndex]
-      signalStrengthLevel:level]);
   return tableRowView;
 }
 
 - (CGFloat)tableRowViewHeight:(NSInteger)row {
-  return kTableRowViewHeight;
+  size_t numOptions = chooserController_->NumOptions();
+  if (numOptions == 0) {
+    DCHECK_EQ(0, row);
+    return kTableRowViewOneLineHeight;
+  }
+
+  DCHECK_GE(row, 0);
+  DCHECK_LT(row, base::checked_cast<NSInteger>(numOptions));
+  size_t rowIndex = base::checked_cast<size_t>(row);
+  return chooserController_->IsPaired(rowIndex) ? kTableRowViewTwoLinesHeight
+                                                : kTableRowViewOneLineHeight;
 }
 
 - (base::scoped_nsobject<NSButton>)createButtonWithTitle:(NSString*)title {
   base::scoped_nsobject<NSButton> button(
       [[ConstrainedWindowButton alloc] initWithFrame:NSZeroRect]);
   [button setButtonType:NSMomentaryPushInButton];
   [button setTitle:title];
   [button sizeToFit];
   return button;
 }
@@ skipping 12 matching lines @@
 
 - (base::scoped_nsobject<NSBox>)createSeparator {
   base::scoped_nsobject<NSBox> spacer([[NSBox alloc] initWithFrame:NSZeroRect]);
   [spacer setBoxType:NSBoxSeparator];
   [spacer setBorderType:NSLineBorder];
   [spacer setAlphaValue:kSeparatorAlphaValue];
   [spacer setFrameSize:NSMakeSize(kChooserWidth, kSeparatorHeight)];
   return spacer;
 }
 
-- (base::scoped_nsobject<NSTextField>)createTextField:(NSString*)text {
-  base::scoped_nsobject<NSTextField> textField(
-      [[NSTextField alloc] initWithFrame:NSZeroRect]);
-  [textField setDrawsBackground:NO];
-  [textField setBezeled:NO];
-  [textField setEditable:NO];
-  [textField setSelectable:NO];
-  [textField setStringValue:text];
-  [textField setFont:[NSFont systemFontOfSize:[NSFont systemFontSize]]];
-  [textField sizeToFit];
-  return textField;
-}
-
 - (base::scoped_nsobject<NSButton>)createHyperlinkButtonWithText:
     (NSString*)text {
   base::scoped_nsobject<NSButton> button(
       [[NSButton alloc] initWithFrame:NSZeroRect]);
   base::scoped_nsobject<HyperlinkButtonCell> cell(
       [[HyperlinkButtonCell alloc] initTextCell:text]);
   [button setCell:cell.get()];
   [button sizeToFit];
   return button;
 }
@@ skipping 131 matching lines @@
       [tableView_ viewAtColumn:0 row:row makeIfNecessary:YES];
   return [tableRowView image];
 }
 
 - (NSTextField*)tableRowViewText:(NSInteger)row {
   ChooserContentTableRowView* tableRowView =
       [tableView_ viewAtColumn:0 row:row makeIfNecessary:YES];
   return [tableRowView text];
 }
 
+- (NSTextField*)tableRowViewPairedStatus:(NSInteger)row {
+  ChooserContentTableRowView* tableRowView =
+      [tableView_ viewAtColumn:0 row:row makeIfNecessary:YES];
+  return [tableRowView pairedStatus];
+}
+
 @end