Various highlights

Summary:
Highlight thumb for image user is currently viewing.
Highlight selection when user mouseovers it's inline(on side).

Test Plan: {F33990}

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

Maniphest Tasks: T2446

Differential Revision: https://secure.phabricator.com/D5134

src/applications/pholio/view/PholioInlineCommentView.php

@@ -85,7 +85,11 @@ final class PholioInlineCommentView extends AphrontView {
       'div',
       array(
         'id' => $this->inlineComment->getPHID()."_comment",
-        'class' => 'pholio-inline-comment'
+        'class' => 'pholio-inline-comment',
+        'sigil' => 'inline_comment',
+        'meta' => array(
+          'phid' => $this->inlineComment->getPHID()
+        )
       ),
       array($comment_header, $comment_body));
 

src/applications/pholio/view/PholioMockImagesView.php

@@ -108,6 +108,7 @@ final class PholioMockImagesView extends AphrontView {
       $mockview[] = phutil_tag(
         'div',
         array(
+          'id' => 'pholio-mock-carousel',
           'class' => 'pholio-mock-carousel',
         ),
         $thumbnails);

webroot/rsrc/css/application/pholio/pholio.css

@@ -27,7 +27,8 @@
   position: relative;
 }
 
-.device-desktop .pholio-mock-carousel-thumb-item:hover {
+.device-desktop .pholio-mock-carousel-thumb-item:hover,
+  .pholio-mock-carousel-thumb-current {
   background: #383838;
   border-color: #686868;
 }
@@ -101,4 +102,3 @@
   font-weight: normal;
   margin-left: 5px;
 }
-

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -87,6 +87,20 @@ JX.behavior('pholio-mock-view', function(config) {
     img.onload = JX.bind(img, onload_image, active_image.id);
     img.src = active_image.fullURI;
 
+    var thumbs = JX.DOM.scry(
+      JX.$('pholio-mock-carousel'),
+      'div',
+      'mock-thumbnail');
+
+    for(var k in thumbs) {
+      var thumb_meta = JX.Stratcom.getData(thumbs[k]);
+
+      JX.DOM.alterClass(
+        thumbs[k],
+        'pholio-mock-carousel-thumb-current',
+        (active_image.id == thumb_meta.imageID));
+    }
+
     load_inline_comments();
   }
 
@@ -142,6 +156,20 @@ JX.behavior('pholio-mock-view', function(config) {
         highlight);
   });
 
+  JX.Stratcom.listen(
+    ['mouseover', 'mouseout'],
+    'inline_comment',
+    function(e) {
+      var data = e.getNodeData('inline_comment');
+      var selection = JX.$(data.phid + "_selection");
+      var highlight = (e.getType() == 'mouseover');
+
+      JX.DOM.alterClass(
+        selection,
+        'pholio-mock-inline-comment-highlight',
+        highlight);
+  });
+
   JX.Stratcom.listen(
     'mouseup',
     null,