[CRD iOS] Fixing setting menu style (M65)

According to the mock, separators should go between sections, not items.
This CL fixes the style according to the mock.

Given that this changes the UI of the app, it might be better to check in
this after the M64 branch point.

Before: https://drive.google.com/a/google.com/file/d/1cosHV0dLNdIraqZCQhE0M0La9b6fDn6B/view?usp=sharing
After: https://drive.google.com/a/google.com/file/d/1s_ZtlUMztnkr-QdU1-04ssxw-m2iLXHH/view?usp=sharing

Bug: 786616
Change-Id: If4975398b7fd0da0a0884ee4b009c3098f05de42
Reviewed-on: https://chromium-review.googlesource.com/783817
Commit-Queue: Yuwei Huang <yuweih@chromium.org>
Reviewed-by: Jamie Walch <jamiewalch@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521488}

remoting/ios/app/remoting_theme.h

@@ -31,6 +31,7 @@
 @property(class, nonatomic, readonly) UIColor* hostWarningColor;
 @property(class, nonatomic, readonly) UIColor* menuBlueColor;
 @property(class, nonatomic, readonly) UIColor* menuTextColor;
+@property(class, nonatomic, readonly) UIColor* menuSeparatorColor;
 @property(class, nonatomic, readonly) UIColor* refreshIndicatorColor;
 @property(class, nonatomic, readonly) UIColor* pinEntryPairingColor;
 @property(class, nonatomic, readonly) UIColor* pinEntryPlaceholderColor;

remoting/ios/app/remoting_theme.mm

@@ -74,6 +74,15 @@
   return UIColor.whiteColor;
 }
 
++ (UIColor*)menuSeparatorColor {
+  static UIColor* color;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    color = [UIColor colorWithWhite:1.f alpha:0.4f];
+  });
+  return color;
+}
+
 + (UIColor*)pinEntryPairingColor {
   return UIColor.whiteColor;
 }

remoting/ios/app/settings/remoting_settings_view_controller.mm

@@ -22,6 +22,8 @@
 static NSString* const kReusableIdentifierItem = @"remotingSettingsVCItem";
 static NSString* const kFeedbackContext = @"InSessionFeedbackContext";
 
+static const CGFloat kSectionSeparatorHeight = 1.f;
+
 @interface RemotingSettingsViewController () {
   MDCAppBar* _appBar;
   NSArray* _sections;
@@ -72,6 +74,13 @@ static NSString* const kFeedbackContext = @"InSessionFeedbackContext";
           forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
                  withReuseIdentifier:UICollectionElementKindSectionHeader];
 
+  // A 1px height cell acting as the separator. Not being shown on the last
+  // section. See also:
+  // -collectionView:layout:referenceSizeForFooterInSection:
+  [self.collectionView registerClass:[UICollectionViewCell class]
+          forSupplementaryViewOfKind:UICollectionElementKindSectionFooter
+                 withReuseIdentifier:UICollectionElementKindSectionFooter];
+
   _sections = @[
     l10n_util::GetNSString(IDS_DISPLAY_OPTIONS),
     l10n_util::GetNSString(IDS_MOUSE_OPTIONS),
@@ -79,6 +88,7 @@ static NSString* const kFeedbackContext = @"InSessionFeedbackContext";
     l10n_util::GetNSString(IDS_SUPPORT_MENU),
   ];
   self.styler.cellStyle = MDCCollectionViewCellStyleCard;
+  self.styler.shouldHideSeparators = YES;
 }
 
 - (void)viewWillAppear:(BOOL)animated {
@@ -106,9 +116,6 @@ static NSString* const kFeedbackContext = @"InSessionFeedbackContext";
 - (UICollectionViewCell*)collectionView:(UICollectionView*)collectionView
                  cellForItemAtIndexPath:(NSIndexPath*)indexPath {
   SettingOption* setting = _content[indexPath.section][indexPath.item];
-  // TODO(nicholss): There is a bug in MDCCollectionViewTextCell, it has a
-  // wrapping UIView that leaves behind a one pixel edge. Filed a bug:
-  // https://github.com/material-components/material-components-ios/issues/1519
   MDCCollectionViewTextCell* cell = [collectionView
       dequeueReusableCellWithReuseIdentifier:kReusableIdentifierItem
                                 forIndexPath:indexPath];
@@ -198,18 +205,25 @@ static NSString* const kFeedbackContext = @"InSessionFeedbackContext";
 - (UICollectionReusableView*)collectionView:(UICollectionView*)collectionView
           viewForSupplementaryElementOfKind:(NSString*)kind
                                 atIndexPath:(NSIndexPath*)indexPath {
+  if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
     MDCCollectionViewTextCell* supplementaryView =
         [collectionView dequeueReusableSupplementaryViewOfKind:kind
                                            withReuseIdentifier:kind
                                                   forIndexPath:indexPath];
-  if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
     supplementaryView.contentView.backgroundColor = RemotingTheme.menuBlueColor;
     supplementaryView.textLabel.text = _sections[(NSUInteger)indexPath.section];
     supplementaryView.textLabel.textColor = RemotingTheme.menuTextColor;
     supplementaryView.isAccessibilityElement = YES;
     supplementaryView.accessibilityLabel = supplementaryView.textLabel.text;
-  }
     return supplementaryView;
+  }
+  DCHECK([kind isEqualToString:UICollectionElementKindSectionFooter]);
+  UICollectionViewCell* view =
+      [collectionView dequeueReusableSupplementaryViewOfKind:kind
+                                         withReuseIdentifier:kind
+                                                forIndexPath:indexPath];
+  view.contentView.backgroundColor = RemotingTheme.menuSeparatorColor;
+  return view;
 }
 
 #pragma mark - <UICollectionViewDelegateFlowLayout>
@@ -222,6 +236,18 @@ static NSString* const kFeedbackContext = @"InSessionFeedbackContext";
                     MDCCellDefaultOneLineHeight);
 }
 
+- (CGSize)collectionView:(UICollectionView*)collectionView
+                             layout:
+                                 (UICollectionViewLayout*)collectionViewLayout
+    referenceSizeForFooterInSection:(NSInteger)section {
+  if (section == (NSInteger)(_sections.count - 1)) {
+    // No separator for last section. Note that the footer cell will not be
+    // created if 0 is returned.
+    return CGSizeZero;
+  }
+  return CGSizeMake(collectionView.bounds.size.width, kSectionSeparatorHeight);
+}
+
 #pragma mark - Private
 
 - (void)didTapClose:(id)button {