Update palette tray and Ime tray bubbles UI

Ux specs are attached in the bug.

Bug: 1106054

Change-Id: Ie8982f5b07a6330e16d76da19b3e36f48fc9731a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2300633
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#791065}

ash/resources/vector_icons/palette_mode_laser_pointer.icon

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 CANVAS_DIMENSIONS, 40,
-PATH_COLOR_ARGB, 0x4D, 0x00, 0x00, 0x00,
+PATH_COLOR_ARGB, 0x4D, 0xFF, 0xFF, 0xFF,
 MOVE_TO, 30.06f, 15,
 R_H_LINE_TO, -9.59f,
 R_LINE_TO, 9.6f, -9.27f,
@@ -41,7 +41,7 @@ CUBIC_TO, 17.34f, 35.69f, 18, 34.21f, 18, 32.57f,
 CLOSE
 
 CANVAS_DIMENSIONS, 20,
-PATH_COLOR_ARGB, 0x4D, 0x00, 0x00, 0x00,
+PATH_COLOR_ARGB, 0x4D, 0xFF, 0xFF, 0xFF,
 MOVE_TO, 14.96f, 8.04f,
 R_H_LINE_TO, -4.56f,
 R_LINE_TO, 4.56f, -4.8f,

ash/system/ime_menu/ime_list_view.cc

@@ -102,8 +102,8 @@ class ImeListItemView : public ActionableView {
     if (selected) {
       // The checked button indicates the IME is selected.
       views::ImageView* checked_image = TrayPopupUtils::CreateMainImageView();
-      checked_image->SetImage(
-          gfx::CreateVectorIcon(kCheckCircleIcon, kMenuIconSize, button_color));
+      checked_image->SetImage(gfx::CreateVectorIcon(
+          kHollowCheckCircleIcon, kMenuIconSize, button_color));
       tri_view->AddView(TriView::Container::END, checked_image);
     }
     SetAccessibleName(label_view->GetText());
@@ -166,7 +166,7 @@ class KeyboardStatusRow : public views::View {
         kImeMenuOnScreenKeyboardIcon, kMenuIconSize,
         AshColorProvider::Get()->GetContentLayerColor(
             AshColorProvider::ContentLayerType::kIconColorPrimary,
-            AshColorProvider::AshColorMode::kLight)));
+            AshColorProvider::AshColorMode::kDark)));
     tri_view->AddView(TriView::Container::START, keyboard_image);
 
     // The on-screen keyboard label ('On-screen keyboard').
@@ -270,9 +270,9 @@ void ImeListView::AppendImeListAndProperties(
     const bool selected = current_ime_id == list[i].id;
     views::View* ime_view = new ImeListItemView(
         this, list[i].short_name, list[i].name, selected,
-        AshColorProvider::Get()->DeprecatedGetContentLayerColor(
-            AshColorProvider::ContentLayerType::kIconColorProminent,
-            kProminentIconButtonColor),
+        AshColorProvider::Get()->GetContentLayerColor(
+            AshColorProvider::ContentLayerType::kIconColorPositive,
+            AshColorProvider::AshColorMode::kDark),
         use_unified_theme_);
     scroll_content()->AddChildView(ime_view);
     ime_map_[ime_view] = list[i].id;
@@ -288,7 +288,7 @@ void ImeListView::AppendImeListAndProperties(
 
       const SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
           AshColorProvider::ContentLayerType::kIconColorPrimary,
-          AshColorProvider::AshColorMode::kLight);
+          AshColorProvider::AshColorMode::kDark);
       // Adds the property items.
       for (size_t i = 0; i < property_list.size(); i++) {
         ImeListItemView* property_view = new ImeListItemView(

ash/system/ime_menu/ime_menu_tray.cc

@@ -23,6 +23,7 @@
 #include "ash/system/tray/detailed_view_delegate.h"
 #include "ash/system/tray/system_menu_button.h"
 #include "ash/system/tray/system_tray_notifier.h"
+#include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_container.h"
 #include "ash/system/tray/tray_popup_item_style.h"
 #include "ash/system/tray/tray_popup_utils.h"
@@ -131,7 +132,7 @@ class ImeTitleView : public views::View, public views::ButtonListener {
             0, 0, kMenuSeparatorWidth, 0,
             AshColorProvider::Get()->GetContentLayerColor(
                 AshColorProvider::ContentLayerType::kSeparatorColor,
-                AshColorProvider::AshColorMode::kLight)),
+                AshColorProvider::AshColorMode::kDark)),
         gfx::Insets(kMenuSeparatorVerticalPadding - kMenuSeparatorWidth, 0)));
     auto box_layout = std::make_unique<views::BoxLayout>(
         views::BoxLayout::Orientation::kHorizontal);
