MD Settings: About page, implementing update status.

chrome/browser/resources/settings/about_page/about_page.js

Index: chrome/browser/resources/settings/about_page/about_page.js
diff --git a/chrome/browser/resources/settings/about_page/about_page.js b/chrome/browser/resources/settings/about_page/about_page.js
index 44da2984db37bcaad55952fe8a64205d4ebaae3e..90fd9c17e313f988b5a10cf83d93c307d0a82afd 100644
--- a/chrome/browser/resources/settings/about_page/about_page.js
+++ b/chrome/browser/resources/settings/about_page/about_page.js
@@ -9,7 +9,7 @@
 Polymer({
   is: 'settings-about-page',
 
-  behaviors: [RoutableBehavior],
+  behaviors: [WebUIListenerBehavior, RoutableBehavior, I18nBehavior],
 
   properties: {
     /**
@@ -19,6 +19,20 @@ Polymer({
       type: Object,
       notify: true,
     },
+
+    /** @private {?UpdateStatusChangedEvent} */
+    currentUpdateStatusEvent_: Object,
+
+<if expr="chromeos">
+    /**
+     * Whether the current and target channel is different.
+     * @private
+     */
+    channelsDiffer_: Boolean,
+
+    /** @private {!BrowserChannel} */
+    targetChannel_: String,
+</if>
   },
 
   /** @private {?settings.AboutPageBrowserProxy} */
@@ -34,6 +48,32 @@ Polymer({
   /** @override */
   ready: function() {
     this.browserProxy_ = settings.AboutPageBrowserProxyImpl.getInstance();
+    this.browserProxy_.pageReady();
+
+<if expr="chromeos">
+    Promise.all([
+      this.browserProxy_.getCurrentChannel(),
+      this.browserProxy_.getTargetChannel(),
+    ]).then(function(channels) {
+      this.targetChannel_ = channels[1];
+      this.channelsDiffer_ = channels[0] != this.targetChannel_;
+      this.startListening_();
+    }.bind(this));
+</if>
+<if expr="not chromeos">
+    this.startListening_();
+</if>
+  },
+
+  /** @private */
+  startListening_: function() {
+    this.addWebUIListener(
+        'update-status-changed',
+        /** @param {!UpdateStatusChangedEvent} event */
+        function(event) {
+          this.currentUpdateStatusEvent_ = event;
+        }.bind(this));
+    this.browserProxy_.refreshUpdateStatus();
   },
 
    /** @override */
@@ -46,6 +86,95 @@ Polymer({
     this.browserProxy_.openHelpPage();
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  shouldShowUpdateStatus_: function() {
+    return this.currentUpdateStatusEvent_.status != UpdateStatus.DISABLED;
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getUpdateStatusMessage_: function() {
+    switch (this.currentUpdateStatusEvent_.status) {
+      case UpdateStatus.CHECKING:
+        return this.i18n('aboutUpgradeCheckStarted');
+      case UpdateStatus.NEARLY_UPDATED:

[tommycli, 2016/05/20 00:30:45]

optional nit: can we just do something like:

<if expr="chromeos">
  if (this.channelsDiffer_)
    return this.i18n('aboutUpgradeSuccessChannelSwitch');
</if>
  return this.i18n('aboutUpgradeRelaunch');

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

Done.

+        var messageId = 'aboutUpgradeRelaunch';
+<if expr="chromeos">
+        if (this.channelsDiffer_)
+          messageId = 'aboutUpgradeSuccessChannelSwitch';
+</if>
+        return this.i18n(messageId);
+      case UpdateStatus.UPDATED:
+        return this.i18n('aboutUpgradeUpToDate');
+      case UpdateStatus.UPDATING:

[tommycli, 2016/05/20 00:30:45]

optional nit: and same in this case, i think we can avoid using any variables.

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

Done.

+        var messageId = 'aboutUpgradeUpdating';
+        var channelDisplayName = null;
+<if expr="chromeos">
+        if (this.channelsDiffer_) {
+          messageId = 'aboutUpgradeUpdatingChannelSwitch';
+          channelDisplayName = this.i18n(
+              settings.browserChannelToI18nId(this.targetChannel_));
+        }
+</if>
+        return this.i18n(messageId, channelDisplayName || undefined);
+      default:
+        return this.currentUpdateStatusEvent_.message;
+    }
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getIconCssClass_: function() {
+    switch (this.currentUpdateStatusEvent_.status) {
+      case UpdateStatus.FAILED:
+        return 'error-icon';
+      case UpdateStatus.UPDATED:
+      case UpdateStatus.NEARLY_UPDATED:
+          return 'check-icon';
+      default:
+          return '';
+    }
+  },
+
+  /**
+   * @return {?string}
+   * @private
+   */
+  getIcon_: function() {
+    switch (this.currentUpdateStatusEvent_.status) {
+      case UpdateStatus.DISABLED_BY_ADMIN:
+        return 'cr:domain';
+      case UpdateStatus.FAILED:
+        return 'settings:error';
+      case UpdateStatus.UPDATED:
+      case UpdateStatus.NEARLY_UPDATED:
+          return 'settings:check-circle';
+      default:
+          return null;
+    }
+  },
+
+  /**
+   * @return {?string}
+   * @private
+   */
+  getIconSrc_: function() {
+    switch (this.currentUpdateStatusEvent_.status) {
+      case UpdateStatus.CHECKING:
+      case UpdateStatus.UPDATING:
+        return 'chrome://resources/images/throbber_small.svg';
+      default:
+        return null;
+    }
+  },
+
 <if expr="chromeos">
   /** @private */
   onDetailedBuildInfoTap_: function() {