Expand the footer in the material design Clear Browsing Data dialog.

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

Index: chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
diff --git a/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html b/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
index 6c77c7dd2652207431678ad6308e58913bb48db3..2685d87294732817bf04f54a4397baea49c7704d 100644
--- a/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
+++ b/chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html
@@ -10,14 +10,9 @@
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-clear-browsing-data-dialog">
+  <link rel="import" type="css" href="clear_browsing_data_dialog.css">
   <template>
-    <style include="settings-shared">
-      paper-spinner {
-        margin-bottom: auto;
-        margin-top: auto;
-        -webkit-margin-end: 16px;
-      }
-    </style>
+    <style include="settings-shared"></style>
     <settings-dialog id="dialog">
       <div class="title">$i18n{clearBrowsingData}</div>
       <div class="body">
@@ -71,8 +66,21 @@
         </paper-button>
       </div>
       <div class="footer">
-        <span>$i18n{warnAboutNonClearedData}</span>
-        <span>$i18n{clearsSyncedData}</span>
+        <div id="googleFooter" class="clear-browsing-data-footer">

[dschuyler, 2016/04/26 17:29:49]

nit: consider using 'settings' as a prefix rather than 'google'
(unless this applies more broadly that settings).

[msramek, 2016/04/27 18:10:29]

This is the same nomenclature that we used on Android, see here:
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/android/jav...

The idea is that first paragraphs contains information specific to Google
account users, and is decorated with the Google logo. The other paragraph
contains more general information, and it's called "generalFooter".

"settings" doesn't capture this difference. Maybe we could rename it to mention
that this paragraph talks about other forms of browsing history, but my personal
preference would be to leave consistent with Android.

+          <iron-icon icon="md-settings-icons:googleg"></iron-icon>
+          <div class="footer-text"
+              i18n-values=".innerHTML:otherFormsOfBrowsingHistory"></div>
+        </div>
+        <div id="generalFooter" class="clear-browsing-data-footer">
+          <iron-icon icon="info"></iron-icon>
+          <div class="footer-text">
+            <span id="syncedDataSentence">$i18n{clearsSyncedData}</span>
+            <span i18n-content="warnAboutNonClearedData"></span>

[dschuyler, 2016/04/26 17:29:49]

Please change the i18n-content to $i18n{}, like line 77 above.

[msramek, 2016/04/27 18:10:29]

Done. Sorry, missed this one.

+            <a id="clear-browser-data-old-learn-more-link"
+                i18n-values="href:clearBrowsingDataLearnMoreUrl"

[dschuyler, 2016/04/26 17:29:49]

i18n-values="foo:bar" can be re-written as 
foo="$i18n{bar}"
If bar may contain html, you may need 
foo="$18nRaw{bar}"
so that the html is not escaped. 

[msramek, 2016/04/27 18:10:29]

Done. Here, and with .innerHTML above.

+                target="_blank">$i18n{learnMore}</a>
+          </div>
+        </div>
       </div>
     </settings-dialog>
   </template>