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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/renderer/resources/plugins/plugin_poster.html

Issue 1407913002: Plugin Power Saver: Fix play-icon positioning when poster specified. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 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
« no previous file with comments | « no previous file | components/plugins/renderer/loadable_plugin_placeholder.cc » ('j') | components/plugins/renderer/loadable_plugin_placeholder.cc » ('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 <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 window.onload = function() { 7 window.onload = function() {
8 if (plugin.didFinishLoading) 8 if (plugin.didFinishLoading)
9 plugin.didFinishLoading(); 9 plugin.didFinishLoading();
10 }; 10 };
(...skipping 16 matching lines...) Expand all
27 background-color: rgba(0, 0, 0, 0.5); 27 background-color: rgba(0, 0, 0, 0.5);
28 height: 100%; 28 height: 100%;
29 left: 0px; 29 left: 0px;
30 position: absolute; 30 position: absolute;
31 top: 0px; 31 top: 0px;
32 width: 100%; 32 width: 100%;
33 z-index: 2; 33 z-index: 2;
34 } 34 }
35 35
36 #plugin-icon { 36 #plugin-icon {
37 display: block;
38 opacity: 0.8; 37 opacity: 0.8;
38 max-height: 100%;
39 max-width: 100%;
39 } 40 }
40 41
41 #plugin-icon:hover { 42 #plugin-icon:hover {
42 opacity: 0.95; 43 opacity: 0.95;
43 } 44 }
44 45
45 #poster { 46 #poster {
46 height: 100%; 47 height: 100%;
47 object-fit: contain; 48 object-fit: contain;
48 width: 100%; 49 width: 100%;
49 z-index: 1; 50 z-index: 1;
50 } 51 }
51 52
52 #inner-container { 53 #inner-container {
53 align-items: center; 54 align-items: center;
54 display: flex; 55 display: flex;
56 height: 100%;
55 justify-content: center; 57 justify-content: center;
56 left: 0px; 58 left: 0px;
59 max-height: 100%;
60 max-width: 100%;
57 position: absolute; 61 position: absolute;
58 top: 0px; 62 top: 0px;
63 width: 100%;
59 z-index: 2; 64 z-index: 2;
60 } 65 }
61 </style> 66 </style>
62 <base i18n-values="href:baseurl"> 67 <base i18n-values="href:baseurl">
63 </head> 68 </head>
64 69
65 <body> 70 <body>
66 <div i18n-values="title:name" id="outer"> 71 <div i18n-values="title:name" id="outer">
67 <img id="poster" i18n-values="srcset:poster"> 72 <img id="poster" i18n-values="srcset:poster">
68 <div id="shielding"></div> 73 <div id="shielding"></div>
69 <div id="inner-container" 74 <div id="inner-container"
70 i18n-values=".style.width:visibleWidth;.style.height:visibleHeight"> 75 i18n-values=".style.width:visibleWidth;.style.height:visibleHeight">
71 <div id="inner"> 76 <img id="plugin-icon" src="plugin_power_saver_play.png" />
72 <img id="plugin-icon" src="plugin_power_saver_play.png"
73 i18n-values=".style.maxWidth:visibleWidth;
74 .style.maxHeight:visibleHeight" />
75 </div>
76 </div> 77 </div>
77 </div> 78 </div>
78 <script> 79 <script>
79 document.getElementById('poster').onerror = function() { 80 document.getElementById('poster').onerror = function() {
80 this.hidden = true; 81 this.hidden = true;
81 }; 82 };
82 83
83 document.getElementById('outer').onclick = function() { 84 document.getElementById('outer').onclick = function() {
84 plugin.load(); 85 plugin.load();
85 }; 86 };
86 87
87 window.setPosterMargin = function(marginLeft, marginTop) { 88 window.resizePoster = function(marginLeft, marginTop, width, height) {
88 var container = document.getElementById('inner-container'); 89 var container = document.getElementById('inner-container');
89 container.style.marginLeft = marginLeft; 90 container.style.marginLeft = marginLeft;
90 container.style.marginTop = marginTop; 91 container.style.marginTop = marginTop;
92 container.style.width = width;
93 container.style.height = height;
91 }; 94 };
92 </script> 95 </script>
93 </body> 96 </body>
94 </html> 97 </html>
OLDNEW
« no previous file with comments | « no previous file | components/plugins/renderer/loadable_plugin_placeholder.cc » ('j') | components/plugins/renderer/loadable_plugin_placeholder.cc » ('J')

Powered by Google App Engine
This is Rietveld 408576698