Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(270)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/common/extensions/docs/examples/extensions/imageinfo/info.html

Issue 8310002: Adding `content_security_policy` to imageinfo extension. (Closed) Base URL: http://git.chromium.org/git/chromium.git@trunk
Patch Set: Created 9 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« chrome/common/extensions/docs/examples/extensions/imageinfo/background.html ('K') | « chrome/common/extensions/docs/examples/extensions/imageinfo/info.css ('k') | chrome/common/extensions/docs/examples/extensions/imageinfo/info.js » ('j') | chrome/common/extensions/docs/examples/extensions/imageinfo/manifest.json » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 * Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this 3 * Copyright (c) 2010 The Chromium Authors. All rights reserved. Use of this
4 * source code is governed by a BSD-style license that can be found in the 4 * source code is governed by a BSD-style license that can be found in the
5 * LICENSE file. 5 * LICENSE file.
6 --> 6 -->
7 <html 7 <html
8 <head> 8 <head>
9 <script src="imageinfo/binaryajax.js"></script> 9 <script src="imageinfo/binaryajax.js"></script>
10 <script src="imageinfo/imageinfo.js" ></script> 10 <script src="imageinfo/imageinfo.js" ></script>
11 <script src="imageinfo/exif.js" ></script> 11 <script src="imageinfo/exif.js" ></script>
12 <style> 12 <link href="./info.css" rel="stylesheet" type="text/css"></link>
13 body { 13 <script src="./info.js"></script>
abarth-chromium 2011/10/15 18:23:12 Same questions here.
Use mkwst_at_chromium.org plz. 2011/10/15 18:41:26 Done.
14 font: 14px Arial;
15 }
16
17 h1 {
18 margin: 30px 0 5px 0;
19 padding: 0;
20 }
21 code {
22 padding: 0;
23 margin: 5px 0;
24 display: block;
25 }
26 table {
27 border-collapse: collapse;
28 width: 100%;
29 margin: 15px 0;
30 }
31 td, th {
32 padding: 4px;
33 }
34 th {
35 text-align: left;
36 width: 130px;
37 }
38 tr {
39 display: none;
40 }
41 tr.rendered {
42 display: block;
43 }
44 tr.rendered:nth-child(odd) {
45 background: #eee;
46 }
47 #thumbnail {
48 position: fixed;
49 right: 20px;
50 top: 20px;
51 -webkit-box-shadow: 1px 1px 6px #000;
52 border: 4px solid #fff;
53 background: #fff;
54 }
55 #loader {
56 font: 30px Arial;
57 text-align: center;
58 padding: 100px;
59 }
60 </style>
61 <script>
62 /**
63 * Quick template rendering function. For each cell passed to it, check
64 * to see if the cell's text content is a key in the supplied data array.
65 * If yes, replace the cell's contents with the corresponding value and
66 * unhide the cell. If no, then remove the cell's parent (tr) from the
67 * DOM.
68 */
69 function renderCells(cells, data) {
70 for (var i = 0; i < cells.length; i++) {
71 var cell = cells[i];
72 var key = cell.innerText;
73 if (data[key]) {
74 cell.innerText = data[key];
75 cell.parentElement.className = "rendered";
76 } else {
77 cell.parentElement.parentElement.removeChild(cell.parentElement);
78 }
79 }
80 };
81
82 /**
83 * Returns true if the supplies object has no properties.
84 */
85 function isEmpty(obj) {
86 for (var key in obj) {
87 if (obj.hasOwnProperty(key)) {
88 return false;
89 }
90 }
91 return true;
92 };
93
94 /**
95 * Resizes the window to the current dimensions of this page's body.
96 */
97 function resizeWindow() {
98 window.setTimeout(function() {
99 chrome.tabs.getCurrent(function (tab) {
100 var newHeight = Math.min(document.body.offsetHeight + 140, 700);
101 chrome.windows.update(tab.windowId, {
102 height: newHeight,
103 width: 520
104 });
105 });
106 }, 150);
107 };
108
109 /**
110 * Called directly by the background page with information about the
111 * image. Outputs image data to the DOM.
112 */
113 function renderImageInfo(imageinfo) {
114 console.log('imageinfo', imageinfo);
115
116 var divloader = document.querySelector('#loader');
117 var divoutput = document.querySelector('#output');
118 divloader.style.display = "none";
119 divoutput.style.display = "block";
120
121 var divinfo = document.querySelector('#info');
122 var divexif = document.querySelector('#exif');
123
124 // Render general image data.
125 var datacells = divinfo.querySelectorAll('td');
126 renderCells(datacells, imageinfo);
127
128 // If EXIF data exists, unhide the EXIF table and render.
129 if (imageinfo['exif'] && !isEmpty(imageinfo['exif'])) {
130 divexif.style.display = 'block';
131 var exifcells = divexif.querySelectorAll('td');
132 renderCells(exifcells, imageinfo['exif']);
133 }
134 };
135
136 /**
137 * Renders the URL for the image, trimming if the length is too long.
138 */
139 function renderUrl(url) {
140 var divurl = document.querySelector('#url');
141 var urltext = (url.length < 45) ? url : url.substr(0, 42) + '...';
142 var anchor = document.createElement('a');
143 anchor.href = url;
144 anchor.innerText = urltext;
145 divurl.appendChild(anchor);
146 };
147
148 /**
149 * Renders a thumbnail view of the image.
150 */
151 function renderThumbnail(url) {
152 var canvas = document.querySelector('#thumbnail');
153 var context = canvas.getContext('2d');
154
155 canvas.width = 100;
156 canvas.height = 100;
157
158 var image = new Image();
159 image.addEventListener('load', function() {
160 var src_w = image.width;
161 var src_h = image.height;
162 var new_w = canvas.width;
163 var new_h = canvas.height;
164 var ratio = src_w / src_h;
165 if (src_w > src_h) {
166 new_h /= ratio;
167 } else {
168 new_w *= ratio;
169 }
170 canvas.width = new_w;
171 canvas.height = new_h;
172 context.drawImage(image, 0, 0, src_w, src_h, 0, 0, new_w, new_h);
173 });
174 image.src = url;
175 };
176
177 /**
178 * Returns a function which will handle displaying information about the
179 * image once the ImageInfo class has finished loading.
180 */
181 function getImageInfoHandler(url) {
182 return function() {
183 renderUrl(url);
184 renderThumbnail(url);
185 var imageinfo = ImageInfo.getAllFields(url);
186 renderImageInfo(imageinfo);
187 resizeWindow();
188 };
189 };
190 </script>
191 </head> 14 </head>
192 <body> 15 <body>
193 <div id="loader"> 16 <div id="loader">
194 Loading... <img src="loader.gif" /> 17 Loading... <img src="loader.gif" />
195 </div> 18 </div>
196 <div id="output" style="display:none"> 19 <div id="output">
197 <div id="info"> 20 <div id="info">
198 <h1>Image Information</h1> 21 <h1>Image Information</h1>
199 <code id="url"></code> 22 <code id="url"></code>
200 <canvas id="thumbnail"></canvas> 23 <canvas id="thumbnail"></canvas>
201 <table> 24 <table>
202 <tr> 25 <tr>
203 <th>Format</th> 26 <th>Format</th>
204 <td>format</td> 27 <td>format</td>
205 </tr> 28 </tr>
206 <tr> 29 <tr>
(...skipping 11 matching lines...) Expand all
218 <tr> 41 <tr>
219 <th>Mime Type</th> 42 <th>Mime Type</th>
220 <td>mimeType</td> 43 <td>mimeType</td>
221 </tr> 44 </tr>
222 <tr> 45 <tr>
223 <th>Size (Bytes)</th> 46 <th>Size (Bytes)</th>
224 <td>byteSize</td> 47 <td>byteSize</td>
225 </tr> 48 </tr>
226 </table> 49 </table>
227 </div> 50 </div>
228 <div id="exif" style="display:none;"> 51 <div id="exif">
229 <h2>EXIF Information</h2> 52 <h2>EXIF Information</h2>
230 <table> 53 <table>
231 <tr> 54 <tr>
232 <th>Date</th> 55 <th>Date</th>
233 <td>DateTime</td> 56 <td>DateTime</td>
234 </tr> 57 </tr>
235 <tr> 58 <tr>
236 <th>Aperture</th> 59 <th>Aperture</th>
237 <td>ApertureValue</td> 60 <td>ApertureValue</td>
238 </tr> 61 </tr>
(...skipping 29 matching lines...) Expand all
268 <th>YResolution</th> 91 <th>YResolution</th>
269 <td>YResolution</td> 92 <td>YResolution</td>
270 </tr> 93 </tr>
271 <tr> 94 <tr>
272 <th>Flash</th> 95 <th>Flash</th>
273 <td>Flash</td> 96 <td>Flash</td>
274 </tr> 97 </tr>
275 </table> 98 </table>
276 </div> 99 </div>
277 </div> 100 </div>
278 <script>
279 // The URL of the image to load is passed on the URL fragment.
280 var imageUrl = window.location.hash.substring(1);
281 if (imageUrl) {
282 // Use the ImageInfo library to load the image and parse it.
283 ImageInfo.loadInfo(imageUrl, getImageInfoHandler(imageUrl));
284 }
285 </script>
286 </body> 101 </body>
287 </html> 102 </html>
OLDNEW
« chrome/common/extensions/docs/examples/extensions/imageinfo/background.html ('K') | « chrome/common/extensions/docs/examples/extensions/imageinfo/info.css ('k') | chrome/common/extensions/docs/examples/extensions/imageinfo/info.js » ('j') | chrome/common/extensions/docs/examples/extensions/imageinfo/manifest.json » ('J')

Powered by Google App Engine
This is Rietveld 408576698