Handle resizing nicely

Summary:
  - For images that aren't too large to fit, keep the stage at about 85% of the viewport height. This prevents it from bouncing around as you switch between images, and generally makes it feel big and important like it should. When the stage is larger than images, we center them vertically.
  - As the viewport is resized, shrink the stage and, if necessary, the images on it.

Test Plan:
{F33617}

{F33618}

Reviewers: chad, ljalonen

Reviewed By: chad

CC: aran

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

src/__celerity_resource_map__.php

@@ -1873,7 +1873,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/b7c2b169/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/296e0325/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -2066,7 +2066,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-event' =>
   array(
-    'uri' => '/res/e6582051/rsrc/js/javelin/core/Event.js',
+    'uri' => '/res/69d99d9f/rsrc/js/javelin/core/Event.js',
     'type' => 'js',
     'requires' =>
     array(
@@ -3607,7 +3607,7 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/f96657b8/diffusion.pkg.js',
       'type' => 'js',
     ),
-    'a69b9f1f' =>
+    'cd1d650a' =>
     array(
       'name' => 'javelin.pkg.js',
       'symbols' =>
@@ -3632,7 +3632,7 @@ celerity_register_resource_map(array(
         17 => 'javelin-typeahead-ondemand-source',
         18 => 'javelin-tokenizer',
       ),
-      'uri' => '/res/pkg/a69b9f1f/javelin.pkg.js',
+      'uri' => '/res/pkg/cd1d650a/javelin.pkg.js',
       'type' => 'js',
     ),
     'e30a3fa8' =>
@@ -3693,7 +3693,7 @@ celerity_register_resource_map(array(
     'global-drag-and-drop-css' => 'acc46105',
     'inline-comment-summary-css' => '8aaacd1b',
     'javelin-aphlict' => 'd29c1557',
-    'javelin-behavior' => 'a69b9f1f',
+    'javelin-behavior' => 'cd1d650a',
     'javelin-behavior-aphlict-dropdown' => 'd29c1557',
     'javelin-behavior-aphlict-listen' => 'd29c1557',
     'javelin-behavior-aphront-basic-tokenizer' => 'd29c1557',
@@ -3741,24 +3741,24 @@ celerity_register_resource_map(array(
     'javelin-behavior-repository-crossreference' => 'fafc8cdb',
     'javelin-behavior-toggle-class' => 'd29c1557',
     'javelin-behavior-workflow' => 'd29c1557',
-    'javelin-dom' => 'a69b9f1f',
+    'javelin-dom' => 'cd1d650a',
-    'javelin-event' => 'a69b9f1f',
+    'javelin-event' => 'cd1d650a',
-    'javelin-install' => 'a69b9f1f',
+    'javelin-install' => 'cd1d650a',
-    'javelin-json' => 'a69b9f1f',
+    'javelin-json' => 'cd1d650a',
-    'javelin-mask' => 'a69b9f1f',
+    'javelin-mask' => 'cd1d650a',
-    'javelin-request' => 'a69b9f1f',
+    'javelin-request' => 'cd1d650a',
-    'javelin-resource' => 'a69b9f1f',
+    'javelin-resource' => 'cd1d650a',
-    'javelin-stratcom' => 'a69b9f1f',
+    'javelin-stratcom' => 'cd1d650a',
-    'javelin-tokenizer' => 'a69b9f1f',
+    'javelin-tokenizer' => 'cd1d650a',
-    'javelin-typeahead' => 'a69b9f1f',
+    'javelin-typeahead' => 'cd1d650a',
-    'javelin-typeahead-normalizer' => 'a69b9f1f',
+    'javelin-typeahead-normalizer' => 'cd1d650a',
-    'javelin-typeahead-ondemand-source' => 'a69b9f1f',
+    'javelin-typeahead-ondemand-source' => 'cd1d650a',
-    'javelin-typeahead-preloaded-source' => 'a69b9f1f',
+    'javelin-typeahead-preloaded-source' => 'cd1d650a',
-    'javelin-typeahead-source' => 'a69b9f1f',
+    'javelin-typeahead-source' => 'cd1d650a',
-    'javelin-uri' => 'a69b9f1f',
+    'javelin-uri' => 'cd1d650a',
-    'javelin-util' => 'a69b9f1f',
+    'javelin-util' => 'cd1d650a',
-    'javelin-vector' => 'a69b9f1f',
+    'javelin-vector' => 'cd1d650a',
-    'javelin-workflow' => 'a69b9f1f',
+    'javelin-workflow' => 'cd1d650a',
     'lightbox-attachment-css' => 'acc46105',
     'maniphest-task-summary-css' => 'e30a3fa8',
     'maniphest-transaction-detail-css' => 'e30a3fa8',

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

@@ -38,20 +38,43 @@ JX.behavior('pholio-mock-view', function(config) {
       return;
     }
 
+    active_image.tag = this;
+    redraw_image();
+  }
+
+  function redraw_image() {
+    if (!active_image || !active_image.tag) {
+      return;
+    }
+
+    var tag = active_image.tag;
+
     // If the image is too wide for the viewport, scale it down so it fits.
     // (If it is too tall, we just let the user scroll.)
     var w = JX.Vector.getDim(panel);
     w.x -= 40;
-    if (w.x < this.naturalWidth) {
+    if (w.x < tag.naturalWidth) {
-      var scale = w.x / this.naturalWidth;
+      var scale = w.x / tag.naturalWidth;
-      this.width = Math.floor(scale * this.naturalWidth);
+      tag.width = Math.floor(scale * tag.naturalWidth);
-      this.height = Math.floor(scale * this.naturalHeight);
+      tag.height = Math.floor(scale * tag.naturalHeight);
+    } else {
+      tag.width = tag.naturalWidth;
+      tag.height = tag.naturalHeight;
     }
 
-    active_image.tag = this;
+    var new_y = (JX.Vector.getViewport().y * 0.85) - 150;
+    new_y = Math.max(320, new_y);
+
+    if (tag.height + 40 < new_y) {
+      panel.style.height = new_y + 'px';
+      viewport.style.top = Math.floor(((new_y + 40) - tag.height) / 2) + 'px';
+    } else {
+      panel.style.height = '';
+      viewport.style.top = '';
+    }
 
     // NOTE: This also clears inline comment reticles.
-    JX.DOM.setContent(viewport, this);
+    JX.DOM.setContent(viewport, tag);
 
     redraw_inlines(active_image.id);
   }
@@ -440,4 +463,7 @@ JX.behavior('pholio-mock-view', function(config) {
 
   load_inline_comments();
 
+  JX.Stratcom.listen('resize', null, redraw_image);
+  redraw_image();
+
 });