MD Settings: About page, implement obsolete/end-of-the-line status.

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="/about_page/about_page_browser_proxy.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/icons.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">
 <link rel="import" href="/settings_shared_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/assert.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">
 
 <if expr="chromeos">
 <link rel="import" href="/about_page/detailed_build_info.html">
 <link rel="import" href="/settings_page/settings_subpage.html">
 </if>
 
 <dom-module id="settings-about-page">
   <template>
     <style include="settings-shared settings-page-styles">
-      span {
+      .product-title {
         font-size: 20px;
         margin-top: auto;
         margin-bottom: auto;
       }
 
       img {
         -webkit-margin-end: 10px;
       }
 
       iron-icon {
@@ skipping 21 matching lines @@
     <div data-page="about">
       <settings-section page-title="$i18n{aboutPageTitle}"
           current-route="[[currentRoute]]" section="about">
         <settings-animated-pages id="pages" current-route="{{currentRoute}}"
             section="about">
           <neon-animatable id="main">
             <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>
+              <span class="product-title">$i18n{aboutProductTitle}</span>
             </div>
             <div class="settings-box two-line">
-              <div hidden="[[!shouldShowUpdateStatus_(
-                  currentUpdateStatusEvent_)]]">
-                <iron-icon
-                    icon$="[[getIcon_(currentUpdateStatusEvent_)]]"
-                    src="[[getIconSrc_(currentUpdateStatusEvent_)]]">
-                </iron-icon>
-              </div>
+              <iron-icon
+                  hidden="[[!shouldShowUpdateStatusIcon_(
+                      currentUpdateStatusEvent_)]]"
+                  icon$="[[getIcon_(currentUpdateStatusEvent_)]]"
+                  src="[[getIconSrc_(currentUpdateStatusEvent_)]]">
+              </iron-icon>
               <div class="start">
-                <div hidden="[[!shouldShowUpdateStatus_(
-                    currentUpdateStatusEvent_)]]">
+                <div id="updateStatusMessage"
+                    hidden="[[!shouldShowUpdateStatusMessage_(
+                        currentUpdateStatusEvent_)]]">
                   [[getUpdateStatusMessage_(
-                      currentUpdateStatusEvent_, targetChannel_)]]
+                      currentUpdateStatusEvent_,targetChannel)]]
                 </div>
+                <span id="deprecationWarning"
+                    hidden="[[!obsoleteSystemInfo_.obsolete]]">
+                  $i18n{aboutObsoleteSystem}
+                  <a href="$i18n{aboutObsoleteSystemURL}" target="_blank">
+                    $i18n{learnMore}
+                  </a>
+                </span>
                 <div class="secondary">$i18n{aboutBrowserVersion}</div>
               </div>
               <paper-button id="relaunch" class="secondary-action"
 <if expr="not chromeos">
                   hidden="[[!shouldShowRelaunch_(currentUpdateStatusEvent_)]]"
 </if>
 <if expr="chromeos">
                   hidden="[[!shouldShowRelaunch_(
                       currentUpdateStatusEvent_, targetChannel_)]]"
 </if>
@@ skipping 58 matching lines @@
               <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>