Merge pull request #3830 from atom/ns-extract-style-manager

Extract style manager from theme manager

src/atom.coffee

@@ -14,6 +14,7 @@ fs = require 'fs-plus'
 
 {$} = require './space-pen-extensions'
 WindowEventHandler = require './window-event-handler'
+StylesElement = require './styles-element'
 
 # Essential: Atom global for dealing with packages, themes, menus, and the window.
 #
@@ -186,6 +187,7 @@ class Atom extends Model
     Clipboard = require './clipboard'
     Syntax = require './syntax'
     ThemeManager = require './theme-manager'
+    StyleManager = require './style-manager'
     ContextMenuManager = require './context-menu-manager'
     MenuManager = require './menu-manager'
     {devMode, safeMode, resourcePath} = @getLoadSettings()
@@ -205,6 +207,8 @@ class Atom extends Model
     @keymap = @keymaps # Deprecated
     @commands = new CommandRegistry
     @packages = new PackageManager({devMode, configDirPath, resourcePath, safeMode})
+    @styles = new StyleManager
+    document.head.appendChild(new StylesElement)
     @themes = new ThemeManager({packageManager: @packages, configDirPath, resourcePath, safeMode})
     @contextMenu = new ContextMenuManager({resourcePath, devMode})
     @menu = new MenuManager({resourcePath})

src/style-manager.coffee

@@ -0,0 +1,86 @@
+{Emitter, Disposable} = require 'event-kit'
+
+module.exports =
+class StyleManager
+  constructor: ->
+    @emitter = new Emitter
+    @styleElements = []
+    @styleElementsBySourcePath = {}
+
+  observeStyleElements: (callback) ->
+    callback(styleElement) for styleElement in @getStyleElements()
+    @onDidAddStyleElement(callback)
+
+  onDidAddStyleElement: (callback) ->
+    @emitter.on 'did-add-style-element', callback
+
+  onDidRemoveStyleElement: (callback) ->
+    @emitter.on 'did-remove-style-element', callback
+
+  onDidUpdateStyleElement: (callback) ->
+    @emitter.on 'did-update-style-element', callback
+
+  getStyleElements: ->
+    @styleElements.slice()
+
+  addStyleSheet: (source, params) ->
+    sourcePath = params?.sourcePath
+    group = params?.group
+
+    if sourcePath? and styleElement = @styleElementsBySourcePath[sourcePath]
+      updated = true
+    else
+      styleElement = document.createElement('style')
+      if sourcePath?
+        styleElement.sourcePath = sourcePath
+        styleElement.setAttribute('source-path', sourcePath)
+
+      if context?
+        styleElement.context = context
+        styleElement.setAttribute('context', context)
+
+      if group?
+        styleElement.group = group
+        styleElement.setAttribute('group', group)
+
+    styleElement.textContent = source
+
+    if updated
+      @emitter.emit 'did-update-style-element', styleElement
+    else
+      @addStyleElement(styleElement)
+
+    new Disposable => @removeStyleElement(styleElement)
+
+  addStyleElement: (styleElement) ->
+    {sourcePath, group} = styleElement
+
+    if group?
+      for existingElement, index in @styleElements
+        if existingElement.group is group
+          insertIndex = index + 1
+        else
+          break if insertIndex?
+    insertIndex ?= @styleElements.length
+
+    @styleElements.splice(insertIndex, 0, styleElement)
+    @styleElementsBySourcePath[sourcePath] ?= styleElement if sourcePath?
+    @emitter.emit 'did-add-style-element', styleElement
+
+  removeStyleElement: (styleElement) ->
+    index = @styleElements.indexOf(styleElement)
+    unless index is -1
+      @styleElements.splice(index, 1)
+      delete @styleElementsBySourcePath[styleElement.sourcePath] if styleElement.sourcePath?
+      @emitter.emit 'did-remove-style-element', styleElement
+
+  getSnapshot: ->
+    @styleElements.slice()
+
+  restoreSnapshot: (styleElementsToRestore) ->
+    for styleElement in @getStyleElements()
+      @removeStyleElement(styleElement) unless styleElement in styleElementsToRestore
+
+    existingStyleElements = @getStyleElements()
+    for styleElement in styleElementsToRestore
+      @addStyleElement(styleElement) unless styleElement in existingStyleElements

src/styles-element.coffee

