more tweaks

Author: pfitzseb

lib/debugger/debugger-pane.js

@@ -8,7 +8,7 @@ import { CompositeDisposable, TextEditor } from 'atom'
 import PaneItem from '../util/pane-item'
 import { open } from '../util/opener'
 import views from '../util/views'
-import { DebuggerToolbar } from './toolbar'
+import { DebuggerToolbar, buttonView } from './toolbar'
 
 // pane for side-to-side view of compiled code and source code
 export default class DebuggerPane extends PaneItem {
@@ -23,7 +23,7 @@ export default class DebuggerPane extends PaneItem {
     DebuggerPane.subs.dispose()
   }
 
-  constructor (stepper, breakpointManager, buttons=[]) {
+  constructor (stepper, breakpointManager, buttons=[], startButtons=[]) {
     super()
 
     this.subs = new CompositeDisposable()
@@ -32,6 +32,7 @@ export default class DebuggerPane extends PaneItem {
     this.breakpointManager = breakpointManager
 
     this.toolbar = new DebuggerToolbar(buttons)
+    this.startButtons = startButtons
 
     this.stepper.onStep(arg => this.updateStepper(arg))
     this.breakpointManager.onUpdate(arg => this.updateBreakpoints(arg))
@@ -107,8 +108,28 @@ export default class DebuggerPane extends PaneItem {
   toolbarView () {
     const expressionHidden = !this.info.text
 
+    let run = () => {
+      const ed = atom.workspace.getActiveTextEditor()
+      if (ed) {
+        atom.commands.dispatch(atom.views.getView(ed), this.refs.runnerSelector.value)
+      }
+    }
+
     return  <div className="item toolbar">
       <div className="inner-toolbar">
+        <div className="debugger-runner">
+          <button className="btn icon icon-triangle-right btn-color-success" onclick={run}>
+          </button>
+          <select className="input-select" ref="runnerSelector">
+            {
+              this.startButtons.map(btn => {
+                return <option value={btn.command}>
+                  { btn.text || ''}
+                </option>
+              })
+            }
+          </select>
+        </div>
         {toView(this.toolbar.view)}
         <Tip alt={this.compileModeTip}>
           <div className="flex-table-container">

styles/debugger.less

@@ -33,12 +33,15 @@
     line-height: 2.6em;
     .ink-debug-toolbar {
       width: 100%;
-      
+
       .ink-btn-group-variable-width {
         width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
 
         .ink-btn-variable-width {
-          width: 14%;
+          flex: 1;
           min-width: 3em;
         }
       }
@@ -49,6 +52,41 @@
       flex-direction: row;
       flex-wrap: wrap;
 
+      .debugger-runner {
+        width: ~"calc(100% + 2em + 10px)";
+        margin: 0 -1em 0 -1em;
+        padding: 0 ~"calc(1em + 5px)" 0 ~"calc(1em + 5px)";
+        background-color: @button-background-color;
+        border-bottom: 1px solid @pane-item-border-color;
+
+        display: flex;
+
+        .btn {
+          background: @button-background-color;
+          border: none;
+          border-radius: 0;
+          border-left: 1px solid @pane-item-border-color;
+          &:focus {
+            border: none;
+            box-shadow: none;
+            outline: none;
+          }
+        }
+        select {
+          background: @button-background-color;
+          border: none;
+          border-left: 1px solid @pane-item-border-color;
+          padding-left: 1em;
+          border-radius: 0;
+          width: inherit;
+          &:focus {
+            border: none;
+            box-shadow: none;
+            border-left: 1px solid @pane-item-border-color;
+          }
+        }
+      }
+
       .flex-table-container {
         right: @component-padding;
         top: @component-padding;