Adding `content_security_policy` to imageinfo extension.

chrome/common/extensions/docs/examples/extensions/imageinfo/info.html

Index: chrome/common/extensions/docs/examples/extensions/imageinfo/info.html
diff --git a/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html b/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html
index af3e1853e5b37d23173d6adc362aa0ce1419db0c..5757f7d33d47a6da3d04dbf7036939e46402ce7d 100644
--- a/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html
+++ b/chrome/common/extensions/docs/examples/extensions/imageinfo/info.html
@@ -9,191 +9,14 @@
     <script src="imageinfo/binaryajax.js"></script>
     <script src="imageinfo/imageinfo.js" ></script>
     <script src="imageinfo/exif.js" ></script>
-    <style>
-      body {
-        font: 14px Arial;
-      }
-
-      h1 {
-        margin: 30px 0 5px 0;
-        padding: 0;
-      }
-      code {
-        padding: 0;
-        margin: 5px 0;
-        display: block;
-      }
-      table {
-        border-collapse: collapse;
-        width: 100%;
-        margin: 15px 0;
-      }
-      td, th {
-        padding: 4px;
-      }
-      th {
-        text-align: left;
-        width: 130px;
-      }
-      tr {
-        display: none;
-      }
-      tr.rendered {
-        display: block;
-      }
-      tr.rendered:nth-child(odd) {
-        background: #eee;
-      }
-      #thumbnail {
-        position: fixed;
-        right: 20px;
-        top: 20px;
-        -webkit-box-shadow: 1px 1px 6px #000;
-        border: 4px solid #fff;
-        background: #fff;
-      }
-      #loader {
-        font: 30px Arial;
-        text-align: center;
-        padding: 100px;
-      }
-    </style>
-    <script>
-      /**
-       * Quick template rendering function.  For each cell passed to it, check
-       * to see if the cell's text content is a key in the supplied data array.
-       * If yes, replace the cell's contents with the corresponding value and
-       * unhide the cell.  If no, then remove the cell's parent (tr) from the
-       * DOM.
-       */
-      function renderCells(cells, data) {
-        for (var i = 0; i < cells.length; i++) {
-          var cell = cells[i];
-          var key = cell.innerText;
-          if (data[key]) {
-            cell.innerText = data[key];
-            cell.parentElement.className = "rendered";
-          } else {
-            cell.parentElement.parentElement.removeChild(cell.parentElement);
-          }
-        }
-      };
-
-      /**
-       * Returns true if the supplies object has no properties.
-       */
-      function isEmpty(obj) {
-        for (var key in obj) {
-          if (obj.hasOwnProperty(key)) {
-            return false;
-          }
-        }
-        return true;
-      };
-
-      /**
-       * Resizes the window to the current dimensions of this page's body.
-       */
-      function resizeWindow() {
-        window.setTimeout(function() {
-          chrome.tabs.getCurrent(function (tab) {
-            var newHeight = Math.min(document.body.offsetHeight + 140, 700);
-            chrome.windows.update(tab.windowId, {
-              height: newHeight,
-              width: 520
-            });
-          });
-        }, 150);
-      };
-
-      /**
-       * Called directly by the background page with information about the
-       * image.  Outputs image data to the DOM.
-       */
-      function renderImageInfo(imageinfo) {
-        console.log('imageinfo', imageinfo);
-
-        var divloader = document.querySelector('#loader');
-        var divoutput = document.querySelector('#output');
-        divloader.style.display = "none";
-        divoutput.style.display = "block";
-
-        var divinfo = document.querySelector('#info');
-        var divexif = document.querySelector('#exif');
-
-        // Render general image data.
-        var datacells = divinfo.querySelectorAll('td');
-        renderCells(datacells, imageinfo);
-
-        // If EXIF data exists, unhide the EXIF table and render.
-        if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) {
-          divexif.style.display = 'block';
-          var exifcells = divexif.querySelectorAll('td');
-          renderCells(exifcells, imageinfo['exif']);
-        }
-      };
-
-      /**
-       * Renders the URL for the image, trimming if the length is too long.
-       */
-      function renderUrl(url) {
-        var divurl = document.querySelector('#url');
-        var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...';
-        var anchor = document.createElement('a');
-        anchor.href = url;
-        anchor.innerText = urltext;
-        divurl.appendChild(anchor);
-      };
-
-      /**
-       * Renders a thumbnail view of the image.
-       */
-      function renderThumbnail(url) {
-        var canvas = document.querySelector('#thumbnail');
-        var context = canvas.getContext('2d');
-
-        canvas.width = 100;
-        canvas.height = 100;
-
-        var image = new Image();
-        image.addEventListener('load', function() {
-          var src_w = image.width;
-          var src_h = image.height;
-          var new_w = canvas.width;
-          var new_h = canvas.height;
-          var ratio = src_w / src_h;
-          if (src_w > src_h) {
-            new_h /= ratio;
-          } else {
-            new_w *= ratio;
-          }
-          canvas.width = new_w;
-          canvas.height = new_h;
-          context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h);
-        });
-        image.src = url;
-      };
-
-      /**
-       * Returns a function which will handle displaying information about the
-       * image once the ImageInfo class has finished loading.
-       */
-      function getImageInfoHandler(url) {
-        return function() {
-          renderUrl(url);
-          renderThumbnail(url);
-          var imageinfo = ImageInfo.getAllFields(url);
-          renderImageInfo(imageinfo);
-          resizeWindow();
-        };
-      };
-    </script>
+    <link href="info.css" rel="stylesheet" type="text/css"></link>
+    <script src="info.js"></script>
   </head>
   <body>
     <div id="loader">
       Loading... <img src="loader.gif" />
     </div>
-    <div id="output" style="display:none">
+    <div id="output">
       <div id="info">
         <h1>Image Information</h1>
         <code id="url"></code>
@@ -225,7 +48,7 @@
           </tr>
         </table>
       </div>
-      <div id="exif" style="display:none;">
+      <div id="exif">
         <h2>EXIF Information</h2>
         <table>
           <tr>
@@ -275,13 +98,5 @@
         </table>
       </div>
     </div>
-    <script>
-      // The URL of the image to load is passed on the URL fragment.
-      var imageUrl = window.location.hash.substring(1);
-      if (imageUrl) {
-        // Use the ImageInfo library to load the image and parse it.
-        ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl));
-      }
-    </script>
   </body>
-</html>
+</html>