[ios] Add activity indicator to the Other Devices Loading section header in Recent Tabs.

Creates new HeaderFooterClass for this section header. Also moves the "Syncing..." text to the section header subtitle and removes the cell that originally displayed that text.

Video: https://drive.google.com/file/d/1jP5uSrm1MUyZVDMFPntQanqSe0hWh7GL/view?usp=sharing

Bug: 825017
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: If2343c98adbaef6fee9ed7c851291d92a1b63502
Reviewed-on: https://chromium-review.googlesource.com/1011351
Commit-Queue: Chris Lu <thegreenfrog@google.com>
Reviewed-by: Rohit Rao <rohitrao@chromium.org>
Cr-Commit-Position: refs/heads/master@{#551710}

ios/chrome/app/strings/ios_strings.grd

@@ -813,6 +813,9 @@ locale.  The strings in this file are specific to iOS.
       <message name="IDS_IOS_OPEN_TABS_ENABLE_SYNC_MOBILE" desc="Button label to enable Sync for user. [Length: 30em]">
         Enable sync
       </message>
+      <message name="IDS_IOS_RECENT_TABS_SYNC_IN_PROGRESS" desc="Section header subtitle label while loading tabs in other devices. [Length: 30em] [iOS only]">
+        Syncing...
+      </message>
       <message name="IDS_IOS_OPEN_TABS_LAST_USED" desc="Last used timestamp label [Length: 20em] [iOS only]">
         Last synced: <ph name="LAST_USED_TIME">$1<ex>3 mins ago</ex></ph>
       </message>

ios/chrome/browser/ui/recent_tabs/recent_tabs_table_view_controller.mm

@@ -31,6 +31,7 @@
 #include "ios/chrome/browser/ui/ntp/recent_tabs/synced_sessions.h"
 #import "ios/chrome/browser/ui/settings/sync_utils/sync_presenter.h"
 #import "ios/chrome/browser/ui/signin_interaction/public/signin_presenter.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_activity_indicator_header_footer_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_disclosure_header_footer_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_signin_promo_item.h"
 #import "ios/chrome/browser/ui/table_view/cells/table_view_text_header_footer_item.h"
@@ -65,7 +66,7 @@ typedef NS_ENUM(NSInteger, ItemType) {
   ItemTypeOtherDevicesSyncOff,
   ItemTypeOtherDevicesNoSessions,
   ItemTypeOtherDevicesSigninPromo,
-  ItemTypeOtherDevicesSyncInProgress,
+  ItemTypeOtherDevicesSyncInProgressHeader,
   ItemTypeSessionHeader,
   ItemTypeSessionTabData,
   ItemTypeShowFullHistory,
@@ -385,13 +386,28 @@ const int kRelativeTimeMaxHours = 4;
   [model addSectionWithIdentifier:SectionIdentifierOtherDevices];
   [model setSectionIdentifier:SectionIdentifierOtherDevices
                  collapsedKey:kOtherDeviceCollapsedKey];
-  TableViewDisclosureHeaderFooterItem* header =
-      [[TableViewDisclosureHeaderFooterItem alloc]
-          initWithType:ItemTypeRecentlyClosedHeader];
-  header.text = l10n_util::GetNSString(IDS_IOS_RECENT_TABS_OTHER_DEVICES);
-  header.collapsed = [model sectionIsCollapsed:SectionIdentifierOtherDevices];
-  [model setHeader:header
-      forSectionWithIdentifier:SectionIdentifierOtherDevices];
+  // If user is not signed in, show disclosure view section header so that they
+  // know they can collapse the signin prompt section
+  if (state == SessionsSyncUserState::USER_SIGNED_IN_SYNC_IN_PROGRESS) {
+    TableViewActivityIndicatorHeaderFooterItem* header =
+        [[TableViewActivityIndicatorHeaderFooterItem alloc]
+            initWithType:ItemTypeOtherDevicesSyncInProgressHeader];
+    header.text = l10n_util::GetNSString(IDS_IOS_RECENT_TABS_OTHER_DEVICES);
+    header.subtitleText =
+        l10n_util::GetNSString(IDS_IOS_RECENT_TABS_SYNC_IN_PROGRESS);
+    [model setHeader:header
+        forSectionWithIdentifier:SectionIdentifierOtherDevices];
+    return;
+  } else {
+    TableViewDisclosureHeaderFooterItem* header =
+        [[TableViewDisclosureHeaderFooterItem alloc]
+            initWithType:ItemTypeRecentlyClosedHeader];
+    header.text = l10n_util::GetNSString(IDS_IOS_RECENT_TABS_OTHER_DEVICES);
+    [model setHeader:header
+        forSectionWithIdentifier:SectionIdentifierOtherDevices];
+    header.collapsed = [self.tableViewModel
+        sectionIsCollapsed:SectionIdentifierRecentlyClosedTabs];
+  }
 
   // Adds Other Devices item for |state|.
   TableViewTextItem* dummyCell = nil;
@@ -415,9 +431,10 @@ const int kRelativeTimeMaxHours = 4;
       [self addSigninPromoViewItem];
       return;
     case SessionsSyncUserState::USER_SIGNED_IN_SYNC_IN_PROGRESS:
-      dummyCell = [[TableViewTextItem alloc]
-          initWithType:ItemTypeOtherDevicesSyncInProgress];
-      dummyCell.text = @"Sync in progress";
+      // Informational text in section header. No need for a cell in the
+      // section.
+      NOTREACHED();
+      return;
   }
   [self.tableViewModel addItem:dummyCell
        toSectionWithIdentifier:SectionIdentifierOtherDevices];
@@ -588,7 +605,6 @@ const int kRelativeTimeMaxHours = 4;
     case ItemTypeOtherDevicesSyncOff:
     case ItemTypeOtherDevicesNoSessions:
     case ItemTypeOtherDevicesSigninPromo:
-    case ItemTypeOtherDevicesSyncInProgress:
       break;
   }
 }

