initial release of console and separate Debug and Connections pages

9 files changed, 635 insertions, 355 deletions

diff --git a/bundles/org.eclipse.orion.client.core/web/orion/console.js b/bundles/org.eclipse.orion.client.core/web/orion/console.js
new file mode 100644
index 0000000..1074e9a
--- a/dev/null
+++ b/bundles/org.eclipse.orion.client.core/web/orion/console.js
@@ -0,0 +1,163 @@
+/*******************************************************************************
+ * @license
+ * Copyright (c) 2011, 2012 IBM Corporation and others.
+ * All rights reserved. This program and the accompanying materials are made 
+ * available under the terms of the Eclipse Public License v1.0 
+ * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution 
+ * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
+ ******************************************************************************/
+
+/*global define*/
+/*jslint browser:true*/
+
+define(['dojo', 'orion/textview/textView'], function(dojo, mTextView) {
+
+	var orion = {};
+	orion.console = {};
+
+	/** 
+	 * Constructs a new ConsoleInput object.
+	 * 
+	 * @class A ConsoleInput represents a command that is being entered in a Console.
+	 * @name orion.console.ConsoleInput
+	 */
+	orion.console.ConsoleInput = (function() {
+		function ConsoleInput(console, textView) {
+			this._init(console, textView);
+		}
+		ConsoleInput.prototype = /** @lends orion.console.ConsoleInput.prototype */{
+			/** @private */
+			_init: function(console, textView) {
+				if (!console) { throw "no console"; }
+				if (!textView) { throw "no textView"; }
+				this._console = console;
+				this._textView = textView;
+				this._enabled = true;
+				var model = textView.getModel();
+				this._startIndex = model.getCharCount();
+				model.setText("> ", this._startIndex);
+				textView.setCaretOffset(this._startIndex + 2, false);
+			},
+			getStartIndex: function() {
+				return this._startIndex;
+			},
+			getText: function() {
+				return this._textView.getModel().getText(this._startIndex + 2);
+			},
+			handleVerifyEvent: function(verifyEvent) {
+				if (verifyEvent.start < this._startIndex + 2) {
+					return false;
+				}
+				if (!this._enabled) {
+					verifyEvent.text = null;
+				}
+				return true;
+			},
+			setEnabled: function(value) {
+				this._enabled = value;
+				this._textView.redrawRange(this._startIndex);
+			},
+			setStartIndex: function(value) {
+				this._textView.setCaretOffset(this._textView.getCaretOffset() + (value - this._startIndex));
+				this._startIndex = value;
+			}
+		};
+		return ConsoleInput;
+	}());
+
+	/**
+	 * Constructs a new console.
+	 * 
+	 * @param options the view options.
+	 * @param parent the parent element for the console, it can be either a DOM element or an ID for a DOM element.
+	 * 
+	 * @class A Console is a user interface that accepts input command lines and displays output.
+	 * @name orion.console.Console
+	 */
+	orion.console.Console = (function() {
+		function Console(parent) {
+			this._init(parent);
+		}
+		Console.prototype = /** @lends orion.console.Console.prototype */{
+			/** @private */
+			_init: function(parent) {
+				if (!parent) { throw "no parent"; }
+
+				var textView = new mTextView.TextView({parent: parent});
+				this._textView = textView;
+				this._currentInput = new orion.console.ConsoleInput(this, textView);
+
+				var self = this;
+				textView.addEventListener("Verify", function(verifyEvent) {
+					if (!self._currentInput.handleVerifyEvent(verifyEvent)) {
+						verifyEvent.text = null;
+					}
+				});
+				
+				this._inputListeners = [];
+				textView.addEventListener("Modify", function(modelChangedEvent) {
+					var text = self._currentInput.getText();
+					var index = text.indexOf("\r\n");
+					if (index !== -1) {
+						var value = text.substring(0, index);
+						for (var i = 0; i < self._inputListeners.length; i++) {
+							var current = self._inputListeners[i];
+							current(value);
+						}
+						self._currentInput = new orion.console.ConsoleInput(self, textView);
+					}
+				});
+
+				this._inputStyleListeners = [];
+//				textView.addEventListener("LineStyle", function(lineStyleEvent) {
+//					self._currentInput.handleLineStyleEvent(lineStyleEvent);
+//					if (lineStyleEvent.lineStart !== self._startIndex) {
+//						return;
+//					}
+//					if (!self._enabled) {
+//						lineStyleEvent.style = {style: {color: "#FF0000"}};
+//					} else {
+//						lineStyleEvent.style = {style: {color: "#0000FF"}};
+//					}
+//				});
+			},
+			
+			appendOutput: function(text) {
+				var model = this._textView.getModel();
+				var startIndex = this._currentInput.getStartIndex();
+				var inputText = model.getText(startIndex);
+				var length = text.length;
+				model.setText(text + "\r\n" + inputText, startIndex);
+				this._currentInput.setStartIndex(this._currentInput.getStartIndex() + 2 + length);
+			},
+			addInputListener: function(listener) {
+				this._inputListeners.push(listener);
+			},
+			addInputStyleListener: function(listener) {
+				this._inputStyleListeners.push(listener);
+			},
+			removeInputListener: function(listener) {
+				for (var i = 0; i < this._inputListeners.length; i++) {
+					if (this._inputListeners[i] === listener) {
+						this._inputListeners.splice(i, 1);
+						return;
+					}
+				}
+			},
+			removeInputStyleListener: function(listener) {
+				for (var i = 0; i < this._inputStyleListeners.length; i++) {
+					if (this._inputStyleListeners[i] === listener) {
+						this._inputStyleListeners.splice(i, 1);
+						return;
+					}
+				}
+			},
+			setAcceptInput: function(value) {
+				this._currentInput.setEnabled(value);
+			}
+		};
+		return Console;
+	}());
+	
+	return orion.console;
+});
diff --git a/bundles/org.eclipse.orion.client.debug/web/connections.css b/bundles/org.eclipse.orion.client.debug/web/connections.css
new file mode 100644
index 0000000..b46bbcf
--- a/dev/null
+++ b/bundles/org.eclipse.orion.client.debug/web/connections.css
@@ -0,0 +1,45 @@
+@import "../org.dojotoolkit/dojo/resources/dojo.css";
+@import "../org.dojotoolkit/dijit/themes/nihilo/nihilo.css";
+@import "../org.dojotoolkit/dijit/themes/nihilo/Tree.css";
+@import "../org.dojotoolkit/dijit/themes/nihilo/layout/BorderContainer.css";
+@import "../org.dojotoolkit/dijit/themes/nihilo/form/Common.css";
+@import "../org.dojotoolkit/dijit/themes/nihilo/form/Button.css";
+@import "../css/ide.css";
+@import "../css/commands.css";
+
+html,body {
+	height: 100%;
+}
+
+h1 {
+	position: relative;
+	margin-top: 18px;
+}
+
+.statusPane {
+	font-weight: bold;
+}
+
+.domCommandToolbar {
+	padding-left: 8px;
+}
+
+tr.treeTableRow td:first-child {
+	padding-left: 16px !important;
+}
+
+.treetable th {
+	font-weight: bold;
+}
+
+.treetable td {
+	padding: 16px 0 16px 16px;
+}
+
+.treetable th {
+	padding: 16px 0 0 16px;
+}
+
+.siteConfigDetails {
+	padding-left: 16px;
+}
diff --git a/bundles/org.eclipse.orion.client.debug/web/connections.html b/bundles/org.eclipse.orion.client.debug/web/connections.html
new file mode 100644
index 0000000..44d6411
--- a/dev/null
+++ b/bundles/org.eclipse.orion.client.debug/web/connections.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="copyright" content="Copyright (c) IBM Corporation and others 2011, 2012." >
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<title>Debug Connections</title>
+	<link rel="stylesheet" type="text/css" href="./connections.css" />
+	<script src="../requirejs/require.js"></script>
+	<script src="../orion/plugin.js"></script>
+	<script src="../org.dojotoolkit/dojo/dojo.js.uncompressed.js"></script>
+	<script type="text/javascript">
+		require({
+			baseUrl: '..',
+			packages: [
+				{
+					name: 'dojo',
+					location: 'org.dojotoolkit/dojo',
+					main: 'lib/main-browser',
+					lib: '.'
+				},
+				{
+					name: 'dijit',
+					location: 'org.dojotoolkit/dijit',
+					main: 'lib/main',
+					lib: '.'
+				},
+				{
+					name: 'dojox',
+					location: 'org.dojotoolkit/dojox',
+					main: 'lib/main',
+					lib: '.'
+				}
+			],
+			paths: {
+				text: 'requirejs/text',
+				i18n: 'requirejs/i18n'
+			}
+		});
+		require(["./connections"]);
+	</script>
+</head>
+
+<body style="visibility:hidden;" class="nihilo">
+	<div id="orion-debugConnections" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%;">
+		<div class="toolbar" id="toolbar" dojotype="dijit.layout.ContentPane" region="top">
+		</div>
+		<div id="orion-debugConnectionsMainPane" dojotype="dijit.layout.ContentPane" region="center" class="mainpane">
+			<div id="orion-debugMessaging"></div>
+			<div id="debugConnections-table"></div>
+		</div>
+		<div class="footer" id="footer" dojotype="dijit.layout.ContentPane" region="bottom" splitter="false">
+		</div>
+	</div>
+</body>
+</html>
diff --git a/bundles/org.eclipse.orion.client.debug/web/connections.js b/bundles/org.eclipse.orion.client.debug/web/connections.js
new file mode 100644
index 0000000..895293d
--- a/dev/null
+++ b/bundles/org.eclipse.orion.client.debug/web/connections.js
@@ -0,0 +1,181 @@
+/*******************************************************************************
+ * @license
+ * Copyright (c) 2011, 2012 IBM Corporation and others.
+ * All rights reserved. This program and the accompanying materials are made 
+ * available under the terms of the Eclipse Public License v1.0 
+ * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution 
+ * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
+ *
+ * Contributors:-
+ *     IBM Corporation - initial API and implementation
+ *******************************************************************************/
+
+/*global define orion*/
+/*jslint browser:true*/
+
+define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClient',
+	'orion/searchClient', 'orion/globalCommands', 'debug/connectionsTree', 'orion/treetable', 
+	'orion/widgets/NewSiteDialog'], 
+	function(require, dojo, mBootstrap, mCommands, mFileClient, mSearchClient, mGlobalCommands, mConnectionsTree, mTreeTable) {
+
+	var treeWidget;
+	var model = new mConnectionsTree.DebugConnectionTreeModel("debug-tableTree");	
+	function modelUpdated() {
+		model.getRoot(function(root) {
+			model.getChildren(root, function(children) {
+				treeWidget.refreshAndExpand(root, children);
+				for (var i = 0; i < children.length; i++) {
+					treeWidget.refreshAndExpand(children[i], children[i].getConnections());
+				}
+			});
+		});
+	}
+
+	var RemoteDebugConnection = (function() {
+		function RemoteDebugConnection(info) {
+			this._connections = [];
+			var socketString = info.webSocketDebuggerUrl;
+			var start = socketString.indexOf(':');
+			start = socketString.indexOf(':', start + 1);
+			var end = socketString.indexOf('/', start);
+			this._port = socketString.substring(start + 1, end);
+		}
+		RemoteDebugConnection.prototype = /** @lends RemoteDebugConnection.prototype */ {
+			addConnection: function(value) {
+				this._connections.push(value);
+			},
+			getChildren: function() {
+				return this.getConnections();
+			},
+			getConnections: function() {
+				return this._connections;
+			},
+			renderLabel: function(column) {
+				dojo.place(document.createTextNode(this.toString()), column, "last");
+			},
+			shouldDisplayActions: function() {
+				return true;
+			},
+			toString: function() {
+				return "Chrome browser on port " + this._port;
+			}
+		};
+		return RemoteDebugConnection;
+	}());
+
+	var RemoteDebugTab = (function() {
+		function RemoteDebugTab(info) {
+			this._wsUrl = info.webSocketDebuggerUrl;
+			this._url = info.url;
+		}
+		RemoteDebugTab.prototype = /** @lends RemoteDebugTab.prototype */{
+			getChildren: function() {
+				return [];
+			},
+			getUrl: function() {
+				return this._url;
+			},
+			getWSUrl: function() {
+				return this._wsUrl;
+			},
+			renderLabel: function(column) {
+				var base = require.toUrl("debug/debug.html");
+				var url = base + "#" + this.getWSUrl();
+				var urlLink = dojo.create("a", {href: url}, column, "last");
+				dojo.place(document.createTextNode(this.getUrl()), urlLink, "last");
+			},
+			shouldDisplayActions: function() {
+				return false;
+			},
+			toString: function() {
+				return this.getWSUrl();
+			}
+		};
+		return RemoteDebugTab;
+	}());
+
+	dojo.addOnLoad(function() {
+		mBootstrap.startup().then(function(core) {
+			var serviceRegistry = core.serviceRegistry;
+			var preferences = core.preferences;
+			document.body.style.visibility = "visible";
+			dojo.parser.parse();
+
+			var commandService = new mCommands.CommandService({serviceRegistry: serviceRegistry});
+			var fileClient = new mFileClient.FileClient(serviceRegistry);
+			var searcher = new mSearchClient.Searcher({serviceRegistry: serviceRegistry, commandService: commandService, fileService: fileClient});
+			mGlobalCommands.generateBanner("toolbar", serviceRegistry, commandService, preferences, searcher);
+
+			var renderer = new mConnectionsTree.DebugConnectionRenderer(commandService);
+			treeWidget = new mTreeTable.TableTree({
+				id: "debug-tableTree",
+				parent: dojo.byId("debugConnections-table"),
+				model: model,
+				showRoot: false,
+				renderer: renderer
+			});
+
+			var connectCommand = new mCommands.Command({
+				name: "Connect",
+				tooltip: "Connect to a new browser",
+				id: "orion.debugConnections.connect",
+				groupId: "orion.debugGroup",
+				callback: function() {
+					var dialog = new orion.widgets.NewSiteDialog({
+						title: "Enter browser debug port",
+						serviceRegistry: serviceRegistry,
+						func: function(name, workspace) {
+							var label = dojo.create("label", {id: "debug-port"});
+							label.style.display = "none";
+							label.innerHTML = name;
+							dojo.place(label, "orion-debugMessaging", "first");
+						}
+					});
+					dialog.startup();
+					dialog.show();
+				}
+			});
+			commandService.addCommand(connectCommand, "dom");
+
+			var disconnectCommand = new mCommands.Command({
+				name: "Disconnect",
+				tooltip: "Disconnect from the target",
+				imageClass: "core-sprite-problem",
+				id: "orion.debugConnections.disconnect",
+				visibleWhen: function(item) {
+					return true;
+				},
+				callback: function(data) {
+					// TODO
+				}
+			});
+			commandService.addCommand(disconnectCommand, "object");
+
+			commandService.registerCommandContribution("orion.debugConnections.connect", 1, "pageActions");
+			/* uncomment the following line to re-introduce the Disconnect action */
+		//	commandService.registerCommandContribution("orion.debugConnections.disconnect", 1);
+			mGlobalCommands.generateDomCommandsInBanner(commandService, {});
+
+			var debugMessaging = dojo.byId("orion-debugMessaging");
+			if (debugMessaging) {
+				var treeModel = model;
+				debugMessaging.addEventListener("DOMNodeInserted", function() {
+					var responseLabel = dojo.byId("debug-response");
+					if (!responseLabel) {
+						return;
+					}
+					var info = JSON.parse(responseLabel.innerHTML);
+					debugMessaging.removeChild(responseLabel);
+
+					var connection = new RemoteDebugConnection(info[0]);
+					for (var i = 0; i < info.length; i++) {
+						var tab = new RemoteDebugTab(info[i]);
+						connection.addConnection(tab);
+					}
+					treeModel.addConnection(connection);
+					modelUpdated();
+				});
+			}
+		});
+	});
+});
diff --git a/bundles/org.eclipse.orion.client.debug/web/connectionsTree.js b/bundles/org.eclipse.orion.client.debug/web/connectionsTree.js
new file mode 100644
index 0000000..3895852
--- a/dev/null
+++ b/bundles/org.eclipse.orion.client.debug/web/connectionsTree.js
@@ -0,0 +1,93 @@
+/*******************************************************************************
+ * @license
+ * Copyright (c) 2011, 2012 IBM Corporation and others.
+ * All rights reserved. This program and the accompanying materials are made 
+ * available under the terms of the Eclipse Public License v1.0 
+ * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution 
+ * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html). 
+ *
+ * Contributors:-
+ *     IBM Corporation - initial API and implementation
+ *******************************************************************************/
+
+/*global define*/
+/*jslint browser:true*/
+
+define(['require', 'dojo'], function(require, dojo) {
+
+	var orion = {};
+	orion.debug = {};
+
+	orion.debug.DebugConnectionTreeModel = (function() {
+		function DebugConnectionTreeModel(/**String*/ id) {
+			this._id = id;
+			this._root = [];
+		}
+		DebugConnectionTreeModel.prototype = /** @lends orion.debug.DebugConnectionTreeModel.prototype */{
+			addConnection: function(connection) {
+				this._root.push(connection);
+			},
+			getRoot: function(/**function*/ onItem) {
+				onItem(this);
+			},
+			getChildren: function(/**dojo.data.Item*/ parentItem, /**Function(items)*/ onComplete) {
+				onComplete(parentItem === this ? this._root : parentItem.getChildren());
+			},
+			getId: function(/**dojo.data.Item|String*/ item) {
+				return (item === this || item === this._id) ? this._id : item.toString();
+			}
+		};
+		return DebugConnectionTreeModel;
+	}());
+
+	orion.debug.DebugConnectionRenderer = (function() {
+		function DebugConnectionRenderer(commandService) {
+			this._commandService = commandService;
+		}
+		DebugConnectionRenderer.prototype = /** @lends orion.debug.DebugConnectionRenderer.prototype */{
+			initTable: function(tableNode, tableTree) {
+				this.tableTree = tableTree;
+				dojo.addClass(tableNode, "treetable");
+			},
+			render: function(item, tableRow) {
+				dojo.style(tableRow, "verticalAlign", "baseline");
+				dojo.addClass(tableRow, "treeTableRow");
+				var labelColumn = dojo.create("td", {id: tableRow.id + "col1"});
+				var actionColumn = dojo.create("td", {id: tableRow.id + "col2"});
+				item.renderLabel(labelColumn);
+				if (item.shouldDisplayActions()) {
+					var actionsWrapper = dojo.create(
+						"span",
+						{id: tableRow.id + "actionswrapper", style: {visibility: "hidden"}},
+						actionColumn,
+						"only");
+					dojo.connect(tableRow, "onmouseover", tableRow, function() {
+						dojo.style(actionsWrapper, "visibility", "visible");
+					});
+					dojo.connect(tableRow, "onmouseout", tableRow, function() {
+						dojo.style(actionsWrapper, "visibility", "hidden");
+					});
+					this._commandService.renderCommands(actionsWrapper, "object", item, {}, "tool");	
+				}
+				dojo.place(labelColumn, tableRow, "last");
+				dojo.place(actionColumn, tableRow, "last");
+			},
+			rowsChanged: function() {
+				dojo.query(".treeTableRow").forEach(function(node, i) {
+					if (i % 2) {
+						dojo.addClass(node, "darkTreeTableRow");
+						dojo.removeClass(node, "lightTreeTableRow");
+					} else {
+						dojo.addClass(node, "lightTreeTableRow");
+						dojo.removeClass(node, "darkTreeTableRow");
+					}
+				});
+			},
+			labelColumnIndex: 0
+		};
+		return DebugConnectionRenderer;
+	}());
+	
+	return orion.debug;
+});
+
diff --git a/bundles/org.eclipse.orion.client.debug/web/debug.html b/bundles/org.eclipse.orion.client.debug/web/debug.html
index 6aba351..ef8b27b 100644
--- a/bundles/org.eclipse.orion.client.debug/web/debug.html
+++ b/bundles/org.eclipse.orion.client.debug/web/debug.html
@@ -4,10 +4,10 @@
 	<meta name="copyright" content="Copyright (c) IBM Corporation and others 2011." >

 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 	<title>Debug</title>

