MD Settings: About: Show connectionTypes message

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 e19861d4fab15100e55c8c1690fe1f05d0a22336..eb104bb03ff54ab91381dcd20c2c4a0679f9a915 100644
--- a/chrome/browser/resources/settings/about_page/about_page.js
+++ b/chrome/browser/resources/settings/about_page/about_page.js
@@ -260,7 +260,8 @@ Polymer({
 
 // <if expr="chromeos">
         if (this.currentChannel_ != this.targetChannel_) {
-          return this.i18n('aboutUpgradeUpdatingChannelSwitch',
+          return this.i18n(
+              'aboutUpgradeUpdatingChannelSwitch',
               this.i18n(settings.browserChannelToI18nId(this.targetChannel_)),
               progressPercent);
         }
@@ -275,10 +276,21 @@ Polymer({
         }
         return this.i18n('aboutUpgradeUpdating');
       default:
+        var result = '';
         var message = this.currentUpdateStatusEvent_.message;
-        return message ?
-            parseHtmlSubset('<b>' + message + '</b>').firstChild.innerHTML :
-            '';
+        if (!!message) {
+          result += '<div>' +
+              parseHtmlSubset('<b>' + message + '</b>').firstChild.innerHTML +
+              '</div>';
+        }
+        var connectMessage = this.currentUpdateStatusEvent_.connectionTypes;
+        if (!!connectMessage) {
+          result += '<div>' +
+              parseHtmlSubset('<b>' + connectMessage + '</b>')

[dpapad, 2017/02/17 02:48:14]

It is also worth mentioning that this is only necessary if |connectMessage| can
potentially include HTML code (like a link). From the screenshot you provided at
https://bugs.chromium.org/p/chromium/issues/detail?id=689715#c16, I don't see a
link, so this parseHtmlSubset() call could be unnecessary.

[stevenjb, 2017/02/17 20:02:41]

I think that in principal we prefer to call this for inserting HTML, e.g. to
protect the code from a typo lower down the stack.

+                  .firstChild.innerHTML +
+              '</div>';
+        }
+        return result;

[dpapad, 2017/02/17 02:44:28]

Nit(optional): We can avoid duplicate logic as follows

default:
  function generateErrorHtml(message) {
    return '<div>' +
        parseHtmlSubset('<b>' + message + '</b>').firstChild.innerHTML +
        '</div>';
  }   

  var result = '';                                                              
                                                                                
                                                             
  var message = this.currentUpdateStatusEvent_.message;
  if (!!message)
    result += generateErrorHtml(message);
  var connectMessage = this.currentUpdateStatusEvent_.connectionTypes;
  if (!!connectMessage)
    result += generateErrorHtml(connectMessage);

  return result;

[stevenjb, 2017/02/17 20:02:41]

Sure. Done.

     }
   },
 
@@ -299,9 +311,9 @@ Polymer({
         return 'settings:error';
       case UpdateStatus.UPDATED:
       case UpdateStatus.NEARLY_UPDATED:
-          return 'settings:check-circle';
+        return 'settings:check-circle';
       default:
-          return null;
+        return null;
     }
   },