.

app/main.js

@@ -1,4 +1,6 @@
 const electron = require('electron')
+require('electron-debug')({enabled: true, showDevTools: (process.argv.indexOf('--debug') != -1) ? 'undocked' : false})
+
 
 let app = electron.app
 

app/package.json

@@ -17,7 +17,7 @@
     "@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.22",
     "devtron": "1.4.0",
     "electron-config": "0.2.1",
-    "electron-debug": "1.0.1",
+    "electron-debug": "^1.0.1",
     "electron-is-dev": "0.1.2",
     "fs-promise": "^2.0.2",
     "js-yaml": "3.8.2",

terminus-core/src/components/appRoot.pug

@@ -3,7 +3,7 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara
 .content(
     [class.tabs-on-top]='config.store.appearance.tabsOnTop'    
 )
-    .tab-bar
+    .tab-bar(*ngIf='app.tabs.length > 0')
         button.btn.btn-secondary(
             *ngFor='let button of getLeftToolbarButtons()',
             [title]='button.title',
@@ -32,6 +32,8 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara
         )
             i.fa([class]='"fa fa-" + button.icon')
 
+    start-page(*ngIf='app.tabs.length == 0')
+
     tab-body(
         *ngFor='let tab of app.tabs; trackBy: tab?.id', 
         [active]='tab == app.activeTab',

terminus-core/src/components/startPage.pug

@@ -0,0 +1,7 @@
+div
+    button.btn.btn-outline-info.btn-lg.btn-block(
+        *ngFor='let button of getButtons()',
+        (click)='button.click()',
+    )
+        i.fa([class]='"fa fa-" + button.icon')
+        span {{button.title}}

terminus-core/src/components/startPage.scss

@@ -0,0 +1,13 @@
+:host {
+    display: flex;
+    flex: auto;
+}
+
+:host div {
+    flex: none;
+    margin: auto;
+    width: 400px;
+    max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+}

terminus-core/src/components/startPage.ts

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core'
+import { IToolbarButton, ToolbarButtonProvider } from '../api'
+
+@Component({
+  selector: 'start-page',
+  template: require('./startPage.pug'),
+  styles: [require('./startPage.scss')],
+})
+export class StartPageComponent {
+    constructor(
+        @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
+    ) { }
+
+    getButtons (): IToolbarButton[] {
+        return this.toolbarButtonProviders
+            .map(provider => provider.provide())
+            .reduce((a, b) => a.concat(b))
+            .sort((a: IToolbarButton, b: IToolbarButton) => (a.weight || 0) - (b.weight || 0))
+    }
+}

terminus-core/src/defaultConfigStructure.yaml

@@ -1,3 +0,0 @@
-appearance: { }
-hotkeys: { }
-terminal: { }

terminus-core/src/index.ts

@@ -20,6 +20,7 @@ import { ThemesService } from './services/themes'
 
 import { AppRootComponent } from './components/appRoot'
 import { TabBodyComponent } from './components/tabBody'
+import { StartPageComponent } from './components/startPage'
 import { TabHeaderComponent } from './components/tabHeader'
 import { TitleBarComponent } from './components/titleBar'
 
@@ -57,6 +58,7 @@ const PROVIDERS = [
     ],
     declarations: [
         AppRootComponent,
+        StartPageComponent,
         TabBodyComponent,
         TabHeaderComponent,
         TitleBarComponent,

terminus-core/src/services/config.ts

@@ -9,7 +9,11 @@ import { ConfigProvider } from '../api/configProvider'
 export class ConfigProxy {
     constructor (real: any, defaults: any) {
         for (let key in defaults) {
-            if (defaults[key] instanceof Object && Object.keys(defaults[key]).length > 0) {
+            if (
+                defaults[key] instanceof Object &&
+                !(defaults[key] instanceof Array) &&
+                Object.keys(defaults[key]).length > 0
+            ) {
                 if (!real[key]) {
                     real[key] = {}
                 }

terminus-core/src/services/hostApp.ts

@@ -51,15 +51,15 @@ export class HostAppService {
 
     private logger: Logger;
 
-    getWindow() {
+    getWindow () {
         return this.electron.app.window
     }
 
-    getShell() {
+    getShell () {
         return this.electron.shell
     }
 
-    getAppPath() {
+    getAppPath () {
         return this.electron.app.getAppPath()
     }
 
@@ -68,7 +68,7 @@ export class HostAppService {
     }
 
     openDevTools() {
-        this.electron.app.webContents.openDevTools()
+        this.getWindow().webContents.openDevTools()
     }
 
     setCloseable(flag: boolean) {

terminus-core/src/theme.scss

@@ -62,22 +62,6 @@ $popover-bg:                     $body-bg2;
 
 @import '~bootstrap/scss/bootstrap.scss';
 
-.nav-tabs {
-    background: $btn-secondary-bg;
-    .nav-link {
-        transition: 0.25s all;
-        border-bottom-color: $nav-tabs-border-color;
-    }
-}
-
-ngb-tabset .tab-content {
-    padding-top: 20px;
-}
-
-[ngbradiogroup] > label.active {
-    background: $blue;
-}
-
 title-bar {
     background: $body-bg2;
 
@@ -294,3 +278,25 @@ hotkey-input-modal {
 .form-group label {
     margin-bottom: 2px;
 }
+
+.nav-tabs {
+    background: $btn-secondary-bg;
+    .nav-link {
+        transition: 0.25s all;
+        border-bottom-color: $nav-tabs-border-color;
+    }
+}
+
+ngb-tabset .tab-content {
+    padding-top: 20px;
+}
+
+[ngbradiogroup] > label.active {
+    background: $blue;
+}
+
+.btn {
+    i + * {
+        margin-left: 5px;
+    }
+}

terminus-settings/src/components/settingsTab.pug

@@ -132,6 +132,13 @@ ngb-tabset.vertical(type='tabs')
                                     step='0.01'
                                 )
 
+                    .form-group
+                        label Debugging
+                        div
+                            button.btn.btn-secondary((click)='hostApp.openDevTools()')
+                                i.fa.fa-bug
+                                span Open DevTools
+
     ngb-tab
         template(ngbTabTitle)
             | Hotkeys

terminus-settings/src/components/settingsTab.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core'
-import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme } from 'terminus-core'
+import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme, HostAppService } from 'terminus-core'
 
 import { SettingsTabProvider } from '../api'
 
@@ -20,6 +20,7 @@ export class SettingsTabComponent extends BaseTabComponent {
         public config: ConfigService,
         private electron: ElectronService,
         public docking: DockingService,
+        public hostApp: HostAppService,
         @Inject(HotkeyProvider) hotkeyProviders: HotkeyProvider[],
         @Inject(SettingsTabProvider) public settingsProviders: SettingsTabProvider[],
         @Inject(Theme) public themes: Theme[],