Differential Changeset header icons

Summary: Adds filetype icons, applying to differential file headers. The main issue is with all the lightening, I wanted something to still anchor 'new file' on the page and adding a sharp icons does that pretty well for me. Feedback is cool too.

Test Plan: Add some new icons, test in previous commits.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

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

resources/sprite/manifest/icons.json

@@ -76,6 +76,21 @@
       "rule" : ".icons-blame-white, .device-desktop .phabricator-action-view:hover .icons-blame, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-blame",
       "hash" : "9255bd2e32868c2a5a44018139cb4356"
     },
+    "icons-calendar"                      : {
+      "name" : "icons-calendar",
+      "rule" : ".icons-calendar",
+      "hash" : "285eb4632a0c568aad1b49b83afd77a2"
+    },
+    "icons-calendar-grey"                 : {
+      "name" : "icons-calendar-grey",
+      "rule" : ".icons-calendar-grey",
+      "hash" : "dd72ee17639a18cfc8f96f9923e90b42"
+    },
+    "icons-calendar-white"                : {
+      "name" : "icons-calendar-white",
+      "rule" : ".icons-calendar-white, .device-desktop .phabricator-action-view:hover .icons-calendar, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-calendar",
+      "hash" : "71bab8f6723d1005afa0a18553ce03d5"
+    },
     "icons-check"                         : {
       "name" : "icons-check",
       "rule" : ".icons-check",
@@ -136,6 +151,21 @@
       "rule" : ".icons-create-white, .device-desktop .phabricator-action-view:hover .icons-create, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-create",
       "hash" : "3b2d0928b2c867a65b95d12177ad8705"
     },
+    "icons-data"                          : {
+      "name" : "icons-data",
+      "rule" : ".icons-data",
+      "hash" : "f4c8df3b0290d1c2be1f206430ba83b4"
+    },
+    "icons-data-grey"                     : {
+      "name" : "icons-data-grey",
+      "rule" : ".icons-data-grey",
+      "hash" : "80c011b2d499c339deae602053107112"
+    },
+    "icons-data-white"                    : {
+      "name" : "icons-data-white",
+      "rule" : ".icons-data-white, .device-desktop .phabricator-action-view:hover .icons-data, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-data",
+      "hash" : "0fb59ace98fa5b8cb5adc278061c538d"
+    },
     "icons-delete"                        : {
       "name" : "icons-delete",
       "rule" : ".icons-delete",
@@ -256,6 +286,21 @@
       "rule" : ".icons-file-white, .device-desktop .phabricator-action-view:hover .icons-file, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-file",
       "hash" : "ba72c9acee3f815d209175a36f2e514e"
     },
+    "icons-film"                          : {
+      "name" : "icons-film",
+      "rule" : ".icons-film",
+      "hash" : "3e43750881b0dbd8bf1326b8b225b2ea"
+    },
+    "icons-film-grey"                     : {
+      "name" : "icons-film-grey",
+      "rule" : ".icons-film-grey",
+      "hash" : "b586d438ea1d87246fe9f17f230d8536"
+    },
+    "icons-film-white"                    : {
+      "name" : "icons-film-white",
+      "rule" : ".icons-film-white, .device-desktop .phabricator-action-view:hover .icons-film, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-film",
+      "hash" : "ba18a336b9dafbfb0102e4128a79e660"
+    },
     "icons-flag"                          : {
       "name" : "icons-flag",
       "rule" : ".icons-flag",
@@ -691,6 +736,21 @@
       "rule" : ".icons-move-white, .device-desktop .phabricator-action-view:hover .icons-move, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-move",
       "hash" : "8d3312ff594541a0017778f77ab3ca41"
     },
+    "icons-music"                         : {
+      "name" : "icons-music",
+      "rule" : ".icons-music",
+      "hash" : "7d9e85fb6f4eeb9e7763493d00c7e1ba"
+    },
+    "icons-music-grey"                    : {
+      "name" : "icons-music-grey",
+      "rule" : ".icons-music-grey",
+      "hash" : "400564df73fd8a2815d71c50f89be20a"
+    },
+    "icons-music-white"                   : {
+      "name" : "icons-music-white",
+      "rule" : ".icons-music-white, .device-desktop .phabricator-action-view:hover .icons-music, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-music",
+      "hash" : "d16b17e0a125fae84b2d515874019c03"
+    },
     "icons-new"                           : {
       "name" : "icons-new",
       "rule" : ".icons-new",
@@ -1006,6 +1066,36 @@
       "rule" : ".icons-world-white, .device-desktop .phabricator-action-view:hover .icons-world, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-world",
       "hash" : "a226ba8b9c49ed9fa54643fe77e49dd2"
     },
