Material Refresh - Inactive tab colors and behavior.

 * Inactive tabs
  * No shape or color separate from the background.
  * Shape and color appears on hover.
  * No visible close icon until mouse hover.
  * Incognito mode colors for close icon for static/hover/pressed.

TBR=msw@chromium.org

Bug: 822061
Change-Id: I0898fcb49f1133d0922f364c0453b4436e344b35
Reviewed-on: https://chromium-review.googlesource.com/1024602
Commit-Queue: Allen Bauer <kylixrd@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554846}

chrome/app/vector_icons/BUILD.gn

@@ -98,10 +98,9 @@ aggregate_vector_icons("chrome_vector_icons") {
     "tab_audio_muting_rounded.icon",
     "tab_audio_rounded.icon",
     "tab_bluetooth_connected.icon",
+    "tab_close_button_highlight.icon",
     "tab_close_button_touch.icon",
-    "tab_close_button_touch_hovered_pressed.icon",
-    "tab_close_button_touch_incognito_hovered_pressed.icon",
-    "tab_close_hovered_pressed.icon",
+    "tab_close_button_touch_highlight.icon",
     "tab_close_normal.icon",
     "tab_media_capturing.icon",
     "tab_media_capturing_with_arrow.icon",

chrome/app/vector_icons/tab_close_button_touch_incognito_hovered_pressed.icon → chrome/app/vector_icons/tab_close_button_highlight.icon

@@ -2,20 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-CANVAS_DIMENSIONS, 24,
-CIRCLE, 12, 12, 9,
-NEW_PATH,
-PATH_COLOR_ARGB, 0xFF, 0xF1, 0xF3, 0xF4,
-MOVE_TO, 16.83f, 8.35f,
-LINE_TO, 15.65f, 7.17f,
-LINE_TO, 12, 10.82f,
-LINE_TO, 8.35f, 7.17f,
-LINE_TO, 7.17f, 8.35f,
-LINE_TO, 10.82f, 12,
-LINE_TO, 7.17f, 15.65f,
-LINE_TO, 8.35f, 16.83f,
-LINE_TO, 12, 13.18f,
-LINE_TO, 15.65f, 16.83f,
-LINE_TO, 16.83f, 15.65f,
-LINE_TO, 13.18f, 12,
-CLOSE
+// The highlight circle around the close "X" for a tab when hovered/pressed.
+CANVAS_DIMENSIONS, 16,
+CIRCLE, 8, 8, 8,

chrome/app/vector_icons/tab_close_button_touch_hovered_pressed.icon → chrome/app/vector_icons/tab_close_button_touch_highlight.icon

@@ -3,19 +3,4 @@
 // found in the LICENSE file.
 
 CANVAS_DIMENSIONS, 24,
-CIRCLE, 12, 12, 9,
-NEW_PATH,
-PATH_COLOR_ARGB, 0xFF, 0xFD, 0xFE, 0xFF,
-MOVE_TO, 16.83f, 8.35f,
-LINE_TO, 15.65f, 7.17f,
-LINE_TO, 12, 10.82f,
-LINE_TO, 8.35f, 7.17f,
-LINE_TO, 7.17f, 8.35f,
-LINE_TO, 10.82f, 12,
-LINE_TO, 7.17f, 15.65f,
-LINE_TO, 8.35f, 16.83f,
-LINE_TO, 12, 13.18f,
-LINE_TO, 15.65f, 16.83f,
-LINE_TO, 16.83f, 15.65f,
-LINE_TO, 13.18f, 12,
-CLOSE
+CIRCLE, 12, 12, 12,

chrome/app/vector_icons/tab_close_hovered_pressed.icon

-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// The close "X" for a tab when hovered/pressed.
-CANVAS_DIMENSIONS, 32,
-CIRCLE, 16, 16, 14,
-NEW_PATH,
-PATH_COLOR_ARGB, 0xFF, 0xFF, 0xFF, 0xFF,
-STROKE, 2.45f,
-MOVE_TO, 10.25f, 10.25f,
-R_LINE_TO, 11.5f, 11.5f,
-MOVE_TO, 10.25f, 21.75f,
-R_LINE_TO, 11.5f, -11.5f
-
-// The close "X" for a tab when hovered/pressed, optimized for 1x scale factor
-// devices.
-CANVAS_DIMENSIONS, 16,
-CIRCLE, 8, 8, 7.05f,
-NEW_PATH,
-PATH_COLOR_ARGB, 0xFF, 0xFF, 0xFF, 0xFF,
-STROKE, 1.415f,
-MOVE_TO, 4.75f, 4.75f,
-R_LINE_TO, 6.5f, 6.5f,
-MOVE_TO, 4.75f, 11.25f,
-R_LINE_TO, 6.5f, -6.5f

chrome/browser/themes/theme_properties.cc

@@ -130,24 +130,6 @@ const SkColor kDefaultColorToolbarStrokeThemeInactive =
     SkColorSetARGB(0x66, 0x4C, 0x4C, 0x4C);
 #endif  // OS_MACOSX
 
-// ----------------------------------------------------------------------------
-// Touch optimized UI color palette
-
-constexpr SkColor kDefaultTouchUiColorToolbar = SkColorSetRGB(0xFD, 0xFE, 0xFF);
-constexpr SkColor kDefaultTouchUiColorActiveFrame =
-    SkColorSetRGB(0xD0, 0xD2, 0xD6);
-constexpr SkColor kDefaultTouchUiColorInactiveFrame =
-    SkColorSetRGB(0xE3, 0xE5, 0xE8);
-constexpr SkColor kDefaultTouchUiColorInactiveFrameIncognito =
-    SkColorSetRGB(0x32, 0x36, 0x39);
-
-constexpr SkColor kDefaultTouchUiColorTabBackgroundInactive =
-    SkColorSetRGB(0xED, 0xEF, 0xF2);
-constexpr SkColor kDefaultTouchUiColorTabBackgroundInactiveIncognito =
-    SkColorSetRGB(0x28, 0x2C, 0x2F);
-
-// ----------------------------------------------------------------------------
-
 // Strings used in alignment properties.
 constexpr char kAlignmentCenter[] = "center";
 constexpr char kAlignmentTop[] = "top";
@@ -170,13 +152,11 @@ base::Optional<SkColor> MaybeGetDefaultColorForNewerMaterialUi(int id,
 
   switch (id) {
     case ThemeProperties::COLOR_FRAME:
-      return incognito ? gfx::kGoogleGrey900 : kDefaultTouchUiColorActiveFrame;
     case ThemeProperties::COLOR_FRAME_INACTIVE:
-      return incognito ? kDefaultTouchUiColorInactiveFrameIncognito
-                       : kDefaultTouchUiColorInactiveFrame;
+    case ThemeProperties::COLOR_BACKGROUND_TAB:
+      return incognito ? gfx::kGoogleGrey900 : gfx::kGoogleGrey200;
     case ThemeProperties::COLOR_TOOLBAR:
-      return incognito ? kDefaultTouchUiColorInactiveFrameIncognito
-                       : kDefaultTouchUiColorToolbar;
+      return incognito ? SkColorSetRGB(0x32, 0x36, 0x39) : SK_ColorWHITE;
 
     case ThemeProperties::COLOR_TAB_TEXT:
     case ThemeProperties::COLOR_BOOKMARK_TEXT:
@@ -189,13 +169,10 @@ base::Optional<SkColor> MaybeGetDefaultColorForNewerMaterialUi(int id,
     case ThemeProperties::COLOR_TAB_ALERT_AUDIO:
       return incognito ? gfx::kGoogleGrey400 : gfx::kGoogleGrey700;
 
-    case ThemeProperties::COLOR_BACKGROUND_TAB:
-      return incognito ? kDefaultTouchUiColorTabBackgroundInactiveIncognito
-                       : kDefaultTouchUiColorTabBackgroundInactive;
     case ThemeProperties::COLOR_TAB_CLOSE_BUTTON_BACKGROUND_HOVER:
-      return incognito ? gfx::kGoogleRedDark600 : gfx::kGoogleRed600;
+      return incognito ? gfx::kGoogleGrey700 : gfx::kGoogleGrey200;
     case ThemeProperties::COLOR_TAB_CLOSE_BUTTON_BACKGROUND_PRESSED:
-      return incognito ? gfx::kGoogleRedDark800 : gfx::kGoogleRed800;
+      return incognito ? gfx::kGoogleGrey600 : gfx::kGoogleGrey300;
     case ThemeProperties::COLOR_TAB_ALERT_RECORDING:
       return incognito ? gfx::kGoogleGrey400 : gfx::kGoogleRed600;
     case ThemeProperties::COLOR_TAB_ALERT_CAPTURING:

chrome/browser/themes/theme_service.cc

@@ -424,15 +424,15 @@ SkColor ThemeService::GetDefaultColor(int id, bool incognito) const {
   const int kNtpText = ThemeProperties::COLOR_NTP_TEXT;
   const int kLabelBackground =
       ThemeProperties::COLOR_SUPERVISED_USER_LABEL_BACKGROUND;
-  const bool is_touch =
-      ui::MaterialDesignController::IsTouchOptimizedUiEnabled();
+  const bool is_newer_material =
+      ui::MaterialDesignController::IsNewerMaterialUi();
   switch (id) {
     case ThemeProperties::COLOR_TOOLBAR_BUTTON_ICON:
       // Touch-optimized UI uses different colors than gfx::kChromeIconGrey.
       // They are two specific colors in normal and incognito modes which we
       // can't get one from the other by HSLShift().
       // TODO: This will break custom themes. https://crbug.com/820495.
-      if (is_touch)
+      if (is_newer_material)
         break;
 
       return color_utils::HSLShift(
@@ -442,7 +442,7 @@ SkColor ThemeService::GetDefaultColor(int id, bool incognito) const {
       // The active color is overridden in GtkUi.
       return SkColorSetA(
           GetColor(ThemeProperties::COLOR_TOOLBAR_BUTTON_ICON, incognito),
-          is_touch ? 0x6E : 0x33);
+          is_newer_material ? 0x6E : 0x33);
     case ThemeProperties::COLOR_LOCATION_BAR_BORDER:
       return SkColorSetA(SK_ColorBLACK, 0x4D);
     case ThemeProperties::COLOR_TOOLBAR_TOP_SEPARATOR:
@@ -470,7 +470,7 @@ SkColor ThemeService::GetDefaultColor(int id, bool incognito) const {
       // Touch optimized color design uses different tab background colors.
       // TODO(malaykeshav) - This will break custom themes on touch optimized
       // UI. Use tint shift instead. https://crbug.com/820495.
-      if (is_touch)
+      if (is_newer_material)
         break;
 
       // The tints here serve a different purpose than TINT_BACKGROUND_TAB.

chrome/browser/ui/cocoa/hover_close_button.mm

@@ -12,6 +12,7 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/color_palette.h"
+#include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/image/image_skia_util_mac.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/resources/grit/ui_resources.h"
@@ -153,28 +154,35 @@ const SkColor kDefaultIconColor = SkColorSetARGB(0xA0, 0x00, 0x00, 0x00);
 }
 
 - (NSImage*)imageForHoverState:(HoverState)hoverState {
-  const gfx::VectorIcon* vectorIcon = nullptr;
+  const gfx::VectorIcon* vectorHighlightIcon = nullptr;
   SkColor vectorIconColor = gfx::kPlaceholderColor;
 
   switch (hoverState) {
     case kHoverStateNone:
-      vectorIcon = &kTabCloseNormalIcon;
-      vectorIconColor = iconColor_;
       break;
     case kHoverStateMouseOver:
       // For mouse over, the icon color is the fill color of the circle.
-      vectorIcon = &kTabCloseHoveredPressedIcon;
+      vectorHighlightIcon = &kTabCloseButtonHighlightIcon;
       vectorIconColor = SkColorSetARGB(0xFF, 0xDB, 0x44, 0x37);
       break;
     case kHoverStateMouseDown:
       // For mouse pressed, the icon color is the fill color of the circle.
-      vectorIcon = &kTabCloseHoveredPressedIcon;
+      vectorHighlightIcon = &kTabCloseButtonHighlightIcon;
       vectorIconColor = SkColorSetARGB(0xFF, 0xA8, 0x35, 0x2A);
       break;
   }
 
-  return NSImageFromImageSkia(
-      gfx::CreateVectorIcon(*vectorIcon, kTabCloseButtonSize, vectorIconColor));
+  const gfx::ImageSkia& iconImage = gfx::CreateVectorIcon(
+      kTabCloseNormalIcon, kTabCloseButtonSize, iconColor_);
+
+  if (vectorHighlightIcon) {
+    const gfx::ImageSkia& highlight = gfx::CreateVectorIcon(
+        *vectorHighlightIcon, kTabCloseButtonSize, vectorIconColor);
+    return NSImageFromImageSkia(
+        gfx::ImageSkiaOperations::CreateSuperimposedImage(highlight,
+                                                          iconImage));
+  }
+  return NSImageFromImageSkia(iconImage);
 }
 
 - (void)setHoverState:(HoverState)state {

chrome/browser/ui/views/tabs/tab.cc

@@ -922,6 +922,7 @@ void Tab::OnMouseCaptureLost() {
 
 void Tab::OnMouseEntered(const ui::MouseEvent& event) {
   hover_controller_.Show(views::GlowHoverController::SUBTLE);
+  Layout();
 }
 
 void Tab::OnMouseMoved(const ui::MouseEvent& event) {
@@ -931,6 +932,7 @@ void Tab::OnMouseMoved(const ui::MouseEvent& event) {
 
 void Tab::OnMouseExited(const ui::MouseEvent& event) {
   hover_controller_.Hide();
+  Layout();
 }
 
 void Tab::GetAccessibleNodeData(ui::AXNodeData* node_data) {
@@ -1207,8 +1209,10 @@ void Tab::UpdateIconVisibility() {
   const bool has_alert_icon =
       (alert_indicator_button_ ? alert_indicator_button_->showing_alert_state()
                                : data().alert_state) != TabAlertState::NONE;
-  const bool force_hide_close_button =
+  const bool hide_inactive_close_button =
       controller_->ShouldHideCloseButtonForInactiveTabs();
+  const bool show_close_button_on_hover =
+      controller_->ShouldShowCloseButtonOnHover();
 
   if (is_pinned) {
     // When the tab is pinned, we can show one of the two icons. Alert icon
@@ -1252,7 +1256,8 @@ void Tab::UpdateIconVisibility() {
       // will be occupied by the title of this tab.
       int title_width =
           (!showing_icon_ + !showing_alert_indicator_) * favicon_width;
-      if (!force_hide_close_button &&
+      if ((!hide_inactive_close_button ||
+           (show_close_button_on_hover && IsMouseHovered())) &&
           (title_width + close_button_width + extra_padding <=
            available_width)) {
         showing_close_button_ = true;
@@ -1311,7 +1316,9 @@ void Tab::OnButtonColorMaybeChanged() {
     title_->SetEnabledColor(title_color);
     alert_indicator_button_->OnParentTabButtonColorChanged();
     if (!MD::IsTouchOptimizedUiEnabled())
-      close_button_->SetTabColor(button_color_);
+      close_button_->SetTabColor(button_color_,
+                                 color_utils::IsDark(theme_provider->GetColor(
+                                     ThemeProperties::COLOR_TOOLBAR)));
   }
   if (MD::IsTouchOptimizedUiEnabled())
     close_button_->ActiveStateChanged(this);

chrome/browser/ui/views/tabs/tab_close_button.cc

@@ -18,6 +18,7 @@
 #include "components/strings/grit/components_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/material_design/material_design_controller.h"
+#include "ui/gfx/color_palette.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/rect_based_targeting_utils.h"
@@ -26,17 +27,7 @@
 #include "ui/aura/env.h"
 #endif
 
-namespace {
-
-const gfx::VectorIcon& GetTouchIcon(views::Button::ButtonState state,
-                                    bool is_incognito) {
-  if (state == views::Button::STATE_NORMAL)
-    return kTabCloseButtonTouchIcon;
-  return is_incognito ? kTabCloseButtonTouchIncognitoHoveredPressedIcon
-                      : kTabCloseButtonTouchHoveredPressedIcon;
-}
-
-}  // namespace
+using MD = ui::MaterialDesignController;
 
 TabCloseButton::TabCloseButton(views::ButtonListener* listener,
                                MouseEventCallback mouse_event_callback)
@@ -44,19 +35,6 @@ TabCloseButton::TabCloseButton(views::ButtonListener* listener,
       mouse_event_callback_(std::move(mouse_event_callback)) {
   SetEventTargeter(std::make_unique<views::ViewTargeter>(this));
   SetAccessibleName(l10n_util::GetStringUTF16(IDS_ACCNAME_CLOSE));
-
-  if (!ui::MaterialDesignController::IsTouchOptimizedUiEnabled()) {
-    // The normal image is set by OnButtonColorMaybeChanged() because it depends
-    // on the current theme and active state.  The hovered and pressed images
-    // don't depend on the these, so we can set them here.
-    const gfx::ImageSkia& hovered = gfx::CreateVectorIcon(
-        kTabCloseHoveredPressedIcon, SkColorSetRGB(0xDB, 0x44, 0x37));
-    const gfx::ImageSkia& pressed = gfx::CreateVectorIcon(
-        kTabCloseHoveredPressedIcon, SkColorSetRGB(0xA8, 0x35, 0x2A));
-    SetImage(views::Button::STATE_HOVERED, &hovered);
-    SetImage(views::Button::STATE_PRESSED, &pressed);
-  }
-
   // Disable animation so that the red danger sign shows up immediately
   // to help avoid mis-clicks.
   SetAnimationDuration(0);
@@ -64,27 +42,22 @@ TabCloseButton::TabCloseButton(views::ButtonListener* listener,
 
 TabCloseButton::~TabCloseButton() {}
 
-void TabCloseButton::SetTabColor(SkColor color) {
-  const gfx::ImageSkia& close_button_normal_image =
-      gfx::CreateVectorIcon(kTabCloseNormalIcon, color);
-  SetImage(views::Button::STATE_NORMAL, &close_button_normal_image);
+void TabCloseButton::SetTabColor(SkColor color, bool tab_color_is_dark) {
+  SkColor hover_color = SkColorSetRGB(0xDB, 0x44, 0x37);
+  SkColor pressed_color = SkColorSetRGB(0xA8, 0x35, 0x2A);
+  if (MD::GetMode() == MD::MATERIAL_REFRESH) {
+    hover_color = tab_color_is_dark ? gfx::kGoogleGrey700 : gfx::kGoogleGrey200;
+    pressed_color =
+        tab_color_is_dark ? gfx::kGoogleGrey600 : gfx::kGoogleGrey300;
+  }
+  GenerateImages(false, color, hover_color, pressed_color);
 }
 
 void TabCloseButton::ActiveStateChanged(const Tab* parent_tab) {
-  constexpr views::Button::ButtonState states[] = {
-      views::Button::STATE_NORMAL, views::Button::STATE_HOVERED,
-      views::Button::STATE_PRESSED};
-  const bool is_incognito = parent_tab->controller()->IsIncognito();
-
-  // The tab close button icon has 8 combination of colors depending on what
-  // state the button is in, and whether this is an incognito browsing session.
-  // The 8 combination is achieved by creating 3 vector .icon files and setting
-  // the colors for them here.
-  for (const auto& state : states) {
-    SetImage(state,
-             gfx::CreateVectorIcon(GetTouchIcon(state, is_incognito),
-                                   parent_tab->GetCloseTabButtonColor(state)));
-  }
+  GenerateImages(
+      true, parent_tab->GetCloseTabButtonColor(views::Button::STATE_NORMAL),
+      parent_tab->GetCloseTabButtonColor(views::Button::STATE_HOVERED),
+      parent_tab->GetCloseTabButtonColor(views::Button::STATE_PRESSED));
 }
 
 views::View* TabCloseButton::GetTooltipHandlerForPoint(
@@ -159,3 +132,29 @@ bool TabCloseButton::GetHitTestMask(gfx::Path* mask) const {
   mask->addRect(gfx::RectToSkRect(GetMirroredRect(GetContentsBounds())));
   return true;
 }
+
+void TabCloseButton::GenerateImages(bool is_touch,
+                                    SkColor normal_color,
+                                    SkColor hover_color,
+                                    SkColor pressed_color) {
+  const gfx::VectorIcon& button_icon =
+      is_touch ? kTabCloseButtonTouchIcon : kTabCloseNormalIcon;
+  const gfx::VectorIcon& highlight = is_touch
+                                         ? kTabCloseButtonTouchHighlightIcon
+                                         : kTabCloseButtonHighlightIcon;
+  const gfx::ImageSkia& normal =
+      gfx::CreateVectorIcon(button_icon, normal_color);
+  const gfx::ImageSkia& hover_highlight =
+      gfx::CreateVectorIcon(highlight, hover_color);
+  const gfx::ImageSkia& pressed_highlight =
+      gfx::CreateVectorIcon(highlight, pressed_color);
+  const gfx::ImageSkia& hover =
+      gfx::ImageSkiaOperations::CreateSuperimposedImage(hover_highlight,
+                                                        normal);
+  const gfx::ImageSkia& pressed =
+      gfx::ImageSkiaOperations::CreateSuperimposedImage(pressed_highlight,
+                                                        normal);
+  SetImage(views::Button::STATE_NORMAL, normal);
+  SetImage(views::Button::STATE_HOVERED, hover);
+  SetImage(views::Button::STATE_PRESSED, pressed);
+}

chrome/browser/ui/views/tabs/tab_close_button.h

@@ -33,7 +33,7 @@ class TabCloseButton : public views::ImageButton,
   // color to use. It must also be called when the background color of the tab
   // changes (this class does not track tab activation state), and when the
   // theme changes.
-  void SetTabColor(SkColor color);
+  void SetTabColor(SkColor color, bool tab_color_is_dark);
 
   // This is called whenever the |parent_tab| changes its active state.
   void ActiveStateChanged(const Tab* parent_tab);
@@ -51,6 +51,11 @@ class TabCloseButton : public views::ImageButton,
   views::View* TargetForRect(views::View* root, const gfx::Rect& rect) override;
   bool GetHitTestMask(gfx::Path* mask) const override;
 
+  void GenerateImages(bool is_touch,
+                      SkColor normal_color,
+                      SkColor hover_color,
+                      SkColor pressed_color);
+
   MouseEventCallback mouse_event_callback_;
 
   DISALLOW_COPY_AND_ASSIGN(TabCloseButton);

chrome/browser/ui/views/tabs/tab_controller.h

@@ -38,6 +38,11 @@ class TabController {
   // to be hidden.
   virtual bool ShouldHideCloseButtonForInactiveTabs() = 0;
 
+  // Returns true if we should show the close button an inactive tab on mouse
+  // hover. This is predicated on ShouldHideCloseButtonForInactiveTabs()
+  // returning true.
+  virtual bool ShouldShowCloseButtonOnHover() = 0;
+
   // Returns true if ShouldPaintTab() could return a non-empty clip path.
   virtual bool MaySetClip() = 0;
 

chrome/browser/ui/views/tabs/tab_strip.cc

@@ -231,7 +231,8 @@ const TabSizeInfo& GetTabSizeInfo() {
   g_tab_size_info->min_inactive_width = Tab::GetMinimumInactiveSize().width();
   g_tab_size_info->max_size = Tab::GetStandardSize();
   g_tab_size_info->tab_overlap = Tab::GetOverlap();
-  g_tab_size_info->pinned_to_normal_offset = kPinnedToNonPinnedOffset;
+  g_tab_size_info->pinned_to_normal_offset =
+      TabStrip::GetPinnedToNonPinnedOffset();
   return *g_tab_size_info;
 }
 
@@ -318,6 +319,11 @@ bool TabStrip::ShouldDrawStrokes() {
   return MD::GetMode() != MD::MATERIAL_REFRESH;
 }
 
+// static
+int TabStrip::GetPinnedToNonPinnedOffset() {
+  return MD::GetMode() == MD::MATERIAL_REFRESH ? 0 : kPinnedToNonPinnedOffset;
+}
+
 void TabStrip::AddObserver(TabStripObserver* observer) {
   observers_.AddObserver(observer);
 }
@@ -651,7 +657,7 @@ void TabStrip::PrepareForCloseAt(int model_index, CloseTabSource source) {
                                 tab_being_removed->width() + Tab::GetOverlap();
     if (model_index == 0 && tab_being_removed->data().pinned &&
         !tab_at(1)->data().pinned) {
-      available_width_for_tabs_ -= kPinnedToNonPinnedOffset;
+      available_width_for_tabs_ -= GetPinnedToNonPinnedOffset();
     }
   }
 
@@ -804,7 +810,11 @@ bool TabStrip::SupportsMultipleSelection() {
 }
 
 bool TabStrip::ShouldHideCloseButtonForInactiveTabs() {
-  return touch_layout_ != nullptr;
+  return touch_layout_ != nullptr || MD::GetMode() == MD::MATERIAL_REFRESH;
+}
+
+bool TabStrip::ShouldShowCloseButtonOnHover() {
+  return MD::GetMode() == MD::MATERIAL_REFRESH;
 }
 
 bool TabStrip::MaySetClip() {
@@ -1231,7 +1241,7 @@ gfx::Size TabStrip::CalculatePreferredSize() const {
     const int min_selected_width = Tab::GetMinimumActiveSize().width();
     const int min_unselected_width = Tab::GetMinimumInactiveSize().width();
     if (remaining_tab_count > 0) {
-      needed_tab_width += kPinnedToNonPinnedOffset + min_selected_width +
+      needed_tab_width += GetPinnedToNonPinnedOffset() + min_selected_width +
                           ((remaining_tab_count - 1) * min_unselected_width);
     }
 
@@ -1661,7 +1671,7 @@ void TabStrip::CalculateBoundsForDraggedTabs(const Tabs& tabs,
   for (size_t i = 0; i < tabs.size(); ++i) {
     Tab* tab = tabs[i];
     if (i > 0 && tab->data().pinned != tabs[i - 1]->data().pinned)
-      x += kPinnedToNonPinnedOffset;
+      x += GetPinnedToNonPinnedOffset();
     gfx::Rect new_bounds = tab->bounds();
     new_bounds.set_origin(gfx::Point(x, 0));
     bounds->push_back(new_bounds);
@@ -1700,7 +1710,7 @@ int TabStrip::GetSizeNeededForTabs(const Tabs& tabs) {
     Tab* tab = tabs[i];
     width += tab->width();
     if (i > 0 && tab->data().pinned != tabs[i - 1]->data().pinned)
-      width += kPinnedToNonPinnedOffset;
+      width += GetPinnedToNonPinnedOffset();
   }
   if (!tabs.empty())
     width -= Tab::GetOverlap() * (tabs.size() - 1);

chrome/browser/ui/views/tabs/tab_strip.h

@@ -68,6 +68,9 @@ class TabStrip : public views::View,
   // Returns whether or not strokes should be drawn around and under the tabs.
   static bool ShouldDrawStrokes();
 
+  // Returns the gap size between the pinned tabs and the non-pinned tabs.
+  static int GetPinnedToNonPinnedOffset();
+
   // Add and remove observers to changes within this TabStrip.
   void AddObserver(TabStripObserver* observer);
   void RemoveObserver(TabStripObserver* observer);
@@ -225,6 +228,7 @@ class TabStrip : public views::View,
   const ui::ListSelectionModel& GetSelectionModel() const override;
   bool SupportsMultipleSelection() override;
   bool ShouldHideCloseButtonForInactiveTabs() override;
+  bool ShouldShowCloseButtonOnHover() override;
   bool MaySetClip() override;
   void SelectTab(Tab* tab) override;
   void ExtendSelectionTo(Tab* tab) override;

chrome/browser/ui/views/tabs/tab_unittest.cc

@@ -41,6 +41,7 @@ class FakeTabController : public TabController {
   bool ShouldHideCloseButtonForInactiveTabs() override {
     return false;
   }
+  bool ShouldShowCloseButtonOnHover() override { return false; }
   bool MaySetClip() override { return false; }
   void SelectTab(Tab* tab) override {}
   void ExtendSelectionTo(Tab* tab) override {}

ui/gfx/color_palette.h

@@ -14,7 +14,7 @@ namespace gfx {
 constexpr SkColor kPlaceholderColor = SK_ColorRED;
 
 // The number refers to the shade of darkness. Each color in the MD
-// palette ranges from 100-900.
+// palette ranges from 50-900.
 constexpr SkColor kGoogleBlue300 = SkColorSetRGB(0x8A, 0xB4, 0xF8);
 constexpr SkColor kGoogleBlue500 = SkColorSetRGB(0x42, 0x85, 0xF4);
 constexpr SkColor kGoogleBlue600 = SkColorSetRGB(0x1A, 0x73, 0xE8);
@@ -34,9 +34,13 @@ constexpr SkColor kGoogleGreenDark600 = SkColorSetRGB(0x28, 0x99, 0x4F);
 constexpr SkColor kGoogleYellow300 = SkColorSetRGB(0xFD, 0xD6, 0x63);
 constexpr SkColor kGoogleYellow700 = SkColorSetRGB(0xF2, 0x99, 0x00);
 constexpr SkColor kGoogleYellow900 = SkColorSetRGB(0xE3, 0x74, 0x00);
+constexpr SkColor kGoogleGrey50 = SkColorSetRGB(0xF8, 0xF9, 0xFA);
 constexpr SkColor kGoogleGrey100 = SkColorSetRGB(0xF1, 0xF3, 0xF4);
 constexpr SkColor kGoogleGrey200 = SkColorSetRGB(0xE8, 0xEA, 0xED);
+constexpr SkColor kGoogleGrey300 = SkColorSetRGB(0xDA, 0xDC, 0xE0);
 constexpr SkColor kGoogleGrey400 = SkColorSetRGB(0xBD, 0xC1, 0xC6);
+constexpr SkColor kGoogleGrey500 = SkColorSetRGB(0x9A, 0xA0, 0xA6);
+constexpr SkColor kGoogleGrey600 = SkColorSetRGB(0x80, 0x86, 0x8B);
 constexpr SkColor kGoogleGrey700 = SkColorSetRGB(0x5F, 0x63, 0x68);
 constexpr SkColor kGoogleGrey800 = SkColorSetRGB(0x3C, 0x40, 0x43);
 constexpr SkColor kGoogleGrey900 = SkColorSetRGB(0x20, 0x21, 0x24);