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);
  }

  viewer-pdf-toolbar,
  viewer-pdf-toolbar-new {
    --active-button-bg: rgba(255, 255, 255, 0.24);
  }

  #sidenav-container {
    overflow: hidden;
    transition: width 250ms cubic-bezier(.6, 0, 0, 1), visibility 250ms;
    visibility: visible;
    width: var(--viewer-pdf-sidenav-width);
  }

  #sidenav-container[closed] {
    transition: width 200ms cubic-bezier(.6, 0, 0, 1), visibility 200ms;
    visibility: hidden;
    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;
    box-sizing: border-box;
    height: 100%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    /* z-index for this should be higher than toolbar. */
    z-index: 5;
  }

  viewer-pdf-toolbar {
    position: fixed;
    width: 100%;
    z-index: 4;
  }

  viewer-ink-host {
    height: 100%;
    position: absolute;
    width: 100%;
  }

  @media(max-height: 250px) {
    viewer-pdf-toolbar {
      display: none;
    }
  }

  /* Styles only applying when the pdfViewerUpdateEnabled flag is on. */

  viewer-pdf-toolbar-new {
    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;
    height: 100%;
    width: 100%;
  }

  #container {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  :host-context([pdf-viewer-update-enabled]) #plugin {
    position: initial;
  }

  :host-context([pdf-viewer-update-enabled]) #content {
    height: 100%;
    left: 0;
    position: sticky;
    top: 0;
    z-index: initial;
  }

  :host-context([pdf-viewer-update-enabled]) #sizer {
    top: 0;
    width: 100%;
    z-index: initial;
  }

  /* #main and #scroller are intentionally different elements so that a
   * ResizeObserver can be used on #main without triggering
   * "ResizeObserver loop limit exceeded".
   */
  #main {
    flex: 1;
    overflow: hidden;
  }

  #scroller {
    /* TODO(crbug.com/1158670): Fix the plugin to properly support RTL painting
     * of PDF contents, such that content is aligned to the top-right corner.
     * Until then force LTR even in RTL languages, so scrolling of the content
     * can originate in the top-left corner, consistent with the expectations of
     * the plugin.
     */
    direction: ltr;
    height: 100%;
    overflow: auto;
    position: relative;
  }

  /* Hide scrollbars when in Presentation mode. */
  #scroller:fullscreen {
    overflow: hidden;
  }
</style>

<template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
  <viewer-pdf-toolbar id="toolbar" strings="[[strings]]"
      bookmarks="[[bookmarks_]]" doc-title="[[title_]]"
      has-edits="[[hasEdits_]]"
      has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
      pdf-form-save-enabled="[[pdfFormSaveEnabled_]]"
      printing-enabled="[[printingEnabled_]]"
      is-form-field-focused="[[isFormFieldFocused_]]"
      doc-length="[[docLength_]]" page-no="[[pageNo_]]"
      load-progress="[[loadProgress_]]"
<if expr="chromeos">
      annotation-available="[[annotationAvailable_]]"
      pdf-annotations-enabled="[[pdfAnnotationsEnabled_]]"
</if>
      on-change-page-and-xy="onChangePageAndXy_"
      on-change-page="onChangePage_"
      on-dropdown-opened="onDropdownOpened_"
      on-navigate="onNavigate_"
      on-save="onToolbarSave_" on-print="onPrint_"
<if expr="chromeos">
      on-annotation-mode-toggled="onAnnotationModeToggled_"
</if>
      on-rotate-right="rotateClockwise" hidden>
  </viewer-pdf-toolbar>
</template>
<template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
  <viewer-pdf-toolbar-new id="toolbar"
    annotation-mode="[[annotationMode_]]"
    doc-title="[[title_]]" doc-length="[[docLength_]]" page-no="[[pageNo_]]"
    load-progress="[[loadProgress_]]" has-edits="[[hasEdits_]]"
    has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
    pdf-form-save-enabled="[[pdfFormSaveEnabled_]]"
    presentation-mode-enabled="[[presentationModeEnabled_]]"
    printing-enabled="[[printingEnabled_]]"
    rotated="[[isRotated_(clockwiseRotations_)]]"
    is-form-field-focused="[[isFormFieldFocused_]]"
    sidenav-collapsed="[[sidenavCollapsed_]]"
    two-up-view-enabled="[[twoUpViewEnabled_]]"
    viewport-zoom="[[viewportZoom_]]" zoom-bounds="[[zoomBounds_]]"
<if expr="chromeos">
    annotation-available="[[annotationAvailable_]]"
    pdf-annotations-enabled="[[pdfAnnotationsEnabled_]]"
</if>
    on-change-page="onChangePage_"
    on-display-annotations-changed="onDisplayAnnotationsChanged_"
    on-dropdown-opened="onDropdownOpened_"
    on-fit-to-changed="onFitToChanged"
    on-present-click="onPresentClick_"
    on-properties-click="onPropertiesClick_"
    on-annotation-mode-dialog-confirmed="onResetView_"
    on-sidenav-toggle-click="onSidenavToggleClick_"
    on-two-up-view-changed="onTwoUpViewChanged_"
    on-zoom-changed="onZoomChanged" on-zoom-in="onZoomIn"
    on-zoom-out="onZoomOut" on-rotate-left="rotateCounterclockwise"
<if expr="chromeos">
    on-annotation-mode-toggled="onAnnotationModeToggled_"
</if>
    on-print="onPrint_" on-save="onToolbarSave_" hidden>
  </viewer-pdf-toolbar-new>
</template>

<template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
  <div id="container">
    <div id="sidenav-container" closed$="[[sidenavCollapsed_]]"
        hidden$="[[!toolbarEnabled_]]">
      <viewer-pdf-sidenav id="sidenav"
          active-page="[[pageNo_]]" bookmarks="[[bookmarks_]]"
          clockwise-rotations="[[clockwiseRotations_]]"
          doc-length="[[docLength_]]" on-change-page="onChangePage_"
          on-change-page-and-xy="onChangePageAndXy_" on-navigate="onNavigate_">
      </viewer-pdf-sidenav>
    </div>
    <div id="main">
      <div id="scroller" on-scroll="onScroll_">
        <div id="sizer"></div>
        <div id="content"></div>
      </div>
    <div>
  </div>
</template>

<template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
  <div id="sizer"></div>
</template>

<viewer-password-screen id="password-screen"
    on-password-submitted="onPasswordSubmitted_">
</viewer-password-screen>

<template is="dom-if" if="[[showPropertiesDialog_]]" restamp>
  <viewer-properties-dialog id="properties-dialog"
      document-metadata="[[documentMetadata_]]" file-name="[[fileName_]]"
      page-count="[[docLength_]]" on-close="onPropertiesDialogClose_">
  </viewer-properties-dialog>
</template>

<template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
  <viewer-zoom-toolbar id="zoom-toolbar"
      on-fit-to-changed="onFitToChanged"
      on-zoom-in="onZoomIn" on-zoom-out="onZoomOut">
  </viewer-zoom-toolbar>
</template>

<viewer-error-screen id="error-screen"></viewer-error-screen>

<if expr="chromeos">
<viewer-form-warning id="form-warning"></viewer-form-warning>
</if>

<template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
  <div id="content"></div>
</template>

<div id="content-focus-rectangle" hidden$="[[!documentHasFocus_]]"></div>