Merge pull request #4101 from atom/mb-fix-styles

Fix user stylesheet regression due to shadow DOM PR

spec/styles-element-spec.coffee

@@ -59,8 +59,9 @@ describe "StylesElement", ->
     atom.styles.addStyleSheet("a {color: red;}", context: 'test-context')
     atom.styles.addStyleSheet("a {color: green;}")
 
-    expect(element.children.length).toBe initialChildCount + 1
-    expect(element.children[initialChildCount].textContent).toBe "a {color: green;}"
+    expect(element.children.length).toBe initialChildCount + 2
+    expect(element.children[initialChildCount].textContent).toBe "a {color: red;}"
+    expect(element.children[initialChildCount + 1].textContent).toBe "a {color: green;}"
 
     element.setAttribute('context', 'test-context')
 

spec/text-editor-element-spec.coffee

@@ -40,9 +40,6 @@ describe "TextEditorElement", ->
         expect(blurCalled).toBe true
 
     describe "when the editor.useShadowDOM config option is false", ->
-      afterEach ->
-        document.head.querySelector('atom-styles[context="atom-text-editor"]').remove()
-
       it "proxies focus/blur events to/from the hidden input", ->
         atom.config.set('editor.useShadowDOM', false)
 

spec/theme-manager-spec.coffee

@@ -92,7 +92,7 @@ describe "ThemeManager", ->
 
       runs ->
         reloadHandler.reset()
-        expect($('style[group=theme]')).toHaveLength 1
+        expect($('style[group=theme]')).toHaveLength 2
         expect($('style[group=theme]:eq(0)').attr('source-path')).toMatch /atom-dark-ui/
         atom.config.set('core.themes', ['atom-light-ui', 'atom-dark-ui'])
 
@@ -111,7 +111,7 @@ describe "ThemeManager", ->
 
       runs ->
         reloadHandler.reset()
-        expect($('style[group=theme]')).toHaveLength 1
+        expect($('style[group=theme]')).toHaveLength 2
         # atom-dark-ui has an directory path, the syntax one doesn't
         atom.config.set('core.themes', ['theme-with-index-less', 'atom-dark-ui'])
 

src/styles-element.coffee

@@ -45,7 +45,7 @@ class StylesElement extends HTMLElement
     @styleElementAdded(styleElement) for styleElement in atom.styles.getStyleElements()
 
   styleElementAdded: (styleElement) ->
-    return unless styleElement.context is @context
+    return unless @styleElementMatchesContext(styleElement)
 
     styleElementClone = styleElement.cloneNode(true)
     styleElementClone.context = styleElement.context
@@ -62,17 +62,20 @@ class StylesElement extends HTMLElement
     @emitter.emit 'did-add-style-element', styleElementClone
 
   styleElementRemoved: (styleElement) ->
-    return unless styleElement.context is @context
+    return unless @styleElementMatchesContext(styleElement)
 
     styleElementClone = @styleElementClonesByOriginalElement.get(styleElement) ? styleElement
     styleElementClone.remove()
     @emitter.emit 'did-remove-style-element', styleElementClone
 
   styleElementUpdated: (styleElement) ->
-    return unless styleElement.context is @context
+    return unless @styleElementMatchesContext(styleElement)
 
     styleElementClone = @styleElementClonesByOriginalElement.get(styleElement)
     styleElementClone.textContent = styleElement.textContent
     @emitter.emit 'did-update-style-element', styleElementClone
 
+  styleElementMatchesContext: (styleElement) ->
+    not @context? or styleElement.context is @context
+
 module.exports = StylesElement = document.registerElement 'atom-styles', prototype: StylesElement.prototype

src/text-editor-element.coffee

@@ -6,8 +6,6 @@ TextEditor = require './text-editor'
 TextEditorComponent = require './text-editor-component'
 TextEditorView = null
 
-GlobalStylesElement = null
-
 class TextEditorElement extends HTMLElement
   model: null
   componentDescriptor: null
@@ -39,13 +37,7 @@ class TextEditorElement extends HTMLElement
       @shadowRoot.appendChild(@stylesElement)
       @shadowRoot.appendChild(@rootElement)
     else
-      unless GlobalStylesElement?
-        GlobalStylesElement = document.createElement('atom-styles')
-        GlobalStylesElement.setAttribute('context', 'atom-text-editor')
-        GlobalStylesElement.initialize()
-        document.head.appendChild(GlobalStylesElement)
-
-      @stylesElement = GlobalStylesElement
+      @stylesElement = document.head.querySelector('atom-styles')
       @rootElement = this
 
     @rootElement.classList.add('editor', 'editor-colors')

static/text-editor-shadow.less

@@ -222,6 +222,7 @@
 .overlayer {
   z-index: 2;
   position: absolute;
+  width: 100%;
 }
 
 .line {