Implement accessibility detailed view for the MD Ash system menu

Introduced a new layout for accessibility detailed view. Each row now
contains a vectorized icon which is shown on left, a description which
is shown in the middle and a check mark is shown on the right. The row
on the bottom which contains "setting" option and "learn more" option
is removed and it will be included in the title row in the future cls.

This CL also updates the description of ChromeVox from "ChromeVox (Spoken
feedback)" to "ChromeVox (spoken feedback)"

TEST=tray_accessibility_browsertest

BUG=632102

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

ash/ash_strings.grd

@@ -325,7 +325,7 @@ Press Ctrl+Alt+Z to disable.
       </message>
       <message name="IDS_ASH_STATUS_TRAY_ACCESSIBILITY_SPOKEN_FEEDBACK" desc="The label used in the accessibility menu of the
     system tray to toggle on/off spoken feedback feature.">
-        ChromeVox (Spoken feedback)
+        ChromeVox (spoken feedback)
       </message>
       <message name="IDS_ASH_STATUS_TRAY_ACCESSIBILITY_HIGH_CONTRAST_MODE" desc="The label used in the accessibility menu of the system tray to toggle on/off high contrast feature.">
         High contrast mode

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

@@ -8,6 +8,7 @@
 #include "ash/common/system/chromeos/palette/palette_ids.h"
 #include "ash/common/system/chromeos/palette/palette_tool_manager.h"
 #include "ash/common/system/tray/hover_highlight_view.h"
+#include "ash/common/system/tray/tray_constants.h"
 #include "ash/common/system/tray/view_click_listener.h"
 #include "base/logging.h"
 #include "base/metrics/histogram_macros.h"
@@ -22,18 +23,6 @@
 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;
