Added padding below text in notifications.

This padding was in some previous versions but got lost somewhere along
the way. This change restores it so there are always at least 12 pixels
between the baseline of the last line of text and the bottom of the card
or the image below the text. This will be true for WebKit, simple,
basic, and image notifications but also for list ones.

Note that although there will be exactly 12 pixels of space on Windows,
there will be 13 pixels On Chrome OS because different fonts are used
there, and also that if the Chrome OS system font changes that number of
pixels may change slightly.

This change also makes the padding between the top of notification
text and the notification card be 12 pixels, as it was designed to be.
It had somehow become 11 pixels.

BUG=225871
TEST=Bring up a notification, take a screenshot, and count pixels.

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

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

ui/message_center/cocoa/notification_controller.mm

@@ -14,6 +14,12 @@
 #include "ui/message_center/notification.h"
 #include "ui/message_center/notification_change_observer.h"
 
+namespace {
+
+// Compensates for padding already provided by UI elements involved.
+const int kTextTopPaddingAdjustment = -6;
+
+}  // namespace
 @interface MCNotificationController (Private)
 // Configures a NSBox to be borderless, titleless, and otherwise appearance-
 // free.
@@ -79,9 +85,11 @@
 
   // In this basic notification UI, the message body is the bottom-most
   // vertical element. If it is out of the rootView's bounds, resize the view.
-  if (NSMinY([message_ frame]) < message_center::kTextTopPadding) {
-    rootFrame.size.height += message_center::kTextTopPadding -
-        NSMinY([message_ frame]);
+  if (NSMinY([message_ frame]) <
+          message_center::kTextTopPadding + kTextTopPaddingAdjustment) {
+    rootFrame.size.height += message_center::kTextTopPadding +
+                             kTextTopPaddingAdjustment -
+                             NSMinY([message_ frame]);
   }
 
   [rootView setFrame:rootFrame];
@@ -159,7 +167,8 @@
   CGFloat delta =
       [GTMUILocalizerAndLayoutTweaker sizeToFitFixedWidthTextField:title_];
   frame.size.height = delta;
-  frame.origin.y = NSMaxY(rootFrame) - message_center::kTextTopPadding - delta;
+  frame.origin.y = NSMaxY(rootFrame) - message_center::kTextTopPadding +
+                   kTextTopPaddingAdjustment - delta;
   [title_ setFrame:frame];
 }
 
@@ -175,7 +184,8 @@
   CGFloat delta =
       [GTMUILocalizerAndLayoutTweaker sizeToFitFixedWidthTextField:message_];
   frame.size.height = delta;
-  frame.origin.y = maxY - message_center::kTextTopPadding - delta;
+  frame.origin.y = maxY - message_center::kTextTopPadding +
+                   kTextTopPaddingAdjustment - delta;
   [message_ setFrame:frame];
 }
 

ui/message_center/message_center_constants.cc

@@ -16,13 +16,13 @@ const int kSettingsIconSize = 16;
 
 // Within a notification ///////////////////////////////////////////////////////
 
-// Pixel dimensions (H = horizontal, V = vertical).
+// Pixel dimensions.
 const int kControlButtonSize = 29;
 const int kNotificationWidth = 360;
 const int kIconToTextPadding = 16;
-const int kTextTopPadding = 6;
+const int kTextTopPadding = 12;
 
-// Text sizes
+// Text sizes.
 const int kTitleFontSize = 14;
 const int kMessageFontSize = 12;
 
@@ -41,7 +41,7 @@ const int kAutocloseHighPriorityDelaySeconds = 25;
 
 // Around notifications ////////////////////////////////////////////////////////
 
-// Pixel dimensions (H = horizontal, V = vertical).
+// Pixel dimensions.
 const int kMarginBetweenItems = 10;
 
 // Colors.

ui/message_center/message_center_constants.h

@@ -27,7 +27,7 @@ extern const int kNotificationWidth;  // H size of the whole card.
 extern const int kIconToTextPadding;  // H space between icon & title/message.
 extern const int kTextTopPadding;     // V space between text elements.
 
-// Text sizes
+// Text sizes.
 extern const int kTitleFontSize;    // For title only.
 extern const int kMessageFontSize;  // For everything but title.
 

ui/message_center/views/notification_view.cc

