Add StylesElement::onDidAdd/RemoveStyleElement

spec/styles-element-spec.coffee

@@ -2,11 +2,15 @@ StylesElement = require '../src/styles-element'
 StyleManager = require '../src/style-manager'
 
 describe "StylesElement", ->
-  element = null
+  [element, addedStyleElements, removedStyleElements] = []
 
   beforeEach ->
     element = new StylesElement
     document.querySelector('#jasmine-content').appendChild(element)
+    addedStyleElements = []
+    removedStyleElements = []
+    element.onDidAddStyleElement (element) -> addedStyleElements.push(element)
+    element.onDidRemoveStyleElement (element) -> removedStyleElements.push(element)
 
   it "renders a style tag for all currently active stylesheets in the style manager", ->
     initialChildCount = element.children.length
@@ -14,14 +18,17 @@ describe "StylesElement", ->
     disposable1 = atom.styles.addStyleSheet("a {color: red;}")
     expect(element.children.length).toBe initialChildCount + 1
     expect(element.children[initialChildCount].textContent).toBe "a {color: red;}"
+    expect(addedStyleElements).toEqual [element.children[initialChildCount]]
 
     disposable2 = atom.styles.addStyleSheet("a {color: blue;}")
     expect(element.children.length).toBe initialChildCount + 2
     expect(element.children[initialChildCount + 1].textContent).toBe "a {color: blue;}"
+    expect(addedStyleElements).toEqual [element.children[initialChildCount], element.children[initialChildCount + 1]]
 
     disposable1.dispose()
     expect(element.children.length).toBe initialChildCount + 1
     expect(element.children[initialChildCount].textContent).toBe "a {color: blue;}"
+    expect(removedStyleElements).toEqual [addedStyleElements[0]]
 
   it "orders style elements by group", ->
     initialChildCount = element.children.length

src/styles-element.coffee

@@ -1,6 +1,15 @@
-{CompositeDisposable} = require 'event-kit'
+{Emitter, CompositeDisposable} = require 'event-kit'
 
 class StylesElement extends HTMLElement
+  createdCallback: ->
+    @emitter = new Emitter
+
+  onDidAddStyleElement: (callback) ->
+    @emitter.on 'did-add-style-element', callback
+
+  onDidRemoveStyleElement: (callback) ->
+    @emitter.on 'did-remove-style-element', callback
+
   attachedCallback: ->
     @subscriptions = new CompositeDisposable
     @styleElementClonesByOriginalElement = new WeakMap
@@ -19,9 +28,12 @@ class StylesElement extends HTMLElement
           break
 
     @insertBefore(styleElementClone, insertBefore)
+    @emitter.emit 'did-add-style-element', styleElementClone
 
   styleElementRemoved: (styleElement) ->
-    @styleElementClonesByOriginalElement.get(styleElement).remove()
+    styleElementClone = @styleElementClonesByOriginalElement.get(styleElement)
+    styleElementClone.remove()
+    @emitter.emit 'did-remove-style-element', styleElementClone
 
   detachedCallback: ->
     @subscriptions.dispose()