[Gutter][View Registry] Make LineNumber- and Custom- GutterComponent get their view from the ViewRegistry

src/custom-gutter-component.coffee

@@ -11,16 +11,12 @@ TEMP_DECOR_BACKGROUND = 'white'
 module.exports =
 class CustomGutterComponent
 
-  constructor: ({@name}) ->
+  constructor: ({@gutter}) ->
     @decorationNodesById = {}
     @decorationItemsById = {}
 
-    @domNode = document.createElement('div')
-    @domNode.classList.add('gutter')
-    @domNode.setAttribute('gutter-name', @name)
-    @decorationsNode = document.createElement('div')
-    @decorationsNode.classList.add('custom-decorations')
-    @domNode.appendChild(@decorationsNode)
+    @domNode = atom.views.getView(@gutter)
+    @decorationsNode = @domNode.firstChild
 
     @domNode.style['width'] = '' + TEMP_MIN_WIDTH + 'px'
 
@@ -28,7 +24,7 @@ class CustomGutterComponent
     @domNode
 
   getName: ->
-    @name
+    @gutter.name
 
   updateSync: (state) ->
     gutterProps = state.lineNumberGutter

src/gutter-container-component.coffee

@@ -33,10 +33,10 @@ class GutterContainerComponent
       gutterComponent = @gutterComponentsByGutterName[gutter.name]
       if !gutterComponent
         if gutter.name is 'line-number'
-          gutterComponent = new LineNumberGutterComponent({onMouseDown: @onLineNumberGutterMouseDown, @editor, name: gutter.name})
+          gutterComponent = new LineNumberGutterComponent({onMouseDown: @onLineNumberGutterMouseDown, @editor, gutter})
           @lineNumberGutterComponent = gutterComponent
         else
-          gutterComponent = new CustomGutterComponent({name: gutter.name})
+          gutterComponent = new CustomGutterComponent({gutter})
       newGutterComponents.push(gutterComponent)
       newGutterComponentsByGutterName[gutter.name] = gutterComponent
 

src/line-number-gutter-component.coffee

@@ -7,14 +7,11 @@ module.exports =
 class LineNumberGutterComponent
   dummyLineNumberNode: null
 
-  constructor: ({@onMouseDown, @editor, @name}) ->
+  constructor: ({@onMouseDown, @editor, @gutter}) ->
     @lineNumberNodesById = {}
 
-    @domNode = document.createElement('div')
-    @domNode.classList.add('gutter')
-    @lineNumbersNode = document.createElement('div')
-    @lineNumbersNode.classList.add('line-numbers')
-    @domNode.appendChild(@lineNumbersNode)
+    @domNode = atom.views.getView(@gutter)
+    @lineNumbersNode = @domNode.firstChild
 
     @domNode.addEventListener 'click', @onClick
     @domNode.addEventListener 'mousedown', @onMouseDown
@@ -23,7 +20,7 @@ class LineNumberGutterComponent
     @domNode
 
   getName: ->
-    @name
+    @gutter.name
 
   updateSync: (state) ->
     @newState = state.lineNumberGutter