Consolidate style and naming of highlight state

Rename some things to be consistent about how we treat highlight
states.

- Use blue highlights for focus no matter whether active highlights
  are on or off.
- Use `setFocused` instead of `setActive` when setting the focus.
- Rather than `setViewerFocus` and `setFocusedHighlights` have
  symmetrical RPC calls named 'focusAnnotations` in both directions.
- Get rid of the multiple highlight levels for focus. When showing the
  focus it's not important to darken inner highlights. The highlights
  visible mode still has multiple levels, all yellow.
- Remove the "annotator-hl-temporary" styles since we never call
  `setTemporary` anymore.
- Remove the "finalizeHighlights" event because nothing listens for it.
- Rename the scope method `isFocused` to `hasFocus` because I have a
  general preference against participial adjectives. It is much easier
  to remember always to use the basic verb or noun meaning of focus,
  with no ending. `hasFocus`, `focusAnnotations`, etc.

Removing dead code from our annotator branch and dropping the '-ed'
suffix from class names is left out for simplicity of managing a single
PR against one repo for the moment, but may be advisable.

h/static/scripts/controllers.coffee

@@ -342,7 +342,7 @@ class ViewerController
         highlights = []
       for p in annotator.providers
         p.channel.notify
-          method: 'setFocusedHighlights'
+          method: 'focusAnnotations'
           params: highlights
 
     $scope.scrollTo = (annotation) ->
@@ -358,7 +358,7 @@ class ViewerController
       else
         true
 
-    $scope.isFocused = (annotation) ->
+    $scope.hasFocus = (annotation) ->
       annotation?.$$tag in ($scope.focusedAnnotations ? [])
 
 angular.module('h')

h/static/scripts/guest.coffee

@@ -143,14 +143,12 @@ class Annotator.Guest extends Annotator
       if value then @plugins.Heatmap._update()
     )
 
-    .bind('setFocusedHighlights', (ctx, tags=[]) =>
+    .bind('focusAnnotations', (ctx, tags=[]) =>
       for hl in @getHighlights()
         if hl.annotation.$$tag in tags
-          hl.setActive true, true
+          hl.setFocused true
         else
-          unless hl.isTemporary()
-            hl.setActive false, true
-      this.publish "finalizeHighlights"
+          hl.setFocused false
     )
 
     .bind('scrollTo', (ctx, tag) =>
@@ -250,9 +248,9 @@ class Annotator.Guest extends Annotator
       method: "showEditor"
       params: annotation.$$tag
 
-  focusInViewer: (annotations) =>
+  focusAnnotations: (annotations) =>
     @panel?.notify
-      method: "setViewerFocus"
+      method: "focusAnnotations"
       params: (a.$$tag for a in annotations)
 
   onAnchorMousedown: ->
@@ -303,14 +301,14 @@ class Annotator.Guest extends Annotator
     if @visibleHighlights or @tool is 'highlight'
       event.stopPropagation()
       annotations = event.data.getAnnotations(event)
-      this.focusInViewer annotations
+      this.focusAnnotations annotations
 
   # 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()
-      this.focusInViewer []
+      this.focusAnnotations []
 
   # When clicking on a highlight in highlighting mode,
   # tell the sidebar to bring up the viewer for the relevant annotations

h/static/scripts/plugin/heatmap.coffee

@@ -320,18 +320,14 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
         bucket = @tabs.index(event.currentTarget)
         for hl in @annotator.getHighlights()
           if hl.annotation in @buckets[bucket]
-            hl.setActive true, true
+            hl.setFocus true
           else
-            unless hl.isTemporary()
-              hl.setActive false, true
-        @annotator.publish "finalizeHighlights"
+            hl.setFocus false
 
       # Gets rid of them after
       .on 'mouseout', =>
         for hl in @annotator.getHighlights()
-          unless hl.isTemporary()
-            hl.setActive false, true
-        @annotator.publish "finalizeHighlights"
+          hl.setFocus false
 
       # Does one of a few things when a tab is clicked depending on type
       .on 'click', (event) =>

h/static/scripts/services.coffee

@@ -164,9 +164,9 @@ class Hypothesis extends Annotator
         this.updateViewer this._getLocalAnnotations(tags)
     )
 
-    .bind('setViewerFocus', (ctx, tags=[]) =>
+    .bind('focusAnnotations', (ctx, tags=[]) =>
       @element.scope().$apply =>
-        this.setViewerFocus tags
+        this.focusAnnotations tags
     )
 
     .bind('toggleViewerSelection', (ctx, tags=[]) =>
@@ -236,7 +236,7 @@ class Hypothesis extends Annotator
     @_setSelectedAnnotations selected
     this
 
-  setViewerFocus: (tags) ->
+  focusAnnotations: (tags) ->
     @element.scope().focusedAnnotations = tags
 
   updateViewer: (annotations=[]) ->

h/static/styles/base.scss

@@ -55,13 +55,10 @@ $negative: #d11c2b;
 $neutral: #0171ba;
 
 //OTHER VARIABLES
-$highlight-color: rgba(192, 236, 253, 0.5);
-$highlight-color-second: rgba(181, 234, 255, 0.8);
-$highlight-color-third: rgba(149, 224, 253, 0.8);
-$highlight-mode-color: rgba(255, 255, 60, 0.3);
-$highlight-mode-color-second: rgba(206, 206, 60, 0.4);
-$highlight-mode-color-third: rgba(192, 192, 49, 0.4);
-$highlight-mode-active-color: rgba(255, 255, 60, 0.7);
+$highlight-color: rgba(255, 255, 60, 0.3);
+$highlight-color-second: rgba(206, 206, 60, 0.4);
+$highlight-color-third: rgba(192, 192, 49, 0.4);
+$highlight-color-focus: rgba(192, 236, 253, 0.5);
 $score-width: 40px;
 $score-height: $score-width;
 $heatmap-width: 22px;

h/static/styles/inject.scss

@@ -99,18 +99,7 @@ $base-font-size: 14px;
 }
 
 //HIGHLIGHTS////////////////////////////////
-.annotator-highlights-always-on .annotator-hl,
-.annotator-hl-active, .annotator-hl-temporary, .annotator-hl-focused {
-  background: $highlight-color;
-
-  .annotator-hl {
-    background-color: $highlight-color-second;
-  }
-
-  .annotator-hl .annotator-hl {
-    background-color: $highlight-color-third;
-  }
-
+.annotator-hl {
   &::-moz-selection {
     background: $highlight-color;
   }
@@ -123,20 +112,20 @@ $base-font-size: 14px;
 }
 
 .annotator-highlights-always-on .annotator-hl {
-  background: $highlight-mode-color;
+  background: $highlight-color;
 
   .annotator-hl {
-    background-color: $highlight-mode-color-second;
+    background-color: $highlight-color-second;
   }
 
   .annotator-hl .annotator-hl {
-    background-color: $highlight-mode-color-third;
+    background-color: $highlight-color-third;
   }
 }
 
-.annotator-highlights-always-on .annotator-hl-active,
-.annotator-highlights-always-on .annotator-hl-focused {
-  background-color: $highlight-mode-active-color;
+.annotator-hl-focused,
+.annotator-highlights-always-on .annotator-hl.annotator-hl-focused {
+  background-color: $highlight-color-focus;
 }
 
 // Sidebar

h/templates/client/viewer.html

@@ -34,7 +34,7 @@
     </span>
   </li>
   <li class="paper thread"
-      ng-class="{'js-hover': isFocused(child.message)}"
+      ng-class="{'js-hover': hasFocus(child.message)}"
       deep-count="count"
       thread="child" thread-filter
       thread-collapsed="!search.query"