Implement layout of NTP apps promo. Subsequent changes will

show it at the correct time.

BUG=53972
TEST=chrome --force-apps-promo-visible, open NTP. Should see promo.

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

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

11 files changed, 118 insertions, 6 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index d05c9cf..6a0512d 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -3828,7 +3828,19 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Allow
       </message>
       <message name="IDS_EXTENSION_WEB_STORE_TITLE" desc="Text for the Chrome Web Store">
-        Get More Apps
+        Get more apps
+      </message>
+      <message name="IDS_APPS_PROMO_HEADER" desc="Header for the apps promo">
+        New! Discover a world of apps &amp; games
+      </message>
+      <message name="IDS_APPS_PROMO_TEXT_1" desc="First paragraph of text on the apps promo">
+        Visit the &lt;a&gt; Chrome Web Store&lt;/a&gt; to add great apps and games to your startpage
+      </message>
+      <message name="IDS_APPS_PROMO_TEXT_2" desc="Second paragraph of text on the apps promo">
+        What's an app? Try one of these:
+      </message>
+      <message name="IDS_APPS_PROMO_HIDE" desc="Text on the button that hides the apps promo">
+        Hide this message
       </message>
 
       <!-- Plugins -->
diff --git a/chrome/browser/dom_ui/ntp_resource_cache.cc b/chrome/browser/dom_ui/ntp_resource_cache.cc
index 0cb0fd5..2e61765 100644
--- a/chrome/browser/dom_ui/ntp_resource_cache.cc
+++ b/chrome/browser/dom_ui/ntp_resource_cache.cc
@@ -11,6 +11,7 @@
 #include "app/l10n_util.h"
 #include "app/resource_bundle.h"
 #include "app/theme_provider.h"
+#include "base/command_line.h"
 #include "base/file_util.h"
 #include "base/ref_counted_memory.h"
 #include "base/string16.h"
@@ -294,6 +295,18 @@ void NTPResourceCache::CreateNewTabHTML() {
       l10n_util::GetStringUTF16(IDS_EXTENSION_WEB_STORE_TITLE));
   localized_strings.SetString("web_store_url",
       GetUrlWithLang(GURL(Extension::ChromeStoreURL())));
+  localized_strings.SetString("appspromohide",
+      l10n_util::GetStringUTF16(IDS_APPS_PROMO_HIDE));
+  localized_strings.SetString("appspromoheader",
+      l10n_util::GetStringUTF16(IDS_APPS_PROMO_HEADER));
+  localized_strings.SetString("appspromotext1",
+      l10n_util::GetStringUTF16(IDS_APPS_PROMO_TEXT_1));
+  localized_strings.SetString("appspromotext2",
+      l10n_util::GetStringUTF16(IDS_APPS_PROMO_TEXT_2));
+
+  localized_strings.SetString("appspromovisible",
+      CommandLine::ForCurrentProcess()->HasSwitch(
+          switches::kForceAppsPromoVisible) ? "true" : "false");
 
   // Don't initiate the sync related message passing with the page if the sync
   // code is not present.
@@ -422,6 +435,8 @@ void NTPResourceCache::CreateNewTabCSS() {
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION_HEADER_RULE);
   SkColor color_section_header_rule_light =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_SECTION_HEADER_RULE_LIGHT);
+  SkColor color_text_light =
+      tp->GetColor(BrowserThemeProvider::COLOR_NTP_TEXT_LIGHT);
 
   SkColor color_header =
       tp->GetColor(BrowserThemeProvider::COLOR_NTP_HEADER);
@@ -477,6 +492,7 @@ void NTPResourceCache::CreateNewTabCSS() {
       color_section_header_rule_light));  // $$$1
   subst3.push_back(SkColorToRGBAString(
       SkColorSetA(color_section_header_rule, 0)));  // $$$2
