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 7b1206eab8e11bbc6d90e3023a82bda0a7a181d6..f1a61a2452c83e108f5c63d137442048470fadcb 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">
@@ -15,11 +16,52 @@
         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]]"
@@ -29,6 +71,18 @@
         </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>