From 758466c9af2a4355b30bc8f36552f668406d7dc9 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Tue, 14 Mar 2017 22:47:21 -0600
Subject: [PATCH] Make various tweaks to improve mini editors

Still a ways to go, but this is a start toward getting the mini-editors
to play nice with our existing styling.
---
 package.json                       |  2 +-
 spec/text-editor-component-spec.js | 15 ++++++-
 src/text-editor-component.js       | 72 +++++++++++++++++++++---------
 src/text-editor-element.js         |  4 ++
 4 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 72eacad34..b5be71b30 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "dedent": "^0.6.0",
     "devtron": "1.3.0",
     "element-resize-detector": "^1.1.10",
-    "etch": "^0.9.5",
+    "etch": "^0.10.0",
     "event-kit": "^2.3.0",
     "find-parent-dir": "^0.3.0",
     "first-mate": "7.0.4",
diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 685e81361..7e94ed810 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -231,6 +231,19 @@ describe('TextEditorComponent', () => {
     expect(lineNumberNodeForScreenRow(component, 1).classList.contains('folded')).toBe(true)
   })
 
+  describe('mini editors', () => {
+    it('adds the mini attribute', () => {
+      const {element, editor} = buildComponent({mini: true})
+      expect(element.hasAttribute('mini')).toBe(true)
+    })
+
+    it('does not render the gutter container', () => {
+      const {component, element, editor} = buildComponent({mini: true})
+      expect(component.refs.gutterContainer).toBeUndefined()
+      expect(element.querySelector('gutter-container')).toBeNull()
+    })
+  })
+
   describe('focus', () => {
     it('focuses the hidden input element and adds the is-focused class when focused', async () => {
       assertDocumentFocused()
@@ -1241,7 +1254,7 @@ describe('TextEditorComponent', () => {
 
 function buildComponent (params = {}) {
   const buffer = new TextBuffer({text: SAMPLE_TEXT})
-  const editor = new TextEditor({buffer})
+  const editor = new TextEditor({buffer, mini: params.mini})
   const component = new TextEditorComponent({
     model: editor,
     rowsPerTile: params.rowsPerTile,
diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index c24949b07..0fbbd31a2 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -118,56 +118,79 @@ class TextEditorComponent {
   render () {
     const model = this.getModel()
 
-    let style
+    const style = {
+      overflow: 'hidden',
+    }
     if (!model.getAutoHeight() && !model.getAutoWidth()) {
-      style = {contain: 'strict'}
+      style.contain = 'strict'
     }
 
+    let attributes = null
     let className = 'editor'
     if (this.focused) {
       className += ' is-focused'
     }
+    if (model.isMini()) {
+      attributes = {mini: ''}
+      className += ' mini'
+    }
 
-    return $('atom-text-editor', {
+    const scrollerOverflowX = (model.isMini() || model.isSoftWrapped()) ? 'hidden' : 'auto'
+    const scrollerOverflowY = model.isMini() ? 'hidden' : 'auto'
+
+    return $('atom-text-editor',
+      {
         className,
+        attributes,
         style,
         tabIndex: -1,
         on: {focus: this.didFocus}
       },
       $.div(
         {
-          ref: 'scroller',
-          className: 'scroll-view',
-          on: {scroll: this.didScroll},
           style: {
-            position: 'absolute',
-            contain: 'strict',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            overflowX: model.isSoftWrapped() ? 'hidden' : 'auto',
-            overflowY: 'auto',
+            position: 'relative',
+            width: '100%',
+            height: '100%',
             backgroundColor: 'inherit'
           }
         },
         $.div(
           {
+            ref: 'scroller',
+            className: 'scroll-view',
+            on: {scroll: this.didScroll},
             style: {
-              isolate: 'content',
-              width: 'max-content',
-              height: 'max-content',
+              position: 'absolute',
+              contain: 'strict',
+              top: 0,
+              right: 0,
+              bottom: 0,
+              left: 0,
+              overflowX: scrollerOverflowX,
+              overflowY: scrollerOverflowY,
               backgroundColor: 'inherit'
             }
           },
-          this.renderGutterContainer(),
-          this.renderContent()
+          $.div(
+            {
+              style: {
+                isolate: 'content',
+                width: 'max-content',
+                height: 'max-content',
+                backgroundColor: 'inherit'
+              }
+            },
+            this.renderGutterContainer(),
+            this.renderContent()
+          )
         )
       )
     )
   }
 
   renderGutterContainer () {
+    if (this.props.model.isMini()) return null
     const props = {ref: 'gutterContainer', className: 'gutter-container'}
 
     if (this.measurements) {
@@ -338,7 +361,8 @@ class TextEditorComponent {
       style: {
         position: 'absolute',
         contain: 'strict',
-        width, height
+        width, height,
+        backgroundColor: 'inherit'
       }
     }, tileNodes)
   }
@@ -1132,6 +1156,8 @@ class TextEditorComponent {
   }
 
   measureEditorDimensions () {
+    if (!this.measurements) return false
+
     let dimensionsChanged = false
     const scrollerHeight = this.refs.scroller.offsetHeight
     const scrollerWidth = this.refs.scroller.offsetWidth
@@ -1210,7 +1236,11 @@ class TextEditorComponent {
   }
 
   measureGutterDimensions () {
-    this.measurements.lineNumberGutterWidth = this.refs.lineNumberGutter.offsetWidth
+    if (this.refs.lineNumberGutter) {
+      this.measurements.lineNumberGutterWidth = this.refs.lineNumberGutter.offsetWidth
+    } else {
+      this.measurements.lineNumberGutterWidth = 0
+    }
   }
 
   requestHorizontalMeasurement (row, column) {
diff --git a/src/text-editor-element.js b/src/text-editor-element.js
index 1a36b9782..38bedfe0e 100644
--- a/src/text-editor-element.js
+++ b/src/text-editor-element.js
@@ -49,6 +49,10 @@ class TextEditorElement extends HTMLElement {
     return this.getComponent().getScrollLeft()
   }
 
+  hasFocus () {
+    return this.getComponent().focused
+  }
+
   getComponent () {
     if (!this.component) this.component = new TextEditorComponent({
       element: this,