Iframe placeholders, security and resizing

This change adds javascript to fill in the YouTube placeholders
created by the distiller. the content security policy now allows
for iframes from all sources (distiller closely controls which
iframes are allowed). Some css has also been added to appropriately
resize these iframes when the page is resized.

This change will not work correctly by itself, it depends on the
following CL to work correctly:

https://codereview.chromium.org/1015463004

BUG=468862

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

Cr-Commit-Position: refs/heads/master@{#323934}

4 files changed, 48 insertions, 0 deletions

diff --git a/components/dom_distiller/content/dom_distiller_viewer_source.cc b/components/dom_distiller/content/dom_distiller_viewer_source.cc
index b478ce2..bb417aa 100644
--- a/components/dom_distiller/content/dom_distiller_viewer_source.cc
+++ b/components/dom_distiller/content/dom_distiller_viewer_source.cc
@@ -375,4 +375,8 @@ std::string DomDistillerViewerSource::GetContentSecurityPolicyObjectSrc()
   return "object-src 'none'; style-src 'self' https://fonts.googleapis.com;";
 }
 
+std::string DomDistillerViewerSource::GetContentSecurityPolicyFrameSrc() const {
+  return "frame-src *;";
+}
+
 }  // namespace dom_distiller
diff --git a/components/dom_distiller/content/dom_distiller_viewer_source.h b/components/dom_distiller/content/dom_distiller_viewer_source.h
index 5a9721e..76632f1 100644
--- a/components/dom_distiller/content/dom_distiller_viewer_source.h
+++ b/components/dom_distiller/content/dom_distiller_viewer_source.h
@@ -39,6 +39,7 @@ class DomDistillerViewerSource : public content::URLDataSource {
   void WillServiceRequest(const net::URLRequest* request,
                           std::string* path) const override;
   std::string GetContentSecurityPolicyObjectSrc() const override;
+  std::string GetContentSecurityPolicyFrameSrc() const override;
 
  private:
   friend class DomDistillerViewerSourceTest;
diff --git a/components/dom_distiller/core/css/distilledpage.css b/components/dom_distiller/core/css/distilledpage.css
index f14b2bd..e563d19 100644
--- a/components/dom_distiller/core/css/distilledpage.css
+++ b/components/dom_distiller/core/css/distilledpage.css
@@ -345,6 +345,23 @@ pre {
   }
 }
 
+/* Iframe sizing. */
+.youtubeContainer {
+  height: 0px;
+  /* This is the perecnt height of a standard HD video. */
+  padding-bottom: 56.25%;
+  position: relative;
+  width: 100%;
+}
+
+.youtubeIframe {
+  height: 100%;
+  left: 0px;
+  position: absolute;
+  top: 0px;
+  width: 100%;
+}
+
 /* Loading Indicator. */
 #loader {
   height: 22px;
diff --git a/components/dom_distiller/core/javascript/dom_distiller_viewer.js b/components/dom_distiller/core/javascript/dom_distiller_viewer.js
index 24d41fd..b330fbb 100644
--- a/components/dom_distiller/core/javascript/dom_distiller_viewer.js
+++ b/components/dom_distiller/core/javascript/dom_distiller_viewer.js
@@ -6,6 +6,32 @@ function addToPage(html) {
   var div = document.createElement('div');
   div.innerHTML = html;
   document.getElementById('content').appendChild(div);
+  fillYouTubePlaceholders();
+}
+
+function fillYouTubePlaceholders() {
+  var placeholders = document.getElementsByClassName('embed-placeholder');
+  for (var i = 0; i < placeholders.length; i++) {
+    if (!placeholders[i].hasAttribute('data-type') ||
+        placeholders[i].getAttribute('data-type') != 'youtube' ||
+        !placeholders[i].hasAttribute('data-id')) {
+      continue;
+    }
+    var embed = document.createElement('iframe');
+    var url = 'http://www.youtube.com/embed/' +
+        placeholders[i].getAttribute('data-id');
+    embed.setAttribute('class', 'youtubeIframe');
+    embed.setAttribute('src', url);
+    embed.setAttribute('type', 'text/html');
+    embed.setAttribute('frameborder', '0');
+
+    var parent = placeholders[i].parentElement;
+    var container = document.createElement('div');
+    container.setAttribute('class', 'youtubeContainer');
+    container.appendChild(embed);
+
+    parent.replaceChild(container, placeholders[i]);
+  }
 }
 
 function showLoadingIndicator(isLastPage) {