UI refinement for left/right ash tray and bubble.

Fix a bug which caused the cutoff the status area right edge in vertical alignment.
Adjust ash tray status area and bubble position in vertical alignment.
Adjust layout and text color of vertical clock UI.

BUG=127577
TEST=Ash tray status and bubble should look right for left/right launcher.


Review URL: https://chromiumcodereview.appspot.com/10668009

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@146003 0039d316-1c4b-4281-b951-d872f2087c98

ash/system/date/date_view.cc

@@ -12,6 +12,7 @@
 #include "base/utf_string_conversions.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/grid_layout.h"
 #include "ui/views/widget/widget.h"
 #include "unicode/datefmt.h"
 
@@ -25,6 +26,9 @@ namespace {
 // when the timer goes off.
 const int kTimerSlopSeconds = 1;
 
+// Top number text color of vertical clock.
+const SkColor kVerticalClockHourColor = SkColorSetRGB(0xBA, 0xBA, 0xBA);
+
 string16 FormatDate(const base::Time& time) {
   icu::UnicodeString date_string;
   scoped_ptr<icu::DateFormat> formatter(
@@ -154,19 +158,12 @@ void DateView::OnMouseExited(const views::MouseEvent& event) {
   SchedulePaint();
 }
 
-TimeView::TimeView()
+TimeView::TimeView(TrayDate::ClockLayout clock_layout)
     : hour_type_(
           ash::Shell::GetInstance()->tray_delegate()->GetHourClockType()) {
-  SetLayoutManager(
-      new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 0));
-  label_.reset(CreateLabel());
-  label_hour_.reset(CreateLabel());
-  label_minute_.reset(CreateLabel());
-  label_->set_owned_by_client();
-  label_hour_->set_owned_by_client();
-  label_minute_->set_owned_by_client();
+  SetupLabels();
   UpdateTextInternal(base::Time::Now());
-  AddChildView(label_.get());
+  UpdateClockLayout(clock_layout);
 }
 
 TimeView::~TimeView() {
@@ -187,13 +184,13 @@ void TimeView::UpdateTextInternal(const base::Time& now) {
   size_t colon_pos = current_time.find(ASCIIToUTF16(":"));
   string16 hour = current_time.substr(0, colon_pos);
   string16 minute = current_time.substr(colon_pos + 1);
-  if (hour.length() == 2) {
-    label_hour_->SetText(hour);
-  } else {
-    label_hour_->SetText(hour_type_ == base::k24HourClock ?
-        ASCIIToUTF16("0") + hour : hour + ASCIIToUTF16(":"));
-  }
-  label_minute_->SetText(minute);
+  label_hour_left_->SetText(hour.substr(0, 1));
+  label_hour_right_->SetText(hour.length() == 2 ?
+      hour.substr(1,1) : ASCIIToUTF16(":"));
+  label_minute_left_->SetText(minute.substr(0, 1));
+  label_minute_right_->SetText(minute.substr(1, 1));
+
+  Layout();
 }
 
 bool TimeView::PerformAction(const views::Event& event) {
@@ -208,18 +205,33 @@ bool TimeView::OnMousePressed(const views::MouseEvent& event) {
 void TimeView::UpdateClockLayout(TrayDate::ClockLayout clock_layout){
   SetBorder(clock_layout);
   if (clock_layout == TrayDate::HORIZONTAL_CLOCK) {
-    RemoveChildView(label_hour_.get());
-    RemoveChildView(label_minute_.get());
+    RemoveChildView(label_hour_left_.get());
+    RemoveChildView(label_hour_right_.get());
+    RemoveChildView(label_minute_left_.get());
+    RemoveChildView(label_minute_right_.get());
     SetLayoutManager(
         new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 0));
     AddChildView(label_.get());
   } else {
     RemoveChildView(label_.get());
-    SetLayoutManager(
-        new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, 0));
-    AddChildView(label_hour_.get());
-    AddChildView(label_minute_.get());
+    views::GridLayout* layout = new views::GridLayout(this);
+    SetLayoutManager(layout);
+    views::ColumnSet* columns = layout->AddColumnSet(0);
+    columns->AddPaddingColumn(0, 6);
+    columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
+                       0, views::GridLayout::USE_PREF, 0, 0);
+    columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER,
+                       0, views::GridLayout::USE_PREF, 0, 0);
+    layout->AddPaddingRow(0, 4);
+    layout->StartRow(0, 0);
+    layout->AddView(label_hour_left_.get());
+    layout->AddView(label_hour_right_.get());
+    layout->StartRow(0, 0);
+    layout->AddView(label_minute_left_.get());
+    layout->AddView(label_minute_right_.get());
+    layout->AddPaddingRow(0, 4);
   }
+  Layout();
   set_focusable(true);
 }
 
@@ -227,7 +239,29 @@ void TimeView::SetBorder(TrayDate::ClockLayout clock_layout) {
   if (clock_layout == TrayDate::HORIZONTAL_CLOCK)
     set_border(views::Border::CreateEmptyBorder(0, 10, 0, 7));
   else
-    set_border(views::Border::CreateEmptyBorder(2, 12, 2, 2));
+    set_border(NULL);
+}
+
+void TimeView::SetupLabels() {
+  label_.reset(CreateLabel());
+  SetupLabel(label_.get());
+  label_hour_left_.reset(CreateLabel());
+  SetupLabel(label_hour_left_.get());
+  label_hour_right_.reset(CreateLabel());
+  SetupLabel(label_hour_right_.get());
+  label_minute_left_.reset(CreateLabel());
+  SetupLabel(label_minute_left_.get());
+  label_minute_right_.reset(CreateLabel());
+  SetupLabel(label_minute_right_.get());
+  label_hour_left_->SetEnabledColor(kVerticalClockHourColor);
+  label_hour_right_->SetEnabledColor(kVerticalClockHourColor);
+}
+
+void TimeView::SetupLabel(views::Label* label) {
+  label->set_owned_by_client();
+  SetupLabelForTray(label);
+  gfx::Font font = label->font();
+  label->SetFont(font.DeriveFont(0, font.GetStyle() & ~gfx::Font::BOLD));
 }
 
 }  // namespace tray

