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

chrome/browser/resources/md_history/synced_device_manager.html

Index: chrome/browser/resources/md_history/synced_device_manager.html
diff --git a/chrome/browser/resources/md_history/synced_device_manager.html b/chrome/browser/resources/md_history/synced_device_manager.html
index 93f25907eada17818b47ac923aeeda696d848b80..1fd88578a52aec6ed1c6c820415a8425edd7e159 100644
--- a/chrome/browser/resources/md_history/synced_device_manager.html
+++ b/chrome/browser/resources/md_history/synced_device_manager.html
@@ -1,5 +1,6 @@
 <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">
@@ -12,17 +13,75 @@
     <style>
       :host {
         overflow: auto;
+      }
+
+      #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>
-    <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 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>