[MD Bookmarks] Add toasts.

chrome/browser/resources/md_bookmarks/toast_manager.html

Index: chrome/browser/resources/md_bookmarks/toast_manager.html
diff --git a/chrome/browser/resources/md_bookmarks/toast_manager.html b/chrome/browser/resources/md_bookmarks/toast_manager.html
new file mode 100644
index 0000000000000000000000000000000000000000..38e766a9c9dd0862c51caa4dc69e42fc0f1edb23
--- /dev/null
+++ b/chrome/browser/resources/md_bookmarks/toast_manager.html
@@ -0,0 +1,56 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toast/paper-toast.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://bookmarks/shared_style.html">
+
+<dom-module id="bookmarks-toast-manager">
+  <template>
+    <style include="shared-style">
+      paper-toast {
+        align-items: center;
+        display: flex;
+        height: 52px;
+        max-width: 568px;

[tsergeant, 2017/05/26 05:19:24]

A couple of additions to match the mocks:

font-size: inherit;
margin: 24px;

[calamity, 2017/05/31 08:10:41]

Pushed into cr-toast.

+        padding: 0 16px 0 24px;
+      }
+
+      #button-container {
+        align-items: center;
+        display: flex;
+        height: 0;

[tsergeant, 2017/05/26 05:19:24]

Is this necessary?

[calamity, 2017/05/31 08:10:41]

Whole thing wasn't necessary actually. Removed.

+      }
+
+      #content {
+        flex: 1;
+        margin-right: 32px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      paper-button {
+        color: var(--google-blue-300);
+        font-size: 13px;

[tsergeant, 2017/05/26 05:19:24]

With font-size: inherit above, you won't need to apply this here as well.

[calamity, 2017/05/31 08:10:41]

Acknowledged.

+        font-weight: 500;
+        height: 32px;
+        margin: 0;
+        min-width: 52px;
+        padding: 0;

[tsergeant, 2017/05/26 05:19:24]

I think the mocks call for padding: 8px here. 

It makes sense in the case where either the font size is increased, or the
translation for 'undo' is long. When that happens, there's no space around the
text and the ripple pushes up against it badly. Adding in the padding doesn't
change anything for the English case, either.

[calamity, 2017/05/31 08:10:41]

Done.

+      }
+    </style>
+    <template is="cr-lazy-render" id="toast">
+      <paper-toast duration="5000">
+        <div id="content"></div>
+        <div id="button-container">
+          <paper-button id="button" hidden$="[[!showUndo_]]"
+              on-tap="onUndoTap_">
+            $i18n{undo}
+          </paper-button>
+        </div>
+      </paper-toast>
+    </template>
+  </template>
+  <script src="chrome://bookmarks/toast_manager.js"></script>
+</dom-module>