[ios] Image and styling tweaks to NTP.
- Update most visited and search icon image.
- Change hint text to go from 17pt to +.15 scale
- Center hint text.
- Make fake omnibox pill-like.
- Tweak omnibox fade on RxR.
Bug: 857433, 854093, 860414
Cq-Include-Trybots: luci.chromium.try:ios-simulator-full-configs;master.tryserver.chromium.mac:ios-simulator-cronet
Change-Id: Ie236f03daf20b074cb4b4382b3c70e79fc9eca9f
Reviewed-on: https://chromium-review.googlesource.com/1138347
Commit-Queue: Justin Cohen <justincohen@chromium.org>
Reviewed-by: Stepan Khapugin <stkhapugin@chromium.org>
Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575731}diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon.png
index 493fee8..e0f6691 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@2x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@2x.png
index 7e8d58fd..faf2f50 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@2x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@2x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@3x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@3x.png
index c8f74382..eb1b41a7 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@3x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_bookmarks_icon.imageset/ntp_bookmarks_icon@3x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon.png
index d39308eb..5c8a320 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@2x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@2x.png
index 6b969b8..0c4738af 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@2x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@2x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@3x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@3x.png
index 5e74f92..ee1a638 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@3x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_history_icon.imageset/ntp_history_icon@3x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon.png
index 1642596..80c7da13 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@2x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@2x.png
index c910398..0e0bb836 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@2x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@2x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@3x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@3x.png
index 4a2f3c5..45248d64 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@3x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_readinglist_icon.imageset/ntp_readinglist_icon@3x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon.png
index a292264e6..f43c7059 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@2x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@2x.png
index 2b24f9f..2e6c29c 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@2x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@2x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@3x.png b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@3x.png
index 9d80c02c..a27261b 100644
--- a/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@3x.png
+++ b/ios/chrome/browser/ui/content_suggestions/cells/resources/ntp_recent_icon.imageset/ntp_recent_icon@3x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/content_suggestions_collection_utils.mm b/ios/chrome/browser/ui/content_suggestions/content_suggestions_collection_utils.mm
index 37acd55..b3778c4 100644
--- a/ios/chrome/browser/ui/content_suggestions/content_suggestions_collection_utils.mm
+++ b/ios/chrome/browser/ui/content_suggestions/content_suggestions_collection_utils.mm
@@ -86,7 +86,7 @@
const CGFloat kSearchFieldHeight = 50;
const int kSearchFieldBackgroundColor = 0xF1F3F4;
-const CGFloat kHintTextScale = 0.85;
+const CGFloat kHintTextScale = 0.15;
const NSUInteger kMostVisitedItemsPerLine = 4;
@@ -232,7 +232,8 @@
}
if (IsUIRefreshPhase1Enabled()) {
[searchHintLabel setTextColor:[UIColor colorWithWhite:0 alpha:kHintAlpha]];
- searchHintLabel.font = [UIFont systemFontOfSize:20];
+ searchHintLabel.font = [UIFont systemFontOfSize:17];
+ searchHintLabel.textAlignment = NSTextAlignmentCenter;
} else {
[searchHintLabel
setTextColor:
@@ -244,7 +245,6 @@
void configureVoiceSearchButton(UIButton* voiceSearchButton,
UIButton* searchTapTarget) {
- UIImage* micImage = [UIImage imageNamed:@"voice_icon"];
[voiceSearchButton setTranslatesAutoresizingMaskIntoConstraints:NO];
[searchTapTarget addSubview:voiceSearchButton];
@@ -258,7 +258,16 @@
]];
[voiceSearchButton setAdjustsImageWhenHighlighted:NO];
+
+ UIImage* micImage =
+ IsUIRefreshPhase1Enabled()
+ ? [[UIImage imageNamed:@"location_bar_voice"]
+ imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
+ : [UIImage imageNamed:@"voice_icon"];
[voiceSearchButton setImage:micImage forState:UIControlStateNormal];
+ if (IsUIRefreshPhase1Enabled()) {
+ voiceSearchButton.tintColor = [UIColor colorWithWhite:0 alpha:0.7];
+ }
[voiceSearchButton setAccessibilityLabel:l10n_util::GetNSString(
IDS_IOS_ACCNAME_VOICE_SEARCH)];
[voiceSearchButton setAccessibilityIdentifier:@"Voice Search"];
diff --git a/ios/chrome/browser/ui/content_suggestions/content_suggestions_header_view.mm b/ios/chrome/browser/ui/content_suggestions/content_suggestions_header_view.mm
index ad0ee43c..3d7a119c 100644
--- a/ios/chrome/browser/ui/content_suggestions/content_suggestions_header_view.mm
+++ b/ios/chrome/browser/ui/content_suggestions/content_suggestions_header_view.mm
@@ -27,9 +27,6 @@
namespace {
-// Left margin for search icon.
-const CGFloat kSearchIconLeftMargin = 9;
-
// Landscape inset for fake omnibox background container
const CGFloat kBackgroundLandscapeInset = 169;
@@ -42,11 +39,13 @@
@property(nonatomic, strong) NSLayoutConstraint* backgroundLeadingConstraint;
@property(nonatomic, strong) NSLayoutConstraint* backgroundTrailingConstraint;
@property(nonatomic, strong) NSLayoutConstraint* blurTopConstraint;
+@property(nonatomic, strong) UIView* backgroundContainer;
@end
@implementation ContentSuggestionsHeaderView
+@synthesize backgroundContainer = _backgroundContainer;
@synthesize backgroundHeightConstraint = _backgroundHeightConstraint;
@synthesize backgroundLeadingConstraint = _backgroundLeadingConstraint;
@synthesize backgroundTrailingConstraint = _backgroundTrailingConstraint;
@@ -66,17 +65,10 @@
#pragma mark - Private
// Scale the the hint label down to at most content_suggestions::kHintTextScale.
-// Also maintains autoresizing frame origin after the transform.
- (void)scaleHintLabel:(UIView*)hintLabel percent:(CGFloat)percent {
- CGFloat scaleValue = (content_suggestions::kHintTextScale - 1) * percent + 1;
+ CGFloat scaleValue =
+ 1 + (content_suggestions::kHintTextScale * (1 - percent));
hintLabel.transform = CGAffineTransformMakeScale(scaleValue, scaleValue);
- // The transform above is anchored around the center of the frame, which means
- // the origin x and y value will be updated as well as it's width and height.
- // Since the source of truth for this views layout is governed by it's parent
- // view in autolayout, reset the frame's origin.x to 0 below.
- CGRect frame = hintLabel.frame;
- frame.origin.x = 0;
- hintLabel.frame = frame;
}
#pragma mark - NTPHeaderViewAdapter
@@ -105,7 +97,6 @@
blur = [[UIView alloc] init];
}
blur.backgroundColor = buttonFactory.toolbarConfiguration.blurBackgroundColor;
- blur.layer.cornerRadius = kAdaptiveLocationBarCornerRadius;
[searchField insertSubview:blur atIndex:0];
blur.translatesAutoresizingMaskIntoConstraints = NO;
self.blurTopConstraint =
@@ -125,39 +116,28 @@
vibrancyView.translatesAutoresizingMaskIntoConstraints = NO;
AddSameConstraints(vibrancyView, searchField);
- UIView* backgroundContainer = [[UIView alloc] init];
- backgroundContainer.userInteractionEnabled = NO;
- backgroundContainer.backgroundColor =
- UIColorFromRGB(content_suggestions::kSearchFieldBackgroundColor);
- backgroundContainer.layer.cornerRadius = kAdaptiveLocationBarCornerRadius;
- [vibrancyView.contentView addSubview:backgroundContainer];
+ self.backgroundContainer = [[UIView alloc] init];
+ self.backgroundContainer.userInteractionEnabled = NO;
+ self.backgroundContainer.backgroundColor =
+ [UIColor colorWithWhite:0 alpha:kAdaptiveLocationBarBackgroundAlpha];
+ self.backgroundContainer.layer.cornerRadius =
+ kAdaptiveLocationBarCornerRadius;
+ [vibrancyView.contentView addSubview:self.backgroundContainer];
- backgroundContainer.translatesAutoresizingMaskIntoConstraints = NO;
- self.backgroundLeadingConstraint = [backgroundContainer.leadingAnchor
+ self.backgroundContainer.translatesAutoresizingMaskIntoConstraints = NO;
+ self.backgroundLeadingConstraint = [self.backgroundContainer.leadingAnchor
constraintEqualToAnchor:searchField.leadingAnchor];
- self.backgroundTrailingConstraint = [backgroundContainer.trailingAnchor
+ self.backgroundTrailingConstraint = [self.backgroundContainer.trailingAnchor
constraintEqualToAnchor:searchField.trailingAnchor];
- self.backgroundHeightConstraint = [backgroundContainer.heightAnchor
+ self.backgroundHeightConstraint = [self.backgroundContainer.heightAnchor
constraintEqualToConstant:content_suggestions::kSearchFieldHeight];
[NSLayoutConstraint activateConstraints:@[
- [backgroundContainer.centerYAnchor
+ [self.backgroundContainer.centerYAnchor
constraintEqualToAnchor:searchField.centerYAnchor],
self.backgroundLeadingConstraint,
self.backgroundTrailingConstraint,
self.backgroundHeightConstraint,
]];
-
- UIImage* search_icon = [UIImage imageNamed:@"ntp_search_icon"];
- UIImageView* search_view = [[UIImageView alloc] initWithImage:search_icon];
- [searchField addSubview:search_view];
- search_view.translatesAutoresizingMaskIntoConstraints = NO;
- [NSLayoutConstraint activateConstraints:@[
- [search_view.centerYAnchor
- constraintEqualToAnchor:backgroundContainer.centerYAnchor],
- [search_view.leadingAnchor
- constraintEqualToAnchor:backgroundContainer.leadingAnchor
- constant:kSearchIconLeftMargin],
- ]];
}
- (CGFloat)searchFieldProgressForOffset:(CGFloat)offset
@@ -165,6 +145,12 @@
// The scroll offset at which point searchField's frame should stop growing.
CGFloat maxScaleOffset = self.frame.size.height -
ntp_header::kMinHeaderHeight - safeAreaInsets.top;
+
+ // With RxR the search field should scroll under the toolbar.
+ if (IsRegularXRegularSizeClass(self)) {
+ maxScaleOffset += kAdaptiveToolbarHeight;
+ }
+
// The scroll offset at which point searchField's frame should start
// growing.
CGFloat startScaleOffset = maxScaleOffset - ntp_header::kAnimationDistance;
@@ -199,8 +185,11 @@
widthConstraint.constant = searchFieldNormalWidth;
self.backgroundHeightConstraint.constant =
content_suggestions::kSearchFieldHeight;
+ self.backgroundContainer.layer.cornerRadius =
+ content_suggestions::kSearchFieldHeight / 2;
[self scaleHintLabel:hintLabel percent:percent];
self.blurTopConstraint.constant = 0;
+
return;
} else {
self.alpha = 1;
@@ -238,6 +227,8 @@
kLocationBarHeight - content_suggestions::kSearchFieldHeight;
self.backgroundHeightConstraint.constant =
content_suggestions::kSearchFieldHeight + minHeightDiff * percent;
+ self.backgroundContainer.layer.cornerRadius =
+ self.backgroundHeightConstraint.constant / 2;
// Scale the hintLabel, and make sure the frame stays left aligned.
[self scaleHintLabel:hintLabel percent:percent];
diff --git a/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon.png b/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon.png
index 7146a1e..3c10512 100644
--- a/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon.png
+++ b/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@2x.png b/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@2x.png
index af824f6..c454ef1 100644
--- a/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@2x.png
+++ b/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@2x.png
Binary files differ
diff --git a/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@3x.png b/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@3x.png
index a23d0df..dadd1c1 100644
--- a/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@3x.png
+++ b/ios/chrome/browser/ui/content_suggestions/resources/ntp_search_icon.imageset/ntp_search_icon@3x.png
Binary files differ
