Show loading state and fix reticles in Pholio

Summary:
Fixes T2643. Show a loading state (currently just making the image transparent, but we could do something fancier) when an image is loading.

Fixes T2648. Cleans up the double draws we were previously doing.

Makes thumbnails react to mousedown in addition to click so they feel a little snappier. Make them stop reacting to control click, command click, etc.

Test Plan: Used `setTimeout()` to simulate a 1s image load delay, switched between images.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2643, T2648

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

src/__celerity_resource_map__.php

@@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/06c92cdf/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/c2586731/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -3236,7 +3236,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-css' =>
   array(
-    'uri' => '/res/b74040b8/rsrc/css/application/pholio/pholio.css',
+    'uri' => '/res/99777600/rsrc/css/application/pholio/pholio.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3245,7 +3245,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-inline-comments-css' =>
   array(
-    'uri' => '/res/241b121c/rsrc/css/application/pholio/pholio-inline-comments.css',
+    'uri' => '/res/af95f0a6/rsrc/css/application/pholio/pholio-inline-comments.css',
     'type' => 'css',
     'requires' =>
     array(

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

@@ -84,3 +84,7 @@
   background-color: #222;
   border-color: #555;
 }
+
+.pholio-image-loading img {
+  opacity: 0.50;
+}

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

@@ -22,6 +22,57 @@ JX.behavior('pholio-mock-view', function(config) {
 
   var inline_comments = {};
 
+
+/* -(  Stage  )-------------------------------------------------------------- */
+
+
+  var stage = (function() {
+    var loading = false;
+    var stageElement = JX.$(config.panelID);
+    var viewElement = JX.$(config.viewportID);
+    var reticles = [];
+
+    function begin_load() {
+      if (loading) {
+        return;
+      }
+      loading = true;
+      clear_reticles();
+      draw_loading();
+    }
+
+    function end_load() {
+      if (!loading) {
+        return;
+      }
+      loading = false;
+      draw_loading();
+    }
+
+    function draw_loading() {
+      JX.DOM.alterClass(stageElement, 'pholio-image-loading', loading);
+    }
+
+    function add_reticle(reticle) {
+      reticles.push(reticle);
+      viewElement.appendChild(reticle);
+    }
+
+    function clear_reticles() {
+      for (var ii = 0; ii < reticles.length; ii++) {
+        JX.DOM.remove(reticles[ii]);
+      }
+      reticles = [];
+    }
+
+    return {
+      beginLoad: begin_load,
+      endLoad: end_load,
+      addReticle: add_reticle,
+      clearReticles: clear_reticles
+    };
+  })();
+
   function get_image(id) {
     for (var ii = 0; ii < config.images.length; ii++) {
       if (config.images[ii].id == id) {
@@ -73,7 +124,8 @@ JX.behavior('pholio-mock-view', function(config) {
       viewport.style.top = '';
     }
 
-    // NOTE: This also clears inline comment reticles.
+    stage.endLoad();
+
     JX.DOM.setContent(viewport, tag);
 
     redraw_inlines(active_image.id);
@@ -83,6 +135,8 @@ JX.behavior('pholio-mock-view', function(config) {
     active_image = get_image(image_id);
     active_image.tag = null;
 
+    stage.beginLoad();
+
     var img = JX.$N('img', {className: 'pholio-mock-image'});
     img.onload = JX.bind(img, onload_image, active_image.id);
     img.src = active_image.fullURI;
@@ -105,9 +159,12 @@ JX.behavior('pholio-mock-view', function(config) {
   }
 
   JX.Stratcom.listen(
-    'click',
+    ['mousedown', 'click'],
     'mock-thumbnail',
     function(e) {
+      if (!e.isNormalMouseEvent()) {
+        return;
+      }
       e.kill();
       select_image(e.getNodeData('mock-thumbnail').imageID);
     });
@@ -212,6 +269,7 @@ JX.behavior('pholio-mock-view', function(config) {
 
     var comment_holder = JX.$('mock-inline-comments');
     JX.DOM.setContent(comment_holder, '');
+    stage.clearReticles();
 
     var inlines = inline_comments[active_image.id];
     if (!inlines || !inlines.length) {
@@ -241,7 +299,7 @@ JX.behavior('pholio-mock-view', function(config) {
 
       JX.Stratcom.addSigil(inlineSelection, "image_selection");
 
-      JX.DOM.appendContent(viewport, inlineSelection);
+      stage.addReticle(inlineSelection);
 
       position_inline_rectangle(inline, inlineSelection);
 
@@ -261,7 +319,8 @@ JX.behavior('pholio-mock-view', function(config) {
           {phid: inline.phid});
 
         JX.Stratcom.addSigil(inlineDraft, "image_selection");
-        JX.DOM.appendContent(viewport, inlineDraft);
+
+        stage.addReticle(inlineDraft);
       }
     }
   }