-
 void AddHistogramTimes(PaletteToolId id, base::TimeDelta duration) {
   if (id == PaletteToolId::LASER_POINTER) {
     UMA_HISTOGRAM_CUSTOM_TIMES("Ash.Shelf.Palette.InLaserPointerMode", duration,
@@ -98,17 +87,18 @@ void CommonPaletteTool::OnViewClicked(views::View* sender) {
 
 views::View* CommonPaletteTool::CreateDefaultView(const base::string16& name) {
   gfx::ImageSkia icon =
-      CreateVectorIcon(GetPaletteIcon(), kIconSize, gfx::kChromeIconGrey);
+      CreateVectorIcon(GetPaletteIcon(), kMenuIconSize, gfx::kChromeIconGrey);
   gfx::ImageSkia check = CreateVectorIcon(gfx::VectorIconId::CHECK_CIRCLE,
-                                          kIconSize, gfx::kGoogleGreen700);
+                                          kMenuIconSize, gfx::kGoogleGreen700);
 
   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);
+      views::Border::CreateEmptyBorder(0, kMenuSeparatorVerticalPadding, 0, 0));
+  const int interior_button_padding = (kMenuButtonSize - kMenuIconSize) / 2;
+  highlight_view_->AddIconAndLabelCustomSize(
+      icon, name, false, kMenuIconSize, interior_button_padding,
+      interior_button_padding + kMenuSeparatorVerticalPadding);
+  highlight_view_->AddRightIcon(check, kMenuIconSize);
 
   if (enabled())
     highlight_view_->SetHighlight(true);

ash/common/system/tray_accessibility.cc

@@ -24,8 +24,10 @@
 #include "grit/ash_strings.h"
 #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.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/layout/box_layout.h"
@@ -163,7 +165,10 @@ AccessibilityDetailedView::AccessibilityDetailedView(SystemTrayItem* owner,
   Reset();
 
   AppendAccessibilityList();
-  AppendHelpEntries();
+
+  if (!MaterialDesignController::IsSystemTrayMenuMaterial())
+    AppendHelpEntries();
+
   CreateTitleRow(IDS_ASH_STATUS_TRAY_ACCESSIBILITY_TITLE);
 
   Layout();
@@ -178,7 +183,8 @@ void AccessibilityDetailedView::AppendAccessibilityList() {
   spoken_feedback_view_ =
       AddScrollListItem(bundle.GetLocalizedString(
                             IDS_ASH_STATUS_TRAY_ACCESSIBILITY_SPOKEN_FEEDBACK),
-                        spoken_feedback_enabled_, spoken_feedback_enabled_);
+                        spoken_feedback_enabled_, spoken_feedback_enabled_,
+                        kSystemMenuAccessibilityChromevoxIcon);
 
   // Large Cursor item is shown only in Login screen.
   if (login_ == LoginStatus::NOT_LOGGED_IN) {
@@ -186,33 +192,38 @@ void AccessibilityDetailedView::AppendAccessibilityList() {
     large_cursor_view_ =
         AddScrollListItem(bundle.GetLocalizedString(
                               IDS_ASH_STATUS_TRAY_ACCESSIBILITY_LARGE_CURSOR),
-                          large_cursor_enabled_, large_cursor_enabled_);
+                          large_cursor_enabled_, large_cursor_enabled_,
+                          kSystemMenuAccessibilityLargeCursorIcon);
   }
 
   high_contrast_enabled_ = delegate->IsHighContrastEnabled();
   high_contrast_view_ = AddScrollListItem(
       bundle.GetLocalizedString(
           IDS_ASH_STATUS_TRAY_ACCESSIBILITY_HIGH_CONTRAST_MODE),
-      high_contrast_enabled_, high_contrast_enabled_);
+      high_contrast_enabled_, high_contrast_enabled_,
+      kSystemMenuAccessibilityContrastIcon);
   screen_magnifier_enabled_ = delegate->IsMagnifierEnabled();
   screen_magnifier_view_ =
       AddScrollListItem(bundle.GetLocalizedString(
                             IDS_ASH_STATUS_TRAY_ACCESSIBILITY_SCREEN_MAGNIFIER),
-                        screen_magnifier_enabled_, screen_magnifier_enabled_);
+                        screen_magnifier_enabled_, screen_magnifier_enabled_,
+                        kSystemMenuAccessibilityScreenMagnifierIcon);
 
   // Don't show autoclick option at login screen.
   if (login_ != LoginStatus::NOT_LOGGED_IN) {
     autoclick_enabled_ = delegate->IsAutoclickEnabled();
     autoclick_view_ = AddScrollListItem(
         bundle.GetLocalizedString(IDS_ASH_STATUS_TRAY_ACCESSIBILITY_AUTOCLICK),
-        autoclick_enabled_, autoclick_enabled_);
+        autoclick_enabled_, autoclick_enabled_,
+        kSystemMenuAccessibilityAutoClickIcon);
   }
 
   virtual_keyboard_enabled_ = delegate->IsVirtualKeyboardEnabled();
   virtual_keyboard_view_ =
       AddScrollListItem(bundle.GetLocalizedString(
                             IDS_ASH_STATUS_TRAY_ACCESSIBILITY_VIRTUAL_KEYBOARD),
-                        virtual_keyboard_enabled_, virtual_keyboard_enabled_);
+                        virtual_keyboard_enabled_, virtual_keyboard_enabled_,
+                        kSystemMenuKeyboardIcon);
 }
 
 void AccessibilityDetailedView::AppendHelpEntries() {
@@ -249,55 +260,70 @@ void AccessibilityDetailedView::AppendHelpEntries() {
 HoverHighlightView* AccessibilityDetailedView::AddScrollListItem(
     const base::string16& text,
     bool highlight,
-    bool checked) {
+    bool checked,
+    const gfx::VectorIcon& icon) {
   HoverHighlightView* container = new HoverHighlightView(this);
-  container->AddCheckableLabel(text, highlight, checked);
+  if (MaterialDesignController::IsSystemTrayMenuMaterial()) {
+    gfx::ImageSkia image = CreateVectorIcon(icon, kMenuIconColor);
+    const int padding = (kMenuButtonSize - image.width()) / 2;
+    container->AddIconAndLabelCustomSize(
+        image, text, highlight,
+        image.width() + kMenuSeparatorVerticalPadding * 2, padding, padding);
+    gfx::ImageSkia check_mark =
+        CreateVectorIcon(gfx::VectorIconId::CHECK_CIRCLE, gfx::kGoogleGreen700);
+    container->AddRightIcon(check_mark, check_mark.width());
+    container->SetRightIconVisible(checked);
+  } else {
+    container->AddCheckableLabel(text, highlight, checked);
+  }
   scroll_content()->AddChildView(container);
   return container;
 }
 
 void AccessibilityDetailedView::HandleViewClicked(views::View* view) {
   AccessibilityDelegate* delegate = WmShell::Get()->accessibility_delegate();
+  UserMetricsAction user_action;
   if (view == spoken_feedback_view_) {
-    WmShell::Get()->RecordUserMetricsAction(
-        delegate->IsSpokenFeedbackEnabled()
-            ? ash::UMA_STATUS_AREA_DISABLE_SPOKEN_FEEDBACK
-            : ash::UMA_STATUS_AREA_ENABLE_SPOKEN_FEEDBACK);
+    user_action = delegate->IsSpokenFeedbackEnabled()
+                      ? ash::UMA_STATUS_AREA_DISABLE_SPOKEN_FEEDBACK
+                      : ash::UMA_STATUS_AREA_ENABLE_SPOKEN_FEEDBACK;
     delegate->ToggleSpokenFeedback(A11Y_NOTIFICATION_NONE);
   } else if (view == high_contrast_view_) {
-    WmShell::Get()->RecordUserMetricsAction(
-        delegate->IsHighContrastEnabled()
-            ? ash::UMA_STATUS_AREA_DISABLE_HIGH_CONTRAST
-            : ash::UMA_STATUS_AREA_ENABLE_HIGH_CONTRAST);
+    user_action = delegate->IsHighContrastEnabled()
+                      ? ash::UMA_STATUS_AREA_DISABLE_HIGH_CONTRAST
+                      : ash::UMA_STATUS_AREA_ENABLE_HIGH_CONTRAST;
     delegate->ToggleHighContrast();
   } else if (view == screen_magnifier_view_) {
-    WmShell::Get()->RecordUserMetricsAction(
-        delegate->IsMagnifierEnabled() ? ash::UMA_STATUS_AREA_DISABLE_MAGNIFIER
-                                       : ash::UMA_STATUS_AREA_ENABLE_MAGNIFIER);
+    user_action = delegate->IsMagnifierEnabled()
+                      ? ash::UMA_STATUS_AREA_DISABLE_MAGNIFIER
+                      : ash::UMA_STATUS_AREA_ENABLE_MAGNIFIER;
     delegate->SetMagnifierEnabled(!delegate->IsMagnifierEnabled());
   } else if (large_cursor_view_ && view == large_cursor_view_) {
-    WmShell::Get()->RecordUserMetricsAction(
-        delegate->IsLargeCursorEnabled()
-            ? ash::UMA_STATUS_AREA_DISABLE_LARGE_CURSOR
-            : ash::UMA_STATUS_AREA_ENABLE_LARGE_CURSOR);
+    user_action = delegate->IsLargeCursorEnabled()
+                      ? ash::UMA_STATUS_AREA_DISABLE_LARGE_CURSOR
+                      : ash::UMA_STATUS_AREA_ENABLE_LARGE_CURSOR;
     delegate->SetLargeCursorEnabled(!delegate->IsLargeCursorEnabled());
   } else if (autoclick_view_ && view == autoclick_view_) {
-    WmShell::Get()->RecordUserMetricsAction(
-        delegate->IsAutoclickEnabled()
-            ? ash::UMA_STATUS_AREA_DISABLE_AUTO_CLICK
-            : ash::UMA_STATUS_AREA_ENABLE_AUTO_CLICK);
+    user_action = delegate->IsAutoclickEnabled()
+                      ? ash::UMA_STATUS_AREA_DISABLE_AUTO_CLICK
+                      : ash::UMA_STATUS_AREA_ENABLE_AUTO_CLICK;
     delegate->SetAutoclickEnabled(!delegate->IsAutoclickEnabled());
   } else if (virtual_keyboard_view_ && view == virtual_keyboard_view_) {
-    WmShell::Get()->RecordUserMetricsAction(
-        delegate->IsVirtualKeyboardEnabled()
-            ? ash::UMA_STATUS_AREA_DISABLE_VIRTUAL_KEYBOARD
-            : ash::UMA_STATUS_AREA_ENABLE_VIRTUAL_KEYBOARD);
+    user_action = delegate->IsVirtualKeyboardEnabled()
+                      ? ash::UMA_STATUS_AREA_DISABLE_VIRTUAL_KEYBOARD
+                      : ash::UMA_STATUS_AREA_ENABLE_VIRTUAL_KEYBOARD;
     delegate->SetVirtualKeyboardEnabled(!delegate->IsVirtualKeyboardEnabled());
+  } else {
+    return;
   }
+  WmShell::Get()->RecordUserMetricsAction(user_action);
 }
 
 void AccessibilityDetailedView::HandleButtonPressed(views::Button* sender,
                                                     const ui::Event& event) {
+  if (MaterialDesignController::UseMaterialDesignSystemIcons())
+    return;
+
   SystemTrayDelegate* tray_delegate = WmShell::Get()->system_tray_delegate();
   if (sender == help_view_)
     tray_delegate->ShowAccessibilityHelp();

ash/common/system/tray_accessibility.h

@@ -21,6 +21,10 @@ namespace chromeos {
 class TrayAccessibilityTest;
 }
 
+namespace gfx {
+struct VectorIcon;
+}
+
 namespace views {
 class Button;
 class ImageView;
@@ -48,6 +52,7 @@ class AccessibilityPopupView : public TrayNotificationView {
   DISALLOW_COPY_AND_ASSIGN(AccessibilityPopupView);
 };
 
+// Create the detailed view of accessibility tray.
 class AccessibilityDetailedView : public TrayDetailsView,
                                   public ShellObserver {
  public:
@@ -63,12 +68,15 @@ class AccessibilityDetailedView : public TrayDetailsView,
   // Add the accessibility feature list.
   void AppendAccessibilityList();
 
-  // Add help entries.
+  // Add help entries. Only used for non-MD.
   void AppendHelpEntries();
 
+  // Helper function to create entries in the detailed accessibility view. The
+  // |icon| parameter is used to create button icons for MD only.
   HoverHighlightView* AddScrollListItem(const base::string16& text,
                                         bool highlight,
-                                        bool checked);
+                                        bool checked,
+                                        const gfx::VectorIcon& icon);
 
   views::View* spoken_feedback_view_;
   views::View* high_contrast_view_;

ash/resources/vector_icons/BUILD.gn

@@ -38,6 +38,16 @@ action("aggregate_vector_icons") {
     "shelf_notifications.icon",
     "system_menu_accessibility.1x.icon",
     "system_menu_accessibility.icon",
+    "system_menu_accessibility_auto_click.1x.icon",
+    "system_menu_accessibility_auto_click.icon",
+    "system_menu_accessibility_chromevox.1x.icon",
+    "system_menu_accessibility_chromevox.icon",
+    "system_menu_accessibility_contrast.1x.icon",
+    "system_menu_accessibility_contrast.icon",
+    "system_menu_accessibility_large_cursor.1x.icon",
+    "system_menu_accessibility_large_cursor.icon",
+    "system_menu_accessibility_screen_magnifier.1x.icon",
+    "system_menu_accessibility_screen_magnifier.icon",
     "system_menu_arrow_back.1x.icon",
     "system_menu_arrow_back.icon",
     "system_menu_arrow_right.1x.icon",

ash/resources/vector_icons/system_menu_accessibility_auto_click.1x.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.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 13.47f, 9.55f,
+LINE_TO, 16, 11.81f,
+R_LINE_TO, -6, -0.52f,
+R_LINE_TO, 2.5f, 5.68f,
+LINE_TO, 10.75f, 18,
+R_LINE_TO, -2.5f, -5.93f,
+LINE_TO, 5, 17.23f,
+V_LINE_TO, 2,
+R_LINE_TO, 2.25f, 2.01f,
+CUBIC_TO, 7.09f, 4.47f, 7, 4.98f, 7, 5.5f,
+CUBIC_TO, 7, 7.99f, 9.02f, 10, 11.5f, 10,
+R_CUBIC_TO, 0.71f, 0, 1.37f, -0.16f, 1.97f, -0.45f,
+CLOSE,
+MOVE_TO, 10, 8,
+V_LINE_TO, 7,
+R_H_LINE_TO, 1,
+V_LINE_TO, 6,
+R_H_LINE_TO, 1,
+R_V_LINE_TO, 1,
+R_H_LINE_TO, 1,
+V_LINE_TO, 5,
+R_H_LINE_TO, 1,
+R_V_LINE_TO, 3,
+R_H_LINE_TO, -2,
+R_V_LINE_TO, 1,
+R_H_LINE_TO, -1,
+V_LINE_TO, 8,
+MOVE_TO, 13, 3,
+R_V_LINE_TO, 1,
+R_H_LINE_TO, -1,
+R_V_LINE_TO, 1,
+R_H_LINE_TO, -1,
+V_LINE_TO, 4,
+R_H_LINE_TO, -1,
+R_V_LINE_TO, 2,
+H_LINE_TO, 9,
+V_LINE_TO, 3,
+R_H_LINE_TO, 2,
+V_LINE_TO, 2,
+R_H_LINE_TO, 1,
+R_V_LINE_TO, 1,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_auto_click.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.
+
+CANVAS_DIMENSIONS, 40,
+MOVE_TO, 24.99f, 18.25f,
+R_LINE_TO, 6.01f, 5.36f,
+R_LINE_TO, -12, -1.03f,
+R_LINE_TO, 5, 11.36f,
+LINE_TO, 20.5f, 36,
+R_LINE_TO, -5, -11.87f,
+LINE_TO, 9, 34.45f,
+V_LINE_TO, 4,
+R_LINE_TO, 4.22f, 3.76f,
+CUBIC_TO, 12.45f, 8.99f, 12, 10.44f, 12, 12,
+R_CUBIC_TO, 0, 4.42f, 3.58f, 8, 8, 8,
+R_CUBIC_TO, 1.89f, 0, 3.62f, -0.65f, 4.99f, -1.75f,
+CLOSE,
+MOVE_TO, 20, 8.13f,
+R_V_LINE_TO, 1.94f,
+R_LINE_TO, 2.58f, -2.58f,
+LINE_TO, 20, 4.89f,
+R_V_LINE_TO, 1.94f,
+R_CUBIC_TO, -2.85f, 0, -5.17f, 2.31f, -5.17f, 5.17f,
+R_CUBIC_TO, 0, 1.01f, 0.3f, 1.96f, 0.8f, 2.75f,
+R_LINE_TO, 0.94f, -0.94f,
+R_CUBIC_TO, -0.29f, -0.54f, -0.45f, -1.16f, -0.45f, -1.81f,
+R_CUBIC_TO, 0, -2.14f, 1.74f, -3.87f, 3.88f, -3.87f,
+CLOSE,
+R_MOVE_TO, 4.37f, 1.12f,
+R_LINE_TO, -0.94f, 0.94f,
+R_CUBIC_TO, 0.28f, 0.54f, 0.45f, 1.16f, 0.45f, 1.81f,
+R_CUBIC_TO, 0, 2.14f, -1.74f, 3.88f, -3.87f, 3.88f,
+R_V_LINE_TO, -1.94f,
+R_LINE_TO, -2.58f, 2.58f,
+LINE_TO, 20, 19.11f,
+R_V_LINE_TO, -1.94f,
+R_CUBIC_TO, 2.86f, 0, 5.17f, -2.31f, 5.17f, -5.17f,
+R_CUBIC_TO, 0, -1.01f, -0.3f, -1.96f, -0.8f, -2.75f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_chromevox.1x.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.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 7.82f, 11.11f,
+R_CUBIC_TO, 1.61f, 0, 2.91f, -1.32f, 2.91f, -2.95f,
+R_CUBIC_TO, 0, -1.63f, -1.3f, -2.95f, -2.91f, -2.95f,
+R_CUBIC_TO, -1.61f, 0, -2.91f, 1.32f, -2.91f, 2.95f,
+R_CUBIC_TO, 0, 1.63f, 1.3f, 2.95f, 2.91f, 2.95f,
+CLOSE,
+MOVE_TO, 7.75f, 12.5f,
+R_CUBIC_TO, -1.92f, 0, -5.75f, 1, -5.75f, 3,
+V_LINE_TO, 17,
+R_H_LINE_TO, 11.5f,
+R_V_LINE_TO, -1.5f,
+R_CUBIC_TO, 0, -1.99f, -3.83f, -3, -5.75f, -3,
+CLOSE,
+R_MOVE_TO, 5.71f, -7.02f,
+R_LINE_TO, -1.22f, 1.25f,
+R_CUBIC_TO, 0.61f, 0.87f, 0.61f, 2, 0, 2.87f,
+R_LINE_TO, 1.22f, 1.25f,
+R_CUBIC_TO, 1.47f, -1.49f, 1.47f, -3.74f, 0, -5.36f,
+CLOSE,
+MOVE_TO, 15.87f, 3,
+R_LINE_TO, -1.19f, 1.2f,
+R_CUBIC_TO, 2.02f, 2.23f, 2.02f, 5.57f, 0, 7.92f,
+R_LINE_TO, 1.19f, 1.2f,
+R_CUBIC_TO, 2.84f, -2.87f, 2.84f, -7.33f, 0, -10.31f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_chromevox.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.
+
+CANVAS_DIMENSIONS, 40,
+MOVE_TO, 15.64f, 22.21f,
+R_CUBIC_TO, 3.21f, 0, 5.82f, -2.64f, 5.82f, -5.89f,
+R_CUBIC_TO, 0, -3.26f, -2.61f, -5.89f, -5.82f, -5.89f,
+CUBIC_TO_SHORTHAND, 9.82f, 13.06f, 9.82f, 16.32f,
+R_CUBIC_TO, 0, 3.26f, 2.6f, 5.9f, 5.82f, 5.9f,
+CLOSE,
+MOVE_TO, 15.5f, 25,
+CUBIC_TO, 11.66f, 25, 4, 27.01f, 4, 31,
+R_V_LINE_TO, 3,
+R_H_LINE_TO, 23,
+R_V_LINE_TO, -3,
+R_CUBIC_TO, 0, -3.99f, -7.66f, -6, -11.5f, -6,
+CLOSE,
+R_MOVE_TO, 11.43f, -14.05f,
+R_LINE_TO, -2.44f, 2.49f,
+R_CUBIC_TO, 1.22f, 1.74f, 1.22f, 3.99f, 0, 5.73f,
+R_LINE_TO, 2.44f, 2.49f,
+R_CUBIC_TO, 2.94f, -2.98f, 2.94f, -7.47f, 0, -10.71f,
+CLOSE,
+MOVE_TO, 31.74f, 6,
+R_LINE_TO, -2.37f, 2.4f,
+R_CUBIC_TO, 4.03f, 4.45f, 4.03f, 11.14f, 0, 15.83f,
+R_LINE_TO, 2.37f, 2.4f,
+R_CUBIC_TO, 5.67f, -5.73f, 5.69f, -14.66f, 0, -20.63f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_contrast.1x.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.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 10, 18,
+R_CUBIC_TO, 4.42f, 0, 8, -3.58f, 8, -8,
+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, 4.42f, 3.58f, 8, 8, 8,
+CLOSE,
+R_MOVE_TO, 0, -14.12f,
+R_CUBIC_TO, 3.38f, 0, 6.12f, 2.74f, 6.12f, 6.12f,
+R_CUBIC_TO, 0, 3.38f, -2.74f, 6.12f, -6.12f, 6.12f,
+V_LINE_TO, 3.88f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_contrast.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.
+
+CANVAS_DIMENSIONS, 40,
+MOVE_TO, 20, 36,
+R_CUBIC_TO, 8.84f, 0, 16, -7.16f, 16, -16,
+CUBIC_TO_SHORTHAND, 28.84f, 4, 20, 4,
+CUBIC_TO_SHORTHAND, 4, 11.16f, 4, 20,
+R_CUBIC_TO, 0, 8.84f, 7.16f, 16, 16, 16,
+CLOSE,
+R_MOVE_TO, 0, -28.23f,
+R_CUBIC_TO, 6.76f, 0, 12.24f, 5.48f, 12.24f, 12.24f,
+CUBIC_TO_SHORTHAND, 26.76f, 32.24f, 20, 32.24f,
+V_LINE_TO, 7.77f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_large_cursor.1x.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.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 15, 11.81f,
+LINE_TO, 4, 2,
+R_V_LINE_TO, 15.23f,
+R_LINE_TO, 3.25f, -5.16f,
+LINE_TO, 9.75f, 18,
+R_LINE_TO, 1.75f, -1.03f,
+LINE_TO, 9, 11.29f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_large_cursor.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.
+
+CANVAS_DIMENSIONS, 40,
+MOVE_TO, 30, 23.61f,
+LINE_TO, 8, 4,
+R_V_LINE_TO, 30.45f,
+R_LINE_TO, 6.5f, -10.32f,
+R_LINE_TO, 5, 11.87f,
+R_LINE_TO, 3.5f, -2.06f,
+R_LINE_TO, -5, -11.35f,
+CLOSE,
+END

ash/resources/vector_icons/system_menu_accessibility_screen_magnifier.1x.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.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 12.04f, 11.43f,
+R_LINE_TO, -0.24f, -0.23f,
+CUBIC_TO, 12.64f, 10.23f, 13, 8.5f, 13, 7.58f,
+CUBIC_TO, 13, 4.5f, 10.65f, 2, 7.58f, 2,
+CUBIC_TO, 4.5f, 2, 2, 4.5f, 2, 7.58f,
+CUBIC_TO, 2, 10.66f, 4.5f, 13, 7.58f, 13,
+R_CUBIC_TO, 0.93f, 0, 2.65f, -0.36f, 3.63f, -1.2f,
+R_LINE_TO, 0.23f, 0.24f,
+R_V_LINE_TO, 0.68f,
+LINE_TO, 15.72f, 17,
+LINE_TO, 17, 15.72f,
+R_LINE_TO, -4.28f, -4.29f,
+R_H_LINE_TO, -0.68f,
+CLOSE,
+R_MOVE_TO, -4.47f, 0,
+R_CUBIC_TO, -2.14f, 0, -3.86f, -1.72f, -3.86f, -3.86f,
+R_CUBIC_TO, 0, -2.13f, 1.72f, -3.86f, 3.86f, -3.86f,
+R_CUBIC_TO, 2.13f, 0, 3.86f, 1.73f, 3.86f, 3.86f,
+R_CUBIC_TO, 0, 2.14f, -1.72f, 3.86f, -3.86f, 3.86f,
+CLOSE,
+MOVE_TO, 8, 8,
+R_V_LINE_TO, 1.5f,
+H_LINE_TO, 7,
+V_LINE_TO, 8,
+H_LINE_TO, 5.5f,
+V_LINE_TO, 7,
+H_LINE_TO, 7,
+V_LINE_TO, 5.5f,
+R_H_LINE_TO, 1,
+V_LINE_TO, 7,
+R_H_LINE_TO, 1.5f,
+R_V_LINE_TO, 1,
+CLOSE,
+END
+ 

ash/resources/vector_icons/system_menu_accessibility_screen_magnifier.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.
+
+CANVAS_DIMENSIONS, 40,
+MOVE_TO, 26.87f, 24.13f,
+R_H_LINE_TO, -1.44f,
+R_LINE_TO, -0.51f, -0.49f,
+R_CUBIC_TO, 1.79f, -2.09f, 2.87f, -4.79f, 2.87f, -7.74f,
+CUBIC_TO, 27.79f, 9.32f, 22.46f, 4, 15.89f, 4,
+CUBIC_TO, 9.32f, 4, 4, 9.32f, 4, 15.89f,
+R_CUBIC_TO, 0, 6.57f, 5.32f, 11.89f, 11.89f, 11.89f,
+R_CUBIC_TO, 2.95f, 0, 5.65f, -1.08f, 7.74f, -2.87f,
+R_LINE_TO, 0.49f, 0.51f,
+R_V_LINE_TO, 1.45f,
+LINE_TO, 33.27f, 36,
+LINE_TO, 36, 33.27f,
+R_LINE_TO, -9.13f, -9.15f,
+CLOSE,
+R_MOVE_TO, -10.98f, 0,
+R_CUBIC_TO, -4.56f, 0, -8.23f, -3.68f, -8.23f, -8.23f,
+R_CUBIC_TO, 0, -4.56f, 3.68f, -8.23f, 8.23f, -8.23f,
+R_CUBIC_TO, 4.56f, 0, 8.23f, 3.68f, 8.23f, 8.23f,
+R_CUBIC_TO, 0, 4.56f, -3.68f, 8.23f, -8.23f, 8.23f,
+CLOSE,
+MOVE_TO, 17, 17,
+R_V_LINE_TO, 4,
+R_H_LINE_TO, -2,
+R_V_LINE_TO, -4,
+R_H_LINE_TO, -4,
+R_V_LINE_TO, -2,
+R_H_LINE_TO, 4,
+R_V_LINE_TO, -4,
+R_H_LINE_TO, 2,
+R_V_LINE_TO, 4,
+R_H_LINE_TO, 4,
+R_V_LINE_TO, 2,
+CLOSE,
+END
+ 

chrome/browser/chromeos/system/tray_accessibility_browsertest.cc

@@ -4,6 +4,7 @@
 
 #include "ash/common/accessibility_types.h"
 #include "ash/common/login_status.h"
+#include "ash/common/material_design/material_design_controller.h"
 #include "ash/common/system/tray/system_tray.h"
 #include "ash/common/system/tray_accessibility.h"
 #include "ash/magnifier/magnification_controller.h"
@@ -869,8 +870,13 @@ IN_PROC_BROWSER_TEST_P(TrayAccessibilityTest, CheckMenuVisibilityOnDetailMenu) {
   EXPECT_FALSE(IsLargeCursorMenuShownOnDetailMenu());
   EXPECT_TRUE(IsAutoclickMenuShownOnDetailMenu());
   EXPECT_TRUE(IsVirtualKeyboardMenuShownOnDetailMenu());
-  EXPECT_TRUE(IsHelpShownOnDetailMenu());
-  EXPECT_TRUE(IsSettingsShownOnDetailMenu());
+  if (ash::MaterialDesignController::IsSystemTrayMenuMaterial()) {
+    EXPECT_FALSE(IsHelpShownOnDetailMenu());
+    EXPECT_FALSE(IsSettingsShownOnDetailMenu());
+  } else {
+    EXPECT_TRUE(IsHelpShownOnDetailMenu());
+    EXPECT_TRUE(IsSettingsShownOnDetailMenu());
+  }
   CloseDetailMenu();
 
   SetLoginStatus(ash::LoginStatus::LOCKED);

ui/gfx/vector_icons/BUILD.gn

@@ -22,6 +22,7 @@ action("aggregate_vector_icons") {
     "browser_tools_error.icon",
     "browser_tools_update.icon",
     "business.icon",
+    "check_circle.1x.icon",
     "check_circle.icon",
     "checkbox_active.icon",
     "checkbox_normal.icon",

ui/gfx/vector_icons/check_circle.1x.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.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 10, 2,
+R_CUBIC_TO, -4.42f, 0, -8, 3.58f, -8, 8,
+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, -4.42f, -3.58f, -8, -8, -8,
+CLOSE,
+MOVE_TO, 8.4f, 14,
+R_LINE_TO, -4, -4,
+R_LINE_TO, 1.13f, -1.13f,
+LINE_TO, 8.4f, 11.74f,
+R_LINE_TO, 6.07f, -6.07f,
+LINE_TO, 15.6f, 6.8f,
+LINE_TO, 8.4f, 14,
+CLOSE,
+END

ui/gfx/vector_icons/check_circle.icon

-// Copyright 2015 The Chromium Authors. All rights reserved.
+// 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.
 
-CIRCLE, 24, 24, 20,
-MOVE_TO, 20, 34,
-LINE_TO, 10, 24,
-R_LINE_TO, 2.83f, -2.83f,
-LINE_TO, 20, 28.34f,
-R_LINE_TO, 15.17f, -15.17f,
-LINE_TO, 38, 16,
-LINE_TO, 20, 34,
+CANVAS_DIMENSIONS, 40,
+MOVE_TO, 20, 4,
+CUBIC_TO, 11.17f, 4, 4, 11.17f, 4, 20,
+R_CUBIC_TO, 0, 8.83f, 7.17f, 16, 16, 16,
+R_CUBIC_TO, 8.83f, 0, 16, -7.17f, 16, -16,
+CUBIC_TO_SHORTHAND, 28.83f, 4, 20, 4,
+CLOSE,
+R_MOVE_TO, -3.2f, 24,
+R_LINE_TO, -8, -8,
+R_LINE_TO, 2.26f, -2.26f,
+R_LINE_TO, 5.74f, 5.73f,
+R_LINE_TO, 12.14f, -12.14f,
+LINE_TO, 31.2f, 13.6f,
+LINE_TO, 16.8f, 28,
+CLOSE,
 END

ui/views/examples/throbber_example.cc

@@ -16,25 +16,40 @@ namespace {
 
 class ThrobberView : public View {
  public:
-  ThrobberView() : throbber_(new Throbber()) {
+  ThrobberView() : throbber_(new Throbber()), is_checked_(false) {
     AddChildView(throbber_);
     throbber_->Start();
   }
 
+  // View::
   gfx::Size GetPreferredSize() const override {
     return gfx::Size(width(), height());
   }
 
   void Layout() override {
-    int diameter = 64;
+    int diameter = 16;
     throbber_->SetBounds((width() - diameter) / 2,
                          (height() - diameter) / 2,
                          diameter, diameter);
     SizeToPreferredSize();
   }
 
+  bool OnMousePressed(const ui::MouseEvent& event) override {
+    if (GetEventHandlerForPoint(event.location()) != throbber_)
+      return false;
+
+    if (is_checked_)
+      throbber_->Start();
+    else
+      throbber_->Stop();
+    throbber_->SetChecked(!is_checked_);
+    is_checked_ = !is_checked_;
+    return true;
+  }
+
  private:
   Throbber* throbber_;
+  bool is_checked_;
 
   DISALLOW_COPY_AND_ASSIGN(ThrobberView);
 };