@@ -142,8 +143,8 @@ class ImeTitleView : public views::View, public views::ButtonListener {
     title_label->SetBorder(
         views::CreateEmptyBorder(0, kMenuEdgeEffectivePadding, 1, 0));
     title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-    TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::TITLE,
-                             false /* use_unified_theme */);
+    TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::SMALL_TITLE,
+                             true /* use_unified_theme */);
     style.SetupLabel(title_label);
 
     AddChildView(title_label);
@@ -237,7 +238,7 @@ class ImeButtonsView : public views::View, public views::ButtonListener {
             kMenuSeparatorWidth, 0, 0, 0,
             AshColorProvider::Get()->GetContentLayerColor(
                 AshColorProvider::ContentLayerType::kSeparatorColor,
-                AshColorProvider::AshColorMode::kLight)),
+                AshColorProvider::AshColorMode::kDark)),
         gfx::Insets(kMenuSeparatorVerticalPadding - kMenuSeparatorWidth,
                     kMenuExtraMarginFromLeftEdge)));
 
@@ -304,8 +305,8 @@ class ImeMenuListView : public ImeListView {
     DISALLOW_COPY_AND_ASSIGN(Delegate);
   };
 
-  ImeMenuListView(std::unique_ptr<Delegate> delegate)
-      : ImeListView(delegate.get(), false /* use_unified_theme */) {
+  explicit ImeMenuListView(std::unique_ptr<Delegate> delegate)
+      : ImeListView(delegate.get(), true /* use_unified_theme */) {
     set_should_focus_ime_after_selection_with_keyboard(true);
     delegate_ = std::move(delegate);
   }
@@ -364,24 +365,37 @@ void ImeMenuTray::ShowImeMenuBubbleInternal(bool show_by_click) {
   init_params.shelf_alignment = shelf()->alignment();
   init_params.preferred_width = kTrayMenuWidth;
   init_params.close_on_deactivate = true;
+  init_params.has_shadow = false;
+  init_params.translucent = true;
+  init_params.corner_radius = kTrayItemCornerRadius;
   init_params.show_by_click = show_by_click;
 
+  auto setup_layered_view = [](views::View* view) {
+    view->SetPaintToLayer();
+    view->layer()->SetFillsBoundsOpaquely(false);
+  };
+
   TrayBubbleView* bubble_view = new TrayBubbleView(init_params);
   bubble_view->set_anchor_view_insets(GetBubbleAnchorInsets());
+  bubble_view->set_margins(GetSecondaryBubbleInsets());
 
   // Add a title item with a separator on the top of the IME menu.
   bool show_bottom_buttons = ShouldShowBottomButtons();
-  bubble_view->AddChildView(new ImeTitleView(!show_bottom_buttons));
+  setup_layered_view(bubble_view->AddChildView(
+      std::make_unique<ImeTitleView>(!show_bottom_buttons)));
 
   // Adds IME list to the bubble.
-  ime_list_view_ = new ImeMenuListView();
+  ime_list_view_ =
+      bubble_view->AddChildView(std::make_unique<ImeMenuListView>());
   ime_list_view_->Init(ShouldShowKeyboardToggle(),
                        ImeListView::SHOW_SINGLE_IME);
-  bubble_view->AddChildView(ime_list_view_);
+  setup_layered_view(ime_list_view_);
 
   if (show_bottom_buttons) {
-    bubble_view->AddChildView(new ImeButtonsView(
-        this, is_emoji_enabled_, is_handwriting_enabled_, is_voice_enabled_));
+    setup_layered_view(
+        bubble_view->AddChildView(std::make_unique<ImeButtonsView>(
+            this, is_emoji_enabled_, is_handwriting_enabled_,
+            is_voice_enabled_)));
   }
 
   bubble_ = std::make_unique<TrayBubbleWrapper>(this, bubble_view,

ash/system/palette/common_palette_tool.cc

@@ -5,6 +5,7 @@
 #include "ash/system/palette/common_palette_tool.h"
 
 #include "ash/resources/vector_icons/vector_icons.h"
+#include "ash/style/ash_color_provider.h"
 #include "ash/system/palette/palette_ids.h"
 #include "ash/system/palette/palette_tool_manager.h"
 #include "ash/system/tray/hover_highlight_view.h"
@@ -73,9 +74,12 @@ void CommonPaletteTool::OnViewClicked(views::View* sender) {
 }
 
 views::View* CommonPaletteTool::CreateDefaultView(const base::string16& name) {
+  SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kSystemMenuIconColor,
+      AshColorProvider::AshColorMode::kDark);
   gfx::ImageSkia icon =
-      CreateVectorIcon(GetPaletteIcon(), kMenuIconSize, gfx::kChromeIconGrey);
-  highlight_view_ = new HoverHighlightView(this, false /* use_unified_theme */);
+      CreateVectorIcon(GetPaletteIcon(), kMenuIconSize, icon_color);
+  highlight_view_ = new HoverHighlightView(this, true /* use_unified_theme */);
   highlight_view_->AddIconAndLabel(icon, name);
   return highlight_view_;
 }

ash/system/palette/palette_tray.cc

@@ -26,6 +26,7 @@
 #include "ash/system/tray/tray_container.h"
 #include "ash/system/tray/tray_popup_item_style.h"
 #include "ash/system/tray/tray_popup_utils.h"
+#include "ash/system/tray/tray_utils.h"
 #include "base/bind.h"
 #include "base/metrics/histogram_macros.h"
 #include "components/pref_registry/pref_registry_syncable.h"
@@ -59,13 +60,10 @@ constexpr int kTrayIconCrossAxisInset = 0;
 // Width of the palette itself (dp).
 constexpr int kPaletteWidth = 332;
 
-// Padding at the top/bottom of the palette (dp).
-constexpr int kPalettePaddingOnTop = 4;
-constexpr int kPalettePaddingOnBottom = 2;
-
 // Margins between the title view and the edges around it (dp).
-constexpr int kPaddingBetweenTitleAndLeftEdge = 12;
+constexpr int kPaddingBetweenTitleAndLeftEdge = 16;
 constexpr int kPaddingBetweenTitleAndSeparator = 3;
+constexpr int kPaddingBetweenBottomAndLastTrayItem = 8;
 
 // Returns true if the |palette_tray| is on an internal display or on every
 // display if requested from the command line.
@@ -100,8 +98,8 @@ class TitleView : public views::View, public views::ButtonListener {
         new views::Label(l10n_util::GetStringUTF16(IDS_ASH_STYLUS_TOOLS_TITLE));
     title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
     AddChildView(title_label);
-    TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::TITLE,
-                             false /* use_unified_theme */);
+    TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::SMALL_TITLE,
+                             true /* use_unified_theme */);
     style.SetupLabel(title_label);
     layout_ptr->SetFlexForView(title_label, 1);
     help_button_ = new SystemMenuButton(this, kSystemMenuHelpIcon,
@@ -478,6 +476,9 @@ void PaletteTray::ShowBubble(bool show_by_click) {
   init_params.preferred_width = kPaletteWidth;
   init_params.close_on_deactivate = true;
   init_params.show_by_click = show_by_click;
+  init_params.translucent = true;
+  init_params.has_shadow = false;
+  init_params.corner_radius = kTrayItemCornerRadius;
 
   // TODO(tdanderson): Refactor into common row layout code.
   // TODO(tdanderson|jdufault): Add material design ripple effects to the menu
@@ -486,30 +487,40 @@ void PaletteTray::ShowBubble(bool show_by_click) {
   // Create and customize bubble view.
   TrayBubbleView* bubble_view = new TrayBubbleView(init_params);
   bubble_view->set_anchor_view_insets(GetBubbleAnchorInsets());
-  bubble_view->set_margins(
-      gfx::Insets(kPalettePaddingOnTop, 0, kPalettePaddingOnBottom, 0));
+  bubble_view->set_margins(GetSecondaryBubbleInsets());
+  bubble_view->SetBorder(views::CreateEmptyBorder(
+      gfx::Insets(0, 0, kPaddingBetweenBottomAndLastTrayItem, 0)));
+
+  auto setup_layered_view = [](views::View* view) {
+    view->SetPaintToLayer();
+    view->layer()->SetFillsBoundsOpaquely(false);
+  };
 
   // Add title.
-  auto* title_view = new TitleView(this);
+  auto* title_view =
+      bubble_view->AddChildView(std::make_unique<TitleView>(this));
+  setup_layered_view(title_view);
   title_view->SetBorder(views::CreateEmptyBorder(
       gfx::Insets(0, kPaddingBetweenTitleAndLeftEdge, 0, 0)));
-  bubble_view->AddChildView(title_view);
 
   // Add horizontal separator between the title and tools.
-  auto* separator = new views::Separator();
+  auto* separator =
+      bubble_view->AddChildView(std::make_unique<views::Separator>());
+  setup_layered_view(separator);
   separator->SetColor(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kSeparatorColor,
-      AshColorProvider::AshColorMode::kLight));
+      AshColorProvider::AshColorMode::kDark));
   separator->SetBorder(views::CreateEmptyBorder(gfx::Insets(
       kPaddingBetweenTitleAndSeparator, 0, kMenuSeparatorVerticalPadding, 0)));
-  bubble_view->AddChildView(separator);
 
   // Add palette tools.
   // TODO(tdanderson|jdufault): Use SystemMenuButton to get the material design
   // ripples.
   std::vector<PaletteToolView> views = palette_tool_manager_->CreateViews();
-  for (const PaletteToolView& view : views)
+  for (const PaletteToolView& view : views) {
     bubble_view->AddChildView(view.view);
+    setup_layered_view(view.view);
+  }
 
   // Show the bubble.
   bubble_ = std::make_unique<TrayBubbleWrapper>(this, bubble_view,

ash/system/palette/tools/metalayer_mode.cc

@@ -220,7 +220,7 @@ void MetalayerMode::UpdateView() {
   highlight_view_->SetEnabled(selectable());
 
   TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::DETAILED_VIEW_LABEL,
-                           false /* use_unified_theme */);
+                           true /* use_unified_theme */);
   style.set_color_style(highlight_view_->GetEnabled()
                             ? TrayPopupItemStyle::ColorStyle::ACTIVE
                             : TrayPopupItemStyle::ColorStyle::DISABLED);

ash/system/tray/system_menu_button.cc

@@ -53,7 +53,7 @@ SystemMenuButton::SystemMenuButton(views::ButtonListener* listener,
 void SystemMenuButton::SetVectorIcon(const gfx::VectorIcon& icon) {
   const SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kIconColorPrimary,
-      AshColorProvider::AshColorMode::kLight);
+      AshColorProvider::AshColorMode::kDark);
   SetImage(views::Button::STATE_NORMAL,
            gfx::CreateVectorIcon(icon, icon_color));
   SetImage(views::Button::STATE_DISABLED,

ash/system/tray/tray_popup_item_style.cc

@@ -95,6 +95,10 @@ void TrayPopupItemStyle::SetupLabel(views::Label* label) const {
                                                gfx::Font::NORMAL,
                                                gfx::Font::Weight::MEDIUM));
       break;
+    case FontStyle::SMALL_TITLE:
+      label->SetFontList(base_font_list.Derive(1, gfx::Font::NORMAL,
+                                               gfx::Font::Weight::MEDIUM));
+      break;
     case FontStyle::SUB_HEADER:
       label->SetFontList(base_font_list.Derive(4, gfx::Font::NORMAL,
                                                gfx::Font::Weight::MEDIUM));

ash/system/tray/tray_popup_item_style.h

@@ -36,6 +36,8 @@ class TrayPopupItemStyle {
   enum class FontStyle {
     // Topmost header rows for default view and detailed view.
     TITLE,
+    // Topmost header rows for secondary tray bubbles.
+    SMALL_TITLE,
     // Text in sub-section header rows in detailed views.
     SUB_HEADER,
     // Main text used by detailed view rows.

ash/system/tray/tray_popup_utils.cc

@@ -291,7 +291,7 @@ views::Separator* TrayPopupUtils::CreateVerticalSeparator() {
   separator->SetPreferredHeight(24);
   separator->SetColor(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kSeparatorColor,
-      AshColorProvider::AshColorMode::kLight));
+      AshColorProvider::AshColorMode::kDark));
   return separator;
 }
 

