| OLD | NEW |
|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <meta name="viewport" content="width=device-width, user-scalable=no"> | 5 <meta name="viewport" content="width=device-width, user-scalable=no"> |
| 6 <script> | 6 <script> |
| 7 function notifyDidFinishLoading() { | 7 window.onload = function() { |
| 8 if (plugin.didFinishLoading) | 8 if (plugin.didFinishLoading) |
| 9 plugin.didFinishLoading(); | 9 plugin.didFinishLoading(); |
| 10 } | 10 }; |
| 11 | 11 |
| 12 document.onkeydown = function(e) { | 12 window.onkeydown = function(e) { |
| 13 if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') { | 13 if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') { |
| 14 plugin.load(); | 14 plugin.load(); |
| 15 e.preventDefault(); | 15 e.preventDefault(); |
| 16 } | 16 } |
| 17 }; | 17 }; |
| 18 </script> | 18 </script> |
| 19 <link rel="stylesheet" href="plugin_placeholders.css"></link> | 19 <link rel="stylesheet" href="plugin_placeholders.css"></link> |
| 20 <style> | 20 <style> |
| 21 #outer { | 21 #outer { |
| 22 position: relative; | |
| 23 border: none; | 22 border: none; |
| 24 cursor: pointer; | 23 cursor: pointer; |
| 24 position: relative; |
| 25 } | 25 } |
| 26 | 26 |
| 27 #shielding { | 27 #shielding { |
| 28 background-color: rgba(0, 0, 0, 0.5); | 28 background-color: rgba(0, 0, 0, 0.5); |
| 29 height: 100%; |
| 30 left: 0px; |
| 29 position: absolute; | 31 position: absolute; |
| 30 top: 0px; | 32 top: 0px; |
| 31 left: 0px; | |
| 32 height: 100%; | |
| 33 width: 100%; | 33 width: 100%; |
| 34 z-index: 2; | 34 z-index: 2; |
| 35 } | 35 } |
| 36 | 36 |
| 37 #plugin_icon { | 37 #plugin_icon { |
| 38 opacity: 0.8; | 38 opacity: 0.8; |
| 39 } | 39 } |
| 40 | 40 |
| 41 #plugin_icon:hover { | 41 #plugin_icon:hover { |
| 42 opacity: 0.95; | 42 opacity: 0.95; |
| 43 } | 43 } |
| 44 | 44 |
| 45 #poster { | 45 #poster { |
| 46 height: 100%; | 46 height: 100%; |
| 47 object-fit: contain; |
| 47 width: 100%; | 48 width: 100%; |
| 48 z-index: 1; | 49 z-index: 1; |
| 49 } | 50 } |
| 50 | 51 |
| 51 #inner_container { | 52 #inner_container { |
| 52 height: 100%; | 53 height: 100%; |
| 54 position: relative; |
| 53 width: 100%; | 55 width: 100%; |
| 54 position: relative; | |
| 55 } | 56 } |
| 56 | 57 |
| 57 #inner { | 58 #inner { |
| 58 margin-top: -25px; | 59 margin-top: -25px; |
| 59 } | 60 } |
| 60 </style> | 61 </style> |
| 61 <base i18n-values="href:baseurl"> | 62 <base i18n-values="href:baseurl"> |
| 62 </head> | 63 </head> |
| 63 | 64 |
| 64 <body onload="notifyDidFinishLoading();"> | 65 <body> |
| 65 <div i18n-values="title:name" id="outer" onclick="plugin.load()"> | 66 <div i18n-values="title:name" id="outer"> |
| 66 <img id="poster" i18n-values="srcset:poster"> | 67 <img id="poster" i18n-values="srcset:poster"> |
| 67 <div id="shielding"> | 68 <div id="shielding"> |
| 68 <div id="inner_container" | 69 <div id="inner_container" |
| 69 i18n-values=".style.width:visibleWidth;.style.height:visibleHeight"> | 70 i18n-values=".style.width:visibleWidth;.style.height:visibleHeight"> |
| 70 <div id="inner"> | 71 <div id="inner"> |
| 71 <img id="plugin_icon" src="plugin_power_saver_play.png" /> | 72 <img id="plugin_icon" src="plugin_power_saver_play.png" /> |
| 72 </div> | 73 </div> |
| 73 </div> | 74 </div> |
| 74 </div> | 75 </div> |
| 75 </div> | 76 </div> |
| 77 <script> |
| 78 document.getElementById('poster').onerror = function() { |
| 79 this.hidden = true; |
| 80 }; |
| 81 |
| 82 document.getElementById('outer').onclick = function() { |
| 83 plugin.load(); |
| 84 }; |
| 85 </script> |
| 76 </body> | 86 </body> |
| 77 </html> | 87 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1085993003:
Plugin Power Saver: Make posters work right when image is 404 Not Found. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@0263-plugin-power-saver-heuristic-tests