Re-implement focusing annotation cards

... when hovering over the highlights in the document,
or over the annotation cards themselves.

h/static/scripts/guest.coffee

@@ -250,8 +250,13 @@ class Annotator.Guest extends Annotator
       method: "showEditor"
       params: annotation.$$tag
 
-  onAnchorMouseover: ->
-  onAnchorMouseout: ->
+  focusInViewer: (annotations, state) =>
+    @panel?.notify
+      method: "setFocusState"
+      params:
+        tags: (a.$$tag for a in annotations)
+        state: state
+
   onAnchorMousedown: ->
 
   checkForStartSelection: (event) =>
@@ -294,6 +299,22 @@ class Annotator.Guest extends Annotator
       # Tell sidebar to show the viewer for these annotations
       this.showViewer annotations
 
+  # When hovering on a highlight in highlighting mode,
+  # tell the sidebar to hilite the relevant annotations
+  onAnchorMouseover: (event) ->
+    if @visibleHighlights or @tool is 'highlight'
+      event.stopPropagation()
+      annotations = event.data.getAnnotations(event)
+      this.focusInViewer annotations, true
+
+  # When leaving a highlight (with the cursor) in highlighting mode,
+  # tell the sidebar to stop hiliting the relevant annotations
+  onAnchorMouseout: (event) ->
+    if @visibleHighlights or @tool is 'highlight'
+      event.stopPropagation()
+      annotations = event.data.getAnnotations(event)
+      this.focusInViewer annotations, false
+
   # When clicking on a highlight in highlighting mode,
   # tell the sidebar to bring up the viewer for the relevant annotations
   onAnchorClick: (event) =>

h/static/scripts/services.coffee

@@ -164,6 +164,12 @@ class Hypothesis extends Annotator
         this.updateViewer this._getLocalAnnotations(tags)
     )
 
+    .bind('setFocusState', (ctx, data) =>
+      @element.scope().$apply =>
+        annotations = this._getLocalAnnotations data.tags
+        this.setViewerFocusState annotations, data.state
+    )
+
     .bind('toggleViewerSelection', (ctx, tags=[]) =>
       @element.scope().$apply =>
         this.toggleViewerSelection this._getLocalAnnotations(tags)
@@ -231,6 +237,16 @@ class Hypothesis extends Annotator
     @_setSelectedAnnotations selected
     this
 
+  setViewerFocusState: (annotations, state) ->
+    scope = @element.scope()
+    focused = scope.focusedAnnotations ?= {}
+    for a in annotations
+      if state
+        focused[a.id] = true
+      else
+        delete focused[a.id]
+    this
+
   updateViewer: (annotations=[]) ->
     # TODO: re-implement
     this

h/static/styles/threads.scss

@@ -6,9 +6,11 @@ $threadexp-width: .6em;
     margin-bottom: .72em;
   }
 
+  li.thread:hover,
   .card-emphasis {
-    box-shadow: 6px 6px 8px -2px $gray-light;
+    box-shadow: 4px 4px 4px -2px $gray-light;
   }
+
 }
 
 .thread-list {

h/templates/client/viewer.html

@@ -34,6 +34,7 @@
     </span>
   </li>
   <li class="paper thread"
+      ng-class="{'card-emphasis': focusedAnnotations[child.message.id]}"
       deep-count="count"
       thread="child" thread-filter
       thread-collapsed="!search.query"