[MD Bookmarks] Add toasts.

chrome/browser/resources/md_bookmarks/toast.html

Index: chrome/browser/resources/md_bookmarks/toast.html
diff --git a/chrome/browser/resources/md_bookmarks/toast.html b/chrome/browser/resources/md_bookmarks/toast.html
new file mode 100644
index 0000000000000000000000000000000000000000..de35c06f4bbeebc97603455e57f732409305908c
--- /dev/null
+++ b/chrome/browser/resources/md_bookmarks/toast.html
@@ -0,0 +1,35 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<dom-module id="bookmarks-toast">

[tsergeant, 2017/06/01 08:25:00]

To be honest, I don't really see the need to make a distinction between
bookmarks-toast and bookmarks-toast-manager anymore, except for the fact that
*maybe* one day we will want to share one but not the other.

<bookmarks-toast> is simple enough that I think we should just implement it in
<bookmarks-toast-manager> directly.

Sorry for causing even more churn on this CL.

[calamity, 2017/06/02 05:34:22]

Done.

+  <template>
+    <style>
+      :host {
+        align-items: center;
+        background-color: var(--bookmarks-toast-background-color, #323232);

[tsergeant, 2017/06/01 08:25:00]

Relatedly, I don't think we need to have these unused CSS vars lying around

[calamity, 2017/06/02 05:34:22]

Done.

+        border-radius: 4px;
+        bottom: 0;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
+        box-sizing: border-box;
+        color: var(--bookmarks-toast-color, #fff);
+        display: flex;
+        margin: 24px;
+        max-width: 568px;
+        min-height: 52px;
+        min-width: 288px;
+        opacity: 0;
+        padding: 0 24px;
+        position: fixed;
+        transform: translateY(100px);
+        transition: transform 300ms, opacity 300ms;
+        white-space: nowrap;
+      }
+
+      :host([open]) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    </style>
+    <slot></slot>
+  </template>
+  <script src="chrome://bookmarks/toast.js"></script>
+</dom-module>