Skip to content

Commit

Permalink
Cleanup client plugin handling code in the webapp.
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
sergeyu@chromium.org committed Aug 13, 2014
1 parent a134813 commit 6b10685
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 82 deletions.
98 changes: 60 additions & 38 deletions remoting/webapp/client_plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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_;
};

/**
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -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: {} }));
};

Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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 }}));
};
Expand All @@ -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),
Expand All @@ -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 }}));
}
};
Expand All @@ -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 }}));
};

Expand All @@ -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 }}));
};

Expand All @@ -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 }}));
};

Expand All @@ -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 }}));
};

Expand All @@ -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: {} }));
};

Expand All @@ -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}}));
};
Expand All @@ -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 } }));
};

Expand All @@ -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 } }));

Expand All @@ -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: {} }));
};

Expand All @@ -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';
}
};

Expand All @@ -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 = '';
};
49 changes: 5 additions & 44 deletions remoting/webapp/client_session.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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);
}
}
};
Expand All @@ -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));
};
Expand Down Expand Up @@ -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);
}
Expand Down

0 comments on commit 6b10685

Please sign in to comment.