Merge pull request #2794 from atom/bo-flash

Add ability to 'flash' selections

package.json

@@ -62,13 +62,13 @@
     "vm-compatibility-layer": "0.1.0"
   },
   "packageDependencies": {
-    "atom-dark-syntax": "0.18.0",
-    "atom-dark-ui": "0.30.0",
-    "atom-light-syntax": "0.19.0",
-    "atom-light-ui": "0.26.0",
-    "base16-tomorrow-dark-theme": "0.18.0",
-    "solarized-dark-syntax": "0.19.0",
-    "solarized-light-syntax": "0.10.0",
+    "atom-dark-syntax": "0.19.0",
+    "atom-dark-ui": "0.31.0",
+    "atom-light-syntax": "0.20.0",
+    "atom-light-ui": "0.27.0",
+    "base16-tomorrow-dark-theme": "0.19.0",
+    "solarized-dark-syntax": "0.20.0",
+    "solarized-light-syntax": "0.11.0",
     "archive-view": "0.33.0",
     "autocomplete": "0.28.0",
     "autoflow": "0.17.0",

spec/display-buffer-spec.coffee

@@ -1031,11 +1031,15 @@ describe "DisplayBuffer", ->
       decoration = {type: 'gutter', class: 'one'}
       marker = displayBuffer.markBufferRange([[2, 13], [3, 15]])
 
-      displayBuffer.addDecorationForMarker(marker, decoration)
-      expect(displayBuffer.decorationsForScreenRowRange(2, 3)[marker.id][0]).toBe decoration
+      decorationObject = displayBuffer.addDecorationForMarker(marker, decoration)
+      expect(decorationObject).toBeDefined()
+      expect(decorationObject.getParams()).toBe decoration
+      expect(displayBuffer.decorationForId(decoration.id)).toBe decorationObject
+      expect(displayBuffer.decorationsForScreenRowRange(2, 3)[marker.id][0]).toBe decorationObject
 
       displayBuffer.removeDecorationForMarker(marker, decoration)
       expect(displayBuffer.decorationsForScreenRowRange(2, 3)[marker.id]).not.toBeDefined()
+      expect(displayBuffer.decorationForId(decoration.id)).not.toBeDefined()
 
   describe "::setScrollTop", ->
     beforeEach ->

spec/editor-component-spec.coffee

@@ -743,6 +743,19 @@ describe "EditorComponent", ->
       expect(selectionNode.offsetTop).toBe editor.getLineHeightInPixels()
       expect(selectionNode.offsetLeft).toBe editor.pixelPositionForScreenPosition([1, 6]).left
 
+    it "will flash the selection when flash:true is passed to editor::setSelectedBufferRange", ->
+      editor.setSelectedBufferRange([[1, 6], [1, 10]], flash: true)
+      runSetImmediateCallbacks()
+      selectionNode = node.querySelector('.selection')
+      expect(selectionNode.classList.contains('flash')).toBe true
+
+      advanceClock editor.selectionFlashDuration
+      expect(selectionNode.classList.contains('flash')).toBe false
+
+      editor.setSelectedBufferRange([[1, 5], [1, 7]], flash: true)
+      runSetImmediateCallbacks()
+      expect(selectionNode.classList.contains('flash')).toBe true
+
   describe "line decoration rendering", ->
     [marker, decoration] = []
 
@@ -887,12 +900,12 @@ describe "EditorComponent", ->
         expect(lineAndLineNumberHaveClass(3, 'only-non-empty')).toBe false
 
   describe "highlight decoration rendering", ->
-    [marker, decoration, scrollViewClientLeft] = []
+    [marker, decoration, decorationParams, scrollViewClientLeft] = []
     beforeEach ->
       scrollViewClientLeft = node.querySelector('.scroll-view').getBoundingClientRect().left
       marker = editor.displayBuffer.markBufferRange([[2, 13], [3, 15]], invalidate: 'inside')
-      decoration = {type: 'highlight', class: 'test-highlight'}
-      editor.addDecorationForMarker(marker, decoration)
+      decorationParams = {type: 'highlight', class: 'test-highlight'}
+      decoration = editor.addDecorationForMarker(marker, decorationParams)
       runSetImmediateCallbacks()
 
     it "does not render highlights for off-screen lines until they come on-screen", ->
@@ -929,7 +942,7 @@ describe "EditorComponent", ->
       expect(regions.length).toBe 2
 
     it "removes highlights when a decoration is removed", ->
-      editor.removeDecorationForMarker(marker, decoration)
+      editor.removeDecorationForMarker(marker, decorationParams)
       runSetImmediateCallbacks()
       regions = node.querySelectorAll('.test-highlight .region')
       expect(regions.length).toBe 0
@@ -960,6 +973,39 @@ describe "EditorComponent", ->
       regions = node.querySelectorAll('.test-highlight .region')
       expect(regions.length).toBe 2
 
+    describe "flashing a decoration via the Decoration::flash()", ->
+      highlightNode = null
+      beforeEach ->
+        highlightNode = node.querySelector('.test-highlight')
+
+      it "adds and removes the flash class specified in ::flash", ->
+        expect(highlightNode.classList.contains('flash-class')).toBe false
+
+        decoration.flash('flash-class', 10)
+        expect(highlightNode.classList.contains('flash-class')).toBe true
+
+        advanceClock(10)
+        expect(highlightNode.classList.contains('flash-class')).toBe false
+
+      describe "when ::flash is called again before the first has finished", ->
+        it "removes the class from the decoration highlight before adding it for the second ::flash call", ->
+          decoration.flash('flash-class', 10)
+          expect(highlightNode.classList.contains('flash-class')).toBe true
+
+          addClassSpy = spyOn(highlightNode.classList, 'add').andCallThrough()
+          removeClassSpy = spyOn(highlightNode.classList, 'remove').andCallThrough()
+
+          advanceClock(2)
+          decoration.flash('flash-class', 10)
+
+          expect(removeClassSpy).toHaveBeenCalledWith('flash-class')
+          expect(addClassSpy).toHaveBeenCalledWith('flash-class')
+
+          expect(highlightNode.classList.contains('flash-class')).toBe true
+
+          advanceClock(10)
+          expect(highlightNode.classList.contains('flash-class')).toBe false
+
     describe "when a decoration's marker moves", ->
       it "moves rendered highlights when the buffer is changed", ->
         regionStyle = node.querySelector('.test-highlight .region').style

src/decoration.coffee

@@ -0,0 +1,42 @@
+_ = require 'underscore-plus'
+{Subscriber, Emitter} = require 'emissary'
+
+idCounter = 0
+nextId = -> idCounter++
+
+module.exports =
+class Decoration
+  Emitter.includeInto(this)
+
+  @isType: (decorationParams, type) ->
+    if _.isArray(decorationParams.type)
+      type in decorationParams.type
+    else
+      type is decorationParams.type
+
+  constructor: (@marker, @params) ->
+    @id = nextId()
+    @params.id = @id
+    @flashQueue = null
+
+  getParams: ->
+    @params
+
+  isType: (type) ->
+    Decoration.isType(@params, type)
+
+  matchesPattern: (decorationPattern) ->
+    return false unless decorationPattern?
+    for key, value of decorationPattern
+      return false if @params[key] != value
+    true
+
+  flash: (klass, duration=500) ->
+    flashObject = {class: klass, duration}
+    @flashQueue ?= []
+    @flashQueue.push(flashObject)
+    @emit('flash')
+
+  consumeNextFlash: ->
+    return @flashQueue.shift() if @flashQueue?.length > 0
+    null

src/display-buffer.coffee

@@ -8,6 +8,7 @@ TokenizedBuffer = require './tokenized-buffer'
 RowMap = require './row-map'
 Fold = require './fold'
 Token = require './token'
+Decoration = require './decoration'
 DisplayBufferMarker = require './display-buffer-marker'
 
 class BufferToScreenConversionError extends Error
@@ -45,6 +46,7 @@ class DisplayBuffer extends Model
     @charWidthsByScope = {}
     @markers = {}
     @foldsByMarkerId = {}
+    @decorationsById = {}
     @decorationsByMarkerId = {}
     @decorationMarkerChangedSubscriptions = {}
     @decorationMarkerDestroyedSubscriptions = {}
@@ -752,31 +754,17 @@ class DisplayBuffer extends Model
   rangeForAllLines: ->
     new Range([0, 0], @clipScreenPosition([Infinity, Infinity]))
 
+  decorationForId: (id) ->
+    @decorationsById[id]
+
   decorationsForScreenRowRange: (startScreenRow, endScreenRow) ->
     decorationsByMarkerId = {}
-
     for marker in @findMarkers(intersectsScreenRowRange: [startScreenRow, endScreenRow])
       if decorations = @decorationsByMarkerId[marker.id]
         decorationsByMarkerId[marker.id] = decorations
     decorationsByMarkerId
 
-  decorationMatchesType: (decoration, type) ->
-    if _.isArray(decoration.type)
-      type in decoration.type
-    else
-      type is decoration.type
-
-  decorationMatchesPattern: (decoration, decorationPattern) ->
-    return false unless decoration? and decorationPattern?
-    for key, value of decorationPattern
-      return false if decoration[key] != value
-    true
-
-  addDecorationForMarker: (marker, decoration) ->
-    unless marker?
-      console.warn 'A null marker cannot be decorated'
-      return
-
+  addDecorationForMarker: (marker, decorationParams) ->
     marker = @getMarker(marker.id)
 
     @decorationMarkerDestroyedSubscriptions[marker.id] ?= @subscribe marker, 'destroyed', =>
@@ -791,21 +779,21 @@ class DisplayBuffer extends Model
         for decoration in decorations
           @emit 'decoration-changed', marker, decoration, event
 
+    decoration = new Decoration(marker, decorationParams)
     @decorationsByMarkerId[marker.id] ?= []
     @decorationsByMarkerId[marker.id].push(decoration)
+    @decorationsById[decoration.id] = decoration
     @emit 'decoration-added', marker, decoration
+    decoration
 
   removeDecorationForMarker: (marker, decorationPattern) ->
-    unless marker?
-      console.warn 'A decoration cannot be removed from a null marker'
-      return
-
     return unless decorations = @decorationsByMarkerId[marker.id]
 
     for i in [decorations.length - 1..0]
       decoration = decorations[i]
-      if @decorationMatchesPattern(decoration, decorationPattern)
+      if decoration.matchesPattern(decorationPattern)
         decorations.splice(i, 1)
+        delete @decorationsById[decoration.id]
         @emit 'decoration-removed', marker, decoration
 
     @removedAllMarkerDecorations(marker) if decorations.length is 0

src/editor-component.coffee

@@ -280,21 +280,22 @@ EditorComponent = React.createClass
       headScreenRow = null
       if marker.isValid()
         for decoration in decorations
-          if editor.decorationMatchesType(decoration, 'gutter') or editor.decorationMatchesType(decoration, 'line')
+          if decoration.isType('gutter') or decoration.isType('line')
+            decorationParams = decoration.getParams()
             screenRange ?= marker.getScreenRange()
             headScreenRow ?= marker.getHeadScreenPosition().row
             startRow = screenRange.start.row
             endRow = screenRange.end.row
             endRow-- if not screenRange.isEmpty() and screenRange.end.column == 0
             for screenRow in [startRow..endRow]
-              continue if decoration.onlyHead and screenRow isnt headScreenRow
+              continue if decorationParams.onlyHead and screenRow isnt headScreenRow
               if screenRange.isEmpty()
-                continue if decoration.onlyNonEmpty
+                continue if decorationParams.onlyNonEmpty
               else
-                continue if decoration.onlyEmpty
+                continue if decorationParams.onlyEmpty
 
               decorationsByScreenRow[screenRow] ?= []
-              decorationsByScreenRow[screenRow].push decoration
+              decorationsByScreenRow[screenRow].push decorationParams
 
     decorationsByScreenRow
 
@@ -306,13 +307,14 @@ EditorComponent = React.createClass
       screenRange = marker.getScreenRange()
       if marker.isValid() and not screenRange.isEmpty()
         for decoration in decorations
-          if editor.decorationMatchesType(decoration, 'highlight')
+          if decoration.isType('highlight')
+            decorationParams = decoration.getParams()
             filteredDecorations[markerId] ?=
               id: markerId
               startPixelPosition: editor.pixelPositionForScreenPosition(screenRange.start)
               endPixelPosition: editor.pixelPositionForScreenPosition(screenRange.end)
               decorations: []
-            filteredDecorations[markerId].decorations.push decoration
+            filteredDecorations[markerId].decorations.push decorationParams
 
     # At least in Chromium 31, removing the last highlight causes a rendering
     # artifact where chunks of the lines disappear, so we always leave this

src/editor.coffee

@@ -146,6 +146,7 @@ class Editor extends Model
   selections: null
   suppressSelectionMerging: false
   updateBatchDepth: 0
+  selectionFlashDuration: 500
 
   @delegatesMethods 'suggestedIndentForBufferRow', 'autoIndentBufferRow', 'autoIndentBufferRows',
     'autoDecreaseIndentForBufferRow', 'toggleLineCommentForBufferRow', 'toggleLineCommentsForBufferRows',
@@ -1142,8 +1143,8 @@ class Editor extends Model
   removeDecorationForMarker: (marker, decorationPattern) ->
     @displayBuffer.removeDecorationForMarker(marker, decorationPattern)
 
-  decorationMatchesType: (decoration, type) ->
-    @displayBuffer.decorationMatchesType(decoration, type)
+  decorationForId: (id) ->
+    @displayBuffer.decorationForId(id)
 
   # Public: Get the {DisplayBufferMarker} for the given marker id.
   getMarker: (id) ->
@@ -1279,7 +1280,6 @@ class Editor extends Model
         if selection.intersectsBufferRange(selectionBufferRange)
           return selection
     else
-      @addDecorationForMarker(marker, type: 'highlight', class: 'selection')
       @emit 'selection-added', selection
       selection
 

src/gutter-component.coffee

@@ -2,6 +2,7 @@ _ = require 'underscore-plus'
 React = require 'react-atom-fork'
 {div} = require 'reactionary-atom-fork'
 {isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
+Decoration = require './decoration'
 SubscriberMixin = require './subscriber-mixin'
 
 WrapperDiv = document.createElement('div')
@@ -154,7 +155,7 @@ GutterComponent = React.createClass
     classes = ''
     if lineDecorations? and decorations = lineDecorations[screenRow]
       for decoration in decorations
-        if editor.decorationMatchesType(decoration, 'gutter')
+        if Decoration.isType(decoration, 'gutter')
           classes += decoration.class + ' '
 
     classes += "foldable " if bufferRow >= 0 and editor.isFoldableAtBufferRow(bufferRow)
@@ -186,11 +187,11 @@ GutterComponent = React.createClass
 
     if previousDecorations?
       for decoration in previousDecorations
-        node.classList.remove(decoration.class) if editor.decorationMatchesType(decoration, 'gutter') and not _.deepContains(decorations, decoration)
+        node.classList.remove(decoration.class) if Decoration.isType(decoration, 'gutter') and not _.deepContains(decorations, decoration)
 
     if decorations?
       for decoration in decorations
-        if editor.decorationMatchesType(decoration, 'gutter') and not _.deepContains(previousDecorations, decoration)
+        if Decoration.isType(decoration, 'gutter') and not _.deepContains(previousDecorations, decoration)
           node.classList.add(decoration.class)
 
     unless @screenRowsByLineNumberId[lineNumberId] is screenRow

src/highlight-component.coffee

@@ -11,12 +11,35 @@ HighlightComponent = React.createClass
 
     className = 'highlight'
     className += " #{decoration.class}" if decoration.class?
+
     div {className},
       if endPixelPosition.top is startPixelPosition.top
         @renderSingleLineRegions()
       else
         @renderMultiLineRegions()
 
+  componentDidMount: ->
+    {editor, decoration} = @props
+    if decoration.id?
+      @decoration = editor.decorationForId(decoration.id)
+      @decoration.on 'flash', @startFlashAnimation
+      @startFlashAnimation()
+
+  componentWillUnmount: ->
+    @decoration?.off 'flash', @startFlashAnimation
+
+  startFlashAnimation: ->
+    return unless flash = @decoration.consumeNextFlash()
+
+    node = @getDOMNode()
+    node.classList.remove(flash.class)
+
+    requestAnimationFrame =>
+      node.classList.add(flash.class)
+      clearTimeout(@flashTimeoutId)
+      removeFlashClass = -> node.classList.remove(flash.class)
+      @flashTimeoutId = setTimeout(removeFlashClass, flash.duration)
+
   renderSingleLineRegions: ->
     {startPixelPosition, endPixelPosition, lineHeightInPixels} = @props
 

src/highlights-component.coffee

@@ -12,12 +12,12 @@ HighlightsComponent = React.createClass
       @renderHighlights() if @isMounted()
 
   renderHighlights: ->
-    {highlightDecorations, lineHeightInPixels} = @props
+    {editor, highlightDecorations, lineHeightInPixels} = @props
 
     highlightComponents = []
     for markerId, {startPixelPosition, endPixelPosition, decorations} of highlightDecorations
       for decoration in decorations
-        highlightComponents.push(HighlightComponent({key: "#{markerId}-#{decoration.class}", startPixelPosition, endPixelPosition, decoration, lineHeightInPixels}))
+        highlightComponents.push(HighlightComponent({editor, key: "#{markerId}-#{decoration.class}", startPixelPosition, endPixelPosition, decoration, lineHeightInPixels}))
 
     highlightComponents
 

src/lines-component.coffee

@@ -4,6 +4,7 @@ React = require 'react-atom-fork'
 {debounce, isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 {$$} = require 'space-pen'
 
+Decoration = require './decoration'
 HighlightsComponent = require './highlights-component'
 
 DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0]
@@ -135,7 +136,7 @@ LinesComponent = React.createClass
     classes = ''
     if decorations = lineDecorations[screenRow]
       for decoration in decorations
-        if editor.decorationMatchesType(decoration, 'line')
+        if Decoration.isType(decoration, 'line')
           classes += decoration.class + ' '
     classes += 'line'
 
@@ -223,11 +224,11 @@ LinesComponent = React.createClass
 
     if previousDecorations?
       for decoration in previousDecorations
-        lineNode.classList.remove(decoration.class) if editor.decorationMatchesType(decoration, 'line') and not _.deepContains(decorations, decoration)
+        lineNode.classList.remove(decoration.class) if Decoration.isType(decoration, 'line') and not _.deepContains(decorations, decoration)
 
     if decorations?
       for decoration in decorations
-        if editor.decorationMatchesType(decoration, 'line') and not _.deepContains(previousDecorations, decoration)
+        if Decoration.isType(decoration, 'line') and not _.deepContains(previousDecorations, decoration)
           lineNode.classList.add(decoration.class)
 
     lineNode.style.width = lineWidth + 'px' if updateWidth

src/selection.coffee

@@ -15,6 +15,8 @@ class Selection extends Model
   constructor: ({@cursor, @marker, @editor, id}) ->
     @assignId(id)
     @cursor.selection = this
+    @decoration = @editor.addDecorationForMarker(@marker, type: 'highlight', class: 'selection')
+
     @marker.on 'changed', => @screenRangeChanged()
     @marker.on 'destroyed', =>
       @destroyed = true
@@ -76,9 +78,12 @@ class Selection extends Model
     options.reversed ?= @isReversed()
     @editor.destroyFoldsIntersectingBufferRange(bufferRange) unless options.preserveFolds
     @modifySelection =>
+      needsFlash = options.flash
+      delete options.flash if options.flash?
       @cursor.needsAutoscroll = false if @needsAutoscroll?
       @marker.setBufferRange(bufferRange, options)
       @autoscroll() if @needsAutoscroll and @editor.manageScrollPosition
+      @decoration.flash('flash', @editor.selectionFlashDuration) if needsFlash
 
   # Public: Returns the starting and ending buffer rows the selection is
   # highlighting.

static/syntax.less

@@ -19,3 +19,17 @@
     }
   }
 }
+
+.define-selection-flash-color-if-not-defined() { @syntax-selection-flash-color: rgba(100, 255, 100, 0.7); }
+.define-selection-flash-color-if-not-defined();
+
+@-webkit-keyframes flash {
+  from { background-color: @syntax-selection-flash-color; }
+  to { background-color: null; }
+}
+
+.editor .flash.selection .region {
+  -webkit-animation-name: flash;
+  -webkit-animation-duration: .5s;
+  -webkit-animation-iteration-count: 1;
+}

static/variables/syntax-variables.less

@@ -5,6 +5,7 @@
 @syntax-text-color: #333;
 @syntax-cursor-color: #333;
 @syntax-selection-color: #69c;
+@syntax-selection-flash-color: #00f; // Color the selection is 'flashed' when you run find next
 @syntax-background-color: #fff;
 
 // Guide colors