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%; + } + } +}