Cleanup client plugin handling code in the webapp.

remoting/webapp/client_plugin.js

Index: remoting/webapp/client_plugin.js
diff --git a/remoting/webapp/client_plugin.js b/remoting/webapp/client_plugin.js
index 7b854a20698c7c7f01b840dfca33f21375e990fb..181abcc83e5800433af723d752f46e6acd1cc128 100644
--- a/remoting/webapp/client_plugin.js
+++ b/remoting/webapp/client_plugin.js
@@ -17,14 +17,33 @@
 var remoting = remoting || {};
 
 /**
- * @param {remoting.ViewerPlugin} plugin The plugin embed element.
+ * @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(plugin, onExtensionMessage) {
-  this.plugin = plugin;
+remoting.ClientPlugin = function(container, onExtensionMessage) {
+  this.plugin_ = /** @type {remoting.ViewerPlugin} */
+      document.createElement('embed');
+
+  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;
@@ -87,7 +106,7 @@ remoting.ClientPlugin = function(plugin, onExtensionMessage) {
   /** @type {remoting.ClientPlugin} */
   var that = this;
   /** @param {Event} event Message event from the plugin. */
-  this.plugin.addEventListener('message', function(event) {
+  this.plugin_.addEventListener('message', function(event) {
       that.handleMessage_(event.data);
     }, false);
 
@@ -380,14 +399,17 @@ remoting.ClientPlugin.prototype.handleMessageMethod_ = function(message) {
  * Deletes the plugin.
  */
 remoting.ClientPlugin.prototype.cleanup = function() {
-  this.plugin.parentNode.removeChild(this.plugin);
+  if (this.plugin_) {
+    this.plugin_.parentNode.removeChild(this.plugin_);
+    this.plugin_ = null;
+  }
 };
 
 /**
- * @return {HTMLEmbedElement} HTML element that correspods to the plugin.
+ * @return {HTMLEmbedElement} HTML element that corresponds to the plugin.
  */
 remoting.ClientPlugin.prototype.element = function() {
-  return this.plugin;
+  return this.plugin_;
 };
 
 /**
@@ -438,8 +460,8 @@ remoting.ClientPlugin.prototype.isInjectKeyEventSupported = function() {
  * @param {string} iq Incoming IQ stanza.
  */
 remoting.ClientPlugin.prototype.onIncomingIq = function(iq) {
-  if (this.plugin && this.plugin.postMessage) {
-    this.plugin.postMessage(JSON.stringify(
+  if (this.plugin_ && this.plugin_.postMessage) {
+    this.plugin_.postMessage(JSON.stringify(
         { method: 'incomingIq', data: { iq: iq } }));
   } else {
     // plugin.onIq may not be set after the plugin has been shut
@@ -475,9 +497,9 @@ remoting.ClientPlugin.prototype.connect = function(
   } else if (remoting.platformIsChromeOS()) {
     keyFilter = 'cros';
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'delegateLargeCursors', data: {} }));
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
     { method: 'connect', data: {
         hostJid: hostJid,
         hostPublicKey: hostPublicKey,
@@ -497,7 +519,7 @@ remoting.ClientPlugin.prototype.connect = function(
  * Release all currently pressed keys.
  */
 remoting.ClientPlugin.prototype.releaseAllKeys = function() {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'releaseAllKeys', data: {} }));
 };
 
@@ -509,7 +531,7 @@ remoting.ClientPlugin.prototype.releaseAllKeys = function() {
  */
 remoting.ClientPlugin.prototype.injectKeyEvent =
     function(usbKeycode, pressed) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'injectKeyEvent', data: {
           'usbKeycode': usbKeycode,
           'pressed': pressed}
@@ -524,7 +546,7 @@ remoting.ClientPlugin.prototype.injectKeyEvent =
  */
 remoting.ClientPlugin.prototype.remapKey =
     function(fromKeycode, toKeycode) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'remapKey', data: {
           'fromKeycode': fromKeycode,
           'toKeycode': toKeycode}
@@ -538,7 +560,7 @@ remoting.ClientPlugin.prototype.remapKey =
  * @param {Boolean} trap True to enable trapping, False to disable.
  */
 remoting.ClientPlugin.prototype.trapKey = function(keycode, trap) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'trapKey', data: {
           'keycode': keycode,
           'trap': trap}
@@ -564,7 +586,7 @@ remoting.ClientPlugin.prototype.sendClipboardItem =
     function(mimeType, item) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.SEND_CLIPBOARD_ITEM))
     return;
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'sendClipboardItem',
         data: { mimeType: mimeType, item: item }}));
 };
@@ -580,7 +602,7 @@ remoting.ClientPlugin.prototype.notifyClientResolution =
     function(width, height, device_scale) {
   if (this.hasFeature(remoting.ClientPlugin.Feature.NOTIFY_CLIENT_RESOLUTION)) {
     var dpi = Math.floor(device_scale * 96);
-    this.plugin.postMessage(JSON.stringify(
+    this.plugin_.postMessage(JSON.stringify(
         { method: 'notifyClientResolution',
           data: { width: Math.floor(width * device_scale),
                   height: Math.floor(height * device_scale),
@@ -596,10 +618,10 @@ remoting.ClientPlugin.prototype.notifyClientResolution =
 remoting.ClientPlugin.prototype.pauseVideo =
     function(pause) {
   if (this.hasFeature(remoting.ClientPlugin.Feature.VIDEO_CONTROL)) {
-    this.plugin.postMessage(JSON.stringify(
+    this.plugin_.postMessage(JSON.stringify(
         { method: 'videoControl', data: { pause: pause }}));
   } else if (this.hasFeature(remoting.ClientPlugin.Feature.PAUSE_VIDEO)) {
-    this.plugin.postMessage(JSON.stringify(
+    this.plugin_.postMessage(JSON.stringify(
         { method: 'pauseVideo', data: { pause: pause }}));
   }
 };
@@ -614,7 +636,7 @@ remoting.ClientPlugin.prototype.pauseAudio =
   if (!this.hasFeature(remoting.ClientPlugin.Feature.PAUSE_AUDIO)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'pauseAudio', data: { pause: pause }}));
 };
 
@@ -628,7 +650,7 @@ remoting.ClientPlugin.prototype.setLosslessEncode =
   if (!this.hasFeature(remoting.ClientPlugin.Feature.VIDEO_CONTROL)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'videoControl', data: { losslessEncode: wantLossless }}));
 };
 
@@ -642,7 +664,7 @@ remoting.ClientPlugin.prototype.setLosslessColor =
   if (!this.hasFeature(remoting.ClientPlugin.Feature.VIDEO_CONTROL)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'videoControl', data: { losslessColor: wantLossless }}));
 };
 
@@ -656,7 +678,7 @@ remoting.ClientPlugin.prototype.onPinFetched =
   if (!this.hasFeature(remoting.ClientPlugin.Feature.ASYNC_PIN)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'onPinFetched', data: { pin: pin }}));
 };
 
@@ -668,7 +690,7 @@ remoting.ClientPlugin.prototype.useAsyncPinDialog =
   if (!this.hasFeature(remoting.ClientPlugin.Feature.ASYNC_PIN)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'useAsyncPinDialog', data: {} }));
 };
 
