Improve rendering of history graph in "CommitGraphView"

Summary: Ref T13552. In the new combined "table/list" graph view, tidy up the graph rendering.

Test Plan: {F7633504}

Maniphest Tasks: T13552

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

resources/celerity/map.php

@@ -15,7 +15,7 @@ return array(
     'differential.pkg.css' => '5c459f92',
     'differential.pkg.js' => '218fda21',
     'diffusion.pkg.css' => '42c75c37',
-    'diffusion.pkg.js' => 'a98c0bf7',
+    'diffusion.pkg.js' => '8ee48a4b',
     'maniphest.pkg.css' => '35995d6d',
     'maniphest.pkg.js' => 'c9308721',
     'rsrc/audio/basic/alert.mp3' => '17889334',
@@ -73,7 +73,7 @@ return array(
     'rsrc/css/application/diffusion/diffusion-icons.css' => '23b31a1b',
     'rsrc/css/application/diffusion/diffusion-readme.css' => 'b68a76e4',
     'rsrc/css/application/diffusion/diffusion-repository.css' => 'b89e8c6c',
-    'rsrc/css/application/diffusion/diffusion.css' => 'b54c77b0',
+    'rsrc/css/application/diffusion/diffusion.css' => 'a54bb336',
     'rsrc/css/application/feed/feed.css' => 'd8b6e3f8',
     'rsrc/css/application/files/global-drag-and-drop.css' => '1d2713a4',
     'rsrc/css/application/flag/flag.css' => '2b77be8d',
@@ -390,7 +390,7 @@ return array(
     'rsrc/js/application/diffusion/ExternalEditorLinkEngine.js' => '48a8641f',
     'rsrc/js/application/diffusion/behavior-audit-preview.js' => 'b7b73831',
     'rsrc/js/application/diffusion/behavior-commit-branches.js' => '4b671572',
-    'rsrc/js/application/diffusion/behavior-commit-graph.js' => 'ef836bf2',
+    'rsrc/js/application/diffusion/behavior-commit-graph.js' => '3be6ef4f',
     'rsrc/js/application/diffusion/behavior-locate-file.js' => '87428eb2',
     'rsrc/js/application/diffusion/behavior-pull-lastmodified.js' => 'c715c123',
     'rsrc/js/application/doorkeeper/behavior-doorkeeper-tag.js' => '6a85bc5a',
@@ -567,7 +567,7 @@ return array(
     'differential-revision-history-css' => '8aa3eac5',
     'differential-revision-list-css' => '93d2df7d',
     'differential-table-of-contents-css' => 'bba788b9',
-    'diffusion-css' => 'b54c77b0',
+    'diffusion-css' => 'a54bb336',
     'diffusion-icons-css' => '23b31a1b',
     'diffusion-readme-css' => 'b68a76e4',
     'diffusion-repository-css' => 'b89e8c6c',
@@ -615,7 +615,7 @@ return array(
     'javelin-behavior-differential-diff-radios' => '925fe8cd',
     'javelin-behavior-differential-populate' => 'b86ef6c2',
     'javelin-behavior-diffusion-commit-branches' => '4b671572',
-    'javelin-behavior-diffusion-commit-graph' => 'ef836bf2',
+    'javelin-behavior-diffusion-commit-graph' => '3be6ef4f',
     'javelin-behavior-diffusion-locate-file' => '87428eb2',
     'javelin-behavior-diffusion-pull-lastmodified' => 'c715c123',
     'javelin-behavior-document-engine' => '243d6c22',
@@ -1249,6 +1249,11 @@ return array(
       'javelin-behavior',
       'phabricator-prefab',
     ),
+    '3be6ef4f' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+    ),
     '3dc5ad43' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -2173,11 +2178,6 @@ return array(
     'ee77366f' => array(
       'aphront-dialog-view-css',
     ),
-    'ef836bf2' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-    ),
     'f340a484' => array(
       'javelin-install',
       'javelin-dom',

src/applications/diffusion/view/DiffusionCommitGraphView.php

@@ -82,13 +82,9 @@ final class DiffusionCommitGraphView
   }
 
   public function render() {
-    $viewer = $this->getUser();
-
-    $drequest = $this->getDiffusionRequest();
-    $repository = $drequest->getRepository();
+    $viewer = $this->getViewer();
 
     require_celerity_resource('diffusion-css');
-    Javelin::initBehavior('phabricator-tooltips');
 
     $show_builds = $this->shouldShowBuilds();
     $show_revisions = $this->shouldShowRevisions();
@@ -107,13 +103,18 @@ final class DiffusionCommitGraphView
       $item_date = phabricator_date($item_epoch, $viewer);
       if ($item_date !== $last_date) {
         $last_date = $item_date;
-        $content[] = $item_date;
+        $content[] = phutil_tag(
+          'div',
+          array(
+            'class' => 'diffusion-commit-graph-date-header',
+          ),
+          $item_date);
       }
 
       $commit_description = $this->getCommitDescription($commit);
-      $commit_link = $this->getCommitURI($commit, $item_hash);
+      $commit_link = $this->getCommitURI($item_hash);
 
-      $short_hash = $this->getCommitObjectName($commit, $item_hash);
+      $short_hash = $this->getCommitObjectName($item_hash);
       $is_disabled = $this->getCommitIsDisabled($commit);
 
       $author_view = $this->getCommitAuthorView($commit);
@@ -156,29 +157,38 @@ final class DiffusionCommitGraphView
 
       $content[] = $view;
 
-      $rows[] = array(
-        $content,
-      );
+      $rows[] = $content;
     }
 
     $graph = $this->newGraphView();
-    if ($graph) {
-      $idx = 0;
-      foreach ($rows as $key => $row) {
-        array_unshift($row, $graph[$idx++]);
-        $rows[$key] = $row;
-      }
-    }
-
-    foreach ($rows as $key => $row) {
+    foreach ($rows as $idx => $row) {
       $cells = array();
-      foreach ($row as $cell) {
-        $cells[] = phutil_tag('td', array(), $cell);
-      }
-      $rows[$key] = phutil_tag('tr', array(), $cells);
+
+      if ($graph) {
+        $cells[] = phutil_tag(
+          'td',
+          array(
+            'class' => 'diffusion-commit-graph-path-cell',
+          ),
+          $graph[$idx]);
       }
 
-    $table = phutil_tag('table', array(), $rows);
+      $cells[] = phutil_tag(
+        'td',
+        array(
+          'class' => 'diffusion-commit-graph-content-cell',
+        ),
+        $row);
+
+      $rows[$idx] = phutil_tag('tr', array(), $cells);
+    }
+
+    $table = phutil_tag(
+      'table',
+      array(
+        'class' => 'diffusion-commit-graph-table',
+      ),
+      $rows);
 
     return $table;
   }
@@ -275,17 +285,18 @@ final class DiffusionCommitGraphView
     return $commit->getCommitData()->getSummary();
   }
 
-  private function getCommitURI($commit, $hash) {
+  private function getCommitURI($hash) {
     $repository = $this->getRepository();
 
     if ($repository) {
       return $repository->getCommitURI($hash);
     }
 
+    $commit = $this->getCommit($hash);
     return $commit->getURI();
   }
 
-  private function getCommitObjectName($commit, $hash) {
+  private function getCommitObjectName($hash) {
     $repository = $this->getRepository();
 
     if ($repository) {
@@ -294,6 +305,7 @@ final class DiffusionCommitGraphView
         $is_local = true);
     }
 
+    $commit = $this->getCommit($hash);
     return $commit->getDisplayName();
   }
 

src/infrastructure/diff/view/PHUIDiffGraphView.php

@@ -205,6 +205,7 @@ final class PHUIDiffGraphView extends Phobject {
       'diffusion-commit-graph',
       array(
         'count' => $count,
+        'autoheight' => true,
       ));
 
     return $graph;

webroot/rsrc/css/application/diffusion/diffusion.css

@@ -237,3 +237,17 @@
     border-right: none;
     border-color: {$thinblueborder};
 }
+
+.diffusion-commit-graph-table td.diffusion-commit-graph-path-cell {
+  padding: 0 4px 0 0;
+}
+
+.diffusion-commit-graph-table td.diffusion-commit-graph-path-cell > canvas {
+  display: block;
+}
+
+.diffusion-commit-graph-date-header {
+  color: {$darkgreytext};
+  font-weight: bold;
+  padding: 4px 0;
+}

webroot/rsrc/js/application/diffusion/behavior-commit-graph.js

@@ -61,7 +61,13 @@ JX.behavior('diffusion-commit-graph', function(config) {
       return (col * cell) + (cell / 2);
     };
 
-    var h = 34;
+    var h;
+    if (config.autoheight) {
+      h = JX.Vector.getDim(nodes[ii].parentNode).y;
+    } else {
+      h = 34;
+    }
+
     var w = cell * config.count;
 
     var canvas = JX.$N('canvas', {width: w, height: h});
@@ -147,7 +153,7 @@ JX.behavior('diffusion-commit-graph', function(config) {
       }
     }
 
-    JX.DOM.setContent(nodes[ii], canvas);
+    JX.DOM.replace(nodes[ii], canvas);
   }