Merge pull request #256 from JunoLab/sp/debugtweaks

debugger 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">

lib/debugger/toolbar.js

@@ -8,19 +8,20 @@ export class DebuggerToolbar {
     this.subs = new CompositeDisposable()
 
     let group = document.createElement('div')
-    group.classList.add('btn-group', 'btn-group-sm')
+    group.classList.add('btn-group', 'btn-group-sm', 'ink-btn-group-variable-width')
     buttons.forEach((b) => group.appendChild(this.buttonView(b)))
 
     this.view = document.createElement('div')
     this.view.className = 'ink-debug-toolbar'
     this.view.appendChild(group)
   }
 
-  buttonView ({icon, text, tooltip, command}) {
+  buttonView ({icon, text, tooltip, command, color}) {
     let btn = document.createElement('button')
-    btn.classList.add('btn', 'btn-primary')
+    btn.classList.add('btn', 'ink-btn-variable-width')
     if (text) btn.innerText = text
     if (icon) btn.classList.add(`icon-${icon}`)
+    if (color) btn.classList.add(`btn-color-${color}`)
     btn.onclick = () => atom.commands.dispatch(atom.views.getView(atom.workspace), command)
     this.subs.add(atom.tooltips.add(btn, {
       title: tooltip,

styles/debugger.less

@@ -31,12 +31,62 @@
   .toolbar {
     padding: 0em 1em 0.5em 1em;
     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 {
+          flex: 1;
+          min-width: 3em;
+        }
+      }
+    }
 
     .inner-toolbar {
       display: flex;
       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;

styles/ink.less

@@ -7,6 +7,23 @@
 @import "ui-variables";
 @import "syntax-variables";
 
+
+.btn {
+  &.btn-color-primary {}
+  &.btn-color-info {
+    color: @background-color-info;
+  }
+  &.btn-color-success {
+    color: @background-color-success;
+  }
+  &.btn-color-warning {
+      color: @background-color-warning;
+  }
+  &.btn-color-error {
+    color: @background-color-error;
+  }
+}
+
 .ink .markdown {
   font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;