Transactions - make "show older" area bigger and include keyboard command

Summary: Fixes T6683.

Test Plan: clicked the yellow box and it worked! pressed '~' and it worked!

Reviewers: epriestley, chad

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T6683

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

resources/celerity/map.php

@@ -7,8 +7,8 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '78b8bd03',
+    'core.pkg.css' => 'a157f664',
-    'core.pkg.js' => 'ef8f73ee',
+    'core.pkg.js' => '7c53868c',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '8af45893',
     'differential.pkg.js' => '42c10e78',
@@ -142,7 +142,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => '6b74282b',
     'rsrc/css/phui/phui-text.css' => 'cf019f54',
-    'rsrc/css/phui/phui-timeline-view.css' => '26bb3fd4',
+    'rsrc/css/phui/phui-timeline-view.css' => '7556c113',
     'rsrc/css/phui/phui-workboard-view.css' => '2bf82d00',
     'rsrc/css/phui/phui-workpanel-view.css' => '198c7e6c',
     'rsrc/css/sprite-apps-large.css' => '20ec0cc0',
@@ -420,7 +420,7 @@ return array(
     'rsrc/js/application/repository/repository-crossreference.js' => 'f9539603',
     'rsrc/js/application/search/behavior-reorder-queries.js' => 'e9581f08',
     'rsrc/js/application/slowvote/behavior-slowvote-embed.js' => 'd6f54db0',
-    'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '83458cbb',
+    'rsrc/js/application/transactions/behavior-show-older-transactions.js' => '77fcaaee',
     'rsrc/js/application/transactions/behavior-transaction-comment-form.js' => '9f7309fb',
     'rsrc/js/application/transactions/behavior-transaction-list.js' => '13c739ea',
     'rsrc/js/application/uiexample/JavelinViewExample.js' => 'd4a14807',
@@ -623,7 +623,7 @@ return array(
     'javelin-behavior-phabricator-remarkup-assist' => 'e32d14ab',
     'javelin-behavior-phabricator-reveal-content' => '60821bc7',
     'javelin-behavior-phabricator-search-typeahead' => '724b1247',
-    'javelin-behavior-phabricator-show-older-transactions' => '83458cbb',
+    'javelin-behavior-phabricator-show-older-transactions' => '77fcaaee',
     'javelin-behavior-phabricator-tooltips' => '3ee3408b',
     'javelin-behavior-phabricator-transaction-comment-form' => '9f7309fb',
     'javelin-behavior-phabricator-transaction-list' => '13c739ea',
@@ -791,7 +791,7 @@ return array(
     'phui-status-list-view-css' => '888cedb8',
     'phui-tag-view-css' => '6b74282b',
     'phui-text-css' => 'cf019f54',
-    'phui-timeline-view-css' => '26bb3fd4',
+    'phui-timeline-view-css' => '7556c113',
     'phui-workboard-view-css' => '2bf82d00',
     'phui-workpanel-view-css' => '198c7e6c',
     'phuix-action-list-view' => 'b5c256b8',
@@ -1308,6 +1308,12 @@ return array(
       'javelin-install',
       'javelin-util',
     ),
+    '77fcaaee' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'phabricator-busy',
+    ),
     '7814b593' => array(
       'javelin-request',
       'javelin-behavior',
@@ -1368,12 +1374,6 @@ return array(
     '82ce2142' => array(
       'aphront-typeahead-control-css',
     ),
-    '83458cbb' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'phabricator-busy',
-    ),
     '84845b5b' => array(
       'javelin-behavior',
       'javelin-dom',

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -318,6 +318,7 @@
   text-align: center;
   padding: 12px;
   color: {$darkgreytext};
+  cursor: pointer;
 }
 
 .device-phone .phui-timeline-older-transactions-are-hidden {

webroot/rsrc/js/application/transactions/behavior-show-older-transactions.js

@@ -8,8 +8,6 @@
 
 JX.behavior('phabricator-show-older-transactions', function(config) {
 
-  var loading = false;
-
   function get_hash() {
     return window.location.hash.replace(/^#/, '');
   }
@@ -30,39 +28,8 @@ JX.behavior('phabricator-show-older-transactions', function(config) {
 
   function check_hash() {
     if (hash_is_hidden()) {
-      var showOlderBlock = null;
+      load_older(load_hidden_hash_callback);
-      try {
-        showOlderBlock = JX.DOM.find(
-          JX.$(config.timelineID),
-          'div',
-          'show-older-block');
-      } catch (not_found_exception) {
-        // probably a garbage hash and we loaded everything looking
-        // for it; just abort
-        if (loading) {
-          loading = false;
-          JX.Busy.done();
-        }
-        return;
-      }
-      var showOlderLink = JX.DOM.find(
-        showOlderBlock,
-        'a',
-        'show-older-link');
-      if (!loading) {
-        loading = true;
-        JX.Busy.start();
-      }
-      fetch_older_workflow(
-        showOlderLink.href,
-        load_hidden_hash,
-        showOlderBlock)
-      .start();
     } else {
-      if (loading) {
-        loading = false;
-        JX.Busy.done();
-      }
       try {
         var target = JX.$(get_hash());
         JX.DOM.scrollTo(target);
@@ -72,15 +39,46 @@ JX.behavior('phabricator-show-older-transactions', function(config) {
     }
   }
 
+  function load_older(callback) {
+    var showOlderBlock = null;
+    try {
+      showOlderBlock = JX.DOM.find(
+        JX.$(config.timelineID),
+        'div',
+        'show-older-block');
+    } catch (not_found_exception) {
+      // we loaded everything...!
+      return;
+    }
+
+    var showOlderLink = JX.DOM.find(
+      showOlderBlock,
+      'a',
+      'show-older-link');
+    var workflow = fetch_older_workflow(
+      showOlderLink.href,
+      callback,
+      showOlderBlock);
+    var routable = workflow.getRoutable()
+      .setPriority(2000)
+      .setType('workflow');
+    JX.Router.getInstance().queue(routable);
+  }
+
   var show_older = function(swap, r) {
     JX.DOM.replace(swap, JX.$H(r.timeline).getFragment());
   };
 
-  var load_hidden_hash = function(swap, r) {
+  var load_hidden_hash_callback = function(swap, r) {
     show_older(swap, r);
     check_hash();
   };
 
+  var load_all_older_callback = function(swap, r) {
+    show_older(swap, r);
+    load_older(load_all_older_callback);
+  };
+
   var fetch_older_workflow = function(href, callback, swap) {
     return new JX.Workflow(href, config.renderData)
       .setHandler(JX.bind(null, callback, swap));
@@ -88,17 +86,26 @@ JX.behavior('phabricator-show-older-transactions', function(config) {
 
   JX.Stratcom.listen(
     'click',
-    ['show-older-link'],
+    ['show-older-block'],
     function(e) {
       e.kill();
-      fetch_older_workflow(
+      var workflow = fetch_older_workflow(
-        e.getNode('tag:a').href,
+        JX.DOM.find(
+          e.getNode('show-older-block'),
+          'a',
+          'show-older-link').href,
         show_older,
-        e.getNode('show-older-block'))
+        e.getNode('show-older-block'));
-      .start();
+      var routable = workflow.getRoutable()
+        .setPriority(2000)
+        .setType('workflow');
+      JX.Router.getInstance().queue(routable);
     });
 
   JX.Stratcom.listen('hashchange', null, check_hash);
   check_hash();
 
+  new JX.KeyboardShortcut(['~'], 'Show all older changes in the timeline.')
+    .setHandler(JX.bind(null, load_older, load_all_older_callback))
+    .register();
 });