MD Settings: Adding "About" page basic structure.

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
new file mode 100644
index 0000000000000000000000000000000000000000..881f60ce74bb930dccc075d6382c81adda570abc
--- /dev/null
+++ b/chrome/browser/resources/settings/about_page/about_page.html
@@ -0,0 +1,57 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://md-settings/settings_page/settings_section.html">
+<link rel="import" href="chrome://md-settings/settings_shared_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">

[tommycli, 2016/05/06 18:01:43]

Do you also need to import main_page_behavior?

[dpapad, 2016/05/06 18:33:29]

I looked into this. MainPageBehavior has methods related to opening/closing
subsections. Given that the About page does not have any subsections (unlike
'basic' and 'abvanced') it is not needed.

[tommycli, 2016/05/06 18:50:20]

I asked because you use main-page-styles below. If it's unneeded, you could just
fold the custom styles into the settings-shared block?

[dpapad, 2016/05/06 19:01:31]

Done.

+
+<dom-module id="settings-about-page">
+  <link rel="import" type="css" href="chrome://md-settings/settings_page.css">
+  <template>
+    <style include="settings-shared"></style>
+    <style include="main-page-styles">
+      .logo-container {

[tommycli, 2016/05/06 18:01:43]

Which is the element with the logo-container class?

[dpapad, 2016/05/06 18:33:29]

Removed. That was a remainder from a previous state of my code, where I was not
using settings-box yet.

+        display: flex;
+      }

[tommycli, 2016/05/06 18:01:43]

\n between entries in css

[dpapad, 2016/05/06 18:33:29]

Done.

+      span {
+        font-size: 20px;
+        margin-top: auto;
+        margin-bottom: auto;

[tommycli, 2016/05/06 18:01:43]

I assume these auto margins are to center? Does flexbox's align-items or
align-content also work? (If your container is already a flexbox that is) I find
that more explicit.

[dpapad, 2016/05/06 18:33:29]

Removed. You are right, align-items: center, works and settings-box already does
that, so these margins are not needed anymore.

+      }
+      img {
+        -webkit-margin-end: 10px;
+      }
+    </style>
+    <settings-section page-title="$i18n{aboutPageTitle}"
+        current-route="[[currentRoute]]" section="">

[tommycli, 2016/05/06 18:01:43]

Since Michael rewrote settings-section animations, i'm not sure what the effect
of section="" is. I'm okay with it if it seems to work., this is just a warning
that I'm not sure what the behavior is now.

[tommycli, 2016/05/06 18:01:43]

Additionally, I'm not sure if current-route="[[currentRoute]]" is needed
anymore. Looking at the source, it kind of seems that settings-section has been
made "dumb" and no longer needs the route. (And main_page_behavior handles
that). Just a nit.

[dpapad, 2016/05/06 18:33:29]

Removed section="" completely. Navigation still seems to work fine.
Regarding current-route, I see that all settings-sections still use it, see
https://code.google.com/p/chromium/codesearch#search/&q=settings-section%20fi....
If it is not needed we can remove it from all <settings-section> instances in a
separate CL.

+      <div class="settings-box">
+        <img id="product-logo"
+            srcset="chrome://theme/current-channel-logo@1x 1x,
+                    chrome://theme/current-channel-logo@2x 2x" alt="">
+        <span>$i18n{aboutProductTitle}</span>
+      </div>
+      <div class="settings-box two-line">
+        <!-- TODO(dpapad): Implement this. -->
+        <div class="start">
+          <div>Your device is up to date</div>

[tommycli, 2016/05/06 18:01:43]

If there are mocks and these are the final English strings, it would be nice if
there were as few un-internationalized strings within the committed patches as
possible.

[dpapad, 2016/05/06 18:33:29]

The final string is a combination of dynamic and static data
For Chrome: "Google Chrome is up to date" 
For Chromium: "Chromium is up to date"
For Chrome OS: "Your device is up to date"

I prefer to localize all the strings of this page in a separate CL. I can land
that separate CL before this one or after, don't mind much. Let me know if you
have a preference.

[tommycli, 2016/05/06 18:50:20]

Ah that's fine then. I'm okay with localizing in separate CL

+          <div class="secondary">Version Foo.bar.baz</div>
+        </div>
+        <paper-button class="secondary-action">Check for update</paper-button>
+      </div>
+      <div class="settings-box two-line">
+        <!-- TODO(dpapad): Implement this. -->
+        <div class="start">
+          <div>Get help with Chrome</div>
+          <div class="secondary">Open the Help Center</div>
+        </div>
+      </div>
+      <div class="settings-box">
+        <!-- TODO(dpapad): Implement this. -->
+        Report an issue
+      </div>
+      <div class="settings-box">
+        <!-- TODO(dpapad): Implement this. -->
+        Other info here
+      </div>
+    </settings-section>
+  </template>
+  <script src="about_page.js"></script>
+</dom-module>