Allow tabs to be moved to the beginning and end of the tab bar

Closes #409 (409, puts grease on the run! http://www.dailymotion.com/video/xxsbbb_formula-409-1990-puts-grease-on-the-run-commercial-2_tv#.UVocOZbF30Y)

src/packages/tabs/lib/tab-bar-view.coffee

@@ -86,15 +86,15 @@ class TabBarView extends SortableList
     fromIndex     = parseInt(dataTransfer.getData('sortable-index'))
     fromPaneIndex = parseInt(dataTransfer.getData('from-pane-index'))
     fromPane      = @paneContainer.paneAtIndex(fromPaneIndex)
-    toIndex       = @getSortableElement(event).index()
+    toIndex       = @getDropTargetIndex(event)
     toPane        = $(event.target).closest('.pane').view()
     draggedTab    = fromPane.find(".tabs .sortable:eq(#{fromIndex})").view()
     item          = draggedTab.item
 
     if toPane is fromPane
-      toIndex++ if fromIndex > toIndex
+      toIndex-- if fromIndex < toIndex
       toPane.moveItem(item, toIndex)
     else
-      fromPane.moveItemToPane(item, toPane, toIndex)
+      fromPane.moveItemToPane(item, toPane, toIndex--)
     toPane.showItem(item)
     toPane.focus()

src/packages/tabs/spec/tabs-spec.coffee

@@ -235,6 +235,20 @@ describe "TabBarView", ->
           expect(pane.activeItem).toBe item1
           expect(pane.focus).toHaveBeenCalled()
 
+      describe "when it is dropped on the tab bar", ->
+        it "moves the tab and its item to the end", ->
+          expect(tabBar.getTabs().map (tab) -> tab.text()).toEqual ["Item 1", "sample.js", "Item 2"]
+          expect(pane.getItems()).toEqual [item1, editSession1, item2]
+          expect(pane.activeItem).toBe item2
+          spyOn(pane, 'focus')
+
+          [dragStartEvent, dropEvent] = buildDragEvents(tabBar.tabAtIndex(0), tabBar)
+          tabBar.onDragStart(dragStartEvent)
+          tabBar.onDrop(dropEvent)
+
+          expect(tabBar.getTabs().map (tab) -> tab.text()).toEqual ["sample.js", "Item 2", "Item 1"]
+          expect(pane.getItems()).toEqual [editSession1, item2, item1]
+
     describe "when a tab is dragged to a different pane", ->
       [pane2, tabBar2, item2b] = []
 

src/packages/tabs/stylesheets/tabs.less

@@ -83,11 +83,10 @@
 
 }
 
-.tab.is-drop-target:after {
+.tab.is-drop-target:before, .tab.drop-target-is-after:after {
+  content: "";
   position: absolute;
   top: 0;
-  right: -2px;
-  content: "";
   z-index: 999;
   display: inline-block;
   width: 2px;
@@ -96,15 +95,30 @@
   background: #0098ff;
 }
 
-.tab.is-drop-target:before {
+.tab.is-drop-target:after, .tab.drop-target-is-after:before {
   content: "";
   position: absolute;
+  top: 30px;
+  z-index: 9999;
   width: 4px;
   height: 4px;
   background: #0098ff;
-  right: -4px;
-  top: 30px;
   border-radius: 4px;
-  z-index: 9999;
   border: 1px solid transparent;
-}
+}
+
+.tab.is-drop-target:before {
+  left: -2px;
+}
+
+.tab.is-drop-target:after {
+  left: -4px;
+}
+
+.tab.drop-target-is-after:before {
+  right: -4px;
+}
+
+.tab.drop-target-is-after:after {
+  right: -2px;
+}