From e57f209056836a0ce450b8ee8a1e045f98bb37fc Mon Sep 17 00:00:00 2001 From: vrana Date: Tue, 5 Mar 2013 14:31:20 -0800 Subject: [PATCH] Load blame in Diffusion by AJAX Summary: I have blame enabled by default and displaying files with long history takes easily over 10 seconds. Load the blame data by AJAX instead. This is actually doing more work and the total response time is longer but it's worth it for me as I am interested just in the file contents quite often. I know you were talking about building blame cache but until we have it... I'm not sure if the AJAX loading indicator in bottom right corner is enough to inform the user that we are loading it on background. Test Plan: ?view=highlighted ?view=plainblame ?view=blame Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5244 --- scripts/celerity_mapper.php | 1 + src/__celerity_resource_map__.php | 66 +++++++++++-------- .../DiffusionBrowseFileController.php | 55 ++++++++++------ .../diffusion/diffusion-source.css | 12 ++++ .../diffusion/behavior-load-blame.js | 14 ++++ 5 files changed, 102 insertions(+), 46 deletions(-) create mode 100644 webroot/rsrc/js/application/diffusion/behavior-load-blame.js diff --git a/scripts/celerity_mapper.php b/scripts/celerity_mapper.php index dc047693ec..74e7ff3fd0 100755 --- a/scripts/celerity_mapper.php +++ b/scripts/celerity_mapper.php @@ -136,6 +136,7 @@ $package_spec = array( 'javelin-behavior-aphront-drag-and-drop-textarea', 'javelin-behavior-phabricator-object-selector', 'javelin-behavior-repository-crossreference', + 'javelin-behavior-load-blame', 'differential-inline-comment-editor', 'javelin-behavior-differential-dropdown-menus', diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 31b79d4ebd..25e603517d 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -928,7 +928,7 @@ celerity_register_resource_map(array( ), 'diffusion-source-css' => array( - 'uri' => '/res/6a28b429/rsrc/css/application/diffusion/diffusion-source.css', + 'uri' => '/res/e76bcd50/rsrc/css/application/diffusion/diffusion-source.css', 'type' => 'css', 'requires' => array( @@ -1582,6 +1582,18 @@ celerity_register_resource_map(array( ), 'disk' => '/rsrc/js/application/maniphest/behavior-line-chart.js', ), + 'javelin-behavior-load-blame' => + array( + 'uri' => '/res/138e2961/rsrc/js/application/diffusion/behavior-load-blame.js', + 'type' => 'js', + 'requires' => + array( + 0 => 'javelin-behavior', + 1 => 'javelin-dom', + 2 => 'javelin-request', + ), + 'disk' => '/rsrc/js/application/diffusion/behavior-load-blame.js', + ), 'javelin-behavior-maniphest-batch-editor' => array( 'uri' => '/res/d22661be/rsrc/js/application/maniphest/behavior-batch-editor.js', @@ -3601,7 +3613,7 @@ celerity_register_resource_map(array( 'uri' => '/res/pkg/8aaacd1b/differential.pkg.css', 'type' => 'css', ), - 'd2447f72' => + '322728f3' => array( 'name' => 'differential.pkg.js', 'symbols' => @@ -3621,12 +3633,13 @@ celerity_register_resource_map(array( 12 => 'javelin-behavior-aphront-drag-and-drop-textarea', 13 => 'javelin-behavior-phabricator-object-selector', 14 => 'javelin-behavior-repository-crossreference', - 15 => 'differential-inline-comment-editor', - 16 => 'javelin-behavior-differential-dropdown-menus', - 17 => 'javelin-behavior-differential-toggle-files', - 18 => 'javelin-behavior-differential-user-select', + 15 => 'javelin-behavior-load-blame', + 16 => 'differential-inline-comment-editor', + 17 => 'javelin-behavior-differential-dropdown-menus', + 18 => 'javelin-behavior-differential-toggle-files', + 19 => 'javelin-behavior-differential-user-select', ), - 'uri' => '/res/pkg/d2447f72/differential.pkg.js', + 'uri' => '/res/pkg/322728f3/differential.pkg.js', 'type' => 'js', ), 'c8ce2d88' => @@ -3724,7 +3737,7 @@ celerity_register_resource_map(array( 'aphront-typeahead-control-css' => '09aa1f68', 'differential-changeset-view-css' => '8aaacd1b', 'differential-core-view-css' => '8aaacd1b', - 'differential-inline-comment-editor' => 'd2447f72', + 'differential-inline-comment-editor' => '322728f3', 'differential-local-commits-view-css' => '8aaacd1b', 'differential-results-table-css' => '8aaacd1b', 'differential-revision-add-comment-css' => '8aaacd1b', @@ -3742,24 +3755,24 @@ celerity_register_resource_map(array( 'javelin-behavior-aphlict-dropdown' => 'f24c209c', 'javelin-behavior-aphlict-listen' => 'f24c209c', 'javelin-behavior-aphront-basic-tokenizer' => 'f24c209c', - 'javelin-behavior-aphront-drag-and-drop' => 'd2447f72', - 'javelin-behavior-aphront-drag-and-drop-textarea' => 'd2447f72', + 'javelin-behavior-aphront-drag-and-drop' => '322728f3', + 'javelin-behavior-aphront-drag-and-drop-textarea' => '322728f3', 'javelin-behavior-aphront-form-disable-on-submit' => 'f24c209c', 'javelin-behavior-audit-preview' => 'f96657b8', 'javelin-behavior-dark-console' => 'dca4a03d', 'javelin-behavior-device' => 'f24c209c', - 'javelin-behavior-differential-accept-with-errors' => 'd2447f72', - 'javelin-behavior-differential-add-reviewers-and-ccs' => 'd2447f72', - 'javelin-behavior-differential-comment-jump' => 'd2447f72', - 'javelin-behavior-differential-diff-radios' => 'd2447f72', - 'javelin-behavior-differential-dropdown-menus' => 'd2447f72', - 'javelin-behavior-differential-edit-inline-comments' => 'd2447f72', - 'javelin-behavior-differential-feedback-preview' => 'd2447f72', - 'javelin-behavior-differential-keyboard-navigation' => 'd2447f72', - 'javelin-behavior-differential-populate' => 'd2447f72', - 'javelin-behavior-differential-show-more' => 'd2447f72', - 'javelin-behavior-differential-toggle-files' => 'd2447f72', - 'javelin-behavior-differential-user-select' => 'd2447f72', + 'javelin-behavior-differential-accept-with-errors' => '322728f3', + 'javelin-behavior-differential-add-reviewers-and-ccs' => '322728f3', + 'javelin-behavior-differential-comment-jump' => '322728f3', + 'javelin-behavior-differential-diff-radios' => '322728f3', + 'javelin-behavior-differential-dropdown-menus' => '322728f3', + 'javelin-behavior-differential-edit-inline-comments' => '322728f3', + 'javelin-behavior-differential-feedback-preview' => '322728f3', + 'javelin-behavior-differential-keyboard-navigation' => '322728f3', + 'javelin-behavior-differential-populate' => '322728f3', + 'javelin-behavior-differential-show-more' => '322728f3', + 'javelin-behavior-differential-toggle-files' => '322728f3', + 'javelin-behavior-differential-user-select' => '322728f3', 'javelin-behavior-diffusion-commit-graph' => 'f96657b8', 'javelin-behavior-diffusion-pull-lastmodified' => 'f96657b8', 'javelin-behavior-error-log' => 'dca4a03d', @@ -3767,6 +3780,7 @@ celerity_register_resource_map(array( 'javelin-behavior-history-install' => 'f24c209c', 'javelin-behavior-konami' => 'f24c209c', 'javelin-behavior-lightbox-attachments' => 'f24c209c', + 'javelin-behavior-load-blame' => '322728f3', 'javelin-behavior-maniphest-batch-selector' => '7707de41', 'javelin-behavior-maniphest-subpriority-editor' => '7707de41', 'javelin-behavior-maniphest-transaction-controls' => '7707de41', @@ -3776,7 +3790,7 @@ celerity_register_resource_map(array( 'javelin-behavior-phabricator-autofocus' => 'f24c209c', 'javelin-behavior-phabricator-keyboard-shortcuts' => 'f24c209c', 'javelin-behavior-phabricator-nav' => 'f24c209c', - 'javelin-behavior-phabricator-object-selector' => 'd2447f72', + 'javelin-behavior-phabricator-object-selector' => '322728f3', 'javelin-behavior-phabricator-oncopy' => 'f24c209c', 'javelin-behavior-phabricator-remarkup-assist' => 'f24c209c', 'javelin-behavior-phabricator-reveal-content' => 'f24c209c', @@ -3784,7 +3798,7 @@ celerity_register_resource_map(array( 'javelin-behavior-phabricator-tooltips' => 'f24c209c', 'javelin-behavior-phabricator-watch-anchor' => 'f24c209c', 'javelin-behavior-refresh-csrf' => 'f24c209c', - 'javelin-behavior-repository-crossreference' => 'd2447f72', + 'javelin-behavior-repository-crossreference' => '322728f3', 'javelin-behavior-toggle-class' => 'f24c209c', 'javelin-behavior-workflow' => 'f24c209c', 'javelin-dom' => 'cd1d650a', @@ -3814,7 +3828,7 @@ celerity_register_resource_map(array( 'phabricator-core-css' => '09aa1f68', 'phabricator-crumbs-view-css' => '09aa1f68', 'phabricator-directory-css' => '09aa1f68', - 'phabricator-drag-and-drop-file-upload' => 'd2447f72', + 'phabricator-drag-and-drop-file-upload' => '322728f3', 'phabricator-dropdown-menu' => 'f24c209c', 'phabricator-file-upload' => 'f24c209c', 'phabricator-filetree-view-css' => '09aa1f68', @@ -3836,7 +3850,7 @@ celerity_register_resource_map(array( 'phabricator-prefab' => 'f24c209c', 'phabricator-project-tag-css' => 'e30a3fa8', 'phabricator-remarkup-css' => '09aa1f68', - 'phabricator-shaped-request' => 'd2447f72', + 'phabricator-shaped-request' => '322728f3', 'phabricator-side-menu-view-css' => '09aa1f68', 'phabricator-standard-page-view' => '09aa1f68', 'phabricator-textareautils' => 'f24c209c', diff --git a/src/applications/diffusion/controller/DiffusionBrowseFileController.php b/src/applications/diffusion/controller/DiffusionBrowseFileController.php index cb285fda77..076e041a69 100644 --- a/src/applications/diffusion/controller/DiffusionBrowseFileController.php +++ b/src/applications/diffusion/controller/DiffusionBrowseFileController.php @@ -35,7 +35,10 @@ final class DiffusionBrowseFileController extends DiffusionController { ->setURI($request->getRequestURI()->alter('view', $selected)); } - $needs_blame = ($selected == 'blame' || $selected == 'plainblame'); + $needs_blame = ($selected == 'plainblame'); + if ($selected == 'blame' && $request->isAjax()) { + $needs_blame = true; + } $file_query = DiffusionFileContentQuery::newFromDiffusionRequest( $this->diffusionRequest); @@ -59,6 +62,10 @@ final class DiffusionBrowseFileController extends DiffusionController { $path, $data); + if ($request->isAjax()) { + return id(new AphrontAjaxResponse())->setContent($corpus); + } + require_celerity_resource('diffusion-source-css'); if ($this->corpusType == 'text') { @@ -229,6 +236,18 @@ final class DiffusionBrowseFileController extends DiffusionController { $rows = $this->buildDisplayRows($text_list, $rev_list, $blame_dict, $needs_blame, $drequest, $file_query, $selected); + $corpus_table = javelin_tag( + 'table', + array( + 'class' => "diffusion-source remarkup-code PhabricatorMonospaced", + 'sigil' => 'diffusion-source', + ), + $rows); + + if ($this->getRequest()->isAjax()) { + return $corpus_table; + } + $id = celerity_generate_unique_node_id(); $projects = $drequest->loadArcanistProjects(); @@ -260,14 +279,6 @@ final class DiffusionBrowseFileController extends DiffusionController { )); } - $corpus_table = javelin_tag( - 'table', - array( - 'class' => "diffusion-source remarkup-code PhabricatorMonospaced", - 'sigil' => 'diffusion-source', - ), - $rows); - $corpus = phutil_tag( 'div', array( @@ -276,6 +287,8 @@ final class DiffusionBrowseFileController extends DiffusionController { ), $corpus_table); + Javelin::initBehavior('load-blame', array('id' => $id)); + break; } @@ -449,7 +462,6 @@ final class DiffusionBrowseFileController extends DiffusionController { $color = null; foreach ($text_list as $k => $line) { $display_line = array( - 'color' => null, 'epoch' => null, 'commit' => null, 'author' => null, @@ -459,7 +471,7 @@ final class DiffusionBrowseFileController extends DiffusionController { 'data' => $line, ); - if ($needs_blame) { + if ($selected == 'blame') { // If the line's rev is same as the line above, show empty content // with same color; otherwise generate blame info. The newer a change // is, the more saturated the color. @@ -568,7 +580,7 @@ final class DiffusionBrowseFileController extends DiffusionController { $rows = $this->renderInlines( idx($inlines, 0, array()), - $needs_blame, + ($selected == 'blame'), $engine); foreach ($display as $line) { @@ -581,8 +593,11 @@ final class DiffusionBrowseFileController extends DiffusionController { )); $blame = array(); - if ($line['color']) { - $color = $line['color']; + $style = null; + if (array_key_exists('color', $line)) { + if ($line['color']) { + $style = 'background: '.$line['color'].';'; + } $before_link = null; $commit_link = null; @@ -667,7 +682,7 @@ final class DiffusionBrowseFileController extends DiffusionController { 'th', array( 'class' => 'diffusion-blame-link', - 'style' => 'background: '.$color, + 'style' => $style, ), $before_link); @@ -675,7 +690,7 @@ final class DiffusionBrowseFileController extends DiffusionController { 'th', array( 'class' => 'diffusion-rev-link', - 'style' => 'background: '.$color, + 'style' => $style, ), $commit_link); @@ -683,7 +698,7 @@ final class DiffusionBrowseFileController extends DiffusionController { 'th', array( 'class' => 'diffusion-rev-link', - 'style' => 'background: '.$color, + 'style' => $style, ), $revision_link); @@ -691,7 +706,7 @@ final class DiffusionBrowseFileController extends DiffusionController { 'th', array( 'class' => 'diffusion-author-link', - 'style' => 'background: '.$color, + 'style' => $style, ), idx($line, 'author')); } @@ -708,7 +723,7 @@ final class DiffusionBrowseFileController extends DiffusionController { array( 'class' => 'diffusion-line-link', 'sigil' => 'diffusion-line-link', - 'style' => isset($color) ? 'background: '.$color : null, + 'style' => $style, ), $line_link); @@ -753,7 +768,7 @@ final class DiffusionBrowseFileController extends DiffusionController { $rows = array_merge($rows, $this->renderInlines( idx($inlines, $line['line'], array()), - $needs_blame, + ($selected == 'blame'), $engine)); } diff --git a/webroot/rsrc/css/application/diffusion/diffusion-source.css b/webroot/rsrc/css/application/diffusion/diffusion-source.css index 1611c3c21a..ce8def486e 100644 --- a/webroot/rsrc/css/application/diffusion/diffusion-source.css +++ b/webroot/rsrc/css/application/diffusion/diffusion-source.css @@ -45,6 +45,18 @@ white-space: nowrap; } +.diffusion-blame-link { + min-width: 25px; +} + +.diffusion-rev-link { + min-width: 90px; +} + +.diffusion-author-link { + min-width: 120px; +} + .diffusion-blame-link a, .diffusion-rev-link a, .diffusion-author-link a, diff --git a/webroot/rsrc/js/application/diffusion/behavior-load-blame.js b/webroot/rsrc/js/application/diffusion/behavior-load-blame.js new file mode 100644 index 0000000000..bebafc8886 --- /dev/null +++ b/webroot/rsrc/js/application/diffusion/behavior-load-blame.js @@ -0,0 +1,14 @@ +/** + * @provides javelin-behavior-load-blame + * @requires javelin-behavior + * javelin-dom + * javelin-request + */ + +JX.behavior('load-blame', function(config) { + + new JX.Request(location.href, function (response) { + JX.DOM.setContent(JX.$(config.id), JX.$H(response)); + }).send(); + +});