ash/system/date/date_view.h

@@ -82,12 +82,14 @@ class DateView : public BaseDateTimeView {
 // Tray view used to display the current time.
 class TimeView : public BaseDateTimeView {
  public:
-  TimeView();
+  TimeView(TrayDate::ClockLayout clock_layout);
   virtual ~TimeView();
 
   views::Label* label() const { return label_.get(); }
-  views::Label* label_hour() const { return label_hour_.get(); }
-  views::Label* label_minute() const { return label_minute_.get(); }
+  views::Label* label_hour_left() const { return label_hour_left_.get(); }
+  views::Label* label_hour_right() const { return label_hour_right_.get(); }
+  views::Label* label_minute_left() const { return label_minute_left_.get(); }
+  views::Label* label_minute_right() const { return label_minute_right_.get(); }
 
   // Updates the format of the displayed time.
   void UpdateTimeFormat();
@@ -106,10 +108,14 @@ class TimeView : public BaseDateTimeView {
   virtual bool OnMousePressed(const views::MouseEvent& event) OVERRIDE;
 
   void SetBorder(TrayDate::ClockLayout clock_layout);
+  void SetupLabels();
+  void SetupLabel(views::Label* label);
 
   scoped_ptr<views::Label> label_;
-  scoped_ptr<views::Label> label_hour_;
-  scoped_ptr<views::Label> label_minute_;
+  scoped_ptr<views::Label> label_hour_left_;
+  scoped_ptr<views::Label> label_hour_right_;
+  scoped_ptr<views::Label> label_minute_left_;
+  scoped_ptr<views::Label> label_minute_right_;
 
   base::HourClockType hour_type_;
 

ash/system/date/tray_date.cc

@@ -130,16 +130,11 @@ TrayDate::~TrayDate() {
 
 views::View* TrayDate::CreateTrayView(user::LoginStatus status) {
   CHECK(time_tray_ == NULL);
-  time_tray_ = new tray::TimeView();
   ClockLayout clock_layout =
       ash::Shell::GetInstance()->system_tray()->shelf_alignment() ==
          SHELF_ALIGNMENT_BOTTOM ?
       HORIZONTAL_CLOCK : VERTICAL_CLOCK;
-  time_tray_->UpdateClockLayout(clock_layout);
-  SetupLabelForTimeTray(time_tray_->label());
-  SetupLabelForTimeTray(time_tray_->label_hour());
-  SetupLabelForTimeTray(time_tray_->label_minute());
-
+  time_tray_ = new tray::TimeView(clock_layout);
   views::View* view = new TrayItemView;
   view->AddChildView(time_tray_);
   return view;
@@ -184,11 +179,5 @@ void TrayDate::Refresh() {
     time_tray_->UpdateText();
 }
 
-void TrayDate::SetupLabelForTimeTray(views::Label* label) {
-  SetupLabelForTray(label);
-  gfx::Font font = label->font();
-  label->SetFont(font.DeriveFont(0, font.GetStyle() & ~gfx::Font::BOLD));
-}
-
 }  // namespace internal
 }  // namespace ash

ash/system/status_area_widget.cc

@@ -335,11 +335,11 @@ void StatusAreaWidget::AddWebNotificationTray(
 
 void StatusAreaWidget::SetShelfAlignment(ShelfAlignment alignment) {
   widget_delegate_->set_alignment(alignment);
-  widget_delegate_->UpdateLayout();
   if (system_tray_)
     system_tray_->SetShelfAlignment(alignment);
   if (web_notification_tray_)
     web_notification_tray_->SetShelfAlignment(alignment);
+  widget_delegate_->UpdateLayout();
 }
 
 void StatusAreaWidget::SetPaintsBackground(

ash/system/status_area_widget_delegate.cc

@@ -110,10 +110,15 @@ void StatusAreaWidgetDelegate::UpdateLayout() {
     }
   }
   Layout();
+  UpdateWidgetSize();
 }
 
 void StatusAreaWidgetDelegate::ChildPreferredSizeChanged(View* child) {
   // Need to resize the window when trays or items are added/removed.
+  UpdateWidgetSize();
+}
+
+void StatusAreaWidgetDelegate::UpdateWidgetSize() {
   if (GetWidget())
     GetWidget()->SetSize(GetPreferredSize());
 }

ash/system/status_area_widget_delegate.h

@@ -51,6 +51,8 @@ class ASH_EXPORT StatusAreaWidgetDelegate : public views::AccessiblePaneView,
   virtual void ChildPreferredSizeChanged(View* child) OVERRIDE;
 
  private:
+  void UpdateWidgetSize();
+
   const FocusCycler* focus_cycler_for_testing_;
   ShelfAlignment alignment_;
 

ash/system/tray/system_tray.cc

@@ -48,6 +48,16 @@
 #include "ui/views/layout/fill_layout.h"
 #include "ui/views/view.h"
 
+namespace {
+
+// Adjust the size of SystemTrayContainer with additional padding.
+const int kTrayContainerVerticalPaddingBottomAlignment  = 1;
+const int kTrayContainerHorizontalPaddingBottomAlignment  = 1;
+const int kTrayContainerVerticalPaddingVerticalAlignment  = 1;
+const int kTrayContainerHorizontalPaddingVerticalAlignment = 2;
+
+}  // namespace
+
 namespace ash {
 
 namespace internal {
@@ -59,8 +69,26 @@ class SystemTrayContainer : public views::View {
   SystemTrayContainer() {}
   virtual ~SystemTrayContainer() {}
 
-  void SetLayoutManager(views::LayoutManager* layout_manager) {
-    views::View::SetLayoutManager(layout_manager);
+  void UpdateLayout(ShelfAlignment alignment) {
+    // Adjust the size of status tray dark background by adding additional
+    // empty border.
+    if (alignment == SHELF_ALIGNMENT_BOTTOM) {
+      set_border(views::Border::CreateEmptyBorder(
+          kTrayContainerVerticalPaddingBottomAlignment,
+          kTrayContainerHorizontalPaddingBottomAlignment,
+          kTrayContainerVerticalPaddingBottomAlignment,
+          kTrayContainerHorizontalPaddingBottomAlignment));
+      views::View::SetLayoutManager(new views::BoxLayout(
+          views::BoxLayout::kHorizontal, 0, 0, 0));
+    } else {
+      set_border(views::Border::CreateEmptyBorder(
+          kTrayContainerVerticalPaddingVerticalAlignment,
+          kTrayContainerHorizontalPaddingVerticalAlignment,
+          kTrayContainerVerticalPaddingVerticalAlignment,
+          kTrayContainerHorizontalPaddingVerticalAlignment));
+      views::View::SetLayoutManager(new views::BoxLayout(
+          views::BoxLayout::kVertical, 0, 0, 0));
+    }
     PreferredSizeChanged();
   }
 
@@ -134,10 +162,7 @@ SystemTray::SystemTray()
       default_bubble_height_(0),
       hide_notifications_(false) {
   tray_container_ = new internal::SystemTrayContainer;
-  tray_container_->SetLayoutManager(new views::BoxLayout(
-      views::BoxLayout::kHorizontal, 0, 0, 0));
-  tray_container_->set_border(
-      views::Border::CreateEmptyBorder(1, 1, 1, 1));
+  tray_container_->UpdateLayout(shelf_alignment());
   SetContents(tray_container_);
   SetBorder();
 }
@@ -487,14 +512,14 @@ void SystemTray::SetBorder() {
         kPaddingFromRightEdgeOfScreenBottomAlignment));
   } else if (shelf_alignment() == SHELF_ALIGNMENT_LEFT) {
     set_border(views::Border::CreateEmptyBorder(0,
-        kPaddingFromEdgeOfScreenVerticalAlignment,
+        kPaddingFromOuterEdgeOfLauncherVerticalAlignment,
         kPaddingFromBottomOfScreenVerticalAlignment,
-        kPaddingFromEdgeOfLauncherVerticalAlignment));
+        kPaddingFromInnerEdgeOfLauncherVerticalAlignment));
   } else {
     set_border(views::Border::CreateEmptyBorder(0,
-        kPaddingFromEdgeOfLauncherVerticalAlignment,
+        kPaddingFromInnerEdgeOfLauncherVerticalAlignment,
         kPaddingFromBottomOfScreenVerticalAlignment,
-        kPaddingFromEdgeOfScreenVerticalAlignment));
+        kPaddingFromOuterEdgeOfLauncherVerticalAlignment));
   }
 }
 
