Implement new volume mute button.

Add a new TrayBarButtonWithTitle class which can be used for both audio and brightness UI for toggle audio/brightness state.
Clip the extra empty space around left/right bar images so that the bar image would not have too much empty space around itself.
The new audio/brightness slider will be implemented in another cl.

BUG=122832
TEST=The new mute segment should show up and work on uber tray bubble.
TBR=oshima@chromium.org


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

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

ash/ash_strings.grd

@@ -297,6 +297,9 @@ This file contains the strings for ash.
       <message name="IDS_ASH_STATUS_TRAY_VOLUME" desc="The accessible text for the volume slider.">
         Volume
       </message>
+      <message name="IDS_ASH_STATUS_TRAY_VOLUME_MUTE" desc="The label text for the volume mute segment.">
+        mute
+      </message>
       <message name="IDS_ASH_STATUS_TRAY_DISABLE_BLUETOOTH" desc="The label used in the tray popup to disable bluetooth.">
         Disable Bluetooth
       </message>

ash/system/audio/tray_volume.cc

@@ -91,6 +91,26 @@ class VolumeButton : public views::ToggleImageButton {
   DISALLOW_COPY_AND_ASSIGN(VolumeButton);
 };
 
+class MuteButton : public ash::internal::TrayBarButtonWithTitle {
+ public:
+  explicit MuteButton(views::ButtonListener* listener)
+      : TrayBarButtonWithTitle(listener,
+            IDS_ASH_STATUS_TRAY_VOLUME_MUTE,
+            kTrayBarButtonWidth) {
+    Update();
+  }
+  virtual ~MuteButton() {}
+
+  void Update() {
+    ash::SystemTrayDelegate* delegate =
+        ash::Shell::GetInstance()->tray_delegate();
+    UpdateButton(delegate->IsAudioMuted());
+    SchedulePaint();
+  }
+
+  DISALLOW_COPY_AND_ASSIGN(MuteButton);
+};
+
 class VolumeView : public views::View,
                    public views::ButtonListener,
                    public views::SliderListener {
@@ -102,6 +122,9 @@ class VolumeView : public views::View,
     icon_ = new VolumeButton(this);
     AddChildView(icon_);
 
+    mute_ = new MuteButton(this);
+    AddChildView(mute_);
+
     ash::SystemTrayDelegate* delegate =
         ash::Shell::GetInstance()->tray_delegate();
     slider_ = new views::Slider(this, views::Slider::HORIZONTAL);
@@ -125,6 +148,7 @@ class VolumeView : public views::View,
     // did not change. In that case, setting the value of the slider won't
     // trigger an update. So explicitly trigger an update.
     icon_->Update();
+    mute_->Update();
     slider_->set_enable_accessibility_events(true);
   }
 
@@ -138,7 +162,7 @@ class VolumeView : public views::View,
   // Overridden from views::ButtonListener.
   virtual void ButtonPressed(views::Button* sender,
                              const views::Event& event) OVERRIDE {
-    CHECK(sender == icon_);
+    CHECK(sender == icon_ || sender == mute_);
     ash::SystemTrayDelegate* delegate =
         ash::Shell::GetInstance()->tray_delegate();
     delegate->SetAudioMuted(!delegate->IsAudioMuted());
@@ -158,6 +182,7 @@ class VolumeView : public views::View,
   }
 
   VolumeButton* icon_;
+  MuteButton* mute_;
   views::Slider* slider_;
 
   DISALLOW_COPY_AND_ASSIGN(VolumeView);

ash/system/tray/tray_constants.cc

@@ -30,6 +30,7 @@ const int kTrayPopupTextSpacingVertical = 4;
 const int kTrayPopupItemHeight = 48;
 const int kTrayPopupDetailsIconWidth = 27;
 const int kTrayRoundedBorderRadius = 2;
+const int kTrayBarButtonWidth = 39;
 
 const SkColor kBackgroundColor = SkColorSetRGB(0xfe, 0xfe, 0xfe);
 const SkColor kHoverBackgroundColor = SkColorSetRGB(0xf5, 0xf5, 0xf5);

ash/system/tray/tray_constants.h

@@ -31,6 +31,7 @@ extern const int kTrayPopupTextSpacingVertical;
 extern const int kTrayPopupItemHeight;
 extern const int kTrayPopupDetailsIconWidth;
 extern const int kTrayRoundedBorderRadius;
+extern const int kTrayBarButtonWidth;
 
 extern const SkColor kBackgroundColor;
 extern const SkColor kHoverBackgroundColor;

ash/system/tray/tray_views.cc

