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}

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

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;

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;

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) {