Merge pull request #7244 from Rob--W/crx-pdf-embed-object-no-shadow-dom

Don't use shadow DOM for rendering <object>/<embed>

extensions/chromium/contentscript.js

@@ -23,31 +23,10 @@ function getViewerURL(pdf_url) {
   return VIEWER_URL + '?file=' + encodeURIComponent(pdf_url);
 }
 
-// (un)prefixed property names
+if (CSS.supports('animation', '0s')) {
-var createShadowRoot, shadowRoot;
+  document.addEventListener('animationstart', onAnimationStart, true);
-if (typeof Element.prototype.createShadowRoot !== 'undefined') {
+} else {
-  // Chrome 35+
+  document.addEventListener('webkitAnimationStart', onAnimationStart, true);
-  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);
-  }
 }
 
 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
+// This may change the type, src/data attributes and/or the child nodes of the
-// shadow DOM rooted under the given element.
+// element. This function only affects elements for the first call. Subsequent
-// Calling this function multiple times for the same element is safe, i.e.
+// invocations have no effect.
-// it has no side effects.
 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 (elem.__I_saw_this_element) {
-    // If the element already has a shadow root, assume that we've already
-    // seen 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 (!isUpdating) {
-    if (!path) {
+      isUpdating = true;
-      elem[shadowRoot].textContent = '';
+      try {
-    } else {
+        if (lastSrc !== elem[srcAttribute]) {
-      elem[shadowRoot].innerHTML =
+          updateEmbedOrObject(elem);
-        // Set display: inline-block; to the host element (<embed>/<object>) to
+          lastSrc = elem[srcAttribute];
-        // ensure that the dimensions defined on the host element are applied to
+        }
-        // the iframe (http://crbug.com/358648).
+      } finally {
-        // The styles are declared in the shadow DOM to allow page authors to
+        isUpdating = false;
-        // 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);
     }
   }
 
@@ -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);