open devtools link within atom

lib/index.js

@@ -5,6 +5,7 @@ import os from 'os';
 import path from 'path';
 import Toolbar from './ui/toolbar';
 import Console from './ui/console';
+import Browser from './ui/browser';
 import GenerateDialog from './ui/generateDialog';
 import NewProjectDialog from './ui/newProjectDialog';
 import Appc from './appc';
@@ -199,6 +200,7 @@ export default {
 	deactivate() {
 		this.toolbar.destroy();
 		this.console.destroy();
+		this.browser.destroy();
 		this.disposable.dispose();
 		this.projectDisposable.dispose();
 	},
@@ -280,8 +282,11 @@ export default {
 			if (!this.toolbar) {
 				this.toolbar = new Toolbar();
 			}
+			if (!this.browser) {
+				this.browser = new Browser();
+			}
 			if (!this.console) {
-				this.console = new Console(this.serializedState.console);
+				this.console = new Console(this.serializedState.console, this.browser);
 			}
 
 			const text = (Project.isTitaniumApp) ? `${Project.appName()} | ${Project.sdk()}` : `${Project.appName()} | ${Project.platforms().map(platform => Utils.nameForPlatform(platform)).join(', ')}`;

lib/ui/browser.js

@@ -0,0 +1,60 @@
+'use babel';
+/** @jsx etch.dom */
+
+import etch from 'etch';
+
+import { CompositeDisposable } from 'atom';
+
+export default class Browser {
+
+	constructor() {
+		this.state = {
+			url: ''
+		};
+
+		etch.initialize(this);
+	}
+
+	async destroy() {
+		await etch.destroy(this);
+	}
+
+	render() {
+		return <div id="appc-browser" className="appc-browser native-key-bindings" on={{ contextmenu: this.onContextMenu }}>
+			<div className="webview-container">
+				<webview src={this.state.url} tabindex="0" on={{ 'dom-ready': this.onReady }}/>
+			</div>
+		</div>;
+	}
+
+	onContextMenu(e) {
+		e.preventDefault();
+		e.cancelBubble = true;
+		return false;
+	}
+
+	onReady(e) {
+		e.target.focus();
+	}
+
+	update() {
+		return etch.update(this);
+	}
+
+	getTitle() {
+		return 'debugger';
+	}
+
+	show() {
+		atom.workspace.open(this, {
+			activatePane: true,
+			activateItem: true,
+			searchAllPanes: true
+		});
+	}
+
+	setUrl(url) {
+		this.state.url = url;
+		this.update();
+	}
+}

lib/ui/console.js

@@ -98,7 +98,7 @@ export default class Console {
 	 * @param {Boolean} autoScroll		auto-scroll console window
 	 * @param {Boolean} showOnBuild		display console when running build command
 	 */
-	constructor(opts) {
+	constructor(opts, browser) {
 		this.state = {
 			isHidden: true,
 			logLevel: 'trace',
@@ -107,6 +107,8 @@ export default class Console {
 		};
 		opts && Object.assign(this.state, opts);
 
+		this.browser = browser;
+
 		etch.initialize(this);
 
 		if (!this.state.isHidden) {
@@ -274,6 +276,7 @@ export default class Console {
 			} else {
 				this.info(line);
 			}
+			this.openDevtools(line);
 		}
 	}
 
@@ -322,6 +325,15 @@ export default class Console {
 		this.refs.log.write(text, 'error');
 	}
 
+	openDevtools(line) {
+		let matchResult = line.match(/(chrome-devtools.*)$/);
+		if (matchResult) {
+			let url = matchResult[0];
+			this.browser.setUrl(url);
+			this.browser.show();
+		}
+	}
+
 	/**
 	 * Show / hide console
 	 */

styles/appc.less

@@ -375,3 +375,15 @@
         border: none;
     }
 }
+
+.appc-browser {
+    .webview-container {
+        width: 100%;
+        height: 100%;
+
+        webview {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}