PDF Viewer update: Add annotations button and bar

Add the annotations button and bar to the new toolbar. Hook up the
button so that entering/exiting annotation mode works.

Bug: 1105732
Change-Id: I87f1067b474c552295c66c0946ce98a813083b4a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2298999Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#788779}

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

@@ -2,7 +2,9 @@
   :host {
     --pdf-toolbar-background-color: rgb(50, 54, 57);
     --pdf-toolbar-text-color: rgb(241, 241, 241);
+  }
 
+  #toolbar {
     align-items: center;
     background-color: var(--pdf-toolbar-background-color);
     box-shadow: var(--cr-elevation-2);
@@ -90,45 +92,62 @@
     opacity: 1;
     visibility: visible;
   }
+
+<if expr="chromeos">
+  :host([annotation-mode]) #annotate {
+    background-color: rgba(255, 255, 255, 0.24);
+    border-radius: 50%;
+  }
+</if>
 </style>
 <!-- TODO(dpapad): Add aria-label and title for all buttons -->
-<div id="start">
-  <cr-icon-button id="menuButton" iron-icon="pdf:open-book">
-  </cr-icon-button>
-  <span>[[docTitle]]</span>
-</div>
-<div id="center">
-  <viewer-page-selector doc-length="[[docLength]]" page-no="[[pageNo]]">
-  </viewer-page-selector>
-  <span id="zoom-controls">
-    <cr-icon-button iron-icon="pdf:remove" title="$i18n{tooltipZoomOut}"
-        on-click="onZoomOutClick_">
+<div id="toolbar">
+  <div id="start">
+    <cr-icon-button id="menuButton" iron-icon="pdf:open-book">
     </cr-icon-button>
-    <input type="text" value="100%"></input>
-    <cr-icon-button iron-icon="pdf:add" title="$i18n{tooltipZoomIn}"
-        on-click="onZoomInClick_">
+    <span>[[docTitle]]</span>
+  </div>
+  <div id="center">
+    <viewer-page-selector doc-length="[[docLength]]" page-no="[[pageNo]]">
+    </viewer-page-selector>
+    <span id="zoom-controls">
+      <cr-icon-button iron-icon="pdf:remove" title="$i18n{tooltipZoomOut}"
+          on-click="onZoomOutClick_">
+      </cr-icon-button>
+      <input type="text" value="100%"></input>
+      <cr-icon-button iron-icon="pdf:add" title="$i18n{tooltipZoomIn}"
+          on-click="onZoomInClick_">
+      </cr-icon-button>
+    </span>
+    <cr-icon-button iron-icon="[[fitToButtonIcon_]]"
+        title="[[getFitToButtonTooltip_('$i18nPolymer{tooltipFitToPage}',
+                                        '$i18nPolymer{tooltipFitToWidth}',
+                                        fittingType_)]]"
+        on-click="onFitToButtonClick_">
     </cr-icon-button>
