Merge pull request #7244 from Rob--W/crx-pdf-embed-object-no-shadow-dom
Don't use shadow DOM for rendering <object>/<embed>
This commit is contained in:
Tim van der Meij
commit
8dcc727be1
@ -23,31 +23,10 @@ function getViewerURL(pdf_url) {
|
||||
return VIEWER_URL + '?file=' + encodeURIComponent(pdf_url);
|
||||
}
|
||||
|
||||
// (un)prefixed property names
|
||||
var createShadowRoot, shadowRoot;
|
||||
if (typeof Element.prototype.createShadowRoot !== 'undefined') {
|
||||
// Chrome 35+
|
||||
createShadowRoot = 'createShadowRoot';
|
||||
shadowRoot = 'shadowRoot';
|
||||
} else if (typeof Element.prototype.webkitCreateShadowRoot !== 'undefined') {
|
||||
// Chrome 25 - 34
|
||||
createShadowRoot = 'webkitCreateShadowRoot';
|
||||
shadowRoot = 'webkitShadowRoot';
|
||||
try {
|
||||
document.createElement('embed').webkitCreateShadowRoot();
|
||||
} catch (e) {
|
||||
// Only supported since Chrome 33.
|
||||
createShadowRoot = shadowRoot = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Only observe the document if we can make use of Shadow DOM.
|
||||
if (createShadowRoot) {
|
||||
if (CSS.supports('animation', '0s')) {
|
||||
document.addEventListener('animationstart', onAnimationStart, true);
|
||||
} else {
|
||||
document.addEventListener('webkitAnimationStart', onAnimationStart, true);
|
||||
}
|
||||
if (CSS.supports('animation', '0s')) {
|
||||
document.addEventListener('animationstart', onAnimationStart, true);
|
||||
} else {
|
||||
document.addEventListener('webkitAnimationStart', onAnimationStart, true);
|
||||
}
|
||||
|
||||
function onAnimationStart(event) {
|
||||
@ -57,10 +36,9 @@ function onAnimationStart(event) {
|
||||
}
|
||||
|
||||
// Called for every <object> or <embed> element in the page.
|
||||
// It does not trigger any Mutation observers, but it may modify the
|
||||
// shadow DOM rooted under the given element.
|
||||
// Calling this function multiple times for the same element is safe, i.e.
|
||||
// it has no side effects.
|
||||
// This may change the type, src/data attributes and/or the child nodes of the
|
||||
// element. This function only affects elements for the first call. Subsequent
|
||||
// invocations have no effect.
|
||||
function watchObjectOrEmbed(elem) {
|
||||
var mimeType = elem.type;
|
||||
if (mimeType && 'application/pdf' !== mimeType.toLowerCase()) {
|
||||
@ -86,33 +64,35 @@ function watchObjectOrEmbed(elem) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (elem[shadowRoot]) {
|
||||
// If the element already has a shadow root, assume that we've already
|
||||
// seen this element.
|
||||
if (elem.__I_saw_this_element) {
|
||||
return;
|
||||
}
|
||||
elem[createShadowRoot]();
|
||||
elem.__I_saw_this_element = true;
|
||||
|
||||
var tagName = elem.tagName.toUpperCase();
|
||||
var updateEmbedOrObject;
|
||||
if (tagName === 'EMBED') {
|
||||
updateEmbedOrObject = updateEmbedElement;
|
||||
} else if (tagName === 'OBJECT') {
|
||||
updateEmbedOrObject = updateObjectElement;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
var lastSrc;
|
||||
var isUpdating = false;
|
||||
|
||||
function updateViewerFrame() {
|
||||
var path = elem[srcAttribute];
|
||||
if (!path) {
|
||||
elem[shadowRoot].textContent = '';
|
||||
} else {
|
||||
elem[shadowRoot].innerHTML =
|
||||
// Set display: inline-block; to the host element (<embed>/<object>) to
|
||||
// ensure that the dimensions defined on the host element are applied to
|
||||
// the iframe (http://crbug.com/358648).
|
||||
// The styles are declared in the shadow DOM to allow page authors to
|
||||
// override these styles (e.g. .style.display = 'none';).
|
||||
'<style>\n' +
|
||||
// Chrome 35+
|
||||
':host { display: inline-block; }\n' +
|
||||
// Chrome 33 and 34 (not 35+ because of http://crbug.com/351248)
|
||||
'*:not(style):not(iframe) { display: inline-block; }\n' +
|
||||
'iframe { width: 100%; height: 100%; border: 0; }\n' +
|
||||
'</style>' +
|
||||
'<iframe allowfullscreen></iframe>';
|
||||
elem[shadowRoot].lastChild.src = getEmbeddedViewerURL(path);
|
||||
if (!isUpdating) {
|
||||
isUpdating = true;
|
||||
try {
|
||||
if (lastSrc !== elem[srcAttribute]) {
|
||||
updateEmbedOrObject(elem);
|
||||
lastSrc = elem[srcAttribute];
|
||||
}
|
||||
} finally {
|
||||
isUpdating = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -128,6 +108,81 @@ function watchObjectOrEmbed(elem) {
|
||||
});
|
||||
}
|
||||
|
||||
// Display the PDF Viewer in an <embed>.
|
||||
function updateEmbedElement(elem) {
|
||||
if (elem.type === 'text/html' && elem.src.lastIndexOf(VIEWER_URL, 0) === 0) {
|
||||
// The viewer is already shown.
|
||||
return;
|
||||
}
|
||||
// The <embed> tag needs to be removed and re-inserted before any src changes
|
||||
// are effective.
|
||||
var parentNode = elem.parentNode;
|
||||
var nextSibling = elem.nextSibling;
|
||||
if (parentNode) {
|
||||
parentNode.removeChild(elem);
|
||||
}
|
||||
elem.type = 'text/html';
|
||||
elem.src = getEmbeddedViewerURL(elem.src);
|
||||
if (parentNode) {
|
||||
parentNode.insertBefore(elem, nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
// Display the PDF Viewer in an <object>.
|
||||
function updateObjectElement(elem) {
|
||||
// <object> elements are terrible. Experiments (in49.0.2623.75) show that the
|
||||
// following happens:
|
||||
// - When fallback content is shown (e.g. because the built-in PDF Viewer is
|
||||
// disabled), updating the "data" attribute has no effect. Not surprising
|
||||
// considering that HTMLObjectElement::m_useFallbackContent is not reset
|
||||
// once it is set to true. Source:
|
||||
// WebKit/Source/core/html/HTMLObjectElement.cpp#378 (rev 749fe30d676b6c14).
|
||||
// - When the built-in PDF Viewer plugin is enabled, updating the "data"
|
||||
// attribute reloads the content (provided that the type was correctly set).
|
||||
// - When <object type=text/html data="chrome-extension://..."> is used
|
||||
// (tested with a data-URL, data:text/html,<object...>, the extension's
|
||||
// origin whitelist is not set up, so the viewer can't load the PDF file.
|
||||
// - The content of the <object> tag may be affected by <param> tags.
|
||||
//
|
||||
// To make sure that our solution works for all cases, we will insert a frame
|
||||
// as fallback content and force the <object> tag to render its fallback
|
||||
// content.
|
||||
var iframe = elem.firstElementChild;
|
||||
if (!iframe || !iframe.__inserted_by_pdfjs) {
|
||||
iframe = createFullSizeIframe();
|
||||
elem.textContent = '';
|
||||
elem.appendChild(iframe);
|
||||
iframe.__inserted_by_pdfjs = true;
|
||||
}
|
||||
iframe.src = getEmbeddedViewerURL(elem.data);
|
||||
|
||||
// Some bogus content type that is not handled by any plugin.
|
||||
elem.type = 'application/not-a-pee-dee-eff-type';
|
||||
// Force the <object> to reload and render its fallback content.
|
||||
elem.data += '';
|
||||
}
|
||||
|
||||
// Create an <iframe> element without borders that takes the full width and
|
||||
// height.
|
||||
function createFullSizeIframe() {
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.style.background = 'none';
|
||||
iframe.style.border = 'none';
|
||||
iframe.style.borderRadius = 'none';
|
||||
iframe.style.boxShadow = 'none';
|
||||
iframe.style.cssFloat = 'none';
|
||||
iframe.style.display = 'block';
|
||||
iframe.style.height = '100%';
|
||||
iframe.style.margin = '0';
|
||||
iframe.style.maxHeight = 'none';
|
||||
iframe.style.maxWidth = 'none';
|
||||
iframe.style.position = 'static';
|
||||
iframe.style.transform = 'none';
|
||||
iframe.style.visibility = 'visible';
|
||||
iframe.style.width = '100%';
|
||||
return iframe;
|
||||
}
|
||||
|
||||
// Get the viewer URL, provided that the path is a valid URL.
|
||||
function getEmbeddedViewerURL(path) {
|
||||
var fragment = /^([^#]*)(#.*)?$/.exec(path);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user