New visuals for notifications on Windows.

BUG=none TEST=none Review URL: http://codereview.chromium.org/1980005 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@46690 0039d316-1c4b-4281-b951-d872f2087c98
author: johnnyg@chromium.org <johnnyg@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2010-05-07 16:04:42 +0000
committer: johnnyg@chromium.org <johnnyg@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> 2010-05-07 16:04:42 +0000
commit: eeb2fa46f8bf9ed00bf9f1516867af473a478183 (patch)
tree: 5d058a6e72f4f00bdf6eb3db23fd1f693686ab25
parent: 2705f8cc2b42c972d227f266cf38de3c9c429274 (diff)
download: chromium_src-eeb2fa46f8bf9ed00bf9f1516867af473a478183.zip
chromium_src-eeb2fa46f8bf9ed00bf9f1516867af473a478183.tar.gz
chromium_src-eeb2fa46f8bf9ed00bf9f1516867af473a478183.tar.bz2
13 files changed, 96 insertions, 120 deletions
diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index eb4f142..05f29ce 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -6777,7 +6777,7 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Dismiss
       </message>
       <message name="IDS_NOTIFICATION_BALLOON_SOURCE_LABEL" desc="Text which labels the balloon with the source origin.">
-        from <ph name="SOURCE_ORIGIN">$1</ph>
+        <ph name="SOURCE_ORIGIN">$1</ph>
       </message>
       <message name="IDS_NOTIFICATION_PERMISSIONS" desc="Text requesting permission for desktop notifications.">
         Allow <ph name="site">$1<ex>mail.google.com</ex></ph> to show desktop notifications?
diff --git a/chrome/app/theme/balloon_close.png b/chrome/app/theme/balloon_close.png
index cd5609e..1880347 100644
--- a/chrome/app/theme/balloon_close.png
+++ b/chrome/app/theme/balloon_close.png
diff --git a/chrome/app/theme/balloon_close_hover.png b/chrome/app/theme/balloon_close_hover.png
index 8d36beb..636026f 100644
--- a/chrome/app/theme/balloon_close_hover.png
+++ b/chrome/app/theme/balloon_close_hover.png
diff --git a/chrome/app/theme/balloon_frame.png b/chrome/app/theme/balloon_frame.png
index 347523b..370b444 100644
--- a/chrome/app/theme/balloon_frame.png
+++ b/chrome/app/theme/balloon_frame.png
diff --git a/chrome/app/theme/balloon_shelf.png b/chrome/app/theme/balloon_shelf.png
index dd1173a..0dd7a06 100644
--- a/chrome/app/theme/balloon_shelf.png
+++ b/chrome/app/theme/balloon_shelf.png
diff --git a/chrome/browser/notifications/balloon_collection_win.cc b/chrome/browser/notifications/balloon_collection_win.cc
index b162ea4..a913f25 100644
--- a/chrome/browser/notifications/balloon_collection_win.cc
+++ b/chrome/browser/notifications/balloon_collection_win.cc
@@ -18,15 +18,15 @@ Balloon* BalloonCollectionImpl::MakeBalloon(const Notification& notification,
 }
 
 int BalloonCollectionImpl::Layout::InterBalloonMargin() const {
-  return 5;
+  return 3;
 }
 
 int BalloonCollectionImpl::Layout::HorizontalEdgeMargin() const {
-  return 5;
+  return 2;
 }
 
 int BalloonCollectionImpl::Layout::VerticalEdgeMargin() const {
-  return 5;
+  return 0;
 }
 
 // static
diff --git a/chrome/browser/notifications/desktop_notification_service.cc b/chrome/browser/notifications/desktop_notification_service.cc
index 487f971..52a24ee 100644
--- a/chrome/browser/notifications/desktop_notification_service.cc
+++ b/chrome/browser/notifications/desktop_notification_service.cc
@@ -446,5 +446,5 @@ std::wstring DesktopNotificationService::DisplayNameForOrigin(
         return ASCIIToWide(extension->name());
     }
   }