@@ -0,0 +1,50 @@
+{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
+
+  onDidUpdateStyleElement: (callback) ->
+    @emitter.on 'did-update-style-element', callback
+
+  attachedCallback: ->
+    @subscriptions = new CompositeDisposable
+    @styleElementClonesByOriginalElement = new WeakMap
+    @subscriptions.add atom.styles.observeStyleElements(@styleElementAdded.bind(this))
+    @subscriptions.add atom.styles.onDidRemoveStyleElement(@styleElementRemoved.bind(this))
+    @subscriptions.add atom.styles.onDidUpdateStyleElement(@styleElementUpdated.bind(this))
+
+  styleElementAdded: (styleElement) ->
+    styleElementClone = styleElement.cloneNode(true)
+    @styleElementClonesByOriginalElement.set(styleElement, styleElementClone)
+
+    group = styleElement.getAttribute('group')
+    if group?
+      for child in @children
+        if child.getAttribute('group') is group and child.nextSibling?.getAttribute('group') isnt group
+          insertBefore = child.nextSibling
+          break
+
+    @insertBefore(styleElementClone, insertBefore)
+    @emitter.emit 'did-add-style-element', styleElementClone
+
+  styleElementRemoved: (styleElement) ->
+    styleElementClone = @styleElementClonesByOriginalElement.get(styleElement)
+    styleElementClone.remove()
+    @emitter.emit 'did-remove-style-element', styleElementClone
+
+  styleElementUpdated: (styleElement) ->
+    styleElementClone = @styleElementClonesByOriginalElement.get(styleElement)
+    styleElementClone.textContent = styleElement.textContent
+    @emitter.emit 'did-update-style-element', styleElementClone
+
+  detachedCallback: ->
+    @subscriptions.dispose()
+
+module.exports = StylesElement = document.registerElement 'atom-styles', prototype: StylesElement.prototype

src/theme-manager.coffee

@@ -19,9 +19,39 @@ class ThemeManager
 
   constructor: ({@packageManager, @resourcePath, @configDirPath, @safeMode}) ->
     @emitter = new Emitter
+    @styleSheetDisposablesBySourcePath = {}
     @lessCache = null
     @initialLoadComplete = false
     @packageManager.registerPackageActivator(this, ['theme'])
+    @sheetsByStyleElement = new WeakMap
+
+    stylesElement = document.head.querySelector('atom-styles')
+    stylesElement.onDidAddStyleElement @styleElementAdded.bind(this)
+    stylesElement.onDidRemoveStyleElement @styleElementRemoved.bind(this)
+    stylesElement.onDidUpdateStyleElement @styleElementUpdated.bind(this)
+
+  styleElementAdded: (styleElement) ->
+    {sheet} = styleElement
+    @sheetsByStyleElement.set(styleElement, sheet)
+    @emit 'stylesheet-added', sheet
+    @emitter.emit 'did-add-stylesheet', sheet
+    @emit 'stylesheets-changed'
+    @emitter.emit 'did-change-stylesheets'
+
+  styleElementRemoved: (styleElement) ->
+    sheet = @sheetsByStyleElement.get(styleElement)
+    @emit 'stylesheet-removed', sheet
+    @emitter.emit 'did-remove-stylesheet', sheet
+    @emit 'stylesheets-changed'
+    @emitter.emit 'did-change-stylesheets'
+
+  styleElementUpdated: ({sheet}) ->
+    @emit 'stylesheet-removed', sheet
+    @emitter.emit 'did-remove-stylesheet', sheet
+    @emit 'stylesheet-added', sheet
+    @emitter.emit 'did-add-stylesheet', sheet
+    @emit 'stylesheets-changed'
+    @emitter.emit 'did-change-stylesheets'
 
   ###
   Section: Event Subscription
@@ -188,7 +218,6 @@ class ThemeManager
     if fullPath = @resolveStylesheet(stylesheetPath)
       content = @loadStylesheet(fullPath)
       @applyStylesheet(fullPath, content, type)
-      new Disposable => @removeStylesheet(fullPath)
     else
       throw new Error("Could not find a file at path '#{stylesheetPath}'")
 
@@ -204,8 +233,7 @@ class ThemeManager
 
     @userStylesheetPath = userStylesheetPath
     @userStylesheetFile = new File(userStylesheetPath)
-    @userStylesheetFile.on 'contents-changed moved removed', =>
-      @loadUserStylesheet()
+    @userStylesheetFile.on 'contents-changed moved removed', => @loadUserStylesheet()
     userStylesheetContents = @loadStylesheet(userStylesheetPath, true)
     @applyStylesheet(userStylesheetPath, userStylesheetContents, 'userTheme')
 
@@ -219,7 +247,7 @@ class ThemeManager
       @requireStylesheet(nativeStylesheetPath)
 
   stylesheetElementForId: (id) ->
-    document.head.querySelector("""style[id="#{id}"]""")
+    document.head.querySelector("atom-styles style[source-path=\"#{id}\"]")
 
   resolveStylesheet: (stylesheetPath) ->
     if path.extname(stylesheetPath).length > 0
@@ -256,40 +284,10 @@ class ThemeManager
       """
 
   removeStylesheet: (stylesheetPath) ->
-    fullPath = @resolveStylesheet(stylesheetPath) ? stylesheetPath
-    element = @stylesheetElementForId(@stringToId(fullPath))
-    if element?
-      {sheet} = element
-      element.remove()
-      @emit 'stylesheet-removed', sheet
-      @emitter.emit 'did-remove-stylesheet', sheet
-      @emit 'stylesheets-changed'
-      @emitter.emit 'did-change-stylesheets'
+    @styleSheetDisposablesBySourcePath[stylesheetPath]?.dispose()
 
   applyStylesheet: (path, text, type='bundled') ->
-    styleId = @stringToId(path)
-    styleElement = @stylesheetElementForId(styleId)
-
-    if styleElement?
-      @emit 'stylesheet-removed', styleElement.sheet
-      @emitter.emit 'did-remove-stylesheet', styleElement.sheet
-      styleElement.textContent = text
-    else
-      styleElement = document.createElement('style')
-      styleElement.setAttribute('class', type)
-      styleElement.setAttribute('id', styleId)
-      styleElement.textContent = text
-
-      elementToInsertBefore = _.last(document.head.querySelectorAll("style.#{type}"))?.nextElementSibling
-      if elementToInsertBefore?
-        document.head.insertBefore(styleElement, elementToInsertBefore)
-      else
-        document.head.appendChild(styleElement)
-
-    @emit 'stylesheet-added', styleElement.sheet
-    @emitter.emit 'did-add-stylesheet', styleElement.sheet
-    @emit 'stylesheets-changed'
-    @emitter.emit 'did-change-stylesheets'
+    @styleSheetDisposablesBySourcePath[path] = atom.styles.addStyleSheet(text, sourcePath: path, group: type)
 
   ###
   Section: Private
@@ -358,17 +356,3 @@ class ThemeManager
           themePaths.push(path.join(themePath, Package.stylesheetsDir))
 
     themePaths.filter (themePath) -> fs.isDirectorySync(themePath)
-
-  updateGlobalEditorStyle: (property, value) ->
-    unless styleNode = @stylesheetElementForId('global-editor-styles')
-      @applyStylesheet('global-editor-styles', 'atom-text-editor {}')
-      styleNode = @stylesheetElementForId('global-editor-styles')
-
-    {sheet} = styleNode
-    editorRule = sheet.cssRules[0]
-    editorRule.style[property] = value
-
-    @emit 'stylesheet-updated', sheet
-    @emitter.emit 'did-update-stylesheet', sheet
-    @emit 'stylesheets-changed'
-    @emitter.emit 'did-change-stylesheets'

src/workspace-element.coffee

@@ -8,8 +8,11 @@ WorkspaceView = null
 
 module.exports =
 class WorkspaceElement extends HTMLElement
+  globalTextEditorStyleSheet: null
+
   createdCallback: ->
     @subscriptions = new CompositeDisposable
+    @initializeGlobalTextEditorStyleSheet()
     @initializeContent()
     @observeScrollbarStyle()
     @observeTextEditorFontConfig()
@@ -22,6 +25,10 @@ class WorkspaceElement extends HTMLElement
   detachedCallback: ->
     @model.destroy()
 
+  initializeGlobalTextEditorStyleSheet: ->
+    atom.styles.addStyleSheet('atom-text-editor {}', sourcePath: 'global-text-editor-styles')
+    @globalTextEditorStyleSheet = document.head.querySelector('style[source-path="global-text-editor-styles"]').sheet
+
   initializeContent: ->
     @classList.add 'workspace'
     @setAttribute 'tabindex', -1
@@ -46,9 +53,9 @@ class WorkspaceElement extends HTMLElement
           @classList.add("scrollbars-visible-when-scrolling")
 
   observeTextEditorFontConfig: ->
-    @subscriptions.add atom.config.observe 'editor.fontSize', @setTextEditorFontSize
-    @subscriptions.add atom.config.observe 'editor.fontFamily', @setTextEditorFontFamily
-    @subscriptions.add atom.config.observe 'editor.lineHeight', @setTextEditorLineHeight
+    @subscriptions.add atom.config.observe 'editor.fontSize', @setTextEditorFontSize.bind(this)
+    @subscriptions.add atom.config.observe 'editor.fontFamily', @setTextEditorFontFamily.bind(this)
+    @subscriptions.add atom.config.observe 'editor.lineHeight', @setTextEditorLineHeight.bind(this)
 
   createSpacePenShim: ->
     WorkspaceView ?= require './workspace-view'
@@ -68,13 +75,18 @@ class WorkspaceElement extends HTMLElement
     @__spacePenView.setModel(@model)
 
   setTextEditorFontSize: (fontSize) ->
-    atom.themes.updateGlobalEditorStyle('font-size', fontSize + 'px')
+    @updateGlobalEditorStyle('font-size', fontSize + 'px')
 
   setTextEditorFontFamily: (fontFamily) ->
-    atom.themes.updateGlobalEditorStyle('font-family', fontFamily)
+    @updateGlobalEditorStyle('font-family', fontFamily)
 
   setTextEditorLineHeight: (lineHeight) ->
-    atom.themes.updateGlobalEditorStyle('line-height', lineHeight)
+    @updateGlobalEditorStyle('line-height', lineHeight)
+
+  updateGlobalEditorStyle: (property, value) ->
+    editorRule = @globalTextEditorStyleSheet.cssRules[0]
+    editorRule.style[property] = value
+    atom.themes.emitter.emit 'did-update-stylesheet', @globalTextEditorStyleSheet
 
   handleFocus: (event) ->
     @model.getActivePane().activate()