BASELINE: Update Chromium to 75.0.3770.56

Change-Id: I86d2007fd27a45d5797eee06f4c9369b8b50ac4f
Reviewed-by: Alexandru Croitor <alexandru.croitor@qt.io>

15 files changed, 227 insertions, 114 deletions

diff --git a/chromium/chrome/browser/resources/pdf/elements/shared-vars.html b/chromium/chrome/browser/resources/pdf/elements/shared-vars.html
index 2ba130405e4..164abe7c0e7 100644
--- a/chromium/chrome/browser/resources/pdf/elements/shared-vars.html
+++ b/chromium/chrome/browser/resources/pdf/elements/shared-vars.html
@@ -7,12 +7,6 @@
   html {
     --iron-icon-height: 20px;
     --iron-icon-width: 20px;
-    --paper-icon-button: {
-      height: 32px;
-      padding: 6px;
-      width: 32px;
-    };
-    --paper-icon-button-ink-color: rgb(189, 189, 189);
     --viewer-icon-ink-color: rgb(189, 189, 189);
   }
 </style>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html
index 174b498e017..d3c11673161 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.html
@@ -1,5 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ -36,14 +37,11 @@
       }
 
       #expand {
-        --iron-icon-height: 16px;
-        --iron-icon-width: 16px;
-        --paper-icon-button-ink-color: var(--paper-grey-900);
-        height: 28px;
-        min-width: 28px;
-        padding: 6px;
+        --cr-icon-button-color: var(--primary-text-color);
+        --cr-icon-button-icon-size: 16px;
+        --cr-icon-button-size: 28px;
+        margin: 0;
         transition: transform 150ms;
-        width: 28px;
       }
 
       :host-context([dir=rtl]) #expand {
@@ -56,9 +54,8 @@
     </style>
     <div id="item" on-click="onClick">
       <paper-ripple></paper-ripple>
