From 5e2f8a3ae3af8cc698728a45e5951731c7e94cb8 Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Fri, 5 Sep 2014 17:30:14 -0700 Subject: [PATCH 01/10] :racehorse: Use DOM APIs to apply stylesheets Previously jQuery was used, but using the DOM APIs directly takes 1/3 of the time. --- src/theme-manager.coffee | 44 ++++++++++++++++++++++----------------- src/workspace-view.coffee | 4 ++-- 2 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index fa254f31f..a9dbd5595 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -197,8 +197,8 @@ class ThemeManager if nativeStylesheetPath = fs.resolveOnLoadPath(process.platform, ['css', 'less']) @requireStylesheet(nativeStylesheetPath) - stylesheetElementForId: (id, htmlElement=$('html')) -> - htmlElement.find("""head style[id="#{id}"]""") + stylesheetElementForId: (id) -> + document.head.querySelector("""style[id="#{id}"]""") resolveStylesheet: (stylesheetPath) -> if path.extname(stylesheetPath).length > 0 @@ -214,10 +214,10 @@ class ThemeManager # path or a relative path that will be resolved against the load path. # # Returns the absolute path to the required stylesheet. - requireStylesheet: (stylesheetPath, type = 'bundled', htmlElement) -> + requireStylesheet: (stylesheetPath, type='bundled') -> if fullPath = @resolveStylesheet(stylesheetPath) content = @loadStylesheet(fullPath) - @applyStylesheet(fullPath, content, type = 'bundled', htmlElement) + @applyStylesheet(fullPath, content, type) else throw new Error("Could not find a file at path '#{stylesheetPath}'") @@ -257,23 +257,29 @@ class ThemeManager removeStylesheet: (stylesheetPath) -> fullPath = @resolveStylesheet(stylesheetPath) ? stylesheetPath element = @stylesheetElementForId(@stringToId(fullPath)) - if element.length > 0 - stylesheet = element[0].sheet + if element? element.remove() - @emit 'stylesheet-removed', stylesheet + @emit 'stylesheet-removed', element.sheet @emit 'stylesheets-changed' - applyStylesheet: (path, text, type = 'bundled', htmlElement=$('html')) -> - styleElement = @stylesheetElementForId(@stringToId(path), htmlElement) - if styleElement.length - @emit 'stylesheet-removed', styleElement[0].sheet - styleElement.text(text) - else - styleElement = $("") - if htmlElement.find("head style.#{type}").length - htmlElement.find("head style.#{type}:last").after(styleElement) - else - htmlElement.find("head").append(styleElement) + applyStylesheet: (path, text, type='bundled') -> + styleElement = null - @emit 'stylesheet-added', styleElement[0].sheet + styleId = @stringToId(path) + styleElement = @stylesheetElementForId(styleId) + if styleElement? + @emit 'stylesheet-removed', styleElement.sheet + styleElement.textContent = text + else + styleElement = document.createElement('style') + styleElement.setAttribute('class', type) + styleElement.setAttribute('id', styleId) + styleElement.textContent = text + parentElement = _.last(document.head.querySelectorAll("style.#{type}"))?.parentElement + if parentElement? + parentElement.appendChild(styleElement) + else + document.head.appendChild(styleElement) + + @emit 'stylesheet-added', styleElement.sheet @emit 'stylesheets-changed' diff --git a/src/workspace-view.coffee b/src/workspace-view.coffee index b4ae47318..3bccbb228 100644 --- a/src/workspace-view.coffee +++ b/src/workspace-view.coffee @@ -381,9 +381,9 @@ class WorkspaceView extends View @setEditorStyle('line-height', lineHeight) setEditorStyle: (property, value) -> - unless styleNode = atom.themes.stylesheetElementForId('global-editor-styles')[0] + unless styleNode = atom.themes.stylesheetElementForId('global-editor-styles') atom.themes.applyStylesheet('global-editor-styles', '.editor {}') - styleNode = atom.themes.stylesheetElementForId('global-editor-styles')[0] + styleNode = atom.themes.stylesheetElementForId('global-editor-styles') {sheet} = styleNode editorRule = sheet.cssRules[0] From 7e6b7ada54a4ecf8f3a75f0fe10362b6bcebc50e Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Fri, 5 Sep 2014 17:40:53 -0700 Subject: [PATCH 02/10] Preserve ordering within type class --- src/theme-manager.coffee | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index a9dbd5595..c15858805 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -275,9 +275,10 @@ class ThemeManager styleElement.setAttribute('class', type) styleElement.setAttribute('id', styleId) styleElement.textContent = text - parentElement = _.last(document.head.querySelectorAll("style.#{type}"))?.parentElement - if parentElement? - parentElement.appendChild(styleElement) + + elementToInsertBefore = _.last(document.head.querySelectorAll("style.#{type}"))?.nextElementSibling + if elementToInsertBefore? + document.head.insertBefore(styleElement, elementToInsertBefore) else document.head.appendChild(styleElement) From f7103bbed6a55423c54fa3b2eb450dd12f4b6c4b Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Fri, 5 Sep 2014 18:00:38 -0700 Subject: [PATCH 03/10] Store sheet before it goes away --- src/theme-manager.coffee | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index c15858805..b6ca08d8e 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -258,8 +258,9 @@ class ThemeManager fullPath = @resolveStylesheet(stylesheetPath) ? stylesheetPath element = @stylesheetElementForId(@stringToId(fullPath)) if element? + {sheet} = element element.remove() - @emit 'stylesheet-removed', element.sheet + @emit 'stylesheet-removed', sheet @emit 'stylesheets-changed' applyStylesheet: (path, text, type='bundled') -> From 35a48f0cfbd23b51ff0fbeacdf1003c2133a42cf Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Fri, 5 Sep 2014 18:14:03 -0700 Subject: [PATCH 04/10] Update specs to expect an element --- spec/atom-spec.coffee | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/spec/atom-spec.coffee b/spec/atom-spec.coffee index 4dc934587..54a94c9a8 100644 --- a/spec/atom-spec.coffee +++ b/spec/atom-spec.coffee @@ -241,15 +241,15 @@ describe "the `atom` global", -> two = atom.themes.stringToId(two) three = atom.themes.stringToId(three) - expect(atom.themes.stylesheetElementForId(one)).not.toExist() - expect(atom.themes.stylesheetElementForId(two)).not.toExist() - expect(atom.themes.stylesheetElementForId(three)).not.toExist() + expect(atom.themes.stylesheetElementForId(one)).toBeNull() + expect(atom.themes.stylesheetElementForId(two)).toBeNull() + expect(atom.themes.stylesheetElementForId(three)).toBeNull() atom.packages.activatePackage("package-with-stylesheets-manifest") - expect(atom.themes.stylesheetElementForId(one)).toExist() - expect(atom.themes.stylesheetElementForId(two)).toExist() - expect(atom.themes.stylesheetElementForId(three)).not.toExist() + expect(atom.themes.stylesheetElementForId(one)).not.toBeNull() + expect(atom.themes.stylesheetElementForId(two)).not.toBeNull() + expect(atom.themes.stylesheetElementForId(three)).toBeNull() expect($('#jasmine-content').css('font-size')).toBe '1px' describe "when the metadata does not contain a 'stylesheets' manifest", -> @@ -263,14 +263,14 @@ describe "the `atom` global", -> two = atom.themes.stringToId(two) three = atom.themes.stringToId(three) - expect(atom.themes.stylesheetElementForId(one)).not.toExist() - expect(atom.themes.stylesheetElementForId(two)).not.toExist() - expect(atom.themes.stylesheetElementForId(three)).not.toExist() + expect(atom.themes.stylesheetElementForId(one)).toBeNull() + expect(atom.themes.stylesheetElementForId(two)).toBeNull() + expect(atom.themes.stylesheetElementForId(three)).toBeNull() atom.packages.activatePackage("package-with-stylesheets") - expect(atom.themes.stylesheetElementForId(one)).toExist() - expect(atom.themes.stylesheetElementForId(two)).toExist() - expect(atom.themes.stylesheetElementForId(three)).toExist() + expect(atom.themes.stylesheetElementForId(one)).not.toBeNull() + expect(atom.themes.stylesheetElementForId(two)).not.toBeNull() + expect(atom.themes.stylesheetElementForId(three)).not.toBeNull() expect($('#jasmine-content').css('font-size')).toBe '3px' describe "grammar loading", -> From 01d62653f297eb94465e0bd17174ef2b463bdc41 Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Mon, 8 Sep 2014 09:23:53 -0700 Subject: [PATCH 05/10] Remove unused require --- src/theme-manager.coffee | 1 - 1 file changed, 1 deletion(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index b6ca08d8e..9a1838e24 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -5,7 +5,6 @@ _ = require 'underscore-plus' fs = require 'fs-plus' Q = require 'q' -{$} = require './space-pen-extensions' Package = require './package' {File} = require 'pathwatcher' From f8949adf3838921213282124cf9e3321f02eb4c8 Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Mon, 8 Sep 2014 09:34:31 -0700 Subject: [PATCH 06/10] :lipstick: Sort requires --- src/theme-manager.coffee | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index 9a1838e24..92680589d 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -2,11 +2,11 @@ path = require 'path' _ = require 'underscore-plus' {Emitter} = require 'emissary' +{File} = require 'pathwatcher' fs = require 'fs-plus' Q = require 'q' Package = require './package' -{File} = require 'pathwatcher' # Extended: Handles loading and activating available themes. # From 522d446366d2f2b37b793512fb736432209effb1 Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Mon, 8 Sep 2014 09:35:05 -0700 Subject: [PATCH 07/10] :memo: Emit -> Emitted --- src/theme-manager.coffee | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index 92680589d..653fe48f1 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -16,23 +16,23 @@ Package = require './package' # # ### reloaded # -# Extended: Emit when all styles have been reloaded. +# Extended: Emitted when all styles have been reloaded. # # ### stylesheet-added # -# Extended: Emit when a stylesheet has been added. +# Extended: Emitted when a stylesheet has been added. # # * `stylesheet` {StyleSheet} object that was removed # # ### stylesheet-removed # -# Extended: Emit when a stylesheet has been removed. +# Extended: Emitted when a stylesheet has been removed. # # * `stylesheet` {StyleSheet} object that was removed # # ### stylesheets-changed # -# Extended: Emit anytime any style sheet is added or removed from the editor +# Extended: Emitted anytime any style sheet is added or removed from the editor # module.exports = class ThemeManager From 444eb0e5e5328837821605449c524644ab1813c5 Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Mon, 8 Sep 2014 09:37:39 -0700 Subject: [PATCH 08/10] :lipstick: e -> error --- src/theme-manager.coffee | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index 653fe48f1..0ef3d4f09 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -243,11 +243,11 @@ class ThemeManager @lessCache.cssForFile(lessStylesheetPath, [baseVarImports, less].join('\n')) else @lessCache.read(lessStylesheetPath) - catch e + catch error console.error """ Error compiling less stylesheet: #{lessStylesheetPath} - Line number: #{e.line} - #{e.message} + Line number: #{error.line} + #{error.message} """ stringToId: (string) -> From 359491fc3ff31bdaf931edcba0f3b4626c1b21ad Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Mon, 8 Sep 2014 09:40:06 -0700 Subject: [PATCH 09/10] Remove nulled variable --- src/theme-manager.coffee | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index 0ef3d4f09..45ca37e4e 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -263,10 +263,9 @@ class ThemeManager @emit 'stylesheets-changed' applyStylesheet: (path, text, type='bundled') -> - styleElement = null - styleId = @stringToId(path) styleElement = @stylesheetElementForId(styleId) + if styleElement? @emit 'stylesheet-removed', styleElement.sheet styleElement.textContent = text From ab75f3122fd6409464d428404b7c311135c59bcc Mon Sep 17 00:00:00 2001 From: Kevin Sawicki Date: Mon, 8 Sep 2014 09:43:50 -0700 Subject: [PATCH 10/10] :lipstick: Use proper Less --- src/theme-manager.coffee | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index 45ca37e4e..6ed3e764a 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -207,7 +207,7 @@ class ThemeManager # Public: Resolve and apply the stylesheet specified by the path. # - # This supports both CSS and LESS stylsheets. + # This supports both CSS and Less stylsheets. # # * `stylesheetPath` A {String} path to the stylesheet that can be an absolute # path or a relative path that will be resolved against the load path. @@ -245,7 +245,7 @@ class ThemeManager @lessCache.read(lessStylesheetPath) catch error console.error """ - Error compiling less stylesheet: #{lessStylesheetPath} + Error compiling Less stylesheet: #{lessStylesheetPath} Line number: #{error.line} #{error.message} """