MD Downloads: add "waterfall" shadow (shows when the list is scrolled)

chrome/browser/resources/md_downloads/manager.css

Index: chrome/browser/resources/md_downloads/manager.css
diff --git a/chrome/browser/resources/md_downloads/manager.css b/chrome/browser/resources/md_downloads/manager.css
index ffcec1d79416d7a27b4464d093a9a0b0fab9bdba..39e49659d876dee9e8b641c1b1ec3b425ae70d7b 100644
--- a/chrome/browser/resources/md_downloads/manager.css
+++ b/chrome/browser/resources/md_downloads/manager.css
@@ -7,6 +7,7 @@
   flex: 1 0;
   flex-direction: column;
   height: 100%;
+  z-index: 0;
 }
 
 @media screen and (max-width: 1024px) {
@@ -15,6 +16,27 @@
   }
 }
 
+#toolbar {
+  position: relative;
+  z-index: 1;
+}
+
+#toolbar::after {
+  box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
+  content: '';

[tsergeant, 2016/09/16 00:44:10]

Hmm, good idea. We should try switching to a pseudoelement in History.

+  display: block;
+  height: 6px;
+  opacity: 0;
+  position: absolute;
+  top: 100%;
+  transition: opacity 500ms;
+  width: 100%;
+}
+
+:host([has-shadow_]) #toolbar::after {
+  opacity: 1;
+}
+
 #downloads-list {
   /* TODO(dbeam): we're not setting scrollTarget explicitly, yet
    * style="overflow: auto" is still being set by <iron-list>'s JS. Weird. */