PDF Viewer: Preparatory step for implementing new toolbar UI.

Shows a dummy (empty) new toolbar UI element when
--enable-features=PDFViewerUpdate is specified. Decided to use a
completely new element, since it will significantly diverge from
the existing UI (sidenav button, different zoom controls + buttons,
overflow menu)

Bug: 1098124
Change-Id: I03db34b48d5e6d1f4aed051ff8ec10dfc7b50a09
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2258966Reviewed-by: Lei Zhang <thestig@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#782697}

chrome/browser/pdf/pdf_extension_util.cc

@@ -155,9 +155,11 @@ void AddAdditionalData(base::Value* dict) {
   dict->SetKey("pdfTwoUpViewEnabled",
                base::Value(base::FeatureList::IsEnabled(
                    chrome_pdf::features::kPDFTwoUpView)));
-  dict->SetKey("pdfViewerUpdateEnabled",
-               base::Value(base::FeatureList::IsEnabled(
-                   chrome_pdf::features::kPDFViewerUpdate)));
+  dict->SetStringKey(
+      "pdfViewerUpdateEnabledAttribute",
+      base::FeatureList::IsEnabled(chrome_pdf::features::kPDFViewerUpdate)
+          ? "pdf-viewer-update-enabled"
+          : "");
 
   bool enable_printing = true;
   bool enable_annotations = false;

chrome/browser/resources/component_extension_resources.grd

@@ -134,6 +134,7 @@
         <include name="IDR_PDF_VIEWER_PAGE_SELECTOR_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-page-selector.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PASSWORD_SCREEN_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-password-screen.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.js" use_base_dir="false" type="BINDATA" preprocess="true"/>
+        <include name="IDR_PDF_VIEWER_PDF_TOOLBAR_NEW_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js" use_base_dir="false" type="BINDATA" preprocess="true"/>
         <include name="IDR_PDF_VIEWER_TOOLBAR_DROPDOWN_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_ZOOM_BUTTON_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-zoom-button.js" use_base_dir="false" type="BINDATA" />
         <include name="IDR_PDF_VIEWER_ZOOM_SELECTOR_JS" file="${root_gen_dir}/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.js" use_base_dir="false" type="BINDATA" />

chrome/browser/resources/pdf/elements/BUILD.gn

@@ -14,6 +14,7 @@ js_type_check("closure_compile") {
     ":viewer-page-selector",
     ":viewer-password-screen",
     ":viewer-pdf-toolbar",
+    ":viewer-pdf-toolbar-new",
     ":viewer-toolbar-dropdown",
     ":viewer-zoom-button",
     ":viewer-zoom-toolbar",
@@ -88,6 +89,12 @@ js_library("viewer-pdf-toolbar") {
   externs_list = [ "$externs_path/pending.js" ]
 }
 
+js_library("viewer-pdf-toolbar-new") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("viewer-pen-options") {
 }
 
@@ -117,6 +124,7 @@ html_to_js("web_components") {
     "viewer-page-selector.js",
     "viewer-password-screen.js",
     "viewer-pdf-toolbar.js",
+    "viewer-pdf-toolbar-new.js",
     "viewer-toolbar-dropdown.js",
     "viewer-zoom-button.js",
     "viewer-zoom-toolbar.js",

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

+<style>
+  :host {
+    --pdf-toolbar-background-color: rgb(50, 54, 57);
+    background-color: var(--pdf-toolbar-background-color);
+    box-shadow: var(--cr-elevation-2);
+    color: white;
+    height: 48px;
+  }
+</style>
+New PDF Viewer toolbar will appear here.

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+class ViewerPdfToolbarNewElement extends PolymerElement {
+  static get is() {
+    return 'viewer-pdf-toolbar-new';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+}
+customElements.define(
+    ViewerPdfToolbarNewElement.is, ViewerPdfToolbarNewElement);

chrome/browser/resources/pdf/index.html

 <!doctype html>
-<html dir="$i18n{textdirection}" lang="$i18n{language}">
+<html dir="$i18n{textdirection}" lang="$i18n{language}"
+    $i18n{pdfViewerUpdateEnabledAttribute}>
 <head>
   <meta charset="utf-8">
 

chrome/browser/resources/pdf/pdf_viewer.html

 <style include="pdf-viewer-shared-style">
-  viewer-pdf-toolbar {
+  viewer-pdf-toolbar,
+  viewer-pdf-toolbar-new {
     position: fixed;
     width: 100%;
     z-index: 4;
@@ -18,18 +19,24 @@
   }
 </style>
 
-<viewer-pdf-toolbar id="toolbar" strings="[[strings]]"
-    annotation-available="[[annotationAvailable_]]"
-    bookmarks="[[bookmarks_]]" doc-title="[[title_]]"
-    has-edits="[[hasEdits_]]"
-    has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
-    is-form-field-focused="[[isFormFieldFocused_]]"
-    on-save="onToolbarSave_" on-print="onPrint_"
-    on-annotation-mode-toggled="onAnnotationModeToggled_"
-    on-annotation-tool-changed="onAnnotationToolChanged_"
-    on-rotate-right="rotateClockwise" on-undo="onUndo_" on-redo="onRedo_"
-    hidden>
-</viewer-pdf-toolbar>
+<template is="dom-if" if="[[!pdfViewerUpdateEnabled_]]">
+  <viewer-pdf-toolbar id="toolbar" strings="[[strings]]"
+      annotation-available="[[annotationAvailable_]]"
+      bookmarks="[[bookmarks_]]" doc-title="[[title_]]"
+      has-edits="[[hasEdits_]]"
+      has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
+      is-form-field-focused="[[isFormFieldFocused_]]"
+      on-save="onToolbarSave_" on-print="onPrint_"
+      on-annotation-mode-toggled="onAnnotationModeToggled_"
+      on-annotation-tool-changed="onAnnotationToolChanged_"
+      on-rotate-right="rotateClockwise" on-undo="onUndo_" on-redo="onRedo_"
+      hidden>
+  </viewer-pdf-toolbar>
+</template>
+<template is="dom-if" if="[[pdfViewerUpdateEnabled_]]">
+  <viewer-pdf-toolbar-new id="toolbar" hidden>
+  </viewer-pdf-toolbar-new>
+</template>
 
 <div id="sizer"></div>
 <viewer-password-screen id="password-screen"

chrome/browser/resources/pdf/pdf_viewer.js

@@ -5,6 +5,7 @@
 import './elements/viewer-error-screen.js';
 import './elements/viewer-password-screen.js';
 import './elements/viewer-pdf-toolbar.js';
+import './elements/viewer-pdf-toolbar-new.js';
 import './elements/shared-vars.js';
 // <if expr="chromeos">
 import './elements/viewer-ink-host.js';
@@ -126,6 +127,15 @@ class PDFViewerElement extends PDFViewerBaseElement {
       title_: String,
 
       isFormFieldFocused_: Boolean,
+
+      /** @private */
+      pdfViewerUpdateEnabled_: {
+        type: Boolean,
+        value: function() {
+          return document.documentElement.hasAttribute(
+              'pdf-viewer-update-enabled');
+        },
+      },
     };
   }
 
@@ -187,6 +197,9 @@ class PDFViewerElement extends PDFViewerBaseElement {
 
     /** @private {string} */
     this.title_ = '';
+
+    /** @private {boolean} */
+    this.pdfViewerUpdateEnabled_;
   }
 
   /** @override */
@@ -277,8 +290,9 @@ class PDFViewerElement extends PDFViewerBaseElement {
       }
     });
 
-    this.toolbarManager_ =
-        new ToolbarManager(window, this.getToolbar_(), this.getZoomToolbar());
+    this.toolbarManager_ = new ToolbarManager(
+        window, this.pdfViewerUpdateEnabled_ ? null : this.getToolbar_(),
+        this.getZoomToolbar());
 
     // Setup the keyboard event listener.
     document.addEventListener(