[Chrome OS MD] Update Cast and VPN to follow MD layout

ash/common/system/chromeos/screen_security/screen_tray_item.cc

Index: ash/common/system/chromeos/screen_security/screen_tray_item.cc
diff --git a/ash/common/system/chromeos/screen_security/screen_tray_item.cc b/ash/common/system/chromeos/screen_security/screen_tray_item.cc
index b43e4154790ababec535d45e8472a6d97dae80e0..f1fde443a898eec2fb477fc809ca48535ec76ca7 100644
--- a/ash/common/system/chromeos/screen_security/screen_tray_item.cc
+++ b/ash/common/system/chromeos/screen_security/screen_tray_item.cc
@@ -17,11 +17,7 @@
 #include "ui/message_center/message_center.h"
 #include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/label.h"
-#include "ui/views/layout/box_layout.h"
-
-namespace {
-const int kStopButtonRightPadding = 18;
-}  // namespace
+#include "ui/views/layout/fill_layout.h"
 
 namespace ash {
 namespace tray {
@@ -30,10 +26,7 @@ namespace tray {
 ScreenTrayView::ScreenTrayView(ScreenTrayItem* screen_tray_item)
     : TrayItemView(screen_tray_item), screen_tray_item_(screen_tray_item) {
   CreateImageView();
-  if (MaterialDesignController::UseMaterialDesignSystemIcons()) {
-    image_view()->SetImage(
-        gfx::CreateVectorIcon(kSystemTrayScreenShareIcon, kTrayIconColor));
-  } else {
+  if (!MaterialDesignController::UseMaterialDesignSystemIcons()) {
     image_view()->SetImage(ui::ResourceBundle::GetSharedInstance()
                                .GetImageNamed(IDR_AURA_UBER_TRAY_SCREENSHARE)
                                .ToImageSkia());
@@ -45,6 +38,15 @@ ScreenTrayView::~ScreenTrayView() {}
 
 void ScreenTrayView::Update() {
   SetVisible(screen_tray_item_->is_started());
+
+  if (!MaterialDesignController::UseMaterialDesignSystemIcons()) {
+    return;
+  }
+
+  TrayPopupItemStyle default_view_style(
+      GetNativeTheme(), TrayPopupItemStyle::FontStyle::DEFAULT_VIEW_LABEL);
+  image_view()->SetImage(gfx::CreateVectorIcon(
+      kSystemTrayScreenShareIcon, default_view_style.GetIconColor()));

[bruthig, 2016/11/23 20:15:47]

FYI The ScreenTrayView is the one shown beside the clock in the shelf.  Correct
me if I'm wrong but I don't think it should have the system menu style applied
to it.

[yiyix, 2016/11/24 21:38:16]

Sorry. you are you right. 

 }
 
 // ScreenStatusView implementations.
@@ -58,6 +60,14 @@ ScreenStatusView::ScreenStatusView(ScreenTrayItem* screen_tray_item,
       label_text_(label_text),
       stop_button_text_(stop_button_text) {
   CreateItems();
+  TriView* tri_view(TrayPopupUtils::CreateDefaultRowView());
+  SetLayoutManager(new views::FillLayout);
+  AddChildView(tri_view);
+  tri_view->AddView(TriView::Container::START, icon_);
+  tri_view->AddView(TriView::Container::CENTER, label_);
+  tri_view->AddView(TriView::Container::END, stop_button_);
+  SetBorder(views::CreateEmptyBorder(0, 0, 0, kTrayPopupButtonEndMargin));

[bruthig, 2016/11/23 20:15:47]

I think it would be better if we didn't set custom borders on TriView's returned
from CreateDefaultRowView() because it will make it more difficult to apply a
border within CreateDefaultRowView() if we ever need to do it for all clients. 
Would it work to use TriView::SetContainerBorder() for the END container
instead?

Also, this seems to be a recurring pattern. i.e. All buttons created with
TPIU::CreateTrayPopupButton() will need this layout.  Is that true?  If so it
might make sense to create a new function like
TPIU::CreateTrayPopupButtonBorder(). We can discuss this offline.

[yiyix, 2016/11/24 21:38:16]

As we have discussed offline, for this code review, i will set up borders on end
container instead. 

[bruthig, 2016/11/24 22:36:29]

Awesome, thx :)

+
   if (screen_tray_item_)
     UpdateFromScreenTrayItem();
 }
@@ -73,43 +83,19 @@ void ScreenStatusView::ButtonPressed(views::Button* sender,
 
 void ScreenStatusView::CreateItems() {
   const bool use_md = MaterialDesignController::IsSystemTrayMenuMaterial();
-  if (!use_md)
-    set_background(views::Background::CreateSolidBackground(kBackgroundColor));
-
-  auto layout =
-      new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0,
-                           use_md ? kTrayPopupPaddingBetweenItems : 0);
-  layout->set_cross_axis_alignment(
-      views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
-  SetLayoutManager(layout);
-  SetBorder(views::CreateEmptyBorder(
-      0, kTrayPopupPaddingHorizontal, 0,
-      use_md ? kTrayPopupButtonEndMargin : kStopButtonRightPadding));
-
   icon_ = TrayPopupUtils::CreateMainImageView();
-  if (use_md) {
-    icon_->SetImage(
-        gfx::CreateVectorIcon(kSystemMenuScreenShareIcon, kMenuIconColor));
-  } else {
+  if (!use_md) {
+    set_background(views::Background::CreateSolidBackground(kBackgroundColor));
     ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
     icon_->SetImage(bundle.GetImageNamed(IDR_AURA_UBER_TRAY_SCREENSHARE_DARK)
                         .ToImageSkia());
   }
-  AddChildView(icon_);
 
-  label_ = new views::Label;
-  label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  label_ = TrayPopupUtils::CreateDefaultLabel();
   label_->SetMultiLine(true);
   label_->SetText(label_text_);
-  if (!use_md) {
-    label_->SetBorder(
-        views::CreateEmptyBorder(0, kTrayPopupPaddingBetweenItems, 0, 0));
-  }
-  AddChildView(label_);
-  layout->SetFlexForView(label_, 1);
 
   stop_button_ = TrayPopupUtils::CreateTrayPopupButton(this, stop_button_text_);
-  AddChildView(stop_button_);
 }
 
 void ScreenStatusView::UpdateFromScreenTrayItem() {
@@ -123,9 +109,12 @@ void ScreenStatusView::OnNativeThemeChanged(const ui::NativeTheme* theme) {
     views::View::OnNativeThemeChanged(theme);
     return;
   }
+
   if (theme) {
     TrayPopupItemStyle style(theme,
                              TrayPopupItemStyle::FontStyle::DEFAULT_VIEW_LABEL);
+    icon_->SetImage(gfx::CreateVectorIcon(kSystemMenuScreenShareIcon,
+                                          style.GetIconColor()));
     style.SetupLabel(label_);
   }
 }