Crop screenshot thumbs in Maniphest

Summary:
If you name an attached file something like
"derpderpderpderpderdperdperpereprederpderplolololololo.png", the display
overflows. Crop and shorten it so that it looks decent. Show the full name as
the image title.

Test Plan:
Named a file "derpderpderpderpderdperdperpereprederpderplolololololo.png" and
got a sensible display out of it.

Reviewed By: tuomaspelkonen
Reviewers: tuomaspelkonen, jungejason, aran
CC: aran, tuomaspelkonen
Differential Revision: 389

src/__celerity_resource_map__.php

@@ -9,7 +9,7 @@
 celerity_register_resource_map(array(
   'aphront-attached-file-view-css' =>
   array(
-    'uri' => '/res/bac9f95c/rsrc/css/aphront/attached-file-view.css',
+    'uri' => '/res/a6ca5487/rsrc/css/aphront/attached-file-view.css',
     'type' => 'css',
     'requires' =>
     array(

src/view/layout/filepreview/AphrontFilePreviewView.php

@@ -36,6 +36,7 @@ final class AphrontFilePreviewView extends AphrontView {
         'src'     => $file->getThumb160x120URI(),
         'width'   => 160,
         'height'  => 120,
+        'title'   => $file->getName(),
       ));
     $link = phutil_render_tag(
       'a',
@@ -45,12 +46,25 @@ final class AphrontFilePreviewView extends AphrontView {
       ),
       $img);
 
+    $display_name = $file->getName();
+    if (strlen($display_name) > 22) {
+      $display_name =
+        substr($display_name, 0, 11).
+        "\xE2\x80\xA6".
+        substr($display_name, -9);
+    }
+
     return
       '<div class="aphront-file-preview-view">
         <div class="aphront-file-preview-thumb">'.
           $link.
         '</div>'.
-        phutil_escape_html($file->getName()).
+        phutil_render_tag(
+          'span',
+          array(
+            'title' => $file->getName(),
+          ),
+          phutil_escape_html($display_name)).
       '</div>';
   }
 

webroot/rsrc/css/aphront/attached-file-view.css

@@ -29,6 +29,9 @@
   text-align: center;
   font-size: 11px;
   color: #333333;
+  overflow: hidden;
+  width: 166px;
+  white-space: nowrap;
 }
 
 .aphront-file-preview-thumb {
@@ -36,4 +39,5 @@
   border: 1px solid #000000;
   background: #ffffff;
   margin-bottom: 2px;
+  width: 160px;
 }