-  </span>
-  <cr-icon-button iron-icon="[[fitToButtonIcon_]]"
-      title="[[getFitToButtonTooltip_('$i18nPolymer{tooltipFitToPage}',
-                                      '$i18nPolymer{tooltipFitToWidth}',
-                                      fittingType_)]]"
-      on-click="onFitToButtonClick_">
-  </cr-icon-button>
-  <cr-icon-button iron-icon="pdf:rotate-left"></cr-icon-button>
-</div>
-<div id="end">
-  <viewer-download-controls id="downloads"
-      has-edits="[[hasEdits]]"
-      has-entered-annotation-mode="[[hasEnteredAnnotationMode]]"
-      is-form-field-focused="[[isFormFieldFocused]]"
-      pdf-form-save-enabled="[[pdfFormSaveEnabled]]">
-  </viewer-download-controls>
-  <cr-icon-button id="print" iron-icon="cr:print"
-      aria-label$="$i18n{tooltipPrint}" hidden="[[!printingEnabled]]"
-      title="$i18n{tooltipPrint}" on-click="onPrintClick_"></cr-icon-button>
-  <cr-icon-button id="more"
-      iron-icon="cr:more-vert" on-click="onMoreClick_"></cr-icon-button>
+    <cr-icon-button iron-icon="pdf:rotate-left"></cr-icon-button>
+  </div>
+  <div id="end">
+  <if expr="chromeos">
+    <template is="dom-if" if="[[pdfAnnotationsEnabled]]">
+      <cr-icon-button id="annotate" iron-icon="pdf:create"
+          disabled="[[!annotationAvailable]]" on-click="toggleAnnotation"
+          aria-label$="$i18n{tooltipAnnotate}"
+          title="$i18n{tooltipAnnotate}"></cr-icon-button>
+    </template>
+  </if>
+    <viewer-download-controls id="downloads"
+        has-edits="[[hasEdits]]"
+        has-entered-annotation-mode="[[hasEnteredAnnotationMode]]"
+        is-form-field-focused="[[isFormFieldFocused]]"
+        pdf-form-save-enabled="[[pdfFormSaveEnabled]]">
+    </viewer-download-controls>
+    <cr-icon-button id="print" iron-icon="cr:print"
+        aria-label$="$i18n{tooltipPrint}" hidden="[[!printingEnabled]]"
+        title="$i18n{tooltipPrint}" on-click="onPrintClick_"></cr-icon-button>
+    <cr-icon-button id="more"
+        iron-icon="cr:more-vert" on-click="onMoreClick_"></cr-icon-button>
+  </div>
 </div>
 <paper-progress id="progress" value="[[loadProgress]]" hidden="[[!loading_]]">
 </paper-progress>
@@ -137,3 +156,11 @@
   <button class="dropdown-item">Single page view</button>
   <button class="dropdown-item">Two page view</button>
 </cr-action-menu>
+
+<if expr="chromeos">
+  <template is="dom-if" if="[[showAnnotationsBar_]]">
+    <viewer-annotations-bar annotation-mode="[[annotationMode]]"
+        ink-controller="[[inkController]]">
+    </viewer-annotations-bar>
+  </template>
+</if>

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

@@ -7,6 +7,9 @@ import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/paper-progress/paper-progress.js';
 import './icons.js';
+// <if expr="chromeos">
+import './viewer-annotations-bar.js';
+// </if>
 import './viewer-download-controls.js';
 import './viewer-page-selector.js';
 import './shared-css.js';
@@ -15,6 +18,9 @@ import {AnchorAlignment} from 'chrome://resources/cr_elements/cr_action_menu/cr_
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {FittingType} from '../constants.js';
+// <if expr="chromeos">
+import {InkController} from '../ink_controller.js';
+// </if>
 
 export class ViewerPdfToolbarNewElement extends PolymerElement {
   static get is() {
@@ -27,10 +33,23 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
 
   static get properties() {
     return {
+      // <if expr="chromeos">
+      annotationAvailable: Boolean,
+      // </if>
+      annotationMode: {
+        type: Boolean,
+        notify: true,
+        value: false,
+        reflectToAttribute: true,
+      },
       docTitle: String,
       docLength: Number,
       hasEdits: Boolean,
       hasEnteredAnnotationMode: Boolean,
+      // <if expr="chromeos">
+      /** @type {?InkController} */
+      inkController: Object,
+      // </if>
       isFormFieldFocused: Boolean,
 
       loadProgress: {
@@ -55,6 +74,15 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
         type: String,
         computed: 'computeFitToButtonIcon_(fittingType_)',
       },
+
+      // <if expr="chromeos">
+      /** @private */
+      showAnnotationsBar_: {
+        type: Boolean,
+        computed: 'computeShowAnnotationsBar_(' +
+            'loading_, annotationMode, pdfAnnotationsEnabled)',
+      },
+      // </if>
     };
   }
 
@@ -93,6 +121,16 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
     this.loading_ = this.loadProgress < 100;
   }
 
+  // <if expr="chromeos">
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeShowAnnotationsBar_() {
+    return this.pdfAnnotationsEnabled && !this.loading_ && this.annotationMode;
+  }
+  // </if>
+
   /** @private */
   onPrintClick_() {
     this.dispatchEvent(new CustomEvent('print'));
@@ -136,6 +174,14 @@ export class ViewerPdfToolbarNewElement extends PolymerElement {
       noOffset: true,
     });
   }
