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..6eb946bd729728666c0e6bbd5419b6b09c072783 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
@@ -12,12 +12,55 @@
 <dom-module id="settings-clear-browsing-data-dialog">
   <template>
     <style include="settings-shared">
+      #dialog {
+        max-width: 600px;

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

I narrowed this even more, from 700px to 600px, as I realized that for
non-syncing users the "Learn more" link would be the only thing on the second
line of that paragraph. The agreement that we had with maxwalker@ was to
optimize for the default English text to be nicely aligned.

+      }
+
       paper-spinner {
+        -webkit-margin-end: 16px;
         margin-bottom: auto;
         margin-top: auto;
-        -webkit-margin-end: 16px;
+      }
+
+      #generalFooter {
+        margin: 0;
+        min-height: 18px;
+      }
+
+      #generalFooter iron-icon {
+        height: 18px;
+        width: 18px;

[dschuyler, 2016/04/27 23:10:40]

Optional: Consider making the icons 20px by 20px to match with the
settings UX design.  The 18px size is ok if that's called for 
specifically by UI.

[msramek, 2016/04/28 14:34:17]

This is an official icon that has a size 18x18 (which is in itself weird,
because normally those are 16x16 or 24x24). Given that it's an SVG, we could
stretch it, but it might look blurry (misaligned with the pixel grid). But I did
give it 1px padding, so that the icon is centered within a 20x20 square.
Similarly, 2px padding for the 16x16 icon below.

I removed the padding-top defined further below. For the 16x16 icon it's a
no-op, for the 18x18 one it still looks good.

We had another pass at this with maxwalker@ and decided to align the icons with
the checkboxes above and the footer text with the checkbox descriptions. I
adjusted a few more margins and paddings to match that. But this CL is primarily
intended to land the functional parts, I'm of course happy to adjust the CSS
later if it turns out not to be a correct style.

+      }
+
+      #googleFooter {
+        margin: 0 0 0.8em 0;
+        min-height: 16px;
+      }
+
+      #googleFooter iron-icon {
+        height: 16px;
+        width: 16px;

[dschuyler, 2016/04/27 23:10:40]

(same comment about 20 by 20 icons. 16px is ok if that's
called for or better for specific reasons)

[msramek, 2016/04/28 14:34:17]

Same as in the above comment; this is an official icon, so we don't want to
scale it by a nonstandard coefficient.

+      }
+
+      .clear-browsing-data-footer .footer-text {
+        -webkit-margin-start: 33px;
+      }
+
+      .clear-browsing-data-footer iron-icon {
+        float: left;
+        padding-top: 2px; /* Slightly lower the icons, so that their top is
+                             approximately at the ascender line of the font. */
+      }
+
+      html[dir='rtl'] .clear-browsing-data-footer iron-icon {
+        float: right;
+      }
+
+      .clear-browsing-data-footer a {
+        text-decoration: none;
       }
     </style>
+
     <settings-dialog id="dialog">
       <div class="title">$i18n{clearBrowsingData}</div>
       <div class="body">
@@ -71,8 +114,20 @@
         </paper-button>
       </div>
       <div class="footer">
-        <span>$i18n{warnAboutNonClearedData}</span>
-        <span>$i18n{clearsSyncedData}</span>
+        <div id="googleFooter" class="clear-browsing-data-footer">
+          <iron-icon icon="md-settings-icons:googleg"></iron-icon>
+          <div class="footer-text">$i18nRaw{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{warnAboutNonClearedData}</span>
+            <a id="clear-browser-data-old-learn-more-link"
+                href="$i18n{clearBrowsingDataLearnMoreUrl}"
+                target="_blank">$i18n{learnMore}</a>
+          </div>
+        </div>
       </div>
     </settings-dialog>
   </template>