Continuing TODO items from a previous CL, remove the "extra_field" and "second_extra_field" keys from the API and replace with real keys from the Base Format View spec. Implement a rough layout that resembles the expanded mode of the view.

Outstanding items:

  - As stated above, the layout is still ugly.
  - We don't gracefully handle empty buttons. We don't crash, either, but it looks even uglier when the buttons are missing.
  - The buttons don't do anything when the user clicks on them.
  - The second icon is just a redraw of the first.
  - The timestamp is hardcoded to "10:43 AM" for layout purposes. I need to do more research on the appropriate date-formatting facilities available to us, and from that back out the timestamp field format in the API itself.

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

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

9 files changed, 229 insertions, 77 deletions

diff --git a/ui/message_center/base_format_view.cc b/ui/message_center/base_format_view.cc
index f8cec95..6f1790e 100644
--- a/ui/message_center/base_format_view.cc
+++ b/ui/message_center/base_format_view.cc
@@ -4,9 +4,11 @@
 
 #include "ui/message_center/base_format_view.h"
 
+#include "base/i18n/time_formatting.h"
 #include "grit/ui_resources.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/views/controls/button/image_button.h"
+#include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/grid_layout.h"
@@ -16,6 +18,13 @@ namespace message_center {
 const SkColor kNotificationColor = SkColorSetRGB(0xfe, 0xfe, 0xfe);
 const SkColor kNotificationReadColor = SkColorSetRGB(0xfa, 0xfa, 0xfa);
 
+const int kBaseFormatPrimaryIconWidth = 40;
+const int kBaseFormatSecondaryIconWidth = 16;
+const int kBaseFormatTimestampWidth = 60;
+const int kBaseFormatButtonWidth = 60;
+const int kBaseFormatPaddingBetweenItems = 10;
+const int kBaseFormatOuterHorizontalPadding = 18;
+
 BaseFormatView::BaseFormatView(
     NotificationList::Delegate* list_delegate,
     const NotificationList::Notification& notification)
@@ -29,91 +38,154 @@ BaseFormatView::~BaseFormatView() {
 }
 
 void BaseFormatView::SetUpView() {
+  DCHECK(close_button_);
+
   SkColor bg_color = notification_.is_read ?
       kNotificationReadColor : kNotificationColor;
   set_background(views::Background::CreateSolidBackground(bg_color));
 
-  icon_ = new views::ImageView;
-  icon_->SetImageSize(
-      gfx::Size(kWebNotificationIconSize, kWebNotificationIconSize));
-  icon_->SetImage(notification_.image);
+  views::ImageView* icon = new views::ImageView;
+  icon->SetImageSize(
+      gfx::Size(kBaseFormatPrimaryIconWidth, kBaseFormatPrimaryIconWidth));
+  icon->SetImage(notification_.image);
+
+  views::ImageView* second_icon = new views::ImageView;
+  second_icon->SetImageSize(
+      gfx::Size(kBaseFormatSecondaryIconWidth, kBaseFormatSecondaryIconWidth));
+  // TODO: set up second image
+  second_icon->SetImage(notification_.image);
 
   views::Label* title = new views::Label(notification_.title);
   title->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   title->SetFont(title->font().DeriveFont(0, gfx::Font::BOLD));
 
-  views::Label* extra_field = new views::Label(notification_.extra_field);
-  extra_field->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  views::Label* second_extra_field =
-      new views::Label(notification_.second_extra_field);
-  second_extra_field->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-
   views::Label* message = new views::Label(notification_.message);
   message->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   message->SetMultiLine(true);
-
-  close_button_ = new views::ImageButton(this);
-  close_button_->SetImage(
-      views::CustomButton::BS_NORMAL,
-      ResourceBundle::GetSharedInstance().GetImageSkiaNamed(
-          IDR_MESSAGE_CLOSE));
-  close_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                   views::ImageButton::ALIGN_MIDDLE);
+  message->SetElideBehavior(views::Label::ELIDE_AT_END);
+
+  views::Label* timestamp = NULL;
+  if (notification_.timestamp != base::Time()) {
+    timestamp = new views::Label(
+        base::TimeFormatTimeOfDay(notification_.timestamp));
+    timestamp->SetHorizontalAlignment(gfx::ALIGN_RIGHT);
+  }
+
+  // TODO(miket): unreadCount
+
+  views::LabelButton* button_one = NULL;
+  if (notification_.button_one_title.length() != 0) {
+    button_one = new views::LabelButton(
+        this, notification_.button_one_title);
+    button_one->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+    button_one->SetNativeTheme(true);
+  }
+  views::LabelButton* button_two = NULL;
+  if (button_one && notification_.button_two_title.length() != 0) {
+    button_two = new views::LabelButton(
+        this, notification_.button_two_title);
+    button_two->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+    button_two->SetNativeTheme(true);
+  }
+
+  views::Label* expanded_message = new views::Label(
+      notification_.expanded_message);
+  expanded_message->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  expanded_message->SetMultiLine(true);
+
+  // TODO(miket): Image thumbnail for image-type notifications (imageUrl)
 
   views::GridLayout* layout = new views::GridLayout(this);
   SetLayoutManager(layout);
 
   views::ColumnSet* columns = layout->AddColumnSet(0);
 
-  const int padding_width = kPaddingHorizontal / 2;
+  const int padding_width = kBaseFormatOuterHorizontalPadding / 2;
   columns->AddPaddingColumn(0, padding_width);
 
-  // Notification Icon.
+  // Column 0: Notification Icon.
   columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::LEADING,
                      0, /* resize percent */
                      views::GridLayout::FIXED,
-                     kWebNotificationIconSize, kWebNotificationIconSize);
+                     kBaseFormatPrimaryIconWidth, kBaseFormatPrimaryIconWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  columns->AddPaddingColumn(0, padding_width);
-
-  // Notification message text.
-  const int message_width = kWebNotificationWidth - kWebNotificationIconSize -
-      kWebNotificationButtonWidth - (padding_width * 3);
+  // Column 1: Notification message text and first button.
   columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL,
                      100, /* resize percent */