ios/chrome/browser/ui/table_view/cells/BUILD.gn

@@ -4,6 +4,8 @@
 
 source_set("cells") {
   sources = [
+    "table_view_activity_indicator_header_footer_item.h",
+    "table_view_activity_indicator_header_footer_item.mm",
     "table_view_cells_constants.h",
     "table_view_cells_constants.mm",
     "table_view_disclosure_header_footer_item.h",
@@ -27,9 +29,11 @@ source_set("cells") {
     "//base",
     "//ios/chrome/browser/ui:ui_util",
     "//ios/chrome/browser/ui/authentication:authentication_ui",
+    "//ios/chrome/browser/ui/colors:colors",
     "//ios/chrome/browser/ui/list_model",
     "//ios/chrome/browser/ui/table_view:styler",
     "//ios/chrome/browser/ui/util:constraints_ui",
+    "//ios/chrome/browser/ui/util:constraints_ui",
   ]
   configs += [ "//build/config/compiler:enable_arc" ]
 }

ios/chrome/browser/ui/table_view/cells/table_view_activity_indicator_header_footer_item.h

+// Copyright 2018 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.
+
+#ifndef IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_ACTIVITY_INDICATOR_HEADER_FOOTER_ITEM_H_
+#define IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_ACTIVITY_INDICATOR_HEADER_FOOTER_ITEM_H_
+
+#import "ios/chrome/browser/ui/table_view/cells/table_view_header_footer_item.h"
+// TableViewActivityIndicatorHeaderFooterItem contains the model data for a
+// TableViewActivityIndicatorHeaderFooterView.
+@interface TableViewActivityIndicatorHeaderFooterItem
+    : TableViewHeaderFooterItem
+// Title of Header.
+@property(nonatomic, readwrite, strong) NSString* text;
+// Header subtitle displayed as a smaller font under title.
+@property(nonatomic, readwrite, strong) NSString* subtitleText;
+@end
+
+// UITableViewHeaderFooterView that displays a text label, subtitle, and an
+// activity indicator.
+@interface TableViewActivityIndicatorHeaderFooterView
+    : UITableViewHeaderFooterView
+// Shows the text of the TableViewActivityIndicatorHeaderFooterItem.
+@property(nonatomic, readwrite, strong) UILabel* titleLabel;
+// Shows the subtitleText of the TableViewActivityIndicatorHeaderFooterItem.
+@property(nonatomic, readwrite, strong) UILabel* subtitleLabel;
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_ACTIVITY_INDICATOR_HEADER_FOOTER_ITEM_H_

ios/chrome/browser/ui/table_view/cells/table_view_activity_indicator_header_footer_item.mm

+// Copyright 2018 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 "ios/chrome/browser/ui/table_view/cells/table_view_activity_indicator_header_footer_item.h"
+
+#include "base/mac/foundation_util.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.h"
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+@implementation TableViewActivityIndicatorHeaderFooterItem
+@synthesize subtitleText = _subtitleText;
+@synthesize text = _text;
+
+- (instancetype)initWithType:(NSInteger)type {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [TableViewActivityIndicatorHeaderFooterView class];
+  }
+  return self;
+}
+
+- (void)configureHeaderFooterView:(UITableViewHeaderFooterView*)headerFooter
+                       withStyler:(ChromeTableViewStyler*)styler {
+  [super configureHeaderFooterView:headerFooter withStyler:styler];
+
+  // Set the contentView backgroundColor, not the header's.
+  headerFooter.contentView.backgroundColor = styler.tableViewBackgroundColor;
+
+  TableViewActivityIndicatorHeaderFooterView* header =
+      base::mac::ObjCCastStrict<TableViewActivityIndicatorHeaderFooterView>(
+          headerFooter);
+  header.titleLabel.text = self.text;
+  header.subtitleLabel.text = self.subtitleText;
+}
+
+@end
+
+#pragma mark - TableViewActivityIndicatorHeaderFooterView
+
+@implementation TableViewActivityIndicatorHeaderFooterView
+@synthesize subtitleLabel = _subtitleLabel;
+@synthesize titleLabel = titleLabel;
+
+- (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier {
+  self = [super initWithReuseIdentifier:reuseIdentifier];
+  if (self) {
+    // Labels, set font sizes using dynamic type.
+    self.titleLabel = [[UILabel alloc] init];
+    self.titleLabel.font =
+        [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline];
+    self.subtitleLabel = [[UILabel alloc] init];
+    self.subtitleLabel.font =
+        [UIFont preferredFontForTextStyle:UIFontTextStyleCaption1];
+    self.subtitleLabel.textColor = [UIColor lightGrayColor];
+
+    // Vertical StackView.
+    UIStackView* verticalStack = [[UIStackView alloc]
+        initWithArrangedSubviews:@[ self.titleLabel, self.subtitleLabel ]];
+    verticalStack.axis = UILayoutConstraintAxisVertical;
+    verticalStack.spacing = kTableViewVerticalLabelStackSpacing;
+
+    // Activity Indicator.
+    UIActivityIndicatorView* activityIndicator =
+        [[UIActivityIndicatorView alloc]
+            initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
+    activityIndicator.color = [UIColor blueColor];
+    [activityIndicator startAnimating];
+    [activityIndicator
+        setContentHuggingPriority:UILayoutPriorityDefaultHigh
+                          forAxis:UILayoutConstraintAxisHorizontal];
+
+    // Horizontal StackView.
+    UIStackView* horizontalStack = [[UIStackView alloc]
+        initWithArrangedSubviews:@[ verticalStack, activityIndicator ]];
+    horizontalStack.axis = UILayoutConstraintAxisHorizontal;
+    horizontalStack.spacing = kTableViewCellViewSpacing;
+    horizontalStack.translatesAutoresizingMaskIntoConstraints = NO;
+    horizontalStack.alignment = UIStackViewAlignmentCenter;
+
+    // Add subviews to View Hierarchy.
+    [self.contentView addSubview:horizontalStack];
+
+    // Set and activate constraints.
+    [NSLayoutConstraint activateConstraints:@[
+      // Horizontal Stack Constraints.
+      [horizontalStack.leadingAnchor
+          constraintEqualToAnchor:self.contentView.leadingAnchor
+                         constant:kTableViewCellViewSpacing],
+      [horizontalStack.trailingAnchor
+          constraintEqualToAnchor:self.contentView.trailingAnchor
+                         constant:-kTableViewCellViewSpacing],
+      [horizontalStack.topAnchor
+          constraintGreaterThanOrEqualToAnchor:self.contentView.topAnchor
+                                      constant:kTableViewCellViewSpacing],
+      [horizontalStack.bottomAnchor
+          constraintLessThanOrEqualToAnchor:self.contentView.bottomAnchor
+                                   constant:-kTableViewCellViewSpacing],
+      [horizontalStack.centerYAnchor
+          constraintEqualToAnchor:self.contentView.centerYAnchor]
+    ]];
+  }
+  return self;
+}
+
+@end