[Gutter] Add ::getDomNode method to all 'components'

Author: Jess Lin

spec/text-editor-component-spec.coffee

@@ -46,7 +46,7 @@ describe "TextEditorComponent", ->
 
       lineHeightInPixels = editor.getLineHeightInPixels()
       charWidth = editor.getDefaultCharWidth()
-      componentNode = component.domNode
+      componentNode = component.getDomNode()
       verticalScrollbarNode = componentNode.querySelector('.vertical-scrollbar')
       horizontalScrollbarNode = componentNode.querySelector('.horizontal-scrollbar')
 
@@ -2392,7 +2392,7 @@ describe "TextEditorComponent", ->
         wrapperView.appendTo(hiddenParent)
 
         {component} = wrapperView
-        componentNode = component.domNode
+        componentNode = component.getDomNode()
         expect(componentNode.querySelectorAll('.line').length).toBe 0
 
         hiddenParent.style.display = 'block'
@@ -2599,7 +2599,7 @@ describe "TextEditorComponent", ->
       expect(wrapperNode.classList.contains('mini')).toBe true
 
     it "does not have an opaque background on lines", ->
-      expect(component.linesComponent.domNode.getAttribute('style')).not.toContain 'background-color'
+      expect(component.linesComponent.getDomNode().getAttribute('style')).not.toContain 'background-color'
 
     it "does not render invisible characters", ->
       atom.config.set('editor.invisibles', eol: 'E')

src/cursors-component.coffee

@@ -7,6 +7,9 @@ class CursorsComponent
     @domNode = document.createElement('div')
     @domNode.classList.add('cursors')
 
+  getDomNode: ->
+    @domNode
+
   updateSync: (state) ->
     newState = state.content
     @oldState ?= {cursors: {}}

src/highlights-component.coffee

@@ -17,6 +17,9 @@ class HighlightsComponent
       insertionPoint.setAttribute('select', '.underlayer')
       @domNode.appendChild(insertionPoint)
 
+  getDomNode: ->
+    @domNode
+
   updateSync: (state) ->
     newState = state.content.highlights
     @oldState ?= {}

src/input-component.coffee

@@ -7,6 +7,9 @@ class InputComponent
     @domNode.style['-webkit-transform'] = 'translateZ(0)'
     @domNode.addEventListener 'paste', (event) -> event.preventDefault()
 
+  getDomNode: ->
+    @domNode
+
   updateSync: (state) ->
     @oldState ?= {}
     newState = state.hiddenInput

src/lines-component.coffee

@@ -29,16 +29,19 @@ class LinesComponent
     @domNode.classList.add('lines')
 
     @cursorsComponent = new CursorsComponent(@presenter)
-    @domNode.appendChild(@cursorsComponent.domNode)
+    @domNode.appendChild(@cursorsComponent.getDomNode())
 
     @highlightsComponent = new HighlightsComponent(@presenter)
-    @domNode.appendChild(@highlightsComponent.domNode)
+    @domNode.appendChild(@highlightsComponent.getDomNode())
 
     if @useShadowDOM
       insertionPoint = document.createElement('content')
       insertionPoint.setAttribute('select', '.overlayer')
       @domNode.appendChild(insertionPoint)
 
+  getDomNode: ->
+    @domNode
+
   updateSync: (state) ->
     @newState = state.content
     @oldState ?= {lines: {}}

src/scrollbar-component.coffee

@@ -12,6 +12,9 @@ class ScrollbarComponent
 
     @domNode.addEventListener 'scroll', @onScrollCallback
 
+  getDomNode: ->
+    @domNode
+
   updateSync: (state) ->
     @oldState ?= {}
     switch @orientation

src/scrollbar-corner-component.coffee

@@ -7,6 +7,9 @@ class ScrollbarCornerComponent
     @contentNode = document.createElement('div')
     @domNode.appendChild(@contentNode)
 
+  getDomNode: ->
+    @domNode
+
   updateSync: (state) ->
     @oldState ?= {}
     @newState ?= {}

src/text-editor-component.coffee

@@ -73,19 +73,19 @@ class TextEditorComponent
     @mountGutterContainerComponent() if @presenter.getState().gutters.sortedDescriptions.length
 
     @hiddenInputComponent = new InputComponent
-    @scrollViewNode.appendChild(@hiddenInputComponent.domNode)
+    @scrollViewNode.appendChild(@hiddenInputComponent.getDomNode())
 
     @linesComponent = new LinesComponent({@presenter, @hostElement, @useShadowDOM})
-    @scrollViewNode.appendChild(@linesComponent.domNode)
+    @scrollViewNode.appendChild(@linesComponent.getDomNode())
 
     @horizontalScrollbarComponent = new ScrollbarComponent({orientation: 'horizontal', onScroll: @onHorizontalScroll})
-    @scrollViewNode.appendChild(@horizontalScrollbarComponent.domNode)
+    @scrollViewNode.appendChild(@horizontalScrollbarComponent.getDomNode())
 
     @verticalScrollbarComponent = new ScrollbarComponent({orientation: 'vertical', onScroll: @onVerticalScroll})
-    @domNode.appendChild(@verticalScrollbarComponent.domNode)
+    @domNode.appendChild(@verticalScrollbarComponent.getDomNode())
 
     @scrollbarCornerComponent = new ScrollbarCornerComponent
-    @domNode.appendChild(@scrollbarCornerComponent.domNode)
+    @domNode.appendChild(@scrollbarCornerComponent.getDomNode())
 
     @observeEditor()
     @listenForDOMEvents()