-                     views::GridLayout::FIXED,
-                     message_width, message_width);
+                     views::GridLayout::USE_PREF,
+                     kBaseFormatButtonWidth, kBaseFormatButtonWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  columns->AddPaddingColumn(0, padding_width);
+  // Column 2: Notification message text and second button.
+  columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL,
+                     100, /* resize percent */
+                     views::GridLayout::USE_PREF,
+                     kBaseFormatButtonWidth, kBaseFormatButtonWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  // Close button.
-  columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::LEADING,
+  // Column 3: Notification message text and timestamp.
+  columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL,
                      0, /* resize percent */
                      views::GridLayout::FIXED,
-                     kWebNotificationButtonWidth,
-                     kWebNotificationButtonWidth);
+                     kBaseFormatTimestampWidth, kBaseFormatTimestampWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
-  // Layout rows
-  layout->AddPaddingRow(0, kPaddingBetweenItems);
+  // Column 4: Close button and secondary icon.
+  columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::BASELINE,
+                     0, /* resize percent */
+                     views::GridLayout::FIXED,
+                     kBaseFormatSecondaryIconWidth,
+                     kBaseFormatSecondaryIconWidth);
+  columns->AddPaddingColumn(0, kBaseFormatPaddingBetweenItems);
 
+  // Lay out rows.
+  // Row 0: Just timestamp and close box.
   layout->StartRow(0, 0);
-  layout->AddView(icon_, 1, 2);
-  layout->AddView(title, 1, 1);
+  layout->SkipColumns(5);
+  if (timestamp)
+    layout->AddView(timestamp, 1, 1);
+  else
+    layout->SkipColumns(2);
   layout->AddView(close_button_, 1, 1);
 
+  // Row 1: Big icon, title.
+  layout->StartRow(0, 0);
+  layout->AddView(icon, 1, 3);
+  layout->AddView(title, 6, 1);
+
+  // Row 2: Continuation of big icon, message.
   layout->StartRow(0, 0);
-  layout->SkipColumns(2);
-  layout->AddView(message, 1, 1);
+  layout->SkipColumns(1);
+  layout->AddView(message, 6, 1);
+  layout->AddPaddingRow(0, kBaseFormatPaddingBetweenItems);
 
+  // Row 3: Continuation of big icon, two buttons, secondary icon.
   layout->StartRow(0,0);
   layout->SkipColumns(1);
-  layout->AddView(extra_field, 1, 1);
+  if (button_one) {
+    layout->AddView(button_one, 1, 1);
+    layout->AddView(button_two, 1, 1);
+  } else {
+    layout->SkipColumns(3);  // two buttons plus padding
+  }
+  layout->SkipColumns(1);
+  layout->AddView(second_icon, 1, 1);
+  layout->AddPaddingRow(0, kBaseFormatPaddingBetweenItems);
 
+  // Row 4: Secondary message.
   layout->StartRow(0,0);
   layout->SkipColumns(1);
-  layout->AddView(second_extra_field, 1, 1);
+  layout->AddView(expanded_message, 3, 1);
+
+  // A final bit of padding to make it look nice.
+  layout->AddPaddingRow(0, kBaseFormatPaddingBetweenItems);
+}
 
