Ash Tray: Add UI for toggling app badging in quick settings.

BUG=1115697

Change-Id: If6de4e180b482f58244125a7344f0c506d088219
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2351949Reviewed-by: Evan Stade <estade@chromium.org>
Commit-Queue: Tim Song <tengs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#802324}

ash/ash_strings.grd

@@ -2276,6 +2276,9 @@ This file contains the strings for ash.
       <message name="IDS_ASH_MESSAGE_CENTER_ACCESSIBLE_NAME" desc="The spoken feedback name for when accessible focus moves to the message center">
         Notification Center
       </message>
+      <message name="IDS_ASH_MESSAGE_CENTER_APP_BADGING_BUTTON_TOOLTIP" desc="The tooltip text for the app badging toggle button.">
+        App badging
+      </message>
       <message name="IDS_ASH_MESSAGE_CENTER_QUIET_MODE_BUTTON_TOOLTIP" desc="The tooltip text for the do not disturb button.">
         Do not disturb
       </message>

ash/ash_strings_grd/IDS_ASH_MESSAGE_CENTER_APP_BADGING_BUTTON_TOOLTIP.png.sha1

+00339b1fdf7929eab1c556f949995dbb882427b8
\ No newline at end of file

ash/resources/vector_icons/BUILD.gn

@@ -246,6 +246,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "system_power_button_menu_power_off.icon",
     "system_power_button_menu_sign_out.icon",
     "system_tray_accessibility.icon",
+    "system_tray_app_badging.icon",
     "system_tray_caps_lock.icon",
     "system_tray_cast.icon",
     "system_tray_do_not_disturb.icon",

ash/resources/vector_icons/system_tray_app_badging.icon

+// Copyright 2020 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.96f, 2.06f,
+CUBIC_TO, 10.64f, 2.02f, 10.32f, 2, 10, 2,
+CUBIC_TO, 5.58f, 2, 2, 5.58f, 2, 10,
+CUBIC_TO, 2, 14.42f, 5.58f, 18, 10, 18,
+CUBIC_TO, 14.42f, 18, 18, 14.42f, 18, 10,
+CUBIC_TO, 18, 9.68f, 17.98f, 9.36f, 17.94f, 9.04f,
+CUBIC_TO, 17.37f, 9.46f, 16.71f, 9.76f, 16, 9.9f,
+CUBIC_TO, 16, 9.93f, 16, 9.97f, 16, 10,
+CUBIC_TO, 16, 13.31f, 13.31f, 16, 10, 16,
+CUBIC_TO, 6.69f, 16, 4, 13.31f, 4, 10,
+CUBIC_TO, 4, 6.69f, 6.69f, 4, 10, 4,
+CUBIC_TO, 10.03f, 4, 10.07f, 4, 10.1f, 4,
+CUBIC_TO, 10.24f, 3.29f, 10.54f, 2.63f, 10.96f, 2.06f,
+CLOSE,
+MOVE_TO, 18, 5,
+CUBIC_TO, 18, 6.66f, 16.66f, 8, 15, 8,
+CUBIC_TO, 13.34f, 8, 12, 6.66f, 12, 5,
+CUBIC_TO, 12, 3.34f, 13.34f, 2, 15, 2,
+CUBIC_TO, 16.66f, 2, 18, 3.34f, 18, 5,
+CLOSE

ash/system/message_center/notifier_settings_view.cc

@@ -22,6 +22,7 @@
 #include "ash/system/message_center/message_center_style.h"
 #include "ash/system/tray/tray_popup_utils.h"
 #include "base/macros.h"
+#include "base/memory/ptr_util.h"
 #include "base/optional.h"
 #include "base/strings/string16.h"
 #include "base/strings/utf_string_conversions.h"
@@ -30,6 +31,7 @@
 #include "ui/accessibility/ax_enums.mojom.h"
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/ui_base_features.h"
 #include "ui/compositor/paint_recorder.h"
 #include "ui/events/event_utils.h"
 #include "ui/events/keycodes/keyboard_codes.h"
@@ -52,6 +54,7 @@
 #include "ui/views/controls/link.h"
 #include "ui/views/controls/scroll_view.h"
 #include "ui/views/controls/scrollbar/overlay_scroll_bar.h"
+#include "ui/views/controls/separator.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/layout/grid_layout.h"
@@ -89,13 +92,12 @@ const int kInnateCheckboxRightPadding = 2;
 constexpr int kComputedCheckboxSize =
     kCheckboxSizeWithPadding - kInnateCheckboxRightPadding;
 
