diff --git a/lib/index.js b/lib/index.js
index 1d26afde..422855a0 100644
--- a/lib/index.js
+++ b/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(', ')}`;
diff --git a/lib/ui/browser.js b/lib/ui/browser.js
new file mode 100644
index 00000000..dd6a1ef7
--- /dev/null
+++ b/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
;
+ }
+
+ 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();
+ }
+}
diff --git a/lib/ui/console.js b/lib/ui/console.js
index fe7239a3..1b93748c 100644
--- a/lib/ui/console.js
+++ b/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
*/
diff --git a/styles/appc.less b/styles/appc.less
index 4919347b..09a40ee2 100644
--- a/styles/appc.less
+++ b/styles/appc.less
@@ -375,3 +375,15 @@
border: none;
}
}
+
+.appc-browser {
+ .webview-container {
+ width: 100%;
+ height: 100%;
+
+ webview {
+ width: 100%;
+ height: 100%;
+ }
+ }
+}