More tweaks and fixes for extension and bookmark sync promo.

Make bookmark sync link start up the sync process.  Make the message more aesthetically pleasing. 
Improve the overall layout of the message; ensure it doesn't overlap the NTP content. Also add a border to the notification line so that it matches the promo line in appearance, and stands out against themes of all colors.


BUG= 27853, 28047
TEST= start chrome, click on "bookmark sync" in promo message on NTP. chrome should start up the bookmark sync process.
Review URL: http://codereview.chromium.org/402021

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

4 files changed, 86 insertions, 37 deletions

diff --git a/chrome/browser/dom_ui/ntp_resource_cache.cc b/chrome/browser/dom_ui/ntp_resource_cache.cc
index 42a235a..7e83e31 100644
--- a/chrome/browser/dom_ui/ntp_resource_cache.cc
+++ b/chrome/browser/dom_ui/ntp_resource_cache.cc
@@ -239,10 +239,9 @@ void NTPResourceCache::CreateNewTabHtml() {
   localized_strings.SetString(L"promonew",
       l10n_util::GetString(IDS_NTP_PROMOTION_NEW));
   localized_strings.SetString(L"promomessage",
-      l10n_util::GetStringF(IDS_NTP_PROMOTION_MESSAGE,
+      l10n_util::GetStringF(IDS_NTP_PROMO_MESSAGE,
           l10n_util::GetString(IDS_PRODUCT_NAME),
-          ASCIIToWide(extension_urls::kGalleryBrowsePrefix),
-          GetUrlWithLang(kSyncServiceHelpUrl)));
+          ASCIIToWide(extension_urls::kGalleryBrowsePrefix)));
   localized_strings.SetString(L"extensionslink",
       ASCIIToWide(extension_urls::kGalleryBrowsePrefix));
 
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index ddf6ca2..2aff4a7 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -5,6 +5,17 @@ html {
 
 body {
   margin: 0;
+  height: 100%;
+  overflow: auto;
+}
+
+#container {
+  position: relative;
+  min-height: 100%;
+}
+
+#promo-spacer {
+  height: 50px;
 }
 
 #main {
@@ -14,6 +25,7 @@ body {
   width: 920px;
   min-height: 50px;
   -webkit-transition: width .15s;
+  padding-bottom: 110px;
 }
 
 html[dir='rtl'] #main {
@@ -185,7 +197,7 @@ html[anim='false'] *,
 .link {
   cursor: pointer;
   text-decoration: underline;
-  color: hsl(213, 90%, 24%, 0.33333);
+  color: hsla(213, 90%, 24%, 0.33333);
   -webkit-appearance: none;
   border: 0;
   background: none;
@@ -317,6 +329,7 @@ html[dir=rtl] .thumbnail-container > .title > div {
 #notification {
   position: relative;
   background-color: hsl(52, 100%, 80%);
+  border: 1px solid rgb(211, 211, 211);
   -webkit-border-radius: 6px;
   padding: 7px 15px;
   white-space: nowrap;
@@ -687,51 +700,67 @@ html[dir='rtl'] #option-menu > [command='hide']:before {
   margin: 10px 0;
 }
 
-/* promotions line */
+/* promotions line and image */
 #bottom-right-promo {
   position: absolute;
-  width: 180px;
+  bottom: 0;
+  right: 0;
+  display: block;
   height: 131px;
   border: 0;
-  bottom: 0px;
-  right: 0px;
-  z-index: -1;
+}
+
+#promo-image {
+  display: block;
+}
+
+.sync-button {
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  text-decoration: underline;
+  color: rgb(6, 45, 117);
+  font-family: inherit;
+}
+
+.win-button-padding-bug .sync-button {
+  margin: 0 -3px;
 }
 
 #footer {
-  position: fixed;
+  position: absolute;
   bottom: 0;
-  left: 0px;
-  text-align: center;
   width: 100%;
-  -webkit-transition: bottom .15s;
+  text-align: center;
+  min-width: 692px;
 }
 
-#footer.hide-footer {
-  bottom: -40px;
+.hide-promo-line {
+  opacity: 0;
 }
 
 #promo-line {
+  display: inline-block;
+  margin-bottom: 20px;
   background-color: hsl(52, 100%, 80%);
   border: 1px solid rgb(211, 211, 211);
   -webkit-border-radius: 6px;
   padding: 7px 10px;
   white-space: nowrap;
-  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
   color: black;
+  -webkit-transition: opacity .15s;
 }
 
-#promo-line > * {
-  display: inline-block;
+#promo-line * {
   font-weight: bold;
   text-overflow: ellipsis;
 }
 
-#promo-line a {
-  color: rgb(6, 45, 117);
-  text-decoration: underline;
-}
-
 #promo-new {
   color: red;
 }
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 25ce5af..a3ff823 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -171,12 +171,7 @@ function updateSimpleSection(id, section) {
 <body class="loading"
       i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 
-<div id="bottom-right-promo">
-  <a i18n-values="href:extensionslink">
-    <img src="chrome://theme/newtab_extensions_promo">
-  </a>
-</div>
-
+<div id="container">
 <div id="main">
 
   <div id="view-toolbar"
@@ -274,15 +269,22 @@ function updateSimpleSection(id, section) {
     <img id="attribution-img">
   </div>
 
-  <div id="footer">
-    <div id="promo-line">
-      <span id="promo-new" i18n-content="promonew"></span>
-      <span i18n-values=".innerHTML:promomessage"></span>
-      <button id="promo-close">
-    </div>
+</div> <!-- main -->
+
+<div id="footer">
+  <div id="promo-line">
+    <span id="promo-new" i18n-content="promonew"></span>
+    <span id="promo-message" i18n-values=".innerHTML:promomessage"></span>
+    <button class="link" id="promo-close"></button>
   </div>
+  <div id="bottom-right-promo">
+    <a i18n-values="href:extensionslink">
+      <img id="promo-image" src="chrome://theme/newtab_extensions_promo">
+    </a>
+  </div>
+</div>
 
-</div> <!-- main -->
+</div>  <!-- container -->
 
 <div class="window-menu" id="window-tooltip"></div>
 
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index d409fb0..a4d8ffb 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -1261,6 +1261,9 @@ document.addEventListener('DOMContentLoaded',
 // page itself (without going to Options dialog box).
 document.addEventListener('DOMContentLoaded', showSetAsHomePageLink);
 
+// Set up links and text-decoration for promotional message.
+document.addEventListener('DOMContentLoaded', setUpPromoMessage);
+
 /**
  * The sync code is not yet built by default on all platforms so we have to
  * make sure we don't send the initial sync message to the backend unless the
@@ -1613,7 +1616,23 @@ updateAttribution();
 
 // Closes the promo line when close button is clicked.
 $('promo-close').onclick = function (e) {
-  $('footer').className = 'hide-footer';
+  $('promo-line').className = 'hide-promo-line';
   chrome.send('stopPromoLineMessage');
   e.preventDefault();
 };
+
+// Set bookmark sync button to start bookmark sync process on click; also set
+// link underline colors correctly.
+function setUpPromoMessage() {
+  var syncButton = document.querySelector('#promo-message button');
+  syncButton.className = 'sync-button link';
+  syncButton.onclick = syncSectionLinkClicked;
+  fixLinkUnderlines($('promo-message'));
+}
+
+// A Windows-specific Webkit bug adds padding to buttons and will push the
+// bookmark sync button in the promo message too far to the right unless we
+// use this fix.  See https://bugs.webkit.org/show_bug.cgi?id=31703
+if (navigator.platform == 'Win32') {
+  addClass(document.body, 'win-button-padding-bug');
+}