MD History: add sign in promo in synced tabs when user isn't logged in

chrome/browser/resources/md_history/synced_device_manager.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
 <link rel="import" href="chrome://resources/html/cr/ui/position_util.html">
 <link rel="import" href="chrome://history/shared_style.html">
 <link rel="import" href="chrome://history/synced_device_card.html">
 
 <dom-module id="history-synced-device-manager">
   <style include="shared-style"></style>
   <template>
     <style>
       :host {
         display: block;
         overflow: auto;
       }
 
-      #container {
+      #illustration {
+        background: -webkit-image-set(
+            url(chrome://history/images/100/sign_in_promo.png) 1x,
+            url(chrome://history/images/200/sign_in_promo.png) 2x)
+                no-repeat center center;
+        height: 222px;
+        margin-top: 100px;
+        width: 594px;
+      }
+
+      #no-synced-tabs {
+        height: 100%;
+      }
+
+      #sign-in-guide {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+      }
+
+      #sign-in-promo {
+        color: #333;
+        font-size: 28px;
+        margin-top: 40px;
+      }
+
+      #sign-in-promo-desc {
+        color: #848484;
+        font-size: 16px;
+        margin-top: 10px;
+      }
+
+      #sign-in-button {
+        background-color: var(--google-blue-500);
+        color: white;
+        font-size: 14px;
+        margin-top: 24px;
+      }
+
+      #synced-device-list {
         padding-top: var(--first-card-padding-top);
       }
     </style>
-    <div id="container">
+    <div id="synced-device-list" hidden="[[!syncedDevices_.length]]">
       <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
         <history-synced-device-card device="[[syncedDevice.device]]"
             last-update-time="[[syncedDevice.lastUpdateTime]]"
             tabs="[[syncedDevice.tabs]]"
             separator-indexes="[[syncedDevice.separatorIndexes]]"
             searched-term="[[searchedTerm]]">
         </history-synced-device-card>
       </template>
     </div>
+    <div id="no-synced-tabs" class="centered-message"
+      hidden="[[!showNoSyncedMessage(signInState_, syncedDevices_.length)]]">
+      [[noSyncedTabsMessage(fetchingSyncedTabs_)]]
+    </div>
+    <div id="sign-in-guide" hidden$="[[signInState_]]">
+      <div id="illustration"></div>
+      <div id="sign-in-promo">$i18n{signInPromo}</div>
+      <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
+      <paper-button id="sign-in-button" on-tap="onSignInTap_">
+        $i18n{signInButton}
+      </paper-button>
+    </div>
   </template>
   <script src="chrome://history/synced_device_manager.js"></script>
 </dom-module>