+
+  // <if expr="chromeos">
+  toggleAnnotation() {
+    this.annotationMode = !this.annotationMode;
+    this.dispatchEvent(new CustomEvent(
+        'annotation-mode-toggled', {detail: this.annotationMode}));
+  }
+  // </if>
 }
 
 customElements.define(

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

@@ -81,8 +81,7 @@
       }
 
       @media(max-width: 675px) {
-        #bookmarks,
-        #rotate-left {
+        #bookmarks {
           display: none;
         }
       }

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

@@ -203,11 +203,8 @@ Polymer({
   // <if expr="chromeos">
   toggleAnnotation() {
     this.annotationMode = !this.annotationMode;
-    this.dispatchEvent(new CustomEvent('annotation-mode-toggled', {
-      detail: {
-        value: this.annotationMode,
-      },
-    }));
+    this.dispatchEvent(new CustomEvent(
+        'annotation-mode-toggled', {detail: this.annotationMode}));
   },
   // </if>
 });

chrome/browser/resources/pdf/pdf_viewer.html

@@ -21,19 +21,19 @@
 
 <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_]]"
-      pdf-annotations-enabled="[[pdfAnnotationsEnabled_]]"
       pdf-form-save-enabled="[[pdfFormSaveEnabled_]]"
       printing-enabled="[[printingEnabled_]]"
-<if expr="chromeos">
-      ink-controller="[[inkController_]]"
-</if>
       is-form-field-focused="[[isFormFieldFocused_]]"
       doc-length="[[docLength_]]" page-no="[[pageNo_]]"
       load-progress="[[loadProgress_]]"
+<if expr="chromeos">
+      annotation-available="[[annotationAvailable_]]"
+      ink-controller="[[inkController_]]"
+      pdf-annotations-enabled="[[pdfAnnotationsEnabled_]]"
+</if>
       on-save="onToolbarSave_" on-print="onPrint_"
 <if expr="chromeos">
       on-annotation-mode-toggled="onAnnotationModeToggled_"
@@ -46,12 +46,19 @@
     doc-title="[[title_]]" doc-length="[[docLength_]]" page-no="[[pageNo_]]"
     load-progress="[[loadProgress_]]" has-edits="[[hasEdits_]]"
     has-entered-annotation-mode="[[hasEnteredAnnotationMode_]]"
-    pdf-annotations-enabled="[[pdfAnnotationsEnabled_]]"
     pdf-form-save-enabled="[[pdfFormSaveEnabled_]]"
     printing-enabled="[[printingEnabled_]]"
     is-form-field-focused="[[isFormFieldFocused_]]"
+<if expr="chromeos">
+    annotation-available="[[annotationAvailable_]]"
+    ink-controller="[[inkController_]]"
+    pdf-annotations-enabled="[[pdfAnnotationsEnabled_]]"
+</if>
     on-fit-to-changed="onFitToChanged"
     on-zoom-in="onZoomIn" on-zoom-out="onZoomOut"
+<if expr="chromeos">
+    on-annotation-mode-toggled="onAnnotationModeToggled_"
+</if>
     on-print="onPrint_" on-save="onToolbarSave_" hidden>
   </viewer-pdf-toolbar-new>
 </template>

chrome/browser/resources/pdf/pdf_viewer.js

@@ -446,11 +446,11 @@ class PDFViewerElement extends PDFViewerBaseElement {
   // <if expr="chromeos">
   /**
    * Handles the annotation mode being toggled on or off.
-   * @param {!CustomEvent<{value: boolean}>} e
+   * @param {!CustomEvent<boolean>} e
    * @private
    */
   async onAnnotationModeToggled_(e) {
-    const annotationMode = e.detail.value;
+    const annotationMode = e.detail;
     this.annotationMode_ = annotationMode;
     if (annotationMode) {
       // Enter annotation mode.