add breakpoint view

Author: kiddkai

lib/breakpoint-item-view.coffee

@@ -0,0 +1,18 @@
+{View} = require 'atom'
+debuggerContext = require './debugger'
+
+module.exports =
+class BreakpointItemView extends View
+  @content: (breakpoint) ->
+    @li class: "breakpoint-item-view", =>
+      @div class: "details", =>
+        @span class: 'number', "#{breakpoint.number}"
+        @span class: 'path', "/path/to/js/file.js"
+        @span class: 'line', "#{breakpoint.line}"
+
+      @div class: "loading", =>
+        @span "loading ..."
+
+
+  initialize: (breakpoint) ->
+    @breakpoint = breakpoint

lib/breakpoint-view.coffee

@@ -0,0 +1,20 @@
+{View} = require 'atom'
+debuggerContext = require './debugger'
+BreakpointItemView = require './breakpoint-item-view'
+
+module.exports =
+class BreakpointView extends View
+  @content: ->
+    @div class: "breakpoint-view", =>
+      @ul class: 'list-group', outlet: 'breakpointList', =>
+
+  initialize: ->
+    @breakpoints = debuggerContext.breakpoints
+
+    @breakpoints.on 'change', => @showBreakpoints()
+
+  showBreakpoints: ->
+    @breakpointList.empty()
+
+    for breakpoint in @breakpoints.getBreakpoints()
+      @breakpointList.append(new BreakpointItemView(breakpoint))

spec/breakpoint-view-spec.coffee

@@ -0,0 +1,31 @@
+{EventEmitter} = require 'events'
+
+BreakpointView = require '../lib/breakpoint-view'
+debuggerContext = require '../lib/debugger'
+
+describe 'Breakpoint View', ->
+
+  breakpointView = null
+  breakpointsStub = null
+  procStub = null
+
+  beforeEach ->
+    breakpoints = debuggerContext.breakpoints
+    breakpointsStub = new EventEmitter
+
+    debuggerContext.breakpoints = breakpointsStub
+    breakpointView = new BreakpointView
+
+    breakpointsStub.getBreakpoints = jasmine.createSpy().andReturn([{
+      number: 1,
+      line: 100,
+      column: 10
+      enabled: true
+      }]);
+
+    debuggerContext.breakpoints = breakpoints
+
+  it 'should be able to shows all the breakpoints in the list', ->
+    expect(breakpointView.find('.breakpoint-item-view').length).toBe(0);
+    breakpointsStub.emit('change');
+    expect(breakpointView.find('.breakpoint-item-view').length).toBe(1);

stylesheets/breakpoint-item-view.less

@@ -0,0 +1,19 @@
+.node-debugger {
+  .breakpoint-item-view {
+
+    &.loading {
+      .details {
+        display: none;
+      }
+
+      .loading {
+        display: block;
+      }
+    }
+
+    .loading: {
+      display: none;
+    }
+
+  }
+}

stylesheets/functional-view.less

@@ -0,0 +1,25 @@
+.node-debugger {
+  .functional-view {
+    .functional {
+      display: none;
+    }
+
+    &.console {
+      .functional.console {
+        display: block;
+      }
+    }
+
+    &.breakpoint {
+      .functional.breakpoint {
+        display: block;
+      }
+    }
+
+    &.frame {
+      .functional.frame {
+        display: block;
+      }
+    }
+  }
+}