Colorize lines in blame under DocumentEngine, to show relative age of changes

Summary:
Depends on D19313. Ref T13105. Fixes T13015. We lost the coloration for ages in the switch to Document Engine.

Restore it, and use a wider range of colors to make the information more clear.

Test Plan: Viewed some blame, saw a nice explosion of bright colors. This is a cornerstone of good design.

Maniphest Tasks: T13105, T13015

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

resources/celerity/map.php

@@ -119,7 +119,7 @@ return array(
     'rsrc/css/font/font-lato.css' => 'c7ccd872',
     'rsrc/css/font/phui-font-icon-base.css' => '870a7360',
     'rsrc/css/layout/phabricator-filetree-view.css' => 'b912ad97',
-    'rsrc/css/layout/phabricator-source-code-view.css' => 'af54e277',
+    'rsrc/css/layout/phabricator-source-code-view.css' => 'a526a787',
     'rsrc/css/phui/button/phui-button-bar.css' => 'f1ff5494',
     'rsrc/css/phui/button/phui-button-simple.css' => '8e1baf68',
     'rsrc/css/phui/button/phui-button.css' => '1863cc6e',
@@ -390,7 +390,7 @@ return array(
     'rsrc/js/application/diffusion/behavior-pull-lastmodified.js' => 'f01586dc',
     'rsrc/js/application/doorkeeper/behavior-doorkeeper-tag.js' => '1db13e70',
     'rsrc/js/application/drydock/drydock-live-operation-status.js' => '901935ef',
-    'rsrc/js/application/files/behavior-document-engine.js' => '6760beb4',
+    'rsrc/js/application/files/behavior-document-engine.js' => '0333c0b6',
     'rsrc/js/application/files/behavior-icon-composer.js' => '8499b6ab',
     'rsrc/js/application/files/behavior-launch-icon-composer.js' => '48086888',
     'rsrc/js/application/harbormaster/behavior-harbormaster-log.js' => '191b4909',
@@ -604,7 +604,7 @@ return array(
     'javelin-behavior-diffusion-jump-to' => '73d09eef',
     'javelin-behavior-diffusion-locate-file' => '6d3e1947',
     'javelin-behavior-diffusion-pull-lastmodified' => 'f01586dc',
-    'javelin-behavior-document-engine' => '6760beb4',
+    'javelin-behavior-document-engine' => '0333c0b6',
     'javelin-behavior-doorkeeper-tag' => '1db13e70',
     'javelin-behavior-drydock-live-operation-status' => '901935ef',
     'javelin-behavior-durable-column' => '2ae077e1',
@@ -780,7 +780,7 @@ return array(
     'phabricator-search-results-css' => '505dd8cf',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',
-    'phabricator-source-code-view-css' => 'af54e277',
+    'phabricator-source-code-view-css' => 'a526a787',
     'phabricator-standard-page-view' => '34ee718b',
     'phabricator-textareautils' => '320810c8',
     'phabricator-title' => '485aaa6c',
@@ -909,6 +909,11 @@ return array(
       'javelin-behavior',
       'javelin-uri',
     ),
+    '0333c0b6' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+    ),
     '040fce04' => array(
       'javelin-behavior',
       'javelin-request',
@@ -1398,11 +1403,6 @@ return array(
       'javelin-json',
       'phuix-form-control-view',
     ),
-    '6760beb4' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-    ),
     '680ea2c8' => array(
       'javelin-install',
       'javelin-dom',

src/applications/diffusion/controller/DiffusionBlameController.php

@@ -80,7 +80,9 @@ final class DiffusionBlameController extends DiffusionController {
 
     $handles = $viewer->loadHandles($handle_phids);
 
+
     $map = array();
+    $epochs = array();
     foreach ($identifiers as $identifier) {
       $revision_id = idx($revision_map, $identifier);
       if ($revision_id) {
@@ -173,23 +175,34 @@ final class DiffusionBlameController extends DiffusionController {
 
         $info = array(
           $info,
-          ' / ',
+          " \xC2\xB7 ",
           $revision_link,
         );
       }
 
+      $epoch = $commit->getEpoch();
+      $epochs[] = $epoch;
+
       $data = array(
         'skip' => $skip_link,
         'info' => hsprintf('%s', $info),
+        'epoch' => $epoch,
       );
 
       $map[$identifier] = $data;
     }
 
+    $epoch_min = min($epochs);
+    $epoch_max = max($epochs);
+
     return id(new AphrontAjaxResponse())->setContent(
       array(
         'blame' => $blame,
         'map' => $map,
+        'epoch' => array(
+          'min' => $epoch_min,
+          'max' => $epoch_max,
+        ),
       ));
   }
 

webroot/rsrc/css/layout/phabricator-source-code-view.css

@@ -85,11 +85,18 @@ th.phabricator-source-line a:hover {
 }
 
 .phabricator-source-blame-info {
-  color: {$lightgreytext};
   white-space: nowrap;
   min-width: 130px;
   border-right: 1px solid {$paste.border};
   padding-right: 8px;
+
+  vertical-align: middle;
+  color: #ffffff;
+}
+
+.phabricator-source-blame-info a {
+  color: {$darkbluetext};
+  text-shadow: 1px 1px rgba(0, 0, 0, 0.111);
 }
 
 .phabricator-source-blame-skip a {
@@ -98,14 +105,19 @@ th.phabricator-source-line a:hover {
   padding: 2px 8px;
 }
 
+.phabricator-source-blame-skip a .phui-icon-view {
+  color: {$darkbluetext};
+}
+
 .device-desktop .phabricator-source-blame-skip a:hover {
   background: {$bluebackground};
 }
 
 .phabricator-source-blame-author {
   display: inline-block;
+  vertical-align: middle;
   padding: 0;
-  margin: 2px 6px -4px 8px;
+  margin: 0 6px 0 8px;
   width: 16px;
   height: 16px;
   background-size: 100% 100%;

webroot/rsrc/js/application/files/behavior-document-engine.js

@@ -293,7 +293,6 @@ JX.behavior('document-engine', function(config, statics) {
   function renderBlame(row, blame) {
     var spec = blame.map[row.commit];
 
-
     var info = null;
     var skip = null;
 
@@ -309,6 +308,53 @@ JX.behavior('document-engine', function(config, statics) {
     if (row.info) {
       JX.DOM.setContent(row.info, info);
     }
+
+    var epoch_range = (blame.epoch.max - blame.epoch.min);
+
+    var epoch_value;
+    if (!epoch_range) {
+      epoch_value = 1;
+    } else {
+      epoch_value = (spec.epoch - blame.epoch.min) / epoch_range;
+    }
+
+    var h_min = 0.04;
+    var h_max = 0.44;
+    var h = h_min + ((h_max - h_min) * epoch_value);
+
+    var s = 0.44;
+
+    var v_min = 0.92;
+    var v_max = 1.00;
+    var v = v_min + ((v_max - v_min) * epoch_value);
+
+    row.info.style.background = getHSV(h, s, v);
+  }
+
+  function getHSV(h, s, v) {
+    var r, g, b, i, f, p, q, t;
+
+    i = Math.floor(h * 6);
+    f = h * 6 - i;
+    p = v * (1 - s);
+    q = v * (1 - f * s);
+    t = v * (1 - (1 - f) * s);
+
+    switch (i % 6) {
+      case 0: r = v, g = t, b = p; break;
+      case 1: r = q, g = v, b = p; break;
+      case 2: r = p, g = v, b = t; break;
+      case 3: r = p, g = q, b = v; break;
+      case 4: r = t, g = p, b = v; break;
+      case 5: r = v, g = p, b = q; break;
+    }
+
+    r = Math.round(r * 255);
+    g = Math.round(g * 255);
+    b = Math.round(b * 255);
+
+
+    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
   }
 
   if (!statics.initialized) {