MD Settings: About page, display product info.

chrome/browser/resources/settings/about_page/about_page.html

Index: chrome/browser/resources/settings/about_page/about_page.html
diff --git a/chrome/browser/resources/settings/about_page/about_page.html b/chrome/browser/resources/settings/about_page/about_page.html
index bd1c689f544a8a34454add3ddf6d2f7f79d437be..bbd75e8c1ec8994b2ad53dd4e0a48d6eca183766 100644
--- a/chrome/browser/resources/settings/about_page/about_page.html
+++ b/chrome/browser/resources/settings/about_page/about_page.html
@@ -44,6 +44,16 @@
       iron-icon[icon="settings:error"] {
         fill: var(--paper-red-600);
       }
+
+      .product-info {
+        display: block;
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
+      .info-section {
+        margin: 12px 0;
+      }
     </style>
     <settings-section page-title="$i18n{aboutPageTitle}"
         current-route="[[currentRoute]]" section="about">
@@ -101,6 +111,22 @@
             Detailed build info
           </div>
 </if>
+          <div class="settings-box product-info">
+            <div class="info-section">

[dschuyler, 2016/05/24 00:40:23]

nit: the top padding on this div
makes the screen shot look like there
is too much padding on the top. Does it look ok
to remove this <div class="info-section">
and rely only on the .inf-section below
for spacing?

[dpapad, 2016/05/24 00:49:10]

You are right. I fixed it by specifying padding-bottom only instead of both
padding top and bottom.

+              <div class="secondary">$i18n{aboutProductTitle}</div>
+              <div class="secondary">$i18n{aboutProductCopyright}</div>
+            </div>
+
+            <div class="info-section">
+              <div class="secondary">$i18nRaw{aboutProductLicense}</div>
+<if expr="chromeos">
+              <div class="secondary">$i18nRaw{aboutProductOsLicense}</div>
+</if>
+            </div>
+<if expr="_google_chrome">
+            <div class="secondary">$i18nRaw{aboutProductTos}</div>
+</if>
+          </div>
         </neon-animatable>
 <if expr="chromeos">
         <template is="dom-if" name="detailed-build-info">