Improve thumbnails in pholio mock view

Summary:
  - Use "preview" instead of "thumb" so we don't get a white background.
  - Give this element a darker gutter to separate it a little bit visually.
  - Put every thumb on a square hit target.
  - Add some color/border/hover stuff.
  - Ship down image dimensions.
  - Reduce thumb size to 140 so we can fit 2-up on mobile when we get there.

Test Plan:
Before:

{F33545}

After:

{F33546}

Reviewers: chad, ljalonen

Reviewed By: ljalonen

CC: aran

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

src/applications/files/PhabricatorImageTransformer.php

@@ -181,11 +181,17 @@ final class PhabricatorImageTransformer {
   }
 
   public static function getPreviewDimensions(PhabricatorFile $file, $size) {
-    $data = $file->loadFileData();
+    $metadata = $file->getMetadata();
-    $src = imagecreatefromstring($data);
+    $x = idx($metadata, PhabricatorFile::METADATA_IMAGE_WIDTH);
+    $y = idx($metadata, PhabricatorFile::METADATA_IMAGE_HEIGHT);
 
-    $x = imagesx($src);
+    if (!$x || !$y) {
-    $y = imagesy($src);
+      $data = $file->loadFileData();
+      $src = imagecreatefromstring($data);
+
+      $x = imagesx($src);
+      $y = imagesy($src);
+    }
 
     $scale = min($size / $x, $size / $y, 1);
 

src/applications/files/controller/PhabricatorFileTransformController.php

@@ -52,6 +52,9 @@ final class PhabricatorFileTransformController
       case 'thumb-220x165':
         $xformed_file = $this->executeThumbTransform($file, 220, 165);
         break;
+      case 'preview-140':
+        $xformed_file = $this->executePreviewTransform($file, 140);
+        break;
       case 'preview-220':
         $xformed_file = $this->executePreviewTransform($file, 220);
         break;

src/applications/files/storage/PhabricatorFile.php

@@ -457,6 +457,12 @@ final class PhabricatorFile extends PhabricatorFileDAO
     return PhabricatorEnv::getCDNURI($path);
   }
 
+  public function getPreview140URI() {
+    $path = '/file/xform/preview-140/'.$this->getPHID().'/'
+      .$this->getSecretKey().'/';
+    return PhabricatorEnv::getCDNURI($path);
+  }
+
   public function getPreview220URI() {
     $path = '/file/xform/preview-220/'.$this->getPHID().'/'
       .$this->getSecretKey().'/';

src/applications/pholio/view/PholioMockImagesView.php

@@ -21,7 +21,7 @@ final class PholioMockImagesView extends AphrontView {
       'mockID' => $this->mock->getID());
     Javelin::initBehavior('pholio-mock-view', $config);
 
-    $mockview = "";
+    $mockview = '';
 
     $main_image = head($this->mock->getImages());
 
@@ -55,7 +55,7 @@ final class PholioMockImagesView extends AphrontView {
         'sigil' => 'mock-inline-comments',
         'class' => 'pholio-mock-inline-comments'
       ),
-      "");
+      '');
 
     $mockview[] = phutil_tag(
       'div',
@@ -70,18 +70,31 @@ final class PholioMockImagesView extends AphrontView {
       foreach ($this->mock->getImages() as $image) {
         $thumbfile = $image->getFile();
 
-        $tag = javelin_tag(
+        $dimensions = PhabricatorImageTransformer::getPreviewDimensions(
+          $thumbfile,
+          140);
+
+        $tag = phutil_tag(
           'img',
           array(
-            'src' => $thumbfile->getThumb160x120URI(),
+            'width' => $dimensions['sdx'],
-            'sigil' => 'mock-thumbnail',
+            'height' => $dimensions['sdy'],
+            'src' => $thumbfile->getPreview140URI(),
             'class' => 'pholio-mock-carousel-thumbnail',
+            'style' => 'top: '.floor((140 - $dimensions['sdy'] ) / 2).'px',
+        ));
+
+        $thumbnails[] = javelin_tag(
+          'div',
+          array(
+            'sigil' => 'mock-thumbnail',
+            'class' => 'pholio-mock-carousel-thumb-item',
             'meta' => array(
               'fullSizeURI' => $thumbfile->getBestURI(),
               'imageID' => $image->getID()
             ),
-        ));
+          ),
-        $thumbnails[] = $tag;
+          $tag);
       }
 
       $mockview[] = phutil_tag(

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

@@ -8,14 +8,32 @@
 }
 
 .pholio-mock-carousel {
-  background-color: #282828;
+  background-color: #202020;
   text-align: center;
+  border-top: 1px solid #101010;
+}
+
+.pholio-mock-carousel-thumb-item {
+  display: inline-block;
+  cursor: pointer;
+  width: 140px;
+  height: 140px;
+  padding: 5px;
+  margin: 3px;
+  background: #282828;
+  vertical-align: middle;
+  border: 1px solid #383838;
+  position: relative;
+}
+
+.device-desktop .pholio-mock-carousel-thumb-item:hover {
+  background: #383838;
+  border-color: #686868;
 }
 
 .pholio-mock-carousel-thumbnail {
-  margin-right: 5px;
+  margin: auto;
-  display: inline-block;
+  position: relative;
-  cursor: pointer;
 }
 
 .pholio-mock-image {