[CrOS PhoneHub] Polish main panel UI.

This CL polishes the Phone Hub panel including:
  - Relayouts the continue browsing chip.
  - Removes the separators.

Screenshot: https://screenshot.googleplex.com/8uHj96SrADLFmAc.png

Misc: removes unused headers.

BUG=1106937,1126208

Change-Id: I0c1c2bef1883c6a8a188fde7c287a0a1bddbdf5d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2494023
Commit-Queue: Meilin Wang <meilinw@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Reviewed-by: Andre Le <leandre@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820965}

ash/system/phonehub/continue_browsing_chip.cc

@@ -21,13 +21,13 @@ namespace ash {
 
 namespace {
 
-constexpr gfx::Insets kContinueBrowsingChipPadding(8, 8);
-constexpr int kContinueBrowsingChipSpacing = 5;
-constexpr int kContinueBrowsingChipFaviconSpacing = 5;
-constexpr gfx::Size kContinueBrowsingChipFaviconSize(50, 50);
-constexpr int kTaskContinuationChipRadius = 10;
+// Appearance in dip.
+constexpr gfx::Insets kContinueBrowsingChipInsets(8, 8);
+constexpr int kContinueBrowsingChipSpacing = 8;
+constexpr int kContinueBrowsingChipFaviconSpacing = 8;
+constexpr gfx::Size kContinueBrowsingChipFaviconSize(16, 16);
+constexpr int kTaskContinuationChipRadius = 8;
 constexpr int kTitleMaxLines = 2;
-constexpr gfx::Size kTitleViewSize(100, 40);
 
 }  // namespace
 
@@ -45,29 +45,38 @@ ContinueBrowsingChip::ContinueBrowsingChip(
                                                 kTaskContinuationChipRadius);
 
   auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, kContinueBrowsingChipPadding,
+      views::BoxLayout::Orientation::kVertical, kContinueBrowsingChipInsets,
       kContinueBrowsingChipSpacing));
-  layout->set_main_axis_alignment(views::BoxLayout::MainAxisAlignment::kCenter);
+  layout->set_main_axis_alignment(views::BoxLayout::MainAxisAlignment::kStart);
   layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kStart);
 
+  // Inits the header view which consists of the favicon image and the url.
   auto* header_view = AddChildView(std::make_unique<views::View>());
   auto* header_layout =
       header_view->SetLayoutManager(std::make_unique<views::BoxLayout>(
           views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
           kContinueBrowsingChipFaviconSpacing));
   header_layout->set_main_axis_alignment(
-      views::BoxLayout::MainAxisAlignment::kCenter);
+      views::BoxLayout::MainAxisAlignment::kStart);
   header_layout->set_cross_axis_alignment(
-      views::BoxLayout::CrossAxisAlignment::kStart);
+      views::BoxLayout::CrossAxisAlignment::kCenter);
 
   auto* favicon =
       header_view->AddChildView(std::make_unique<views::ImageView>());
   favicon->SetImageSize(kContinueBrowsingChipFaviconSize);
   favicon->SetImage(metadata.favicon.AsImageSkia());
 
+  auto* url_label = header_view->AddChildView(
+      std::make_unique<views::Label>(base::UTF8ToUTF16(metadata.url.host())));
+  url_label->SetAutoColorReadabilityEnabled(false);
+  url_label->SetSubpixelRenderingEnabled(false);
+  url_label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextColorPrimary));
+  url_label->SetElideBehavior(gfx::ElideBehavior::ELIDE_TAIL);
+
   auto* title_label =
