Clean up some minor UI behaviors in Differential

Summary:
Minor UI tweaks:

  - Use the dynamic icon for each file (e.g., image, text), not a hard-coded icon.
  - Render the path (less important) in grey and the filename (more important) in black.

Test Plan: {F4966176}

Reviewers: chad

Reviewed By: chad

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

resources/celerity/map.php

@@ -9,11 +9,11 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'ff161f2d',
     'conpherence.pkg.js' => 'b5b51108',
-    'core.pkg.css' => 'd6dc3994',
+    'core.pkg.css' => '5ffe8b79',
     'core.pkg.js' => 'e822b496',
     'darkconsole.pkg.js' => '1f9a31bc',
-    'differential.pkg.css' => 'deae6388',
-    'differential.pkg.js' => 'dedee9c8',
+    'differential.pkg.css' => '4d7dd14e',
+    'differential.pkg.js' => '68a4fa60',
     'diffusion.pkg.css' => 'b93d9b8c',
     'diffusion.pkg.js' => '84c8f8fd',
     'favicon.ico' => '30672e08',
@@ -64,7 +64,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => 'fe5b1869',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => '6b79bdf3',
+    'rsrc/css/application/differential/changeset-view.css' => '54774a28',
     'rsrc/css/application/differential/core.css' => '5b7b8ff4',
     'rsrc/css/application/differential/phui-inline-comment.css' => 'ffd1a542',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
