Update Top/Bottom toolbars to work with selection mode

- Removed the notion of the public leading/trailing buttons from
  toolbars as they were hard to track from outside of the toolbars.
- Update Top and bottom toolbars to have explicit buttons for each
   action.
- Update Top and Bottom toolbar to be responsible for their own layouts,
  based on the orientation, page and mode of the tab grid.
- Remove the code that keep track of which bar has the closeAll and Done
  button from TabGridViewController
- Updated Done Button to handle getting out of the selection mode.
- Added user action for getting out of the selection mode.

Note: There are some common code between both toolbars, which should be
refactored to a parent class in the near future (crbug.com/1213750).

screenshots:
1- Normal mode landscape: https://screenshot.googleplex.com/6wNWAKq7iXohFtV
2- Normal mode portrait: https://screenshot.googleplex.com/BYANs4oY6QNyckc
3- Selection mode landscape: https://screenshot.googleplex.com/4MuhbdMrPVkdG8X
4- Selection mode portrait: https://screenshot.googleplex.com/BXb2fGvTwcTBShW

Bug: 1196933

Change-Id: I2e2bdc21adbe283c44f9cf020872fa9a1954d1c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2904466
Commit-Queue: Mohammad Refaat <mrefaat@chromium.org>
Reviewed-by: Yi Gu <yigu@chromium.org>
Reviewed-by: edchin <edchin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#887054}

ios/chrome/app/strings/ios_strings.grd

@@ -2452,6 +2452,17 @@ Your data was encrypted with your sync passphrase on <ph name="TIME">$2<ex>Sept
       <message name="IDS_IOS_TAB_GRID_ADD_TO_BUTTON" desc="Title of the button in the tab grid UI that when tapped, will provide the user with a menu to add selected tabs to bookmarks or to the reading list. [iOS only]">
         Add To...
       </message>
+      <message name="IDS_IOS_TAB_GRID_SELECT_ALL_BUTTON" desc="Title of the button in the tab grid UI selection mode, when tapped it will mark all tabs selected.">
+          Select All
+          </message>
+      <message name="IDS_IOS_TAB_GRID_SELECT_TABS_TITLE" desc="Title shown in the tab grid selection mode when no tab is selected. [iOS only]">
+              Select Tabs
+      </message>
+      <message name="IDS_IOS_TAB_GRID_SELECTED_TABS_TITLE" desc="Title shown in the tab grid selection mode to indicate the number of selected tabs. count refers to the number of tabs selected. According to its value, the string goes from singular to plural. [iOS only]">
+        {count, plural,
+          =1 {{count} Tab}
+          other {{count} Tabs}}
+      </message>
       <message name="IDS_IOS_TAB_GRID_INCOGNITO_TABS_TITLE" desc="The accessibility label of the Incognito Tabs page in the tab grid UI. [iOS only]">
         Incognito Tabs
       </message>

ios/chrome/app/strings/ios_strings_grd/IDS_IOS_TAB_GRID_SELECTED_TABS_TITLE.png.sha1

@@ -0,0 +1 @@
+cfc04a6ccdecacb1976603643aafbd4fe9c8d1e9

ios/chrome/app/strings/ios_strings_grd/IDS_IOS_TAB_GRID_SELECT_ALL_BUTTON.png.sha1

@@ -0,0 +1 @@
+9682657bda4ea813b9b1f3d0533136509234acdb

ios/chrome/app/strings/ios_strings_grd/IDS_IOS_TAB_GRID_SELECT_TABS_TITLE.png.sha1

@@ -0,0 +1 @@
+9682657bda4ea813b9b1f3d0533136509234acdb

ios/chrome/browser/ui/tab_switcher/tab_grid/tab_grid_bottom_toolbar.h

@@ -12,17 +12,19 @@
 @class TabGridNewTabButton;
 
 // Bottom toolbar for TabGrid. The appearance of the toolbar is decided by
-// screen size and current TabGrid page:
+// screen size, current TabGrid page and mode:
 //
 // Horizontal-compact and vertical-regular screen size:
 //   Small newTabButton, translucent background.