-  layout->AddPaddingRow(0, kPaddingBetweenItems);
+void BaseFormatView::ButtonPressed(views::Button* sender,
+                                   const ui::Event& event) {
+  // TODO(miket): propagate to caller.
+  MessageView::ButtonPressed(sender, event);
 }
 
 }  // namespace message_center
diff --git a/ui/message_center/base_format_view.h b/ui/message_center/base_format_view.h
index 8f35df0..131521a 100644
--- a/ui/message_center/base_format_view.h
+++ b/ui/message_center/base_format_view.h
@@ -8,12 +8,13 @@
 #include "ui/message_center/message_view.h"
 #include "ui/message_center/notification_list.h"
 
+namespace views {
+class ImageView;
+}
+
 namespace message_center {
 
-// An early version of a more comprehensive message view.
-//
-// TODO: add remaining fields from prototype specification, and bring cosmetics
-// to an acceptable level of polish.
+// A comprehensive message view.
 class BaseFormatView : public MessageView {
  public:
   BaseFormatView(NotificationList::Delegate* list_delegate,
@@ -23,6 +24,9 @@ class BaseFormatView : public MessageView {
   // MessageView
   virtual void SetUpView() OVERRIDE;
 
+  // views::ButtonListener
+  virtual void ButtonPressed(views::Button* sender, const ui::Event& event);
+
  protected:
   BaseFormatView();
 
diff --git a/ui/message_center/message_simple_view.cc b/ui/message_center/message_simple_view.cc
index 5e127d4..bc4f6a3 100644
--- a/ui/message_center/message_simple_view.cc
+++ b/ui/message_center/message_simple_view.cc
@@ -31,10 +31,10 @@ void MessageSimpleView::SetUpView() {
       kNotificationReadColor : kNotificationColor;
   set_background(views::Background::CreateSolidBackground(bg_color));
 
-  icon_ = new views::ImageView;
-  icon_->SetImageSize(
+  views::ImageView* icon = new views::ImageView;
+  icon->SetImageSize(
       gfx::Size(kWebNotificationIconSize, kWebNotificationIconSize));
-  icon_->SetImage(notification_.image);
+  icon->SetImage(notification_.image);
 
   views::Label* title = new views::Label(notification_.title);
   title->SetHorizontalAlignment(gfx::ALIGN_LEFT);
@@ -43,13 +43,6 @@ void MessageSimpleView::SetUpView() {
   message->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   message->SetMultiLine(true);
 
-  close_button_ = new views::ImageButton(this);
-  close_button_->SetImage(
-      views::CustomButton::BS_NORMAL,
-      ResourceBundle::GetSharedInstance().GetImageSkiaNamed(IDR_MESSAGE_CLOSE));
-  close_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                   views::ImageButton::ALIGN_MIDDLE);
-
   views::GridLayout* layout = new views::GridLayout(this);
   SetLayoutManager(layout);
 
@@ -88,7 +81,7 @@ void MessageSimpleView::SetUpView() {
   layout->AddPaddingRow(0, kPaddingBetweenItems);
 
   layout->StartRow(0, 0);
-  layout->AddView(icon_, 1, 2);
+  layout->AddView(icon, 1, 2);
   layout->AddView(title, 1, 1);
   layout->AddView(close_button_, 1, 1);
 
diff --git a/ui/message_center/message_view.cc b/ui/message_center/message_view.cc
index 931fc27..bf48a51 100644
--- a/ui/message_center/message_view.cc
+++ b/ui/message_center/message_view.cc
@@ -8,6 +8,8 @@
 #include "grit/ui_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/models/simple_menu_model.h"
+#include "ui/base/resource/resource_bundle.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/menu/menu_model_adapter.h"
 #include "ui/views/controls/menu/menu_runner.h"
@@ -107,9 +109,14 @@ MessageView::MessageView(
     const NotificationList::Notification& notification)
     : list_delegate_(list_delegate),
       notification_(notification),
-      icon_(NULL),
       close_button_(NULL),
       scroller_(NULL) {
+  close_button_ = new views::ImageButton(this);
+  close_button_->SetImage(
+      views::CustomButton::BS_NORMAL,
+      ResourceBundle::GetSharedInstance().GetImageSkiaNamed(IDR_MESSAGE_CLOSE));
+  close_button_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
+                                   views::ImageButton::ALIGN_MIDDLE);
 }
 
 MessageView::MessageView() {
@@ -152,7 +159,7 @@ ui::EventResult MessageView::OnGestureEvent(ui::GestureEvent* event) {
 }
 
 void MessageView::ButtonPressed(views::Button* sender,
-                                        const ui::Event& event) {
+                                const ui::Event& event) {
   if (sender == close_button_)
     list_delegate_->SendRemoveNotification(notification_.id);
 }
diff --git a/ui/message_center/message_view.h b/ui/message_center/message_view.h
index c2a7555..e59484d 100644
--- a/ui/message_center/message_view.h
+++ b/ui/message_center/message_view.h
@@ -12,7 +12,6 @@
 
 namespace views {
 class ImageButton;
-class ImageView;
 class ScrollView;
 }
 
@@ -61,7 +60,6 @@ class MessageView : public views::SlideOutView,
 
   NotificationList::Delegate* list_delegate_;
   NotificationList::Notification notification_;
-  views::ImageView* icon_;
   views::ImageButton* close_button_;
 
   views::ScrollView* scroller_;
diff --git a/ui/message_center/notification_list.cc b/ui/message_center/notification_list.cc
index 19747ba..3ed47b6 100644
--- a/ui/message_center/notification_list.cc
+++ b/ui/message_center/notification_list.cc
@@ -4,6 +4,7 @@
 
 #include "ui/message_center/notification_list.h"
 
+#include "base/time.h"
 #include "base/values.h"
 
 namespace message_center {
@@ -58,6 +59,11 @@ void NotificationList::AddNotification(
   notification.message = message;
   notification.display_source = display_source;
   notification.extension_id = extension_id;
+
+  // Initialize primitive fields before unpacking optional fields.
+  // timestamp initializes to default NULL time.
+  notification.priority = 0;
+
   UnpackOptionalFields(optional_fields, notification);
 
   PushNotification(notification);
@@ -68,12 +74,42 @@ void NotificationList::UnpackOptionalFields(
   if (!optional_fields)
     return;
 
-  if (optional_fields->HasKey(ui::notifications::kExtraFieldKey))
-    optional_fields->GetString(ui::notifications::kExtraFieldKey,
-                               &notification.extra_field);
-  if (optional_fields->HasKey(ui::notifications::kSecondExtraFieldKey))
-    optional_fields->GetString(ui::notifications::kSecondExtraFieldKey,
-                               &notification.second_extra_field);
+  if (optional_fields->HasKey(ui::notifications::kMessageIntentKey))
+    optional_fields->GetString(ui::notifications::kMessageIntentKey,
+                               &notification.message_intent);
+  if (optional_fields->HasKey(ui::notifications::kPriorityKey))
+    optional_fields->GetInteger(ui::notifications::kPriorityKey,
+                                &notification.priority);
+  if (optional_fields->HasKey(ui::notifications::kTimestampKey)) {
+    std::string time_string;
+    optional_fields->GetString(ui::notifications::kTimestampKey, &time_string);
+    base::Time::FromString(time_string.c_str(), &notification.timestamp);
+  }
+  // TODO
+  // if (optional_fields->HasKey(ui::notifications::kSecondIconUrlKey))
+  //   optional_fields->GetString(ui::notifications::kSecondIconUrlKey,
+  //                              &notification.second_icon_url);
+  if (optional_fields->HasKey(ui::notifications::kUnreadCountKey))
+    optional_fields->GetInteger(ui::notifications::kUnreadCountKey,
+                                &notification.unread_count);
+  if (optional_fields->HasKey(ui::notifications::kButtonOneTitleKey))
+    optional_fields->GetString(ui::notifications::kButtonOneTitleKey,
+                               &notification.button_one_title);
+  if (optional_fields->HasKey(ui::notifications::kButtonOneIntentKey))
+    optional_fields->GetString(ui::notifications::kButtonOneIntentKey,
+                               &notification.button_one_intent);
+  if (optional_fields->HasKey(ui::notifications::kButtonTwoTitleKey))
+    optional_fields->GetString(ui::notifications::kButtonTwoTitleKey,
+                               &notification.button_two_title);
+  if (optional_fields->HasKey(ui::notifications::kButtonTwoIntentKey))
+    optional_fields->GetString(ui::notifications::kButtonTwoIntentKey,
+                               &notification.button_two_intent);
+  if (optional_fields->HasKey(ui::notifications::kExpandedMessageKey))
+    optional_fields->GetString(ui::notifications::kExpandedMessageKey,
+                               &notification.expanded_message);
+  if (optional_fields->HasKey(ui::notifications::kImageUrlKey))
+    optional_fields->GetString(ui::notifications::kImageUrlKey,
+                               &notification.image_url);
 }
 
 void NotificationList::UpdateNotificationMessage(const std::string& old_id,
diff --git a/ui/message_center/notification_list.h b/ui/message_center/notification_list.h
index f8ec418..4a66660 100644
--- a/ui/message_center/notification_list.h
+++ b/ui/message_center/notification_list.h
@@ -9,6 +9,7 @@
 #include <string>
 
 #include "base/string16.h"
+#include "base/time.h"
 #include "ui/gfx/image/image_skia.h"
 #include "ui/message_center/message_center_export.h"
 #include "ui/notifications/notification_types.h"
@@ -34,8 +35,17 @@ class MESSAGE_CENTER_EXPORT NotificationList {
     std::string extension_id;
 
     // Begin unpacked values from optional_fields
-    string16 extra_field;
-    string16 second_extra_field;
+    string16 message_intent;
+    int priority;
+    base::Time timestamp;
+    gfx::ImageSkia second_image;
+    int unread_count;
+    string16 button_one_title;
+    string16 button_one_intent;
+    string16 button_two_title;
+    string16 button_two_intent;
+    string16 expanded_message;
+    string16 image_url;
     // End unpacked values
 
     gfx::ImageSkia image;
diff --git a/ui/notifications/notification_types.cc b/ui/notifications/notification_types.cc
index b4f0c83..9ec43c8 100644
--- a/ui/notifications/notification_types.cc
+++ b/ui/notifications/notification_types.cc
@@ -8,8 +8,30 @@ namespace ui {
 
 namespace notifications {
 
-const char kExtraFieldKey[] = "extra_field";
-const char kSecondExtraFieldKey[] = "second_extra_field";
+const char kMessageIntentKey[] = "message_intent";
+const char kPriorityKey[] = "priority";
+const char kTimestampKey[] = "timestamp";
+const char kSecondIconUrlKey[] = "second_icon_url";
+const char kUnreadCountKey[] = "unread_count";
+const char kButtonOneTitleKey[] = "button_one_title";
+const char kButtonOneIntentKey[] = "button_one_intent";
+const char kButtonTwoTitleKey[] = "button_two_title";
+const char kButtonTwoIntentKey[] = "button_two_intent";
+const char kExpandedMessageKey[] = "expanded_message";
+const char kImageUrlKey[] = "image_url";
+
+const char kSimpleType[] = "simple";
+const char kBaseFormatType[] = "base";
+
+NotificationType StringToNotificationType(std::string& string_type) {
+  if (string_type == kSimpleType)
+    return NOTIFICATION_TYPE_SIMPLE;
+  if (string_type == kBaseFormatType)
+    return NOTIFICATION_TYPE_BASE_FORMAT;
+
+  // In case of unrecognized string, fall back to most common type.
+  return NOTIFICATION_TYPE_SIMPLE;
+}
 
 }  // namespace notifications
 
diff --git a/ui/notifications/notification_types.h b/ui/notifications/notification_types.h
index d1c9725..049628f 100644
--- a/ui/notifications/notification_types.h
+++ b/ui/notifications/notification_types.h
@@ -5,24 +5,34 @@
 #ifndef UI_NOTIFICATIONS_NOTIFICATION_TYPES_H_
 #define UI_NOTIFICATIONS_NOTIFICATION_TYPES_H_
 
+#include <string>
+
 #include "ui/base/ui_export.h"
 
 namespace ui {
 
 namespace notifications {
 
-// TODO(miket): these are temporary field names that will be replaced very
-// shortly with real names. See
-// chrome/browser/extensions/api/notification/notification_api.cc for more
-// context.
-UI_EXPORT extern const char kExtraFieldKey[];
-UI_EXPORT extern const char kSecondExtraFieldKey[];
+// Keys for optional fields in Notification.
+UI_EXPORT extern const char kMessageIntentKey[];
+UI_EXPORT extern const char kPriorityKey[];
+UI_EXPORT extern const char kTimestampKey[];
+UI_EXPORT extern const char kSecondIconUrlKey[];
+UI_EXPORT extern const char kUnreadCountKey[];
+UI_EXPORT extern const char kButtonOneTitleKey[];
+UI_EXPORT extern const char kButtonOneIntentKey[];
+UI_EXPORT extern const char kButtonTwoTitleKey[];
+UI_EXPORT extern const char kButtonTwoIntentKey[];
+UI_EXPORT extern const char kExpandedMessageKey[];
+UI_EXPORT extern const char kImageUrlKey[];
 
 enum NotificationType {
   NOTIFICATION_TYPE_SIMPLE,
   NOTIFICATION_TYPE_BASE_FORMAT,
 };
 
+UI_EXPORT NotificationType StringToNotificationType(std::string& string_type);
+
 }  // namespace notifications
 
 }  // namespace ui