Merge pull request #8094 from smashwilson/overlay-class

Specify class attributes directly for overlay nodes

spec/text-editor-component-spec.coffee

@@ -1475,6 +1475,17 @@ describe "TextEditorComponent", ->
         overlay = component.getTopmostDOMNode().querySelector('atom-overlay .overlay-test')
         expect(overlay).toBe null
 
+      it "renders the overlay element with the CSS class specified by the decoration", ->
+        marker = editor.displayBuffer.markBufferRange([[2, 13], [2, 13]], invalidate: 'never')
+        decoration = editor.decorateMarker(marker, {type: 'overlay', class: 'my-overlay', item})
+        nextAnimationFrame()
+
+        overlay = component.getTopmostDOMNode().querySelector('atom-overlay.my-overlay')
+        expect(overlay).not.toBe null
+
+        child = overlay.querySelector('.overlay-test')
+        expect(child).toBe item
+
     describe "when the marker is not empty", ->
       it "renders at the head of the marker by default", ->
         marker = editor.displayBuffer.markBufferRange([[2, 5], [2, 10]], invalidate: 'never')

src/overlay-manager.coffee

@@ -27,11 +27,12 @@ class OverlayManager
     contentMargin = parseInt(getComputedStyle(itemView)['margin-left']) ? 0
     @presenter.setOverlayDimensions(decorationId, itemView.offsetWidth, itemView.offsetHeight, contentMargin)
 
-  renderOverlay: (state, decorationId, {item, pixelPosition}) ->
+  renderOverlay: (state, decorationId, {item, pixelPosition, class: klass}) ->
     itemView = atom.views.getView(item)
     cachedOverlay = @overlaysById[decorationId]
     unless overlayNode = cachedOverlay?.overlayNode
       overlayNode = document.createElement('atom-overlay')
+      overlayNode.classList.add(klass) if klass?
       @container.appendChild(overlayNode)
       @overlaysById[decorationId] = cachedOverlay = {overlayNode, itemView}
 

src/text-editor-presenter.coffee

@@ -424,7 +424,7 @@ class TextEditorPresenter
     for decoration in @model.getOverlayDecorations()
       continue unless decoration.getMarker().isValid()
 
-      {item, position} = decoration.getProperties()
+      {item, position, class: klass} = decoration.getProperties()
       if position is 'tail'
         screenPosition = decoration.getMarker().getTailScreenPosition()
       else
@@ -450,8 +450,9 @@ class TextEditorPresenter
       pixelPosition.top = top
       pixelPosition.left = left
 
-      @state.content.overlays[decoration.id] ?= {item}
-      @state.content.overlays[decoration.id].pixelPosition = pixelPosition
+      overlayState = @state.content.overlays[decoration.id] ?= {item}
+      overlayState.pixelPosition = pixelPosition
+      overlayState.class = klass if klass?
       visibleDecorationIds[decoration.id] = true
 
     for id of @state.content.overlays

src/text-editor.coffee

@@ -1316,7 +1316,7 @@ class TextEditor extends Model
   #       head or tail of the given marker, depending on the `position`
   #       property.
   #   * `class` This CSS class will be applied to the decorated line number,
-  #     line, or highlight.
+  #     line, highlight, or overlay.
   #   * `onlyHead` (optional) If `true`, the decoration will only be applied to
   #     the head of the marker. Only applicable to the `line` and `gutter`
   #     types.