OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html i18n-values="dir:textdirection;"> | 2 <html i18n-values="dir:textdirection;"> |
3 <head> | 3 <head> |
4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <!-- X-WebKit-CSP is our development name for Content-Security-Policy. |
| 6 The 'unsafe-eval' is required for jstemplate_compiled.js. |
| 7 TODO(tsepez) rename when Content-security-policy is done. |
| 8 --> |
| 9 <meta http-equiv="X-WebKit-CSP" content="object-src 'none'; script-src chrome://
resources 'self' 'unsafe-eval'"> |
5 <title i18n-content="pluginsTitle"></title> | 10 <title i18n-content="pluginsTitle"></title> |
6 <style> | 11 <style> |
7 body { | 12 body { |
8 margin: 10px; | 13 margin: 10px; |
9 min-width: 47em; | 14 min-width: 47em; |
10 } | 15 } |
11 | 16 |
12 a { | 17 a { |
13 color: blue; | 18 color: blue; |
14 font-size: 103%; | 19 font-size: 103%; |
(...skipping 220 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
235 /* Match the indentation of .plugin-text. */ | 240 /* Match the indentation of .plugin-text. */ |
236 .plugin-actions { | 241 .plugin-actions { |
237 -webkit-padding-start: 5px; | 242 -webkit-padding-start: 5px; |
238 margin-top: 0.2em; | 243 margin-top: 0.2em; |
239 margin-bottom: 0.2em; | 244 margin-bottom: 0.2em; |
240 } | 245 } |
241 | 246 |
242 button { | 247 button { |
243 font-size: 104%; | 248 font-size: 104%; |
244 } | 249 } |
245 | |
246 </style> | 250 </style> |
247 <script> | |
248 | |
249 /** | |
250 * This variable structure is here to document the structure that the template | |
251 * expects to correctly populate the page. | |
252 */ | |
253 var pluginDataFormat = { | |
254 'plugins': [ | |
255 { | |
256 'name': 'Group Name', | |
257 'description': 'description', | |
258 'version': 'version', | |
259 'update_url': 'http://update/', | |
260 'critical': true, | |
261 'enabled': true, | |
262 'plugin_files': [ | |
263 { | |
264 'path': '/blahblah/blahblah/MyCrappyPlugin.plugin', | |
265 'name': 'MyCrappyPlugin', | |
266 'version': '1.2.3', | |
267 'description': 'My crappy plugin', | |
268 'mimeTypes': [ | |
269 { 'description': 'Foo Media', | |
270 'fileExtensions': [ 'foo' ], | |
271 'mimeType': 'application/x-my-foo' }, | |
272 { 'description': 'Bar Stuff', | |
273 'fileExtensions': [ 'bar','baz' ], | |
274 'mimeType': 'application/my-bar' } | |
275 ], | |
276 'enabledMode': 'enabledByUser' | |
277 }, | |
278 { | |
279 'path': '/tmp/MyFirst.plugin', | |
280 'name': 'MyFirstPlugin', | |
281 'version': '3.14r15926', | |
282 'description': 'My first plugin', | |
283 'mimeTypes': [ | |
284 { 'description': 'New Guy Media', | |
285 'fileExtensions': [ 'mfp' ], | |
286 'mimeType': 'application/x-my-first' } | |
287 ], | |
288 'enabledMode': 'enabledByPolicy' | |
289 }, | |
290 { | |
291 'path': '/foobar/baz/YourGreatPlugin.plugin', | |
292 'name': 'YourGreatPlugin', | |
293 'version': '4.5', | |
294 'description': 'Your great plugin', | |
295 'mimeTypes': [ | |
296 { 'description': 'Baz Stuff', | |
297 'fileExtensions': [ 'baz' ], | |
298 'mimeType': 'application/x-your-baz' } | |
299 ], | |
300 'enabledMode': 'disabledByUser' | |
301 }, | |
302 { | |
303 'path': '/foobiz/bar/HisGreatPlugin.plugin', | |
304 'name': 'HisGreatPlugin', | |
305 'version': '1.2', | |
306 'description': 'His great plugin', | |
307 'mimeTypes': [ | |
308 { 'description': 'More baz Stuff', | |
309 'fileExtensions': [ 'bor' ], | |
310 'mimeType': 'application/x-his-bor' } | |
311 ], | |
312 'enabledMode': 'disabledByPolicy' | |
313 } | |
314 ] | |
315 } | |
316 ] | |
317 }; | |
318 | |
319 /** | |
320 * Takes the |pluginsData| input argument which represents data about the | |
321 * currently installed/running plugins and populates the html jstemplate with | |
322 * that data. It expects an object structure like the above. | |
323 * @param {Object} pluginsData Detailed info about installed plugins | |
324 */ | |
325 function renderTemplate(pluginsData) { | |
326 // This is the javascript code that processes the template: | |
327 var input = new JsEvalContext(pluginsData); | |
328 var output = document.getElementById('pluginTemplate'); | |
329 jstProcess(input, output); | |
330 } | |
331 | |
332 /** | |
333 * Asks the C++ PluginsDOMHandler to get details about the installed plugins and | |
334 * return detailed data about the configuration. The PluginsDOMHandler should | |
335 * reply to returnPluginsData() (below). | |
336 */ | |
337 function requestPluginsData() { | |
338 chrome.send('requestPluginsData', []); | |
339 chrome.send('getShowDetails', []); | |
340 } | |
341 | |
342 function loadShowDetailsFromPrefs(show_details) { | |
343 tmiModeExpanded = show_details; | |
344 document.getElementById('collapse').style.display = | |
345 show_details ? 'inline' : 'none'; | |
346 document.getElementById('expand').style.display = | |
347 show_details ? 'none' : 'inline'; | |
348 | |
349 document.body.className = | |
350 show_details ? 'showTmiMode' : 'hideTmiMode'; | |
351 } | |
352 | |
353 /** | |
354 * Asks the C++ PluginsDOMHandler to show the terms of service (about:terms). | |
355 */ | |
356 function showTermsOfService() { | |
357 chrome.send('showTermsOfService', []); | |
358 } | |
359 | |
360 /** | |
361 * Called by the web_ui_ to re-populate the page with data representing the | |
362 * current state of installed plugins. | |
363 */ | |
364 function returnPluginsData(pluginsData){ | |
365 var bodyContainer = document.getElementById('body-container'); | |
366 var body = document.body; | |
367 | |
368 // Set all page content to be visible so we can measure heights. | |
369 bodyContainer.style.visibility = 'hidden'; | |
370 body.className = ''; | |
371 var slidables = document.getElementsByClassName('showInTmiMode'); | |
372 for (var i = 0; i < slidables.length; i++) | |
373 slidables[i].style.height = 'auto'; | |
374 | |
375 renderTemplate(pluginsData); | |
376 | |
377 // Make sure the left column (with "Description:", "Location:", etc.) is the | |
378 // same size for all plugins. | |
379 var labels = document.getElementsByClassName('plugin-details-label'); | |
380 var maxLabelWidth = 0; | |
381 for (var i = 0; i < labels.length; i++) | |
382 labels[i].style.width = 'auto'; | |
383 for (var i = 0; i < labels.length; i++) | |
384 maxLabelWidth = Math.max(maxLabelWidth, labels[i].offsetWidth); | |
385 for (var i = 0; i < labels.length; i++) | |
386 labels[i].style.width = maxLabelWidth + 'px'; | |
387 | |
388 // Explicitly set the height for each element that wants to be "slid" in and | |
389 // out when the tmiModeExpanded is toggled. | |
390 var slidables = document.getElementsByClassName('showInTmiMode'); | |
391 for (var i = 0; i < slidables.length; i++) | |
392 slidables[i].style.height = slidables[i].offsetHeight + 'px'; | |
393 | |
394 // Reset visibility of page based on the current tmi mode. | |
395 document.getElementById('collapse').style.display = | |
396 tmiModeExpanded ? 'inline' : 'none'; | |
397 document.getElementById('expand').style.display = | |
398 tmiModeExpanded ? 'none' : 'inline'; | |
399 bodyContainer.style.visibility = 'visible'; | |
400 body.className = tmiModeExpanded ? | |
401 'showTmiModeInitial' : 'hideTmiModeInitial'; | |
402 } | |
403 | |
404 /** | |
405 * Handles a 'enable' or 'disable' button getting clicked. | |
406 */ | |
407 function handleEnablePlugin(node, enable, isGroup) { | |
408 // Tell the C++ PluginsDOMHandler to enable/disable the plugin. | |
409 chrome.send('enablePlugin', [String(node.path), String(enable), | |
410 String(isGroup)]); | |
411 } | |
412 | |
413 // Keeps track of whether details have been made visible (expanded) or not. | |
414 var tmiModeExpanded = false; | |
415 | |
416 /* | |
417 * Toggles visibility of details. | |
418 */ | |
419 function toggleTmiMode() { | |
420 tmiModeExpanded = !tmiModeExpanded; | |
421 | |
422 document.getElementById('collapse').style.display = | |
423 tmiModeExpanded ? 'inline' : 'none'; | |
424 document.getElementById('expand').style.display = | |
425 tmiModeExpanded ? 'none' : 'inline'; | |
426 | |
427 document.body.className = | |
428 tmiModeExpanded ? 'showTmiMode' : 'hideTmiMode'; | |
429 | |
430 chrome.send('saveShowDetailsToPrefs', [String(tmiModeExpanded)]); | |
431 } | |
432 | |
433 /** | |
434 * Determines whether a plugin's version should be displayed. | |
435 */ | |
436 function shouldDisplayPluginVersion(plugin) { | |
437 return !!plugin.version && plugin.version != '0'; | |
438 } | |
439 | |
440 /** | |
441 * Determines whether a plugin's description should be displayed. | |
442 */ | |
443 function shouldDisplayPluginDescription(plugin) { | |
444 // Only display the description if it's not blank and if it's not just the | |
445 // name, version, or combination thereof. | |
446 return plugin.description && | |
447 plugin.description != plugin.name && | |
448 plugin.description != plugin.version && | |
449 plugin.description != 'Version ' + plugin.version && | |
450 plugin.description != plugin.name + ' ' + plugin.version; | |
451 } | |
452 | |
453 /** | |
454 * Determines whether a plugin is enabled or not. | |
455 */ | |
456 function isPluginEnabled(plugin) { | |
457 return plugin.enabledMode == 'enabledByUser' || | |
458 plugin.enabledMode == 'enabledByPolicy'; | |
459 } | |
460 | |
461 // Unfortunately, we don't have notifications for plugin (list) status changes | |
462 // (yet), so in the meanwhile just update regularly. | |
463 setInterval(requestPluginsData, 30000); | |
464 | |
465 // Get data and have it displayed upon loading. | |
466 document.addEventListener('DOMContentLoaded', requestPluginsData); | |
467 | |
468 </script> | |
469 </head> | 251 </head> |
470 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> | 252 <body i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize"> |
471 <div id="body-container" style="visibility:hidden"> | 253 <div id="body-container" style="visibility:hidden"> |
472 | 254 |
473 <div id="header"><h1 i18n-content="pluginsTitle">TITLE</h1></div> | 255 <div id="header"><h1 i18n-content="pluginsTitle">TITLE</h1></div> |
474 | 256 |
475 <div id="pluginTemplate"> | 257 <div id="pluginTemplate"> |
476 | 258 |
477 <div id="container" class="vbox-container"> | 259 <div id="container" class="vbox-container"> |
478 <div id="top" class="wbox"> | 260 <div id="top" class="wbox"> |
479 | 261 |
480 <div class="section-header"> | 262 <div class="section-header"> |
481 <table cellpadding="0" cellspacing="0"><tr valign="center"> | 263 <table cellpadding="0" cellspacing="0"><tr valign="center"> |
482 <td> | 264 <td> |
483 <span class="section-header-title" i18n-content="pluginsTitle" | 265 <span class="section-header-title" i18n-content="pluginsTitle" |
484 >TITLE</span> | 266 >TITLE</span> |
485 <span class="section-header-title" | 267 <span class="section-header-title" |
486 jsdisplay="plugins.length > 0">(<span | 268 jsdisplay="plugins.length > 0">(<span |
487 jscontent="plugins.length"></span>)</span> | 269 jscontent="plugins.length"></span>)</span> |
488 </td> | 270 </td> |
489 <td width="18"> | 271 <td width="18"> |
490 <img id="collapse" class="tmi-mode-image" | 272 <img id="collapse" class="tmi-mode-image" style="display:none" |
491 style="display:none" onclick="toggleTmiMode();" | |
492 src="shared/images/minus.png"> | 273 src="shared/images/minus.png"> |
493 <img id="expand" class="tmi-mode-image" | 274 <img id="expand" class="tmi-mode-image" |
494 onclick="toggleTmiMode();" src="shared/images/plus.png"> | 275 src="shared/images/plus.png"> |
495 </td> | 276 </td> |
496 <td> | 277 <td> |
497 <div class="tmi-mode-link"> | 278 <div class="tmi-mode-link"> |
498 <a onclick="toggleTmiMode();" style="cursor: default" | 279 <a id="details-link" style="cursor: default" |
499 i18n-content="pluginsDetailsModeLink">DETAILS</a> | 280 i18n-content="pluginsDetailsModeLink">DETAILS</a> |
500 </div> | 281 </div> |
501 </td> | 282 </td> |
502 </tr></table> | 283 </tr></table> |
503 </div> | 284 </div> |
504 | 285 |
505 </div> | 286 </div> |
506 </div> | 287 </div> |
507 | 288 |
508 <div class="content"> | 289 <div class="content"> |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
571 <td class="plugin-details-label"> </td> | 352 <td class="plugin-details-label"> </td> |
572 <td> | 353 <td> |
573 <span jsdisplay="enabledMode == 'disabledByUser'" | 354 <span jsdisplay="enabledMode == 'disabledByUser'" |
574 i18n-content="pluginDisabled">(DISABLED)</span> | 355 i18n-content="pluginDisabled">(DISABLED)</span> |
575 <span jsdisplay="enabledMode == 'disabledByPolicy'" | 356 <span jsdisplay="enabledMode == 'disabledByPolicy'" |
576 i18n-content="pluginDisabledByPolicy">(DISABLED_BY_POL
ICY)</span> | 357 i18n-content="pluginDisabledByPolicy">(DISABLED_BY_POL
ICY)</span> |
577 <span jsdisplay="enabledMode == 'enabledByPolicy'" | 358 <span jsdisplay="enabledMode == 'enabledByPolicy'" |
578 i18n-content="pluginEnabledByPolicy">(ENABLED_BY_POLIC
Y)</span> | 359 i18n-content="pluginEnabledByPolicy">(ENABLED_BY_POLIC
Y)</span> |
579 <span> | 360 <span> |
580 <a | 361 <a |
| 362 class="disable-plugin-link" |
581 jsvalues=".path:path" | 363 jsvalues=".path:path" |
582 jsdisplay="enabledMode == 'enabledByUser'" | 364 jsdisplay="enabledMode == 'enabledByUser'" |
583 onclick="handleEnablePlugin(this, false, false)" | 365 href="#" |
584 href="javascript:void(0);" | |
585 i18n-content="disable" | 366 i18n-content="disable" |
586 >DISABLE</a> | 367 >DISABLE</a> |
587 <a | 368 <a |
| 369 class="enable-plugin-link" |
588 jsvalues=".path:path" | 370 jsvalues=".path:path" |
589 jsdisplay="enabledMode == 'disabledByUser'" | 371 jsdisplay="enabledMode == 'disabledByUser'" |
590 onclick="handleEnablePlugin(this, true, false)" | 372 href="#" |
591 href="javascript:void(0);" | |
592 i18n-content="enable" | 373 i18n-content="enable" |
593 >ENABLE</a> | 374 >ENABLE</a> |
594 <span | 375 <span |
595 jsdisplay="enabledMode == 'enabledByPolicy'" | 376 jsdisplay="enabledMode == 'enabledByPolicy'" |
596 i18n-content="pluginCannotBeDisabledDueToPolicy" | 377 i18n-content="pluginCannotBeDisabledDueToPolicy" |
597 >CANNOT_DISABLE</span> | 378 >CANNOT_DISABLE</span> |
598 <span | 379 <span |
599 jsdisplay="enabledMode == 'disabledByPolicy'" | 380 jsdisplay="enabledMode == 'disabledByPolicy'" |
600 i18n-content="pluginCannotBeEnabledDueToPolicy" | 381 i18n-content="pluginCannotBeEnabledDueToPolicy" |
601 >CANNOT_ENABLE</span> | 382 >CANNOT_ENABLE</span> |
(...skipping 26 matching lines...) Expand all Loading... |
628 </tr> | 409 </tr> |
629 </table></td> | 410 </table></td> |
630 </tr></table> | 411 </tr></table> |
631 </div> | 412 </div> |
632 </div> | 413 </div> |
633 </div> | 414 </div> |
634 </div> | 415 </div> |
635 <div class="plugin-actions"> | 416 <div class="plugin-actions"> |
636 <span> | 417 <span> |
637 <a | 418 <a |
| 419 class="disable-group-link" |
638 jsvalues=".path:name" | 420 jsvalues=".path:name" |
639 jsdisplay="enabledMode == 'enabledByUser'" | 421 jsdisplay="enabledMode == 'enabledByUser'" |
640 onclick="handleEnablePlugin(this, false, true)" | 422 href="#" |
641 href="javascript:void(0);" | |
642 i18n-content="disable" | 423 i18n-content="disable" |
643 >DISABLE</a> | 424 >DISABLE</a> |
644 <a | 425 <a |
| 426 class="enable-group-link" |
645 jsvalues=".path:name" | 427 jsvalues=".path:name" |
646 jsdisplay="enabledMode == 'disabledByUser'" | 428 jsdisplay="enabledMode == 'disabledByUser'" |
647 onclick="handleEnablePlugin(this, true, true)" | 429 href="#" |
648 href="javascript:void(0);" | |
649 i18n-content="enable" | 430 i18n-content="enable" |
650 >ENABLE</a> | 431 >ENABLE</a> |
651 <span | 432 <span |
652 jsdisplay="enabledMode == 'enabledByPolicy'" | 433 jsdisplay="enabledMode == 'enabledByPolicy'" |
653 i18n-content="pluginCannotBeDisabledDueToPolicy" | 434 i18n-content="pluginCannotBeDisabledDueToPolicy" |
654 >CANNOT_DISABLE</span> | 435 >CANNOT_DISABLE</span> |
655 <span | 436 <span |
656 jsdisplay="enabledMode == 'disabledByPolicy'" | 437 jsdisplay="enabledMode == 'disabledByPolicy'" |
657 i18n-content="pluginCannotBeEnabledDueToPolicy" | 438 i18n-content="pluginCannotBeEnabledDueToPolicy" |
658 >CANNOT_ENABLE</span> | 439 >CANNOT_ENABLE</span> |
659 </span> | 440 </span> |
660 </div> | 441 </div> |
661 </td> | 442 </td> |
662 </tr> | 443 </tr> |
663 </table> | 444 </table> |
664 </div> | 445 </div> |
665 </div> | 446 </div> |
666 </div> | 447 </div> |
667 </div> | 448 </div> |
668 </div> | 449 </div> |
| 450 <script src="chrome://plugins/plugins.js"></script> |
| 451 <script src="chrome://plugins/strings.js"></script> |
| 452 <script src="chrome://resources/js/i18n_template.js"></script> |
| 453 <script src="chrome://resources/js/i18n_process.js"></script> |
| 454 <script src="chrome://resources/js/jstemplate_compiled.js"></script> |
669 </body> | 455 </body> |
670 </html> | 456 </html> |
OLD | NEW |