0

Print Preview Layout Changes: Update preview area/plugin styling

Update the styling/colors of the preview area and plugin to match the
mocks (lighter background color, and smaller, lighter zoom buttons).

The lighter new colors look out of place in dark mode, so also adding
separate colors for dark mode.

See bug for screenshots.

Bug: 945619
Change-Id: I600d6ec6cd6422ad9b2bab1c0218504744220170
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1560450
Reviewed-by: Lei Zhang <thestig@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#650020}
This commit is contained in:
rbpotter
2019-04-11 20:07:25 +00:00
committed by Commit Bot
parent 5824335025
commit fda121a62c
14 changed files with 159 additions and 28 deletions

@ -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([show-on-left][closed]) #wrapper {
transform: translateX(-132px);
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"

@ -26,6 +26,8 @@ Polymer({
delay: {type: Number, observer: 'delayChanged_'},
newPrintPreview: {type: Boolean, reflectToAttribute: true},
showOnLeft: {type: Boolean, reflectToAttribute: true},
/**

@ -8,6 +8,7 @@
<template>
<style>
:host {
--button-position-offset: 48px;
bottom: 0;
padding: 48px 0;
position: fixed;
@ -16,6 +17,10 @@
z-index: 3;
}
:host([new-print-preview]) {
--button-position-offset: 24px;
}
:host([show-on-left_]) {
left: 0;
right: auto;
@ -23,11 +28,11 @@
#zoom-buttons {
position: relative;
right: 48px;
right: var(--button-position-offset);
}
:host([show-on-left_]) #zoom-buttons {
left: 48px;
left: var(--button-position-offset);
right: auto;
}
@ -47,13 +52,16 @@
</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>

@ -11,12 +11,15 @@ Polymer({
is: 'viewer-zoom-toolbar',
properties: {
reverse: Boolean,
newPrintPreview: {
type: Boolean,
reflectToAttribute: true,
},
/** @private */
showOnLeft_: {
type: Boolean,
computed: 'computeShowOnLeft_(reverse)',
computed: 'computeShowOnLeft_(newPrintPreview)',
reflectToAttribute: true,
},
@ -47,7 +50,7 @@ Polymer({
* @private
*/
computeShowOnLeft_: function() {
return isRTL() !== this.reverse;
return isRTL() !== this.newPrintPreview;
},
/**

@ -215,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.
@ -296,5 +301,6 @@ function PDFCreateOutOfProcessPlugin(src, baseUrl) {
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;
}

@ -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,13 +764,15 @@ PDFViewer.prototype = {
document.documentElement.lang = strings.language;
loadTimeData.data = strings;
const reverseZoomToolbar = this.isPrintPreview_ &&
const isNewPrintPreview = this.isPrintPreview_ &&
loadTimeData.getBoolean('newPrintPreviewLayoutEnabled');
this.reverseZoomToolbar_ = reverseZoomToolbar;
if (reverseZoomToolbar) {
if (isNewPrintPreview) {
this.sendBackgroundColorForPrintPreview_();
this.toolbarManager_.reverseSideToolbar();
}
$('zoom-toolbar').reverse = reverseZoomToolbar;
this.reverseZoomToolbar_ = isNewPrintPreview;
this.zoomToolbar_.newPrintPreview = isNewPrintPreview;
$('toolbar').strings = strings;
$('toolbar').pdfAnnotationsEnabled =
loadTimeData.getBoolean('pdfAnnotationsEnabled');
@ -996,6 +1013,12 @@ PDFViewer.prototype = {
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;

@ -45,12 +45,12 @@
#preview-area-container {
align-items: center;
background-color: var(--google-grey-200);
background-color: var(--preview-area-background-color);
flex: 1;
}
:host-context([dark]) #preview-area-container {
background-color: var(--google-grey-400);
:host([new-print-preview-layout_]) #preview-area-container {
background-color: var(--preview-area-background-color-new);
}
</style>
<print-preview-state id="state" state="{{state}}" error="{{error_}}">
@ -90,6 +90,7 @@
document-modifiable="[[documentSettings_.isModifiable]]"
margins="[[margins_]]" page-size="[[pageSize_]]" state="[[state]]"
measurement-system="[[measurementSystem_]]"
new-print-preview-layout="[[newPrintPreviewLayout_]]"
preview-state="{{previewState_}}" on-preview-start="onPreviewStart_">
</print-preview-preview-area>
</div>

@ -350,7 +350,7 @@ Polymer({
/** @private */
onPreviewSettingChanged_: function() {
if (this.state === print_preview_new.State.READY) {
this.$.previewArea.startPreview();
this.$.previewArea.startPreview(false);
this.startPreviewWhenReady_ = false;
} else {
this.startPreviewWhenReady_ = true;
@ -361,7 +361,7 @@ Polymer({
onStateChanged_: function() {
if (this.state == print_preview_new.State.READY) {
if (this.startPreviewWhenReady_) {
this.$.previewArea.startPreview();
this.$.previewArea.startPreview(false);
this.startPreviewWhenReady_ = false;
}
if (this.isInKioskAutoPrintMode_ || this.printRequested_) {

@ -159,6 +159,11 @@ cr.define('print_preview_new', function() {
this.plugin_.loadPreviewPage(
this.getPreviewUrl_(previewUid, pageIndex), index);
}
/** @param {boolean} darkMode Whether the page is in dark mode. */
darkModeChanged(darkMode) {
this.plugin_.darkModeChanged(darkMode);
}
}
/** @type {?print_preview_new.PluginProxy} */

@ -74,7 +74,7 @@
}
.preview-area-overlay-layer {
background: var(--google-grey-200);
background: var(--preview-area-background-color);
display: flex;
flex-direction: column;
height: 100%;
@ -91,8 +91,8 @@
z-index: 1;
}
:host-context([dark]) .preview-area-overlay-layer {
background: var(--google-grey-400);
:host([new-print-preview-layout]) .preview-area-overlay-layer {
background: var(--preview-area-background-color-new);
}
.preview-area-overlay-layer.invisible {
@ -109,6 +109,10 @@
position: relative;
text-align: center;
}
:host([new-print-preview-layout]) .preview-area-message {
color: var(--cr-primary-text-color);
}
</style>
<div class$="preview-area-overlay-layer [[getInvisible_(previewState)]]"
aria-hidden$="[[getAriaHidden_(previewState)]]">

@ -45,6 +45,11 @@ Polymer({
/** @type {?print_preview.MeasurementSystem} */
measurementSystem: Object,
newPrintPreviewLayout: {
type: Boolean,
reflectToAttribute: true,
},
/** @type {!print_preview.Size} */
pageSize: Object,
@ -110,6 +115,10 @@ Polymer({
this.nativeLayer_ = print_preview.NativeLayer.getInstance();
this.addWebUIListener(
'page-preview-ready', this.onPagePreviewReady_.bind(this));
if (this.newPrintPreviewLayout) {
this.addWebUIListener(
'dark-mode-changed', this.onDarkModeChanged_.bind(this));
}
this.pluginProxy_ = print_preview_new.PluginProxy.getInstance();
if (!this.pluginProxy_.checkPluginCompatibility(assert(
@ -257,9 +266,12 @@ Polymer({
}
},
/** @private */
startPreview: function() {
if (!this.hasTicketChanged_() &&
/**
* @param {boolean} forceUpdate Whether to force the preview area to update
* regardless of whether the print ticket has changed.
*/
startPreview: function(forceUpdate) {
if (!this.hasTicketChanged_() && !forceUpdate &&
this.previewState !== print_preview_new.PreviewAreaState.ERROR) {
return;
}
@ -312,6 +324,10 @@ Polymer({
}
this.pluginLoaded_ = false;
if (document.documentElement.hasAttribute('dark') &&
this.newPrintPreviewLayout) {
this.pluginProxy_.darkModeChanged(true);
}
this.pluginProxy_.resetPrintPreviewMode(
previewUid, index, !this.getSettingValue('color'),
/** @type {!Array<number>} */ (this.getSettingValue('pages')),
@ -384,6 +400,21 @@ Polymer({
}
},
/**
* @param {boolean} darkMode Whether the page is now in dark mode.
* @private
*/
onDarkModeChanged_: function(darkMode) {
if (this.pluginProxy_.pluginReady()) {
this.pluginProxy_.darkModeChanged(darkMode);
}
if (this.previewState ===
print_preview_new.PreviewAreaState.DISPLAY_PREVIEW) {
this.startPreview(true);
}
},
/**
* Processes a keyboard event that could possibly be used to change state of
* the preview plugin.

@ -21,9 +21,13 @@
--cr-form-field-label-height: initial;
--cr-form-field-label-line-height: .75rem;
--destination-item-height: 32px;
--preview-area-background-color: var(--google-grey-200);
--preview-area-background-color-new: var(--google-grey-refresh-300);
}
:host-context([dark]) {
--preview-area-background-color: var(--google-grey-400);
--preview-area-background-color-new: var(--google-grey-refresh-700);
--print-preview-disabled-label: {
opacity: var(--cr-disabled-opacity);
}

@ -89,6 +89,8 @@ cr.define('print_preview', function() {
this.loadCallback_(true);
}
}
darkModeChanged(darkMode) {}
}
return {PDFPluginStub: PDFPluginStub};

@ -118,6 +118,9 @@ constexpr char kJSResetPrintPreviewModeType[] = "resetPrintPreviewMode";
constexpr char kJSPrintPreviewUrl[] = "url";
constexpr char kJSPrintPreviewGrayscale[] = "grayscale";
constexpr char kJSPrintPreviewPageCount[] = "pageCount";
// Background color changed (Page -> Plugin)
constexpr char kJSBackgroundColorChangedType[] = "backgroundColorChanged";
constexpr char kJSBackgroundColor[] = "backgroundColor";
// Load preview page (Page -> Plugin)
constexpr char kJSLoadPreviewPageType[] = "loadPreviewPage";
constexpr char kJSPreviewPageUrl[] = "url";
@ -693,6 +696,13 @@ void OutOfProcessInstance::HandleMessage(const pp::Var& message) {
RotateCounterclockwise();
} else if (type == kJSSelectAllType) {
engine_->SelectAll();
} else if (type == kJSBackgroundColorChangedType) {
if (!dict.Get(pp::Var(kJSBackgroundColor)).is_string()) {
NOTREACHED();
return;
}
base::HexStringToUInt(dict.Get(pp::Var(kJSBackgroundColor)).AsString(),
&background_color_);
} else if (type == kJSResetPrintPreviewModeType) {
if (!(dict.Get(pp::Var(kJSPrintPreviewUrl)).is_string() &&
dict.Get(pp::Var(kJSPrintPreviewGrayscale)).is_bool() &&