Tabs indicate when their items are modified

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

@@ -11,7 +11,9 @@ class TabView extends View
 
   initialize: (@item, @pane) ->
     @item.on? 'title-changed', => @updateTitle()
+    @item.on? 'modified-status-changed', => @updateModifiedStatus()
     @updateTitle()
+    @updateModifiedStatus()
 
   updateTitle: ->
     return if @updatingTitle
@@ -32,11 +34,11 @@ class TabView extends View
     @siblings('.tab').views()
 
   updateModifiedStatus: ->
-    if @buffer.isModified()
-      @toggleClass('file-modified') unless @isModified
+    if @item.isModified?()
+      @addClass('modified') unless @isModified
       @isModified = true
     else
-      @removeClass('file-modified') if @isModified
+      @removeClass('modified') if @isModified
       @isModified = false
 
   updateFileName: ->

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

@@ -76,6 +76,12 @@ describe "TabBarView", ->
       expect(tabBar.find('.tab').length).toBe 4
       expect(tabBar.tabAtIndex(1).find('.title')).toHaveText 'Item 3'
 
+    it "adds the 'modified' class to the new tab if the item is initially modified", ->
+      editSession2 = project.buildEditSession('sample.txt')
+      editSession2.insertText('x')
+      pane.showItem(editSession2)
+      expect(tabBar.tabForItem(editSession2)).toHaveClass 'modified'
+
   describe "when an item is removed from the pane", ->
     it "removes the item's tab from the tab bar", ->
       pane.removeItem(item2)
@@ -108,7 +114,7 @@ describe "TabBarView", ->
       editSession1.buffer.setPath('/this/is-a/test.txt')
       expect(tabBar.tabForItem(editSession1)).toHaveText 'test.txt'
 
-  describe "when two tabs have the same file name", ->
+  describe "when two tabs have the same title", ->
     it "displays the long title on the tab if it's available from the item", ->
       item1.title = "Old Man"
       item1.longTitle = "Grumpy Old Man"
@@ -126,6 +132,22 @@ describe "TabBarView", ->
       expect(tabBar.tabForItem(item1)).toHaveText "Grumpy Old Man"
       expect(tabBar.tabForItem(item2)).toHaveText "Old Man"
 
+  describe "when a tab item's modified status changes", ->
+    it "adds or removes the 'modified' class to the tab based on the status", ->
+      tab = tabBar.tabForItem(editSession1)
+      expect(editSession1.isModified()).toBeFalsy()
+      expect(tab).not.toHaveClass 'modified'
+
+      editSession1.insertText('x')
+      advanceClock(editSession1.buffer.stoppedChangingDelay)
+      expect(editSession1.isModified()).toBeTruthy()
+      expect(tab).toHaveClass 'modified'
+
+      editSession1.undo()
+      advanceClock(editSession1.buffer.stoppedChangingDelay)
+      expect(editSession1.isModified()).toBeFalsy()
+      expect(tab).not.toHaveClass 'modified'
+
   describe "when a pane item moves to a new index", ->
     it "updates the order of the tabs to match the new item order", ->
       expect(tabBar.getTabs().map (tab) -> tab.text()).toEqual ["Item 1", "sample.js", "Item 2"]

static/tabs.css

@@ -52,7 +52,7 @@
   color: #fff;
 }
 
-.tab.file-modified .close-icon {
+.tab.modified .close-icon {
   top: 11px;
   width: 5px;
   height: 5px;
@@ -61,11 +61,11 @@
   border-radius: 12px;
 }
 
-.tab.file-modified .close-icon:before {
+.tab.modified .close-icon:before {
   content: "";
 }
 
-.tab.file-modified:hover .close-icon {
+.tab.modified:hover .close-icon {
   border: none;
   width: 12px;
   height: 12px;
@@ -73,7 +73,7 @@
   top: 5px;
 }
 
-.tab.file-modified:hover .close-icon:before {
+.tab.modified:hover .close-icon:before {
   content: "\f081";
   color: #66a6ff;
 }