PDF Viewer update: Add sidenav bg color and toolbar box shadow.

Bug: 1101598
Change-Id: I8a7286166fb204aaaab51fad66d9e1bf398f7047
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2321147
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Auto-Submit: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#792315}

chrome/browser/resources/pdf/elements/shared-vars.html

@@ -4,6 +4,7 @@
       --iron-icon-height: 20px;
       --iron-icon-width: 20px;
       --viewer-icon-ink-color: rgb(189, 189, 189);
+      --viewer-pdf-toolbar-background-color: rgb(50, 54, 57);
     }
   </style>
 </custom-style>

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html

 <style include="pdf-shared">
   :host {
-    --pdf-toolbar-background-color: rgb(50, 54, 57);
     --pdf-toolbar-text-color: rgb(241, 241, 241);
+    box-shadow:
+        0 -2px 8px rgba(0, 0, 0, 0.09),
+        0 4px 8px rgba(0, 0, 0, 0.06),
+        0 1px 2px rgba(0, 0, 0, 0.3),
+        0 2px 6px rgba(0, 0, 0, 0.15);
   }
 
   #toolbar {
     align-items: center;
-    background-color: var(--pdf-toolbar-background-color);
-    box-shadow: var(--cr-elevation-2);
+    background-color: var(--viewer-pdf-toolbar-background-color);
     color: white;
     display: flex;
     height: 48px;

chrome/browser/resources/pdf/pdf_viewer.html

@@ -19,6 +19,10 @@
 
   /* Styles only applying when the pdfViewerUpdateEnabled flag is on. */
 
+  viewer-pdf-toolbar-new {
+    z-index: 1;
+  }
+
   :host-context([pdf-viewer-update-enabled]):host {
     display: flex;
     flex-direction: column;
@@ -33,7 +37,7 @@
   }
 
   #sidenav {
-    background-color: red;
+    background-color: var(--viewer-pdf-toolbar-background-color);
     min-width: 260px;
   }
 
@@ -117,7 +121,7 @@
 
 <template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
   <div id="container">
-    <div id="sidenav">sidenav</div>
+    <div id="sidenav"></div>
     <div id="main" on-scroll="onScroll_">
       <div id="sizer"></div>
       <div id="content"></div>