Move plugin placeholder style to CSS, and allow it to bypass main world CSP.

Source/core/html/shadow/PluginPlaceholderElement.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 installClass('PluginPlaceholderElement', function(PluginPlaceholderElementPrototype) {
     PluginPlaceholderElementPrototype.createdCallback = function() {
-        // FIXME: Move style out of script and into CSS.
+        this.id = 'plugin-placeholder';
 
-        this.id = 'plugin-placeholder';
-        this.style.width = '100%';
-        this.style.height = '100%';
-        this.style.overflow = 'hidden';
-        this.style.display = 'flex';
-        this.style.alignItems = 'center';
-        this.style.backgroundColor = 'gray';
-        this.style.font = '12px -webkit-control';
+        var styleElement = document.createElement('style');
+        styleElement.textContent = loadPlatformResource('PluginPlaceholderElement.css');

[haraken, 2014/10/04 00:56:20]

Just to confirm: loadPlatformResource takes a relative path, right?

[jbroman, 2014/10/04 03:36:06]

At the moment, it passes the path to Platform::loadResource, which is mapped to
data via a map in content::BlinkPlatformImpl (from a name to a resource ID), and
in blink_resources.grd (from a resource ID to a source filename).

The existing convention for resource names is filenames without any leading
path, which is why this does not need qualification.

(Unless vivekg's effort to refactor this mapping lands, this patch will be
broken into three to include the Chromium-side patch. But two of those will be
trivial. The Chromium side will look roughly like
https://codereview.chromium.org/556793006/, but with CSS instead of JS.)

 
         var contentElement = document.createElement('div');
         contentElement.id = 'plugin-placeholder-content';
         contentElement.style.textAlign = 'center';
         contentElement.style.margin = 'auto';
 
         var messageElement = document.createElement('div');
         messageElement.id = 'plugin-placeholder-message';
 
         contentElement.appendChild(messageElement);
+        this.appendChild(styleElement);
         this.appendChild(contentElement);
 
         this.messageElement = messageElement;
     };
 
     Object.defineProperty(PluginPlaceholderElementPrototype, 'message', {
         get: function() { return this.messageElement.textContent; },
         set: function(message) { this.messageElement.textContent = message; },
     });
 });