[ios clean] Fixes Menu Overflow Controls UI

UI screenshot:
https://drive.google.com/open?id=0Byo6-Nuda2jgSUJKeTBQMndhbnc
Constraints screenshot:
https://drive.google.com/open?id=0Byo6-Nuda2jgYnZ3SnRPdERxQzA

BUG=682880

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

ios/clean/chrome/browser/ui/toolbar/BUILD.gn

@@ -28,8 +28,6 @@ source_set("toolbar") {
 
 source_set("toolbar_ui") {
   sources = [
-    "toolbar_constants.h",
-    "toolbar_constants.mm",
     "toolbar_consumer.h",
     "toolbar_view_controller.h",
     "toolbar_view_controller.mm",
@@ -54,6 +52,8 @@ source_set("toolbar_components_ui") {
     "toolbar_button.h",
     "toolbar_button.mm",
     "toolbar_component_options.h",
+    "toolbar_constants.h",
+    "toolbar_constants.mm",
   ]
   deps = [
     "//base",

ios/clean/chrome/browser/ui/toolbar/toolbar_button+factory.h

@@ -29,6 +29,8 @@
 + (instancetype)reloadToolbarButton;
 // Stop ToolbarButton.
 + (instancetype)stopToolbarButton;
+// Star ToolbarButton.
++ (instancetype)starToolbarButton;
 
 @end
 

ios/clean/chrome/browser/ui/tools/BUILD.gn

@@ -41,6 +41,7 @@ source_set("tools_ui") {
   deps = [
     "//base",
     "//base:i18n",
+    "//ios/chrome/app/theme",
     "//ios/chrome/browser/ui",
     "//ios/clean/chrome/browser/ui/commands",
     "//ios/clean/chrome/browser/ui/toolbar:toolbar_components_ui",

ios/clean/chrome/browser/ui/tools/menu_overflow_controls_stackview.h

@@ -18,6 +18,8 @@
 @property(nonatomic, strong) ToolbarButton* reloadButton;
 // Stop ToolbarButton.
 @property(nonatomic, strong) ToolbarButton* stopButton;
+// Star ToolbarButton.
+@property(nonatomic, strong) ToolbarButton* starButton;
 @end
 
 #endif  // IOS_CLEAN_CHROME_BROWSER_UI_TOOLS_MENU_OVERFLOW_CONTROLS_STACKVIEW_H_

ios/clean/chrome/browser/ui/tools/menu_overflow_controls_stackview.mm

@@ -6,19 +6,29 @@
 
 #import "ios/clean/chrome/browser/ui/toolbar/toolbar_button+factory.h"
 
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+const CGFloat kStackSpacing = 15.0;
+}
+
 @implementation MenuOverflowControlsStackView
 @synthesize shareButton = _shareButton;
 @synthesize reloadButton = _reloadButton;
 @synthesize stopButton = _stopButton;
+@synthesize starButton = _starButton;
 
 - (instancetype)init {
   if ((self = [super init])) {
-    // PLACEHOLDER: Buttons and UI config is not final and will be improved.
     [self setUpToolbarButtons];
     [self addArrangedSubview:self.shareButton];
+    [self addArrangedSubview:self.starButton];
     [self addArrangedSubview:self.stopButton];
     [self addArrangedSubview:self.reloadButton];
 
+    self.spacing = kStackSpacing;
     self.axis = UILayoutConstraintAxisHorizontal;
     self.distribution = UIStackViewDistributionFillEqually;
   }
@@ -36,6 +46,9 @@
 
   // Stop button.
   self.stopButton = [ToolbarButton stopToolbarButton];
+
+  // Star button.
+  self.starButton = [ToolbarButton starToolbarButton];
 }
 
 @end

ios/clean/chrome/browser/ui/tools/menu_view_controller.mm

@@ -9,11 +9,14 @@
 #import "base/mac/foundation_util.h"
 #import "base/macros.h"
 #import "ios/chrome/browser/ui/rtl_geometry.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+#include "ios/chrome/grit/ios_theme_resources.h"
 #import "ios/clean/chrome/browser/ui/commands/find_in_page_visibility_commands.h"
 #import "ios/clean/chrome/browser/ui/commands/navigation_commands.h"
 #import "ios/clean/chrome/browser/ui/commands/tools_menu_commands.h"
 #import "ios/clean/chrome/browser/ui/toolbar/toolbar_button+factory.h"
 #import "ios/clean/chrome/browser/ui/toolbar/toolbar_button.h"
+#import "ios/clean/chrome/browser/ui/toolbar/toolbar_constants.h"
 #import "ios/clean/chrome/browser/ui/tools/menu_overflow_controls_stackview.h"
 #import "ios/clean/chrome/browser/ui/tools/tools_actions.h"
 #import "ios/clean/chrome/browser/ui/tools/tools_menu_item.h"
@@ -26,8 +29,8 @@
 namespace {
 const CGFloat kMenuWidth = 250.0;
 const CGFloat kMenuItemHeight = 48.0;
-const CGFloat kMenuItemLeadingEdgeInset = 10.0;
-const CGFloat kOverflowControlsMargin = 50.0;
+const CGFloat kMenuItemLeadingEdgeInset = 12.0;
+const CGFloat kOverflowControlsMargin = 58.0;
 const CGFloat kCloseButtonHeight = 44.0;
 }
 
@@ -39,6 +42,7 @@ const CGFloat kCloseButtonHeight = 44.0;
     MenuOverflowControlsStackView* toolbarOverflowStackView;
 @property(nonatomic, assign) BOOL displayOverflowControls;
 @property(nonatomic, strong) ToolbarButton* closeMenuButton;
+@property(nonatomic, assign) BOOL currentPageLoading;
 
 // Sets up the main StackView and creates a button for each Menu item.
 - (void)setupMenuStackView;
@@ -56,6 +60,7 @@ const CGFloat kCloseButtonHeight = 44.0;
 @synthesize displayOverflowControls = _displayOverflowControls;
 @synthesize menuScrollView = _menuScrollView;
 @synthesize closeMenuButton = _closeMenuButton;
+@synthesize currentPageLoading = _currentPageLoading;
 
 #pragma mark - View Lifecycle
 
@@ -79,20 +84,42 @@ const CGFloat kCloseButtonHeight = 44.0;
   self.menuScrollView.translatesAutoresizingMaskIntoConstraints = NO;
   [self.view addSubview:self.menuScrollView];
 
+  // PLACEHOLDER: Hardcoded value until the mediator observes the Webstate.
+  self.currentPageLoading = NO;
+
+  [self setupCloseMenuButton];
+  [self setupMenuStackView];
+  [self setupConstraints];
+}
+
+#pragma mark - UI Setup
+
+- (void)setupCloseMenuButton {
   // Add close tools menu button. This button is fixed on the top right corner
   // and will always be visible.
-  self.closeMenuButton = [ToolbarButton toolsMenuToolbarButton];
+  self.closeMenuButton = [ToolbarButton
+      toolbarButtonWithImageForNormalState:
+          NativeImage(IDR_IOS_TOOLBAR_LIGHT_TOOLS_PRESSED)
+                  imageForHighlightedState:NativeImage(
+                                               IDR_IOS_TOOLBAR_LIGHT_TOOLS)
+                     imageForDisabledState:nil];
+  [self.closeMenuButton
+      setImageEdgeInsets:UIEdgeInsetsMakeDirected(0, -3, 0, 0)];
   [self.closeMenuButton addTarget:self.dispatcher
                            action:@selector(closeToolsMenu)
                  forControlEvents:UIControlEventTouchUpInside];
-  [self.view addSubview:self.closeMenuButton];
 
-  [self setupMenuStackView];
-  [self setupConstraints];
+  NSLayoutConstraint* widthConstraint = [self.closeMenuButton.widthAnchor
+      constraintEqualToConstant:kToolbarButtonWidth];
+  widthConstraint.priority = UILayoutPriorityDefaultHigh;
+  NSLayoutConstraint* heightConstraint = [self.closeMenuButton.heightAnchor
+      constraintEqualToConstant:kCloseButtonHeight];
+  heightConstraint.priority = UILayoutPriorityDefaultHigh;
+  [NSLayoutConstraint
+      activateConstraints:@[ widthConstraint, heightConstraint ]];
+  [self.view addSubview:self.closeMenuButton];
 }
 
-#pragma mark - UI Setup
-
 - (void)setupMenuStackView {
   NSMutableArray<UIButton*>* buttons =
       [[NSMutableArray alloc] initWithCapacity:_menuItems.count];
@@ -101,6 +128,11 @@ const CGFloat kCloseButtonHeight = 44.0;
     UIButton* menuButton = [UIButton buttonWithType:UIButtonTypeSystem];
     menuButton.translatesAutoresizingMaskIntoConstraints = NO;
     menuButton.tintColor = [UIColor blackColor];
+    // Button constraints will be changed in order to match the menu width, for
+    // this reason the content will be centered if no content alignment is set.
+    menuButton.contentHorizontalAlignment =
+        UseRTLLayout() ? UIControlContentHorizontalAlignmentRight
+                       : UIControlContentHorizontalAlignmentLeft;
     [menuButton setTitle:item.title forState:UIControlStateNormal];
     [menuButton setContentEdgeInsets:UIEdgeInsetsMakeDirected(
                                          0, kMenuItemLeadingEdgeInset, 0, 0)];
@@ -123,6 +155,21 @@ const CGFloat kCloseButtonHeight = 44.0;
   self.menuStackView.distribution = UIStackViewDistributionFillEqually;
   self.menuStackView.alignment = UIStackViewAlignmentLeading;
 
+  // Set button constraints so they have the same width as the StackView that
+  // contains them.
+  NSMutableArray* buttonConstraints = [[NSMutableArray alloc] init];
+  for (UIView* view in self.menuStackView.arrangedSubviews) {
+    [buttonConstraints
+        addObject:[view.leadingAnchor
+                      constraintEqualToAnchor:self.menuStackView
+                                                  .leadingAnchor]];
+    [buttonConstraints
+        addObject:[view.trailingAnchor
+                      constraintEqualToAnchor:self.menuStackView
+                                                  .trailingAnchor]];
+  }
+  [NSLayoutConstraint activateConstraints:buttonConstraints];
+
   // Stack view to hold overflow ToolbarButtons.
   if (self.traitCollection.horizontalSizeClass ==
           UIUserInterfaceSizeClassCompact &&
@@ -133,8 +180,6 @@ const CGFloat kCloseButtonHeight = 44.0;
 
 - (void)setUpOverFlowControlsStackView {
   self.toolbarOverflowStackView = [[MenuOverflowControlsStackView alloc] init];
-  // PLACEHOLDER: ToolsMenuButton might end up being part of the MenuVC's view
-  // instead of the StackView. We are waiting confirmation on this.
   for (UIView* view in self.toolbarOverflowStackView.arrangedSubviews) {
     if ([view isKindOfClass:[ToolbarButton class]]) {
       ToolbarButton* button = base::mac::ObjCCastStrict<ToolbarButton>(view);
@@ -143,6 +188,8 @@ const CGFloat kCloseButtonHeight = 44.0;
           forControlEvents:UIControlEventTouchUpInside];
     }
   }
+  self.toolbarOverflowStackView.reloadButton.hidden = self.currentPageLoading;
+  self.toolbarOverflowStackView.stopButton.hidden = !self.currentPageLoading;
   [self.toolbarOverflowStackView.reloadButton
              addTarget:self.dispatcher
                 action:@selector(reloadPage)
@@ -154,13 +201,17 @@ const CGFloat kCloseButtonHeight = 44.0;
 
   [self.menuStackView insertArrangedSubview:self.toolbarOverflowStackView
                                     atIndex:0];
-  [NSLayoutConstraint activateConstraints:@[
-    [self.toolbarOverflowStackView.leadingAnchor
-        constraintEqualToAnchor:self.menuStackView.leadingAnchor],
-    [self.toolbarOverflowStackView.trailingAnchor
-        constraintEqualToAnchor:self.menuStackView.trailingAnchor
-                       constant:-kOverflowControlsMargin],
-  ]];
+  NSLayoutConstraint* leadingConstraint =
+      [self.toolbarOverflowStackView.leadingAnchor
+          constraintEqualToAnchor:self.menuStackView.leadingAnchor];
+  leadingConstraint.priority = UILayoutPriorityDefaultHigh;
+  NSLayoutConstraint* trailingConstraint =
+      [self.toolbarOverflowStackView.trailingAnchor
+          constraintEqualToAnchor:self.menuStackView.trailingAnchor
+                         constant:-kOverflowControlsMargin];
+  trailingConstraint.priority = UILayoutPriorityDefaultHigh;
+  [NSLayoutConstraint
+      activateConstraints:@[ leadingConstraint, trailingConstraint ]];
 }
 
 - (void)setupConstraints {
@@ -187,11 +238,9 @@ const CGFloat kCloseButtonHeight = 44.0;
         constraintEqualToAnchor:self.menuScrollView.widthAnchor],
     [self.menuStackView.heightAnchor
         constraintEqualToConstant:kMenuItemHeight * self.menuItems.count],
-    // CloseMenu Button Constraints.
+    // CloseMenu Button Constraint.
     [self.closeMenuButton.trailingAnchor
         constraintEqualToAnchor:self.view.trailingAnchor],
-    [self.closeMenuButton.heightAnchor
-        constraintEqualToConstant:kCloseButtonHeight],
   ]];
 }