PDF Viewer Update: Add responsive behavior for embedded viewers

At 500px, hide sidenav, sidenav toggle, and fit button.
At 420px, hide view buttons.
At 200px, hide the entire toolbar.

Fixed: 1119953
Change-Id: I3ffc07203380fc7259c5b162159d340854866b1d
Bug: 1119953
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2393515Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805627}

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

@@ -65,6 +65,24 @@
     }
   }
 
+  @media(max-width: 500px) {
+    #start,
+    #fit {
+      display: none;
+    }
+  }
+
+  @media(max-width: 420px) {
+    #center {
+      display: none;
+    }
+
+    #end {
+      padding-inline-start: initial;
+      text-align: center;
+    }
+  }
+
   viewer-page-selector {
     display: inline-flex;
     height: 36px; /* Matching default --cr-icon-button-size */
@@ -165,7 +183,7 @@
           on-click="onZoomInClick_">
       </cr-icon-button>
     </span>
-    <cr-icon-button iron-icon="[[fitToButtonIcon_]]"
+    <cr-icon-button id="fit" iron-icon="[[fitToButtonIcon_]]"
         title="[[getFitToButtonTooltip_('$i18nPolymer{tooltipFitToPage}',
                                         '$i18nPolymer{tooltipFitToWidth}',
                                         fittingType_)]]"

chrome/browser/resources/pdf/pdf_viewer.html

@@ -26,6 +26,13 @@
     width: 0;
   }
 
+  @media(max-width: 500px),
+  (max-height: 250px) {
+    #sidenav-container {
+      display: none;
+    }
+  }
+
   #content-focus-rectangle {
     border: 2px solid var(--google-grey-600);
     border-radius: 2px;
@@ -62,6 +69,13 @@
     z-index: 1;
   }
 
+  @media(max-width: 200px),
+  (max-height: 250px) {
+    viewer-pdf-toolbar-new {
+      display: none;
+    }
+  }
+
   :host-context([pdf-viewer-update-enabled]):host {
     display: flex;
     flex-direction: column;