@@ -32,8 +32,8 @@ namespace {
 const int kIconColumnWidth = message_center::kNotificationIconSize;
 const int kLegacyIconSize = 40;
 const int kTextLeftPadding = kIconColumnWidth +
-    message_center::kIconToTextPadding;
-const int kTextBottomPadding = 6;
+                             message_center::kIconToTextPadding;
+const int kTextBottomPadding = 12;
 const int kTextRightPadding = 23;
 const int kItemTitleToMessagePadding = 3;
 const int kButtonHeight = 38;
@@ -55,21 +55,25 @@ const SkColor kDimTextBackgroundColor = SK_ColorBLACK;
 const SkColor kButtonSeparatorColor = SkColorSetRGB(234, 234, 234);
 const SkColor kHoveredButtonBackgroundColor = SkColorSetRGB(243, 243, 243);
 
-// Static.
+// static
 views::Background* MakeBackground(
     SkColor color = message_center::kNotificationBackgroundColor) {
   return views::Background::CreateSolidBackground(color);
 }
 
-// Static.
-views::Border* MakeBorder(int top,
-                          int bottom,
-                          int left = kTextLeftPadding,
-                          int right = kTextRightPadding,
-                          SkColor color = 0x00000000) {
-  return (color == 0x00000000) ?
-         views::Border::CreateEmptyBorder(top, left, bottom, right) :
-         views::Border::CreateSolidSidedBorder(top, left, bottom, right, color);
+// static
+views::Border* MakeEmptyBorder(int top, int left, int bottom, int right) {
+  return views::Border::CreateEmptyBorder(top, left, bottom, right);
+}
+
+// static
+views::Border* MakeTextBorder(int top, int bottom) {
+  return MakeEmptyBorder(top, kTextLeftPadding, bottom, kTextRightPadding);
+}
+
+// static
+views::Border* MakeSeparatorBorder(int top, int left, SkColor color) {
+  return views::Border::CreateSolidSidedBorder(top, left, 0, 0, color);
 }
 
 // ContainerView ///////////////////////////////////////////////////////////////
@@ -277,7 +281,7 @@ void NotificationButton::SetIcon(const gfx::ImageSkia& image) {
     icon_->SetImage(image);
     icon_->SetHorizontalAlignment(views::ImageView::LEADING);
     icon_->SetVerticalAlignment(views::ImageView::LEADING);
-    icon_->set_border(MakeBorder(kButtonIconTopPadding, 0, 0, 0));
+    icon_->set_border(MakeEmptyBorder(kButtonIconTopPadding, 0, 0, 0));
     AddChildViewAt(icon_, 0);
   }
 }
@@ -293,7 +297,7 @@ void NotificationButton::SetTitle(const string16& title) {
     title_->SetElideBehavior(views::Label::ELIDE_AT_END);
     title_->SetEnabledColor(message_center::kRegularTextColor);
     title_->SetBackgroundColor(kRegularTextBackgroundColor);
-    title_->set_border(MakeBorder(kButtonTitleTopPadding, 0, 0, 0));
+    title_->set_border(MakeEmptyBorder(kButtonTitleTopPadding, 0, 0, 0));
     AddChildView(title_);
   }
 }
@@ -363,6 +367,8 @@ NotificationView::NotificationView(const Notification& notification,
   // at the top of the notification (to the right of the icon) except for the
   // close button.
   top_view_ = new ContainerView();
+  top_view_->set_border(MakeEmptyBorder(kTextTopPadding - 8, 0,
+                                        kTextBottomPadding - 5, 0));
 
   // Create the title view if appropriate.
   title_view_ = NULL;
@@ -377,7 +383,7 @@ NotificationView::NotificationView(const Notification& notification,
     title_view_->SetFont(title_view_->font().DeriveFont(2));
     title_view_->SetEnabledColor(message_center::kRegularTextColor);
     title_view_->SetBackgroundColor(kRegularTextBackgroundColor);
-    title_view_->set_border(MakeBorder(kTextTopPadding, 3));
+    title_view_->set_border(MakeTextBorder(3, 0));
     top_view_->AddChildView(title_view_);
   }
 
@@ -395,7 +401,7 @@ NotificationView::NotificationView(const Notification& notification,
       message_view_->SetElideBehavior(views::Label::ELIDE_AT_END);
     message_view_->SetEnabledColor(message_center::kRegularTextColor);
     message_view_->SetBackgroundColor(kRegularTextBackgroundColor);
-    message_view_->set_border(MakeBorder(0, 3));
+    message_view_->set_border(MakeTextBorder(4, 1));
     top_view_->AddChildView(message_view_);
   }
 
@@ -404,7 +410,7 @@ NotificationView::NotificationView(const Notification& notification,
   for (size_t i = 0; i < items.size() && i < kNotificationMaximumItems; ++i) {
     ItemView* item_view = new ItemView(items[i]);
     item_view->SetVisible(is_expanded());
-    item_view->set_border(MakeBorder(0, 4));
+    item_view->set_border(MakeTextBorder(i > 0 ? 0 : 4, 1));
     item_views_.push_back(item_view);
     top_view_->AddChildView(item_view);
   }
@@ -438,7 +444,7 @@ NotificationView::NotificationView(const Notification& notification,
   std::vector<ButtonInfo> buttons = notification.buttons();
   for (size_t i = 0; i < buttons.size(); ++i) {
     views::View* separator = new views::ImageView();
-    separator->set_border(MakeBorder(1, 0, 0, 0, kButtonSeparatorColor));
+    separator->set_border(MakeSeparatorBorder(1, 0, kButtonSeparatorColor));
     bottom_view_->AddChildView(separator);
     NotificationButton* button = new NotificationButton(this);
     ButtonInfo button_info = buttons[i];