Update Location Bar Bubbles Layout for Material Design

Update the layout of IconLabelBubbleView in order to match the specs for material design.

TEST=manual testing on device, compared screenshots with spec
BUG=523352

Review URL: https://codereview.chromium.org/1378023003

Cr-Commit-Position: refs/heads/master@{#352697}

5 files changed, 37 insertions, 14 deletions

diff --git a/chrome/browser/ui/views/layout_constants.cc b/chrome/browser/ui/views/layout_constants.cc
index 66e1a1f..2414aba 100644
--- a/chrome/browser/ui/views/layout_constants.cc
+++ b/chrome/browser/ui/views/layout_constants.cc
@@ -8,9 +8,10 @@
 #include "ui/base/resource/material_design/material_design_controller.h"
 
 int GetLayoutConstant(LayoutConstant constant) {
+  const int kIconLabelViewInternalPadding[] = {3, 2, 2};
   const int kIconLabelViewTrailingPadding[] = {2, 8, 8};
   const int kLocationBarBubbleHorizontalPadding[] = {1, 5, 5};
-  const int kLocationBarBubbleVerticalPadding[] = {1, 3, 3};
+  const int kLocationBarBubbleVerticalPadding[] = {1, 5, 5};
   const int kLocationBarHeight[] = {0, 28, 32};
   const int kLocationBarHorizontalPadding[] = {3, 6, 6};
   const int kLocationBarVerticalPadding[] = {2, 2, 2};
@@ -35,6 +36,8 @@ int GetLayoutConstant(LayoutConstant constant) {
 
   const int mode = ui::MaterialDesignController::GetMode();
   switch (constant) {
+    case ICON_LABEL_VIEW_INTERNAL_PADDING:
+      return kIconLabelViewInternalPadding[mode];
     case ICON_LABEL_VIEW_TRAILING_PADDING:
       return kIconLabelViewTrailingPadding[mode];
     case LOCATION_BAR_BUBBLE_HORIZONTAL_PADDING:
diff --git a/chrome/browser/ui/views/layout_constants.h b/chrome/browser/ui/views/layout_constants.h
index 217158f..3c14b98 100644
--- a/chrome/browser/ui/views/layout_constants.h
+++ b/chrome/browser/ui/views/layout_constants.h
@@ -8,6 +8,9 @@
 #include "ui/gfx/geometry/insets.h"
 
 enum LayoutConstant {
+  // Horizontal padding applied between items of icon-label views.
+  ICON_LABEL_VIEW_INTERNAL_PADDING,
+
   // Additional horizontal padding applied on the trailing edge of icon-label
   // views.
   ICON_LABEL_VIEW_TRAILING_PADDING,
diff --git a/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc b/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
index ed09f59..3e8a3e6 100644
--- a/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
+++ b/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
@@ -105,7 +105,7 @@ void IconLabelBubbleView::Layout() {
                              GetBubbleOuterPadding(!is_extension_icon_)),
                     0, image_->GetPreferredSize().width(), height());
 
-  const int padding = GetLayoutConstant(LOCATION_BAR_HORIZONTAL_PADDING);
+  const int padding = GetLayoutConstant(ICON_LABEL_VIEW_INTERNAL_PADDING);
   int pre_label_width =
       GetBubbleOuterPadding(true) + (image_width ? (image_width + padding) : 0);
   label_->SetBounds(pre_label_width, 0,
@@ -117,7 +117,7 @@ gfx::Size IconLabelBubbleView::GetSizeForLabelWidth(int width) const {
   gfx::Size size(image_->GetPreferredSize());
   if (ShouldShowBackground()) {
     const int image_width = image_->GetPreferredSize().width();
-    const int padding = GetLayoutConstant(LOCATION_BAR_HORIZONTAL_PADDING);
+    const int padding = GetLayoutConstant(ICON_LABEL_VIEW_INTERNAL_PADDING);
     const int non_label_width =
         GetBubbleOuterPadding(true) +
         (image_width ? (image_width + padding) : 0) +
diff --git a/chrome/browser/ui/views/location_bar/location_bar_view.cc b/chrome/browser/ui/views/location_bar/location_bar_view.cc
index 810fac6..c39d2fc 100644
--- a/chrome/browser/ui/views/location_bar/location_bar_view.cc
+++ b/chrome/browser/ui/views/location_bar/location_bar_view.cc
@@ -215,17 +215,20 @@ void LocationBarView::Init() {
   // Determine the font for use inside the bubbles.  The bubble background
   // images have 1 px thick edges, which we don't want to overlap.
   const int kBubbleInteriorVerticalPadding = 1;
-  const int bubble_vertical_padding =
-      (GetLayoutConstant(LOCATION_BAR_BUBBLE_VERTICAL_PADDING) +
-          kBubbleInteriorVerticalPadding) * 2;
-  const gfx::FontList bubble_font_list(font_list.DeriveWithHeightUpperBound(
-      location_height - bubble_vertical_padding));
+  const int bubble_padding =
+      GetVerticalEdgeThickness() +
+      GetLayoutConstant(LOCATION_BAR_BUBBLE_VERTICAL_PADDING) +
+      kBubbleInteriorVerticalPadding;
+  const int bubble_height = GetPreferredSize().height() - (bubble_padding * 2);
+  gfx::FontList bubble_font_list =
+      font_list.DeriveWithHeightUpperBound(bubble_height);
 
   const SkColor background_color =
       GetColor(SecurityStateModel::NONE, LocationBarView::BACKGROUND);
-  ev_bubble_view_ = new EVBubbleView(
-      bubble_font_list, GetColor(SecurityStateModel::EV_SECURE, SECURITY_TEXT),
-      background_color, this);
+  const SkColor ev_text_color =
+      GetColor(SecurityStateModel::EV_SECURE, SECURITY_TEXT);
+  ev_bubble_view_ =
+      new EVBubbleView(bubble_font_list, ev_text_color, background_color, this);
   ev_bubble_view_->set_drag_controller(this);
   AddChildView(ev_bubble_view_);
 
@@ -250,9 +253,12 @@ void LocationBarView::Init() {
   ime_inline_autocomplete_view_->SetVisible(false);
   AddChildView(ime_inline_autocomplete_view_);
 
-  const SkColor text_color = GetColor(SecurityStateModel::NONE, TEXT);
+  const SkColor selected_text_color = GetColor(
+      SecurityStateModel::NONE, ui::MaterialDesignController::IsModeMaterial()
+                                    ? KEYWORD_SEARCH_TEXT
+                                    : TEXT);
   selected_keyword_view_ = new SelectedKeywordView(
-      bubble_font_list, text_color, background_color, profile());
+      bubble_font_list, selected_text_color, background_color, profile());
   AddChildView(selected_keyword_view_);
 
   suggested_text_view_ = new views::Label(base::string16(), font_list);
@@ -283,6 +289,7 @@ void LocationBarView::Init() {
   mic_search_view_->SetVisible(false);
   AddChildView(mic_search_view_);
 
+  const SkColor text_color = GetColor(SecurityStateModel::NONE, TEXT);
   for (ContentSettingsType type :
        ContentSettingBubbleModel::GetSupportedBubbleTypes()) {
     ContentSettingImageView* content_blocked_view = new ContentSettingImageView(
@@ -348,7 +355,10 @@ SkColor LocationBarView::GetColor(
       switch (security_level) {
         case SecurityStateModel::EV_SECURE:
         case SecurityStateModel::SECURE:
-          color = SkColorSetRGB(7, 149, 0);
+          if (ui::MaterialDesignController::IsModeMaterial())
+            color = SkColorSetRGB(11, 128, 67);
+          else
+            color = SkColorSetRGB(7, 149, 0);
           break;
 
         case SecurityStateModel::SECURITY_POLICY_WARNING:
@@ -371,6 +381,9 @@ SkColor LocationBarView::GetColor(
           color, GetColor(security_level, BACKGROUND));
     }
 
+    case KEYWORD_SEARCH_TEXT:
+      return SkColorSetRGB(51, 103, 214);
+
     default:
       NOTREACHED();
       return GetColor(security_level, TEXT);
@@ -860,6 +873,9 @@ int LocationBarView::GetHorizontalEdgeThickness() const {
 }
 
 int LocationBarView::GetVerticalEdgeThickness() const {
+  // In Material Design vertical layout disregards the border.
+  if (ui::MaterialDesignController::IsModeMaterial())
+    return 0;
   return is_popup_mode_ ? kPopupEdgeThickness : kNormalEdgeThickness;
 }
 
diff --git a/chrome/browser/ui/views/location_bar/location_bar_view.h b/chrome/browser/ui/views/location_bar/location_bar_view.h
index a5d1127..a88a1d6 100644
--- a/chrome/browser/ui/views/location_bar/location_bar_view.h
+++ b/chrome/browser/ui/views/location_bar/location_bar_view.h
@@ -121,6 +121,7 @@ class LocationBarView : public LocationBar,
     SELECTED_TEXT,
     DEEMPHASIZED_TEXT,
     SECURITY_TEXT,
+    KEYWORD_SEARCH_TEXT,
   };
 
   LocationBarView(Browser* browser,