1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
// Copyright (c) 2010 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.
// Message id so that we can identify (and ignore) message fade operations for
// old messages. This starts at 1 and is incremented for each new message.
chromoting.messageId = 1;
function init() {
// This page should only get one request, and it should be
// from the chromoting extension asking for initial connection.
// Later we may need to create a more persistent channel for
// better UI communication. Then, we should probably switch
// to chrome.extension.connect().
chrome.extension.onRequest.addListener(requestListener);
}
function submitLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// Make the login panel invisible and submit login info.
document.getElementById("login_panel").style.display = "none";
chromoting.plugin.submitLoginInfo(username, password);
}
/**
* A listener function to be called when the extension fires a request.
*
* @param request The request sent by the calling script.
* @param sender The MessageSender object with info about the calling script's
* context.
* @param sendResponse Function to call with response.
*/
function requestListener(request, sender, sendResponse) {
console.log(sender.tab ?
'from a content script: ' + sender.tab.url :
'from the extension');
// Kick off the connection.
var plugin = document.getElementById('chromoting');
chromoting.plugin = plugin;
chromoting.username = request.username;
chromoting.hostname = request.hostName;
// Setup the callback that the plugin will call when the connection status
// has changes and the UI needs to be updated. It needs to be an object with
// a 'callback' property that contains the callback function.
plugin.connectionInfoUpdate = pluginCallback;
plugin.loginChallenge = pluginLoginChallenge;
console.log('connect request received: ' + chromoting.hostname + ' by ' +
chromoting.username);
// TODO(garykac): Clean exit if |connect| isn't a funtion.
if (typeof plugin.connect === 'function') {
plugin.connect(request.username, request.hostJid,
request.xmppAuth);
} else {
console.log('ERROR: chromoting plugin not loaded');
}
document.getElementById('title').innerText = request.hostName;
// Send an empty response since we have nothing to say.
sendResponse({});
}
/**
* This is the callback method that the plugin calls to request username and
* password for logging into the remote host.
*/
function pluginLoginChallenge() {
// Make the login panel visible.
document.getElementById("login_panel").style.display = "block";
}
/**
* This is a callback that gets called when the desktop size contained in the
* the plugin has changed.
*/
function desktopSizeChanged() {
var width = chromoting.plugin.desktopWidth;
var height = chromoting.plugin.desktopHeight;
console.log('desktop size changed: ' + width + 'x' + height);
chromoting.plugin.style.width = width + "px";
chromoting.plugin.style.height = height + "px";
}
/**
* Show a client message on the screen.
* If duration is specified, the message fades out after the duration expires.
* Otherwise, the message stays until the state changes.
*
* @param {string} message The message to display.
* @param {number} duration Milliseconds to show message before fading.
*/
function showClientStateMessage(message, duration) {
// Increment message id to ignore any previous fadeout requests.
chromoting.messageId++;
console.log('setting message ' + chromoting.messageId + '!');
// Update the status message.
var msg = document.getElementById('status_msg');
msg.innerText = message;
msg.style.opacity = 1;
msg.style.display = '';
if (duration) {
// Set message duration.
window.setTimeout("fade('status_msg', " + chromoting.messageId + ", " +
"100, 10, 200)",
duration);
}
}
/**
* This is that callback that the plugin invokes to indicate that the
* host/client connection status has changed.
*/
function pluginCallback() {
var status = chromoting.plugin.status;
var quality = chromoting.plugin.quality;
if (status == chromoting.plugin.STATUS_UNKNOWN) {
setClientStateMessage('');
} else if (status == chromoting.plugin.STATUS_CONNECTING) {
setClientStateMessage('Connecting to ' + chromoting.hostname
+ ' as ' + chromoting.username);
} else if (status == chromoting.plugin.STATUS_INITIALIZING) {
setClientStateMessageFade('Initializing connection to ' +
chromoting.hostname);
} else if (status == chromoting.plugin.STATUS_CONNECTED) {
desktopSizeChanged();
setClientStateMessageFade('Connected to ' + chromoting.hostname, 1000);
} else if (status == chromoting.plugin.STATUS_CLOSED) {
setClientStateMessage('Closed');
} else if (status == chromoting.plugin.STATUS_FAILED) {
setClientStateMessage('Failed');
}
}
/**
* Show a client message that stays on the screeen until the state changes.
*
* @param {string} message The message to display.
*/
function setClientStateMessage(message) {
// Increment message id to ignore any previous fadeout requests.
chromoting.messageId++;
console.log('setting message ' + chromoting.messageId);
// Update the status message.
var msg = document.getElementById('status_msg');
msg.innerText = message;
msg.style.opacity = 1;
msg.style.display = '';
}
/**
* Show a client message for the specified amount of time.
*
* @param {string} message The message to display.
* @param {number} duration Milliseconds to show message before fading.
*/
function setClientStateMessageFade(message, duration) {
setClientStateMessage(message);
// Set message duration.
window.setTimeout("fade('status_msg', " + chromoting.messageId + ", " +
"100, 10, 200)",
duration);
}
/**
* Fade the specified element.
* For example, to have element 'foo' fade away over 2 seconds, you could use
* either:
* fade('foo', 100, 10, 200)
* - Start at 100%, decrease by 10% each time, wait 200ms between updates.
* fade('foo', 100, 5, 100)
* - Start at 100%, decrease by 5% each time, wait 100ms between updates.
*
* @param {string} name Name of element to fade.
* @param {number} id The id of the message associated with this fade request.
* @param {number} val The new opacity value (0-100) for this element.
* @param {number} delta Amount to adjust the opacity each iteration.
* @param {number} delay Delay (in ms) to wait between each update.
*/
function fade(name, id, val, delta, delay) {
// Ignore the fade call if it does not apply to the current message.
if (id != chromoting.messageId) {
return;
}
var e = document.getElementById(name);
if (e) {
var newVal = val - delta;
if (newVal > 0) {
// Decrease opacity and set timer for next fade event.
e.style.opacity = newVal / 100;
window.setTimeout("fade('status_msg', " + id + ", " + newVal + ", " +
delta + ", " + delay + ")",
delay);
} else {
// Completely hide the text and stop fading.
e.style.opacity = 0;
e.style.display = 'none';
}
}
}
|