+  subst3.push_back(SkColorToRGBAString(color_text_light));  // $$$3
 
 
   // Get our template.
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index ab47110..9f78a10 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -5,7 +5,8 @@
   hasattribution:hasattribution;
   anim:anim;
   syncispresent:syncispresent;
-  customlogo:customlogo"
+  customlogo:customlogo;
+  appspromovisible:appspromovisible"
   install-animation-enabled="true">
 <head>
 <meta charset="utf-8">
@@ -131,7 +132,14 @@ if ('mode' in hashParams) {
     <span class="link"><span class="link-color"></span></span>
   </div>
 
-  <div class="maxiview" id="apps-maxiview"></div>
+  <div class="maxiview" id="apps-maxiview">
+    <div id="apps-promo">
+      <button id="apps-promo-hide" i18n-content="appspromohide"></button>
+      <h3 i18n-content="appspromoheader"></h3>
+      <p id="apps-promo-text1" i18n-content="appspromotext1"></p>
+      <p id="apps-promo-text2" i18n-content="appspromotext2"></p>
+    </div>
+  </div>
   <div class="maxiview" id="most-visited-maxiview"></div>
 
   <div class="sections">
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index b7e292a..2373582 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -1095,3 +1095,10 @@ function maybeDoneLoading() {
 function isDoneLoading() {
   return !document.body.classList.contains('loading');
 }
+
+// Initialize the apps promo.
+document.addEventListener('DOMContentLoaded', function() {
+  var promoText1 = $('apps-promo-text1');
+  promoText1.innerHTML = promoText1.textContent;
+  promoText1.querySelector('a').href = localStrings.getString('web_store_url');
+});
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 7500a4f..ce25030 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -137,3 +137,11 @@ body {
   color: $$3; /* COLOR_NTP_SECTION_TEXT */
   background-color: $$1; /* COLOR_NTP_SECTION */;
 }
+
+#apps-promo-hide {
+  color: $9; /* COLOR_NTP_LINK */
+}
+
+#apps-promo-text2 {
+  color: $$$3; /* COLOR_NTP_TEXT_LIGHT */
+}
diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index a199154..45301ab 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -90,10 +90,57 @@ html[install-animation-enabled=true] .app[new=installed] {
   -webkit-transition: opacity .5s;
 }
 
