[MD History] Add shadow to toolbar on scroll.

chrome/browser/resources/md_history/app.html

Index: chrome/browser/resources/md_history/app.html
diff --git a/chrome/browser/resources/md_history/app.html b/chrome/browser/resources/md_history/app.html
index 02f65d4d459395322678379c27e81e53766b9a47..c8d207b073a3047d2642f57f9c55f3083e2bf516 100644
--- a/chrome/browser/resources/md_history/app.html
+++ b/chrome/browser/resources/md_history/app.html
@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/app-route/app-route.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-scroll-target-behavior/iron-scroll-target-behavior.html">
 <link rel="import" href="chrome://history/history_toolbar.html">
 <link rel="import" href="chrome://history/list_container.html">
 <link rel="import" href="chrome://history/synced_device_manager.html">
@@ -31,6 +32,7 @@
        * crbug.com/618153. TODO(dbeam): is this still an issue? */
       #main-container {
         height: calc(100% - var(--toolbar-height));
+        position: relative;
       }
 
       :host([grouped_]) #main-container {
@@ -64,6 +66,22 @@
         font-size: 123%;
         font-weight: 400;
       }
+
+      #drop-shadow {
+        box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
+        height: 6px;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: opacity 500ms;
+      }
+
+      :host([toolbar-shadow_]) #drop-shadow {
+        opacity: 1;
+      }
     </style>
     <app-location route="{{route_}}"></app-location>
     <app-route route="{{route_}}" pattern="/:page" data="{{routeData_}}"
@@ -103,6 +121,7 @@
           </history-synced-device-manager>
         </template>
       </iron-pages>
+      <div id="drop-shadow"></div>
     </div>
 
     <template is="dom-if" if="[[hasDrawer_]]">