+    "icons-wrench"                        : {
+      "name" : "icons-wrench",
+      "rule" : ".icons-wrench",
+      "hash" : "8b9b5d7b4e2923cdf5c9440ee7cb2ee2"
+    },
+    "icons-wrench-grey"                   : {
+      "name" : "icons-wrench-grey",
+      "rule" : ".icons-wrench-grey",
+      "hash" : "e6effa08f3bf34393a4787c1354d4a29"
+    },
+    "icons-wrench-white"                  : {
+      "name" : "icons-wrench-white",
+      "rule" : ".icons-wrench-white, .device-desktop .phabricator-action-view:hover .icons-wrench, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-wrench",
+      "hash" : "a0f1447733a5a39d2c7a64d774ccf113"
+    },
+    "icons-zip"                           : {
+      "name" : "icons-zip",
+      "rule" : ".icons-zip",
+      "hash" : "15f454e97fc353c1fa5a614073782c46"
+    },
+    "icons-zip-grey"                      : {
+      "name" : "icons-zip-grey",
+      "rule" : ".icons-zip-grey",
+      "hash" : "2e633a5027156a60d302395784d26062"
+    },
+    "icons-zip-white"                     : {
+      "name" : "icons-zip-white",
+      "rule" : ".icons-zip-white, .device-desktop .phabricator-action-view:hover .icons-zip, .device-desktop .phui-list-sidenav .phui-list-item-href:hover .icons-zip",
+      "hash" : "e006963c22a6be6fb72a0eefecf83649"
+    },
     "remarkup-assist-text_b"              : {
       "name" : "remarkup-assist-text_b",
       "rule" : ".remarkup-assist-b",

src/applications/differential/view/DifferentialChangesetDetailView.php

@@ -45,6 +45,54 @@ final class DifferentialChangesetDetailView extends AphrontView {
     return $this->vsChangesetID;
   }
 
+  public function getFileIcon($filename) {
+    $path_info = pathinfo($filename);
+    $extension = $path_info['extension'];
+    switch ($extension) {
+      case 'psd':
+      case 'ai':
+        $icon = 'preview';
+        break;
+      case 'conf':
+        $icon = 'wrench';
+        break;
+      case 'wav':
+      case 'mp3':
+      case 'aiff':
+        $icon = 'music';
+        break;
+      case 'm4v':
+      case 'mov':
+        $icon = 'film';
+        break;
+      case 'sql';
+      case 'db':
+      case 'csv':
+        $icon = 'data';
+        break;
+      case 'ics':
+        $icon = 'calendar';
+        break;
+      case 'zip':
+      case 'tar':
+      case 'bz':
+      case 'tgz':
+      case 'gz':
+        $icon = 'zip';
+        break;
+      case 'png':
+      case 'jpg':
+      case 'bmp':
+      case 'gif':
+        $icon = 'image';
+        break;
+      default:
+        $icon = 'file';
+        break;
+    }
+    return $icon;
+  }
+
   public function render() {
     require_celerity_resource('differential-changeset-view-css');
     require_celerity_resource('syntax-highlighting-css');
@@ -78,6 +126,10 @@ final class DifferentialChangesetDetailView extends AphrontView {
     }
 
     $display_filename = $changeset->getDisplayFilename();
+    $display_icon = $this->getFileIcon($display_filename);
+    $icon = id(new PHUIIconView())
+      ->setSpriteSheet(PHUIIconView::SPRITE_ICONS)
+      ->setSpriteIcon($display_icon);
 
     return javelin_tag(
       'div',
@@ -98,7 +150,12 @@ final class DifferentialChangesetDetailView extends AphrontView {
           ->setNavigationMarker(true)
           ->render(),
         $buttons,
-        phutil_tag('h1', array(), $display_filename),
+        phutil_tag('h1',
+          array(
+            'class' => 'differential-file-icon-header'),
+          array(
+            $icon,
+            $display_filename)),
         phutil_tag('div', array('style' => 'clear: both'), ''),
         $this->renderChildren(),
       ));

webroot/rsrc/css/application/differential/changeset-view.css

@@ -451,3 +451,9 @@ tr.differential-inline-loading {
 .differential-collapse-undo a {
   font-weight: bold;
 }
+
+.differential-file-icon-header .phui-icon-view {
+  display: inline-block;
+  margin: 0 4px 2px 0;
+  vertical-align: middle;
+}