-a[app-id=web-store-entry] {
+.app[app-id=web-store-entry] > a {
   background-image: url("web_store_icon.png");
 }
 
 menu > button.default {
   font-weight: bold;
 }
+
+#apps-promo {
+  display: none;
+}
+
+html[appspromovisible=true] #apps-promo {
+  display: block;
+}
+
+#apps-promo > h3 {
+  font-size: 16px;
+  margin-top: 1em;
+  margin-bottom: 0.25em;
+}
+
+#apps-promo-text1 {
+  margin-top: 0;
+}
+
+#apps-promo-hide {
+  float: right;
+  -webkit-appearance: none;
+  -webkit-transition: opacity .15s;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 90%;
+  text-decoration: underline;
+}
+
+html[dir=rtl] #apps-promo-hide {
+  float: left;
+}
+
+html[appspromovisible=true] .app[app-id=web-store-entry] {
+  left: 25px;
+}
+
+html[appspromovisible=true][dir=rtl] .app[app-id=web-store-entry] {
+  right: 25px;
+}
+
+html[appspromovisible=true] .app[app-id=web-store-entry] a {
+  font-weight: bold;
+}
+
diff --git a/chrome/browser/resources/ntp/apps.js b/chrome/browser/resources/ntp/apps.js
index 7c55c98..dd44532 100644
--- a/chrome/browser/resources/ntp/apps.js
+++ b/chrome/browser/resources/ntp/apps.js
@@ -7,8 +7,12 @@ function getAppsCallback(data) {
   var appsSection = $('apps');
   var appsSectionContent = $('apps-maxiview');
   var appsMiniview = appsSection.getElementsByClassName('miniview')[0];
-  appsSectionContent.textContent = '';
+  var appsPromo = $('apps-promo');
+
   appsMiniview.textContent = '';
+  while (appsSectionContent.lastChild != appsPromo) {
+    appsSectionContent.removeChild(appsSectionContent.lastChild);
+  }
 
   clearClosedMenu(apps.menu);
   if (data.apps.length == 0) {
@@ -275,11 +279,13 @@ var apps = (function() {
     },
 
     createWebStoreElement: function() {
-      return createElement({
+      var elm = createElement({
         'id': 'web-store-entry',
         'name': localStrings.getString('web_store_title'),
         'launch_url': localStrings.getString('web_store_url')
       });
+      elm.setAttribute('app-id', 'web-store-entry');
+      return elm;
     }
   };
 })();
diff --git a/chrome/browser/themes/browser_theme_provider.cc b/chrome/browser/themes/browser_theme_provider.cc
index 8910637..fde7ea5 100644
--- a/chrome/browser/themes/browser_theme_provider.cc
+++ b/chrome/browser/themes/browser_theme_provider.cc
@@ -238,6 +238,8 @@ SkColor BrowserThemeProvider::GetColor(int id) const {
       return IncreaseLightness(GetColor(COLOR_NTP_TEXT), 0.70);
     case COLOR_NTP_SECTION_HEADER_RULE_LIGHT:
       return IncreaseLightness(GetColor(COLOR_NTP_TEXT), 0.86);
+    case COLOR_NTP_TEXT_LIGHT:
+      return IncreaseLightness(GetColor(COLOR_NTP_TEXT), 0.40);
   }
 
   return GetDefaultColor(id);
diff --git a/chrome/browser/themes/browser_theme_provider.h b/chrome/browser/themes/browser_theme_provider.h
index d2b75bf..f359072 100644
--- a/chrome/browser/themes/browser_theme_provider.h
+++ b/chrome/browser/themes/browser_theme_provider.h
@@ -84,6 +84,7 @@ class BrowserThemeProvider : public NonThreadSafe,
     COLOR_NTP_SECTION_HEADER_TEXT_HOVER,
     COLOR_NTP_SECTION_HEADER_RULE,
     COLOR_NTP_SECTION_HEADER_RULE_LIGHT,
+    COLOR_NTP_TEXT_LIGHT,
 
     TINT_BUTTONS,
     TINT_FRAME,
diff --git a/chrome/common/chrome_switches.cc b/chrome/common/chrome_switches.cc
index d6ff1d6..c75b801 100644
--- a/chrome/common/chrome_switches.cc
+++ b/chrome/common/chrome_switches.cc
@@ -593,6 +593,10 @@ const char kFileDescriptorLimit[]           = "file-descriptor-limit";
 // whether or not it's actually the first run.
 const char kFirstRun[]                      = "first-run";
 
+// Forces the apps/webstore promo to be shown, independent of whether it has
+// timed out, etc. Useful for testing.
+const char kForceAppsPromoVisible[]         = "force-apps-promo-visible";
+
 // Some field tests may rendomized in the browser, and the randomly selected
 // outcome needs to be propogated to the renderer.  For instance, this is used
 // to modify histograms recorded in the renderer, or to get the renderer to
diff --git a/chrome/common/chrome_switches.h b/chrome/common/chrome_switches.h
index 75aefc5..ef805b3 100644
--- a/chrome/common/chrome_switches.h
+++ b/chrome/common/chrome_switches.h
@@ -179,6 +179,7 @@ extern const char kExtensionsUpdateFrequency[];
 extern const char kFeedbackServer[];
 extern const char kFileDescriptorLimit[];
 extern const char kFirstRun[];
+extern const char kForceAppsPromoVisible[];
 extern const char kForceFieldTestNameAndValue[];
 extern const char kForceRendererAccessibility[];
 extern const char kGpuLauncher[];