From 99b08826ddc1d292521ccb91b170cdb2cf7c0760 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Wed, 12 Nov 2014 13:56:51 -0700 Subject: [PATCH] =?UTF-8?q?Style=20non-shadow=20DOM=20editor=20with=20it?= =?UTF-8?q?=E2=80=99s=20own=20style=20sheet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Trying to style both modes of the text editor with the same style sheet is proving to be more trouble than it’s worth. This prepares the shadow DOM style sheet to diverge more radically to enable the background color to be overridden from the outside more easily. --- src/text-editor-element.coffee | 9 +- src/theme-manager.coffee | 3 - static/text-editor-light.less | 206 ++++++++++++++++++++++++++++++++- 3 files changed, 210 insertions(+), 8 deletions(-) diff --git a/src/text-editor-element.coffee b/src/text-editor-element.coffee index 6491d92f1..866cb4f75 100644 --- a/src/text-editor-element.coffee +++ b/src/text-editor-element.coffee @@ -1,11 +1,14 @@ {View, $, callRemoveHooks} = require 'space-pen' React = require 'react-atom-fork' +Path = require 'path' {defaults} = require 'underscore-plus' TextBuffer = require 'text-buffer' TextEditor = require './text-editor' TextEditorComponent = require './text-editor-component' TextEditorView = null +ShadowStyleSheet = null + class TextEditorElement extends HTMLElement model: null componentDescriptor: null @@ -25,8 +28,13 @@ class TextEditorElement extends HTMLElement @setAttribute('tabindex', -1) if atom.config.get('editor.useShadowDOM') + unless ShadowStyleSheet? + ShadowStyleSheet = document.createElement('style') + ShadowStyleSheet.textContent = atom.themes.loadLessStylesheet(require.resolve('../static/text-editor-shadow.less')) + @createShadowRoot() + @shadowRoot.appendChild(ShadowStyleSheet.cloneNode(true)) @stylesElement = document.createElement('atom-styles') @stylesElement.setAttribute('context', 'atom-text-editor') @stylesElement.initialize() @@ -42,7 +50,6 @@ class TextEditorElement extends HTMLElement @rootElement.classList.add('editor', 'editor-colors') - createSpacePenShim: -> TextEditorView ?= require './text-editor-view' @__spacePenView = new TextEditorView(this) diff --git a/src/theme-manager.coffee b/src/theme-manager.coffee index a0293f2cf..e87028ae3 100644 --- a/src/theme-manager.coffee +++ b/src/theme-manager.coffee @@ -249,9 +249,6 @@ class ThemeManager if nativeStylesheetPath = fs.resolveOnLoadPath(process.platform, ['css', 'less']) @requireStylesheet(nativeStylesheetPath) - textEditorStylesPath = path.join(@resourcePath, 'static', 'text-editor-shadow.less') - atom.styles.addStyleSheet(@loadLessStylesheet(textEditorStylesPath), sourcePath: textEditorStylesPath, context: 'atom-text-editor') - stylesheetElementForId: (id) -> document.head.querySelector("atom-styles style[source-path=\"#{id}\"]") diff --git a/static/text-editor-light.less b/static/text-editor-light.less index bb67be5d9..84ac5987f 100644 --- a/static/text-editor-light.less +++ b/static/text-editor-light.less @@ -18,8 +18,206 @@ atom-overlay { z-index: 4; } -// TODO: remove this when the shadow DOM is the default -atom-text-editor .highlight { - background: none; - padding: 0; +// TODO: Remove the following styles when the editor shadow DOM can no longer be disabled +atom-text-editor { + display: -webkit-flex; + + .editor-contents { + width: 100%; + overflow: hidden; + cursor: text; + display: -webkit-flex; + -webkit-user-select: none; + position: relative; + } + + .gutter { + overflow: hidden; + text-align: right; + cursor: default; + min-width: 1em; + box-sizing: border-box; + } + + .line-numbers { + position: relative; + } + + .line-number { + white-space: nowrap; + padding-left: .5em; + opacity: 0.6; + + &.cursor-line { + opacity: 1; + } + + .icon-right { + .octicon(chevron-down, 0.8em); + display: inline-block; + visibility: hidden; + opacity: .6; + padding: 0 .4em; + + &:before { + text-align: center; + } + } + } + + .gutter:hover { + .line-number.foldable .icon-right { + visibility: visible; + + &:hover { + opacity: 1; + } + } + } + + .gutter, .gutter:hover { + .line-number.folded .icon-right { + .octicon(chevron-right, 0.8em); + + visibility: visible; + + &:before { + position: relative; + left: -.1em; + } + } + } + + .scroll-view { + position: relative; + z-index: 0; + + overflow: hidden; + -webkit-flex: 1; + min-width: 0; + } + + .underlayer { + position: absolute; + z-index: -2; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .highlight { + background: none; + padding: 0; + } + + .highlight .region { + position: absolute; + pointer-events: none; + z-index: -1; + } + + .lines { + min-width: 100%; + position: relative; + z-index: 1; + } + + .line { + white-space: pre; + + &.cursor-line .fold-marker:after { + opacity: 1; + } + } + + .fold-marker { + cursor: default; + + &:after { + .icon(0.8em, inline); + + content: @ellipsis; + padding-left: 0.2em; + } + } + + .placeholder-text { + position: absolute; + color: @text-color-subtle; + } + + .invisible-character { + font-weight: normal !important; + font-style: normal !important; + } + + .indent-guide { + box-shadow: inset 1px 0; + } + + .hidden-input { + padding: 0; + border: 0; + position: absolute; + z-index: -1; + top: 0; + left: 0; + opacity: 0; + width: 1px; + } + + .cursor { + z-index: 4; + pointer-events: none; + box-sizing: border-box; + position: absolute; + border-left: 1px solid; + opacity: 0; + } + + &.is-focused .cursor { + opacity: 1; + } + + .cursors.blink-off .cursor { + opacity: 0; + } + + .horizontal-scrollbar { + position: absolute; + left: 0; + right: 0; + bottom: 0; + + height: 15px; + overflow-x: auto; + overflow-y: hidden; + z-index: 3; + cursor: default; + + .scrollbar-content { + height: 15px; + } + } + + .vertical-scrollbar { + position: absolute; + top: 0; + right: 0; + bottom: 0; + + width: 15px; + overflow-x: hidden; + overflow-y: auto; + z-index: 3; + cursor: default; + } + + .scrollbar-corner { + position: absolute; + overflow: auto; + bottom: 0; + right: 0; + } }