@@ -116,7 +116,7 @@ return array(
     'rsrc/css/core/core.css' => '9f4cb463',
     'rsrc/css/core/remarkup.css' => 'd1a5e11e',
     'rsrc/css/core/syntax.css' => 'cae95e89',
-    'rsrc/css/core/z-index.css' => '9d8f7c4b',
+    'rsrc/css/core/z-index.css' => '998f3ce1',
     'rsrc/css/diviner/diviner-shared.css' => '896f1d43',
     'rsrc/css/font/font-awesome.css' => 'e838e088',
     'rsrc/css/font/font-lato.css' => 'c7ccd872',
@@ -390,8 +390,8 @@ return array(
     'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => '408bf173',
     'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '453c5375',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => 'd4eecc63',
-    'rsrc/js/application/diff/DiffChangeset.js' => '20580ec0',
-    'rsrc/js/application/diff/DiffChangesetList.js' => '61086d73',
+    'rsrc/js/application/diff/DiffChangeset.js' => 'cf4e2140',
+    'rsrc/js/application/diff/DiffChangesetList.js' => '5c68c40c',
     'rsrc/js/application/diff/DiffInline.js' => '77e14b60',
     'rsrc/js/application/diff/ScrollObjective.js' => '0eee7a00',
     'rsrc/js/application/diff/ScrollObjectiveList.js' => '1ca4d9db',
@@ -567,7 +567,7 @@ return array(
     'conpherence-thread-manager' => '4d863052',
     'conpherence-transaction-css' => '85129c68',
     'd3' => 'a11a5ff2',
-    'differential-changeset-view-css' => '6b79bdf3',
+    'differential-changeset-view-css' => '54774a28',
     'differential-core-view-css' => '5b7b8ff4',
     'differential-revision-add-comment-css' => 'c47f8c40',
     'differential-revision-comment-css' => '14b8565a',
@@ -777,8 +777,8 @@ return array(
     'phabricator-darklog' => 'c8e1ffe3',
     'phabricator-darkmessage' => 'c48cccdd',
     'phabricator-dashboard-css' => 'fe5b1869',
-    'phabricator-diff-changeset' => '20580ec0',
-    'phabricator-diff-changeset-list' => '61086d73',
+    'phabricator-diff-changeset' => 'cf4e2140',
+    'phabricator-diff-changeset-list' => '5c68c40c',
     'phabricator-diff-inline' => '77e14b60',
     'phabricator-drag-and-drop-file-upload' => '58dea2fa',
     'phabricator-draggable-list' => 'bea6e7f4',
@@ -820,7 +820,7 @@ return array(
     'phabricator-uiexample-reactor-select' => 'a155550f',
     'phabricator-uiexample-reactor-sendclass' => '1def2711',
     'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
-    'phabricator-zindex-css' => '9d8f7c4b',
+    'phabricator-zindex-css' => '998f3ce1',
     'phame-css' => 'b3a0b3a3',
     'pholio-css' => 'ca89d380',
     'pholio-edit-css' => '07676f51',
@@ -1070,17 +1070,6 @@ return array(
       'javelin-install',
       'javelin-dom',
     ),
-    '20580ec0' => array(
-      'javelin-dom',
-      'javelin-util',
-      'javelin-stratcom',
-      'javelin-install',
-      'javelin-workflow',
-      'javelin-router',
-      'javelin-behavior-device',
-      'javelin-vector',
-      'phabricator-diff-inline',
-    ),
     '21df4ff5' => array(
       'javelin-install',
       'javelin-workboard-card',
@@ -1327,6 +1316,9 @@ return array(
     '5294060f' => array(
       'phui-theme-css',
     ),
+    '54774a28' => array(
+      'phui-inline-comment-view-css',
+    ),
     '54b612ba' => array(
       'javelin-color',
       'javelin-install',
@@ -1376,6 +1368,10 @@ return array(
       'javelin-stratcom',
       'javelin-dom',
     ),
+    '5c68c40c' => array(
+      'javelin-install',
+      'phabricator-scroll-objective-list',
+    ),
     '5e2634b9' => array(
       'javelin-behavior',
       'javelin-aphlict',
@@ -1407,10 +1403,6 @@ return array(
       'javelin-stratcom',
       'javelin-dom',
     ),
-    '61086d73' => array(
-      'javelin-install',
-      'phabricator-scroll-objective-list',
-    ),
     '61cbc29a' => array(
       'javelin-magical-init',
       'javelin-util',
@@ -1442,9 +1434,6 @@ return array(
       'javelin-util',
       'javelin-magical-init',
     ),
-    '6b79bdf3' => array(
-      'phui-inline-comment-view-css',
-    ),
     '6b8ef10b' => array(
       'javelin-install',
     ),
@@ -2013,6 +2002,17 @@ return array(
     'cd2b9b77' => array(
       'phui-oi-list-view-css',
     ),
+    'cf4e2140' => array(
+      'javelin-dom',
+      'javelin-util',
+      'javelin-stratcom',
+      'javelin-install',
+      'javelin-workflow',
+      'javelin-router',
+      'javelin-behavior-device',
+      'javelin-vector',
+      'phabricator-diff-inline',
+    ),
     'd0c516d5' => array(
       'javelin-behavior',
       'javelin-dom',

src/applications/differential/view/DifferentialChangesetDetailView.php

@@ -168,6 +168,26 @@ final class DifferentialChangesetDetailView extends AphrontView {
       $right_id = $changeset_id;
     }
 
+    // In the persistent banner, emphasize the current filename.
+    $path_part = dirname($display_filename);
+    $file_part = basename($display_filename);
+    $display_parts = array();
+    if (strlen($path_part)) {
+      $path_part = $path_part.'/';
+      $display_parts[] = phutil_tag(
+        'span',
+        array(
+          'class' => 'diff-banner-path',
+        ),
+        $path_part);
+    }
+    $display_parts[] = phutil_tag(
+      'span',
+      array(
+        'class' => 'diff-banner-file',
+      ),
+      $file_part);
+
     return javelin_tag(
       'div',
       array(
@@ -183,9 +203,9 @@ final class DifferentialChangesetDetailView extends AphrontView {
           'autoload' => $this->getAutoload(),
           'loaded' => $this->getLoaded(),
           'undoTemplates' => hsprintf('%s', $renderer->renderUndoTemplates()),
-          'path' => $display_filename,
+          'displayPath' => hsprintf('%s', $display_parts),
           'objectiveName' => basename($display_filename),
-          'icon' => 'fa-file-text-o',
+          'icon' => $display_icon,
         ),
         'class' => $class,
         'id'    => $id,

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

@@ -405,13 +405,16 @@ tr.differential-inline-loading {
   margin-right: 4px;
 }
 
+.diff-banner-path {
+  color: {$greytext};
+}
+
 .scroll-objective-list {
   position: fixed;
   right: 0;
   width: 24px;
   top: 48px;
   bottom: 48px;
-  z-index: 6;
   background: rgba(255, 255, 255, 0.50);
   border-style: solid;
   border-color: rgba(255, 255, 255, 0.95);

webroot/rsrc/css/core/z-index.css

@@ -97,6 +97,10 @@ div.phui-calendar-day-event {
   z-index: 6;
 }
 
+.scroll-objective-list {
+  z-index: 6;
+}
+
 .conpherence-durable-column {
   z-index: 7;
 }

webroot/rsrc/js/application/diff/DiffChangeset.js

@@ -31,7 +31,7 @@ JX.install('DiffChangeset', {
     this._leftID = data.left;
     this._rightID = data.right;
 
-    this._path = data.path;
+    this._displayPath = JX.$H(data.displayPath);
     this._objectiveName = data.objectiveName;
     this._icon = data.icon;
 
@@ -59,7 +59,7 @@ JX.install('DiffChangeset', {
     _visible: true,
 
     _undoNode: null,
-    _path: null,
+    _displayPath: null,
 
     _changesetList: null,
     _objective: null,
@@ -277,8 +277,8 @@ JX.install('DiffChangeset', {
       JX.Router.getInstance().queue(routable);
     },
 
-    getPath: function() {
-      return this._path;
+    getDisplayPath: function() {
+      return this._displayPath;
     },
 
     /**

webroot/rsrc/js/application/diff/DiffChangesetList.js

@@ -1322,9 +1322,9 @@ JX.install('DiffChangesetList', {
       }
 
       var icon = new JX.PHUIXIconView()
-        .setIcon('fa-file')
+        .setIcon(changeset.getIcon())
         .getNode();
-      JX.DOM.setContent(node, [icon, ' ', changeset.getPath()]);
+      JX.DOM.setContent(node, [icon, ' ', changeset.getDisplayPath()]);
 
       document.body.appendChild(node);
     },