Cleanup client plugin handling code in the webapp.

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 {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;
   this.desktopHeight = 0;
   this.desktopXDpi = 96;
   this.desktopYDpi = 96;
 
   /** @param {string} iq The Iq stanza received from the host. */
   this.onOutgoingIqHandler = function (iq) {};
   /** @param {string} message Log message. */
@@ skipping 42 matching lines @@
   /** @type {function(boolean)|null} */
   this.onInitializedCallback_ = null;
   /** @type {function(string, string):void} */
   this.onPairingComplete_ = function(clientId, sharedSecret) {};
   /** @type {remoting.ClientSession.PerfStats} */
   this.perfStats_ = new remoting.ClientSession.PerfStats();
 
   /** @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);
 
   if (remoting.settings.CLIENT_PLUGIN_TYPE == 'native') {
     window.setTimeout(this.showPluginForClickToPlay_.bind(this), 500);
   }
 };
 
 /**
  * Set of features for which hasFeature() can be used to test.
@@ skipping 272 matching lines @@
 
     context.putImageData(imageData, 0, 0);
     this.updateMouseCursorImage(canvas.toDataURL(), hotspotX, hotspotY);
   }
 };
 
 /**
  * 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_;
 };
 
 /**
  * @param {function(boolean): void} onDone
  */
 remoting.ClientPlugin.prototype.initialize = function(onDone) {
   if (this.helloReceived_) {
     onDone(true);
   } else {
     this.onInitializedCallback_ = onDone;
@@ skipping 30 matching lines @@
  * @return {boolean} True if the plugin supports the injectKeyEvent API.
  */
 remoting.ClientPlugin.prototype.isInjectKeyEventSupported = function() {
   return this.pluginApiVersion_ >= 6;
 };
 
 /**
  * @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
     // down. Particularly this happens when we receive response to
     // session-terminate stanza.
     console.warn('plugin.onIq is not set so dropping incoming message.');
   }
 };
 
 /**
@@ skipping 15 matching lines @@
 remoting.ClientPlugin.prototype.connect = function(
     hostJid, hostPublicKey, localJid, sharedSecret,
     authenticationMethods, authenticationTag,
     clientPairingId, clientPairedSecret) {
   var keyFilter = '';
   if (remoting.platformIsMac()) {
     keyFilter = 'mac';
   } 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,
         localJid: localJid,
         sharedSecret: sharedSecret,
         authenticationMethods: authenticationMethods,
         authenticationTag: authenticationTag,
         capabilities: this.capabilities_.join(" "),
         clientPairingId: clientPairingId,
         clientPairedSecret: clientPairedSecret,
         keyFilter: keyFilter
       }
     }));
 };
 
 /**
  * Release all currently pressed keys.
  */
 remoting.ClientPlugin.prototype.releaseAllKeys = function() {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'releaseAllKeys', data: {} }));
 };
 
 /**
  * Send a key event to the host.
  *
  * @param {number} usbKeycode The USB-style code of the key to inject.
  * @param {boolean} pressed True to inject a key press, False for a release.
  */
 remoting.ClientPlugin.prototype.injectKeyEvent =
     function(usbKeycode, pressed) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'injectKeyEvent', data: {
           'usbKeycode': usbKeycode,
           'pressed': pressed}
       }));
 };
 
 /**
  * Remap one USB keycode to another in all subsequent key events.
  *
  * @param {number} fromKeycode The USB-style code of the key to remap.
  * @param {number} toKeycode The USB-style code to remap the key to.
  */
 remoting.ClientPlugin.prototype.remapKey =
     function(fromKeycode, toKeycode) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'remapKey', data: {
           'fromKeycode': fromKeycode,
           'toKeycode': toKeycode}
       }));
 };
 
 /**
  * Enable/disable redirection of the specified key to the web-app.
  *
  * @param {number} keycode The USB-style code of the key.
  * @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}
       }));
 };
 
 /**
  * Returns an associative array with a set of stats for this connecton.
  *
  * @return {remoting.ClientSession.PerfStats} The connection statistics.
  */
 remoting.ClientPlugin.prototype.getPerfStats = function() {
   return this.perfStats_;
 };
 
 /**
  * Sends a clipboard item to the host.
  *
  * @param {string} mimeType The MIME type of the clipboard item.
  * @param {string} item The clipboard item.
  */
 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 }}));
 };
 
 /**
  * Notifies the host that the client has the specified size and pixel density.
  *
  * @param {number} width The available client width in DIPs.
  * @param {number} height The available client height in DIPs.
  * @param {number} device_scale The number of device pixels per DIP.
  */
 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),
                   x_dpi: dpi, y_dpi: dpi }}));
   }
 };
 
 /**
  * Requests that the host pause or resume sending video updates.
  *
  * @param {boolean} pause True to suspend video updates, false otherwise.
  */
 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 }}));
   }
 };
 
 /**
  * Requests that the host pause or resume sending audio updates.
  *
  * @param {boolean} pause True to suspend audio updates, false otherwise.
  */
 remoting.ClientPlugin.prototype.pauseAudio =
     function(pause) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.PAUSE_AUDIO)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'pauseAudio', data: { pause: pause }}));
 };
 
 /**
  * Requests that the host configure the video codec for lossless encode.
  *
  * @param {boolean} wantLossless True to request lossless encoding.
  */
 remoting.ClientPlugin.prototype.setLosslessEncode =
     function(wantLossless) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.VIDEO_CONTROL)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'videoControl', data: { losslessEncode: wantLossless }}));
 };
 
 /**
  * Requests that the host configure the video codec for lossless color.
  *
  * @param {boolean} wantLossless True to request lossless color.
  */
 remoting.ClientPlugin.prototype.setLosslessColor =
     function(wantLossless) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.VIDEO_CONTROL)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'videoControl', data: { losslessColor: wantLossless }}));
 };
 
 /**
  * Called when a PIN is obtained from the user.
  *
  * @param {string} pin The PIN.
  */
 remoting.ClientPlugin.prototype.onPinFetched =
     function(pin) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.ASYNC_PIN)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'onPinFetched', data: { pin: pin }}));
 };
 
 /**
  * Tells the plugin to ask for the PIN asynchronously.
  */
 remoting.ClientPlugin.prototype.useAsyncPinDialog =
     function() {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.ASYNC_PIN)) {
     return;
   }
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'useAsyncPinDialog', data: {} }));
 };
 
 /**
  * Sets the third party authentication token and shared secret.
  *
  * @param {string} token The token received from the token URL.
  * @param {string} sharedSecret Shared secret received from the token URL.
  */
 remoting.ClientPlugin.prototype.onThirdPartyTokenFetched = function(
     token, sharedSecret) {
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
     { method: 'onThirdPartyTokenFetched',
       data: { token: token, sharedSecret: sharedSecret}}));
 };
 
 /**
  * Request pairing with the host for PIN-less authentication.
  *
  * @param {string} clientName The human-readable name of the client.
  * @param {function(string, string):void} onDone, Callback to receive the
  *     client id and shared secret when they are available.
  */
 remoting.ClientPlugin.prototype.requestPairing =
     function(clientName, onDone) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.PINLESS_AUTH)) {
     return;
   }
   this.onPairingComplete_ = onDone;
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'requestPairing', data: { clientName: clientName } }));
 };
 
 /**
  * Send an extension message to the host.
  *
  * @param {string} type The message type.
  * @param {string} message The message payload.
  */
 remoting.ClientPlugin.prototype.sendClientMessage =
     function(type, message) {
   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 } }));
 
 };
 
 /**
  * Request MediaStream-based rendering.
  *
  * @param {remoting.MediaSourceRenderer} mediaSourceRenderer
  */
 remoting.ClientPlugin.prototype.enableMediaSourceRendering =
     function(mediaSourceRenderer) {
   if (!this.hasFeature(remoting.ClientPlugin.Feature.MEDIA_SOURCE_RENDERING)) {
     return;
   }
   this.mediaSourceRenderer_ = mediaSourceRenderer;
-  this.plugin.postMessage(JSON.stringify(
+  this.plugin_.postMessage(JSON.stringify(
       { method: 'enableMediaSourceRendering', data: {} }));
 };
 
 /**
  * If we haven't yet received a "hello" message from the plugin, change its
  * size so that the user can confirm it if click-to-play is enabled, or can
  * see the "this plugin is disabled" message if it is actually disabled.
  * @private
  */
 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';
   }
 };
 
 /**
  * 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 = '';
+  this.plugin_.style.width = '';
+  this.plugin_.style.height = '';
+  this.plugin_.style.top = '';
+  this.plugin_.style.left = '';
+  this.plugin_.style.position = '';
 };