summaryrefslogtreecommitdiffstats
path: root/remoting/client/extension
diff options
context:
space:
mode:
Diffstat (limited to 'remoting/client/extension')
-rw-r--r--remoting/client/extension/background.js22
-rw-r--r--remoting/client/extension/chromoting_tab.html45
-rw-r--r--remoting/client/extension/chromoting_tab.js143
-rw-r--r--remoting/client/extension/client.js8
-rw-r--r--remoting/client/extension/main.css26
-rw-r--r--remoting/client/extension/popup.html2
6 files changed, 195 insertions, 51 deletions
diff --git a/remoting/client/extension/background.js b/remoting/client/extension/background.js
index 9fdf017..0f851a7 100644
--- a/remoting/client/extension/background.js
+++ b/remoting/client/extension/background.js
@@ -2,24 +2,26 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
-function openChromotingTab(host_jid) {
+function openChromotingTab(hostName, hostJid) {
var username = getCookie('username');
- var xmpp_auth = getCookie('xmpp_auth');
- var new_tab_url = chrome.extension.getURL("chromoting_tab.html");
+ var xmppAuth = getCookie('xmpp_auth');
+ var newTabUrl = chrome.extension.getURL("chromoting_tab.html");
var request = {
username: getCookie('username'),
- xmpp_auth: getCookie('xmpp_auth'),
- host_jid: host_jid,
+ xmppAuth: getCookie('xmpp_auth'),
+ hostName: hostName,
+ hostJid: hostJid,
};
- var tab_args = {
- url: new_tab_url,
+ var tabArgs = {
+ url: newTabUrl,
};
console.log("Attempt to connect with" +
" username='" + request.username + "'" +
- " host_jid='" + request.host_jid + "'" +
- " auth_token='" + request.xmpp_auth + "'");
- chrome.tabs.create(tab_args, function(tab) {
+ " hostName='" + request.hostName + "'" +
+ " hostJid='" + request.hostJid + "'" +
+ " auth_token='" + request.xmppAuth + "'");
+ chrome.tabs.create(tabArgs, function(tab) {
console.log("We're trying now to send to " + tab.id);
chrome.tabs.sendRequest(
tab.id, request, function() {
diff --git a/remoting/client/extension/chromoting_tab.html b/remoting/client/extension/chromoting_tab.html
index dbe42a56..ef53a8d 100644
--- a/remoting/client/extension/chromoting_tab.html
+++ b/remoting/client/extension/chromoting_tab.html
@@ -1,39 +1,18 @@
+<!--
+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.
+-->
+
<html>
<head>
- <title id="title">New Chromoting Session</title>
- <script>
- function set_listener() {
- // 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(
- function(request, sender, sendResponse) {
- console.log(sender.tab ?
- "from a content script:" + sender.tab.url :
- "from the extension");
-
- // Kick off the connection. Hold on to your butts!
- var chromoting = document.getElementById('chromoting');
- if (typeof chromoting.connect === 'function') {
- chromoting.connect(request.username, request.host_jid, request.xmpp_auth);
- }
-
- var connect_info = "On [" + request.host_jid + "] as [" + request.username + "]";
- document.getElementById("title").innerText = connect_info;
- document.getElementById("connectinfo").innerText = connect_info;
-
- // Send an empty response since we have nothing to say.
- sendResponse({});
- });
- }
- </script>
+ <title id="title">Chromoting Session</title>
+ <link rel="stylesheet" type="text/css" href="main.css" />
+ <script type="text/javascript" src="chromoting_tab.js"></script>
</head>
- <body onload="set_listener();">
- Why hello there! I'm your friendly Chromoting Tab.
- <div id="connectinfo"></div>
- <div id="plugin_div" style="border: black 1px dashed;">
+ <body class="chromoting_body" onload="init();">
+ <div id="status_msg" class="status_msg"></div>
+ <div id="plugin_div" class="plugin">
<embed width="100%" height="100%" name="chromoting" id="chromoting"
src="about://none" type="pepper-application/x-chromoting">
</div>
diff --git a/remoting/client/extension/chromoting_tab.js b/remoting/client/extension/chromoting_tab.js
new file mode 100644
index 0000000..cbdd3a2
--- /dev/null
+++ b/remoting/client/extension/chromoting_tab.js
@@ -0,0 +1,143 @@
+// 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.
+
+// Namespace for globals.
+var chromoting = {};
+
+// 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);
+}
+
+/**
+ * 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;
+
+ // TODO(garykac): Clean exit if |connect| isn't a funtion.
+ if (typeof plugin.connect === 'function') {
+ plugin.connect(request.username, request.hostJid,
+ request.xmppAuth);
+ }
+
+ document.getElementById('title').innerText = request.hostName;
+
+ // Send an empty response since we have nothing to say.
+ sendResponse({});
+}
+
+/**
+ * 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) {
+ showClientStateMessage('');
+ } else if (status == chromoting.plugin.STATUS_CONNECTING) {
+ showClientStateMessage('Connecting to ' + chromoting.hostname +
+ ' as ' + chromoting.username);
+ } else if (status == chromoting.plugin.STATUS_INITIALIZING) {
+ showClientStateMessage('Initializing connection to ' + chromoting.hostname);
+ } else if (status == chromoting.plugin.STATUS_CONNECTED) {
+ showClientStateMessage('Connected to ' + chromoting.hostname, 1000);
+ } else if (status == chromoting.plugin.STATUS_CLOSED) {
+ showClientStateMessage('Closed');
+ } else if (status == chromoting.plugin.STATUS_FAILED) {
+ showClientStateMessage('Failed');
+ }
+}
+
+/**
+ * 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;
+
+ if (duration) {
+ // 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;
+ }
+ }
+}
diff --git a/remoting/client/extension/client.js b/remoting/client/extension/client.js
index 138d014..2e636be 100644
--- a/remoting/client/extension/client.js
+++ b/remoting/client/extension/client.js
@@ -130,9 +130,9 @@ function extractAuthToken(message) {
}
// Open a chromoting connection in a new tab.
-function openChromotingTab(host_jid) {
+function openChromotingTab(hostName, hostJid) {
var background = chrome.extension.getBackgroundPage();
- background.openChromotingTab(host_jid);
+ background.openChromotingTab(hostName, hostJid);
}
// Erase the content of the specified element.
@@ -248,8 +248,8 @@ function addHostInfo(host) {
var connect = document.createElement('input');
connect.setAttribute('type', 'button');
connect.setAttribute('value', 'Connect');
- connect.setAttribute('onclick', 'openChromotingTab(\'' + host.jabberId +
- '\'); return false;');
+ connect.setAttribute('onclick', "openChromotingTab('" + host.hostName +
+ "', '" + host.jabberId + "'); return false;");
span.appendChild(connect);
hostEntry.appendChild(span);
diff --git a/remoting/client/extension/main.css b/remoting/client/extension/main.css
index d375107..42f2761 100644
--- a/remoting/client/extension/main.css
+++ b/remoting/client/extension/main.css
@@ -1,4 +1,4 @@
-body {
+.popup_body {
width: 500px;
overflow: hidden;
scrollbars: no;
@@ -18,13 +18,13 @@ h1 {
.message {
font-family: sans-serif;
font-size: 1.2em;
- padding: 0px 4px 0px 4px;
+ padding: 0 4px 0 4px;
}
.hostlist {
width: 100%;
height: 400px;
- margin: 0px;
+ margin: 0;
overflow: auto;
border: black 1px solid;
}
@@ -96,3 +96,23 @@ a.hostentry { text-decoration: none; }
.login_email {
font-weight: bold;
}
+
+.chromoting_body {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ scrollbars: no;
+}
+
+.status_msg {
+ position: absolute;
+ left: 20px;
+ top: 20px;
+ z-index: 1;
+ font-family: sans-serif;
+ font-size: 2em;
+ font-weight: bold;
+}
+
+.plugin {
+}
diff --git a/remoting/client/extension/popup.html b/remoting/client/extension/popup.html
index d582cba..117248d 100644
--- a/remoting/client/extension/popup.html
+++ b/remoting/client/extension/popup.html
@@ -11,7 +11,7 @@ found in the LICENSE file.
<link rel="stylesheet" type="text/css" href="main.css" />
<title>Remote Access</title>
</head>
- <body onload="init();">
+ <body class="popup_body" onload="init();">
<h1>Remote Access</h1>
generated by cgit v1.1 at 2025-03-01 15:16:01 +0000