-  return UTF8ToWide(origin.spec());
+  return UTF8ToWide(origin.host());
 }
diff --git a/chrome/browser/resources/notification_1line.html b/chrome/browser/resources/notification_1line.html
index 6ebebb5..86ca1d4 100644
--- a/chrome/browser/resources/notification_1line.html
+++ b/chrome/browser/resources/notification_1line.html
@@ -1,23 +1,14 @@
 <html>
+<!DOCTYPE html>
 <head>
   <title>$2</title>
-  <style type="text/css">
+  <style>
   body {
-    margin:4px;
-  }
-  #body {
-    position:relative;
-  }
-  #title {
-    font-weight:bold;
-    font-family:helvetica, arial, sans-serif;
-    font-size:100%;
-  }
-  #description {
-    font-family:helvetica, arial, sans-serif;
-    font-size:84%;
+    margin: 6px;
+    font-family: helvetica, arial, sans-serif;
+    font-size: 13px;
   }
   </style>
 </head>
-<body><div id="body"><div id="$1">$2</div></div></body>
+<body><div id="$1">$2</div></body>
 </html>
diff --git a/chrome/browser/resources/notification_2line.html b/chrome/browser/resources/notification_2line.html
index a5695b0..26a9e4d 100644
--- a/chrome/browser/resources/notification_2line.html
+++ b/chrome/browser/resources/notification_2line.html
@@ -1,28 +1,24 @@
 <html>
+<!DOCTYPE html>
 <head>
   <title>$1</title>
   <style type="text/css">
   body {
-    margin:4px;
-  }
-  #body {
-    position:relative;
+    margin: 6px;
   }
   #title {
-    font-weight:bold;
-    font-family:helvetica, arial, sans-serif;
-    font-size:100%;
+    font-weight: bold;
+    font-size: 13px;
+    font-family: helvetica, arial, sans-serif;
   }
   #description {
-    font-family:helvetica, arial, sans-serif;
-    font-size:84%;
+    font-family: helvetica, arial, sans-serif;
+    font-size: 13px;
   }
   </style>
 </head>
 <body>
-  <div id="body">
-    <div id="title">$1</div>
-    <div id="description">$2</div>
-  </div>
+  <div id="title">$1</div>
+  <div id="description">$2</div>
 </body>
 </html>
diff --git a/chrome/browser/resources/notification_icon.html b/chrome/browser/resources/notification_icon.html
index 82d9112..efb0a52 100644
--- a/chrome/browser/resources/notification_icon.html
+++ b/chrome/browser/resources/notification_icon.html
@@ -1,39 +1,33 @@
 <html>
+<!DOCTYPE html>
 <head>
   <title>$2</title>
-  <style type="text/css">
+  <style>
   body {
-    margin:4px;
-  }
-  #body {
-    margin-left:56px;
-    position:relative;
+    margin: 6px;
+    height: 52px;
   }
   #icon {
-    position:absolute;
-    left:-52px; 
-    top:2px;
-    height:48px;
-    width:48px;
-    padding-right:4px;
-    display:block;
+    height: 48px;
+    width: 48px;
+    float: left;
   }
   #title {
-    font-weight:bold;
-    font-family:helvetica, arial, sans-serif;
-    font-size:100%;
+    margin-left: 54px;
+    font-weight: bold;
+    font-size: 13px;
+    font-family: helvetica, arial, sans-serif;
   }
   #description {
-    font-family:helvetica, arial, sans-serif;
-    font-size:84%;
+    margin-left: 54px;
+    font-family: helvetica, arial, sans-serif;
+    font-size: 13px;
   }
   </style>
 </head>
 <body>
-  <div id="body">
-    <div id="icon"><img src="$1" width="48" height="48" /></div>
-    <div id="title">$2</div>
-    <div id="description">$3</div>
-  </div>
+  <div id="icon"><img src="$1" width="48" height="48" /></div>
+  <div id="title">$2</div>
+  <div id="description">$3</div>
 </body>
 </html>
