[CrOS PhoneHub] Updates bubble width.

This CL updates the bubble width to use |kTrayMenuWidth|. This CL also
includes minor refactoring such as:
- Replaces hard-coded constants with calculation.
- Introduces ui_constants.h to store both appearance and URL constants.

Screenshot: https://screenshot.googleplex.com/6PBiuFovTjyfjaa.png

BUG=1143058,1106937

Change-Id: Icdf17321a9acd9be53b7287023e197e027fcac62
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2510551
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@{#822893}

ash/BUILD.gn

@@ -731,8 +731,8 @@ component("ash") {
     "screen_util.cc",
     "screen_util.h",
     "screenshot_delegate.h",
-    "session/fullscreen_alert_bubble.h",
     "session/fullscreen_alert_bubble.cc",
+    "session/fullscreen_alert_bubble.h",
     "session/fullscreen_controller.cc",
     "session/fullscreen_controller.h",
     "session/multiprofiles_intro_dialog.cc",
@@ -1198,7 +1198,7 @@ component("ash") {
     "system/phonehub/silence_phone_quick_action_controller.h",
     "system/phonehub/task_continuation_view.cc",
     "system/phonehub/task_continuation_view.h",
-    "system/phonehub/url_constants.h",
+    "system/phonehub/ui_constants.h",
     "system/power/backlights_forced_off_setter.cc",
     "system/power/backlights_forced_off_setter.h",
     "system/power/battery_notification.cc",

ash/system/phonehub/bluetooth_disabled_view.cc

@@ -15,7 +15,7 @@
 #include "ash/system/phonehub/phone_hub_metrics.h"
 #include "ash/system/phonehub/phone_hub_tray.h"
 #include "ash/system/phonehub/phone_hub_view_ids.h"
-#include "ash/system/phonehub/url_constants.h"
+#include "ash/system/phonehub/ui_constants.h"
 #include "ash/system/status_area_widget.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"

ash/system/phonehub/connection_error_view.cc

@@ -14,7 +14,7 @@
 #include "ash/system/phonehub/phone_hub_interstitial_view.h"
 #include "ash/system/phonehub/phone_hub_metrics.h"
 #include "ash/system/phonehub/phone_hub_view_ids.h"
-#include "ash/system/phonehub/url_constants.h"
+#include "ash/system/phonehub/ui_constants.h"
 #include "chromeos/components/phonehub/connection_scheduler.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"

ash/system/phonehub/phone_connected_view.cc

@@ -12,6 +12,7 @@
 #include "ash/system/phonehub/phone_status_view.h"
 #include "ash/system/phonehub/quick_actions_view.h"
 #include "ash/system/phonehub/task_continuation_view.h"
+#include "ash/system/phonehub/ui_constants.h"
 #include "ash/system/tray/tray_constants.h"
 #include "chromeos/components/phonehub/notification_access_manager.h"
 #include "chromeos/components/phonehub/phone_hub_manager.h"
@@ -25,15 +26,10 @@
 
 namespace ash {
 
-namespace {
-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();
@@ -41,7 +37,8 @@ PhoneConnectedView::PhoneConnectedView(
   };
 
   auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
-      views::BoxLayout::Orientation::kVertical));
+      views::BoxLayout::Orientation::kVertical,
+      gfx::Insets(0, kBubbleHorizontalSidePaddingDip)));
   layout->SetDefaultFlex(1);
 
   chromeos::phonehub::NotificationAccessManager* access_manager =

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/phonehub/ui_constants.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"
@@ -33,9 +34,7 @@ namespace ash {
 namespace {
 
 // Appearance.
-constexpr int kImageWidthDip = 368;
 constexpr int kImageHeightDip = 256;
-constexpr int kHorizontalPaddingDip = 16;
 constexpr int kButtonSpacingDip = 8;
 constexpr int kButtonContainerTopPaddingDip = 16;
 constexpr int kProgressBarHeightDip = 2;
@@ -68,7 +67,8 @@ void PhoneHubInterstitialView::SetImage(const gfx::ImageSkia& image) {
   // Expect a non-empty string for the title.
   DCHECK(!image.isNull());
   image_->SetImage(image);
-  image_->SetImageSize(gfx::Size(kImageWidthDip, kImageHeightDip));
+  image_->SetImageSize(gfx::Size(
+      kTrayMenuWidth - 2 * kBubbleHorizontalSidePaddingDip, kImageHeightDip));
 }
 
 void PhoneHubInterstitialView::SetTitle(const base::string16& title) {
@@ -105,7 +105,8 @@ void PhoneHubInterstitialView::InitLayout(bool show_progress) {
   // Set up the second column set with horizontal paddings to layout the image,
   // text and buttons.
   const int kSecondColumnSetId = 1;
-  AddColumnWithSidePadding(layout, kHorizontalPaddingDip, kSecondColumnSetId);
+  AddColumnWithSidePadding(layout, kBubbleHorizontalSidePaddingDip,
+                           kSecondColumnSetId);
 
   if (show_progress) {
     // Set up layout row for the progress bar if |show_progess| is true.

ash/system/phonehub/phone_hub_tray.cc

@@ -16,6 +16,7 @@
 #include "ash/system/phonehub/phone_hub_content_view.h"
 #include "ash/system/phonehub/quick_actions_view.h"
 #include "ash/system/phonehub/task_continuation_view.h"
+#include "ash/system/phonehub/ui_constants.h"
 #include "ash/system/tray/system_menu_button.h"
 #include "ash/system/tray/tray_bubble_wrapper.h"
 #include "ash/system/tray/tray_constants.h"
@@ -41,8 +42,7 @@ namespace {
 constexpr int kTrayIconMainAxisInset = 8;
 constexpr int kTrayIconCrossAxisInset = 0;
 
-constexpr gfx::Insets kBubblePadding(0, 0, 16, 0);
-constexpr int kBubbleWidth = 400;
+constexpr gfx::Insets kBubblePadding(0, 0, kBubbleBottomPaddingDip, 0);
 
 }  // namespace
 
@@ -155,7 +155,7 @@ void PhoneHubTray::ShowBubble(bool show_by_click) {
   init_params.parent_window = GetBubbleWindowContainer();
   init_params.anchor_view = GetBubbleAnchor();
   init_params.shelf_alignment = shelf()->alignment();
-  init_params.preferred_width = kBubbleWidth;
+  init_params.preferred_width = kTrayMenuWidth;
   init_params.close_on_deactivate = true;
   init_params.has_shadow = false;
   init_params.translucent = true;

ash/system/phonehub/task_continuation_view.cc

@@ -8,6 +8,8 @@
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/phonehub/continue_browsing_chip.h"
 #include "ash/system/phonehub/phone_hub_view_ids.h"
+#include "ash/system/phonehub/ui_constants.h"
+#include "ash/system/tray/tray_constants.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/text_constants.h"
@@ -21,16 +23,25 @@ using BrowserTabsModel = chromeos::phonehub::BrowserTabsModel;
 namespace {
 
 // Appearance constants in dip.
-constexpr gfx::Size kTaskContinuationChipSize(176, 96);
+constexpr int kTaskContinuationChipHeight = 96;
 constexpr int kTaskContinuationChipsInRow = 2;
 constexpr int kTaskContinuationChipSpacing = 8;
-constexpr int kTaskContinuationChipHorizontalPadding = 4;
+constexpr int kTaskContinuationChipHorizontalSidePadding = 4;
 constexpr int kTaskContinuationChipVerticalPadding = 4;
 constexpr int kHeaderLabelLineHeight = 48;
 
 // Typography.
 constexpr int kHeaderTextFontSizeDip = 15;
 
+gfx::Size GetTaskContinuationChipSize() {
+  int width =
+      (kTrayMenuWidth - kBubbleHorizontalSidePaddingDip * 2 -
+       kTaskContinuationChipHorizontalSidePadding * 2 -
+       kTaskContinuationChipSpacing * (kTaskContinuationChipsInRow - 1)) /
+      kTaskContinuationChipsInRow;
+  return gfx::Size(width, kTaskContinuationChipHeight);
+}
+
 class HeaderView : public views::Label {
  public:
   HeaderView() {
@@ -101,16 +112,16 @@ void TaskContinuationView::TaskChipsView::AddTaskChip(views::View* task_chip) {
 
 // views::View:
 gfx::Size TaskContinuationView::TaskChipsView::CalculatePreferredSize() const {
-  int width = kTaskContinuationChipSize.width() * kTaskContinuationChipsInRow +
+  auto chip_size = GetTaskContinuationChipSize();
+  int width = chip_size.width() * kTaskContinuationChipsInRow +
               kTaskContinuationChipSpacing +
-              2 * kTaskContinuationChipHorizontalPadding;
+              2 * kTaskContinuationChipHorizontalSidePadding;
   int rows_num =
       std::ceil((double)task_chips_.view_size() / kTaskContinuationChipsInRow);
-  int height = (kTaskContinuationChipSize.height() +
-                kTaskContinuationChipVerticalPadding) *
+  int height = (chip_size.height() + kTaskContinuationChipVerticalPadding) *
                    std::max(0, rows_num - 1) +
-               kTaskContinuationChipSize.height() +
-               2 * kTaskContinuationChipHorizontalPadding;
+               chip_size.height() +
+               2 * kTaskContinuationChipHorizontalSidePadding;
   return gfx::Size(width, height);
 }
 
@@ -133,14 +144,12 @@ void TaskContinuationView::TaskChipsView::Reset() {
 }
 
 gfx::Point TaskContinuationView::TaskChipsView::GetButtonPosition(int index) {
+  auto chip_size = GetTaskContinuationChipSize();
   int row = index / kTaskContinuationChipsInRow;
   int column = index % kTaskContinuationChipsInRow;
-  int x = (kTaskContinuationChipSize.width() + kTaskContinuationChipSpacing) *
-              column +
-          kTaskContinuationChipHorizontalPadding;
-  int y = (kTaskContinuationChipSize.height() +
-           kTaskContinuationChipVerticalPadding) *
-              row +
+  int x = (chip_size.width() + kTaskContinuationChipSpacing) * column +
+          kTaskContinuationChipHorizontalSidePadding;
+  int y = (chip_size.height() + kTaskContinuationChipVerticalPadding) * row +
           kTaskContinuationChipVerticalPadding;
   return gfx::Point(x, y);
 }
@@ -148,7 +157,7 @@ gfx::Point TaskContinuationView::TaskChipsView::GetButtonPosition(int index) {
 void TaskContinuationView::TaskChipsView::CalculateIdealBounds() {
   for (int i = 0; i < task_chips_.view_size(); ++i) {
     gfx::Rect tile_bounds =
-        gfx::Rect(GetButtonPosition(i), kTaskContinuationChipSize);
+        gfx::Rect(GetButtonPosition(i), GetTaskContinuationChipSize());
     task_chips_.set_ideal_bounds(i, tile_bounds);
   }
 }

ash/system/phonehub/url_constants.h → ash/system/phonehub/ui_constants.h

@@ -2,15 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-#ifndef ASH_SYSTEM_PHONEHUB_URL_CONSTANTS_H_
-#define ASH_SYSTEM_PHONEHUB_URL_CONSTANTS_H_
+#ifndef ASH_SYSTEM_PHONEHUB_UI_CONSTANTS_H_
+#define ASH_SYSTEM_PHONEHUB_UI_CONSTANTS_H_
 
 namespace ash {
 
+// Appearance.
+constexpr int kBubbleHorizontalSidePaddingDip = 16;
+constexpr int kBubbleBottomPaddingDip = 16;
+
+// URLs.
 // TODO(meilinw): replace it with the real one.
 constexpr char kLearnMoreUrl[] =
     "https://support.google.com/chromebook/?p=multi_device";
 
 }  // namespace ash
 
-#endif  // ASH_SYSTEM_PHONEHUB_URL_CONSTANTS_H_
+#endif  // ASH_SYSTEM_PHONEHUB_UI_CONSTANTS_H_