[CrOS PhoneHub] Polish interstitial views.

This CL polishes the interstitial screen including:
 - Makes progress bar the same width as the bubble.
 - Updates constants to spec.
Screenshot: https://screenshot.googleplex.com/73uEHo56GiKENdQ.png

Misc: removes unused |AddSeparator| function.

BUG=1106937,1126208

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

ash/system/phonehub/phone_connected_view.cc

@@ -26,13 +26,14 @@
 namespace ash {
 
 namespace {
-constexpr int kPaddingBetweenTitleAndSeparator = 3;
+constexpr gfx::Insets kBorderInsetsDip(0, 16, 0, 16);
 }  // namespace
 
 PhoneConnectedView::PhoneConnectedView(
     TrayBubbleView* bubble_view,
     chromeos::phonehub::PhoneHubManager* phone_hub_manager) {
   SetID(PhoneHubViewID::kPhoneConnectedView);
+  SetBorder(views::CreateEmptyBorder(kBorderInsetsDip));
 
   auto setup_layered_view = [](views::View* view) {
     view->SetPaintToLayer();
@@ -40,7 +41,7 @@ PhoneConnectedView::PhoneConnectedView(
   };
 
   auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, gfx::Insets(0, 0, 0, 0)));
+      views::BoxLayout::Orientation::kVertical));
   layout->SetDefaultFlex(1);
 
   chromeos::phonehub::NotificationAccessManager* access_manager =
@@ -79,14 +80,4 @@ const char* PhoneConnectedView::GetClassName() const {
   return "PhoneConnectedView";
 }
 
-void PhoneConnectedView::AddSeparator() {
-  auto* separator = AddChildView(std::make_unique<views::Separator>());
-  separator->SetPaintToLayer();
-  separator->layer()->SetFillsBoundsOpaquely(false);
-  separator->SetColor(AshColorProvider::Get()->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kSeparatorColor));
-  separator->SetBorder(views::CreateEmptyBorder(gfx::Insets(
-      kPaddingBetweenTitleAndSeparator, 0, kMenuSeparatorVerticalPadding, 0)));
-}
-
 }  // namespace ash

ash/system/phonehub/phone_connected_view.h

@@ -31,9 +31,6 @@ class PhoneConnectedView : public PhoneHubContentView {
   void ChildPreferredSizeChanged(View* child) override;
   void ChildVisibilityChanged(View* child) override;
   const char* GetClassName() const override;
-
- private:
-  void AddSeparator();
 };
 
 }  // namespace ash

ash/system/phonehub/phone_hub_interstitial_view.cc

@@ -10,6 +10,7 @@
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
+#include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_popup_item_style.h"
 #include "ash/system/unified/rounded_label_button.h"
 #include "base/strings/string16.h"
@@ -32,27 +33,26 @@ namespace ash {
 namespace {
 
 // Appearance.
-// TODO(meilinw): Update those constants to spec.
-constexpr int kImageWidthDip = 330;
-constexpr int kImageHeightDip = 200;
-constexpr int kDialogContentWidthDip = 330;
-constexpr int kHorizontalPaddingDip = 20;
-constexpr int kVerticalPaddingDip = 20;
-constexpr int kTitleBottomPaddingDip = 10;
-constexpr int kButtonSpacingDip = 10;
-constexpr int kButtonContainerTopPaddingDip = 45;
+constexpr int kImageWidthDip = 368;
+constexpr int kImageHeightDip = 256;
+constexpr int kHorizontalPaddingDip = 16;
+constexpr int kButtonSpacingDip = 8;
+constexpr int kButtonContainerTopPaddingDip = 16;
 constexpr int kProgressBarHeightDip = 2;
 constexpr double kInfiniteLoadingProgressValue = -1.0;
+constexpr int kTitleLabelLineHeightDip = 48;
+constexpr int kDescriptionLabelLineHeightDip = 20;
+constexpr gfx::Insets kTextLabelInsetsDip = {0, 4, 0, 4};
 
 // Adds a ColumnSet on |layout| with a single View column and padding columns
 // on either side of it with |padding| width.
 void AddColumnWithSidePadding(views::GridLayout* layout, int padding, int id) {
   views::ColumnSet* column_set = layout->AddColumnSet(id);
   column_set->AddPaddingColumn(views::GridLayout::kFixedSize, padding);
-  column_set->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
-                        views::GridLayout::kFixedSize,
-                        views::GridLayout::ColumnSize::kFixed,
-                        kDialogContentWidthDip, 0);
+  column_set->AddColumn(views::GridLayout::FILL, views::GridLayout::CENTER,
+                        /*resize_precent=*/1.0,
+                        views::GridLayout::ColumnSize::kUsePreferred,
+                        /*fixed_width=*/0, /*min_width=*/0);
   column_set->AddPaddingColumn(views::GridLayout::kFixedSize, padding);
 }
 
@@ -99,8 +99,9 @@ void PhoneHubInterstitialView::InitLayout(bool show_progress) {
   // Set up the first column set to layout the progressing bar if needed.
   views::ColumnSet* column_set = layout->AddColumnSet(kFirstColumnSetId);
   column_set->AddColumn(views::GridLayout::Alignment::FILL,
-                        views::GridLayout::CENTER, 1,
-                        views::GridLayout::ColumnSize::kFixed, 0, 0);
+                        views::GridLayout::CENTER, /*resize_precent=*/1.0,
+                        views::GridLayout::ColumnSize::kFixed,
+                        /*fixed_width=*/0, /*min_width=*/0);
   // Set up the second column set with horizontal paddings to layout the image,
   // text and buttons.
   const int kSecondColumnSetId = 1;
@@ -126,34 +127,35 @@ void PhoneHubInterstitialView::InitLayout(bool show_progress) {
   title_ =
       layout->AddView(std::make_unique<views::Label>(), 1, 1,
                       views::GridLayout::LEADING, views::GridLayout::CENTER);
+  title_->SetLineHeight(kTitleLabelLineHeightDip);
+  title_->SetBorder(views::CreateEmptyBorder(kTextLabelInsetsDip));
   TrayPopupItemStyle title_style(TrayPopupItemStyle::FontStyle::SUB_HEADER);
   title_style.SetupLabel(title_);
 
   // Set up layout row for the multi-line description view.
-  layout->StartRowWithPadding(views::GridLayout::kFixedSize, kSecondColumnSetId,
-                              views::GridLayout::kFixedSize,
-                              kTitleBottomPaddingDip);
+  layout->StartRow(views::GridLayout::kFixedSize, kSecondColumnSetId);
   description_ = layout->AddView(std::make_unique<views::Label>());
   TrayPopupItemStyle body_style(
       TrayPopupItemStyle::FontStyle::DETAILED_VIEW_LABEL);
   body_style.SetupLabel(description_);
+  description_->SetBorder(views::CreateEmptyBorder(kTextLabelInsetsDip));
   description_->SetMultiLine(true);
+  description_->SetLineHeight(kDescriptionLabelLineHeightDip);
   description_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
 
+  layout->AddPaddingRow(views::GridLayout::kFixedSize,
+                        kButtonContainerTopPaddingDip);
+
   // Set up the layout row for the button container view, which should be
   // right-aligned.
-  layout->StartRowWithPadding(views::GridLayout::kFixedSize, kSecondColumnSetId,
-                              views::GridLayout::kFixedSize,
-                              kButtonContainerTopPaddingDip);
+  layout->StartRow(views::GridLayout::kFixedSize, kSecondColumnSetId,
+                   kTrayItemSize);
   button_container_ =
       layout->AddView(std::make_unique<views::View>(), 1, 1,
                       views::GridLayout::TRAILING, views::GridLayout::CENTER);
   button_container_->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kHorizontal, gfx::Insets(),
       kButtonSpacingDip));
