Populate the dropdown on the debug-toolbar using DebugConfigManager

Author: enlight

debug-toolbar/debug-toolbar.html

@@ -53,11 +53,12 @@
         <paper-icon-button id="startButton" icon="av:play-arrow" alt="Start Debugging"></paper-icon-button>
         <paper-icon-button id="stopButton" icon="av:stop" alt="Stop Debugging"></paper-icon-button>
       </div>
-      <paper-dropdown-menu id="configs" label="Configurations" no-label-float>
+      <paper-dropdown-menu id="configs" label="Configuration" no-label-float>
         <paper-menu class="dropdown-content">
           <paper-item id="newConfigItem">New...</paper-item>
-          <paper-item>Launch</paper-item>
-          <paper-item>Attach</paper-item>
+          <template is="dom-repeat" items="[[debugConfigs]]">
+            <paper-item>[[item]]</paper-item>
+          </template>
         </paper-menu>
       </paper-dropdown-menu>
       <paper-icon-button icon="av:pause" alt="Pause Debugging" disabled></paper-icon-button>

debug-toolbar/debug-toolbar.ts

@@ -2,7 +2,7 @@
 // MIT License, see LICENSE file for full terms.
 
 import * as pd from 'polymer-ts-decorators';
-import { Disposable } from 'event-kit';
+import { CompositeDisposable, Disposable } from 'event-kit';
 import addDisposableListener from '../lib/disposable-dom-event-listener';
 import * as debugWorkbench from '../lib/debug-workbench';
 import { IDebugSession } from '../lib/debug-engine'
@@ -27,10 +27,18 @@ const START_DEBUGGING_EVENT = 'start-debugging';
 const STOP_DEBUGGING_EVENT = 'stop-debugging';
 const OPEN_SETTINGS_EVENT = 'open-settings';
 
+function getDebugConfigNames(): string[] {
+  return debugWorkbench.debugConfigs.getAll().map((debugConfig) => debugConfig.name);
+}
+
 @pd.is('debug-workbench-debug-toolbar')
 export default class DebugToolbarElement {
+  private subscriptions: CompositeDisposable;
   private debugSession: IDebugSession;
 
+  @pd.property({ type: Array, value: getDebugConfigNames })
+  private debugConfigs: string[];
+  
   static create(): Promise<IDebugToolbarElement> {
 	  return debugWorkbench.createElement((<any> DebugToolbarElement.prototype).is);
   }
@@ -50,6 +58,41 @@ export default class DebugToolbarElement {
     return addDisposableListener(<any> this, OPEN_SETTINGS_EVENT, callback);
   }
 
+  created(): void {
+    this.subscriptions = new CompositeDisposable();
+  }
+  
+  ready(): void {
+    this.subscriptions.add(debugWorkbench.debugConfigs.onDidAddConfig(
+      (addedConfig) => {
+        base(this).push('debugConfigs', addedConfig.name);
+      }
+    ));
+    this.subscriptions.add(debugWorkbench.debugConfigs.onDidRemoveConfig(
+      (removedConfig) => {
+        const idx = this.debugConfigs.indexOf(removedConfig.name);
+        if (idx > -1) {
+          base(this).splice('debugConfigs', idx, 1);
+        }
+      }
+    ));
+    this.subscriptions.add(debugWorkbench.debugConfigs.onDidRenameConfig(
+      ({ newName, oldName }) => {
+        const idx = this.debugConfigs.indexOf(oldName);
+        if (idx > -1) {
+          base(this).set(['debugConfigs', idx], newName);
+        }
+      }
+    ));
+  }
+  
+  destroy(): void {
+    if (this.subscriptions) {
+      this.subscriptions.dispose();
+      this.subscriptions = null;
+    }
+  }
+    
   @pd.listener('startButton.tap')
   private startDebugging(): void {
     base(this).fire(START_DEBUGGING_EVENT);

index.d.ts

@@ -215,14 +215,19 @@ declare module 'debug-workbench-core-components/lib/disposable-dom-event-listene
 declare module 'debug-workbench-core-components/debug-toolbar/debug-toolbar' {
 	import { Disposable } from 'event-kit';
 	export default class DebugToolbarElement {
+	    private subscriptions;
 	    private debugSession;
+	    private debugConfigs;
 	    static create(): Promise<IDebugToolbarElement>;
 	    /** Add a listener to be called when the Start button is pressed. */
 	    onStartButtonPressed(callback: EventListener): Disposable;
 	    /** Add a listener to be called when the Stop button is pressed. */
 	    onStopButtonPressed(callback: EventListener): Disposable;
 	    /** Add a listener to be called when the Settings button is pressed. */
 	    onSettingsButtonPressed(callback: EventListener): Disposable;
+	    created(): void;
+	    ready(): void;
+	    destroy(): void;
 	    private startDebugging();
 	    private stopDebugging();
 	    private openSettings();