MD Settings: About page, implementing update status.

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 14f8089616c9eb53e71388e14b367df4215c6e3c..e00e55eae1c75345e083ee20fa7c67002e5a9917 100644
--- a/chrome/browser/resources/settings/about_page/about_page.html
+++ b/chrome/browser/resources/settings/about_page/about_page.html
@@ -1,9 +1,15 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://md-settings/about_page/about_page_browser_proxy.html">
+<link rel="import" href="chrome://md-settings/i18n_setup.html">
+<link rel="import" href="chrome://md-settings/icons.html">
 <link rel="import" href="chrome://md-settings/settings_page/main_page_behavior.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.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/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
@@ -25,6 +31,18 @@
       img {
         -webkit-margin-end: 10px;
       }
+
+      iron-icon {
+        -webkit-margin-end: var(--iron-icon-spacing);
+      }
+
+      iron-icon.check-icon {

[tommycli, 2016/05/19 20:44:48]

Actually I would recommend:
  iron-icon[icon="settings:check-circle"]

Although I know this seems a bit more fragile, it also means we don't need these
extra classes.

Then you could just get rid of getIconCssClass_

[dpapad, 2016/05/19 21:31:04]

I like your suggestion, but unfortunately it did not work. The reason is that
"icon" is not an attribute, so CSS can't see it. Adding "reflectToAttribute:
true" at
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/polyme...
makes it work, but requires a Polymer change.

[Dan Beam, 2016/05/19 22:23:21]

there's already a pull for that, btw

[michaelpg, 2016/05/19 22:26:18]

https://github.com/PolymerElements/iron-icon/pull/69

[dpapad, 2016/05/19 22:26:56]

Thanks, just found it, https://github.com/PolymerElements/iron-icon/pull/69.
I'll make a note to update this code once/if this lands, but I am reluctant
adding a TODO, since we don't know if the PR will be LGTMed.

[tommycli, 2016/05/20 00:24:36]

Hi, I think this should work. I did something identical in the people_page
though I did use the icon$= binding. Maybe that would do the trick?
https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

[Dan Beam, 2016/05/20 00:27:12]

yes, $= uses setAttribute('thing', value), whereas = effectively does .thing =
value

[dpapad, 2016/05/20 00:51:34]

Done, $= worked.

+        fill: var(--paper-blue-600);
+      }
+
+      iron-icon.error-icon {

[tommycli, 2016/05/19 20:44:48]

same here

[dpapad, 2016/05/19 21:31:04]

See previous response.

+        fill: var(--paper-red-600);
+      }
     </style>
     <settings-section page-title="$i18n{aboutPageTitle}"
         current-route="[[currentRoute]]" section="about">
@@ -38,14 +56,21 @@
             <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>
-              <div class="secondary">Version Foo.bar.baz</div>
+            <div hidden="[[!shouldShowUpdateStatus_(currentUpdateStatusEvent_)]]">
+              <iron-icon class$="[[getIconCssClass_(currentUpdateStatusEvent_)]]"
+                  icon="[[getIcon_(currentUpdateStatusEvent_)]]"
+                  src="[[getIconSrc_(currentUpdateStatusEvent_)]]">

[tommycli, 2016/05/19 20:44:48]

Are some of these really a custom image that can't be consolidated within
settings-icons? It's not a huge problem, but a bit annoying.

[dpapad, 2016/05/19 21:31:04]

src can only be null or chrome://resources/images/throbber_small.svg. Perhaps
throbber_small.svg can be added as settings icon. If we end up using this
throbber in more places might be worth figuring this out, but since this is
currently used only here, I think is OK to defer.

+              </iron-icon>
             </div>
-            <div class="secondary-action">
-              <paper-button class="secondary-button">Check for update</paper-button>
+            <div class="start">
+              <div hidden="[[!shouldShowUpdateStatus_(currentUpdateStatusEvent_)]]">
+                [[getUpdateStatusMessage_(currentUpdateStatusEvent_)]]
+              </div>
+              <div class="secondary">$i18n{aboutBrowserVersion}</div>
             </div>
+<if expr="chromeos">
+            <paper-button class="secondary-action">Check for update</paper-button>
+</if>
           </div>
           <div id="help" class="settings-box two-line" on-tap="onHelpTap_">
             $i18n{aboutGetHelpUsingChrome}