Improve wording, padding and general look and feel.

BUG=None Review URL: https://codereview.chromium.org/555983002 Cr-Commit-Position: refs/heads/master@{#294506}

Improve wording, padding and general look and feel.
BUG=None Review URL: https://codereview.chromium.org/555983002 Cr-Commit-Position: refs/heads/master@{#294506}
f7784c1b · mathp · Commit bot · d0373dd2 · f7784c1b · f7784c1b
Commit f7784c1b authored Sep 11, 2014 by mathp Committed by Commit bot Sep 12, 2014
6 changed files
--- a/chrome/app/chromium_strings.grd
+++ b/chrome/app/chromium_strings.grd
@@ -1202,14 +1202,17 @@ Signing in anyway will merge Chromium information like bookmarks, history, and o
      </if>
      <!-- Contextual Search -->
+      <message name="IDS_CONTEXTUAL_SEARCH_HEADER" desc="Header shown at the top of the first run experience, to describe the Contextual Search feature.">
+        Search with one touch
+      </message>
      <message name="IDS_CONTEXTUAL_SEARCH_PROMO_DESCRIPTION" desc="Description of the Contextual Search feature.">
-        “Touch to Search” provides an easy way to search for terms on a web page by simply touching on them.  The touched word and surrounding page will be sent to Google.
+        Using “Touch to Search” you can touch any word on a website to learn more about a topic. Chromium will send that word and the surrounding contents to Google and bring back relevant information about it.
      </message>
      <message name="IDS_CONTEXTUAL_SEARCH_PROMO_OPTIN" desc="Text for the button the user clicks to opt in.">
-        Yes, please
+        Accept &amp; Search
      </message>
      <message name="IDS_CONTEXTUAL_SEARCH_PROMO_OPTOUT" desc="Text for the button the user clicks to opt out.">
-        No, thanks
+        No Thanks
      </message>
      <!-- Update bubble -->

--- a/chrome/app/google_chrome_strings.grd
+++ b/chrome/app/google_chrome_strings.grd
@@ -1127,14 +1127,17 @@ Signing in anyway will merge Chrome information like bookmarks, history, and oth
      </if>
      <!-- Contextual Search -->
+      <message name="IDS_CONTEXTUAL_SEARCH_HEADER" desc="Header shown at the top of the first run experience, to describe the Contextual Search feature.">
+        Search with one touch
+      </message>
      <message name="IDS_CONTEXTUAL_SEARCH_PROMO_DESCRIPTION" desc="Description of the Contextual Search feature.">
-        “Touch to Search” provides an easy way to search for terms on a web page by simply touching on them.  The touched word and surrounding page will be sent to Google.
+        Using “Touch to Search” you can touch any word on a website to learn more about a topic. Chrome will send that word and the surrounding contents to Google and bring back relevant information about it.
      </message>
      <message name="IDS_CONTEXTUAL_SEARCH_PROMO_OPTIN" desc="Text for the button the user clicks to opt in.">
-        Yes, please
+        Accept &amp; Search
      </message>
      <message name="IDS_CONTEXTUAL_SEARCH_PROMO_OPTOUT" desc="Text for the button the user clicks to opt out.">
-        No, thanks
+        No Thanks
      </message>
      <!-- Update bubble -->

--- a/chrome/browser/resources/contextual_search/promo.css
+++ b/chrome/browser/resources/contextual_search/promo.css
@@ -10,18 +10,13 @@
 }
 body {
+  color: #414141;
  font-family: 'Roboto2', sans-serif;
-  font-size: 1em;
  margin: 0;
 }
-p {
-  margin: 1.5em;
-  text-align: justify;
-}
 a {
-  color: black;
+  color: #414141;
 }
 .colored {
@@ -30,26 +25,38 @@ a {
 .label {
  display: inline-block;
-  padding: 1.5em;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 28px;
  white-space: nowrap;
 }
 .label a {
-  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
 }
 #button-container {
-  position: fixed;
  text-align: right;
-  top: calc(70% - 76px /* action bar */ - 69px /* height of content */);
  width: 100%;
 }
 #container.hide {
  -webkit-transform: scale(0.95);
-  -webkit-transition-property: opacity, -webkit-transform;
  -webkit-transition-duration: 218ms;
+  -webkit-transition-property: opacity, -webkit-transform;
  opacity: 0;
 }
+#description {
+  font-size: 16px;
+  line-height: 1.4em;
+  margin: 32px 16px 4px 16px;
+}
+#heading {
+  font-size: 24px;
+  letter-spacing: 1px;
+  margin-top: 0;
+  text-align: center;
+}
--- a/chrome/browser/resources/contextual_search/promo.html
+++ b/chrome/browser/resources/contextual_search/promo.html
@@ -13,7 +13,8 @@
 </head>
 <body>
  <div id="container">
-    <p i18n-content="description"></p>
+    <p i18n-content="heading" id="heading"></p>
+    <p i18n-content="description" id="description"></p>
    <div id="button-container">
      <span class="label"><a href="#optout" i18n-content="optOut"></a></span>
      <span id="optin-label" class="label"><a class="colored" href="#optin" i18n-content="optIn"></a></span>

--- a/chrome/browser/resources/contextual_search/promo.js
+++ b/chrome/browser/resources/contextual_search/promo.js
@@ -12,3 +12,12 @@ window.onload = function() {
    $('container').classList.add('hide');
  });
 };
+/**
+ * Returns the height of the content. Method called from Chrome to properly size
+ * the view embedding it.
+ * @return {number} The height of the content, in pixels.
+ */
+function getContentHeight() {
+  return $('container').clientHeight;
+}
--- a/chrome/browser/search/contextual_search_promo_source_android.cc
+++ b/chrome/browser/search/contextual_search_promo_source_android.cc
@@ -90,6 +90,8 @@ void ContextualSearchPromoSourceAndroid::SendHtmlWithStrings(
  strings_data.SetString(
      "description",
      l10n_util::GetStringUTF16(IDS_CONTEXTUAL_SEARCH_PROMO_DESCRIPTION));
+  strings_data.SetString(
+      "heading", l10n_util::GetStringUTF16(IDS_CONTEXTUAL_SEARCH_HEADER));
  strings_data.SetString(
      "optIn", l10n_util::GetStringUTF16(IDS_CONTEXTUAL_SEARCH_PROMO_OPTIN));
  strings_data.SetString(