Plugin Power Saver: Make posters work right when image is 404 Not Found.

Currently, when a poster image is specified that's 404 Not Found, or too small, the placeholder can become too small and unclickable. This change forces the placeholder HTML to expand to the size of the WebViewPlugin. BUG=475653 Review URL: https://codereview.chromium.org/1085993003 Cr-Commit-Position: refs/heads/master@{#326897}

Plugin Power Saver: Make posters work right when image is 404 Not Found.
Currently, when a poster image is specified that's 404 Not Found, or too small, the placeholder can become too small and unclickable. This change forces the placeholder HTML to expand to the size of the WebViewPlugin. BUG=475653 Review URL: https://codereview.chromium.org/1085993003 Cr-Commit-Position: refs/heads/master@{#326897}
8d89f69f · tommycli · Commit bot · 5ad034ec · 8d89f69f · 8d89f69f
Commit 8d89f69f authored Apr 24, 2015 by tommycli Committed by Commit bot Apr 24, 2015
3 changed files
--- a/chrome/browser/plugins/plugin_power_saver_browsertest.cc
+++ b/chrome/browser/plugins/plugin_power_saver_browsertest.cc
@@ -136,6 +136,17 @@ IN_PROC_BROWSER_TEST_F(PluginPowerSaverBrowserTest, LargePluginsUsePosters) {
  EXPECT_TRUE(IsPluginPeripheral("plugin"));
 }

+IN_PROC_BROWSER_TEST_F(PluginPowerSaverBrowserTest, SmallPluginWithPoster) {
+  LoadHTML(
+      "<object id='plugin' type='application/x-ppapi-tests' "
+      "    width='400' height='100'>"
+      "  <param name='poster' value='snapshot1x.png 1x, snapshot2x.png 2x' />"
+      "</object>");
+  EXPECT_TRUE(IsPluginPeripheral("plugin"));
+
+  SimulateClickAndAwaitMarkedEssential("plugin", gfx::Point(50, 50));
+}
+
 IN_PROC_BROWSER_TEST_F(PluginPowerSaverBrowserTest, OriginWhitelisting) {
  LoadHTML(
      "<object id='plugin1' data='http://otherorigin.com/fake1.swf' "

--- a/chrome/renderer/resources/plugin_placeholders.css
+++ b/chrome/renderer/resources/plugin_placeholders.css
@@ -2,12 +2,14 @@
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

-body {
+html, body {
+  -webkit-user-select: none;
  font-family: sans-serif;
+  height: 100%;
  margin: 0;
  overflow: hidden;
  text-align: center;
-  -webkit-user-select: none;
+  width: 100%;
 }

 h1 {
@@ -37,33 +39,33 @@ p {
 }

 #inner {
-  position: relative;
  height: 100%;
-  width: 100%;
-  top: 50%;
 <if expr="not is_android">
  margin-top: -70px;
 </if>
 <if expr="is_android">
  margin-top: -14px;
 </if>
+  position: relative;
+  top: 50%;
+  width: 100%;
 }

 #close {
-<if expr="not is_android">
-  visibility: hidden;
-</if>
-  cursor: pointer;
-  position: absolute;
-  right: 3px;
-  top: 3px;
-  height: 14px;
-  width: 14px;
  background-image: -webkit-image-set(
      url(../../../ui/resources/default_100_percent/close_2.png) 1x,
      url(../../../ui/resources/default_200_percent/close_2.png) 2x);
  background-position: right top;
  background-repeat: no-repeat;
+  cursor: pointer;
+  height: 14px;
+  position: absolute;
+  right: 3px;
+  top: 3px;
+<if expr="not is_android">
+  visibility: hidden;
+</if>
+  width: 14px;
 }

 #close:hover {

--- a/chrome/renderer/resources/plugin_poster.html
+++ b/chrome/renderer/resources/plugin_poster.html
@@ -4,32 +4,32 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no">
 <script>
-function notifyDidFinishLoading() {
+  window.onload = function() {
    if (plugin.didFinishLoading)
      plugin.didFinishLoading();
-}
+  };

-document.onkeydown = function(e) {
+  window.onkeydown = function(e) {
    if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') {
      plugin.load();
      e.preventDefault();
    }
-};
+  };
 </script>
 <link rel="stylesheet" href="plugin_placeholders.css"></link>
 <style>
 #outer {
-  position: relative;
  border: none;
  cursor: pointer;
+  position: relative;
 }

 #shielding {
  background-color: rgba(0, 0, 0, 0.5);
+  height: 100%;
+  left: 0px;
  position: absolute;
  top: 0px;
-  left: 0px;
-  height: 100%;
  width: 100%;
  z-index: 2;
 }
@@ -44,14 +44,15 @@ document.onkeydown = function(e) {

 #poster {
  height: 100%;
+  object-fit: contain;
  width: 100%;
  z-index: 1;
 }

 #inner_container {
  height: 100%;
-  width: 100%;
  position: relative;
+  width: 100%;
 }

 #inner {
@@ -61,8 +62,8 @@ document.onkeydown = function(e) {
 <base i18n-values="href:baseurl">
 </head>

-<body onload="notifyDidFinishLoading();">
-  <div i18n-values="title:name" id="outer" onclick="plugin.load()">
+<body>
+  <div i18n-values="title:name" id="outer">
    <img id="poster" i18n-values="srcset:poster">
    <div id="shielding">
      <div id="inner_container"
@@ -73,5 +74,14 @@ document.onkeydown = function(e) {
      </div>
    </div>
  </div>
+  <script>
+    document.getElementById('poster').onerror = function() {
+      this.hidden = true;
+    };
+
+    document.getElementById('outer').onclick = function() {
+      plugin.load();
+    };
+  </script>
 </body>
 </html>