-//   Incognito & Regular page: [leadingButton, newTabButton, trailingButton]
-//   Remote page:              [                             trailingButton]
+//   Incognito & Regular page: [CloseAllButton  newTabButton  DoneButton]
+//   Remote page:              [                              DoneButton]
+//   Selection mode:           [CloseTabButton  shareButton  AddToButton]
 //
 // Other screen size:
 //   Large newTabButton, floating layout without UIToolbar.
-//   Incognito & Regular page: [                               newTabButton]
-//   Remote page:              [                                           ]
+//   Normal mode:    [                                      newTabButton]
+//   Remote page:    [                                                  ]
+//   Selection mode: [CloseTabButton       shareButton       AddToButton]
 @interface TabGridBottomToolbar : UIView
 // This property together with |mode| and self.traitCollection control the items
 // shown in toolbar and its background color. Setting this property will also
@@ -35,17 +37,23 @@
 // selection mode. It will be used to update the buttons to use the correct
 // title (singular or plural).
 @property(nonatomic, assign) int selectedTabsCount;
-// These components are publicly available to allow the user to set their
-// contents, visibility and actions.
-@property(nonatomic, strong, readonly) UIBarButtonItem* leadingButton;
-@property(nonatomic, strong, readonly) UIBarButtonItem* trailingButton;
 
 // Sets target/action for tapping event on new tab button.
 - (void)setNewTabButtonTarget:(id)target action:(SEL)action;
+// Sets target/action for tapping event on close all button.
+- (void)setCloseAllButtonTarget:(id)target action:(SEL)action;
+// Sets target/action for tapping event on done button.
+- (void)setDoneButtonTarget:(id)target action:(SEL)action;
 // Set |enabled| on the new tab button.
 - (void)setNewTabButtonEnabled:(BOOL)enabled;
 // Set |enabled| on the selection mode buttons.
 - (void)setSelectionModeButtonsEnabled:(BOOL)enabled;
+// Set |enabled| on the done button.
+- (void)setDoneButtonEnabled:(BOOL)enabled;
+// Set |enabled| on the closeAll button.
+- (void)setCloseAllButtonEnabled:(BOOL)enabled;
+// use undo or closeAll text on the close all button based on |useUndo| value.
+- (void)useUndoCloseAll:(BOOL)useUndo;
 
 // Hides components and uses a black background color for tab grid transition
 // animation.

ios/chrome/browser/ui/tab_switcher/tab_grid/tab_grid_bottom_toolbar.mm

@@ -27,6 +27,8 @@ @implementation TabGridBottomToolbar {
   NSLayoutConstraint* _largeNewTabButtonBottomAnchor;
   TabGridNewTabButton* _smallNewTabButton;
   TabGridNewTabButton* _largeNewTabButton;
+  UIBarButtonItem* _doneButton;
+  UIBarButtonItem* _closeAllOrUndoButton;
   UIBarButtonItem* _addToButton;
   UIBarButtonItem* _closeTabsButton;
   UIBarButtonItem* _shareButton;
@@ -86,6 +88,8 @@ - (void)setPage:(TabGridPage)page {
 }
 
 - (void)setMode:(TabGridMode)mode {
+  if (_mode == mode)
+    return;
   _mode = mode;
   [self updateLayout];
 }
@@ -104,17 +108,60 @@ - (void)setNewTabButtonTarget:(id)target action:(SEL)action {
                forControlEvents:UIControlEventTouchUpInside];
 }
 
+- (void)setCloseAllButtonTarget:(id)target action:(SEL)action {
+  _closeAllOrUndoButton.target = target;
+  _closeAllOrUndoButton.action = action;
+}
+
+- (void)setDoneButtonTarget:(id)target action:(SEL)action {
+  _doneButton.target = target;
+  _doneButton.action = action;
+}
+
 - (void)setNewTabButtonEnabled:(BOOL)enabled {
   _smallNewTabButton.enabled = enabled;
   _largeNewTabButton.enabled = enabled;
 }
 