-	<link rel="stylesheet" type="text/css" href="debug.css" />

+	<link rel="stylesheet" type="text/css" href="./debug.css" />

 	<script src="../requirejs/require.js"></script>

-	<script src="../../orion/plugin.js"></script>

-	<script src="../../org.dojotoolkit/dojo/dojo.js.uncompressed.js"></script>

+	<script src="../orion/plugin.js"></script>

+	<script src="../org.dojotoolkit/dojo/dojo.js.uncompressed.js"></script>

 	<script type="text/javascript">

 		require({

 			baseUrl: '..',

@@ -45,8 +45,7 @@
 		<div class="toolbar" id="toolbar" dojotype="dijit.layout.ContentPane" region="top">

 		</div>

 		<div id="orion-debugMainPane" dojotype="dijit.layout.ContentPane" region="center" class="mainpane">

-			<div id="orion-debugMessaging"></div>

-			<div id="debug-table"></div>

+			<div id="debug-console" style='width:100%;height:650px;border: 1px solid teal;'></div>

 		</div>

 		<div class="footer" id="footer" dojotype="dijit.layout.ContentPane" region="bottom" splitter="false">

 		</div>

diff --git a/bundles/org.eclipse.orion.client.debug/web/debug.js b/bundles/org.eclipse.orion.client.debug/web/debug.js
index 1ddf664..fb2e104 100644
--- a/bundles/org.eclipse.orion.client.debug/web/debug.js
+++ b/bundles/org.eclipse.orion.client.debug/web/debug.js
@@ -1,94 +1,53 @@
 /*******************************************************************************

 * @license

-* Copyright (c) 2011 IBM Corporation and others.

+* Copyright (c) 2011, 2012 IBM Corporation and others.

 * All rights reserved. This program and the accompanying materials are made

 * available under the terms of the Eclipse Public License v1.0

 * (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution

 * License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html).

 *

 * Contributors:

-* IBM Corporation - initial API and implementation

+* 	IBM Corporation - initial API and implementation

 *******************************************************************************/

-/*global define dojo dijit orion window widgets*/

+

+/*global define WebSocket*/

 /*jslint browser:true*/

 

-define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClient',

-	'orion/searchClient', 'orion/globalCommands', 'debug/debugTree', 'orion/treetable',

-	'orion/widgets/NewSiteDialog'],

-	function(require, dojo, mBootstrap, mCommands, mFileClient, mSearchClient, mGlobalCommands, mDebugTree, mTreeTable) {

-	

-	var eclipse = {};

-	eclipse.debug = {};

-	

-	var model = new mDebugTree.DebugConnectionTreeModel("debug-tableTree");

-	var treeWidget;

+define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClient', 'orion/searchClient', 'orion/globalCommands', 'orion/console'], 

+	function(require, dojo, mBootstrap, mCommands, mFileClient, mSearchClient, mGlobalCommands, mConsole) {

 	

-	eclipse.debug.RemoteDebugConnection = (function() {

-		eclipse.debug.StatesEnum = {

-			STATE_DISCONNECTED: "Disconnected",

-			STATE_CONNECTED: "Connected",

-			STATE_ENABLED: "Debugging",

-			STATE_SUSPENDING: "Suspending...",

-			STATE_RESUMING: "Resuming...",

-			STATE_SUSPENDED: "Suspended"

-		};

-		

-		function RemoteDebugConnection(info) {

+	var console;

+	var commandService;

+

+	var RemoteDebugTab = (function() {

+		function RemoteDebugTab(wsUrl) {

 			this._nextId = 1;

-			this._state = eclipse.debug.StatesEnum.STATE_DISCONNECTED;

-			this._wsUrl = info.webSocketDebuggerUrl;

-			this._url = info.url;

+			this._state = this.StatesEnum.STATE_DISCONNECTED;

+			this._wsUrl = wsUrl;

 			this._pendingResponses = [];

-			this._socket = new WebSocket(info.webSocketDebuggerUrl);

+			this._socket = new WebSocket(wsUrl);

 			var self = this;

 			this._socket.onmessage = function(evt) {

 				self._handleMessage(evt.data);

 			};

 			this._socket.onclose = function(evt) {

-				self._state = eclipse.debug.StatesEnum.STATE_DISCONNECTED;

-				model.getRoot(

-					function(root) {

-						treeWidget.refreshAndExpand("debug-tableTree", root);

-				});

+				self._state = self.StatesEnum.STATE_DISCONNECTED;

+				var location = dojo.byId("location");

+		        if (location) {

+					location.innerHTML = null;

+		        }

+				console.appendOutput("<< Disconnected from external browser >>");

+				console.setAcceptInput(false);

 			};

 			this._socket.onopen = function(evt) {

-				self._state = eclipse.debug.StatesEnum.STATE_CONNECTED;

-				model.getRoot(

-					function(root) {

-						treeWidget.refreshAndExpand("debug-tableTree", root);

-				});

+				self._state = self.StatesEnum.STATE_CONNECTED;

+				self.enable();

+				self._updateUrl();

 			};

 		}

-		RemoteDebugConnection.prototype = /** @lends eclipse.debug.RemoteDebugConnection.prototype */{

-			disable: function() {

-				if (this._state !== eclipse.debug.StatesEnum.STATE_ENABLED && this._state !== eclipse.debug.StatesEnum.STATE_SUSPENDED) {

-					return false;

-				}

-				var request = {

-					id: this._nextId++,

-					method: "Debugger.disable",

-					params: {}

-				};

-				var requestString = JSON.stringify(request);

-				var result = this._socket.send(requestString);

-				if (result) {

-					var self = this;

-					this._pendingResponses.push({

-						id: request.id,

-						action: function(event) {

-							self._state = eclipse.debug.StatesEnum.STATE_CONNECTED;

-							model.getRoot(

-								function(root) {

-									treeWidget.refreshAndExpand("debug-tableTree", root);

-								}

-							);

-						}

-					});

-				}

-				return result;

-			},

+		RemoteDebugTab.prototype = /** @lends RemoteDebugTab.prototype */{

 			enable: function() {

-				if (this._state !== eclipse.debug.StatesEnum.STATE_CONNECTED) {

+				if (this._state !== this.StatesEnum.STATE_CONNECTED) {

 					return false;

 				}

 				var request = {

@@ -103,20 +62,15 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 					this._pendingResponses.push({

 						id: request.id,

 						action: function(event) {

-							self._state = eclipse.debug.StatesEnum.STATE_ENABLED;

-							model.getRoot(

-								function(root) {

-									treeWidget.refreshAndExpand("debug-tableTree", root);

-								}

-							);

+							self._state = self.StatesEnum.STATE_ENABLED;

 						}

 					});

 				}

 				return result;

 			},

 			evaluate: function(expression) {

-				if (this._state !== eclipse.debug.StatesEnum.STATE_SUSPENDED &&

-						this._state !== eclipse.debug.StatesEnum.STATE_ENABLED) {

+				if (this._state !== this.StatesEnum.STATE_SUSPENDED &&

+						this._state !== this.StatesEnum.STATE_ENABLED) {

 					return false;

 				}

 				var request;

@@ -145,7 +99,7 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 					this._pendingResponses.push({

 						id: request.id,

 						action: function(event) {

-							alert("Evaluation Result: " + JSON.stringify(event.result.result));

+							console.appendOutput(JSON.stringify(event.result.result));

 						}

 					});

 				}

@@ -158,7 +112,7 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 				return this._url;

 			},

 			resume: function() {

-				if (this._state !== eclipse.debug.StatesEnum.STATE_SUSPENDED) {

+				if (this._state !== this.StatesEnum.STATE_SUSPENDED) {

 					return false;

 				}

 				var request = {

@@ -173,19 +127,14 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 					this._pendingResponses.push({

 						id: request.id,

 						action: function(event) {

-							self._state = eclipse.debug.StatesEnum.STATE_RESUMING;

-							model.getRoot(

-								function(root) {

-									treeWidget.refreshAndExpand("debug-tableTree", root);

-								}

-							);

+							self._state = self.StatesEnum.STATE_RESUMING;

 						}

 					});

 				}

 				return result;

 			},

 			suspend: function() {

-				if (this._state !== eclipse.debug.StatesEnum.STATE_ENABLED) {

+				if (this._state !== this.StatesEnum.STATE_ENABLED) {

 					return false;

 				}

 				var request = {

@@ -200,12 +149,7 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 					this._pendingResponses.push({

 						id: request.id,

 						action: function(event) {

-							self._state = eclipse.debug.StatesEnum.STATE_SUSPENDING;

-							model.getRoot(

-								function(root) {

-									treeWidget.refreshAndExpand("debug-tableTree", root);

-								}

-							);

+							self._state = self.StatesEnum.STATE_SUSPENDING;

 						}

 					});

 				}

@@ -217,20 +161,16 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 				var method = event.method;

 				if (method === "Debugger.paused") {

 					this._frameId = event.params.callFrames[0].callFrameId;

-					this._state = eclipse.debug.StatesEnum.STATE_SUSPENDED;

-					model.getRoot(

-						function(root) {

-							treeWidget.refreshAndExpand("debug-tableTree", root);

-						}

-					);

+					this._state = this.StatesEnum.STATE_SUSPENDED;

 				} else if (method === "Debugger.resumed") {

 					this._frameId = null;

-					this._state = eclipse.debug.StatesEnum.STATE_ENABLED;

-					model.getRoot(

-						function(root) {

-							treeWidget.refreshAndExpand("debug-tableTree", root);

-						}

-					);

+					this._state = this.StatesEnum.STATE_ENABLED;

+				} else if (method === "Debugger.globalObjectCleared") {

+					this._url = null;

+				} else if (method === "Debugger.scriptParsed") {

+					if (!this._url) {

+						this._updateUrl();

+					}

 				} else if (!method) {

 					for (var i = 0; i < this._pendingResponses.length; i++) {

 						var current = this._pendingResponses[i];

@@ -241,163 +181,68 @@ define(['require', 'dojo', 'orion/bootstrap', 'orion/commands', 'orion/fileClien
 						}

 					}

 				}

+			},

+			_updateUrl: function() {

+				// TODO is there really not a better request to send here?

+				var request = {

+					id: this._nextId++,

+					method: "Runtime.evaluate",

+					params: {

+						expression: "document.location.href"

+					}

+				};

+				var requestString = JSON.stringify(request);

+				var result = this._socket.send(requestString);

+				if (result) {

+					this._pendingResponses.push({

+						id: request.id,

+						action: function(event) {

+							var value = event.result.result.value;

+							if (value === "about:blank") {

+								this._url = null;

+							} else {

+								this._url = value;

+							}

+							var location = dojo.byId("location");

+					        if (location) {

+								location.innerHTML = this._url;

+					        }

+						}

+					});

+				}

+			},

+			

+			StatesEnum: {

+				STATE_DISCONNECTED: "Disconnected",

+				STATE_CONNECTED: "Connected",

+				STATE_ENABLED: "Debugging",

+				STATE_SUSPENDING: "Suspending...",

+				STATE_RESUMING: "Resuming...",

+				STATE_SUSPENDED: "Suspended"

 			}

 		};

-		return RemoteDebugConnection;

+		return RemoteDebugTab;

 	}());

-	

+

 	dojo.addOnLoad(function() {

 		mBootstrap.startup().then(function(core) {

 			var serviceRegistry = core.serviceRegistry;

 			var preferences = core.preferences;

 			document.body.style.visibility = "visible";

 			dojo.parser.parse();

-			

-			var commandService = new mCommands.CommandService({serviceRegistry: serviceRegistry});

+

+			commandService = new mCommands.CommandService({serviceRegistry: serviceRegistry});

 			var fileClient = new mFileClient.FileClient(serviceRegistry);

 			var searcher = new mSearchClient.Searcher({serviceRegistry: serviceRegistry, commandService: commandService, fileService: fileClient});

 			mGlobalCommands.generateBanner("toolbar", serviceRegistry, commandService, preferences, searcher);

-			

-			var renderer = new mDebugTree.DebugConnectionRenderer(commandService);

-			treeWidget = new mTreeTable.TableTree({

-				id: "debug-tableTree",

-				parent: dojo.byId("debug-table"),

-				model: model,

-				showRoot: false,

-				renderer: renderer

-			});

-			

-			var connectCommand = new mCommands.Command({

-				name: "Connect",

-				tooltip: "Connect to a new browser",

-				image: require.toUrl("images/add.gif"),

-				id: "eclipse.debug.connect",

-				groupId: "eclipse.debugGroup",

-				visibleWhen: function(item) {

-					return true;

-				},

-				callback: function() {

-					var dialog = new orion.widgets.NewSiteDialog({

-						title: "Enter browser debug port",

-						serviceRegistry: serviceRegistry,

-						func: function(name, workspace) {

-							var label = dojo.create("label", {id: "debug-port"});

-							label.style.display = "none";

-							label.innerHTML = name;

-							dojo.place(label, "orion-debugMessaging", "first");

-						}

-					});

-					dialog.startup();

-					dialog.show();

-				}

-			});

-			commandService.addCommand(connectCommand, "dom");

-			

-			var enableCommand = new mCommands.Command({

-				name: "Enable",

-				tooltip: "Enable the debugger in the target",

-				imageClass: "core-sprite-add",

-				id: "eclipse.debug.enable",

-				visibleWhen: function(item) {

-					return item.getState() === eclipse.debug.StatesEnum.STATE_CONNECTED;

-				},

-				callback: function(item, cmdId, imageId, userData) {

-					item.enable();

-				}

-			});

-			commandService.addCommand(enableCommand, "object");

-			

-			var disableCommand = new mCommands.Command({

-				name: "Disable",

-				tooltip: "Disable the debugger in the target",

-				imageClass: "core-sprite-problem",

-				id: "eclipse.debug.disable",

-				visibleWhen: function(item) {

-					return item.getState() !== eclipse.debug.StatesEnum.STATE_DISCONNECTED &&

-						item.getState() !== eclipse.debug.StatesEnum.STATE_CONNECTED;

-				},

-				callback: function(item, cmdId, imageId, userData) {

-					item.disable();

-				}

-			});

-			commandService.addCommand(disableCommand, "object");

-			

-			var suspendCommand = new mCommands.Command({

-				name: "Suspend",

-				tooltip: "Suspend execution in the target",

-				imageClass: "core-sprite-leftarrow",

-				id: "eclipse.debug.suspend",

-				visibleWhen: function(item) {

-					return item.getState() === eclipse.debug.StatesEnum.STATE_ENABLED;

-				},

-				callback: function(item, cmdId, imageId, userData) {

-					item.suspend();

-				}

-			});

-			commandService.addCommand(suspendCommand, "object");

-			

-			var evaluateCommand = new mCommands.Command({

-				name: "Evaluate",

-				tooltip: "Evaluate a JS expression in the target",

-				imageClass: "core-sprite-rename",

-				id: "eclipse.debug.evaluate",

-				visibleWhen: function(item) {

-					return item.getState() === eclipse.debug.StatesEnum.STATE_SUSPENDED ||

-						item.getState() === eclipse.debug.StatesEnum.STATE_ENABLED;

-				},

-				callback: function(item, cmdId, imageId, userData) {

-					var dialog = new orion.widgets.NewSiteDialog({

-						title: "Enter the JS Expression to Evaluate",

-						serviceRegistry: serviceRegistry,

-						func: function(name, workspace) {

-							item.evaluate(name);

-						}

-					});

-					dialog.startup();

-					dialog.show();

-				}

-			});

-			commandService.addCommand(evaluateCommand, "object");

-			

-			var resumeCommand = new mCommands.Command({

-				name: "Resume",

-				tooltip: "Resume execution in the target",

-				imageClass: "core-sprite-rightarrow",

-				id: "eclipse.debug.resume",

-				visibleWhen: function(item) {

-					return item.getState() === eclipse.debug.StatesEnum.STATE_SUSPENDED;

-				},

-				callback: function(item, cmdId, imageId, userData) {

-					item.resume();

-				}

+

+			var hash = dojo.hash();

+			var connection = new RemoteDebugTab(hash);

+			console = new mConsole.Console("debug-console");

+			console.addInputListener(function(inputEvent) {

+				connection.evaluate(inputEvent);

 			});

-			commandService.addCommand(resumeCommand, "object");

 			

-			commandService.registerCommandContribution("eclipse.debug.connect", 1, "pageActions");

-			commandService.registerCommandContribution("eclipse.debug.enable", 1, "connectionActions");

-			commandService.registerCommandContribution("eclipse.debug.disable", 2, "connectionActions");

-			commandService.registerCommandContribution("eclipse.debug.suspend", 3, "connectionActions");

-			commandService.registerCommandContribution("eclipse.debug.evaluate", 4, "connectionActions");

-			commandService.registerCommandContribution("eclipse.debug.resume", 5, "connectionActions");

-			mGlobalCommands.generateDomCommandsInBanner(commandService, {});

-			

-			var debugMessaging = dojo.byId("orion-debugMessaging");

-			if (debugMessaging) {

-				debugMessaging.addEventListener("DOMNodeInserted", function() {

-					var responseLabel = dojo.byId("debug-response");

-					if (!responseLabel) {

-						return;

-					}

-					var info = JSON.parse(responseLabel.innerHTML);

-					var connections = [];

-					for (var i = 0; i < info.length; i++) {

-						var connection = new eclipse.debug.RemoteDebugConnection(info[i]);

-						connections.push(connection);

-					}

-					model.setRoot(connections);

-					treeWidget.refreshAndExpand("debug-tableTree", connections);

-				});

-			}

 		});

 	});

 });

diff --git a/bundles/org.eclipse.orion.client.debug/web/debugPlugin.html b/bundles/org.eclipse.orion.client.debug/web/debugPlugin.html
index 3eeb6f1..15476ad 100644
--- a/bundles/org.eclipse.orion.client.debug/web/debugPlugin.html
+++ b/bundles/org.eclipse.orion.client.debug/web/debugPlugin.html
@@ -3,21 +3,21 @@
 <head>

 	<meta name="copyright" content="Copyright (c) IBM Corporation and others 2011." >

 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

-	<script src="../../orion/plugin.js"></script>

-	<script src="../../org.dojotoolkit/dojo/dojo.js.uncompressed.js"></script>

+	<script src="../orion/plugin.js"></script>

+	<script src="../org.dojotoolkit/dojo/dojo.js.uncompressed.js"></script>

 	<script>

 		var serviceImpl = {

 			run: function(text) {}

 		};

 		window.onload = function() {

-			var provider = new PluginProvider();

+			var provider = new eclipse.PluginProvider();

 			provider.registerServiceProvider(

 				"orion.page.link",

 				serviceImpl,

 				{

 					name: "Debug",

 					id: "orion.debug",

-					href: "/debug/debug.html"

+					href: "/debug/connections.html"

 				}

 			);

 			provider.connect();

diff --git a/bundles/org.eclipse.orion.client.debug/web/debugTree.js b/bundles/org.eclipse.orion.client.debug/web/debugTree.js
deleted file mode 100644
index 37681dd..0000000
--- a/bundles/org.eclipse.orion.client.debug/web/debugTree.js
+++ b/dev/null
@@ -1,101 +0,0 @@
-/*******************************************************************************

-* @license

-* Copyright (c) 2011 IBM Corporation and others.

-* All rights reserved. This program and the accompanying materials are made

-* available under the terms of the Eclipse Public License v1.0

-* (http://www.eclipse.org/legal/epl-v10.html), and the Eclipse Distribution

-* License v1.0 (http://www.eclipse.org/org/documents/edl-v10.html).

-*

-* Contributors: IBM Corporation - initial API and implementation

-******************************************************************************/

-

-/*global dojo eclipse:true */

-/*jslint browser:true devel:true*/

-

-define(['dojo'], function(dojo) {

-

-	var eclipse = {};

-	eclipse.debug = {};

-	

-	eclipse.debug.DebugConnectionTreeModel = (function() {

-		function DebugConnectionTreeModel(/**String*/ id) {

-			this._id = id;

-			this._root = [];

-		}

-		DebugConnectionTreeModel.prototype = /** @lends eclipse.debug.DebugConnectionTreeModel.prototype */{

-			getRoot: function(/**function*/ onItem) {

-				onItem(this._root);

-			},

-			getChildren: function(/**dojo.data.Item*/ parentItem, /**Function(items)*/ onComplete) {

-				onComplete(parentItem === this._root ? this._root : []);

-			},

-			getId: function(/**dojo.data.Item|String*/ item) {

-				return (item === this._root || item === this._id) ? this._id : item.Id;

-			},

-			setRoot: function(/**Array*/ value) {

-				this._root = value;

-			}

-		};

-		return DebugConnectionTreeModel;

-	}());

-	

-	eclipse.debug.DebugConnectionRenderer = (function() {

-		function DebugConnectionRenderer(commandService) {

-			this._commandService = commandService;

-		}

-		DebugConnectionRenderer.prototype = /** @lends eclipse.debug.DebugConnectionRenderer.prototype */{

-			initTable: function (tableNode, tableTree) {

-				this.tableTree = tableTree;

-				dojo.addClass(tableNode, "treetable");

-				var header = dojo.create("thead", null);

-				dojo.create("th", {innerHTML: "URL"}, header, "last");

-				dojo.create("th", {innerHTML: "Status"}, header, "last");

-				dojo.create("th", {innerHTML: "Actions"}, header, "last");

-				tableNode.appendChild(header);

-			},

-			render: function(item, tableRow) {

-				dojo.style(tableRow, "verticalAlign", "baseline");

-				dojo.addClass(tableRow, "treeTableRow");

-				var urlCol = dojo.create("td", {id: tableRow.id + "col1"});

-				var stateCol = dojo.create("td", {id: tableRow.id + "col2"});

-				var actionCol = dojo.create("td", {id: tableRow.id + "col3"});

-				

-				dojo.place(document.createTextNode(item.getUrl()), urlCol, "last");

-				dojo.place(document.createTextNode(item.getState()), stateCol, "last");

-				

-				/* Action column */

-				var actionsWrapper = dojo.create(

-					"span",

-					{id: tableRow.id + "actionswrapper", style: {visibility: "hidden"}},

-					actionCol,

-					"only");

-				dojo.connect(tableRow, "onmouseover", tableRow, function() {

-					dojo.style(actionsWrapper, "visibility", "visible");

-				});

-				dojo.connect(tableRow, "onmouseout", tableRow, function() {

-					dojo.style(actionsWrapper, "visibility", "hidden");

-				});

-				this._commandService.renderCommands(actionsWrapper, "object", item, {}, "image");

-				

-				dojo.place(urlCol, tableRow, "last");

-				dojo.place(stateCol, tableRow, "last");

-				dojo.place(actionCol, tableRow, "last");

-			},

-			rowsChanged: function() {

-				dojo.query(".treeTableRow").forEach(function(node, i) {

-					if (i % 2) {

-						dojo.addClass(node, "darkTreeTableRow");

-						dojo.removeClass(node, "lightTreeTableRow");

-					} else {

-						dojo.addClass(node, "lightTreeTableRow");

-						dojo.removeClass(node, "darkTreeTableRow");

-					}

-				});

-			},

-			labelColumnIndex: 0

-		};

-		return DebugConnectionRenderer;

-	}());

-	

-	return eclipse.debug;

-});