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

chrome/browser/resources/md_downloads/manager.css

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 :host {
   display: flex;
   flex: 1 0;
   flex-direction: column;
   height: 100%;
+  z-index: 0;
 }
 
 @media screen and (max-width: 1024px) {
   :host {
     flex-basis: 670px;  /* 622 card width + 24 left margin + 24 right margin. */
   }
 }
 
+#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. */
   overflow-y: overlay !important;
 }
 
 #no-downloads,
 #downloads-list {
   flex: 1;
 }
@@ skipping 15 matching lines @@
   min-height: min-content;
 }
 
 #no-downloads .illustration {
   background: -webkit-image-set(
       url(chrome://downloads/1x/no_downloads.png) 1x,
       url(chrome://downloads/2x/no_downloads.png) 2x) no-repeat center center;
   height: 144px;  /* Matches natural image height. */
   margin-bottom: 32px;
 }