MD Settings: About: Show connectionTypes message

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="about_page_browser_proxy.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../lifetime_browser_proxy.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../settings_page/main_page_behavior.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">
 <link rel="import" href="../settings_page/settings_section.html">
 <link rel="import" href="../settings_page_css.html">
@@ skipping 19 matching lines @@
   <template>
     <style include="settings-shared settings-page-styles">
       :host {
         --about-page-image-space: 10px;
       }
 
       .copyable {
         -webkit-user-select: text;
       }
 
+      .info-section {
+        margin-bottom: 12px;
+      }
+
+      .padded {
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
       .product-title {
         font-size: 153.85%;  /* 20px / 13px */
         margin-bottom: auto;
         margin-top: auto;
       }
 
       img {
         -webkit-margin-end: var(--about-page-image-space);
       }
 
       iron-icon {
         -webkit-margin-end: var(--about-page-image-space);
         width: 32px;  /* The width of the product-logo img. */
       }
 
       iron-icon[icon='settings:check-circle'] {
         fill: var(--paper-blue-600);
       }
 
       iron-icon[icon='settings:error'] {
         fill: var(--paper-red-600);
       }
 
-      .product-info {
-        display: block;
-        padding-bottom: 10px;
-        padding-top: 10px;
-      }
-
-      .info-section {
-        margin-bottom: 12px;
-      }
-
       #regulatoryInfo img {
         width: 330px;
       }
 
 <if expr="_google_chrome and is_macosx">
       #promoteUpdater[disabled] {
         @apply(--settings-secondary);
       }
 </if>
     </style>
     <div>
       <settings-section page-title="$i18n{aboutPageTitle}" section="about">
         <settings-animated-pages id="pages" section="about">
           <neon-animatable route-path="default">
             <div class="settings-box two-line">
               <img id="product-logo" on-tap="onProductLogoTap_"
                   srcset="chrome://theme/current-channel-logo@1x 1x,
                           chrome://theme/current-channel-logo@2x 2x" alt="">
               <span class="product-title">$i18n{aboutProductTitle}</span>
             </div>
             <div class="settings-box two-line">
               <!-- TODO(dpapad): Investigate why vulcanize does not handle well
                 a new line after "getIconSrc_(", causes incorrect src URL -->
               <iron-icon
                   hidden="[[!showUpdateStatus_]]"
                   icon$="[[getIcon_(
                       obsoleteSystemInfo_, currentUpdateStatusEvent_)]]"
                   src="[[getIconSrc_(obsoleteSystemInfo_, currentUpdateStatusEvent_)]]">
               </iron-icon>
-              <div class="start">
+              <div class="start padded">
                 <div id="updateStatusMessage" hidden="[[!showUpdateStatus_]]"
 <if expr="not chromeos">
                     inner-h-t-m-l="[[getUpdateStatusMessage_(
                         currentUpdateStatusEvent_)]]">
 </if>
 <if expr="chromeos">
                     inner-h-t-m-l="[[getUpdateStatusMessage_(
                         currentUpdateStatusEvent_, targetChannel_)]]">
 </if>
                 </div>
@@ skipping 63 matching lines @@
 </if>
 <if expr="chromeos">
             <div class="settings-box" on-tap="onDetailedBuildInfoTap_"
                 actionable>
               <div class="start">$i18n{aboutDetailedBuildInfo}</div>
               <button class="subpage-arrow" is="paper-icon-button-light"
                   aria-label="$i18n{aboutDetailedBuildInfo}">
               </button>
             </div>
 </if>
-            <div class="settings-box product-info copyable">
+            <div class="settings-box padded block copyable">
               <div class="info-section">
                 <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>
 <if expr="chromeos">
-            <div class="settings-box product-info" id="regulatoryInfo"
+            <div class="settings-box padded block" id="regulatoryInfo"
                 hidden$="[[!shouldShowRegulatoryInfo_(regulatoryInfo_)]]">
               <img src="[[regulatoryInfo_.url]]" alt="[[regulatoryInfo_.text]]">
             </div>
 </if>
           </neon-animatable>
 <if expr="chromeos">
           <template is="dom-if" route-path="/help/details">
             <settings-subpage page-title="$i18n{aboutDetailedBuildInfo}">
               <settings-detailed-build-info></settings-detailed-build-info>
             </settings-subpage>
           </template>
 </if>
         </settings-animated-pages>
       </settings-section>
     </div>
   </template>
   <script src="about_page.js"></script>
 </dom-module>