Instead of using a single template file and leaving some parts of it out, use template files for each configuration. this allows for better presentation of small notifications without a lot of empty space.

BUG=36081
TEST=create notification with a short string

Review URL: http://codereview.chromium.org/628010

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

6 files changed, 86 insertions, 20 deletions

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index 8c778b7..839eea1 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -58,7 +58,9 @@ without changes to the corresponding grd file.  -->
       <include name="IDR_SYNC_SETUP_DONE_HTML" file="sync\resources\setup_done.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_BLACKLIST_HTML" file="resources\privacy_blacklist_block.html" flattenhtml="true" type="BINDATA" />
       <include name="IDR_BLACKLIST_IMAGE" file="resources\privacy_blacklist_block.png" type="BINDATA" />
-      <include name="IDR_NOTIFICATION_HTML" file="resources\notification.html" type="BINDATA" />
+      <include name="IDR_NOTIFICATION_ICON_HTML" file="resources\notification_icon.html" type="BINDATA" />
+      <include name="IDR_NOTIFICATION_2LINE_HTML" file="resources\notification_2line.html" type="BINDATA" />
+      <include name="IDR_NOTIFICATION_1LINE_HTML" file="resources\notification_1line.html" type="BINDATA" />
     </includes>
   </release>
 </grit>
diff --git a/chrome/browser/notifications/balloon_collection.h b/chrome/browser/notifications/balloon_collection.h
index 14469d9..048d05a6 100644
--- a/chrome/browser/notifications/balloon_collection.h
+++ b/chrome/browser/notifications/balloon_collection.h
@@ -124,7 +124,7 @@ class BalloonCollectionImpl : public BalloonCollection {
     // Minimum and maximum size of balloon content.
     static const int kBalloonMinWidth = 300;
     static const int kBalloonMaxWidth = 300;
-    static const int kBalloonMinHeight = 48;
+    static const int kBalloonMinHeight = 24;
     static const int kBalloonMaxHeight = 120;
 
     static Placement placement_;
diff --git a/chrome/browser/notifications/desktop_notification_service.cc b/chrome/browser/notifications/desktop_notification_service.cc
index 1239a55..a06255b 100644
--- a/chrome/browser/notifications/desktop_notification_service.cc
+++ b/chrome/browser/notifications/desktop_notification_service.cc
@@ -36,33 +36,44 @@
 
 using WebKit::WebNotificationPresenter;
 
+namespace {
+
 // Creates a data:xxxx URL which contains the full HTML for a notification
 // using supplied icon, title, and text, run through a template which contains
 // the standard formatting for notifications.
 static string16 CreateDataUrl(const GURL& icon_url, const string16& title,
     const string16& body) {
-  const base::StringPiece template_html(
-      ResourceBundle::GetSharedInstance().GetRawDataResource(
-          IDR_NOTIFICATION_HTML));
-
-  if (template_html.empty()) {
-    NOTREACHED() << "unable to load template. ID: " << IDR_NOTIFICATION_HTML;
-    return string16();
-  }
 
+  int resource;
+  string16 line_name;
+  string16 line;
   std::vector<string16> subst;
-  if (icon_url.is_valid())
+  if (icon_url.is_valid()) {
+    resource = IDR_NOTIFICATION_ICON_HTML;
     subst.push_back(UTF8ToUTF16(icon_url.spec()));
-  else
-    subst.push_back(string16());
+    subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(title))));
+    subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(body))));
+  } else if (title.empty() || body.empty()) {
+    resource = IDR_NOTIFICATION_1LINE_HTML;
+    line = title.empty() ? body : title;
+    // Strings are div names in the template file.
+    line_name = title.empty() ? ASCIIToUTF16("description")
+                              : ASCIIToUTF16("title");
+    subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(line_name))));
+    subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(line))));
+  } else {
+    resource = IDR_NOTIFICATION_2LINE_HTML;
+    subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(title))));
+    subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(body))));
+  }
 
-  subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(title))));
-  subst.push_back(UTF8ToUTF16(EscapeForHTML(UTF16ToUTF8(body))));
+  const base::StringPiece template_html(
+      ResourceBundle::GetSharedInstance().GetRawDataResource(
+          resource));
 
-  if (icon_url.is_valid()) {
-    subst.push_back(ASCIIToUTF16("margin-left:56px;"));
-  } else {
-    subst.push_back(string16());
+  if (template_html.empty()) {
+    NOTREACHED() << "unable to load template. ID: " << resource;
+    return string16();
   }
 
   string16 format_string = ASCIIToUTF16("data:text/html;charset=utf-8,"
@@ -70,6 +81,8 @@ static string16 CreateDataUrl(const GURL& icon_url, const string16& title,
   return ReplaceStringPlaceholders(format_string, subst, NULL);
 }
 
+}
+
 // A task object which calls the renderer to inform the web page that the
 // permission request has completed.
 class NotificationPermissionCallbackTask : public Task {
diff --git a/chrome/browser/resources/notification_1line.html b/chrome/browser/resources/notification_1line.html
new file mode 100755
index 0000000..6ebebb5
--- /dev/null
+++ b/chrome/browser/resources/notification_1line.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+  <title>$2</title>
+  <style type="text/css">
+  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%;
+  }
+  </style>
+</head>
+<body><div id="body"><div id="$1">$2</div></div></body>
+</html>
diff --git a/chrome/browser/resources/notification_2line.html b/chrome/browser/resources/notification_2line.html
new file mode 100755
index 0000000..a5695b0
--- /dev/null
+++ b/chrome/browser/resources/notification_2line.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+  <title>$1</title>
+  <style type="text/css">
+  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%;
+  }
+  </style>
+</head>
+<body>
+  <div id="body">
+    <div id="title">$1</div>
+    <div id="description">$2</div>
+  </div>
+</body>
+</html>
diff --git a/chrome/browser/resources/notification.html b/chrome/browser/resources/notification_icon.html
index f3d824a1..82d9112 100644..100755
--- a/chrome/browser/resources/notification.html
+++ b/chrome/browser/resources/notification_icon.html
@@ -6,7 +6,7 @@
     margin:4px;
   }
   #body {
-    $4 
+    margin-left:56px;
     position:relative;
   }
   #icon {