Highlight lines on drag and drop in Diffusion

Summary: Nobody knows that it's possible to highlight more lines because there's no interface for it.

Test Plan:
Highlighted:

- single line
- top to bottom
- bottom to top
- inside to outside

Reviewers: Korvin, epriestley

Reviewed By: epriestley

CC: aran, epriestley

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

src/__celerity_resource_map__.php

@@ -778,7 +778,7 @@ celerity_register_resource_map(array(
   ),
   'diffusion-source-css' =>
   array(
-    'uri' => '/res/501fcd3a/rsrc/css/application/diffusion/diffusion-source.css',
+    'uri' => '/res/0ffedfa2/rsrc/css/application/diffusion/diffusion-source.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1252,6 +1252,19 @@ celerity_register_resource_map(array(
     ),
     'disk' => '/rsrc/js/application/diffusion/behavior-jump-to.js',
   ),
+  'javelin-behavior-diffusion-line-linker' =>
+  array(
+    'uri' => '/res/d3cf5499/rsrc/js/application/diffusion/behavior-line-linker.js',
+    'type' => 'js',
+    'requires' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-stratcom',
+      2 => 'javelin-dom',
+      3 => 'javelin-uri',
+    ),
+    'disk' => '/rsrc/js/application/diffusion/behavior-line-linker.js',
+  ),
   'javelin-behavior-diffusion-pull-lastmodified' =>
   array(
     'uri' => '/res/29fe2790/rsrc/js/application/diffusion/behavior-pull-lastmodified.js',

src/applications/diffusion/controller/DiffusionBrowseFileController.php

@@ -244,10 +244,11 @@ final class DiffusionBrowseFileController extends DiffusionController {
             ));
         }
 
-        $corpus_table = phutil_render_tag(
+        $corpus_table = javelin_render_tag(
           'table',
           array(
             'class' => "diffusion-source remarkup-code PhabricatorMonospaced",
+            'sigil' => 'diffusion-source',
           ),
           implode("\n", $rows));
         $corpus = phutil_render_tag(
@@ -592,14 +593,17 @@ final class DiffusionBrowseFileController extends DiffusionController {
         ),
         phutil_escape_html($line['line']));
 
-      $blame[] = phutil_render_tag(
+      $blame[] = javelin_render_tag(
         'th',
         array(
           'class' => 'diffusion-line-link',
+          'sigil' => 'diffusion-line-link',
           'style' => isset($color) ? 'background: '.$color : null,
         ),
         $line_link);
 
+      Javelin::initBehavior('diffusion-line-linker');
+
       $blame = implode('', $blame);
 
       if ($line['target']) {
@@ -624,7 +628,7 @@ final class DiffusionBrowseFileController extends DiffusionController {
       $rows[] = phutil_render_tag(
         'tr',
         array(
-          'style' => ($line['highlighted'] ? 'background: #ffff00;' : null),
+          'class' => ($line['highlighted'] ? 'highlighted' : null),
         ),
         $blame.
         $line_text);

webroot/rsrc/css/application/diffusion/diffusion-source.css

@@ -9,6 +9,10 @@
   font-size: 10px;
 }
 
+.diffusion-source tr.highlighted {
+  background: #ffff00;
+}
+
 .diffusion-source th {
   text-align:         right;
   vertical-align:     top;

webroot/rsrc/js/application/diffusion/behavior-line-linker.js

@@ -0,0 +1,78 @@
+/**
+ * @provides javelin-behavior-diffusion-line-linker
+ * @requires javelin-behavior
+ *           javelin-stratcom
+ *           javelin-dom
+ *           javelin-uri
+ */
+
+JX.behavior('diffusion-line-linker', function() {
+
+  var origin = null;
+  var target = null;
+  var root = null;
+
+  function getRowNumber(tr) {
+    var th = JX.DOM.find(tr, 'th', 'diffusion-line-link');
+    return +(th.textContent || th.innerText);
+  }
+
+  JX.Stratcom.listen(
+    'mousedown',
+    'diffusion-line-link',
+    function(e) {
+      if (e.isRightButton()) {
+        return;
+      }
+      origin = e.getNode('tag:tr');
+      target = origin;
+      root = e.getNode('diffusion-source');
+      e.kill();
+    });
+
+  JX.Stratcom.listen(
+    'mouseover',
+    'diffusion-source',
+    function(e) {
+      if (!origin || e.getNode('diffusion-source') !== root) {
+        return;
+      }
+      target = e.getNode('tag:tr');
+
+      var highlighting = false;
+      var source = null;
+      var trs = JX.DOM.scry(root, 'tr');
+      for (var i = 0; i < trs.length; i++) {
+        if (!highlighting && (trs[i] === origin || trs[i] === target)) {
+          highlighting = true;
+          source = trs[i];
+        }
+        JX.DOM.alterClass(trs[i], 'highlighted', highlighting);
+        if (trs[i] === (source === origin ? target : origin)) {
+          highlighting = false;
+        }
+      }
+    });
+
+  JX.Stratcom.listen(
+    'mouseup',
+    null,
+    function(e) {
+      if (!origin) {
+        return;
+      }
+
+      var o = getRowNumber(origin);
+      var t = getRowNumber(target);
+      var lines = (o == t ? o : Math.min(o, t) + '-' + Math.max(o, t));
+      var th = JX.DOM.find(origin, 'th', 'diffusion-line-link');
+      var uri = JX.DOM.find(th, 'a').href;
+      uri = uri.replace(/(.*\$)\d+/, '$1' + lines);
+
+      origin = null;
+      target = null;
+      e.kill();
+      JX.$U(uri).go();
+    });
+
+});