diff --git a/chrome/browser/views/notifications/balloon_view.cc b/chrome/browser/views/notifications/balloon_view.cc
index bbbba43..b648950 100644
--- a/chrome/browser/views/notifications/balloon_view.cc
+++ b/chrome/browser/views/notifications/balloon_view.cc
@@ -27,6 +27,7 @@
 #include "grit/generated_resources.h"
 #include "grit/theme_resources.h"
 #include "views/controls/button/button.h"
+#include "views/controls/button/image_button.h"
 #include "views/controls/button/text_button.h"
 #include "views/controls/menu/menu_2.h"
 #include "views/controls/native/native_view_host.h"
@@ -46,27 +47,29 @@ namespace {
 // How many pixels of overlap there is between the shelf top and the
 // balloon bottom.
 const int kTopMargin = 1;
-const int kBottomMargin = 1;
+const int kBottomMargin = 0;
 const int kLeftMargin = 1;
 const int kRightMargin = 1;
-const int kShelfBorderTopOverlap = 3;
+const int kShelfBorderTopOverlap = 0;
 
 // Properties of the dismiss button.
-const int kDismissButtonWidth = 60;
-const int kDismissButtonHeight = 20;
+const int kDismissButtonWidth = 14;
+const int kDismissButtonHeight = 14;
+const int kDismissButtonTopMargin = 4;
+const int kDismissButtonRightMargin = 8;
 
 // Properties of the options menu.
-const int kOptionsMenuWidth = 60;
+const int kOptionsMenuWidth = 55;
 const int kOptionsMenuHeight = 20;
 
 // Properties of the origin label.
 const int kLeftLabelMargin = 5;
 
-// TODO(johnnyg): Add a shadow for the frame.
-const int kLeftShadowWidth = 0;
-const int kRightShadowWidth = 0;
+// Size of the drop shadow.
+const int kLeftShadowWidth = 5;
+const int kRightShadowWidth = 5;
 const int kTopShadowWidth = 0;
-const int kBottomShadowWidth = 0;
+const int kBottomShadowWidth = 5;
 
 // Optional animation.
 const bool kAnimateEnabled = true;
@@ -103,12 +106,12 @@ BalloonViewImpl::BalloonViewImpl(BalloonCollection* collection)
   SkBitmap* shelf_bitmap = rb.GetBitmapNamed(IDR_BALLOON_SHELF);
   SkBitmap* border_bitmap = rb.GetBitmapNamed(IDR_BALLOON_BORDER);
 
-  // Insets are such because the sprites have 3x3 corners.
-  gfx::Insets insets(3, 3, 3, 3);
+  gfx::Insets shelf_insets(1, 9, 9, 9);
   shelf_background_.reset(
-      views::Painter::CreateImagePainter(*shelf_bitmap, insets, true));
+      views::Painter::CreateImagePainter(*shelf_bitmap, shelf_insets, true));
+  gfx::Insets border_insets(4, 9, 1, 9);
   balloon_background_.reset(
-      views::Painter::CreateImagePainter(*border_bitmap, insets, false));
+      views::Painter::CreateImagePainter(*border_bitmap, border_insets, false));
 }
 
 BalloonViewImpl::~BalloonViewImpl() {
@@ -239,28 +242,28 @@ void BalloonViewImpl::AnimationProgressed(const Animation* animation) {
 
 gfx::Rect BalloonViewImpl::GetCloseButtonBounds() const {
   return gfx::Rect(
-      width() - kDismissButtonWidth - kRightMargin,
-      height() - kDismissButtonHeight - kShelfBorderTopOverlap - kBottomMargin,
+      width() - kDismissButtonWidth -
+          kDismissButtonRightMargin - kRightShadowWidth,
+      kTopMargin + kDismissButtonTopMargin,
       kDismissButtonWidth,
       kDismissButtonHeight);
 }
 
 gfx::Rect BalloonViewImpl::GetOptionsMenuBounds() const {
   return gfx::Rect(
-      width() - kDismissButtonWidth - kOptionsMenuWidth - kRightMargin,
-      height() - kOptionsMenuHeight - kShelfBorderTopOverlap - kBottomMargin,
+      width() - kOptionsMenuWidth - kRightMargin - kRightShadowWidth,
+      GetBalloonFrameHeight() + kTopMargin,
       kOptionsMenuWidth,
       kOptionsMenuHeight);
 }
 
 gfx::Rect BalloonViewImpl::GetLabelBounds() const {
   return gfx::Rect(
-      kLeftLabelMargin,
-      std::max(0, height() - kDismissButtonHeight - kShelfBorderTopOverlap -
-               kBottomMargin),
-      std::max(0, width() - kDismissButtonWidth - kOptionsMenuWidth -
+      kLeftShadowWidth + kLeftLabelMargin,
+      GetBalloonFrameHeight() + kTopMargin,
+      std::max(0, width() - kOptionsMenuWidth -
                kRightMargin),
-      kDismissButtonHeight);
+      kOptionsMenuHeight);
 }
 
 void BalloonViewImpl::Show(Balloon* balloon) {
@@ -283,7 +286,7 @@ void BalloonViewImpl::Show(Balloon* balloon) {
   AddChildView(source_label_);
   options_menu_button_ = new views::MenuButton(NULL, options_text, this, false);
   AddChildView(options_menu_button_);
-  close_button_ = new views::TextButton(this, dismiss_text);
+  close_button_ = new views::ImageButton(this);
   AddChildView(close_button_);
 
   // We have to create two windows: one for the contents and one for the
@@ -309,7 +312,7 @@ void BalloonViewImpl::Show(Balloon* balloon) {
   html_container_->Init(NULL, contents_rect);
   html_container_->SetContentsView(html_contents_->view());
 
-  gfx::Rect balloon_rect(x(), y(), width(), height());
+  gfx::Rect balloon_rect(x(), y(), GetTotalWidth(), GetTotalHeight());
   frame_container_ = Widget::CreatePopupWidget(Widget::Transparent,
                                                Widget::AcceptEvents,
                                                Widget::DeleteOnDestroy);
@@ -317,28 +320,28 @@ void BalloonViewImpl::Show(Balloon* balloon) {
   frame_container_->SetAlwaysOnTop(true);
   frame_container_->Init(NULL, balloon_rect);
   frame_container_->SetContentsView(this);
-
-  close_button_->SetIcon(*rb.GetBitmapNamed(IDR_BALLOON_CLOSE));
-  close_button_->SetHoverIcon(*rb.GetBitmapNamed(IDR_BALLOON_CLOSE_HOVER));
-  close_button_->SetFont(rb.GetFont(ResourceBundle::SmallFont));
-  close_button_->SetEnabledColor(SK_ColorWHITE);
-  close_button_->SetHoverColor(SK_ColorDKGRAY);
-  close_button_->set_alignment(views::TextButton::ALIGN_CENTER);
-  close_button_->set_icon_placement(views::TextButton::ICON_ON_RIGHT);
+  frame_container_->MoveAbove(html_container_);
+
+  close_button_->SetImage(views::CustomButton::BS_NORMAL,
+      rb.GetBitmapNamed(IDR_BALLOON_CLOSE));
+  close_button_->SetImage(views::CustomButton::BS_HOT,
+      rb.GetBitmapNamed(IDR_BALLOON_CLOSE_HOVER));
+  close_button_->SetImage(views::CustomButton::BS_PUSHED,
+      rb.GetBitmapNamed(IDR_BALLOON_CLOSE_HOVER));
   close_button_->SetBounds(GetCloseButtonBounds());
 
   options_menu_button_->SetFont(rb.GetFont(ResourceBundle::SmallFont));
-  options_menu_button_->SetIcon(*rb.GetBitmapNamed(IDR_BALLOON_OPTIONS_ARROW));
+  options_menu_button_->SetIcon(*rb.GetBitmapNamed(IDR_BALLOON_OPTIONS_ARROW_HOVER));
   options_menu_button_->SetHoverIcon(
       *rb.GetBitmapNamed(IDR_BALLOON_OPTIONS_ARROW_HOVER));
   options_menu_button_->set_alignment(views::TextButton::ALIGN_CENTER);
   options_menu_button_->set_icon_placement(views::TextButton::ICON_ON_RIGHT);
-  options_menu_button_->SetEnabledColor(SK_ColorWHITE);
+  options_menu_button_->SetEnabledColor(SK_ColorDKGRAY);
   options_menu_button_->SetHoverColor(SK_ColorDKGRAY);
   options_menu_button_->SetBounds(GetOptionsMenuBounds());
 
   source_label_->SetFont(rb.GetFont(ResourceBundle::SmallFont));
-  source_label_->SetColor(SK_ColorWHITE);
+  source_label_->SetColor(SK_ColorDKGRAY);
   source_label_->SetHorizontalAlignment(views::Label::ALIGN_LEFT);
   source_label_->SetBounds(GetLabelBounds());
 
@@ -371,47 +374,45 @@ void BalloonViewImpl::CreateOptionsMenu() {
 
 void BalloonViewImpl::GetContentsMask(const gfx::Rect& rect,
                                       gfx::Path* path) const {
+
+  gfx::Point cutout = GetCloseButtonBounds().CenterPoint();
+  cutout = cutout.Subtract(GetContentsOffset());
   // This needs to remove areas that look like the following from each corner:
   //
   //   xx
   //   x
+  //
+  // We also cut out a circle for the close button, since we can't guarantee
+  // the ordering of two TOP_MOST windows.
   path->moveTo(SkScalar(0.5), SkScalar(0));
+  path->lineTo(SkScalar(cutout.x() - 0.5), SkScalar(0));
+  path->addCircle(SkScalar(cutout.x() - 0.5), SkScalar(cutout.y() - 0.5),
+                  SkScalar(kDismissButtonWidth / 2.0));
+  path->lineTo(SkScalar(cutout.x() - 0.5), SkScalar(0));
   // Upper right corner
   path->arcTo(rect.width() - SkScalar(1.5), SkScalar(0),
               rect.width() - SkScalar(0.5), SkScalar(1.5),
               SkScalar(1));
   // Lower right corner
-  path->arcTo(rect.width() - SkScalar(0.5), rect.height() - SkScalar(1.5),
-              rect.width() - SkScalar(1.5), rect.height() - SkScalar(0.5),
-              SkScalar(1));
+  path->lineTo(rect.width() - SkScalar(0.5), SkScalar(rect.height()));
   // Lower left corner
-  path->arcTo(SkScalar(0.5), rect.height() - SkScalar(0.5),
-              0, rect.height() - SkScalar(1.5),
-              SkScalar(1));
+  path->lineTo(SkScalar(0), SkScalar(rect.height()));
   // Upper left corner
   path->arcTo(0, SkScalar(0.5), SkScalar(0.5), 0, SkScalar(1));
 }
 
 gfx::Point BalloonViewImpl::GetContentsOffset() const {
-  return gfx::Point(kTopShadowWidth + kTopMargin,
-                    kLeftShadowWidth + kLeftMargin);
+  return gfx::Point(kLeftShadowWidth + kLeftMargin,
+                    kTopShadowWidth + kTopMargin);
 }
 
 int BalloonViewImpl::GetShelfHeight() const {
   // TODO(johnnyg): add scaling here.
-  return kDefaultShelfHeight;
-}
-
-int BalloonViewImpl::GetFrameWidth() const {
-  return size().width() - kLeftShadowWidth - kRightShadowWidth;
-}
-
-int BalloonViewImpl::GetTotalFrameHeight() const {
-  return size().height() - kTopShadowWidth - kBottomShadowWidth;
+  return kDefaultShelfHeight + kBottomShadowWidth;
 }
 
 int BalloonViewImpl::GetBalloonFrameHeight() const {
-  return GetTotalFrameHeight() - GetShelfHeight();
+  return GetTotalHeight() - GetShelfHeight();
 }
 
 int BalloonViewImpl::GetTotalWidth() const {
@@ -421,8 +422,7 @@ int BalloonViewImpl::GetTotalWidth() const {
 
 int BalloonViewImpl::GetTotalHeight() const {
   return balloon_->content_size().height()
-      + kTopMargin + kBottomMargin + kTopShadowWidth + kBottomShadowWidth
-      + GetShelfHeight();
+      + kTopMargin + kBottomMargin + kTopShadowWidth + GetShelfHeight();
 }
 
 gfx::Rect BalloonViewImpl::GetContentsRectangle() const {
@@ -439,7 +439,7 @@ gfx::Rect BalloonViewImpl::GetContentsRectangle() const {
 
 void BalloonViewImpl::Paint(gfx::Canvas* canvas) {
   DCHECK(canvas);
-  int background_width = GetFrameWidth();
+  int background_width = GetTotalWidth();
   int background_height = GetBalloonFrameHeight();
   balloon_background_->Paint(background_width, background_height, canvas);
   canvas->save();
diff --git a/chrome/browser/views/notifications/balloon_view.h b/chrome/browser/views/notifications/balloon_view.h
index 23bb691..9b838ac 100644
--- a/chrome/browser/views/notifications/balloon_view.h
+++ b/chrome/browser/views/notifications/balloon_view.h
@@ -28,6 +28,7 @@
 
 namespace views {
 class ButtonListener;
+class ImageButton;
 class ImagePainter;
 class TextButton;
 class WidgetWin;
@@ -115,12 +116,6 @@ class BalloonViewImpl : public BalloonView,
   // The shelf is where is close button is located.
   int GetShelfHeight() const;
 
-  // The width of the frame (not including any shadow).
-  int GetFrameWidth() const;
-
-  // The height of the frame (not including any shadow).
-  int GetTotalFrameHeight() const;
-
   // The height of the part of the frame around the balloon.
   int GetBalloonFrameHeight() const;
 
@@ -163,7 +158,7 @@ class BalloonViewImpl : public BalloonView,
   scoped_ptr<views::Painter> balloon_background_;
 
   // Pointer to sub-view is owned by the View sub-class.
-  views::TextButton* close_button_;
+  views::ImageButton* close_button_;
 
   // Pointer to sub-view is owned by View class.
   views::Label* source_label_;
diff --git a/views/painter.cc b/views/painter.cc
index 8b90dfd..1c354da 100644
--- a/views/painter.cc
+++ b/views/painter.cc
@@ -123,7 +123,7 @@ class ImagePainter : public Painter {
     if (paint_center_) {
       canvas->DrawBitmapInt(
           image_,
-          insets_.top(), insets_.left(),
+          insets_.left(), insets_.top(),
           image_.width() - insets_.width(), image_.height() - insets_.height(),
           insets_.left(), insets_.top(),
           w - insets_.width(), h - insets_.height(), true);
author	johnnyg@chromium.org <johnnyg@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2010-05-07 16:04:42 +0000
committer	johnnyg@chromium.org <johnnyg@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>	2010-05-07 16:04:42 +0000
commit	eeb2fa46f8bf9ed00bf9f1516867af473a478183 (patch)
tree	5d058a6e72f4f00bdf6eb3db23fd1f693686ab25
parent	2705f8cc2b42c972d227f266cf38de3c9c429274 (diff)
download	chromium_src-eeb2fa46f8bf9ed00bf9f1516867af473a478183.zip chromium_src-eeb2fa46f8bf9ed00bf9f1516867af473a478183.tar.gz chromium_src-eeb2fa46f8bf9ed00bf9f1516867af473a478183.tar.bz2