PDF Viewer update: Hook-up sidenav toggle button.

Initial approach where the sidenav gets hidden/shown without
any animation. Also there is a visible flash in the plugin area
as a result of repainting after the sidenav is closed, which will
have to be addressed in follow up polish.

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

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

@@ -16,7 +16,7 @@
     height: 48px;
   }
 
-  #menuButton {
+  #sidenavToggle {
     margin: 0 6px;
   }
 
@@ -135,7 +135,8 @@
 <!-- TODO(dpapad): Add aria-label and title for all buttons -->
 <div id="toolbar">
   <div id="start">
-    <cr-icon-button id="menuButton" iron-icon="pdf:open-book">
+    <cr-icon-button id="sidenavToggle" iron-icon="pdf:open-book"
+        on-click="onSidenavToggleClick_">
     </cr-icon-button>
     <span id="title">[[docTitle]]</span>
   </div>

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

@@ -109,6 +109,11 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     this.zoomTimeout_ = null;
   }
 
+  /** @private */
+  onSidenavToggleClick_() {
+    this.dispatchEvent(new CustomEvent('sidenav-toggle-click'));
+  }
+
   /**
    * @return {string}
    * @private

chrome/browser/resources/pdf/pdf_viewer.html

@@ -121,6 +121,7 @@
     on-change-page="onChangePage_"
     on-dropdown-opened="onDropdownOpened_"
     on-fit-to-changed="onFitToChanged" on-zoom-in="onZoomIn"
+    on-sidenav-toggle-click="onSidenavToggleClick_"
     on-two-up-view-changed="onTwoUpViewChanged_"
     on-zoom-changed="onZoomChanged"
     on-zoom-out="onZoomOut" on-rotate-left="rotateCounterclockwise"
@@ -133,7 +134,7 @@
 
 <template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
   <div id="container">
-    <div id="sidenav"></div>
+    <div id="sidenav" hidden="[[sidenavCollapsed_]]"></div>
     <div id="main" on-scroll="onScroll_">
       <div id="sizer"></div>
       <div id="content"></div>

chrome/browser/resources/pdf/pdf_viewer.js

@@ -216,6 +216,9 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     /** @private {boolean} */
     this.hadPassword_ = false;
 
+    /** @private {boolean} */
+    this.sidenavCollapsed_ = false;
+
     /** @private {boolean} */
     this.toolbarEnabled_ = false;
 
@@ -875,6 +878,11 @@ export class PDFViewerElement extends PDFViewerBaseElement {
     this.navigator_.navigate(e.detail.uri, disposition);
   }
 
+  /** @private */
+  onSidenavToggleClick_() {
+    this.sidenavCollapsed_ = !this.sidenavCollapsed_;
+  }
+
   /**
    * Saves the current PDF document to disk.
    * @param {SaveRequestType} requestType The type of save request.

chrome/test/data/pdf/viewer_pdf_toolbar_new_test.js

@@ -182,6 +182,14 @@ const tests = [
     });
     twoPageViewButton.click();
   },
+
+  function testSidenavToggleButton() {
+    const toolbar = createToolbar();
+    toolbar.addEventListener(
+        'sidenav-toggle-click', () => chrome.test.succeed());
+    const toggleButton = toolbar.shadowRoot.querySelector('#sidenavToggle');
+    toggleButton.click();
+  },
 ];
 
 chrome.test.runTests(tests);