Don't reload page after clicking on Diffusion line link

Summary:
For a single line, I can use the right click.
But for highlighting multiple lines, I have to wait for page reload.

It would be nice to track this in history but that's more involved.
This is actually maybe better behavior.

Test Plan: Clicked on the line link, dragged and dropped on it.

Reviewers: epriestley

Reviewed By: epriestley

CC: aran, Korvin

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

scripts/celerity_mapper.php

@@ -50,6 +50,7 @@ $package_spec = array(
     'javelin-behavior-phabricator-search-typeahead',
     'javelin-behavior-konami',
     'javelin-behavior-aphlict-dropdown',
+    'javelin-behavior-history-install',
 
     'javelin-behavior-phabricator-active-nav',
     'javelin-behavior-phabricator-nav',

src/infrastructure/celerity/CelerityStaticResourceResponse.php

@@ -149,6 +149,7 @@ final class CelerityStaticResourceResponse {
         'refresh-csrf',
         'aphront-basic-tokenizer',
         'dark-console',
+        'history-install',
       );
 
       $higher_priority_behaviors = array_select_keys(

src/view/page/PhabricatorStandardPageView.php

@@ -153,6 +153,7 @@ final class PhabricatorStandardPageView extends PhabricatorBarePageView {
     Javelin::initBehavior('aphront-form-disable-on-submit');
     Javelin::initBehavior('toggle-class', array());
     Javelin::initBehavior('konami', array());
+    Javelin::initBehavior('history-install');
 
     $current_token = null;
     if ($user) {

webroot/rsrc/js/application/core/behavior-history-install.js

@@ -0,0 +1,9 @@
+/**
+ * @provides javelin-behavior-history-install
+ * @requires javelin-behavior
+ *           javelin-history
+ */
+
+JX.behavior('history-install', function() {
+  JX.History.install();
+});

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

@@ -3,7 +3,7 @@
  * @requires javelin-behavior
  *           javelin-stratcom
  *           javelin-dom
- *           javelin-uri
+ *           javelin-history
  */
 
 JX.behavior('diffusion-line-linker', function() {
@@ -31,29 +31,35 @@ JX.behavior('diffusion-line-linker', function() {
     });
 
   JX.Stratcom.listen(
-    'mouseover',
+    'click',
-    'diffusion-source',
+    'diffusion-line-link',
     function(e) {
-      if (!origin || e.getNode('diffusion-source') !== root) {
+      e.kill();
-        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;
-        }
-      }
     });
 
+  var highlight = 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('mouseover', 'diffusion-source', highlight);
+
   JX.Stratcom.listen(
     'mouseup',
     null,
@@ -62,6 +68,8 @@ JX.behavior('diffusion-line-linker', function() {
         return;
       }
 
+      highlight(e);
+
       var o = getRowNumber(origin);
       var t = getRowNumber(target);
       var lines = (o == t ? o : Math.min(o, t) + '-' + Math.max(o, t));
@@ -72,7 +80,7 @@ JX.behavior('diffusion-line-linker', function() {
       origin = null;
       target = null;
       e.kill();
-      JX.$U(uri).go();
+      JX.History.replace(uri);
     });
 
 });