Rudamentary Chrome extension version of the chromoting client UI.

This implements a bare-bones interface to starting a chromoting client session.
It currently loads the plugin within the popup itself which is bad, but
at least it works as a proof of concept.

BUG=50248
TEST=runs and connects locally.

Review URL: http://codereview.chromium.org/3046045

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@54919 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 302 insertions, 69 deletions

diff --git a/remoting/client/extension/client.js b/remoting/client/extension/client.js
new file mode 100644
index 0000000..a9e25a0
--- /dev/null
+++ b/remoting/client/extension/client.js
@@ -0,0 +1,228 @@
+// 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.
+
+function init_params() {
+  var hash;
+  var hashes = window.location.href.slice(
+      window.location.href.indexOf('?') + 1).split('&');
+
+  // Prepopulate via cookies first.
+  document.getElementById('xmpp_auth').value = get_cookie('xmpp_auth');
+  document.getElementById('chromoting_auth').value = get_cookie('chromoting_auth');
+  document.getElementById('username').value = get_cookie('username');
+
+  for(var i = 0; i < hashes.length; i++)
+  {
+    hash = hashes[i].split('=');
+    if (hash[0] == 'xmpp_auth') {
+      document.getElementById('xmpp_auth').value = hash[1];
+      set_cookie('xmpp_auth', hash[1]);
+
+    } else if (hash[0] == "chromoting_auth") {
+      document.getElementById('chromoting_auth').value = hash[1];
+      set_cookie('chromoting_auth', hash[1]);
+
+    } else if (hash[0] == 'username') {
+      document.getElementById('username').value = hash[1];
+      set_cookie('username', hash[1]);
+
+    } else if (hash[0] == 'password') {
+      document.getElementById('password').value = hash[1];
+
+    } else if (hash[0] == 'host_jid') {
+      document.getElementById('host_jid').value = hash[1];
+
+    }
+  }
+}
+
+function find_hosts(form) {
+  // If either cookie is missing, login first.
+  if (get_cookie('chromoting_auth') == null || get_cookie('xmpp_auth') == null) {
+    do_login(form.username.value, form.username.password, do_list_hosts);
+  } else {
+    do_list_hosts();
+  }
+}
+
+function login(form) {
+  do_login(form.username.value, form.password.value);
+}
+
+function extract_auth_token(message) {
+  var lines = message.split('\n');
+  for (var i = 0; i < lines.length; i++) {
+    if (lines[i].match('^Auth=.*')) {
+      return lines[i].split('=')[1];
+    }
+  }
+
+  debug_output('Could not parse auth token in : "' + message + '"');
+  return 'bad_token';
+}
+
+function do_gaia_login(username, password, service, done) {
+  var xhr = new XMLHttpRequest();
+  xhr.open('POST', 'https://www.google.com/accounts/ClientLogin', true);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) {
+      return;
+    }
+    if (xhr.status = 200) {
+      done(extract_auth_token(xhr.responseText));
+    } else {
+      debug_output('Bad status on auth: ' + xhr.statusText);
+    }
+  };
+
+  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhr.send('accountType=HOSTED_OR_GOOGLE&Email=' + username + '&Passwd=' + password + '&service=' + service + '&source=chromoclient');
+}
+
+function do_login(username, password, done) {
+  var count = 2;
+  var barrier = function() {
+    count--;
+    if (done && count == 0) {
+      done();
+    }
+  }
+  set_cookie('username', username, 100);
+  do_gaia_login(username, password, 'chromoting',
+                function(token1) {
+                  set_cookie('chromoting_auth', token1, 100);
+                  document.getElementById('chromoting_auth').value = token1;
+                  barrier();
+                });
+  do_gaia_login(username, password, 'chromiumsync',
+                function(token) {
+                  set_cookie('xmpp_auth', token, 100);
+                  document.getElementById('xmpp_auth').value = token;
+                  barrier();
+                });
+}
+
+function do_list_hosts() {
+  var xhr = new XMLHttpRequest();
+  var token = get_cookie('chromoting_auth');
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState != 4) {
+      return;
+    }
+    if (xhr.status == 200) {
+      parsed_response = JSON.parse(xhr.responseText);
+      create_host_links(parsed_response.data.items);
+    } else {
+      debug_output('bad status on host list query: "' + xhr.status + ' ' + xhr.statusText);
+    }
+  };
+
+  xhr.open('GET', 'http://www-googleapis-test.sandbox.google.com/chromoting/v1/@me/hosts');
+  xhr.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
+  xhr.setRequestHeader('Authorization', 'GoogleLogin auth=' + token);
+  xhr.send(null);
+}
+
+function create_host_links(hostlist) {
+// A host link entry should look like:
+// - Host: <a onclick="open_chromoting_tab(host_jid); return false;">NAME (JID)</a> <br />
+  var host;
+  var host_link;
+  var hostlist_div = document.getElementById('hostlist_div');
+  for(var i = 0; i < hostlist.length; ++i) {
+    hostlist_div.appendChild(document.createTextNode('-*- Host: '));
+    host = hostlist[i];
+    host_link = document.createElement('a');
+    // TODO(ajwong): Reenable once we figure out how to control a new tab.
+    //host_link.setAttribute('onclick', 'open_chromoting_tab(\'' + host.jabberId + '\'); return false;');
+    host_link.setAttribute('onclick', 'connect_in_popup(\'' + host.jabberId + '\'); return false;');
+    host_link.setAttribute('href', 'javascript:void(0)');
+    host_link.appendChild(document.createTextNode(host.hostName + ' (' + host.hostId  + ', ' + host.jabberId + ')'));
+    hostlist_div.appendChild(host_link);
+    hostlist_div.appendChild(document.createElement('br'));
+  }
+}
+
+// Cookie reading code taken from quirksmode with modification for escaping.
+//   http://www.quirksmode.org/js/cookies.html
+function set_cookie(name,value,days) {
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime()+(days*24*60*60*1000));
+    var expires = "; expires="+date.toGMTString();
+  }
+  else var expires = "";
+  document.cookie = name+"="+escape(value)+expires+"; path=/";
+}
+
+function get_cookie(name) {
+  var nameEQ = name + "=";
+  var ca = document.cookie.split(';');
+  for(var i=0;i < ca.length;i++) {
+    var c = ca[i];
+    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+    if (c.indexOf(nameEQ) == 0) return unescape(c.substring(nameEQ.length,c.length));
+  }
+  return null;
+}
+
+function set_auth_cookies(form) {
+  var now = new Date();
+  now.setTime(now.getTime() + 1000 * 60 * 60 * 24 * 365)
+
+  create_cookie('xmpp_auth', form.xmpp_auth.value, 100);
+  create_cookie('chromoting_auth', form.chromoting_auth.value, 100);
+}
+
+function connect(form) {
+  // TODO(ajwong): reenable once we figure out how to command the DOM in
+  // the opened tab.
+  //
+  // open_chromoting_tab(form.host_jid.value);
+  connect_in_popup(form.host_jid.value);
+}
+
+function debug_output(message) {
+  var debug_div = document.getElementById('debug_div');
+  debug_div.appendChild(document.createTextNode(message));
+  debug_div.appendChild(document.createElement('br'));
+}
+
+function connect_in_popup(host_jid) {
+  var username = get_cookie('username');
+  var xmpp_auth = get_cookie('xmpp_auth');
+  debug_output("Attempt to connect with " +
+               "username='" + username + "'" +
+               " host_jid='" + host_jid + "'" +
+               " auth_token='" + xmpp_auth + "'");
+
+  document.getElementById('chromoting').connect(username, host_jid, xmpp_auth);
+}
+
+function open_chromoting_tab(host_jid) {
+  var username = get_cookie('username');
+  var xmpp_auth = get_cookie('xmpp_auth');
+  debug_output("Attempt to connect with " +
+               "username='" + username + "'" +
+               " host_jid='" + host_jid + "'" +
+               " auth_token='" + xmpp_auth + "'");
+
+  var tab_args = {
+    url: "chrome://remoting",
+  };
+
+  chrome.tabs.create(tab_args, function(tab) {
+    var details = {};
+    details.code = function() {
+      // TODO(ajwong): We need to punch a hole into the content script to
+      // make this work. See
+      //   http://code.google.com/chrome/extensions/content_scripts.html
+      var an_event = document.createEvent('Event');
+      an_event.initEvent('startPlugin', true, true);
+
+      alert('hi');
+    }
+    chrome.tabs.executeScript(tab.id, details, function() { alert('done');});
+  });
+}
diff --git a/remoting/client/extension/icon.png b/remoting/client/extension/icon.png
new file mode 100644
index 0000000..103ff36
--- /dev/null
+++ b/remoting/client/extension/icon.png
diff --git a/remoting/client/extension/manifest.json b/remoting/client/extension/manifest.json
new file mode 100644
index 0000000..8492ffe
--- /dev/null
+++ b/remoting/client/extension/manifest.json
@@ -0,0 +1,14 @@
+{
+  "name": "Chromoting Client",
+  "version": "1.0",
+  "description": "Lists the hosts that the user can access.",
+  "browser_action": {
+    "default_icon": "icon.png",
+    "popup": "popup.html"
+  },
+  "permissions": [
+    "tabs",
+    "http://www-googleapis-test.sandbox.google.com/",
+    "https://www.google.com/accounts/"
+  ]
+}
diff --git a/remoting/client/extension/popup.html b/remoting/client/extension/popup.html
new file mode 100644
index 0000000..c632dd6
--- /dev/null
+++ b/remoting/client/extension/popup.html
@@ -0,0 +1,60 @@
+<!--
+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>
+    <script type="text/javascript" src="client.js"></script>
+    <title>Get hosts</title>
+  </head>
+  <body onload="init_params();">
+
+    <div style="border: blue 1px dotted;">
+    <form name="hostqueryform" action="" method="GET">
+    Fill-in to reauthenticate. <br />
+    U: <input type="text" name="username" id="username" value="" /> <br />
+    P: <input type="password" name="password" id="password" value="" /> <br />
+    <input type="button" name="login_button" value="Log In" onclick="login(this.form)" />
+    </form>
+    </div>
+
+    <div style="border: blue 1px dotted;">
+    Use to manually override the cookies. <br />
+    <form name="connectparamsform" action="" method="GET">
+    chromoting: <input type="text" name="chromoting_auth" id="chromoting_auth" value="" /> <br />
+    xmpp: <input type="text" name="xmpp_auth" id="xmpp_auth" value="" />
+    <input type="button" name="set_cookie_button" value="Set Auth Cookies" onclick="set_auth_cookies(this.form)" />
+    </form>
+    </div>
+
+    <div style="border: blue 1px dotted;">
+    <form name="connectform" action="" method="GET">
+    Conenct directly to host using auth cookies. Find Hosts doesn't require the host_jid to be filled out. <br />
+    host_jid: <input type="text" name="host_jid" id="host_jid" value="" /> <br />
+    <input type="button" name="connect_button" value="Connect" onclick="connect(this.form)" />
+    <input type="button" name="find_host_button" value="Find Hosts" onclick="find_hosts(this.form)" />
+    </form>
+    </div>
+
+    <br />
+
+    <div id="debug_div" style="border: red 1px solid;">
+    -- Debugging messages go here -- <br />
+    </div>
+
+    <br />
+
+    <div id="hostlist_div" style="border: blue 1px solid;">
+    -- Hosts go here -- <br />
+    </div>
+
+    <br />
+
+    <div id="plugin_div" style="border: black 1px dashed;">
+      <embed width="100%" height="100%" name="chromoting" id="chromoting"
+             src="about://none" type="pepper-application/x-chromoting">
+    </div>
+  </body>
+</html>
diff --git a/remoting/tools/client.html b/remoting/tools/client.html
deleted file mode 100644
index 2f25c7d..0000000
--- a/remoting/tools/client.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-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>
-    <script type="text/javascript" src="client.js"></script>
-    <title>Get hosts</title>
-  </head>
-  <body onload="init_params();">
-    <form name="connectparams" action="" method="GET">
-    <input type="text" name="username" value="" />
-    <input type="text" name="host_jid" value="" />
-    <input type="text" name="auth_token" value="" />
-    <input type="button" name="connect" value="Connect" onclick="do_connect(this.form)" />
-    </form>
-
-    <div id="debug_div" style="border: red 1px solid;">
-    -- Debugging messages go here -- 
-    </div>
-
-    <br />
-
-    <div id="plugin_div" style="border: black 1px dashed;">
-    <embed name="chromoting" src="chrome://remoting" type="pepper-application/x-chromoting">
-    </div>
-  </body>
-</html>
diff --git a/remoting/tools/client.js b/remoting/tools/client.js
deleted file mode 100644
index 1038c32..0000000
--- a/remoting/tools/client.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// 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.
-
-function init_params() {
-  var hash;
-  var hashes = window.location.href.slice(
-      window.location.href.indexOf('?') + 1).split('&');
-  var connect_params = document.forms[0];
-  for(var i = 0; i < hashes.length; i++)
-  {
-    hash = hashes[i].split('=');
-    if (hash[0] == "username") {
-      connect_params.username.value = hash[1];
-    } else if (hash[0] == "host_jid") {
-      connect_params.host_jid.value = hash[1];
-    } else if (hash[0] == "auth_token") {
-      connect_params.auth_token.value = hash[1];
-    }
-  }
-}
-
-function do_connect(form) {
-  debug_output("Attempt to connect with " + 
-               "username='" + form.username.value + "'" +
-               " host_jid='" + form.host_jid.value + "'" +
-               " auth_token='" + form.auth_token.value + "'");
-
-  document.chromoting.connect(form.username.value, form.host_jid.value, form.auth_token.value);
-}
-
-function debug_output(message) {
-  var debug_div = document.getElementById('debug_div');
-  var message_node = document.createElement('p');
-  message_node.innerText = message;
-
-  debug_div.appendChild(message_node);
-}
-