-
-  // Set up the layout row for the bottom spacing.
-  layout->AddPaddingRow(views::GridLayout::kFixedSize, kVerticalPaddingDip);
 }
 
 BEGIN_METADATA(PhoneHubInterstitialView, views::View)

ash/system/phonehub/phone_hub_tray.cc

@@ -41,7 +41,7 @@ namespace {
 constexpr int kTrayIconMainAxisInset = 8;
 constexpr int kTrayIconCrossAxisInset = 0;
 
-constexpr gfx::Insets kBubblePadding(4, 16);
+constexpr gfx::Insets kBubblePadding(0, 0, 16, 0);
 constexpr int kBubbleWidth = 400;
 
 }  // namespace

ash/system/phonehub/phone_status_view.cc

@@ -41,6 +41,7 @@ constexpr int kStatusSpacing = 4;
 constexpr gfx::Size kStatusIconSize(18, 18);
 constexpr int kSeparatorHeight = 18;
 constexpr int kPhoneNameLabelWidthMax = 160;
+constexpr gfx::Insets kBorderInsets(0, 16);
 
 int GetSignalStrengthAsInt(PhoneStatusModel::SignalStrength signal_strength) {
   switch (signal_strength) {
@@ -71,6 +72,8 @@ PhoneStatusView::PhoneStatusView(chromeos::phonehub::PhoneModel* phone_model,
       battery_label_(new views::Label) {
   SetID(PhoneHubViewID::kPhoneStatusView);
 
+  SetBorder(views::CreateEmptyBorder(kBorderInsets));
+
   ConfigureTriViewContainer(TriView::Container::START);
   ConfigureTriViewContainer(TriView::Container::CENTER);
   ConfigureTriViewContainer(TriView::Container::END);

ash/system/phonehub/quick_actions_view.cc

@@ -15,7 +15,7 @@ namespace ash {
 
 namespace {
 
-constexpr gfx::Insets kQuickActionsViewPadding(16, 4, 28, 4);
+constexpr gfx::Insets kQuickActionsViewPadding(16, 4, 12, 4);
 constexpr int kQuickActionsItemSpacing = 36;
 
 }  // namespace

ash/system/phonehub/task_continuation_view.cc

@@ -21,7 +21,6 @@ using BrowserTabsModel = chromeos::phonehub::BrowserTabsModel;
 namespace {
 
 // Appearance constants in dip.
-constexpr gfx::Insets kTaskContinuationViewPadding(0, 0, 16, 0);
 constexpr gfx::Size kTaskContinuationChipSize(176, 96);
 constexpr int kTaskContinuationChipsInRow = 2;
 constexpr int kTaskContinuationChipSpacing = 8;
@@ -68,7 +67,7 @@ TaskContinuationView::TaskContinuationView(
   phone_model_->AddObserver(this);
 
   auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical, kTaskContinuationViewPadding));
+      views::BoxLayout::Orientation::kVertical));
   layout->set_cross_axis_alignment(
       views::BoxLayout::CrossAxisAlignment::kStart);