Cleanup client plugin handling code in the webapp.

Previously the <embed> element was created in client_session.js , while
it's owned by the ClientPlugin object. Moved plugin creation code where
it belongs, to client_plugin.js .

R=jamiewalch@chromium.org

Review URL: https://codereview.chromium.org/469453003

Cr-Commit-Position: refs/heads/master@{#289323}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@289323 0039d316-1c4b-4281-b951-d872f2087c98

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 = '';
 };

remoting/webapp/client_session.js

@@ -355,13 +355,6 @@ remoting.ClientSession.KEY_REMAP_KEYS = 'remapKeys';
 remoting.ClientSession.KEY_RESIZE_TO_CLIENT = 'resizeToClient';
 remoting.ClientSession.KEY_SHRINK_TO_FIT = 'shrinkToFit';
 
-/**
- * The id of the client plugin
- *
- * @const
- */
-remoting.ClientSession.prototype.PLUGIN_ID = 'session-client-plugin';
-
 /**
  * Set of capabilities for which hasCapability_() can be used to test.
  *
@@ -397,39 +390,6 @@ remoting.ClientSession.prototype.hasCapability_ = function(capability) {
   return this.capabilities_.indexOf(capability) > -1;
 };
 
-/**
- * @param {string} id Id to use for the plugin element .
- * @param {function(string, string):boolean} onExtensionMessage The handler for
- *     protocol extension messages. Returns true if a message is recognized;
- *     false otherwise.
- * @return {remoting.ClientPlugin} Create plugin object for the locally
- * installed plugin.
- */
-remoting.ClientSession.prototype.createClientPlugin_ =
-    function(id, onExtensionMessage) {
-  var plugin = /** @type {remoting.ViewerPlugin} */
-      document.createElement('embed');
-
-  plugin.id = id;
-  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.
-  this.container_.querySelector('.client-plugin-container').appendChild(plugin);
-
-  return new remoting.ClientPlugin(plugin, onExtensionMessage);
-};
-
 /**
  * Callback function called when the plugin element gets focus.
  */
@@ -449,8 +409,7 @@ remoting.ClientSession.prototype.pluginLostFocus_ = function() {
       // Due to crbug.com/246335, we can't restore the focus immediately,
       // otherwise the plugin gets confused about whether or not it has focus.
       window.setTimeout(
-          this.plugin_.element().focus.bind(this.plugin_.element()),
-          0);
+          this.plugin_.element().focus.bind(this.plugin_.element()), 0);
     }
   }
 };
@@ -464,7 +423,9 @@ remoting.ClientSession.prototype.pluginLostFocus_ = function() {
  */
 remoting.ClientSession.prototype.createPluginAndConnect =
     function(onExtensionMessage) {
-  this.plugin_ = this.createClientPlugin_(this.PLUGIN_ID, onExtensionMessage);
+  this.plugin_ = new remoting.ClientPlugin(
+      this.container_.querySelector('.client-plugin-container'),
+      onExtensionMessage);
   remoting.HostSettings.load(this.hostId_,
                              this.onHostSettingsLoaded_.bind(this));
 };
@@ -515,7 +476,7 @@ remoting.ClientSession.prototype.setFocusHandlers_ = function() {
  */
 remoting.ClientSession.prototype.resetWithError_ = function(error) {
   this.plugin_.cleanup();
-  delete this.plugin_;
+  this.plugin_ = null;
   this.error_ = error;
   this.setState_(remoting.ClientSession.State.FAILED);
 }