-      <paper-icon-button id="expand" icon="cr:chevron-right"
-          on-click="toggleChildren">
-      </paper-icon-button>
+      <cr-icon-button id="expand" iron-icon="cr:chevron-right"
+          on-click="toggleChildren"></cr-icon-button>
       <span id="title" tabindex="0">{{bookmark.title}}</span>
     </div>
     <!-- dom-if will stamp the complex bookmark tree lazily as individual nodes
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
index baad5778238..160191b6ecb 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark/viewer-bookmark.js
@@ -91,7 +91,7 @@ Polymer({
   },
 
   onSpace_: function(e) {
-    // paper-icon-button stops propagation of space events, so there's no need
+    // cr-icon-button stops propagation of space events, so there's no need
     // to check the event source here.
     this.onClick();
     // Prevent default space scroll behavior.
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
index 921ce0f27a3..2f87e5efc14 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar/viewer-pdf-toolbar.html
@@ -1,7 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="../icons.html">
@@ -51,23 +51,16 @@
         user-select: none;
       }
 
-      paper-icon-button {
-        height: 36px;
+      cr-icon-button {
+        --cr-icon-button-color: rgb(241, 241, 241);
         margin: 6px;
-        padding: 8px;
-        width: 36px;
       }
 
-      paper-icon-button:hover {
+      cr-icon-button:hover {
         background: rgba(255, 255, 255, 0.08);
         border-radius: 50%;
       }
 
-      paper-icon-button:focus {
-        --paper-icon-button-ink-color:white;
-        --paper-ripple-opacity: 0.24;
-      }
-
       paper-progress {
         --paper-progress-active-color: var(--google-blue-300);
         --paper-progress-container-color: transparent;
@@ -195,32 +188,24 @@
 
         <div id="buttons" class="invisible">
           <template is="dom-if" if="[[pdfAnnotationsEnabled]]">
-            <paper-icon-button id="annotate" icon="pdf:create"
-                disabled="[[!annotationAvailable]]"
-                on-click="toggleAnnotation"
+            <cr-icon-button id="annotate" iron-icon="pdf:create"
+                disabled="[[!annotationAvailable]]" on-click="toggleAnnotation"
                 aria-label$="{{strings.tooltipAnnotate}}"
-                title$="{{strings.tooltipAnnotate}}">
-            </paper-icon-button>
+                title$="{{strings.tooltipAnnotate}}"></cr-icon-button>
           </template>
 
-          <paper-icon-button id="rotate-right" icon="pdf:rotate-right"
-              disabled="[[annotationMode]]"
-              on-click="rotateRight"
+          <cr-icon-button id="rotate-right" iron-icon="pdf:rotate-right"
+              disabled="[[annotationMode]]" on-click="rotateRight"
               aria-label$="{{strings.tooltipRotateCW}}"
-              title$="{{strings.tooltipRotateCW}}">
-          </paper-icon-button>
+              title$="{{strings.tooltipRotateCW}}"></cr-icon-button>
 
-          <paper-icon-button id="download" icon="cr:file-download"
-              on-click="download"
-              aria-label$="{{strings.tooltipDownload}}"
-              title$="{{strings.tooltipDownload}}">
-          </paper-icon-button>
+          <cr-icon-button id="download" iron-icon="cr:file-download"
+              on-click="download" aria-label$="{{strings.tooltipDownload}}"
+              title$="{{strings.tooltipDownload}}"></cr-icon-button>
 
-          <paper-icon-button id="print" icon="cr:print"
-              on-click="print"
+          <cr-icon-button id="print" iron-icon="cr:print" on-click="print"
               aria-label$="{{strings.tooltipPrint}}"
-              title$="{{strings.tooltipPrint}}">
-          </paper-icon-button>
+              title$="{{strings.tooltipPrint}}"></cr-icon-button>
 
           <viewer-toolbar-dropdown id="bookmarks"
                                    selected
@@ -229,8 +214,8 @@
                                    open-icon="pdf:bookmark"
                                    closed-icon="pdf:bookmark-border"
                                    header="{{strings.bookmarks}}">
-              <viewer-bookmarks-content bookmarks="{{bookmarks}}">
-              </viewer-bookmarks-content>
+            <viewer-bookmarks-content bookmarks="{{bookmarks}}">
+            </viewer-bookmarks-content>
           </viewer-toolbar-dropdown>
         </div>
       </div>
@@ -280,31 +265,23 @@
         </viewer-pen-options>
       </viewer-toolbar-dropdown>
 
-      <paper-icon-button id="eraser"
+      <cr-icon-button id="eraser"
           selected$="[[equal_('eraser', annotationTool.tool)]]"
-          on-click="annotationToolClicked_"
-          icon="pdf:eraser"
+          on-click="annotationToolClicked_" iron-icon="pdf:eraser"
           aria-label$="{{strings.annotationEraser}}"
-          title$="{{strings.annotationEraser}}">
-      </paper-icon-button>
+          title$="{{strings.annotationEraser}}"></cr-icon-button>
 
       <div id="annotation-separator"></div>
 
-      <paper-icon-button id="undo"
-          disabled="[[!canUndoAnnotation]]"
-          icon="pdf:undo"
-          on-click="undo"
+      <cr-icon-button id="undo" disabled="[[!canUndoAnnotation]]"
+          iron-icon="pdf:undo" on-click="undo"
           aria-label$="{{strings.annotationUndo}}"
-          title$="{{strings.annotationUndo}}">
-      </paper-icon-button>
+          title$="{{strings.annotationUndo}}"></cr-icon-button>
 
-      <paper-icon-button id="redo"
-          disabled="[[!canRedoAnnotation]]"
-          icon="pdf:redo"
-          on-click="redo"
+      <cr-icon-button id="redo" disabled="[[!canRedoAnnotation]]"
+          iron-icon="pdf:redo" on-click="redo"
           aria-label$="{{strings.annotationRedo}}"
-          title$="{{strings.annotationRedo}}">
-      </paper-icon-button>
+          title$="{{strings.annotationRedo}}"></cr-icon-button>
     </div>
   </template>
   <script src="viewer-pdf-toolbar.js"></script>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html b/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html
index 3151736c3e3..dbf18b0bfda 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options/viewer-pen-options.html
@@ -1,5 +1,6 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 
 <dom-module id="viewer-pen-options">
   <template>
@@ -14,21 +15,20 @@
     #colors {
       overflow: hidden;
     }
-    input,
-    #expand {
-      height: 32px;
-      width: 32px;
-    }
     #expand {
+      --cr-icon-button-icon-size: 16px;
+      --cr-icon-button-size: 32px;
       grid-column: 8;
       grid-row: 1 / 4;
+      margin: 0;
     }
     input {
       -webkit-appearance: none;
       border-radius: 16px;
+      height: 32px;
       margin: 0;
       padding: 0;
-
+      width: 32px;
     }
     #sizes input {
       background: black;
@@ -70,12 +70,9 @@
             aria-label$="[[lookup_(strings, item.name)]]"
             on-pointerdown="blurOnPointerDown">
       </template>
-      <paper-icon-button id="expand" icon="cr:expand-more"
-          tabindex="3"
-          on-click="toggleExpanded_"
-          aria-label$="[[strings.annotationExpand]]"
-          title$="[[strings.annotationExpand]]">
-      </paper-icon-button>
+      <cr-icon-button id="expand" iron-icon="cr:expand-more" tabindex="3"
+          on-click="toggleExpanded_" aria-label$="[[strings.annotationExpand]]"
+          title$="[[strings.annotationExpand]]"></cr-icon-button>
     </div>
     <div id="separator"></div>
     <div id="sizes" on-change="sizeChanged_">
@@ -88,7 +85,6 @@
             on-pointerdown="blurOnPointerDown">
       </template>
     </div>
-    </paper-icon-button>
   </template>
   <script src="viewer-pen-options.js"></script>
 </dom-module>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html
index c3e029f3458..c9572082003 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.html
@@ -1,9 +1,18 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-fab/paper-fab.html">
 
 <dom-module id="viewer-zoom-button">
   <template>
     <style>
+      :host {
+        --translate-x-distance: 132px;
+      }
+
+      :host([new-print-preview]) {
+        --translate-x-distance: 96px;
+      }
+
       #wrapper {
         transition: transform 250ms;
         transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
@@ -12,12 +21,12 @@
       :host([closed]) #wrapper {
         /* 132px roughly flips the location of the button across the right edge
          * of the page. */
-        transform: translateX(132px);
+        transform: translateX(var(--translate-x-distance));
         transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
       }
 
