PDF Viewer update: Animate opening/closing the sidenav.

Bug: 1114268
Change-Id: I633cec77a423b2846f8f20d4ccf2347492f01710
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2360112Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#799720}

chrome/browser/resources/pdf/elements/viewer-pdf-sidenav.html

@@ -3,9 +3,10 @@
     --sidenav-selected-tab-color: var(--google-blue-refresh-300);
     background-color: var(--viewer-pdf-toolbar-background-color);
     display: flex;
-    min-width: 300px;
+    height: 100%;
+    min-width: var(--viewer-pdf-sidenav-width);
     overflow: hidden;
-    width: 300px;
+    width: var(--viewer-pdf-sidenav-width);
   }
 
   #icons {

chrome/browser/resources/pdf/pdf_viewer.html

 <style include="pdf-viewer-shared-style cr-hidden-style">
+  :host {
+    --viewer-pdf-sidenav-width: 300px;
+  }
+
   viewer-pdf-sidenav,
   viewer-pdf-toolbar-new {
     --pdf-toolbar-text-color: rgb(241, 241, 241);
@@ -9,6 +13,18 @@
     --active-button-bg: rgba(255, 255, 255, 0.24);
   }
 
+  #sidenav-container {
+    overflow: hidden;
+    transition: width 250ms ease-out, visibility 250ms;
+    visibility: visible;
+    width: var(--viewer-pdf-sidenav-width);
+  }
+
+  #sidenav-container[closed] {
+    visibility: hidden;
+    width: 0;
+  }
+
   #content-focus-rectangle {
     border: 2px solid var(--google-grey-600);
     border-radius: 2px;
@@ -140,12 +156,14 @@
 
 <template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
   <div id="container">
-    <viewer-pdf-sidenav id="sidenav" hidden="[[sidenavCollapsed_]]"
+    <div id="sidenav-container" closed$="[[sidenavCollapsed_]]">
+      <viewer-pdf-sidenav id="sidenav"
           bookmarks="[[bookmarks_]]" doc-length="[[docLength_]]"
           on-change-page="onChangePage_"
           on-change-page-and-xy="onChangePageAndXy_"
           on-navigate="onNavigate_">
       </viewer-pdf-sidenav>
+    </div>
     <div id="main" on-scroll="onScroll_">
       <div id="sizer"></div>
       <div id="content"></div>