Skip to content

GitLab

T
tangled
Commit 3528d630 authored by raymes@chromium.org's avatar raymes@chromium.org
Browse files
Options

Implement viewporting for the out of process PDF plugin. 

BUG=303491

Review URL: https://codereview.chromium.org/137663008

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@251993 0039d316-1c4b-4281-b951-d872f2087c98
parent 8370a622
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 495 additions and 91 deletions
chrome/browser/resources/component_extension_resources.grd
View file @ 3528d630
...@@ -214,7 +214,8 @@ ...@@ -214,7 +214,8 @@
<include name="IDR_PDF_INDEX_HTML" file="pdf/index.html" allowexternalscript="true" type="BINDATA" /> <include name="IDR_PDF_INDEX_HTML" file="pdf/index.html" allowexternalscript="true" type="BINDATA" />
<include name="IDR_PDF_INDEX_JS" file="pdf/index.js" type="BINDATA" /> <include name="IDR_PDF_INDEX_JS" file="pdf/index.js" type="BINDATA" />
<include name="IDR_PDF_BACKGROUND_JS" file="pdf/background.js" type="BINDATA" /> <include name="IDR_PDF_BACKGROUND_JS" file="pdf/background.js" type="BINDATA" />
<include name="IDR_PDF_JS" file="pdf/pdf.js" type="BINDATA" /> <include name="IDR_PDF_JS" file="pdf/pdf.js" type="BINDATA" flattenhtml="true" />
<include name="IDR_PDF_VIEWPORT_JS" file="pdf/viewport.js" type="BINDATA" />
<include name="IDR_PDF_POLYMER_JS" file="pdf/polymer_loader.js" type="BINDATA" flattenhtml="true" /> <include name="IDR_PDF_POLYMER_JS" file="pdf/polymer_loader.js" type="BINDATA" flattenhtml="true" />
<include name="IDR_PDF_BUTTON_LOW_1" file="pdf/html_office/elements/viewer-button/img/lowDPI/button_fit_page.png" type="BINDATA" /> <include name="IDR_PDF_BUTTON_LOW_1" file="pdf/html_office/elements/viewer-button/img/lowDPI/button_fit_page.png" type="BINDATA" />
<include name="IDR_PDF_BUTTON_LOW_2" file="pdf/html_office/elements/viewer-button/img/lowDPI/button_fit_width.png" type="BINDATA" /> <include name="IDR_PDF_BUTTON_LOW_2" file="pdf/html_office/elements/viewer-button/img/lowDPI/button_fit_width.png" type="BINDATA" />
......
chrome/browser/resources/pdf/index.html
View file @ 3528d630
...@@ -172,20 +172,20 @@ license that can be found in the LICENSE file. ...@@ -172,20 +172,20 @@ license that can be found in the LICENSE file.
</polymer-element> </polymer-element>
<polymer-element name="viewer-toolbar" attributes="fadingIn" on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}" on-mouseout="{{fadeOut}}" assetpath="html_office/elements/viewer-toolbar/"> <polymer-element name="viewer-toolbar" attributes="fadingIn" on-mouseover="{{fadeIn}}" on-mousemove="{{fadeIn}}" on-mouseout="{{fadeOut}}" assetpath="html_office/elements/viewer-toolbar/">
<template> <template>
<style>/* Copyright 2013 The Chromium Authors. All rights reserved. <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be * Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */ * found in the LICENSE file. */
:host { :host {
-webkit-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 400ms ease-in-out;
bottom: 0; bottom: 0;
display: block; display: block;
font-size: 0; font-size: 0;
opacity: 1; opacity: 1;
padding: 30px 30px 15px 30vw;
position: fixed; position: fixed;
right: 0; right: 0;
padding: 30px 30px 15px 30vw;
} }
#toolbar { #toolbar {
...@@ -194,16 +194,16 @@ license that can be found in the LICENSE file. ...@@ -194,16 +194,16 @@ license that can be found in the LICENSE file.
overflow: hidden; overflow: hidden;
} }
</style> </style>
<div id="toolbar"> <div id="toolbar">
<content></content> <content></content>
</div> </div>
</template> </template>
</polymer-element> </polymer-element>
<polymer-element name="viewer-button" attributes="src latchable" assetpath="html_office/elements/viewer-button/"> <polymer-element name="viewer-button" attributes="src latchable" assetpath="html_office/elements/viewer-button/">
<template> <template>
<style>/* Copyright 2013 The Chromium Authors. All rights reserved. <style>/* Copyright 2013 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be * Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */ * found in the LICENSE file. */
...@@ -240,9 +240,9 @@ license that can be found in the LICENSE file. ...@@ -240,9 +240,9 @@ license that can be found in the LICENSE file.
background-image: none; background-image: none;
} }
</style> </style>
<div id="icon"></div> <div id="icon"></div>
</template> </template>
</polymer-element> </polymer-element>
<style> <style>
body { body {
...@@ -252,22 +252,35 @@ license that can be found in the LICENSE file. ...@@ -252,22 +252,35 @@ license that can be found in the LICENSE file.
viewer-toolbar { viewer-toolbar {
z-index: 2; z-index: 2;
} }
object { #plugin {
height: 100%;
position: fixed;
width: 100%;
z-index: 1; z-index: 1;
} }
#sizer {
position: absolute;
z-index: 0;
}
</style> </style>
</head> </head>
<body> <body>
<viewer-toolbar> <div id="sizer"></div>
<viewer-toolbar id="toolbar">
<polymer-selector> <polymer-selector>
<viewer-button src="button_fit_page.png" latchable="true"></viewer-button> <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable="">
<viewer-button src="button_fit_width.png" latchable="true"></viewer-button> </viewer-button>
<viewer-button src="button_zoom_in.png"></viewer-button> <viewer-button id="fit-to-width-button" src="button_fit_width.png" latchable="">
<viewer-button src="button_zoom_out.png"></viewer-button> </viewer-button>
<viewer-button id="zoom-in-button" src="button_zoom_in.png">
</viewer-button>
<viewer-button id="zoom-out-button" src="button_zoom_out.png">
</viewer-button>
</polymer-selector> </polymer-selector>
<viewer-button src="button_save.png"></viewer-button> <viewer-button id="save-button" src="button_save.png"></viewer-button>
<viewer-button src="button_print.png"></viewer-button> <viewer-button id="print-button" src="button_print.png"></viewer-button>
</viewer-toolbar> </viewer-toolbar>
......
chrome/browser/resources/pdf/index.in.html
View file @ 3528d630
...@@ -19,22 +19,36 @@ ...@@ -19,22 +19,36 @@
viewer-toolbar { viewer-toolbar {
z-index: 2; z-index: 2;
} }
object { #plugin {
height: 100%;
position: fixed;
width: 100%;
z-index: 1; z-index: 1;
} }
#sizer {
position: absolute;
z-index: 0;
}
</style> </style>
</head> </head>
<body> <body>
<viewer-toolbar> <div id="sizer"></div>
<viewer-toolbar id="toolbar">
<polymer-selector> <polymer-selector>
<viewer-button src="button_fit_page.png" latchable=true></viewer-button> <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable>
<viewer-button src="button_fit_width.png" latchable=true></viewer-button> </viewer-button>
<viewer-button src="button_zoom_in.png"></viewer-button> <viewer-button id="fit-to-width-button" src="button_fit_width.png"
<viewer-button src="button_zoom_out.png"></viewer-button> latchable>
</viewer-button>
<viewer-button id="zoom-in-button" src="button_zoom_in.png">
</viewer-button>
<viewer-button id="zoom-out-button" src="button_zoom_out.png">
</viewer-button>
</polymer-selector> </polymer-selector>
<viewer-button src="button_save.png"></viewer-button> <viewer-button id="save-button" src="button_save.png"></viewer-button>
<viewer-button src="button_print.png"></viewer-button> <viewer-button id="print-button" src="button_print.png"></viewer-button>
</viewer-toolbar> </viewer-toolbar>
</body> </body>
......
chrome/browser/resources/pdf/index.js
View file @ 3528d630
...@@ -387,39 +387,39 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function ...@@ -387,39 +387,39 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function
}); });
; ;
Polymer('viewer-toolbar', { Polymer('viewer-toolbar', {
fadingIn: false, fadingIn: false,
timerId: undefined, timerId: undefined,
ready: function() { ready: function() {
this.fadingInChanged(); this.fadingInChanged();
}, },
fadeIn: function() { fadeIn: function() {
this.fadingIn = true; this.fadingIn = true;
}, },
fadeOut: function() { fadeOut: function() {
this.fadingIn = false; this.fadingIn = false;
}, },
fadingInChanged: function() { fadingInChanged: function() {
if (this.fadingIn) { if (this.fadingIn) {
this.style.opacity = 1; this.style.opacity = 1;
if (this.timerId !== undefined) { if (this.timerId !== undefined) {
clearTimeout(this.timerId); clearTimeout(this.timerId);
this.timerId = undefined; this.timerId = undefined;
} }
} else { } else {
if (this.timerId === undefined) { if (this.timerId === undefined) {
this.timerId = setTimeout( this.timerId = setTimeout(
function() { function() {
this.style.opacity = 0; this.style.opacity = 0;
this.timerId = undefined; this.timerId = undefined;
}.bind(this), 3000); }.bind(this), 3000);
}
} }
} }
}); }
; });
;
(function() { (function() {
var dpi = ''; var dpi = '';
Polymer('viewer-button', { Polymer('viewer-button', {
...@@ -435,7 +435,7 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function ...@@ -435,7 +435,7 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function
if (this.src) { if (this.src) {
this.$.icon.style.backgroundImage = this.$.icon.style.backgroundImage =
'url(' + this.getAttribute('assetpath') + 'img/' + dpi + 'url(' + this.getAttribute('assetpath') + 'img/' + dpi +
'DPI/' + this.src + ')'; 'DPI/' + this.src + ')';
} else { } else {
this.$.icon.style.backgroundImage = ''; this.$.icon.style.backgroundImage = '';
} }
...@@ -447,5 +447,4 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function ...@@ -447,5 +447,4 @@ Polymer={},"function"==typeof window.Polymer&&(Polymer={}),function(a){function
this.classList.remove('latchable'); this.classList.remove('latchable');
}, },
}); });
})(); })();
\ No newline at end of file
chrome/browser/resources/pdf/pdf.js
View file @ 3528d630
...@@ -3,51 +3,121 @@ ...@@ -3,51 +3,121 @@
// found in the LICENSE file. // found in the LICENSE file.
(function() { (function() {
'use strict';
<include src="../../../../ui/webui/resources/js/util.js"></include>
<include src="viewport.js"></include>
// The plugin element is sized to fill the entire window and is set to be fixed
// positioning, acting as a viewport. The plugin renders into this viewport
// according to the scroll position of the window.
var plugin; var plugin;
// This element is placed behind the plugin element to cause scrollbars to be
// displayed in the window. It is sized according to the document size of the
// pdf and zoom level.
var sizer; var sizer;
function onScroll() { // The toolbar element.
var scrollMessage = { var viewerToolbar;
type: 'scroll',
xOffset: window.pageXOffset, // The viewport object.
yOffset: window.pageYOffset var viewport;
};
plugin.postMessage(scrollMessage); // Returns true if the fit-to-page button is enabled.
function isFitToPageEnabled() {
return $('fit-to-page-button').classList.contains('polymer-selected');
} }
// Called when a message is received from the plugin.
function handleMessage(message) { function handleMessage(message) {
if (message.data['type'] == 'document_dimensions') { if (message.data.type == 'documentDimensions') {
if (sizer.style.height != message.data['document_height'] + 'px') { viewport.setDocumentDimensions(message.data);
sizer.style.height = message.data['document_height'] + 'px';
sizer.style.width = message.data['document_width'] + 'px';
}
} }
} }
// Callback that's called when the viewport changes.
function viewportChangedCallback(zoom, x, y, scrollbarWidth, hasScrollbars) {
// Offset the toolbar position so that it doesn't move if scrollbars appear.
var toolbarRight = hasScrollbars.y ? 0 : scrollbarWidth;
var toolbarBottom = hasScrollbars.x ? 0 : scrollbarWidth;
viewerToolbar.style.right = toolbarRight + 'px';
viewerToolbar.style.bottom = toolbarBottom + 'px';
// Notify the plugin of the viewport change.
plugin.postMessage({
type: 'viewport',
zoom: zoom,
xOffset: x,
yOffset: y
});
}
function load() { function load() {
window.addEventListener('scroll', sizer = $('sizer');
function() { webkitRequestAnimationFrame(onScroll); }); viewerToolbar = $('toolbar');
// Create the viewport.
viewport = new Viewport(window,
sizer,
isFitToPageEnabled,
viewportChangedCallback);
// Create the plugin object dynamically so we can set its src.
plugin = document.createElement('object');
plugin.id = 'plugin';
plugin.type = 'application/x-google-chrome-pdf';
plugin.addEventListener('message', handleMessage, false);
// The pdf location is passed in the document url in the format: // The pdf location is passed in the document url in the format:
// http://<.../pdf.html>?<pdf location>. // http://<.../pdf.html>?<pdf location>.
var url = window.location.search.substring(1); var url = window.location.search.substring(1);
plugin = document.createElement('object');
plugin.setAttribute('width', '100%');
plugin.setAttribute('height', '100%');
plugin.setAttribute('type', 'application/x-google-chrome-pdf');
plugin.setAttribute('src', url); plugin.setAttribute('src', url);
plugin.style.zIndex = '1';
plugin.style.position = 'fixed';
plugin.addEventListener('message', handleMessage, false);
document.body.appendChild(plugin); document.body.appendChild(plugin);
sizer = document.createElement('div'); // Setup the button event listeners.
sizer.style.zIndex = '0'; $('fit-to-width-button').addEventListener('click',
sizer.style.position = 'absolute'; viewport.fitToWidth.bind(viewport));
sizer.style.width = '100%'; $('fit-to-page-button').addEventListener('click',
sizer.style.height = '100%'; viewport.fitToPage.bind(viewport));
document.body.appendChild(sizer); $('zoom-in-button').addEventListener('click',
viewport.zoomIn.bind(viewport));
$('zoom-out-button').addEventListener('click',
viewport.zoomOut.bind(viewport));
// Setup keyboard event listeners.
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37: // Left arrow key.
// Go to the previous page if there are no horizontal scrollbars.
if (!viewport.documentHasScrollbars().x) {
viewport.goToPage(viewport.getMostVisiblePage() - 1);
// Since we do the movement of the page
e.preventDefault();
}
return;
case 33: // Page up key.
// Go to the previous page if we are fit-to-page.
if (isFitToPageEnabled()) {
viewport.goToPage(viewport.getMostVisiblePage() - 1);
e.preventDefault();
}
return;
case 39: // Right arrow key.
// Go to the next page if there are no horizontal scrollbars.
if (!viewport.documentHasScrollbars().x) {
viewport.goToPage(viewport.getMostVisiblePage() + 1);
e.preventDefault();
}
return;
case 34: // Page down key.
// Go to the next page if we are fit-to-page.
if (isFitToPageEnabled()) {
viewport.goToPage(viewport.getMostVisiblePage() + 1);
e.preventDefault();
}
return;
}
};
} }
load(); load();
......
chrome/browser/resources/pdf/viewport.js 0 → 100644
View file @ 3528d630
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment