Add a package config panel with the list of enabled packages

spec/app/general-config-panel-spec.coffee

@@ -1,45 +0,0 @@
-GeneralConfigPanel = require 'general-config-panel'
-
-describe "GeneralConfigPanel", ->
-  [panel, configObserver, observeSubscription] = []
-
-  beforeEach ->
-    configObserver = jasmine.createSpy("configObserver")
-    config.set('core.disabledPackages', ['toml', 'wrap-guide'])
-    observeSubscription = config.observe('core.disabledPackages', configObserver)
-    configObserver.reset()
-    panel = new GeneralConfigPanel
-
-  afterEach ->
-    observeSubscription.cancel()
-
-  describe "available / disabled packages", ->
-    it "lists all available packages, with an unchecked checkbox next to packages in the core.disabledPackages array", ->
-      treeViewLi = panel.packageList.find("li[name='tree-view']")
-      expect(treeViewLi).toExist()
-      expect(treeViewLi.find("input[type='checkbox']").attr('checked')).toBeTruthy()
-
-      tomlLi = panel.packageList.find("li[name='toml']")
-      expect(tomlLi).toExist()
-      expect(tomlLi.find("input[type='checkbox']").attr('checked')).toBeFalsy()
-
-      wrapGuideLi = panel.packageList.find("li[name='wrap-guide']")
-      expect(wrapGuideLi).toExist()
-      expect(wrapGuideLi.find("input[type='checkbox']").attr('checked')).toBeFalsy()
-
-    describe "when the core.disabledPackages array changes", ->
-      it "updates the checkboxes for newly disabled / enabled packages", ->
-        config.set('core.disabledPackages', ['wrap-guide', 'tree-view'])
-        expect(panel.find("li[name='tree-view'] input[type='checkbox']").attr('checked')).toBeFalsy()
-        expect(panel.find("li[name='toml'] input[type='checkbox']").attr('checked')).toBeTruthy()
-        expect(panel.find("li[name='wrap-guide'] input[type='checkbox']").attr('checked')).toBeFalsy()
-
-    describe "when a checkbox is unchecked", ->
-      it "adds the package name to the disabled packages array", ->
-        panel.find("li[name='tree-view'] input[type='checkbox']").attr('checked', false).change()
-        expect(configObserver).toHaveBeenCalledWith(['toml', 'wrap-guide', 'tree-view'])
-
-    describe "when a checkbox is checked", ->
-      it "removes the package name from the disabled packages array", ->
-        panel.find("li[name='toml'] input[type='checkbox']").attr('checked', true).change()
-        expect(configObserver).toHaveBeenCalledWith(['wrap-guide'])

spec/app/package-config-panel-spec.coffee

@@ -0,0 +1,41 @@
+PackageConfigPanel = require 'package-config-panel'
+
+describe "PackageConfigPanel", ->
+  [panel, configObserver] = []
+
+  beforeEach ->
+    configObserver = jasmine.createSpy("configObserver")
+    observeSubscription = config.observe('core.disabledPackages', configObserver)
+    config.set('core.disabledPackages', ['toml', 'wrap-guide'])
+    configObserver.reset()
+    panel = new PackageConfigPanel
+
+  it "lists all available packages, with an unchecked checkbox next to packages in the core.disabledPackages array", ->
+    treeViewTr = panel.packageTableBody.find("tr[name='tree-view']")
+    expect(treeViewTr).toExist()
+    expect(treeViewTr.find("input[type='checkbox']").attr('checked')).toBeTruthy()
+
+    tomlTr = panel.packageTableBody.find("tr[name='toml']")
+    expect(tomlTr).toExist()
+    expect(tomlTr.find("input[type='checkbox']").attr('checked')).toBeFalsy()
+
+    wrapGuideTr = panel.packageTableBody.find("tr[name='wrap-guide']")
+    expect(wrapGuideTr).toExist()
+    expect(wrapGuideTr.find("input[type='checkbox']").attr('checked')).toBeFalsy()
+
+  describe "when the core.disabledPackages array changes", ->
+    it "updates the checkboxes for newly disabled / enabled packages", ->
+      config.set('core.disabledPackages', ['wrap-guide', 'tree-view'])
+      expect(panel.find("tr[name='tree-view'] input[type='checkbox']").attr('checked')).toBeFalsy()
+      expect(panel.find("tr[name='toml'] input[type='checkbox']").attr('checked')).toBeTruthy()
+      expect(panel.find("tr[name='wrap-guide'] input[type='checkbox']").attr('checked')).toBeFalsy()
+
+  describe "when a checkbox is unchecked", ->
+    it "adds the package name to the disabled packages array", ->
+      panel.find("tr[name='tree-view'] input[type='checkbox']").attr('checked', false).change()
+      expect(configObserver).toHaveBeenCalledWith(['toml', 'wrap-guide', 'tree-view'])
+
+  describe "when a checkbox is checked", ->
+    it "removes the package name from the disabled packages array", ->
+      panel.find("tr[name='toml'] input[type='checkbox']").attr('checked', true).change()
+      expect(configObserver).toHaveBeenCalledWith(['wrap-guide'])

src/app/config-view.coffee

@@ -3,6 +3,7 @@ $ = require 'jquery'
 _ = require 'underscore'
 GeneralConfigPanel = require 'general-config-panel'
 EditorConfigPanel = require 'editor-config-panel'