@@ -28,6 +28,18 @@ namespace {
 const int kIconPaddingLeft = 5;
 const int kPaddingAroundButtons = 5;
 
+const int kBarImagesActive[] = {
+  IDR_AURA_UBER_TRAY_BAR_BUTTON_ACTIVE_LEFT,
+  IDR_AURA_UBER_TRAY_BAR_BUTTON_ACTIVE_CENTER,
+  IDR_AURA_UBER_TRAY_BAR_BUTTON_ACTIVE_RIGHT,
+};
+
+const int kBarImagesDisabled[] = {
+  IDR_AURA_UBER_TRAY_BAR_BUTTON_DISABLED_LEFT,
+  IDR_AURA_UBER_TRAY_BAR_BUTTON_DISABLED_CENTER,
+  IDR_AURA_UBER_TRAY_BAR_BUTTON_DISABLED_RIGHT,
+};
+
 views::View* CreatePopupHeaderButtonsContainer() {
   views::View* view = new views::View;
   view->SetLayoutManager(new
@@ -430,6 +442,83 @@ void TrayPopupHeaderButton::StateChanged() {
   SchedulePaint();
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// TrayBarButtonWithTitle
+
+class TrayBarButtonWithTitle::TrayBarButton
+  : public views::View {
+ public:
+  TrayBarButton(const int bar_active_images[], const int bar_disabled_images[])
+    : views::View(),
+      bar_active_images_(bar_active_images),
+      bar_disabled_images_(bar_disabled_images),
+      painter_(new views::HorizontalPainter(bar_active_images_)){
+  }
+  virtual ~TrayBarButton() {}
+
+  // Overriden from views::View
+  virtual void OnPaint(gfx::Canvas* canvas) OVERRIDE {
+    painter_->Paint(canvas, size());
+  }
+
+  void Update(bool control_on) {
+    painter_.reset(new views::HorizontalPainter(
+        control_on ? bar_active_images_ : bar_disabled_images_));
+    SchedulePaint();
+  }
+
+ private:
+  const int* bar_active_images_;
+  const int* bar_disabled_images_;
+  scoped_ptr<views::HorizontalPainter> painter_;
+
+  DISALLOW_COPY_AND_ASSIGN(TrayBarButton);
+};
+
+TrayBarButtonWithTitle::TrayBarButtonWithTitle(views::ButtonListener* listener,
+                                               int title_id,
+                                               int width)
+    : views::CustomButton(listener),
+      image_(new TrayBarButton(kBarImagesActive, kBarImagesDisabled)),
+      title_(new views::Label),
+      width_(width) {
+  AddChildView(image_);
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+  string16 text = rb.GetLocalizedString(title_id);
+  title_->SetText(text);
+  AddChildView(title_);
+
+  image_height_ = ui::ResourceBundle::GetSharedInstance().GetImageNamed(
+      kBarImagesActive[0]).ToImageSkia()->height();
+}
+
+TrayBarButtonWithTitle::~TrayBarButtonWithTitle() {}
+
+gfx::Size TrayBarButtonWithTitle::GetPreferredSize() {
+  return gfx::Size(width_, kTrayPopupItemHeight);
+}
+
+void TrayBarButtonWithTitle::Layout() {
+  gfx::Size title_size = title_->GetPreferredSize();
+  gfx::Rect rect(GetContentsBounds());
+  int bar_image_y = rect.height() / 2 - image_height_ / 2;
+  gfx::Rect bar_image_rect(rect.x(),
+                           bar_image_y,
+                           rect.width(),
+                           image_height_);
+  image_->SetBoundsRect(bar_image_rect);
+  // The image_ has some empty space below the bar image, move the title
+  // a little bit up to look closer to the bar.
+  title_->SetBounds(rect.x(),
+                    bar_image_y + image_height_ - 3,
+                    rect.width(),
+                    title_size.height());
+}
+
+void TrayBarButtonWithTitle::UpdateButton(bool control_on) {
+  image_->Update(control_on);
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // SpecialPopupRow
 

ash/system/tray/tray_views.h

@@ -9,6 +9,7 @@
 #include "ash/wm/shelf_types.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/size.h"
+#include "ui/views/controls/button/custom_button.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/button/text_button.h"
 #include "ui/views/controls/image_view.h"
@@ -230,6 +231,33 @@ class TrayPopupHeaderButton : public views::ToggleImageButton {
   DISALLOW_COPY_AND_ASSIGN(TrayPopupHeaderButton);
 };
 
+// A button with a bar image and title text below the bar image. These buttons
+// will be used in audio and brightness control UI, which can be toggled with
+// on/off states.
+class TrayBarButtonWithTitle : public views::CustomButton {
+ public:
+  TrayBarButtonWithTitle(views::ButtonListener* listener,
+                                  int title_id,
+                                  int width);
+  virtual ~TrayBarButtonWithTitle();
+
+  // Overridden from views::View:
+  virtual gfx::Size GetPreferredSize() OVERRIDE;
+  virtual void Layout() OVERRIDE;
+
+  void UpdateButton(bool control_on);
+
+ private:
+  class TrayBarButton;
+
+  TrayBarButton* image_;
+  views::Label* title_;
+  int width_;
+  int image_height_;
+
+  DISALLOW_COPY_AND_ASSIGN(TrayBarButtonWithTitle);
+};
+
 // The 'special' looking row in the uber-tray popups. This is usually the bottom
 // row in the popups, and has a fixed height.
 class SpecialPopupRow : public views::View {

ui/resources/ui_resources.grd

@@ -154,7 +154,13 @@
         <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_UPDATE_DARK" file="ash/status_update_dark.png" />
         <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_VOLUME_LEVELS" file="ash/status_volume_dark.png" />
         <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_VOLUME_MUTE" file="ash/status_volume_mute.png" />
-        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_WEB_NOTIFICATON" file="ash/statusbar_notifications.png" />
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_BAR_BUTTON_ACTIVE_CENTER" file="ash/slider_center_active.png" />
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_BAR_BUTTON_ACTIVE_LEFT" file="ash/slider_left_active.png" />
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_BAR_BUTTON_ACTIVE_RIGHT" file="ash/slider_right_active.png" />
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_BAR_BUTTON_DISABLED_CENTER" file="ash/slider_center_disabled.png" />
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_BAR_BUTTON_DISABLED_LEFT" file="ash/slider_left_disabled.png" />
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_BAR_BUTTON_DISABLED_RIGHT" file="ash/slider_right_disabled.png" />        
+        <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_WEB_NOTIFICATON" file="ash/statusbar_notifications.png" />        
         <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_WIFI_DISABLED" file="ash/status_wifi_disabled.png" />
         <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_WIFI_DISABLED_HOVER" file="ash/status_wifi_disabled_h.png" />
         <structure type="chrome_scaled_image" name="IDR_AURA_UBER_TRAY_WIFI_ENABLED" file="ash/status_wifi_enabled.png" />