Preload PNaCl plugin when the webapp is started.

remoting/webapp/client_plugin.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview
  * Class that wraps low-level details of interacting with the client plugin.
  *
  * This abstracts a <embed> element and controls the plugin which does
  * the actual remoting work. It also handles differences between
  * client plugins versions when it is necessary.
  */
 
 'use strict';
 
 /** @suppress {duplicate} */
 var remoting = remoting || {};
 
 /**
  * @param {Element} container The container for the embed element.
  * @param {function(string, string):boolean} onExtensionMessage The handler for
  *     protocol extension messages. Returns true if a message is recognized;
  *     false otherwise.
  * @constructor
  */
 remoting.ClientPlugin = function(container, onExtensionMessage) {
-  this.plugin_ = /** @type {remoting.ViewerPlugin} */
-      document.createElement('embed');
-
+  this.plugin_ = remoting.ClientPlugin.createPluginElement_();
   this.plugin_.id = 'session-client-plugin';
-  if (remoting.settings.CLIENT_PLUGIN_TYPE == 'pnacl') {
-    this.plugin_.src = 'remoting_client_pnacl.nmf';
-    this.plugin_.type = 'application/x-pnacl';
-  } else if (remoting.settings.CLIENT_PLUGIN_TYPE == 'nacl') {
-    this.plugin_.src = 'remoting_client_nacl.nmf';
-    this.plugin_.type = 'application/x-nacl';
-  } else {
-    this.plugin_.src = 'about://none';
-    this.plugin_.type = 'application/vnd.chromium.remoting-viewer';
-  }
-
-  this.plugin_.width = 0;
-  this.plugin_.height = 0;
-  this.plugin_.tabIndex = 0;  // Required, otherwise focus() doesn't work.
   container.appendChild(this.plugin_);
 
   this.onExtensionMessage_ = onExtensionMessage;
 
   this.desktopWidth = 0;
   this.desktopHeight = 0;
   this.desktopXDpi = 96;
   this.desktopYDpi = 96;
 
   /** @param {string} iq The Iq stanza received from the host. */
@@ skipping 54 matching lines @@
   this.plugin_.addEventListener('message', function(event) {
       that.handleMessage_(event.data);
     }, false);
 
   if (remoting.settings.CLIENT_PLUGIN_TYPE == 'native') {
     window.setTimeout(this.showPluginForClickToPlay_.bind(this), 500);
   }
 };
 
 /**
+ * Creates plugin element without adding it to a container.
+ *
+ * @return {remoting.ViewerPlugin} Plugin element
+ */
+remoting.ClientPlugin.createPluginElement_ = function() {
+  var plugin = /** @type {remoting.ViewerPlugin} */
+      document.createElement('embed');
+  if (remoting.settings.CLIENT_PLUGIN_TYPE == 'pnacl') {
+    plugin.src = 'remoting_client_pnacl.nmf';
+    plugin.type = 'application/x-pnacl';
+  } else if (remoting.settings.CLIENT_PLUGIN_TYPE == 'nacl') {
+    plugin.src = 'remoting_client_nacl.nmf';
+    plugin.type = 'application/x-nacl';
+  } else {
+    plugin.src = 'about://none';
+    plugin.type = 'application/vnd.chromium.remoting-viewer';
+  }
+  plugin.width = 0;
+  plugin.height = 0;
+  plugin.tabIndex = 0;  // Required, otherwise focus() doesn't work.
+  return plugin;
+}
+
+/**
+ * Preloads the plugin to make instantiation faster when the user tries
+ * to connect.
+ */
+remoting.ClientPlugin.preload = function() {
+  if (remoting.settings.CLIENT_PLUGIN_TYPE != 'pnacl')
+    return;
+
+  document.body.appendChild(remoting.ClientPlugin.createPluginElement_());

[Wez, 2014/08/12 22:03:31]

Do we need to make sure the plugin is hidden?

[Jamie, 2014/08/12 22:35:58]

We'll end up with 2 plugins; is that okay? It might be cleaner to set an onLoad
handler on the element (or some other mechanism of determining when it's ready).
The handler would delete the element, and we shouldn't create the real plugin
until the pre-load one is deleted. WDYT?

[Jamie, 2014/08/12 22:35:58]

It mustn't have the hidden attribute set, or Chrome won't load it. We create it
0x0 instead.

[Sergey Ulanov, 2014/08/15 01:00:17]

Yes, the plugin handles multiple instances just fine.
It's not really necessary to block the creation of the real instance on the
preloading one - they should not interfere with each other. If user tries to
connect while chrome still compiles the plugin then chrome will wait until it's
compiled before it creates actual plugin instances (both instances will run in
the same process). I've added loadend even handled that deletes the plugin after
it's loaded. It doesn't look like it's worth keeping it around to use it later -
that would increase complexity here without much benefit (and we still need to
reset the plugin, e.g. for repeated connections).

+}
+
+/**
  * Set of features for which hasFeature() can be used to test.
  *
  * @enum {string}
  */
 remoting.ClientPlugin.Feature = {
   INJECT_KEY_EVENT: 'injectKeyEvent',
   NOTIFY_CLIENT_RESOLUTION: 'notifyClientResolution',
   ASYNC_PIN: 'asyncPin',
   PAUSE_VIDEO: 'pauseVideo',
   PAUSE_AUDIO: 'pauseAudio',
@@ skipping 652 matching lines @@
  * Undo the CSS rules needed to make the plugin clickable for click-to-play.
  * @private
  */
 remoting.ClientPlugin.prototype.hidePluginForClickToPlay_ = function() {
   this.plugin_.style.width = '';
   this.plugin_.style.height = '';
   this.plugin_.style.top = '';
   this.plugin_.style.left = '';
   this.plugin_.style.position = '';
 };