@@ -680,7 +702,7 @@ remoting.ClientPlugin.prototype.useAsyncPinDialog =
  */
 remoting.ClientPlugin.prototype.onThirdPartyTokenFetched = function(
     token, sharedSecret) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
     { method: 'onThirdPartyTokenFetched',
       data: { token: token, sharedSecret: sharedSecret}}));
 };
@@ -698,7 +720,7 @@ remoting.ClientPlugin.prototype.requestPairing =
     return;
   }
   this.onPairingComplete_ = onDone;
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'requestPairing', data: { clientName: clientName } }));
 };
 
@@ -713,7 +735,7 @@ remoting.ClientPlugin.prototype.sendClientMessage =
   if (!this.hasFeature(remoting.ClientPlugin.Feature.EXTENSION_MESSAGE)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'extensionMessage',
         data: { type: type, data: message } }));
 
@@ -730,7 +752,7 @@ remoting.ClientPlugin.prototype.enableMediaSourceRendering =
     return;
   }
   this.mediaSourceRenderer_ = mediaSourceRenderer;
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'enableMediaSourceRendering', data: {} }));
 };
 
@@ -744,14 +766,14 @@ remoting.ClientPlugin.prototype.showPluginForClickToPlay_ = function() {
   if (!this.helloReceived_) {
     var width = 200;
     var height = 200;
-    this.plugin.style.width = width + 'px';
-    this.plugin.style.height = height + 'px';
+    this.plugin_.style.width = width + 'px';
+    this.plugin_.style.height = height + 'px';
     // Center the plugin just underneath the "Connnecting..." dialog.
     var dialog = document.getElementById('client-dialog');
     var dialogRect = dialog.getBoundingClientRect();
-    this.plugin.style.top = (dialogRect.bottom + 16) + 'px';
-    this.plugin.style.left = (window.innerWidth - width) / 2 + 'px';
-    this.plugin.style.position = 'fixed';
+    this.plugin_.style.top = (dialogRect.bottom + 16) + 'px';
+    this.plugin_.style.left = (window.innerWidth - width) / 2 + 'px';
+    this.plugin_.style.position = 'fixed';
   }
 };
 
@@ -760,9 +782,9 @@ remoting.ClientPlugin.prototype.showPluginForClickToPlay_ = function() {
  * @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 = '';
+  this.plugin_.style.width = '';
+  this.plugin_.style.height = '';
+  this.plugin_.style.top = '';
+  this.plugin_.style.left = '';
+  this.plugin_.style.position = '';
 };