+PackageConfigPanel = require 'package-config-panel'
 
 module.exports =
 class ConfigView extends View
@@ -26,6 +27,7 @@ class ConfigView extends View
 
     @addPanel('General', new GeneralConfigPanel)
     @addPanel('Editor', new EditorConfigPanel)
+    @addPanel('Installed Packages', new PackageConfigPanel)
 
   addPanel: (name, panel) ->
     panelItem = $$ -> @li name: name, => @a name

src/app/general-config-panel.coffee

@@ -3,14 +3,6 @@ ConfigPanel = require 'config-panel'
 $ = require 'jquery'
 _ = require 'underscore'
 
-window.jQuery = $
-require 'jqueryui-browser/ui/jquery.ui.core'
-require 'jqueryui-browser/ui/jquery.ui.widget'
-require 'jqueryui-browser/ui/jquery.ui.mouse'
-require 'jqueryui-browser/ui/jquery.ui.sortable'
-require 'jqueryui-browser/ui/jquery.ui.draggable'
-delete window.jQuery
-
 module.exports =
 class GeneralConfigPanel extends ConfigPanel
   @content: ->
@@ -23,11 +15,6 @@ class GeneralConfigPanel extends ConfigPanel
         @label for: 'core.autosave', "Autosave on unfocus:"
         @input id: 'core.autosave', type: 'checkbox'
 
-      @div class: 'section', =>
-        @div class: 'list-wrapper', =>
-          @div class: 'list-header', "Enabled Packages"
-          @ol id: 'package-list', outlet: 'packageList'
-
       @div class: 'section', =>
         @div class: 'list-wrapper pull-left', =>
           @div class: 'list-header', "Enabled Themes (Drag from right)"
@@ -37,33 +24,6 @@ class GeneralConfigPanel extends ConfigPanel
           @div class: 'list-header', "Available Themes"
           @ol id: 'available-theme-list', outlet: 'availableThemeList'
 
-  initialize: ->
-    @populatePackageList()
-    @populateThemeLists()
-    @packageList.on 'change', 'input[type=checkbox]', (e) ->
-      checkbox = $(e.target)
-      name = checkbox.closest('li').attr('name')
-      if checkbox.attr('checked')
-        _.remove(config.get('core.disabledPackages'), name)
-      else
-        config.get('core.disabledPackages').push(name)
-      config.update()
-
-  populatePackageList: ->
-    for name in atom.getAvailablePackageNames()
-      @packageList.append $$ ->
-        @li name: name, =>
-          @input type: 'checkbox'
-          @span name
-
-    @observeConfig 'core.disabledPackages', (disabledPackages) =>
-      @updatePackageListCheckboxes(disabledPackages)
-
-  updatePackageListCheckboxes: (disabledPackages=[]) ->
-    @packageList.find("input[type='checkbox']").attr('checked', true)
-    for name in disabledPackages
-      @packageList.find("li[name='#{name}'] input[type='checkbox']").attr('checked', false)
-
   populateThemeLists: ->
     for name in atom.getAvailableThemeNames()
       @availableThemeList.append(@buildThemeLi(name, draggable: true))

src/app/package-config-panel.coffee

@@ -0,0 +1,45 @@
+ConfigPanel = require 'config-panel'
+{$$} = require 'space-pen'
+$ = require 'jquery'
+_ = require 'underscore'
+
+window.jQuery = $
+require 'jqueryui-browser/ui/jquery.ui.core'
+require 'jqueryui-browser/ui/jquery.ui.widget'
+require 'jqueryui-browser/ui/jquery.ui.mouse'
+require 'jqueryui-browser/ui/jquery.ui.sortable'
+require 'jqueryui-browser/ui/jquery.ui.draggable'
+delete window.jQuery
+
+module.exports =
+class PackageConfigPanel extends ConfigPanel
+  @content: ->
+    @div =>
+      @legend "Installed Packages"
+
+      @table id: 'packages', class: "table table-striped", =>
+        @thead =>
+          @tr =>
+            @th "Package Name"
+            @th class: 'package-enabled', "Enable"
+
+        @tbody outlet: 'packageTableBody', =>
+          for name in atom.getAvailablePackageNames().sort()
+            @tr name: name, =>
+              @td name
+              @td class: 'package-enabled', => @input type: 'checkbox'
+
+  initialize: ->
+    @on 'change', '#packages input[type=checkbox]', (e) ->
+      checkbox = $(e.target)
+      name = checkbox.closest('tr').attr('name')
+      if checkbox.attr('checked')
+        _.remove(config.get('core.disabledPackages'), name)
+      else
+        config.get('core.disabledPackages').push(name)
+      config.update()
+
+    @observeConfig 'core.disabledPackages', (disabledPackages) =>
+      @packageTableBody.find("input[type='checkbox']").attr('checked', true)
+      for name in disabledPackages
+        @packageTableBody.find("tr[name='#{name}'] input[type='checkbox']").attr('checked', false)

static/config.less

@@ -69,4 +69,12 @@
       }
     }
   }
+
+  #packages {
+    white-space: nowrap;
+    .package-enabled {
+      width: 30px;
+      text-align: center;
+    }
+  }
 }