-      header_view->AddChildView(std::make_unique<views::Label>(metadata.title));
+      AddChildView(std::make_unique<views::Label>(metadata.title));
   title_label->SetAutoColorReadabilityEnabled(false);
   title_label->SetSubpixelRenderingEnabled(false);
   title_label->SetEnabledColor(color_provider->GetContentLayerColor(
@@ -75,16 +84,8 @@ ContinueBrowsingChip::ContinueBrowsingChip(
   title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   title_label->SetMultiLine(true);
   title_label->SetMaxLines(kTitleMaxLines);
-  title_label->SetSize(kTitleViewSize);
   title_label->SetFontList(
       title_label->font_list().DeriveWithWeight(gfx::Font::Weight::BOLD));
-
-  auto* url_label = AddChildView(
-      std::make_unique<views::Label>(base::UTF8ToUTF16(metadata.url.host())));
-  url_label->SetAutoColorReadabilityEnabled(false);
-  url_label->SetSubpixelRenderingEnabled(false);
-  url_label->SetEnabledColor(color_provider->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kTextColorPrimary));
 }
 
 void ContinueBrowsingChip::OnPaintBackground(gfx::Canvas* canvas) {

ash/system/phonehub/notification_opt_in_view.cc

@@ -14,14 +14,12 @@
 #include "ash/system/phonehub/phone_hub_view_ids.h"
 #include "ash/system/tray/tray_bubble_view.h"
 #include "ash/system/tray/tray_popup_item_style.h"
-#include "ash/system/unified/rounded_label_button.h"
 #include "base/strings/string16.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chromeos/components/phonehub/notification_access_manager.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/views/border.h"
-#include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/grid_layout.h"
@@ -37,12 +35,15 @@ using phone_hub_metrics::LogInterstitialScreenEvent;
 namespace {
 
 // Appearance.
-// TODO(crbug.com/1126208): update constants to spec.
-constexpr int kButtonSpacingDip = 10;
+constexpr int kButtonSpacingDip = 8;
 constexpr int kBorderThicknessDip = 1;
-constexpr int kBorderCornerRadiusDip = 10;
-constexpr gfx::Insets kTextLabelBorderInsets = {10, 0, 0, 0};
-constexpr gfx::Insets kButtonContainerBorderInsets = {10, 0, 5, 5};
+constexpr int kBorderCornerRadiusDip = 8;
+constexpr gfx::Insets kTextLabelBorderInsets = {12, 16, 12, 16};
+constexpr gfx::Insets kButtonContainerBorderInsets = {0, 0, 12, 16};
+constexpr int kTextLabelLineHeightDip = 20;
+
+// Typography.
+constexpr int kLabelTextFontSizeDip = 14;
 
 // Tag value used to uniquely identify the "Dismiss" and "Get started" buttons.
 constexpr int kDismissButtonTag = 1;
@@ -111,9 +112,16 @@ void NotificationOptInView::InitLayout() {
   text_label_ =
       layout->AddView(std::make_unique<views::Label>(), 1, 1,
                       views::GridLayout::CENTER, views::GridLayout::CENTER);
-  TrayPopupItemStyle body_style(
-      TrayPopupItemStyle::FontStyle::DETAILED_VIEW_LABEL);
-  body_style.SetupLabel(text_label_);
+  auto text_color = AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextColorPrimary);
+  text_label_->SetEnabledColor(text_color);
+  text_label_->SetAutoColorReadabilityEnabled(false);
+  auto default_font = text_label_->font_list();
+  text_label_->SetFontList(default_font
+                               .DeriveWithSizeDelta(kLabelTextFontSizeDip -
+                                                    default_font.GetFontSize())
+                               .DeriveWithWeight(gfx::Font::Weight::MEDIUM));
+  text_label_->SetLineHeight(kTextLabelLineHeightDip);
   text_label_->SetBorder(views::CreateEmptyBorder(kTextLabelBorderInsets));
   text_label_->SetText(l10n_util::GetStringUTF16(
       IDS_ASH_PHONE_HUB_NOTIFICATION_OPT_IN_DESCRIPTION));

ash/system/phonehub/notification_opt_in_view.h

@@ -7,7 +7,6 @@
 
 #include "ash/ash_export.h"
 #include "ash/system/phonehub/interstitial_view_button.h"
-#include "ash/system/unified/rounded_label_button.h"
 #include "ui/views/controls/button/button.h"
 #include "ui/views/metadata/metadata_header_macros.h"
 #include "ui/views/view.h"

ash/system/phonehub/phone_connected_view.cc

@@ -43,8 +43,6 @@ PhoneConnectedView::PhoneConnectedView(
       views::BoxLayout::Orientation::kVertical, gfx::Insets(0, 0, 0, 0)));
   layout->SetDefaultFlex(1);
 
-  AddSeparator();
-
   chromeos::phonehub::NotificationAccessManager* access_manager =
       phone_hub_manager->GetNotificationAccessManager();
   bool should_show_notification_setup_ui =
@@ -58,8 +56,6 @@ PhoneConnectedView::PhoneConnectedView(
   setup_layered_view(
       AddChildView(std::make_unique<QuickActionsView>(phone_hub_manager)));
 
-  AddSeparator();
-
   auto* phone_model = phone_hub_manager->GetPhoneModel();
   if (phone_model) {
     setup_layered_view(

ash/system/phonehub/phone_status_view.cc

@@ -26,6 +26,7 @@
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/image/image_skia.h"
 #include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/text_elider.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/separator.h"
@@ -37,10 +38,12 @@ using PhoneStatusModel = chromeos::phonehub::PhoneStatusModel;
 
 namespace {
 
+// Appearance in Dip.
 constexpr int kTitleContainerSpacing = 16;
-constexpr int kStatusSpacing = 6;
-constexpr gfx::Size kStatusIconSize(16, 16);
+constexpr int kStatusSpacing = 4;
+constexpr gfx::Size kStatusIconSize(18, 18);
 constexpr int kSeparatorHeight = 18;
+constexpr int kPhoneNameLabelWidthMax = 160;
 
 int GetSignalStrengthAsInt(PhoneStatusModel::SignalStrength signal_strength) {
   switch (signal_strength) {
@@ -79,6 +82,7 @@ PhoneStatusView::PhoneStatusView(chromeos::phonehub::PhoneModel* phone_model)
   TrayPopupItemStyle style(TrayPopupItemStyle::FontStyle::SUB_HEADER,
                            true /* use_unified_theme */);
   style.SetupLabel(phone_name_label_);
+  phone_name_label_->SetElideBehavior(gfx::ElideBehavior::ELIDE_TAIL);
   AddView(TriView::Container::CENTER, phone_name_label_);
 
   AddView(TriView::Container::END, signal_icon_);
@@ -130,8 +134,11 @@ void PhoneStatusView::OnModelChanged() {
 }
 
 void PhoneStatusView::Update() {
+  // Set phone name text and elide it if needed.
   phone_name_label_->SetText(
-      phone_model_->phone_name().value_or(base::string16()));
+      gfx::ElideText(phone_model_->phone_name().value_or(base::string16()),
+                     phone_name_label_->font_list(), kPhoneNameLabelWidthMax,
+                     gfx::ELIDE_TAIL));
 
   // Clear the phone status if the status model returns null when the phone is
   // disconnected.

ash/system/phonehub/task_continuation_view.cc

@@ -10,6 +10,7 @@
 #include "ash/system/phonehub/phone_hub_view_ids.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/geometry/insets.h"
+#include "ui/gfx/text_constants.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 
@@ -19,24 +20,33 @@ using BrowserTabsModel = chromeos::phonehub::BrowserTabsModel;
 
 namespace {
 
-constexpr int kTaskContinuationHeaderSpacing = 8;
-constexpr gfx::Insets kTaskContinuationViewPadding(12, 4);
-constexpr gfx::Insets kPhoneHubSubHeaderPadding(4, 32);
-constexpr gfx::Size kTaskContinuationChipSize(170, 80);
+// Appearance constants in dip.
+constexpr gfx::Insets kTaskContinuationViewPadding(12, 0, 16, 0);
+constexpr gfx::Size kTaskContinuationChipSize(176, 96);
 constexpr int kTaskContinuationChipsInRow = 2;
 constexpr int kTaskContinuationChipSpacing = 8;
-constexpr int kTaskContinuationChipVerticalPadding = 5;
+constexpr int kTaskContinuationChipHorizontalPadding = 4;
+constexpr int kTaskContinuationChipVerticalPadding = 4;
+constexpr int kHeaderLabelLineHeight = 48;
 
-class HeaderView : public views::View {
+// Typography.
+constexpr int kHeaderTextFontSizeDip = 15;
+
+class HeaderView : public views::Label {
  public:
   HeaderView() {
-    SetLayoutManager(std::make_unique<views::BoxLayout>(
-        views::BoxLayout::Orientation::kVertical, kPhoneHubSubHeaderPadding));
-    auto* header_label = AddChildView(std::make_unique<views::Label>(
-        l10n_util::GetStringUTF16(IDS_ASH_PHONE_HUB_TASK_CONTINUATION_TITLE)));
-    header_label->SetAutoColorReadabilityEnabled(false);
-    header_label->SetSubpixelRenderingEnabled(false);
-    header_label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+    SetText(
+        l10n_util::GetStringUTF16(IDS_ASH_PHONE_HUB_TASK_CONTINUATION_TITLE));
+    SetLineHeight(kHeaderLabelLineHeight);
+    SetFontList(font_list()
+                    .DeriveWithSizeDelta(kHeaderTextFontSizeDip -
+                                         font_list().GetFontSize())
+                    .DeriveWithWeight(gfx::Font::Weight::MEDIUM));
+    SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
+    SetVerticalAlignment(gfx::VerticalAlignment::ALIGN_MIDDLE);
+    SetAutoColorReadabilityEnabled(false);
+    SetSubpixelRenderingEnabled(false);
+    SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
         AshColorProvider::ContentLayerType::kTextColorPrimary));
   }
 
@@ -58,8 +68,7 @@ TaskContinuationView::TaskContinuationView(
   phone_model_->AddObserver(this);
 
   auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, kTaskContinuationViewPadding,
-      kTaskContinuationHeaderSpacing));
+      views::BoxLayout::Orientation::kVertical, kTaskContinuationViewPadding));
   layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kStart);
 
@@ -94,13 +103,15 @@ void TaskContinuationView::TaskChipsView::AddTaskChip(views::View* task_chip) {
 // views::View:
 gfx::Size TaskContinuationView::TaskChipsView::CalculatePreferredSize() const {
   int width = kTaskContinuationChipSize.width() * kTaskContinuationChipsInRow +
-              kTaskContinuationChipSpacing;
+              kTaskContinuationChipSpacing +
+              2 * kTaskContinuationChipHorizontalPadding;
   int rows_num =
       std::ceil((double)task_chips_.view_size() / kTaskContinuationChipsInRow);
   int height = (kTaskContinuationChipSize.height() +
                 kTaskContinuationChipVerticalPadding) *
                    std::max(0, rows_num - 1) +
-               kTaskContinuationChipSize.height();
+               kTaskContinuationChipSize.height() +
+               2 * kTaskContinuationChipHorizontalPadding;
   return gfx::Size(width, height);
 }
 
@@ -126,10 +137,12 @@ gfx::Point TaskContinuationView::TaskChipsView::GetButtonPosition(int index) {
   int row = index / kTaskContinuationChipsInRow;
   int column = index % kTaskContinuationChipsInRow;
   int x = (kTaskContinuationChipSize.width() + kTaskContinuationChipSpacing) *
-          column;
+              column +
+          kTaskContinuationChipHorizontalPadding;
   int y = (kTaskContinuationChipSize.height() +
            kTaskContinuationChipVerticalPadding) *
-          row;
+              row +
+          kTaskContinuationChipVerticalPadding;
   return gfx::Point(x, y);
 }