-      :host-context([dir=rtl]):host([closed]) #wrapper {
-        transform: translateX(-132px);
+      :host([show-on-left][closed]) #wrapper {
+        transform: translateX(calc(-1 * var(--translate-x-distance)));
       }
 
       paper-fab {
@@ -31,9 +40,32 @@
         overflow: visible;
       }
 
+      :host([new-print-preview]) paper-fab {
+        --paper-fab-mini: {
+          height: 24px;
+          padding: 4px;
+          width: 24px;
+        };
+        background-color: var(--google-grey-100);
+        color: var(--google-grey-refresh-700);
+      }
+
+      :host-context([dark]):host([new-print-preview]) paper-fab {
+        background-color: var(--google-grey-900);
+        color: var(--google-grey-200);
+      }
+
       paper-fab.keyboard-focus {
         background-color: var(--viewer-icon-ink-color);
       }
+
+      :host([new-print-preview]) paper-fab.keyboard-focus {
+        background-color: var(--google-grey-200);
+      }
+
+      :host-context([dark]):host([new-print-preview]) paper-fab.keyboard-focus {
+        background-color: var(--google-grey-800);
+      }
     </style>
     <div id="wrapper">
       <paper-fab id="button" mini icon="[[visibleIcon_]]" on-click="fireClick"
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
index f592dcea8ae..e1d750a36be 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-button.js
@@ -26,6 +26,10 @@ Polymer({
 
     delay: {type: Number, observer: 'delayChanged_'},
 
+    newPrintPreview: {type: Boolean, reflectToAttribute: true},
+
+    showOnLeft: {type: Boolean, reflectToAttribute: true},
+
     /**
      * Index of the icon currently being displayed.
      */
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html
index aba9da429c1..c1175075722 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="viewer-zoom-button.html">
@@ -7,6 +8,7 @@
   <template>
     <style>
       :host {
+        --button-position-offset: 48px;
         bottom: 0;
         padding: 48px 0;
         position: fixed;
@@ -15,18 +17,22 @@
         z-index: 3;
       }
 
-      :host-context([dir=rtl]) {
+      :host([new-print-preview]) {
+        --button-position-offset: 24px;
+      }
+
+      :host([show-on-left_]) {
         left: 0;
         right: auto;
       }
 
       #zoom-buttons {
         position: relative;
-        right: 48px;
+        right: var(--button-position-offset);
       }
 
-      :host-context([dir=rtl]) #zoom-buttons {
-        left: 48px;
+      :host([show-on-left_]) #zoom-buttons {
+        left: var(--button-position-offset);
         right: auto;
       }
 
@@ -46,11 +52,17 @@
     </style>
     <div id="zoom-buttons">
       <viewer-zoom-button id="fit-button" on-fabclick="fitToggle" delay="100"
+          new-print-preview="[[newPrintPreview]]"
+          show-on-left="[[showOnLeft_]]"
           icons="pdf:fullscreen-exit cr:fullscreen">
       </viewer-zoom-button>
       <viewer-zoom-button id="zoom-in-button" icons="pdf:add"
+          new-print-preview="[[newPrintPreview]]"
+          show-on-left="[[showOnLeft_]]"
           on-fabclick="zoomIn" delay="50"></viewer-zoom-button>
       <viewer-zoom-button id="zoom-out-button" icons="pdf:remove"
+          new-print-preview="[[newPrintPreview]]"
+          show-on-left="[[showOnLeft_]]"
           on-fabclick="zoomOut" delay="0"></viewer-zoom-button>
     </div>
   </template>
diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
index 795750a6468..fddb5bb00eb 100644
--- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
+++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar/viewer-zoom-toolbar.js
@@ -11,15 +11,48 @@ Polymer({
   is: 'viewer-zoom-toolbar',
 
   properties: {
+    newPrintPreview: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
+    /** @private */
+    showOnLeft_: {
+      type: Boolean,
+      computed: 'computeShowOnLeft_(newPrintPreview)',
+      reflectToAttribute: true,
+    },
+
     strings: {type: Object, observer: 'updateTooltips_'},
 
     visible_: {type: Boolean, value: true}
   },
 
+  listeners: {
+    'focus': 'onFocus_',
+  },
+
   isVisible: function() {
     return this.visible_;
   },
 
+  /** @private */
+  onFocus_: function() {
+    // This can only happen when the plugin is shown within Print Preview.
+    if (!this.visible_) {
+      this.show();
+    }
+  },
+
+  /**
+   * @return {boolean} Whether to show the zoom toolbar on the left side of the
+   *     viewport.
+   * @private
+   */
+  computeShowOnLeft_: function() {
+    return isRTL() !== this.newPrintPreview;
+  },
+
   /**
    * @private
    * Change button tooltips to match any changes to localized strings.
diff --git a/chromium/chrome/browser/resources/pdf/index.html b/chromium/chrome/browser/resources/pdf/index.html
index 71b5d84126d..c1c362756b3 100644
--- a/chromium/chrome/browser/resources/pdf/index.html
+++ b/chromium/chrome/browser/resources/pdf/index.html
@@ -2,6 +2,8 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js">
+  </script>
   <link rel="import" href="elements/viewer-error-screen/viewer-error-screen.html">
   <link rel="import" href="elements/viewer-page-indicator/viewer-page-indicator.html">
   <link rel="import" href="elements/viewer-page-selector/viewer-page-selector.html">
diff --git a/chromium/chrome/browser/resources/pdf/ink/BUILD.gn b/chromium/chrome/browser/resources/pdf/ink/BUILD.gn
index b98fd60781e..38908ee25a1 100644
--- a/chromium/chrome/browser/resources/pdf/ink/BUILD.gn
+++ b/chromium/chrome/browser/resources/pdf/ink/BUILD.gn
@@ -4,18 +4,15 @@
 
 import("//third_party/closure_compiler/compile_js.gni")
 
-group("closure_compile") {
+js_type_check("closure_compile") {
   deps = [
     ":ink_api",
   ]
 }
 
 js_library("ink_api") {
-  externs_list = [ "//third_party/ink/build/ink_lib_externs.js" ]
-}
-
-js_type_check("ink") {
-  deps = [
-    ":ink_api",
+  externs_list = [
+    "//third_party/ink/build/ink_lib_externs.js",
+    "$externs_path/pending.js",
   ]
 }
diff --git a/chromium/chrome/browser/resources/pdf/main.js b/chromium/chrome/browser/resources/pdf/main.js
index ae29c590088..9d3f533b4f5 100644
--- a/chromium/chrome/browser/resources/pdf/main.js
+++ b/chromium/chrome/browser/resources/pdf/main.js
@@ -73,14 +73,16 @@ function main() {
   // Set up an event listener to catch scripting messages which are sent prior
   // to the PDFViewer being created.
   window.addEventListener('message', handleScriptingMessage, false);
-  let chain = createBrowserApi();
+  HTMLImports.whenReady(() => {
+    let chain = createBrowserApi();
 
-  // Content settings may not be present in test environments.
-  if (chrome.contentSettings) {
-    chain = chain.then(configureJavaScriptContentSetting);
-  }
+    // Content settings may not be present in test environments.
+    if (chrome.contentSettings) {
+      chain = chain.then(configureJavaScriptContentSetting);
+    }
 
-  chain.then(initViewer);
+    chain = chain.then(initViewer);
+  });
 }
 
 main();
diff --git a/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js b/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js
index 92f7a15841a..0ab77f41f3f 100644
--- a/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js
+++ b/chromium/chrome/browser/resources/pdf/pdf_scripting_api.js
@@ -199,6 +199,13 @@ PDFScriptingAPI.prototype = {
   },
 
   /**
+   * Hide the toolbars after a delay.
+   */
+  hideToolbars: function() {
+    this.sendMessage_({type: 'hideToolbars'});
+  },
+
+  /**
    * Load a page into the document while in print preview mode.
    *
    * @param {string} url the url of the pdf page to load.
@@ -208,6 +215,11 @@ PDFScriptingAPI.prototype = {
     this.sendMessage_({type: 'loadPreviewPage', url: url, index: index});
   },
 
+  /** @param {boolean} darkMode Whether the page is in dark mode. */
+  darkModeChanged: function(darkMode) {
+    this.sendMessage_({type: 'darkModeChanged', darkMode: darkMode});
+  },
+
   /**
    * Select all the text in the document. May only be called after document
    * load.
@@ -274,8 +286,6 @@ function PDFCreateOutOfProcessPlugin(src, baseUrl) {
   const iframe = assertInstanceof(
       window.document.createElement('iframe'), HTMLIFrameElement);
   iframe.setAttribute('src', baseUrl + '/index.html?' + src);
-  // Prevent the frame from being tab-focusable.
-  iframe.setAttribute('tabindex', '-1');
 
   iframe.onload = function() {
     client.setPlugin(iframe.contentWindow);
@@ -290,5 +300,7 @@ function PDFCreateOutOfProcessPlugin(src, baseUrl) {
   iframe.loadPreviewPage = client.loadPreviewPage.bind(client);
   iframe.sendKeyEvent = client.sendKeyEvent.bind(client);
   iframe.scrollPosition = client.scrollPosition.bind(client);
+  iframe.hideToolbars = client.hideToolbars.bind(client);
+  iframe.darkModeChanged = client.darkModeChanged.bind(client);
   return iframe;
 }
diff --git a/chromium/chrome/browser/resources/pdf/pdf_viewer.js b/chromium/chrome/browser/resources/pdf/pdf_viewer.js
index 284afedf2d9..942761c08a2 100644
--- a/chromium/chrome/browser/resources/pdf/pdf_viewer.js
+++ b/chromium/chrome/browser/resources/pdf/pdf_viewer.js
@@ -101,14 +101,20 @@ PDFViewer.MATERIAL_TOOLBAR_HEIGHT = 56;
 PDFViewer.TOOLBAR_WINDOW_MIN_HEIGHT = 250;
 
 /**
- * The light-gray background color used for print preview.
+ * The background color used for print preview (--google-grey-refresh-300).
  */
-PDFViewer.LIGHT_BACKGROUND_COLOR = '0xFFCCCCCC';
+PDFViewer.PRINT_PREVIEW_BACKGROUND_COLOR = '0xFFDADCE0';
 
 /**
- * The dark-gray background color used for the regular viewer.
+ * The background color used for print preview when dark mode is enabled
+ * (--google-grey-refresh-700).
  */
-PDFViewer.DARK_BACKGROUND_COLOR = '0xFF525659';
+PDFViewer.PRINT_PREVIEW_DARK_BACKGROUND_COLOR = '0xFF5F6368';
+
+/**
+ * The background color used for the regular viewer.
+ */
+PDFViewer.BACKGROUND_COLOR = '0xFF525659';
 
 /**
  * Creates a new PDFViewer. There should only be one of these objects per
@@ -214,8 +220,7 @@ function PDFViewer(browserApi) {
   }
   this.plugin_.setAttribute('headers', headers);
 
-  const backgroundColor = PDFViewer.DARK_BACKGROUND_COLOR;
-  this.plugin_.setAttribute('background-color', backgroundColor);
+  this.plugin_.setAttribute('background-color', PDFViewer.BACKGROUND_COLOR);
   this.plugin_.setAttribute('top-toolbar-height', topToolbarHeight);
   this.plugin_.setAttribute('javascript', this.javascript_);
 
@@ -737,6 +742,16 @@ PDFViewer.prototype = {
     }
   },
 
+  /** @private */
+  sendBackgroundColorForPrintPreview_: function() {
+    this.pluginController_.postMessage({
+      type: 'backgroundColorChanged',
+      backgroundColor: document.documentElement.hasAttribute('dark') ?
+          PDFViewer.PRINT_PREVIEW_DARK_BACKGROUND_COLOR :
+          PDFViewer.PRINT_PREVIEW_BACKGROUND_COLOR,
+    });
+  },
+
   /**
    * Load a dictionary of translated strings into the UI. Used as a callback for
    * chrome.resourcesPrivate.
@@ -749,6 +764,15 @@ PDFViewer.prototype = {
     document.documentElement.lang = strings.language;
 
     loadTimeData.data = strings;
+    const isNewPrintPreview = this.isPrintPreview_ &&
+        loadTimeData.getBoolean('newPrintPreviewLayoutEnabled');
+    if (isNewPrintPreview) {
+      this.sendBackgroundColorForPrintPreview_();
+      this.toolbarManager_.reverseSideToolbar();
+    }
+    this.reverseZoomToolbar_ = isNewPrintPreview;
+    this.zoomToolbar_.newPrintPreview = isNewPrintPreview;
+
     $('toolbar').strings = strings;
     $('toolbar').pdfAnnotationsEnabled =
         loadTimeData.getBoolean('pdfAnnotationsEnabled');
@@ -849,9 +873,11 @@ PDFViewer.prototype = {
     // gives a compromise: if there is no scrollbar visible then the toolbar
     // will be half a scrollbar width further left than the spec but if there
     // is a scrollbar visible it will be half a scrollbar width further right
-    // than the spec. In RTL layout, the zoom toolbar is on the left side, but
-    // the scrollbar is still on the right, so this is not necessary.
-    if (!isRTL()) {
+    // than the spec. In RTL layout normally, and in LTR layout in Print Preview
+    // when the NewPrintPreview flag is enabled, the zoom toolbar is on the left
+    // left side, but the scrollbar is still on the right, so this is not
+    // necessary.
+    if (isRTL() === this.reverseZoomToolbar_) {
       this.zoomToolbar_.style.right =
           -verticalScrollbarWidth + (scrollbarWidth / 2) + 'px';
     }
@@ -984,6 +1010,15 @@ PDFViewer.prototype = {
       case 'sendKeyEvent':
         this.handleKeyEvent_(DeserializeKeyEvent(message.data.keyEvent));
         return true;
+      case 'hideToolbars':
+        this.toolbarManager_.resetKeyboardNavigationAndHideToolbars();
+        return true;
+      case 'darkModeChanged':
+        document.documentElement.toggleAttribute('dark', message.data.darkMode);
+        if (this.isPrintPreview_) {
+          this.sendBackgroundColorForPrintPreview_();
+        }
+        return true;
       case 'scrollPosition':
         const position = this.viewport_.position;
         position.y += message.data.y;
@@ -1234,6 +1269,9 @@ PDFViewer.prototype = {
    * conditions.
    */
   updateAnnotationAvailable_() {
+    if (!this.toolbar_) {
+      return;
+    }
     let annotationAvailable = true;
     if (this.viewport_.getClockwiseRotations() != 0) {
       annotationAvailable = false;
diff --git a/chromium/chrome/browser/resources/pdf/toolbar_manager.js b/chromium/chrome/browser/resources/pdf/toolbar_manager.js
index bdd3427e2d8..4b47da225bc 100644
--- a/chromium/chrome/browser/resources/pdf/toolbar_manager.js
+++ b/chromium/chrome/browser/resources/pdf/toolbar_manager.js
@@ -33,12 +33,13 @@ function isMouseNearTopToolbar(e) {
 /**
  * @param {MouseEvent} e Event to test.
  * @param {Window} window Window to test against.
+ * @param {boolean} reverse Whether the side toolbar is reversed.
  * @return {boolean} True if the mouse is close to the bottom-right of the
  * screen.
  */
-function isMouseNearSideToolbar(e, window) {
+function isMouseNearSideToolbar(e, window, reverse) {
   let atSide = e.x > window.innerWidth - SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT;
-  if (isRTL()) {
+  if (isRTL() !== reverse) {
     atSide = e.x < SIDE_TOOLBAR_REVEAL_DISTANCE_RIGHT;
   }
   const atBottom =
@@ -71,6 +72,8 @@ function ToolbarManager(window, toolbar, zoomToolbar) {
 
   this.lastMovementTimestamp = null;
 
+  this.reverseSideToolbar_ = false;
+
   this.window_.addEventListener('resize', this.resizeDropdowns_.bind(this));
   this.resizeDropdowns_();
 }
@@ -79,7 +82,8 @@ ToolbarManager.prototype = {
 
   handleMouseMove: function(e) {
     this.isMouseNearTopToolbar_ = this.toolbar_ && isMouseNearTopToolbar(e);
-    this.isMouseNearSideToolbar_ = isMouseNearSideToolbar(e, this.window_);
+    this.isMouseNearSideToolbar_ =
+        isMouseNearSideToolbar(e, this.window_, this.reverseSideToolbar_);
 
     this.keyboardNavigationActive = false;
     const touchInteractionActive =
@@ -236,6 +240,14 @@ ToolbarManager.prototype = {
   },
 
   /**
+   * Clears the keyboard navigation state and hides the toolbars after a delay.
+   */
+  resetKeyboardNavigationAndHideToolbars: function() {
+    this.keyboardNavigationActive = false;
+    this.hideToolbarsAfterTimeout();
+  },
+
+  /**
    * Hide the top toolbar and keep it hidden until both:
    * - The mouse is moved away from the right side of the screen
    * - 1 second has passed.
@@ -254,6 +266,11 @@ ToolbarManager.prototype = {
     }, FORCE_HIDE_TIMEOUT);
   },
 
+  /** Reverse the position of the side toolbar. */
+  reverseSideToolbar: function() {
+    this.reverseSideToolbar_ = true;
+  },
+
   /**
    * Updates the size of toolbar dropdowns based on the positions of the rest of
    * the UI.