+- (void)setDoneButtonEnabled:(BOOL)enabled {
+  _doneButton.enabled = enabled;
+}
+
+- (void)setCloseAllButtonEnabled:(BOOL)enabled {
+  _closeAllOrUndoButton.enabled = enabled;
+}
+
 - (void)setSelectionModeButtonsEnabled:(BOOL)enabled {
   _addToButton.enabled = enabled;
   _closeTabsButton.enabled = enabled;
   _shareButton.enabled = enabled;
 }
 
+- (void)useUndoCloseAll:(BOOL)useUndo {
+  _closeAllOrUndoButton.enabled = YES;
+  if (useUndo) {
+    _closeAllOrUndoButton.title =
+        l10n_util::GetNSString(IDS_IOS_TAB_GRID_UNDO_CLOSE_ALL_BUTTON);
+    // Setting the |accessibilityIdentifier| seems to trigger layout, which
+    // causes an infinite loop.
+    if (_closeAllOrUndoButton.accessibilityIdentifier !=
+        kTabGridUndoCloseAllButtonIdentifier) {
+      _closeAllOrUndoButton.accessibilityIdentifier =
+          kTabGridUndoCloseAllButtonIdentifier;
+    }
+  } else {
+    _closeAllOrUndoButton.title =
+        l10n_util::GetNSString(IDS_IOS_TAB_GRID_CLOSE_ALL_BUTTON);
+    // Setting the |accessibilityIdentifier| seems to trigger layout, which
+    // causes an infinite loop.
+    if (_closeAllOrUndoButton.accessibilityIdentifier !=
+        kTabGridCloseAllButtonIdentifier) {
+      _closeAllOrUndoButton.accessibilityIdentifier =
+          kTabGridCloseAllButtonIdentifier;
+    }
+  }
+}
+
 - (void)hide {
   _smallNewTabButton.alpha = 0.0;
   _largeNewTabButton.alpha = 0.0;
@@ -139,12 +186,15 @@ - (void)setupViews {
   [_toolbar setShadowImage:[[UIImage alloc] init]
         forToolbarPosition:UIBarPositionAny];
 
-  _leadingButton = [[UIBarButtonItem alloc] init];
-  _leadingButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+  _closeAllOrUndoButton = [[UIBarButtonItem alloc] init];
+  _closeAllOrUndoButton.tintColor =
+      UIColorFromRGB(kTabGridToolbarTextButtonColor);
 
-  _trailingButton = [[UIBarButtonItem alloc] init];
-  _trailingButton.style = UIBarButtonItemStyleDone;
-  _trailingButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+  _doneButton = [[UIBarButtonItem alloc] init];
+  _doneButton.style = UIBarButtonItemStyleDone;
+  _doneButton.tintColor = UIColorFromRGB(kTabGridToolbarTextButtonColor);
+  _doneButton.title = l10n_util::GetNSString(IDS_IOS_TAB_GRID_DONE_BUTTON);
+  _doneButton.accessibilityIdentifier = kTabGridDoneButtonIdentifier;
 
   _spaceItem = [[UIBarButtonItem alloc]
       initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
@@ -223,14 +273,15 @@ - (void)setupViews {
 }
 
 - (void)updateSelectionButtonsTitle {
-  _closeTabsButton.title =
-      base::SysUTF16ToNSString(l10n_util::GetPluralStringFUTF16(
-          IDS_IOS_TAB_GRID_CLOSE_TABS_BUTTON, _selectedTabsCount));
+  _closeTabsButton.title = l10n_util::GetPluralNSStringF(
+      IDS_IOS_TAB_GRID_CLOSE_TABS_BUTTON, _selectedTabsCount);
 }
 
 - (void)updateLayout {
   _largeNewTabButtonBottomAnchor.constant =
       -kTabGridFloatingButtonVerticalInset;
+  UIBarButtonItem* leadingButton = _closeAllOrUndoButton;
+  UIBarButtonItem* trailingButton = _doneButton;
 
   if (self.mode == TabGridModeSelection) {
     [_toolbar setItems:@[
@@ -247,11 +298,10 @@ - (void)updateLayout {
     // For incognito/regular pages, display all 3 buttons;
     // For remote tabs page, only display new tab button.
     if (self.page == TabGridPageRemoteTabs) {
-      [_toolbar setItems:@[ _spaceItem, self.trailingButton ]];
+      [_toolbar setItems:@[ _spaceItem, trailingButton ]];
     } else {
       [_toolbar setItems:@[
-        self.leadingButton, _spaceItem, _newTabButtonItem, _spaceItem,
-        self.trailingButton
+        leadingButton, _spaceItem, _newTabButtonItem, _spaceItem, trailingButton
       ]];
     }
 

ios/chrome/browser/ui/tab_switcher/tab_grid/tab_grid_top_toolbar.h

@@ -7,33 +7,60 @@
 
 #import <UIKit/UIKit.h>
 
+#import "ios/chrome/browser/ui/tab_switcher/tab_grid/tab_grid_paging.h"
+
 @class TabGridPageControl;
 
-// Top toolbar for TabGrid. In horizontal-compact and vertical-regular screen
-// size, the toolbar shows 3 components, with two text buttons on each side and
-// a TabGridPageControl in the middle. For other screen sizes, the toolbar only
-// shows the newTabButton on the right. The toolbar always has a translucent
-// background.
+// Top toolbar for TabGrid. The appearance of the toolbar is decided by screen
+// size, current TabGrid page and mode:
+//
+// Horizontal-compact and vertical-regular screen size:
+//   Normal mode:    [               PageControl      Select]
+//   Remote page:    [               PageControl            ]
+//   Selection mode: [SelectAll    SelectedTabsCount    Done]
+// Other screen size:
+//   Normal mode:    [CloseAll           PageControl      Select Done]
+//   Remote page:    [                   PageControl             Done]
+//   Selection mode: [SelectAll        SelectedTabsCount         Done]
 @interface TabGridTopToolbar : UIToolbar
 // These components are publicly available to allow the user to set their
 // contents, visibility and actions.
-@property(nonatomic, strong, readonly) UIBarButtonItem* leadingButton;
-@property(nonatomic, strong, readonly) UIBarButtonItem* trailingButton;
+@property(nonatomic, strong, readonly) UIBarButtonItem* anchorItem;
 @property(nonatomic, strong, readonly) TabGridPageControl* pageControl;
+// This property together with |mode| control the items shown in toolbar.
+@property(nonatomic, assign) TabGridPage page;
+// TabGrid mode, it controls the items shown in toolbar.
+@property(nonatomic, assign) TabGridMode mode;
+// This property indicates the count of selected tabs when the tab grid is in
+// selection mode. It will be used to update the buttons to use the correct
+// title (singular or plural).
+@property(nonatomic, assign) int selectedTabsCount;
 
 // Sets target/action for tapping event on new tab button.
 - (void)setNewTabButtonTarget:(id)target action:(SEL)action;
-// Set |enabled| on the new tab button.
-- (void)setNewTabButtonEnabled:(BOOL)enabled;
 // Sets target/action for tapping event on select tabs button.
 - (void)setSelectTabButtonTarget:(id)target action:(SEL)action;
+// Sets target/action for tapping event on close all button.
+- (void)setCloseAllButtonTarget:(id)target action:(SEL)action;
+// Sets target/action for tapping event on done button.
+- (void)setDoneButtonTarget:(id)target action:(SEL)action;
+// Set |enabled| on the new tab button.
+- (void)setNewTabButtonEnabled:(BOOL)enabled;
 // Set |enabled| on the select tabs button.
 - (void)setSelectTabsButtonEnabled:(BOOL)enabled;
+// Set |enabled| on the close all button.
+- (void)setCloseAllButtonEnabled:(BOOL)enabled;
+// Set |enabled| on the done button.
+- (void)setDoneButtonEnabled:(BOOL)enabled;
+// use undo or closeAll text on the close all button based on |useUndo| value.
+- (void)useUndoCloseAll:(BOOL)useUndo;
+
 // Hides components and uses a black background color for tab grid transition
 // animation.
 - (void)hide;
 // Recovers the normal appearance for tab grid transition animation.
 - (void)show;
+
 @end
 
 #endif  // IOS_CHROME_BROWSER_UI_TAB_SWITCHER_TAB_GRID_TAB_GRID_TOP_TOOLBAR_H_