@@ -504,10 +529,7 @@ void SystemTray::SetShelfAlignment(ShelfAlignment alignment) {
   internal::TrayBackgroundView::SetShelfAlignment(alignment);
   UpdateAfterShelfAlignmentChange(alignment);
   SetBorder();
-  tray_container_->SetLayoutManager(new views::BoxLayout(
-      alignment == SHELF_ALIGNMENT_BOTTOM ?
-          views::BoxLayout::kHorizontal : views::BoxLayout::kVertical,
-      0, 0, 0));
+  tray_container_->UpdateLayout(alignment);
 }
 
 bool SystemTray::PerformAction(const views::Event& event) {

ash/system/tray/system_tray_bubble.cc

@@ -355,10 +355,10 @@ gfx::Rect SystemTrayBubble::GetAnchorRect() const {
                 0 : kPaddingFromRightEdgeOfScreenBottomAlignment,
             kPaddingFromBottomOfScreenBottomAlignment);
       } else if (tray_->shelf_alignment() == SHELF_ALIGNMENT_LEFT) {
-        rect.Inset(0, 0, kPaddingFromEdgeOfLauncherVerticalAlignment,
+        rect.Inset(0, 0, kPaddingFromInnerEdgeOfLauncherVerticalAlignment,
                    kPaddingFromBottomOfScreenVerticalAlignment);
       } else {
-        rect.Inset(kPaddingFromEdgeOfLauncherVerticalAlignment + 4,
+        rect.Inset(kPaddingFromInnerEdgeOfLauncherVerticalAlignment,
                    0, 0, kPaddingFromBottomOfScreenVerticalAlignment);
       }
     } else if (anchor_type_ == ANCHOR_TYPE_BUBBLE) {

ash/system/tray/tray_background_view.cc

@@ -39,7 +39,7 @@ class TrayBackground : public views::Background {
     paint.setStyle(SkPaint::kFill_Style);
     paint.setColor(SkColorSetARGB(alpha_, 0, 0, 0));
     SkPath path;
-    gfx::Rect bounds(view->bounds());
+    gfx::Rect bounds(view->GetLocalBounds());
     SkScalar radius = SkIntToScalar(kTrayRoundedBorderRadius);
     path.addRoundRect(gfx::RectToSkRect(bounds), radius, radius);
     canvas->DrawPath(path, paint);
@@ -60,9 +60,6 @@ TrayBackgroundView::TrayBackgroundView()
           this, 0, kTrayBackgroundAlpha)),
       ALLOW_THIS_IN_INITIALIZER_LIST(hover_background_animator_(
           this, 0, kTrayBackgroundHoverAlpha - kTrayBackgroundAlpha)) {
-  set_border(views::Border::CreateEmptyBorder(0, 0,
-        kPaddingFromBottomOfScreenBottomAlignment,
-        kPaddingFromRightEdgeOfScreenBottomAlignment));
   set_notify_enter_exit_on_child(true);
 
   // Initially we want to paint the background, but without the hover effect.

ash/system/tray/tray_constants.cc

@@ -10,8 +10,8 @@ namespace ash {
 
 const int kPaddingFromRightEdgeOfScreenBottomAlignment = 15;
 const int kPaddingFromBottomOfScreenBottomAlignment = 10;
-const int kPaddingFromEdgeOfScreenVerticalAlignment = 4;
-const int kPaddingFromEdgeOfLauncherVerticalAlignment = 4;
+const int kPaddingFromOuterEdgeOfLauncherVerticalAlignment = 8;
+const int kPaddingFromInnerEdgeOfLauncherVerticalAlignment = 7;
 const int kPaddingFromBottomOfScreenVerticalAlignment = 10;
 
 const int kTrayPopupAutoCloseDelayInSeconds = 2;

ash/system/tray/tray_constants.h

@@ -12,9 +12,8 @@ namespace ash {
 
 extern const int kPaddingFromRightEdgeOfScreenBottomAlignment;
 extern const int kPaddingFromBottomOfScreenBottomAlignment;
-extern const int kPaddingFromEdgeOfScreenVerticalAlignment;
-extern const int kPaddingFromEdgeOfLauncherVerticalAlignment;
-extern const int kPaddingFromRightEdgeOfScreenRightAlignment;
+extern const int kPaddingFromOuterEdgeOfLauncherVerticalAlignment;
+extern const int kPaddingFromInnerEdgeOfLauncherVerticalAlignment;
 extern const int kPaddingFromBottomOfScreenVerticalAlignment;
 
 extern const int kTrayPopupAutoCloseDelayInSeconds;