-// TODO(tetsui): Give more general names and remove kEntryHeight, etc.
 constexpr gfx::Insets kTopLabelPadding(16, 18, 15, 18);
-const int kQuietModeViewSpacing = 18;
+const int kToggleButtonRowViewSpacing = 18;
 
 constexpr gfx::Insets kHeaderViewPadding(4, 0);
-constexpr gfx::Insets kQuietModeViewPadding(0, 18, 0, 0);
-constexpr gfx::Insets kQuietModeLabelPadding(16, 0, 15, 0);
+constexpr gfx::Insets kToggleButtonRowViewPadding(0, 18, 0, 0);
+constexpr gfx::Insets kToggleButtonRowLabelPadding(16, 0, 15, 0);
 constexpr SkColor kTopBorderColor = SkColorSetA(SK_ColorBLACK, 0x1F);
 const int kLabelFontSizeDelta = 1;
 
@@ -445,39 +447,52 @@ NotifierSettingsView::NotifierSettingsView() {
   header_view->SetBorder(
       views::CreateSolidSidedBorder(1, 0, 0, 0, kTopBorderColor));
 
-  auto quiet_mode_view = std::make_unique<views::View>();
+  const SkColor text_color = AshColorProvider::Get()->GetContentLayerColor(
+      ContentLayerType::kTextColorPrimary, AshColorMode::kDark);
+  const SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
+      ContentLayerType::kIconColorPrimary, AshColorMode::kDark);
+  const SkColor separator_color = AshColorProvider::Get()->GetContentLayerColor(
+      ContentLayerType::kSeparatorColor, AshColorMode::kDark);
+
+  if (features::IsNotificationIndicatorEnabled()) {
+    // Row for the app badging toggle button.
+    auto app_badging_icon = std::make_unique<views::ImageView>();
+    app_badging_icon->SetImage(gfx::CreateVectorIcon(
+        kSystemTrayAppBadgingIcon, kMenuIconSize, icon_color));
+    auto app_badging_label =
+        std::make_unique<views::Label>(l10n_util::GetStringUTF16(
+            IDS_ASH_MESSAGE_CENTER_APP_BADGING_BUTTON_TOOLTIP));
+    auto app_badging_toggle = base::WrapUnique<views::ToggleButton>(
+        TrayPopupUtils::CreateToggleButton(
+            this, IDS_ASH_MESSAGE_CENTER_APP_BADGING_BUTTON_TOOLTIP));
+    app_badging_toggle_ = app_badging_toggle.get();
+    auto app_badging_view = CreateToggleButtonRow(
+        std::move(app_badging_icon), std::move(app_badging_label),
+        std::move(app_badging_toggle));
+    app_badging_view->SetBorder(
+        views::CreateSolidSidedBorder(0, 0, 0, 1, kTopBorderColor));
+    header_view->AddChildView(std::move(app_badging_view));
+  }
 
-  auto* quiet_mode_layout =
-      quiet_mode_view->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::Orientation::kHorizontal, kQuietModeViewPadding,
-          kQuietModeViewSpacing));
+  // Separator between toggle button rows.
+  auto separator = std::make_unique<views::Separator>();
+  separator->SetColor(separator_color);
+  header_view->AddChildView(std::move(separator));
 
+  // Row for the quiet mode toggle button.
   auto quiet_mode_icon = std::make_unique<views::ImageView>();
-  quiet_mode_icon->SetBorder(views::CreateEmptyBorder(kQuietModeLabelPadding));
-  quiet_mode_icon_ = quiet_mode_view->AddChildView(std::move(quiet_mode_icon));
-
+  quiet_mode_icon_ = quiet_mode_icon.get();
   auto quiet_mode_label =
       std::make_unique<views::Label>(l10n_util::GetStringUTF16(
           IDS_ASH_MESSAGE_CENTER_QUIET_MODE_BUTTON_TOOLTIP));
