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 9ee7c75a537c770497988d6b76fca661dda2bf79..203caa66107c638525569035b37dd0319a989fa1 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">
@@ -13,7 +14,53 @@
       :host {
         overflow: auto;
         padding-top: var(--first-card-padding-top);

[tsergeant, 2016/06/17 06:22:03]

It would be a good idea to move this padding out of :host and onto something
which only affects the synced cards (perhaps add a new wrapper div around the
dom-repeat).

This way, the layout of the rest of the elements doesn't need to take this into
account. I have a CL out at the moment which is going to change the amount of
padding here, so it's good to keep it independent of that.

[lshang, 2016/06/21 03:00:26]

Done.
I moved padding out of :host and onto the wrapper div synced-device-list. The
padding will still be there even though there is no content in the list, so I
added a hidden property binding to syncedDevices_.length to fully hide the div,
if you are ok with this.

[tsergeant, 2016/06/21 04:33:50]

Yup, sounds good to me

+        position: relative;
       }
+
+      #illustration {
+        background: -webkit-image-set(
+            url(chrome://history/images/100/no_synced_tab.png) 1x,
+            url(chrome://history/images/200/no_synced_tab.png) 2x)
+                no-repeat center center;
+        height: 222px;
+        margin-top: 60px;
+        width: 594px;
+      }
+
+      #no-synced-tabs {
+        bottom: 0;

[tsergeant, 2016/06/17 06:22:03]

It shouldn't be necessary to use absolute positioning here.

Instead, try setting `height: 100%` on #no-synced-tabs and
`class="centered-message"` should handle the rest.

[lshang, 2016/06/21 03:00:26]

Done. 
It works! With a single line, instead of whole bunch of lines...(⊙＿⊙)

+        left: 0;
+        margin: auto;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      #sign-in-guide {
+        display: flex;
+        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;
+      }
+
     </style>
     <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
       <history-synced-device-card device="[[syncedDevice.device]]"
@@ -22,6 +69,23 @@
           separator-indexes="[[syncedDevice.separatorIndexes]]">
       </history-synced-device-card>
     </template>
+    <div id="no-synced-tabs" class="centered-message"
+      hidden="[[!showNoSyncedMessage_]]">
+      <span><!-- Text populated dynamically. --></span>
+    </div>
+    <div id="sign-in-guide" hidden$="[[signInState_]]">
+      <div>

[tsergeant, 2016/06/17 06:22:03]

This div doesn't seem to be doing much.

You can get rid of it if you set a couple of extra CSS properties on
#sign-in-guide:

flex-direction: column;
align-items: center;

[lshang, 2016/06/21 03:00:26]

Done.

+        <div id="illustration"></div>
+        <div id="sign-in-promo">$i18n{signInPromo}</div>
+        <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
+        <a>

[tsergeant, 2016/06/17 06:22:03]

Similarly, this <a> isn't doing anything and can be removed.

[lshang, 2016/06/21 03:00:26]

Done.

+          <paper-button id="sign-in-button" on-tap="onSignInTap_">
+              $i18n{signInButton}
+          </paper-button>
+        </a>
+      </div>
+    </div>
+
   </template>
   <script src="chrome://history/synced_device_manager.js"></script>
 </dom-module>