Add Distillation info to Reading List view.

If page is distilled, show
- Date of distillation in relative format (1 hour ago, 2 days ago).
- The size of distillation files in human readable format.

BUG=694451

Review-Url: https://codereview.chromium.org/2751833005
Cr-Commit-Position: refs/heads/master@{#460426}

components/reading_list/core/reading_list_entry.cc

@@ -247,6 +247,8 @@ void ReadingListEntry::SetDistilledState(DistillationState distilled_state) {
   distilled_state_ = distilled_state;
   distilled_path_ = base::FilePath();
   distilled_url_ = GURL::EmptyGURL();
+  distillation_size_ = 0;
+  distillation_time_us_ = 0;
 }
 
 int64_t ReadingListEntry::UpdateTime() const {

ios/chrome/app/strings/ios_strings.grd

@@ -1023,6 +1023,9 @@ Handoff must also be enabled in the General section of Settings, and your device
       <message name="IDS_IOS_READING_LIST_EMPTY_MESSAGE" desc="Message to explain to the user how to add entries to the reading list" meaning="[Length: unlimited]">
         Your reading list is available offline. To add a page to your reading list, tap <ph name="SHARE_OPENING_ICON">SHARE_OPENING_ICON<ex>Menu > Share > Read Later</ex></ph>.
       </message>
+      <message name="IDS_IOS_READING_LIST_JUST_NOW" desc="String indicating that an event (adding item, distillation) happened less than one minute ago. [Length: 25em]">
+        Just now
+      </message>
       <message name="IDS_IOS_READING_LIST_MARK_ALL_BUTTON" desc="Label of the button to suggest options to mark all reading list entries read or unread [Length: 25em]" meaning="Display options letting the user mark all the entries as read or as unread. [Length: 25em]">
         Mark All…
       </message>

ios/chrome/browser/ui/reading_list/reading_list_collection_view_controller.mm

@@ -53,10 +53,8 @@ typedef NS_ENUM(NSInteger, SectionIdentifier) {
 };
 
 typedef NS_ENUM(NSInteger, ItemType) {
-  ItemTypeUnreadHeader = kItemTypeEnumZero,
-  ItemTypeUnread,
-  ItemTypeReadHeader,
-  ItemTypeRead,
+  ItemTypeHeader = kItemTypeEnumZero,
+  ItemTypeItem,
 };
 
 // Typedef for a block taking a GURL as parameter and returning nothing.
@@ -319,7 +317,7 @@ using ItemsMapByDate = std::multimap<int64_t, ReadingListCollectionViewItem*>;
 - (CGFloat)collectionView:(UICollectionView*)collectionView
     cellHeightAtIndexPath:(NSIndexPath*)indexPath {
   NSInteger type = [self.collectionViewModel itemTypeForIndexPath:indexPath];
-  if (type == ItemTypeUnread || type == ItemTypeRead)
+  if (type == ItemTypeItem)
     return MDCCellDefaultTwoLineHeight;
   else
     return MDCCellDefaultOneLineHeight;
@@ -593,9 +591,11 @@ using ItemsMapByDate = std::multimap<int64_t, ReadingListCollectionViewItem*>;
     ReadingListCollectionViewItem* newItem = iterator->second;
     if (oldItem.url == newItem.url) {
       if (![oldItem isEqual:newItem]) {
-        oldItem.text = newItem.text;
-        oldItem.detailText = newItem.detailText;
+        oldItem.title = newItem.title;
+        oldItem.subtitle = newItem.subtitle;
         oldItem.distillationState = newItem.distillationState;
+        oldItem.distillationDate = newItem.distillationDate;
+        oldItem.distillationSize = newItem.distillationSize;
         [itemsToReconfigure addObject:oldItem];
       }
       if (oldItem.faviconPageURL != newItem.faviconPageURL) {
@@ -616,20 +616,27 @@ using ItemsMapByDate = std::multimap<int64_t, ReadingListCollectionViewItem*>;
     (const ReadingListEntry&)entry {
   GURL url = entry.URL();
   ReadingListCollectionViewItem* item = [[ReadingListCollectionViewItem alloc]
-            initWithType:entry.IsRead() ? ItemTypeRead : ItemTypeUnread
-                     url:url
-       distillationState:entry.DistilledState()];
+           initWithType:ItemTypeItem
+                    url:url
+      distillationState:entry.DistilledState()];
 
   [self setItem:item
       faviconURL:entry.DistilledURL().is_valid() ? entry.DistilledURL() : url];
 
+  BOOL has_distillation_details =
+      entry.DistilledState() == ReadingListEntry::PROCESSED &&
+      entry.DistillationSize() != 0 && entry.DistillationTime() != 0;
   NSString* fullUrlString =
       base::SysUTF16ToNSString(url_formatter::FormatUrl(url));
   NSString* urlString =
       base::SysUTF16ToNSString(url_formatter::FormatUrl(url.GetOrigin()));
   NSString* title = base::SysUTF8ToNSString(entry.Title());
-  item.text = [title length] ? title : fullUrlString;
-  item.detailText = urlString;
+  item.title = [title length] ? title : fullUrlString;
+  item.subtitle = urlString;
+  item.distillationDate =
+      has_distillation_details ? entry.DistillationTime() : 0;
+  item.distillationSize =
+      has_distillation_details ? entry.DistillationSize() : 0;
   return item;
 }
 
@@ -1165,17 +1172,14 @@ using ItemsMapByDate = std::multimap<int64_t, ReadingListCollectionViewItem*>;
 
 - (CollectionViewTextItem*)headerForSection:
     (SectionIdentifier)sectionIdentifier {
-  CollectionViewTextItem* header = nil;
+  CollectionViewTextItem* header =
+      [[CollectionViewTextItem alloc] initWithType:ItemTypeHeader];
 
   switch (sectionIdentifier) {
     case SectionIdentifierRead:
-      header = [[CollectionViewTextItem alloc] initWithType:ItemTypeReadHeader];
       header.text = l10n_util::GetNSString(IDS_IOS_READING_LIST_READ_HEADER);
       break;
-
     case SectionIdentifierUnread:
-      header =
-          [[CollectionViewTextItem alloc] initWithType:ItemTypeUnreadHeader];
       header.text = l10n_util::GetNSString(IDS_IOS_READING_LIST_UNREAD_HEADER);
       break;
   }

ios/chrome/browser/ui/reading_list/reading_list_collection_view_controller_unittest.mm

@@ -171,9 +171,9 @@ TEST_F(ReadingListCollectionViewControllerTest,
       base::mac::ObjCCastStrict<ReadingListCollectionViewItem>(
           [[reading_list_view_controller_ collectionViewModel]
               itemAtIndexPath:indexPath]);
-  EXPECT_EQ(base::SysNSStringToUTF8([readingListItem text]), title);
+  EXPECT_EQ(base::SysNSStringToUTF8([readingListItem title]), title);
   EXPECT_EQ([readingListItem url], url);
-  EXPECT_EQ(base::SysNSStringToUTF16([readingListItem detailText]),
+  EXPECT_EQ(base::SysNSStringToUTF16([readingListItem subtitle]),
             url_formatter::FormatUrl(url));
   EXPECT_EQ([readingListItem faviconPageURL], url);
   EXPECT_EQ([readingListItem distillationState], ReadingListEntry::WAITING);
@@ -203,9 +203,9 @@ TEST_F(ReadingListCollectionViewControllerTest,
       base::mac::ObjCCastStrict<ReadingListCollectionViewItem>(
           [[reading_list_view_controller_ collectionViewModel]
               itemAtIndexPath:indexPath]);
-  EXPECT_EQ(base::SysNSStringToUTF8([readingListItem text]), title);
+  EXPECT_EQ(base::SysNSStringToUTF8([readingListItem title]), title);
   EXPECT_EQ([readingListItem url], url);
-  EXPECT_EQ(base::SysNSStringToUTF16([readingListItem detailText]),
+  EXPECT_EQ(base::SysNSStringToUTF16([readingListItem subtitle]),
             url_formatter::FormatUrl(url));
   EXPECT_EQ([readingListItem faviconPageURL], distilled_url);
   EXPECT_EQ([readingListItem distillationState], ReadingListEntry::PROCESSED);

ios/chrome/browser/ui/reading_list/reading_list_collection_view_item.h

@@ -16,10 +16,10 @@ class GURL;
 // Collection view item for representing a ReadingListEntry.
 @interface ReadingListCollectionViewItem : CollectionViewItem
 
-// The main text to display.
-@property(nonatomic, copy) NSString* text;
-// The secondary text to display.
-@property(nonatomic, copy) NSString* detailText;
+// The title to display.
+@property(nonatomic, copy) NSString* title;
+// The subtitle to display. This is often the |url|'s origin.
+@property(nonatomic, copy) NSString* subtitle;
 // The URL of the Reading List entry.
 @property(nonatomic, readonly) const GURL& url;
 // The URL of the page presenting the favicon to display.
@@ -27,6 +27,10 @@ class GURL;
 // Status of the offline version.
 @property(nonatomic, assign)
     ReadingListEntry::DistillationState distillationState;
+// Size of the distilled files.
+@property(nonatomic, assign) int64_t distillationSize;
+// Timestamp of the distillation in microseconds since Jan 1st 1970.
+@property(nonatomic, assign) int64_t distillationDate;
 // Delegate for the accessibility actions.
 @property(nonatomic, weak)
     id<ReadingListCollectionViewItemAccessibilityDelegate>
@@ -51,9 +55,13 @@ class GURL;
 @interface ReadingListCell : MDCCollectionViewCell
 
 // Title label.
-@property(nonatomic, readonly, strong) UILabel* textLabel;
-// Detail label.
-@property(nonatomic, readonly, strong) UILabel* detailTextLabel;
+@property(nonatomic, readonly, strong) UILabel* titleLabel;
+// Subtitle label.
+@property(nonatomic, readonly, strong) UILabel* subtitleLabel;
+// Timestamp of the distillation in microseconds since Jan 1st 1970.
+@property(nonatomic, assign) int64_t distillationDate;
+// Size of the distilled files.
+@property(nonatomic, assign) int64_t distillationSize;
 // View for displaying the favicon for the reading list entry.
 @property(nonatomic, readonly, strong) FaviconViewNew* faviconView;
 // Status of the offline version. Updates the visual indicator when updated.

ios/chrome/browser/ui/reading_list/reading_list_collection_view_item.mm

@@ -13,6 +13,7 @@
 #import "ios/third_party/material_components_ios/src/components/Palettes/src/MaterialPalettes.h"
 #import "ios/third_party/material_roboto_font_loader_ios/src/src/MaterialRobotoFontLoader.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/l10n/time_format.h"
 #import "url/gurl.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -28,6 +29,9 @@ const CGFloat kDistillationIndicatorSize = 18;
 
 // Margin for the elements displayed in the cell.
 const CGFloat kMargin = 16;
+
+// Transparency of the distillation size and date.
+const CGFloat kInfoTextTransparency = 0.38;
 }  // namespace
 
 #pragma mark - ReadingListCollectionViewItem
@@ -43,11 +47,13 @@ const CGFloat kMargin = 16;
 
 @implementation ReadingListCollectionViewItem
 @synthesize attributes = _attributes;
-@synthesize text = _text;
-@synthesize detailText = _detailText;
+@synthesize title = _title;
+@synthesize subtitle = _subtitle;
 @synthesize url = _url;
 @synthesize faviconPageURL = _faviconPageURL;
 @synthesize distillationState = _distillationState;
+@synthesize distillationDate = _distillationDate;
+@synthesize distillationSize = _distillationSize;
 @synthesize accessibilityDelegate = _accessibilityDelegate;
 
 - (instancetype)initWithType:(NSInteger)type
@@ -69,9 +75,11 @@ const CGFloat kMargin = 16;
   if (self.attributes) {
     [cell.faviconView configureWithAttributes:self.attributes];
   }
-  cell.textLabel.text = self.text;
-  cell.detailTextLabel.text = self.detailText;
+  cell.titleLabel.text = self.title;
+  cell.subtitleLabel.text = self.subtitle;
   cell.distillationState = _distillationState;
+  cell.distillationSize = _distillationSize;
+  cell.distillationDate = _distillationDate;
   cell.isAccessibilityElement = YES;
   cell.accessibilityLabel = [self accessibilityLabel];
   cell.accessibilityCustomActions = [self customActions];
@@ -90,9 +98,9 @@ const CGFloat kMargin = 16;
   }
 
   return l10n_util::GetNSStringF(IDS_IOS_READING_LIST_ENTRY_ACCESSIBILITY_LABEL,
-                                 base::SysNSStringToUTF16(self.text),
+                                 base::SysNSStringToUTF16(self.title),
                                  base::SysNSStringToUTF16(accessibilityState),
-                                 base::SysNSStringToUTF16(self.detailText));
+                                 base::SysNSStringToUTF16(self.subtitle));
 }
 
 #pragma mark - AccessibilityCustomAction
@@ -195,7 +203,7 @@ const CGFloat kMargin = 16;
 
 - (NSString*)description {
   return [NSString stringWithFormat:@"Reading List item \"%@\" for url %@",
-                                    self.text, self.detailText];
+                                    self.title, self.subtitle];
 }
 
 - (BOOL)isEqual:(id)other {
@@ -205,9 +213,11 @@ const CGFloat kMargin = 16;
     return NO;
   ReadingListCollectionViewItem* otherItem =
       static_cast<ReadingListCollectionViewItem*>(other);
-  return [self.text isEqualToString:otherItem.text] &&
-         [self.detailText isEqualToString:otherItem.detailText] &&
-         self.distillationState == otherItem.distillationState;
+  return [self.title isEqualToString:otherItem.title] &&
+         [self.subtitle isEqualToString:otherItem.subtitle] &&
+         self.distillationState == otherItem.distillationState &&
+         self.distillationSize == otherItem.distillationSize &&
+         self.distillationDate == otherItem.distillationDate;
 }
 
 @end
@@ -216,10 +226,22 @@ const CGFloat kMargin = 16;
 
 @implementation ReadingListCell {
   UIImageView* _downloadIndicator;
+  UILayoutGuide* _textGuide;
+
+  UILabel* _distillationSizeLabel;
+  UILabel* _distillationDateLabel;
+
+  // View containing |_distillationSizeLabel| and |_distillationDateLabel|.
+  UIView* _infoView;
+
+  // Whether |_infoView| is visible.
+  BOOL _showInfo;
 }
 @synthesize faviconView = _faviconView;
-@synthesize textLabel = _textLabel;
-@synthesize detailTextLabel = _detailTextLabel;
+@synthesize titleLabel = _titleLabel;
+@synthesize subtitleLabel = _subtitleLabel;
+@synthesize distillationDate = _distillationDate;
+@synthesize distillationSize = _distillationSize;
 @synthesize distillationState = _distillationState;
 
 - (instancetype)initWithFrame:(CGRect)frame {
@@ -227,15 +249,33 @@ const CGFloat kMargin = 16;
   if (self) {
     MDFRobotoFontLoader* fontLoader = [MDFRobotoFontLoader sharedInstance];
     CGFloat faviconSize = kFaviconPreferredSize;
-    _textLabel = [[UILabel alloc] init];
-    _textLabel.font = [fontLoader mediumFontOfSize:16];
-    _textLabel.textColor = [[MDCPalette greyPalette] tint900];
-    _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
-
-    _detailTextLabel = [[UILabel alloc] init];
-    _detailTextLabel.font = [fontLoader mediumFontOfSize:14];
-    _detailTextLabel.textColor = [[MDCPalette greyPalette] tint500];
-    _detailTextLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _titleLabel = [[UILabel alloc] init];
+    _titleLabel.font = [fontLoader mediumFontOfSize:16];
+    _titleLabel.textColor = [[MDCPalette greyPalette] tint900];
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    _subtitleLabel = [[UILabel alloc] init];
+    _subtitleLabel.font = [fontLoader mediumFontOfSize:14];
+    _subtitleLabel.textColor = [[MDCPalette greyPalette] tint500];
+    _subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    _distillationDateLabel = [[UILabel alloc] init];
+    _distillationDateLabel.font = [fontLoader mediumFontOfSize:12];
+    [_distillationDateLabel
+        setContentHuggingPriority:UILayoutPriorityDefaultHigh
+                          forAxis:UILayoutConstraintAxisHorizontal];
+    _distillationDateLabel.textColor =
+        [UIColor colorWithWhite:0 alpha:kInfoTextTransparency];
+    _distillationDateLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    _distillationSizeLabel = [[UILabel alloc] init];
+    _distillationSizeLabel.font = [fontLoader mediumFontOfSize:12];
+    [_distillationSizeLabel
+        setContentHuggingPriority:UILayoutPriorityDefaultHigh
+                          forAxis:UILayoutConstraintAxisHorizontal];
+    _distillationSizeLabel.textColor =
+        [UIColor colorWithWhite:0 alpha:kInfoTextTransparency];
+    _distillationSizeLabel.translatesAutoresizingMaskIntoConstraints = NO;
 
     _faviconView = [[FaviconViewNew alloc] init];
     CGFloat fontSize = floorf(faviconSize / 2);
@@ -246,29 +286,58 @@ const CGFloat kMargin = 16;
     [_downloadIndicator setTranslatesAutoresizingMaskIntoConstraints:NO];
     [_faviconView addSubview:_downloadIndicator];
 
-    [self.contentView addSubview:_textLabel];
-    [self.contentView addSubview:_detailTextLabel];
     [self.contentView addSubview:_faviconView];
+    [self.contentView addSubview:_titleLabel];
+    [self.contentView addSubview:_subtitleLabel];
+
+    _infoView = [[UIView alloc] initWithFrame:CGRectZero];
+    [_infoView addSubview:_distillationDateLabel];
+    [_infoView addSubview:_distillationSizeLabel];
+    _infoView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    _textGuide = [[UILayoutGuide alloc] init];
+    [self.contentView addLayoutGuide:_textGuide];
 
     ApplyVisualConstraintsWithMetrics(
         @[
-          @"V:|-(margin)-[title][text]-(margin)-|",
+          @"H:|[date]-(>=margin)-[size]|",
+          @"V:[title][subtitle]",
           @"H:|-(margin)-[favicon]-(margin)-[title]-(>=margin)-|",
-          @"H:[favicon]-(margin)-[text]-(>=margin)-|"
+          @"H:[favicon]-(margin)-[subtitle]-(>=margin)-|",
+          @"V:|[date]|",
+          @"V:|[size]|",
         ],
         @{
-          @"title" : _textLabel,
-          @"text" : _detailTextLabel,
-          @"favicon" : _faviconView
+          @"favicon" : _faviconView,
+          @"title" : _titleLabel,
+          @"subtitle" : _subtitleLabel,
+          @"date" : _distillationDateLabel,
+          @"size" : _distillationSizeLabel,
         },
-        @{ @"margin" : @(kMargin) });
+        @{
+          @"margin" : @(kMargin),
+        });
+
+    // Sets the bottom of the text. Lower the priority so we can add the details
+    // later.
+    NSLayoutConstraint* bottomTextConstraint = [_textGuide.bottomAnchor
+        constraintEqualToAnchor:_subtitleLabel.bottomAnchor];
+    bottomTextConstraint.priority = UILayoutPriorityDefaultHigh;
+    NSLayoutConstraint* topTextConstraint =
+        [_textGuide.topAnchor constraintEqualToAnchor:_titleLabel.topAnchor];
 
     [NSLayoutConstraint activateConstraints:@[
+      topTextConstraint,
+      bottomTextConstraint,
       // Favicons are always the same size.
       [_faviconView.widthAnchor constraintEqualToConstant:faviconSize],
       [_faviconView.heightAnchor constraintEqualToConstant:faviconSize],
+      // Center the content (favicon and text) vertically.
       [_faviconView.centerYAnchor
           constraintEqualToAnchor:self.contentView.centerYAnchor],
+      [_textGuide.centerYAnchor
+          constraintEqualToAnchor:self.contentView.centerYAnchor],
+
       // Place the download indicator in the bottom right corner of the favicon.
       [[_downloadIndicator centerXAnchor]
           constraintEqualToAnchor:_faviconView.trailingAnchor],
@@ -309,12 +378,72 @@ const CGFloat kMargin = 16;
   }
 }
 
+- (void)setShowInfo:(BOOL)show {
+  if (_showInfo == show) {
+    return;
+  }
+  _showInfo = show;
+  if (!show) {
+    [_infoView removeFromSuperview];
+    return;
+  }
+  [self.contentView addSubview:_infoView];
+  ApplyVisualConstraintsWithMetrics(
+      @[
+        @"H:|-(margin)-[favicon]-(margin)-[detail]-(margin)-|",
+      ],
+      @{
+        @"favicon" : _faviconView,
+        @"detail" : _infoView,
+      },
+      @{
+        @"margin" : @(kMargin),
+      });
+  [NSLayoutConstraint activateConstraints:@[
+    [_infoView.topAnchor constraintEqualToAnchor:_subtitleLabel.bottomAnchor],
+    [_infoView.bottomAnchor constraintEqualToAnchor:_textGuide.bottomAnchor],
+  ]];
+}
+
+- (void)setDistillationSize:(int64_t)distillationSize {
+  [_distillationSizeLabel
+      setText:[NSByteCountFormatter
+                  stringFromByteCount:distillationSize
+                           countStyle:NSByteCountFormatterCountStyleFile]];
+  _distillationSize = distillationSize;
+  BOOL showInfo = _distillationSize != 0 && _distillationDate != 0;
+  [self setShowInfo:showInfo];
+}
+
+- (void)setDistillationDate:(int64_t)distillationDate {
+  int64_t now = (base::Time::Now() - base::Time::UnixEpoch()).InMicroseconds();
+  int64_t elapsed = now - distillationDate;
+  NSString* text;
+  if (elapsed < base::Time::kMicrosecondsPerMinute) {
+    // This will also catch items added in the future. In that case, show the
+    // "just now" string.
+    text = l10n_util::GetNSString(IDS_IOS_READING_LIST_JUST_NOW);
+  } else {
+    text = base::SysUTF16ToNSString(ui::TimeFormat::Simple(
+        ui::TimeFormat::FORMAT_ELAPSED, ui::TimeFormat::LENGTH_LONG,
+        base::TimeDelta::FromMicroseconds(elapsed)));
+  }
+
+  [_distillationDateLabel setText:text];
+  _distillationDate = distillationDate;
+  BOOL showInfo = _distillationSize != 0 && _distillationDate != 0;
+  [self setShowInfo:showInfo];
+}
+
 #pragma mark - UICollectionViewCell
 
 - (void)prepareForReuse {
-  self.textLabel.text = nil;
-  self.detailTextLabel.text = nil;
+  self.titleLabel.text = nil;
+  self.subtitleLabel.text = nil;
   self.distillationState = ReadingListEntry::WAITING;
+  self.distillationDate = 0;
+  self.distillationSize = 0;
+  [self setShowInfo:NO];
   self.accessibilityCustomActions = nil;
   [super prepareForReuse];
 }

ios/chrome/browser/ui/reading_list/reading_list_coordinator.mm

@@ -153,8 +153,8 @@ enum UMAContextMenuAction {
 
   _alertCoordinator = [[ActionSheetCoordinator alloc]
       initWithBaseViewController:self.containerViewController
-                           title:readingListItem.text
-                         message:readingListItem.detailText
+                           title:readingListItem.title
+                         message:readingListItem.subtitle
                             rect:CGRectMake(menuLocation.x, menuLocation.y, 0,
                                             0)
                             view:readingListCollectionViewController