Improve Pholio on mobile

Summary:
Ref T2644. This isn't perfect, but makes Pholio more-or-less usable on mobile. In particular:

  - Inline comments drop below the image.
  - Clicking the image lightboxes a full size version so you can scroll around it and inspect details.
  - Clicking it again dismisses it.

Things that aren't good:

  - Can't add inline comments. This seems complicated and not critical.
  - Can't easily figure out which inline comments go where since there's no hover. Maybe let you tap them? Not sure if we really need this.
  - Thumbs are between image and image data. I'm planning to get rid of the thumbs and do swipe left/right instead.
  - It would be nice to scroll the lightbox to center on the part of the image you tapped. I just thought of this, though.

Test Plan:
{F34640}
{F34641}
{F34642}

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2644

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

src/__celerity_resource_map__.php

@@ -1891,7 +1891,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/59c4d3ae/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/45324e3b/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -1904,7 +1904,9 @@ celerity_register_resource_map(array(
       6 => 'javelin-request',
       7 => 'javelin-history',
       8 => 'javelin-workflow',
-      9 => 'phabricator-keyboard-shortcut',
+      9 => 'javelin-mask',
+      10 => 'javelin-behavior-device',
+      11 => 'phabricator-keyboard-shortcut',
     ),
     'disk' => '/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
   ),
@@ -3239,7 +3241,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-css' =>
   array(
-    'uri' => '/res/8883529b/rsrc/css/application/pholio/pholio.css',
+    'uri' => '/res/3d3cc404/rsrc/css/application/pholio/pholio.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -3248,7 +3250,7 @@ celerity_register_resource_map(array(
   ),
   'pholio-inline-comments-css' =>
   array(
-    'uri' => '/res/a0f7ddc4/rsrc/css/application/pholio/pholio-inline-comments.css',
+    'uri' => '/res/8fe0edc7/rsrc/css/application/pholio/pholio-inline-comments.css',
     'type' => 'css',
     'requires' =>
     array(

webroot/rsrc/css/application/pholio/pholio-inline-comments.css

@@ -14,18 +14,21 @@
 
 .pholio-mock-inline-comments {
   color: #cccccc;
-  width: 320px;
-  border-left: 1px solid #101010;
   border-top: 1px solid #333;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
   background: #282828;
   overflow-x: auto;
   text-align: left;
 }
 
+.device-desktop .pholio-mock-inline-comments {
+  border-left: 1px solid #101010;
+  position: absolute;
+  width: 320px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
 .pholio-inline-comment-dialog-title {
   font-weight: bold;
   color: #fff;

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

@@ -13,6 +13,9 @@
   background-color: #282828;
   text-align: center;
   border-top: 1px solid #101010;
+}
+
+.device-desktop .pholio-mock-carousel {
   margin-right: 320px;
 }
 
@@ -61,9 +64,12 @@
 
 .pholio-mock-image-panel {
   padding: 20px;
-  margin-right: 319px;
   border-top: 1px solid #333;
+}
+
+.device-desktop .pholio-mock-image-panel {
   border-right: 1px solid #333;
+  margin-right: 319px;
 }
 
 .pholio-mock-image-viewport {
@@ -105,3 +111,18 @@
 .pholio-image-title {
   color: #ffffff;
 }
+
+.pholio-device-lightbox {
+  position: absolute;
+  overflow: auto;
+  z-index: 99;
+}
+
+.pholio-device-lightbox img {
+  display: block;
+  margin: auto;
+}
+
+.pholio-device-lightbox-loading {
+  background: url(/rsrc/image/darkload.gif) no-repeat center;
+}

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

@@ -9,6 +9,8 @@
  *           javelin-request
  *           javelin-history
  *           javelin-workflow
+ *           javelin-mask
+ *           javelin-behavior-device
  *           phabricator-keyboard-shortcut
  */
 JX.behavior('pholio-mock-view', function(config) {
@@ -250,6 +252,10 @@ JX.behavior('pholio-mock-view', function(config) {
       return;
     }
 
+    if (JX.Device.getDevice() != 'desktop') {
+      return;
+    }
+
     if (drag_begin) {
       return;
     }
@@ -263,6 +269,7 @@ JX.behavior('pholio-mock-view', function(config) {
     redraw_selection();
   });
 
+
   JX.enableDispatch(document.body, 'mousemove');
   JX.Stratcom.listen('mousemove', null, function(e) {
     if (!is_dragging) {
@@ -632,4 +639,69 @@ JX.behavior('pholio-mock-view', function(config) {
       {className: 'pholio-mock-select-fill'});
   }
 
+
+/* -(  Device Lightbox  )---------------------------------------------------- */
+
+  // On devices, we show images full-size when the user taps them instead of
+  // attempting to implement inlines.
+
+  var lightbox = null;
+
+  JX.Stratcom.listen('click', 'mock-viewport', function(e) {
+    if (!e.isNormalMouseEvent()) {
+      return;
+    }
+    if (JX.Device.getDevice() == 'desktop') {
+      return;
+    }
+    lightbox_attach();
+    e.kill();
+  });
+
+  JX.Stratcom.listen('click', 'pholio-device-lightbox', lightbox_detach);
+  JX.Stratcom.listen('resize', null, lightbox_resize);
+
+  function lightbox_attach() {
+    JX.DOM.alterClass(document.body, 'lightbox-attached', true);
+    JX.Mask.show('jx-dark-mask');
+
+    lightbox = lightbox_render();
+    var image = JX.$N('img');
+    image.onload = lightbox_loaded;
+    setTimeout(function() {
+      image.src = active_image.fullURI;
+    }, 1000);
+    JX.DOM.setContent(lightbox, image);
+    JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', true);
+
+    lightbox_resize();
+
+    document.body.appendChild(lightbox);
+  }
+
+  function lightbox_detach() {
+    JX.DOM.remove(lightbox);
+    JX.Mask.hide();
+    JX.DOM.alterClass(document.body, 'lightbox-attached', false);
+    lightbox = null;
+  }
+
+  function lightbox_resize(e) {
+    if (!lightbox) {
+      return;
+    }
+    JX.Vector.getScroll().setPos(lightbox);
+    JX.Vector.getViewport().setDim(lightbox);
+  }
+
+  function lightbox_loaded() {
+    JX.DOM.alterClass(lightbox, 'pholio-device-lightbox-loading', false);
+  }
+
+  function lightbox_render() {
+    var el = JX.$N('div', {className: 'pholio-device-lightbox'});
+    JX.Stratcom.addSigil(el, 'pholio-device-lightbox');
+    return el;
+  }
+
 });