diff options
Diffstat (limited to 'chromium/chrome/browser/resources/pdf/elements')
22 files changed, 342 insertions, 153 deletions
diff --git a/chromium/chrome/browser/resources/pdf/elements/BUILD.gn b/chromium/chrome/browser/resources/pdf/elements/BUILD.gn index 1980c0a3421..0eaa9db89f2 100644 --- a/chromium/chrome/browser/resources/pdf/elements/BUILD.gn +++ b/chromium/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", @@ -67,7 +68,10 @@ js_library("viewer-page-selector") { } js_library("viewer-password-screen") { - deps = [ "//ui/webui/resources/cr_elements/cr_input:cr_input.m" ] + deps = [ + "//ui/webui/resources/cr_elements/cr_input:cr_input.m", + "//ui/webui/resources/js:load_time_data.m", + ] } js_library("viewer-pdf-toolbar") { @@ -76,10 +80,21 @@ js_library("viewer-pdf-toolbar") { ":viewer-page-selector", ":viewer-toolbar-dropdown", "..:annotation_tool", + "..:constants", + "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu.m", + "//ui/webui/resources/js:assert.m", + "//ui/webui/resources/js:load_time_data.m", + "//ui/webui/resources/js:promise_resolver.m", ] 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") { } @@ -109,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", diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark.html b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark.html index ec39a68550e..8cf60ea1aa7 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-bookmark.html @@ -47,13 +47,13 @@ <paper-ripple></paper-ripple> <cr-icon-button id="expand" iron-icon="cr:chevron-right" on-click="toggleChildren_"></cr-icon-button> - <span id="title" tabindex="0">{{bookmark.title}}</span> + <span id="title" tabindex="0">[[bookmark.title]]</span> </div> <!-- dom-if will stamp the complex bookmark tree lazily as individual nodes are opened. --> <template is="dom-if" if="[[childrenShown_]]"> <template is="dom-repeat" items="[[bookmark.children]]"> - <viewer-bookmark bookmark="{{item}}" depth="[[childDepth_]]"> + <viewer-bookmark bookmark="[[item]]" depth="[[childDepth_]]"> </viewer-bookmark> </template> </template> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.html b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.html index 03047141d77..e2c210fbd08 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.html @@ -1,10 +1,10 @@ <style include="cr-hidden-style"></style> <cr-dialog id="dialog" no-cancel> - <div slot="title">[[strings.errorDialogTitle]]</div> - <div slot="body">[[strings.pageLoadFailed]]</div> + <div slot="title">$i18n{errorDialogTitle}</div> + <div slot="body">$i18n{pageLoadFailed}</div> <div slot="button-container" hidden$="[[!reloadFn]]"> <cr-button class="action-button" on-click="reload"> - [[strings.pageReload]] + $i18n{pageReload} </cr-button> </div> </cr-dialog> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.js b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.js index d3383b06e25..d5702f659d4 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-error-screen.js @@ -15,8 +15,6 @@ Polymer({ properties: { reloadFn: Function, - - strings: Object, }, show() { diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.html b/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.html index 1906119a962..61293db59aa 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.html @@ -1,13 +1,13 @@ <style include="cr-hidden-style"></style> <cr-dialog id="dialog" no-cancel> - <div slot="title">[[strings.annotationFormWarningTitle]]</div> - <div slot="body">[[strings.annotationFormWarningDetail]]</div> + <div slot="title">$i18n{annotationFormWarningTitle}</div> + <div slot="body">$i18n{annotationFormWarningDetail}</div> <div slot="button-container"> <cr-button class="cancel-button" on-click="onCancel"> - [[strings.annotationFormWarningKeepEditing]] + $i18n{annotationFormWarningKeepEditing} </cr-button> <cr-button class="action-button" on-click="onAction"> - [[strings.annotationFormWarningDiscard]] + $i18n{annotationFormWarningDiscard} </cr-button> </div> </cr-dialog> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.js b/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.js index d0cbd6d1de8..900c8d45b1e 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-form-warning.js @@ -14,10 +14,6 @@ Polymer({ _template: html`{__html_template__}`, - properties: { - strings: Object, - }, - /** @private {PromiseResolver} */ resolver_: null, diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-ink-host.js b/chromium/chrome/browser/resources/pdf/elements/viewer-ink-host.js index fa208811e90..6c8b184407f 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-ink-host.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-ink-host.js @@ -3,8 +3,9 @@ // found in the LICENSE file. import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + import {PDFMetrics} from '../metrics.js'; -import {Viewport} from '../viewport.js'; +import {PAGE_SHADOW, Viewport} from '../viewport.js'; /** @enum {string} */ const State = { @@ -62,7 +63,6 @@ Polymer({ /** * Whether we should suppress pointer events due to a gesture, * eg. pinch-zoom. - * * @private {boolean} */ pointerGesture_: false, @@ -96,19 +96,10 @@ Polymer({ /** * Dispatches a pointer event to Ink. - * * @param {PointerEvent} e */ dispatchPointerEvent_(e) { - // TODO(dstockwell) come up with a solution to propagate e.timeStamp. - this.ink_.dispatchPointerEvent(e.type, { - pointerId: e.pointerId, - pointerType: e.pointerType, - clientX: e.clientX, - clientY: e.clientY, - pressure: e.pressure, - buttons: e.buttons, - }); + this.ink_.dispatchPointerEvent(e); }, /** @param {TouchEvent} e */ @@ -135,10 +126,10 @@ Polymer({ // A multi-touch gesture has started with the active pointer. Cancel // the active pointer and suppress further events until it is released. this.pointerGesture_ = true; - this.ink_.dispatchPointerEvent('pointercancel', { + this.ink_.dispatchPointerEvent(new PointerEvent('pointercancel', { pointerId: this.activePointer_.pointerId, pointerType: this.activePointer_.pointerType, - }); + })); } return; } @@ -241,7 +232,7 @@ Polymer({ // color. await new Promise(resolve => setTimeout(resolve)); this.ink_.setOutOfBoundsColor(BACKGROUND_COLOR); - const spacing = Viewport.PAGE_SHADOW.top + Viewport.PAGE_SHADOW.bottom; + const spacing = PAGE_SHADOW.top + PAGE_SHADOW.bottom; this.ink_.setPageSpacing(spacing); this.style.visibility = 'visible'; }, @@ -256,8 +247,8 @@ Polymer({ const zoom = viewport.getZoom(); const documentWidth = viewport.getDocumentDimensions().width * zoom; // Adjust for page shadows. - const y = pos.y - Viewport.PAGE_SHADOW.top * zoom; - let x = pos.x - Viewport.PAGE_SHADOW.left * zoom; + const y = pos.y - PAGE_SHADOW.top * zoom; + let x = pos.x - PAGE_SHADOW.left * zoom; // Center the document if the width is smaller than the viewport. if (documentWidth < size.width) { x += (documentWidth - size.width) / 2; diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator.html b/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator.html index 966a10c3661..5504e761500 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-indicator.html @@ -34,5 +34,5 @@ width: 0; } </style> - <div id="text">{{label}}</div> + <div id="text">[[label]]</div> <div id="triangle-end"></div> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html index 1402b838971..002a23ad3fc 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.html @@ -3,6 +3,8 @@ color: #fff; display: flex; font-size: 0.81rem; + + --page-selector-spacing: 4px; } :host ::selection { @@ -11,12 +13,10 @@ #pageselector::part(input), #pagelength { - box-sizing: content-box; - padding: 0 3px; /* --page-length-digits is set through JavaScript. 1px is added because * the unit 'ch' does not provide exact whole number pixels, and * therefore seems to have 1px-off bugginess. */ - width: calc(var(--page-length-digits) * 1ch + 1px); + width: calc(max(2, var(--page-length-digits)) * 1ch + 1px); } #pageselector { @@ -29,13 +29,18 @@ #pageselector::part(input) { background: rgba(0, 0, 0, 0.5); + box-sizing: content-box; caret-color: var(--cr-input-color); - text-align: end; + padding: 0 var(--page-selector-spacing); + } + + #divider { + margin: 0 var(--page-selector-spacing); } </style> <cr-input id="pageselector" value="[[pageNo]]" on-mouseup="select" on-value-changed="onInputValueChange_" on-change="pageNoCommitted" - aria-label$="{{strings.labelPageNumber}}"> + aria-label$="$i18n{labelPageNumber}"> </cr-input> - / - <span id="pagelength">{{docLength}}</span> + <span id="divider">/</span> + <span id="pagelength">[[docLength]]</span> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.js b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.js index 5eda31ee514..6b8b55ad3dc 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-page-selector.js @@ -26,8 +26,6 @@ Polymer({ type: Number, value: 1, }, - - strings: Object, }, /** @return {!CrInputElement} */ diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.html b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.html index 43c0249bffa..b61cdb5434a 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.html @@ -4,20 +4,19 @@ } </style> <cr-dialog id="dialog" no-cancel> - <div slot="title">[[strings.passwordDialogTitle]]</div> + <div slot="title">$i18n{passwordDialogTitle}</div> <div slot="body"> - <div id="message">[[strings.passwordPrompt]]</div> + <div id="message">$i18n{passwordPrompt}</div> <cr-input id="password" type="password" - error-message="[[getErrorMessage_(strings.passwordInvalid, - invalid)]]" + error-message="[[getErrorMessage_(invalid)]]" invalid="[[invalid]]" autofocus> </cr-input> </div> <div slot="button-container"> <cr-button id="submit" class="action-button" on-click="submit"> - [[strings.passwordSubmit]] + $i18n{passwordSubmit} </cr-button> </div> </cr-dialog> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.js b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.js index 79cd849c56b..7bc4507d700 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-password-screen.js @@ -8,6 +8,7 @@ import 'chrome://resources/cr_elements/cr_input/cr_input.m.js'; import 'chrome://resources/cr_elements/shared_style_css.m.js'; import 'chrome://resources/cr_elements/shared_vars_css.m.js'; +import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js'; import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; Polymer({ @@ -17,8 +18,6 @@ Polymer({ properties: { invalid: Boolean, - - strings: Object, }, get active() { @@ -57,10 +56,9 @@ Polymer({ * Returns |message| if input is invalid, otherwise empty string. * This avoids setting the error message (which announces to screen readers) * when there is no error. - * @param {string} message * @return {string} */ - getErrorMessage_(message) { - return this.invalid ? message : ''; + getErrorMessage_() { + return this.invalid ? loadTimeData.getString('passwordInvalid') : ''; } }); diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html new file mode 100644 index 00000000000..075635defbb --- /dev/null +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.html @@ -0,0 +1,10 @@ +<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. diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js new file mode 100644 index 00000000000..06e1d118df0 --- /dev/null +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar-new.js @@ -0,0 +1,17 @@ +// 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); diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html index 6a8daca8ea7..51c7bc66cb5 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html @@ -1,4 +1,9 @@ <style include="cr-hidden-style"> + :host { + --pdf-toolbar-background-color: rgb(50, 54, 57); + --pdf-toolbar-text-color: rgb(241, 241, 241); + } + :host ::selection { background: rgba(255, 255, 255, 0.3); } @@ -36,7 +41,7 @@ } cr-icon-button { - --cr-icon-button-fill-color: rgb(241, 241, 241); + --cr-icon-button-fill-color: var(--pdf-toolbar-text-color); margin: 6px; } @@ -54,8 +59,8 @@ } #toolbar { - @apply --shadow-elevation-2dp; - background-color: rgb(50, 54, 57); + background-color: var(--pdf-toolbar-background-color); + box-shadow: var(--cr-elevation-2); position: relative; } @@ -67,7 +72,7 @@ #toolbar, #annotations-bar { - color: rgb(241, 241, 241); + color: var(--pdf-toolbar-text-color); display: flex; height: 48px; padding: 0 16px; @@ -90,7 +95,7 @@ #pen, #highlighter { - --dropdown-open-background: rgb(50, 54, 57); + --dropdown-open-background: var(--pdf-viewer-background-color); } #eraser { @@ -138,10 +143,6 @@ #rotate-left { display: none; } - - #pageselector-container { - flex: 2; - } } @media(max-width: 450px) { @@ -156,40 +157,55 @@ display: none; } } + + cr-action-menu::part(dialog) { + position: fixed; + top: 48px; + } </style> <div id="toolbar"> <div id="aligner"> - <span id="title" title="{{docTitle}}"> - <span>{{docTitle}}</span> + <span id="title" title="[[docTitle]]"> + <span>[[docTitle]]</span> </span> <div id="pageselector-container"> <viewer-page-selector id="pageselector" class="invisible" - doc-length="{{docLength}}" page-no="{{pageNo}}" - strings="{{strings}}"> + doc-length="[[docLength]]" page-no="[[pageNo]]"> </viewer-page-selector> </div> <div id="buttons" class="invisible"> - <template is="dom-if" if="[[pdfAnnotationsEnabled]]"> +<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$="{{strings.tooltipAnnotate}}" - title$="{{strings.tooltipAnnotate}}"></cr-icon-button> + aria-label$="$i18n{tooltipAnnotate}" + title="$i18n{tooltipAnnotate}"></cr-icon-button> </template> +</if> <cr-icon-button id="rotate-right" iron-icon="pdf:rotate-right" disabled="[[annotationMode]]" on-click="rotateRight" - aria-label$="{{strings.tooltipRotateCW}}" - title$="{{strings.tooltipRotateCW}}"></cr-icon-button> + aria-label$="$i18n{tooltipRotateCW}" + title="$i18n{tooltipRotateCW}"></cr-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> + on-click="onDownloadClick_" aria-label$="$i18n{tooltipDownload}" + aria-haspopup$="[[downloadHasPopup_]]" + title="$i18n{tooltipDownload}"></cr-icon-button> + <cr-action-menu id="downloadMenu"> + <button class="dropdown-item" on-click="onDownloadEditedClick_"> + $i18n{downloadEdited} + </button> + <button class="dropdown-item" on-click="onDownloadOriginalClick_"> + $i18n{downloadOriginal} + </button> + </cr-action-menu> <cr-icon-button id="print" iron-icon="cr:print" on-click="print" - hidden="[[!printingEnabled]]" title$="{{strings.tooltipPrint}}" - aria-label$="{{strings.tooltipPrint}}"></cr-icon-button> + hidden="[[!printingEnabled_]]" title="$i18n{tooltipPrint}" + aria-label$="$i18n{tooltipPrint}"></cr-icon-button> <viewer-toolbar-dropdown id="bookmarks" selected @@ -197,7 +213,7 @@ hidden$="[[!bookmarks.length]]" open-icon="pdf:bookmark" closed-icon="pdf:bookmark-border" - header="{{strings.bookmarks}}"> + header="$i18n{bookmarks}"> <template is="dom-repeat" items="[[bookmarks]]"> <viewer-bookmark bookmark="[[item]]" depth="0"></viewer-bookmark> </template> @@ -211,6 +227,7 @@ </div> </div> +<if expr="chromeos"> <div id="annotations-bar" hidden> <viewer-toolbar-dropdown id="pen" selected$="[[isAnnotationTool_('pen', annotationTool.tool)]]" @@ -220,7 +237,7 @@ closed-icon="pdf:marker" dropdown-centered hide-header - header$="{{strings.annotationPen}}" + header="$i18n{annotationPen}" style="--pen-tip-fill: #000000"> <viewer-pen-options selected-color="#000000" @@ -239,7 +256,7 @@ closed-icon="pdf:highlighter" dropdown-centered hide-header - header$="{{strings.annotationHighlighter}}" + header="$i18n{annotationHighlighter}" style="--pen-tip-fill: #ffbc00"> <viewer-pen-options selected-color="#ffbc00" @@ -253,18 +270,19 @@ <cr-icon-button id="eraser" selected$="[[isAnnotationTool_('eraser', annotationTool.tool)]]" on-click="annotationToolClicked_" iron-icon="pdf:eraser" - aria-label$="{{strings.annotationEraser}}" - title$="{{strings.annotationEraser}}"></cr-icon-button> + aria-label$="$i18n{annotationEraser}" + title="$i18n{annotationEraser}"></cr-icon-button> <div id="annotation-separator"></div> <cr-icon-button id="undo" disabled="[[!canUndoAnnotation]]" iron-icon="pdf:undo" on-click="undo" - aria-label$="{{strings.annotationUndo}}" - title$="{{strings.annotationUndo}}"></cr-icon-button> + aria-label$="$i18n{annotationUndo}" + title="$i18n{annotationUndo}"></cr-icon-button> <cr-icon-button id="redo" disabled="[[!canRedoAnnotation]]" iron-icon="pdf:redo" on-click="redo" - aria-label$="{{strings.annotationRedo}}" - title$="{{strings.annotationRedo}}"></cr-icon-button> + aria-label$="$i18n{annotationRedo}" + title="$i18n{annotationRedo}"></cr-icon-button> </div> +</if> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.js index 9fb821a0ac4..defc20f57bb 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.js @@ -10,13 +10,19 @@ import './icons.js'; import './viewer-bookmark.js'; import './viewer-page-selector.js'; import './viewer-toolbar-dropdown.js'; - // <if expr="chromeos"> import './viewer-pen-options.js'; + // </if> +import {AnchorAlignment} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.m.js'; +import {assert} from 'chrome://resources/js/assert.m.js'; +import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js'; +import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js'; import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + import {Bookmark} from '../bookmark_type.js'; +import {SaveRequestType} from '../constants.js'; Polymer({ is: 'viewer-pdf-toolbar', @@ -29,10 +35,7 @@ Polymer({ * example the PDF is encrypted or password protected. Note, this is * true regardless of whether the feature flag is enabled. */ - annotationAvailable: { - type: Boolean, - value: true, - }, + annotationAvailable: Boolean, /** Whether the viewer is currently in annotation mode. */ annotationMode: { @@ -45,7 +48,6 @@ Polymer({ /** @type {?AnnotationTool} */ annotationTool: { type: Object, - value: null, notify: true, }, @@ -74,6 +76,15 @@ Polymer({ /** The title of the PDF document. */ docTitle: String, + hasEdits: Boolean, + + hasEnteredAnnotationMode: Boolean, + + isFormFieldFocused: { + type: Boolean, + observer: 'onFormFieldFocusedChanged_', + }, + /** The current loading progress of the PDF document (0 - 100). */ loadProgress: { type: Number, @@ -89,24 +100,52 @@ Polymer({ /** The number of the page being viewed (1-based). */ pageNo: Number, - /** Whether the PDF Annotations feature is enabled. */ - pdfAnnotationsEnabled: { + /** + * Whether the PDF Annotations feature is enabled. + * @private + */ + pdfAnnotationsEnabled_: { type: Boolean, value: false, }, - /** Whether the Printing feature is enabled. */ - printingEnabled: { + /** + * Whether the Printing feature is enabled. + * @private + */ + printingEnabled_: { type: Boolean, value: false, }, - strings: Object, + /** @private */ + downloadHasPopup_: { + type: String, + computed: 'computeDownloadHasPopup_(' + + 'pdfFormSaveEnabled_, hasEdits, hasEnteredAnnotationMode)', + }, + + strings: { + type: Object, + observer: 'onStringsSet_', + }, + + /** + * Whether the PDF Form save feature is enabled. + * @private + */ + pdfFormSaveEnabled_: { + type: Boolean, + value: false, + }, }, /** @type {?Object} */ animation_: null, + /** @private {?PromiseResolver<boolean>} */ + waitForFormFocusChange_: null, + /** * @param {number} newProgress * @param {number} oldProgress @@ -119,7 +158,9 @@ Polymer({ this.$.pageselector.classList.toggle('invisible', !loaded); this.$.buttons.classList.toggle('invisible', !loaded); this.$.progress.style.opacity = loaded ? 0 : 1; + // <if expr="chromeos"> this.$['annotations-bar'].hidden = !loaded || !this.annotationMode; + // </if> } }, @@ -168,7 +209,8 @@ Polymer({ /** @return {boolean} Whether the toolbar should be kept open. */ shouldKeepOpen() { return this.$.bookmarks.dropdownOpen || this.loadProgress < 100 || - this.$.pageselector.isActive() || this.annotationMode; + this.$.pageselector.isActive() || this.annotationMode || + this.$.downloadMenu.open; }, /** @return {boolean} Whether a dropdown was open and was hidden. */ @@ -178,6 +220,7 @@ Polymer({ this.$.bookmarks.toggleDropdown(); result = true; } + // <if expr="chromeos"> if (this.$.pen.dropdownOpen) { this.$.pen.toggleDropdown(); result = true; @@ -186,6 +229,7 @@ Polymer({ this.$.highlighter.toggleDropdown(); result = true; } + // </if> return result; }, @@ -198,8 +242,67 @@ Polymer({ this.fire('rotate-right'); }, - download() { - this.fire('save'); + /** @private */ + showDownloadMenu_() { + this.$.downloadMenu.showAt(this.$.download, { + anchorAlignmentX: AnchorAlignment.CENTER, + anchorAlignmentY: AnchorAlignment.AFTER_END, + noOffset: true, + }); + // For tests + this.fire('download-menu-shown-for-testing'); + }, + + /** @private */ + onDownloadClick_() { + this.waitForEdits_().then(hasEdits => { + if (hasEdits) { + this.showDownloadMenu_(); + } else { + this.fire('save', SaveRequestType.ORIGINAL); + } + }); + }, + + /** + * @return {!Promise<boolean>} Promise that resolves with true if the PDF has + * edits and/or annotations, and false otherwise. + * @private + */ + waitForEdits_() { + if (this.hasEditsToSave_()) { + return Promise.resolve(true); + } + if (!this.isFormFieldFocused || !this.pdfFormSaveEnabled_) { + return Promise.resolve(false); + } + this.waitForFormFocusChange_ = new PromiseResolver(); + return this.waitForFormFocusChange_.promise; + }, + + /** @private */ + onFormFieldFocusedChanged_() { + if (!this.waitForFormFocusChange_) { + return; + } + + this.waitForFormFocusChange_.resolve(this.hasEdits); + this.waitForFormFocusChange_ = null; + }, + + /** @private */ + onDownloadOriginalClick_() { + this.fire('save', SaveRequestType.ORIGINAL); + this.$.downloadMenu.close(); + }, + + /** @private */ + onDownloadEditedClick_() { + this.fire( + 'save', + this.hasEnteredAnnotationMode ? SaveRequestType.ANNOTATION : + SaveRequestType.EDITED); + this.$.downloadMenu.close(); }, print() { @@ -255,7 +358,7 @@ Polymer({ const tool = element.id; const options = element.querySelector('viewer-pen-options') || { selectedSize: 1, - selectedColor: null, + selectedColor: undefined, }; const attributeStyleMap = element.attributeStyleMap; attributeStyleMap.set('--pen-tip-fill', options.selectedColor); @@ -278,4 +381,32 @@ Polymer({ isAnnotationTool_(toolName) { return !!this.annotationTool && this.annotationTool.tool === toolName; }, + + /** + * @return {boolean} + * @private + */ + hasEditsToSave_() { + return this.hasEnteredAnnotationMode || + (this.pdfFormSaveEnabled_ && this.hasEdits); + }, + + /** + * @return {string} The value for the aria-haspopup attribute for the download + * button. + * @private + */ + computeDownloadHasPopup_() { + return this.hasEditsToSave_() ? 'menu' : 'false'; + }, + + /** @private */ + onStringsSet_() { + assert(this.strings); + + this.pdfAnnotationsEnabled_ = + loadTimeData.getBoolean('pdfAnnotationsEnabled'); + this.pdfFormSaveEnabled_ = loadTimeData.getBoolean('pdfFormSaveEnabled'); + this.printingEnabled_ = loadTimeData.getBoolean('printingEnabled'); + }, }); diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.html b/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.html index b44bf89f9c9..e98c1c20513 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.html @@ -65,8 +65,8 @@ on-pointerdown="blurOnPointerDown"> </template> <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> + on-click="toggleExpanded_" aria-label$="$i18n{annotationExpand}" + title$="$i18n{annotationExpand}"></cr-icon-button> </div> <div id="separator"></div> <div id="sizes" on-change="sizeChanged_"> @@ -74,7 +74,7 @@ <input type="radio" name="size" value="[[item.size]]" checked$="[[equal_(selectedSize, item.size)]]" tabindex="2" style="--item-size: [[item.size]]" - title$="{{lookup_(strings, item.name)}}" + title="[[lookup_(strings, item.name)]]" aria-label$="[[lookup_(strings, item.name)]]" on-pointerdown="blurOnPointerDown"> </template> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.js b/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.js index 0cc12c94384..fd7e6e8661d 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-pen-options.js @@ -52,50 +52,62 @@ const sizes = [ {name: 'annotationSize20', size: 1}, ]; -/** - * Displays a set of radio buttons to select from - * a predefined list of colors and sizes. - */ +// Displays a set of radio buttons to select from a predefined list of colors +// and sizes. Polymer({ is: 'viewer-pen-options', _template: html`{__html_template__}`, properties: { + /** @private */ expanded_: { type: Boolean, value: false, }, + selectedSize: { type: Number, value: 0.250, notify: true, }, + selectedColor: { type: String, value: '#000000', notify: true, }, + + /** @private */ sizes_: { type: Array, value: sizes, }, + + /** @private */ colors_: { type: Array, value: colors, }, + strings: Object, }, - /** @type {Array<!Animation>} */ + /** @private {Array<!Animation>} */ expandAnimations_: null, - /** @param {Event} e */ + /** + * @param {!Event} e + * @private + */ sizeChanged_(e) { this.selectedSize = Number(e.target.value); }, - /** @param {Event} e */ + /** + * @param {!Event} e + * @private + */ colorChanged_(e) { this.selectedColor = e.target.value; }, @@ -125,6 +137,7 @@ Polymer({ /** * Updates the state of the UI to reflect the current value of `expanded`. * Starts or reverses animations and enables/disable controls. + * @private */ updateExpandedState_() { const colors = this.$.colors; @@ -176,19 +189,16 @@ Polymer({ animation.play(); } for (const input of colors.querySelectorAll('input:nth-child(n+8)')) { - if (this.expanded_) { - input.removeAttribute('disabled'); - } else { - input.setAttribute('disabled', ''); - } + input.toggleAttribute('disabled', !this.expanded_); } }, /** * Used to determine equality in computed bindings. - * * @param {*} a * @param {*} b + * @return {boolean} Whether a === b + * @private */ equal_(a, b) { return a === b; @@ -196,10 +206,10 @@ Polymer({ /** * Used to lookup a string in a computed binding. - * * @param {Object} strings * @param {string} name * @return {string} + * @private */ lookup_(strings, name) { return strings ? strings[name] : ''; @@ -209,6 +219,7 @@ Polymer({ * Used to remove focus when clicking or tapping on a styled input * element. This is a workaround until we can use the :focus-visible * pseudo selector. + * @param {!Event} e */ blurOnPointerDown(e) { const target = e.target; diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html index 8c6e7640bde..ff49695f629 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html @@ -27,23 +27,17 @@ #dropdown { background-color: var(--cr-menu-background-color); border-radius: 4px; + box-shadow: var(--cr-menu-shadow); color: var(--cr-primary-text-color); overflow-y: hidden; padding-bottom: 2px; width: var(--dropdown-width); } - @media (prefers-color-scheme: light) { - #dropdown { - @apply --shadow-elevation-2dp; - } - } - @media (prefers-color-scheme: dark) { #dropdown { background-image: linear-gradient(var(--cr-menu-background-sheen), var(--cr-menu-background-sheen)); - box-shadow: var(--cr-menu-shadow); } } @@ -89,7 +83,7 @@ <div id="container"> <div id="dropdown" style="display: none"> <template is="dom-if" if="[[!hideHeader]]"> - <h1>{{header}}</h1> + <h1>[[header]]</h1> </template> <div id="scroll-container"> <slot></slot> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html index f51075c5cab..ad97fce8a23 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-button.html @@ -35,11 +35,10 @@ --cr-icon-button-fill-color: var(--paper-grey-700); --cr-icon-button-icon-size: 20px; --cr-icon-button-size: 36px; - --cr-icon-button-fill-color-focus: rgb(242, 242, 242); background-color: rgb(242, 242, 242); border-radius: 50%; + box-shadow: var(--cr-elevation-1); overflow: visible; - @apply --shadow-elevation-2dp; } cr-icon-button([disabled]) { @@ -48,7 +47,6 @@ :host-context([is-print-preview]) cr-icon-button { --cr-icon-button-fill-color: white; - --cr-icon-button-fill-color-focus: var(--google-grey-600); --cr-icon-button-size: 32px; background-color: var(--google-grey-600); } @@ -62,17 +60,16 @@ @media (prefers-color-scheme: dark) { :host-context([is-print-preview]) cr-icon-button { --cr-icon-button-fill-color: var(--google-grey-200); - --cr-icon-button-fill-color-focus: var(--google-grey-900); background-color: var(--google-grey-900); } } :host([keyboard-navigation-active]) cr-icon-button:focus { - @apply --shadow-elevation-6dp; + box-shadow: var(--cr-elevation-4); } cr-icon-button:active { - @apply --shadow-elevation-8dp; + box-shadow: var(--cr-elevation-5); } </style> <div id="wrapper"> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.html b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.html index ab6a4d461ca..341f6bbf4c7 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.html +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.html @@ -67,7 +67,7 @@ <!-- TODO(crbug.com/51472): Change icons for two-up-view-button --> <!-- once they are finalized. --> <viewer-zoom-button id="two-up-view-button" delay="100" - disabled="[[annotationMode]]" hidden$="[[!twoUpViewEnabled]]" + disabled="[[annotationMode]]" hidden$="[[!twoUpViewEnabled_]]" on-fabclick="twoUpViewToggle_" keyboard-navigation-active="[[keyboardNavigationActive_]]" icons="pdf:create pdf:eraser"></viewer-zoom-button> diff --git a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.js b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.js index d58712f7562..f3bab8c69e1 100644 --- a/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.js +++ b/chromium/chrome/browser/resources/pdf/elements/viewer-zoom-toolbar.js @@ -8,7 +8,9 @@ import './icons.js'; import './viewer-zoom-button.js'; import {assert} from 'chrome://resources/js/assert.m.js'; +import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js'; import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + import {FittingType, TwoUpViewAction} from '../constants.js'; /** @@ -32,19 +34,25 @@ Polymer({ properties: { /** Whether the viewer is currently in annotation mode. */ - annotationMode: { + annotationMode: Boolean, + + isPrintPreview: { type: Boolean, value: false, }, - isPrintPreview: Boolean, + strings: { + type: Object, + observer: 'onStringsSet_', + }, - twoUpViewEnabled: Boolean, + /** @private */ + twoUpViewEnabled_: Boolean, /** @private */ fitButtonDelay_: { type: Number, - computed: 'computeFitButtonDelay_(twoUpViewEnabled)', + computed: 'computeFitButtonDelay_(twoUpViewEnabled_)', }, /** @private */ @@ -55,12 +63,11 @@ Polymer({ }, /** - * @param {boolean} twoUpViewEnabled Whether two-up view button is enabled. - * @return {number} Delay for :qthe fit button. + * @return {number} Delay for the fit button. * @private */ - computeFitButtonDelay_(twoUpViewEnabled) { - return twoUpViewEnabled ? 150 : 100; + computeFitButtonDelay_() { + return this.twoUpViewEnabled_ ? 150 : 100; }, listeners: { @@ -106,20 +113,27 @@ Polymer({ /** * Change button tooltips to match any changes to localized strings. - * @param {!{tooltipFitToPage: string, - * tooltipFitToWidth: string, - * tooltipTwoUpViewEnable: string, - * tooltipTwoUpViewDisable: string, - * tooltipZoomIn: string, - * tooltipZoomOut: string}} strings + * @private */ - setStrings(strings) { + onStringsSet_() { + const strings = + /** + * @type {{tooltipFitToPage: string, + * tooltipFitToWidth: string, + * tooltipTwoUpViewEnable: string, + * tooltipTwoUpViewDisable: string, + * tooltipZoomIn: string, + * tooltipZoomOut: string}} + */ + (this.strings); this.$['fit-button'].tooltips = [strings.tooltipFitToPage, strings.tooltipFitToWidth]; this.$['two-up-view-button'].tooltips = [strings.tooltipTwoUpViewEnable, strings.tooltipTwoUpViewDisable]; this.$['zoom-in-button'].tooltips = [strings.tooltipZoomIn]; this.$['zoom-out-button'].tooltips = [strings.tooltipZoomOut]; + this.twoUpViewEnabled_ = + loadTimeData.getBoolean('pdfTwoUpViewEnabled') && !this.isPrintPreview; }, /** Handle clicks of the fit-button. */ @@ -175,7 +189,7 @@ Polymer({ * @private */ twoUpViewToggle_: function() { - assert(this.twoUpViewEnabled); + assert(this.twoUpViewEnabled_); const twoUpViewAction = this.$['two-up-view-button'].activeIndex === TWO_UP_VIEW_DISABLED_STATE ? TwoUpViewAction.TWO_UP_VIEW_ENABLE : @@ -184,16 +198,12 @@ Polymer({ this.fire('two-up-view-changed', twoUpViewAction); }, - /** - * Handle clicks of the zoom-in-button. - */ + /** Handle clicks of the zoom-in-button. */ zoomIn() { this.fire('zoom-in'); }, - /** - * Handle clicks of the zoom-out-button. - */ + /** Handle clicks of the zoom-out-button. */ zoomOut() { this.fire('zoom-out'); }, |