@@ -108,6 +108,9 @@ class TextEditorComponent
     @presenter.destroy()
     window.removeEventListener 'resize', @requestHeightAndWidthMeasurement
 
+  getDomNode: ->
+    @domNode
+
   updateSync: ->
     @oldState ?= {}
     @newState = @presenter.getState()
@@ -138,7 +141,7 @@ class TextEditorComponent
       @mountGutterContainerComponent() unless @gutterContainerComponent?
       @gutterContainerComponent.updateSync(@newState)
     else
-      @gutterContainerComponent?.domNode?.remove()
+      @gutterContainerComponent?.getDomNode()?.remove()
       @gutterContainerComponent = null
 
     @hiddenInputComponent.updateSync(@newState)
@@ -163,7 +166,7 @@ class TextEditorComponent
 
   mountGutterContainerComponent: ->
     @gutterContainerComponent = new GutterContainerComponent({@editor, @onLineNumberGutterMouseDown})
-    @domNode.insertBefore(@gutterContainerComponent.domNode, @domNode.firstChild)
+    @domNode.insertBefore(@gutterContainerComponent.getDomNode(), @domNode.firstChild)
 
   becameVisible: ->
     @updatesPaused = true
@@ -282,7 +285,7 @@ class TextEditorComponent
   focused: ->
     if @mounted
       @presenter.setFocused(true)
-      @hiddenInputComponent.domNode.focus()
+      @hiddenInputComponent.getDomNode().focus()
 
   blurred: ->
     if @mounted
@@ -646,7 +649,7 @@ class TextEditorComponent
 
     lineNumberGutter = @gutterContainerComponent?.getLineNumberGutterComponent()
     if lineNumberGutter
-      gutterBackgroundColor = getComputedStyle(lineNumberGutter.domNode).backgroundColor
+      gutterBackgroundColor = getComputedStyle(lineNumberGutter.getDomNode()).backgroundColor
       @presenter.setGutterBackgroundColor(gutterBackgroundColor)
 
   measureLineHeightAndDefaultCharWidth: ->
@@ -666,7 +669,7 @@ class TextEditorComponent
   measureScrollbars: ->
     @measureScrollbarsWhenShown = false
 
-    cornerNode = @scrollbarCornerComponent.domNode
+    cornerNode = @scrollbarCornerComponent.getDomNode()
     originalDisplayValue = cornerNode.style.display
 
     cornerNode.style.display = 'block'
@@ -692,9 +695,9 @@ class TextEditorComponent
       @measureScrollbarsWhenShown = true
       return
 
-    verticalNode = @verticalScrollbarComponent.domNode
-    horizontalNode = @horizontalScrollbarComponent.domNode
-    cornerNode = @scrollbarCornerComponent.domNode
+    verticalNode = @verticalScrollbarComponent.getDomNode()
+    horizontalNode = @horizontalScrollbarComponent.getDomNode()
+    cornerNode = @scrollbarCornerComponent.getDomNode()
 
     originalVerticalDisplayValue = verticalNode.style.display
     originalHorizontalDisplayValue = horizontalNode.style.display
@@ -764,7 +767,7 @@ class TextEditorComponent
   pixelPositionForMouseEvent: (event) ->
     {clientX, clientY} = event
 
-    linesClientRect = @linesComponent.domNode.getBoundingClientRect()
+    linesClientRect = @linesComponent.getDomNode().getBoundingClientRect()
     top = clientY - linesClientRect.top
     left = clientX - linesClientRect.left
     {top, left}

src/text-editor-element.coffee

@@ -113,28 +113,28 @@ class TextEditorElement extends HTMLElement
       lineOverdrawMargin: @lineOverdrawMargin
       useShadowDOM: @useShadowDOM
     )
-    @rootElement.appendChild(@component.domNode)
+    @rootElement.appendChild(@component.getDomNode())
 
     if @useShadowDOM
       @shadowRoot.addEventListener('blur', @shadowRootBlurred.bind(this), true)
     else
-      inputNode = @component.hiddenInputComponent.domNode
+      inputNode = @component.hiddenInputComponent.getDomNode()
       inputNode.addEventListener 'focus', @focused.bind(this)
       inputNode.addEventListener 'blur', => @dispatchEvent(new FocusEvent('blur', bubbles: false))
 
   unmountComponent: ->
     callRemoveHooks(this)
     if @component?
       @component.destroy()
-      @component.domNode.remove()
+      @component.getDomNode().remove()
       @component = null
 
   focused: ->
     @component?.focused()
 
   blurred: (event) ->
     unless @useShadowDOM
-      if event.relatedTarget is @component.hiddenInputComponent.domNode
+      if event.relatedTarget is @component.hiddenInputComponent.getDomNode()
         event.stopImmediatePropagation()
         return
 

src/text-editor-view.coffee

@@ -125,7 +125,7 @@ class TextEditorView extends View
   Object.defineProperty @::, 'firstRenderedScreenRow', get: -> @component.getRenderedRowRange()[0]
   Object.defineProperty @::, 'lastRenderedScreenRow', get: -> @component.getRenderedRowRange()[1]
   Object.defineProperty @::, 'active', get: -> @is(@getPaneView()?.activeView)
-  Object.defineProperty @::, 'isFocused', get: -> document.activeElement is @element or document.activeElement is @element.component?.hiddenInputComponent?.domNode
+  Object.defineProperty @::, 'isFocused', get: -> document.activeElement is @element or document.activeElement is @element.component?.hiddenInputComponent?.getDomNode()
   Object.defineProperty @::, 'mini', get: -> @model?.isMini()
   Object.defineProperty @::, 'component', get: -> @element?.component