ash/system/tray/tray_utils.cc

@@ -5,6 +5,7 @@
 #include "ash/system/tray/tray_utils.h"
 
 #include "ash/public/cpp/shelf_config.h"
+#include "ash/public/cpp/shelf_types.h"
 #include "ash/shelf/shelf.h"
 #include "ash/shell.h"
 #include "ash/style/ash_color_provider.h"
@@ -78,4 +79,23 @@ gfx::Insets GetTrayBubbleInsets() {
   return insets;
 }
 
+gfx::Insets GetSecondaryBubbleInsets() {
+  Shelf* shelf = Shelf::ForWindow(Shell::GetPrimaryRootWindow());
+  gfx::Insets insets;
+
+  switch (shelf->alignment()) {
+    case ShelfAlignment::kBottom:
+    case ShelfAlignment::kBottomLocked:
+      insets.set_bottom(kUnifiedMenuPadding);
+      break;
+    case ShelfAlignment::kLeft:
+      insets.set_left(kUnifiedMenuPadding);
+      break;
+    case ShelfAlignment::kRight:
+      insets.set_right(kUnifiedMenuPadding);
+      break;
+  }
+  return insets;
+}
+
 }  // namespace ash

ash/system/tray/tray_utils.h

@@ -21,9 +21,13 @@ void SetupLabelForTray(views::Label* label);
 // Gets the current tray icon color for the given session state.
 SkColor TrayIconColor(session_manager::SessionState session_state);
 
-// Returns the insets above the shelf for positioning the tray bubble.
+// Returns the insets above the shelf for positioning the quick settings bubble.
 gfx::Insets GetTrayBubbleInsets();
 
+// Returns the separation above the shelf for positioning secondary tray
+// bubbles. (Palette Tray, IME Tray).
+gfx::Insets GetSecondaryBubbleInsets();
+
 }  // namespace ash
 
 #endif  // ASH_SYSTEM_TRAY_TRAY_UTILS_H_