More closely align palette to spec.

BUG=638975

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

ash/common/system/cast/tray_cast.cc

@@ -509,7 +509,9 @@ views::View* CastDetailedView::AddToReceiverList(
           .GetImageNamed(IDR_AURA_UBER_TRAY_CAST_DEVICE_ICON)
           .ToImageSkia();
   const base::string16& name = receiverActivity.receiver.name;
-  container->AddIndentedIconAndLabel(*image, name, false);
+  container->AddIconAndLabelCustomSize(
+      *image, name, false, kTrayPopupDetailsIconWidth,
+      kTrayPopupPaddingHorizontal, kTrayPopupPaddingBetweenItems);
 
   scroll_content()->AddChildView(container);
   return container;

ash/common/system/chromeos/palette/common_palette_tool.cc

@@ -15,8 +15,24 @@
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/paint_vector_icon.h"
+#include "ui/views/border.h"
 
 namespace ash {
+namespace {
+
+// Size of the icons in DP.
+const int kIconSize = 20;
+
+// Distance between the icon and the check from the egdes in DP.
+const int kMarginFromEdges = 14;
+
+// Extra distance between the icon and the left edge in DP.
+const int kExtraMarginFromLeftEdge = 4;
+
+// Distance between the icon and the name of the tool in DP.
+const int kMarginBetweenIconAndText = 18;
+
+}  // namespace
 
 CommonPaletteTool::CommonPaletteTool(Delegate* delegate)
     : PaletteTool(delegate) {}
@@ -59,15 +75,18 @@ void CommonPaletteTool::OnViewClicked(views::View* sender) {
 }
 
 views::View* CommonPaletteTool::CreateDefaultView(const base::string16& name) {
-  highlight_view_ = new HoverHighlightView(this);
+  gfx::ImageSkia icon =
+      CreateVectorIcon(GetPaletteIconId(), kIconSize, gfx::kChromeIconGrey);
+  gfx::ImageSkia check = CreateVectorIcon(gfx::VectorIconId::CHECK_CIRCLE,
+                                          kIconSize, gfx::kGoogleGreen700);
 
-  // TODO(jdufault): Use real colors (SK_ColorBLACK?)
-  gfx::ImageSkia image = CreateVectorIcon(GetPaletteIconId(), SK_ColorBLACK);
-  gfx::ImageSkia checkbox =
-      CreateVectorIcon(gfx::VectorIconId::CHECK_CIRCLE, gfx::kGoogleGreen700);
-
-  highlight_view_->AddIndentedIconAndLabel(image, name, false);
-  highlight_view_->AddRightIcon(checkbox);
+  highlight_view_ = new HoverHighlightView(this);
+  highlight_view_->SetBorder(
+      views::Border::CreateEmptyBorder(0, kExtraMarginFromLeftEdge, 0, 0));
+  highlight_view_->AddIconAndLabelCustomSize(icon, name, false, kIconSize,
+                                             kMarginFromEdges,
+                                             kMarginBetweenIconAndText);
+  highlight_view_->AddRightIcon(check, kIconSize);
 
   if (enabled())
     highlight_view_->SetHighlight(true);

ash/common/system/chromeos/palette/palette_tray.cc

@@ -23,7 +23,9 @@
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/events/devices/stylus_state.h"
+#include "ui/gfx/color_palette.h"
 #include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/vector_icons_public.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/separator.h"
@@ -42,20 +44,27 @@ const int kVerticalShelfHorizontalPadding = 2;
 const int kVerticalShelfVerticalPadding = 5;
 
 // Width of the palette itself (dp).
-const int kPaletteWidth = 360;
+const int kPaletteWidth = 332;
 
 // Size of icon in the shelf (dp).
 const int kShelfIconSize = 18;
 
+// Margins between the title view and the edges around it (dp).
+const int kPaddingBetweenTitleAndTopEdge = 4;
+const int kPaddingBetweenTitleAndLeftEdge = 12;
+const int kPaddingBetweenTitleAndSeparator = 3;
+
+// Margin between the separator beneath the title and the first action (dp).
+const int kPaddingActionsAndTopSeparator = 4;
+
+// Size of the header icons (dp).
+const int kIconSize = 20;
+
 // Creates a separator.
 views::Separator* CreateSeparator(views::Separator::Orientation orientation) {
-  const int kSeparatorInset = 10;
-
   views::Separator* separator =
       new views::Separator(views::Separator::HORIZONTAL);
   separator->SetColor(ash::kBorderDarkColor);
-  separator->SetBorder(
-      views::Border::CreateEmptyBorder(kSeparatorInset, 0, kSeparatorInset, 0));
   return separator;
 }
 
@@ -67,8 +76,6 @@ class TitleView : public views::View, public views::ButtonListener {
     auto* box_layout =
         new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 0);
     SetLayoutManager(box_layout);
-    SetBorder(views::Border::CreateEmptyBorder(
-        0, ash::kTrayPopupPaddingHorizontal, 0, 0));
 
     views::Label* text_label =
         new views::Label(l10n_util::GetStringUTF16(IDS_ASH_STYLUS_TOOLS_TITLE));
@@ -77,16 +84,19 @@ class TitleView : public views::View, public views::ButtonListener {
     AddChildView(text_label);
     box_layout->SetFlexForView(text_label, 1);
 
-    help_button_ = new ash::TrayPopupHeaderButton(this, IDR_AURA_UBER_TRAY_HELP,
+    gfx::ImageSkia settings_icon = CreateVectorIcon(
+        gfx::VectorIconId::SETTINGS, kIconSize, gfx::kChromeIconGrey);
+    gfx::ImageSkia help_icon = CreateVectorIcon(
+        gfx::VectorIconId::HELP, kIconSize, gfx::kChromeIconGrey);
+
+    help_button_ = new ash::TrayPopupHeaderButton(this, help_icon,
                                                   IDS_ASH_STATUS_TRAY_HELP);
     help_button_->SetTooltipText(
         l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_HELP));
     AddChildView(help_button_);
 
-    AddChildView(CreateSeparator(views::Separator::VERTICAL));
-
     settings_button_ = new ash::TrayPopupHeaderButton(
-        this, IDR_AURA_UBER_TRAY_SETTINGS, IDS_ASH_STATUS_TRAY_SETTINGS);
+        this, settings_icon, IDS_ASH_STATUS_TRAY_SETTINGS);
     settings_button_->SetTooltipText(
         l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_SETTINGS));
     AddChildView(settings_button_);
@@ -188,11 +198,19 @@ bool PaletteTray::ShowPalette() {
       views::TrayBubbleView::Create(tray_container(), this, &init_params);
   bubble_view->SetArrowPaintType(views::BubbleBorder::PAINT_NONE);
   bubble_view->UseCompactMargins();
-  bubble_view->set_margins(gfx::Insets(bubble_view->margins().top(), 0, 0, 0));
+  bubble_view->set_margins(gfx::Insets(0, 0, 0, 0));
 
   // Add child views.
-  bubble_view->AddChildView(new TitleView(this));
-  bubble_view->AddChildView(CreateSeparator(views::Separator::HORIZONTAL));
+  auto* title_view = new TitleView(this);
+  title_view->SetBorder(views::Border::CreateEmptyBorder(gfx::Insets(
+      kPaddingBetweenTitleAndTopEdge, kPaddingBetweenTitleAndLeftEdge,
+      kPaddingBetweenTitleAndSeparator, 0)));
+  bubble_view->AddChildView(title_view);
+
+  views::Separator* separator = CreateSeparator(views::Separator::HORIZONTAL);
+  separator->SetBorder(views::Border::CreateEmptyBorder(
+      gfx::Insets(0, 0, kPaddingActionsAndTopSeparator, 0)));
+  bubble_view->AddChildView(separator);
   AddToolsToView(bubble_view);
 
   // Show the bubble.
@@ -204,21 +222,8 @@ bool PaletteTray::ShowPalette() {
 
 void PaletteTray::AddToolsToView(views::View* host) {
   std::vector<PaletteToolView> views = palette_tool_manager_->CreateViews();
-
-  // There may not be any registered tools.
-  if (!views.size())
-    return;
-
-  PaletteGroup group = views[0].group;
-  for (const PaletteToolView& view : views) {
-    // If the group changes, add a separator.
-    if (group != view.group) {
-      group = view.group;
-      host->AddChildView(CreateSeparator(views::Separator::HORIZONTAL));
-    }
-
+  for (const PaletteToolView& view : views)
     host->AddChildView(view.view);
-  }
 }
 
 void PaletteTray::SessionStateChanged(
@@ -261,10 +266,18 @@ gfx::Rect PaletteTray::GetAnchorRect(
 
   // Move the palette to the left so the right edge of the palette aligns with
   // the right edge of the tray button.
-  if (IsHorizontalAlignment(shelf_alignment()))
-    r.Offset(-r.width() + tray_container()->width(), 0);
-  else
+  if (IsHorizontalAlignment(shelf_alignment())) {
+    // TODO(jdufault): Figure out a more robust adjustment method that does not
+    // break in md-shelf.
+    int icon_size = tray_container()->width();
+    if (tray_container()->border())
+      icon_size -= tray_container()->border()->GetInsets().width();
+
+    r.Offset(-r.width() + icon_size, 0);
+  } else {
+    // Vertical layout doesn't need the border adjustment that horizontal needs.
     r.Offset(0, -r.height() + tray_container()->height());
+  }
 
   return r;
 }

ash/common/system/tray/hover_highlight_view.cc

@@ -47,13 +47,12 @@ bool HoverHighlightView::GetTooltipText(const gfx::Point& p,
   return true;
 }
 
-void HoverHighlightView::AddRightIcon(const gfx::ImageSkia& image) {
+void HoverHighlightView::AddRightIcon(const gfx::ImageSkia& image,
+                                      int icon_size) {
   DCHECK(box_layout_);
   DCHECK(!right_icon_);
 
-  right_icon_ = new views::ImageView();
-  right_icon_->SetImageSize(
-      gfx::Size(kTrayPopupDetailsIconWidth, kTrayPopupDetailsIconWidth));
+  right_icon_ = new FixedSizedImageView(icon_size, icon_size);
   right_icon_->SetImage(image);
   right_icon_->SetEnabled(enabled());
   AddChildView(right_icon_);
@@ -73,26 +72,28 @@ void HoverHighlightView::AddIconAndLabel(const gfx::ImageSkia& image,
   box_layout_ = new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 3,
                                      kTrayPopupPaddingBetweenItems);
   SetLayoutManager(box_layout_);
-  DoAddIconAndLabel(image, text, highlight);
+  DoAddIconAndLabel(image, kTrayPopupDetailsIconWidth, text, highlight);
 }
 
-void HoverHighlightView::AddIndentedIconAndLabel(const gfx::ImageSkia& image,
-                                                 const base::string16& text,
-                                                 bool highlight) {
-  box_layout_ = new views::BoxLayout(views::BoxLayout::kHorizontal,
-                                     kTrayPopupPaddingHorizontal, 0,
-                                     kTrayPopupPaddingBetweenItems);
+void HoverHighlightView::AddIconAndLabelCustomSize(const gfx::ImageSkia& image,
+                                                   const base::string16& text,
+                                                   bool highlight,
+                                                   int icon_size,
+                                                   int indent,
+                                                   int space_between_items) {
+  box_layout_ = new views::BoxLayout(views::BoxLayout::kHorizontal, indent, 0,
+                                     space_between_items);
   SetLayoutManager(box_layout_);
-  DoAddIconAndLabel(image, text, highlight);
+  DoAddIconAndLabel(image, icon_size, text, highlight);
 }
 
 void HoverHighlightView::DoAddIconAndLabel(const gfx::ImageSkia& image,
+                                           int icon_size,
                                            const base::string16& text,
                                            bool highlight) {
   DCHECK(box_layout_);
 
-  views::ImageView* image_view =
-      new FixedSizedImageView(kTrayPopupDetailsIconWidth, 0);
+  views::ImageView* image_view = new FixedSizedImageView(icon_size, 0);
   image_view->SetImage(image);
   image_view->SetEnabled(enabled());
   AddChildView(image_view);
@@ -151,8 +152,9 @@ views::Label* HoverHighlightView::AddCheckableLabel(const base::string16& text,
         rb.GetImageNamed(IDR_MENU_CHECK).ToImageSkia();
     int margin = kTrayPopupPaddingHorizontal +
                  kTrayPopupDetailsLabelExtraLeftMargin - kCheckLabelPadding;
-    SetLayoutManager(new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 3,
-                                          kCheckLabelPadding));
+    box_layout_ = new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 3,
+                                       kCheckLabelPadding);
+    SetLayoutManager(box_layout_);
     views::ImageView* image_view = new FixedSizedImageView(margin, 0);
     image_view->SetImage(check);
     image_view->SetHorizontalAlignment(views::ImageView::TRAILING);

ash/common/system/tray/hover_highlight_view.h

@@ -38,11 +38,17 @@ class HoverHighlightView : public ActionableView {
                        bool highlight);
 
   // Convenience function for adding an icon and a label. This also sets the
-  // accessible name. The icon has an indent equal to
-  // kTrayPopupPaddingHorizontal.
-  void AddIndentedIconAndLabel(const gfx::ImageSkia& image,
-                               const base::string16& text,
-                               bool highlight);
+  // accessible name. This method allows the indent and spacing between elements
+  // to be set by the caller. |icon_size| is the size of the icon. |indent| is
+  // the distance between the edges of the view and the icons, and
+  // |space_between_items| is the minimum distance between any two child views.
+  // All distances are in DP.
+  void AddIconAndLabelCustomSize(const gfx::ImageSkia& image,
+                                 const base::string16& text,
+                                 bool highlight,
+                                 int icon_size,
+                                 int indent,
+                                 int space_between_items);
 
   // Convenience function for adding a label with padding on the left for a
   // blank icon. This also sets the accessible name. Returns label after
@@ -59,8 +65,8 @@ class HoverHighlightView : public ActionableView {
                                   bool checked);
 
   // Add an optional right icon to an already established view (call one of
-  // the other Add* functions first).
-  void AddRightIcon(const gfx::ImageSkia& image);
+  // the other Add* functions first). |icon_size| is the size of the icon in DP.
+  void AddRightIcon(const gfx::ImageSkia& image, int icon_size);
 
   // Hide or show the right icon.
   void SetRightIconVisible(bool visible);
@@ -94,6 +100,7 @@ class HoverHighlightView : public ActionableView {
  private:
   // Actually adds the icon and label but does not set the layout manager
   void DoAddIconAndLabel(const gfx::ImageSkia& image,
+                         int icon_size,
                          const base::string16& text,
                          bool highlight);
 

ash/common/system/tray/tray_popup_header_button.cc

@@ -12,24 +12,24 @@
 
 namespace ash {
 
+namespace {
+
+const gfx::ImageSkia* GetImageForResourceId(int resource_id) {
+  ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
+  return bundle.GetImageNamed(resource_id).ToImageSkia();
+}
+
+}  // namespace
+
 // static
 const char TrayPopupHeaderButton::kViewClassName[] =
     "tray/TrayPopupHeaderButton";
 
 TrayPopupHeaderButton::TrayPopupHeaderButton(views::ButtonListener* listener,
-                                             int icon_resource_id,
+                                             const gfx::ImageSkia& icon,
                                              int accessible_name_id)
     : views::ToggleImageButton(listener) {
-  ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
-  SetImage(views::Button::STATE_NORMAL,
-           bundle.GetImageNamed(icon_resource_id).ToImageSkia());
-  SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                    views::ImageButton::ALIGN_MIDDLE);
-  SetAccessibleName(bundle.GetLocalizedString(accessible_name_id));
-  SetFocusForPlatform();
-
-  SetFocusPainter(views::Painter::CreateSolidFocusPainter(
-      kFocusBorderColor, gfx::Insets(1, 2, 2, 3)));
+  Initialize(icon, accessible_name_id);
 }
 
 TrayPopupHeaderButton::TrayPopupHeaderButton(views::ButtonListener* listener,
@@ -38,7 +38,8 @@ TrayPopupHeaderButton::TrayPopupHeaderButton(views::ButtonListener* listener,
                                              int enabled_resource_id_hover,
                                              int disabled_resource_id_hover,
                                              int accessible_name_id)
-    : TrayPopupHeaderButton(listener, enabled_resource_id, accessible_name_id) {
+    : views::ToggleImageButton(listener) {
+  Initialize(*GetImageForResourceId(enabled_resource_id), accessible_name_id);
   ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
   SetToggledImage(views::Button::STATE_NORMAL,
                   bundle.GetImageNamed(disabled_resource_id).ToImageSkia());
@@ -70,4 +71,17 @@ void TrayPopupHeaderButton::StateChanged() {
   SchedulePaint();
 }
 
+void TrayPopupHeaderButton::Initialize(const gfx::ImageSkia& icon,
+                                       int accessible_name_id) {
+  ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
+  SetImage(views::Button::STATE_NORMAL, &icon);
+  SetImageAlignment(views::ImageButton::ALIGN_CENTER,
+                    views::ImageButton::ALIGN_MIDDLE);
+  SetAccessibleName(bundle.GetLocalizedString(accessible_name_id));
+  SetFocusForPlatform();
+
+  SetFocusPainter(views::Painter::CreateSolidFocusPainter(
+      kFocusBorderColor, gfx::Insets(1, 2, 2, 3)));
+}
+
 }  // namespace ash

ash/common/system/tray/tray_popup_header_button.h

@@ -18,7 +18,7 @@ class ASH_EXPORT TrayPopupHeaderButton : public views::ToggleImageButton {
   static const char kViewClassName[];
 
   TrayPopupHeaderButton(views::ButtonListener* listener,
-                        int icon_resource_id,
+                        const gfx::ImageSkia& icon,
                         int accessible_name_id);
   TrayPopupHeaderButton(views::ButtonListener* listener,
                         int enabled_resource_id,
@@ -36,6 +36,8 @@ class ASH_EXPORT TrayPopupHeaderButton : public views::ToggleImageButton {
   // Overridden from views::CustomButton:
   void StateChanged() override;
 
+  void Initialize(const gfx::ImageSkia& icon, int accessible_name_id);
+
   DISALLOW_COPY_AND_ASSIGN(TrayPopupHeaderButton);
 };
 

ui/gfx/vector_icons/help.icon

+// Copyright 2016 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.
+
+MOVE_TO, 24, 4,
+CUBIC_TO, 12.95f, 4, 4, 12.95f, 4, 24,
+CUBIC_TO, 4, 35.05f, 12.95f, 44, 24, 44,
+CUBIC_TO, 35.05f, 44, 44, 35.05f, 44, 24,
+CUBIC_TO, 44, 12.95f, 35.05f, 4, 24, 4,
+LINE_TO, 24, 4,
+CLOSE,
+R_MOVE_TO, 2, 34,
+R_H_LINE_TO, -4,
+R_V_LINE_TO, -4,
+R_H_LINE_TO, 4,
+R_V_LINE_TO, 4,
+CLOSE,
+R_MOVE_TO, 4.13f, -15.49f,
+R_LINE_TO, -1.79f, 1.84f,
+CUBIC_TO, 26.9f, 25.79f, 26, 27, 26, 30,
+R_H_LINE_TO, -4,
+R_V_LINE_TO, -1,
+R_CUBIC_TO, 0, -2.21f, 0.9f, -4.21f, 2.34f, -5.66f,
+R_LINE_TO, 2.49f, -2.52f,
+CUBIC_TO, 27.55f, 20.1f, 28, 19.1f, 28, 18,
+R_CUBIC_TO, 0, -2.21f, -1.79f, -4, -4, -4,
+R_CUBIC_TO, -2.21f, 0, -4, 1.79f, -4, 4,
+R_H_LINE_TO, -4,
+R_CUBIC_TO, 0, -4.42f, 3.58f, -8, 8, -8,
+R_CUBIC_TO, 4.42f, 0, 8, 3.58f, 8, 8,
+R_CUBIC_TO, 0, 1.76f, -0.71f, 3.35f, -1.87f, 4.51f,
+CLOSE,
+END

ui/gfx/vector_icons_sources.gypi

@@ -50,6 +50,7 @@
       'vector_icons/folder_supervised.icon',
       'vector_icons/fullscreen.icon',
       'vector_icons/globe.icon',
+      'vector_icons/help.icon',
       'vector_icons/help_outline.icon',
       'vector_icons/image.icon',
       'vector_icons/incognito.1x.icon',