-  const SkColor text_color = AshColorProvider::Get()->GetContentLayerColor(
-      ContentLayerType::kTextColorPrimary, AshColorMode::kDark);
-  quiet_mode_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  // "Roboto-Regular, 13sp" is specified in the mock.
-  quiet_mode_label->SetFontList(
-      gfx::FontList().DeriveWithSizeDelta(kLabelFontSizeDelta));
-  quiet_mode_label->SetAutoColorReadabilityEnabled(false);
-  quiet_mode_label->SetEnabledColor(text_color);
-  quiet_mode_label->SetSubpixelRenderingEnabled(false);
-  quiet_mode_label->SetBorder(views::CreateEmptyBorder(kQuietModeLabelPadding));
-  auto* quiet_mode_label_ptr =
-      quiet_mode_view->AddChildView(std::move(quiet_mode_label));
-  quiet_mode_layout->SetFlexForView(quiet_mode_label_ptr, 1);
-
-  views::ToggleButton* quiet_mode_toggle = TrayPopupUtils::CreateToggleButton(
-      this, IDS_ASH_MESSAGE_CENTER_QUIET_MODE_BUTTON_TOOLTIP);
-  quiet_mode_toggle->EnableCanvasFlippingForRTLUI(true);
-  quiet_mode_toggle_ =
-      quiet_mode_view->AddChildView(std::move(quiet_mode_toggle));
+  auto quiet_mode_toggle =
+      base::WrapUnique<views::ToggleButton>(TrayPopupUtils::CreateToggleButton(
+          this, IDS_ASH_MESSAGE_CENTER_QUIET_MODE_BUTTON_TOOLTIP));
+  quiet_mode_toggle_ = quiet_mode_toggle.get();
+  auto quiet_mode_view = CreateToggleButtonRow(std::move(quiet_mode_icon),
+                                               std::move(quiet_mode_label),
+                                               std::move(quiet_mode_toggle));
+
   SetQuietModeState(MessageCenter::Get()->IsQuietMode());
   header_view->AddChildView(std::move(quiet_mode_view));
 
@@ -643,6 +658,12 @@ bool NotifierSettingsView::OnMouseWheel(const ui::MouseWheelEvent& event) {
 
 void NotifierSettingsView::ButtonPressed(views::Button* sender,
                                          const ui::Event& event) {
+  if (sender == app_badging_toggle_) {
+    // TODO(tengs): Call the appropriate controller to toggle app badging once
+    // it is available.
+    return;
+  }
+
   if (sender == quiet_mode_toggle_) {
     LogUserQuietModeEvent(quiet_mode_toggle_->GetIsOn());
     MessageCenter::Get()->SetQuietMode(quiet_mode_toggle_->GetIsOn());
@@ -660,4 +681,36 @@ void NotifierSettingsView::ButtonPressed(views::Button* sender,
   NotifierSettingsController::Get()->GetNotifiers();
 }
 
+std::unique_ptr<views::View> NotifierSettingsView::CreateToggleButtonRow(
+    std::unique_ptr<views::ImageView> icon,
+    std::unique_ptr<views::Label> label,
+    std::unique_ptr<views::ToggleButton> toggle_button) {
+  auto row_view = std::make_unique<views::View>();
+
+  auto* row_layout =
+      row_view->SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kHorizontal,
+          kToggleButtonRowViewPadding, kToggleButtonRowViewSpacing));
+
+  icon->SetBorder(views::CreateEmptyBorder(kToggleButtonRowLabelPadding));
+  row_view->AddChildView(std::move(icon));
+
+  const SkColor text_color = AshColorProvider::Get()->GetContentLayerColor(
+      ContentLayerType::kTextColorPrimary, AshColorMode::kDark);
+  label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  // "Roboto-Regular, 13sp" is specified in the mock.
+  label->SetFontList(gfx::FontList().DeriveWithSizeDelta(kLabelFontSizeDelta));
+  label->SetAutoColorReadabilityEnabled(false);
+  label->SetEnabledColor(text_color);
+  label->SetSubpixelRenderingEnabled(false);
+  label->SetBorder(views::CreateEmptyBorder(kToggleButtonRowLabelPadding));
+  auto* label_ptr = row_view->AddChildView(std::move(label));
+  row_layout->SetFlexForView(label_ptr, 1);
+
+  toggle_button->EnableCanvasFlippingForRTLUI(true);
+  row_view->AddChildView(std::move(toggle_button));
+
+  return row_view;
+}
+
 }  // namespace ash

ash/system/message_center/notifier_settings_view.h

@@ -96,6 +96,14 @@ class ASH_EXPORT NotifierSettingsView : public views::View,
   // Overridden from views::ButtonListener:
   void ButtonPressed(views::Button* sender, const ui::Event& event) override;
 
+  // Utility function that creates a row containing a toggle button, label,
+  // and icon. All passed in views will be added to the returned row view.
+  std::unique_ptr<views::View> CreateToggleButtonRow(
+      std::unique_ptr<views::ImageView> icon,
+      std::unique_ptr<views::Label> label,
+      std::unique_ptr<views::ToggleButton> toggle_button);
+
+  views::ToggleButton* app_badging_toggle_ = nullptr;
   views::ImageView* quiet_mode_icon_ = nullptr;
   views::ToggleButton* quiet_mode_toggle_ = nullptr;
   views::View* header_view_ = nullptr;