Differential - add an undo element when you collapse a file

Summary: Fixes T2258.

Test Plan: collapsed and expanded file via the dropdown - good stuff. got the "undo" element into the mix - also good stuff.

Reviewers: epriestley

Reviewed By: epriestley

CC: chad, Korvin, aran

Maniphest Tasks: T2258

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

src/__celerity_resource_map__.php

@@ -1026,7 +1026,7 @@ celerity_register_resource_map(array(
   ),
   'differential-changeset-view-css' =>
   array(
-    'uri' => '/res/8ee213f4/rsrc/css/application/differential/changeset-view.css',
+    'uri' => '/res/b8e183f8/rsrc/css/application/differential/changeset-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -1617,13 +1617,14 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-differential-toggle-files' =>
   array(
-    'uri' => '/res/ae937207/rsrc/js/application/differential/behavior-toggle-files.js',
+    'uri' => '/res/2b266946/rsrc/js/application/differential/behavior-toggle-files.js',
     'type' => 'js',
     'requires' =>
     array(
       0 => 'javelin-behavior',
       1 => 'javelin-dom',
       2 => 'javelin-stratcom',
+      3 => 'phabricator-phtize',
     ),
     'disk' => '/rsrc/js/application/differential/behavior-toggle-files.js',
   ),
@@ -4279,7 +4280,7 @@ celerity_register_resource_map(array(
       'uri' => '/res/pkg/4ccfeb47/darkconsole.pkg.js',
       'type' => 'js',
     ),
-    'dd27a69b' =>
+    '09216861' =>
     array(
       'name' => 'differential.pkg.css',
       'symbols' =>
@@ -4298,10 +4299,10 @@ celerity_register_resource_map(array(
         11 => 'differential-local-commits-view-css',
         12 => 'inline-comment-summary-css',
       ),
-      'uri' => '/res/pkg/dd27a69b/differential.pkg.css',
+      'uri' => '/res/pkg/09216861/differential.pkg.css',
       'type' => 'css',
     ),
-    '48040be9' =>
+    '025bdd77' =>
     array(
       'name' => 'differential.pkg.js',
       'symbols' =>
@@ -4326,7 +4327,7 @@ celerity_register_resource_map(array(
         17 => 'javelin-behavior-differential-toggle-files',
         18 => 'javelin-behavior-differential-user-select',
       ),
-      'uri' => '/res/pkg/48040be9/differential.pkg.js',
+      'uri' => '/res/pkg/025bdd77/differential.pkg.js',
       'type' => 'js',
     ),
     'c8ce2d88' =>
@@ -4420,43 +4421,43 @@ celerity_register_resource_map(array(
     'aphront-tokenizer-control-css' => '638c9d42',
     'aphront-tooltip-css' => '638c9d42',
     'aphront-typeahead-control-css' => '638c9d42',
-    'differential-changeset-view-css' => 'dd27a69b',
-    'differential-core-view-css' => 'dd27a69b',
-    'differential-inline-comment-editor' => '48040be9',
-    'differential-local-commits-view-css' => 'dd27a69b',
-    'differential-results-table-css' => 'dd27a69b',
-    'differential-revision-add-comment-css' => 'dd27a69b',
-    'differential-revision-comment-css' => 'dd27a69b',
-    'differential-revision-comment-list-css' => 'dd27a69b',
-    'differential-revision-history-css' => 'dd27a69b',
-    'differential-revision-list-css' => 'dd27a69b',
-    'differential-table-of-contents-css' => 'dd27a69b',
+    'differential-changeset-view-css' => '09216861',
+    'differential-core-view-css' => '09216861',
+    'differential-inline-comment-editor' => '025bdd77',
+    'differential-local-commits-view-css' => '09216861',
+    'differential-results-table-css' => '09216861',
+    'differential-revision-add-comment-css' => '09216861',
+    'differential-revision-comment-css' => '09216861',
+    'differential-revision-comment-list-css' => '09216861',
+    'differential-revision-history-css' => '09216861',
+    'differential-revision-list-css' => '09216861',
+    'differential-table-of-contents-css' => '09216861',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
     'global-drag-and-drop-css' => '638c9d42',
-    'inline-comment-summary-css' => 'dd27a69b',
+    'inline-comment-summary-css' => '09216861',
     'javelin-aphlict' => '4f81c788',
     'javelin-behavior' => '2dbbb7d1',
     'javelin-behavior-aphlict-dropdown' => '4f81c788',
     'javelin-behavior-aphlict-listen' => '4f81c788',
     'javelin-behavior-aphront-basic-tokenizer' => '4f81c788',
-    'javelin-behavior-aphront-drag-and-drop-textarea' => '48040be9',
+    'javelin-behavior-aphront-drag-and-drop-textarea' => '025bdd77',
     'javelin-behavior-aphront-form-disable-on-submit' => '4f81c788',
     'javelin-behavior-audit-preview' => '96909266',
     'javelin-behavior-dark-console' => '4ccfeb47',
     'javelin-behavior-device' => '4f81c788',
-    'javelin-behavior-differential-accept-with-errors' => '48040be9',
-    'javelin-behavior-differential-add-reviewers-and-ccs' => '48040be9',
-    'javelin-behavior-differential-comment-jump' => '48040be9',
-    'javelin-behavior-differential-diff-radios' => '48040be9',
-    'javelin-behavior-differential-dropdown-menus' => '48040be9',
-    'javelin-behavior-differential-edit-inline-comments' => '48040be9',
-    'javelin-behavior-differential-feedback-preview' => '48040be9',
-    'javelin-behavior-differential-keyboard-navigation' => '48040be9',
-    'javelin-behavior-differential-populate' => '48040be9',
-    'javelin-behavior-differential-show-more' => '48040be9',
-    'javelin-behavior-differential-toggle-files' => '48040be9',
-    'javelin-behavior-differential-user-select' => '48040be9',
+    'javelin-behavior-differential-accept-with-errors' => '025bdd77',
+    'javelin-behavior-differential-add-reviewers-and-ccs' => '025bdd77',
+    'javelin-behavior-differential-comment-jump' => '025bdd77',
+    'javelin-behavior-differential-diff-radios' => '025bdd77',
+    'javelin-behavior-differential-dropdown-menus' => '025bdd77',
+    'javelin-behavior-differential-edit-inline-comments' => '025bdd77',
+    'javelin-behavior-differential-feedback-preview' => '025bdd77',
+    'javelin-behavior-differential-keyboard-navigation' => '025bdd77',
+    'javelin-behavior-differential-populate' => '025bdd77',
+    'javelin-behavior-differential-show-more' => '025bdd77',
+    'javelin-behavior-differential-toggle-files' => '025bdd77',
+    'javelin-behavior-differential-user-select' => '025bdd77',
     'javelin-behavior-diffusion-commit-graph' => '96909266',
     'javelin-behavior-diffusion-pull-lastmodified' => '96909266',
     'javelin-behavior-error-log' => '4ccfeb47',
@@ -4464,7 +4465,7 @@ celerity_register_resource_map(array(
     'javelin-behavior-history-install' => '4f81c788',
     'javelin-behavior-konami' => '4f81c788',
     'javelin-behavior-lightbox-attachments' => '4f81c788',
-    'javelin-behavior-load-blame' => '48040be9',
+    'javelin-behavior-load-blame' => '025bdd77',
     'javelin-behavior-maniphest-batch-selector' => '98f64f07',
     'javelin-behavior-maniphest-subpriority-editor' => '98f64f07',
     'javelin-behavior-maniphest-transaction-controls' => '98f64f07',
@@ -4476,7 +4477,7 @@ celerity_register_resource_map(array(
     'javelin-behavior-phabricator-hovercards' => '4f81c788',
     'javelin-behavior-phabricator-keyboard-shortcuts' => '4f81c788',
     'javelin-behavior-phabricator-nav' => '4f81c788',
-    'javelin-behavior-phabricator-object-selector' => '48040be9',
+    'javelin-behavior-phabricator-object-selector' => '025bdd77',
     'javelin-behavior-phabricator-oncopy' => '4f81c788',
     'javelin-behavior-phabricator-remarkup-assist' => '4f81c788',
     'javelin-behavior-phabricator-reveal-content' => '4f81c788',
@@ -4484,7 +4485,7 @@ celerity_register_resource_map(array(
     'javelin-behavior-phabricator-tooltips' => '4f81c788',
     'javelin-behavior-phabricator-watch-anchor' => '4f81c788',
     'javelin-behavior-refresh-csrf' => '4f81c788',
-    'javelin-behavior-repository-crossreference' => '48040be9',
+    'javelin-behavior-repository-crossreference' => '025bdd77',
     'javelin-behavior-toggle-class' => '4f81c788',
     'javelin-behavior-workflow' => '4f81c788',
     'javelin-dom' => '2dbbb7d1',
@@ -4512,10 +4513,10 @@ celerity_register_resource_map(array(
     'phabricator-action-list-view-css' => '638c9d42',
     'phabricator-application-launch-view-css' => '638c9d42',
     'phabricator-busy' => '4f81c788',
-    'phabricator-content-source-view-css' => 'dd27a69b',
+    'phabricator-content-source-view-css' => '09216861',
     'phabricator-core-css' => '638c9d42',
     'phabricator-crumbs-view-css' => '638c9d42',
-    'phabricator-drag-and-drop-file-upload' => '48040be9',
+    'phabricator-drag-and-drop-file-upload' => '025bdd77',
     'phabricator-dropdown-menu' => '4f81c788',
     'phabricator-file-upload' => '4f81c788',
     'phabricator-filetree-view-css' => '638c9d42',
@@ -4533,13 +4534,13 @@ celerity_register_resource_map(array(
     'phabricator-notification-css' => '638c9d42',
     'phabricator-notification-menu-css' => '638c9d42',
     'phabricator-object-item-list-view-css' => '638c9d42',
-    'phabricator-object-selector-css' => 'dd27a69b',
+    'phabricator-object-selector-css' => '09216861',
     'phabricator-phtize' => '4f81c788',
     'phabricator-prefab' => '4f81c788',
     'phabricator-project-tag-css' => '06bacb9a',
     'phabricator-property-list-view-css' => '638c9d42',
     'phabricator-remarkup-css' => '638c9d42',
-    'phabricator-shaped-request' => '48040be9',
+    'phabricator-shaped-request' => '025bdd77',
     'phabricator-side-menu-view-css' => '638c9d42',
     'phabricator-standard-page-view' => '638c9d42',
     'phabricator-tag-view-css' => '638c9d42',

src/applications/differential/view/DifferentialChangesetListView.php

@@ -107,7 +107,11 @@ final class DifferentialChangesetListView extends AphrontView {
 
     $changesets = $this->changesets;
 
-    Javelin::initBehavior('differential-toggle-files', array());
+    Javelin::initBehavior('differential-toggle-files', array(
+      'pht' => array(
+        'undo' => pht('Undo'),
+        'collapsed' => pht('This file content has been collapsed.'))
+      ));
     Javelin::initBehavior(
       'differential-dropdown-menus',
       array());

webroot/rsrc/css/application/differential/changeset-view.css

@@ -439,3 +439,16 @@ tr.differential-inline-loading {
   text-align: center;
   font-size: 11px;
 }
+
+.differential-collapse-undo {
+  background: #FFE;
+  color: #000;
+  padding: 1em 0em;
+  border: 1px solid #CCA;
+  text-align: center;
+  background-color: #FFE;
+}
+
+.differential-collapse-undo a {
+  font-weight: bold;
+}

webroot/rsrc/js/application/differential/behavior-toggle-files.js

@@ -3,9 +3,11 @@
  * @requires javelin-behavior
  *           javelin-dom
  *           javelin-stratcom
+ *           phabricator-phtize
  */
 
 JX.behavior('differential-toggle-files', function(config) {
+  var pht = JX.phtize(config.pht);
 
   JX.Stratcom.listen(
     'differential-toggle-file',
@@ -14,14 +16,28 @@ JX.behavior('differential-toggle-files', function(config) {
       if (e.getData().diff.length != 1) {
         return;
       }
+
       var diff = e.getData().diff[0],
-          data = JX.Stratcom.getData(diff);
-      if(data.hidden) {
+          data = JX.Stratcom.getData(diff),
+          undo;
+      if (data.hidden) {
         data.hidden = false;
         JX.DOM.show(diff);
+        undo = JX.DOM.find(diff.parentNode,
+                           'div',
+                           'differential-collapse-undo-div');
+        JX.DOM.remove(undo);
       } else {
         data.hidden = true;
         JX.DOM.hide(diff);
+        undo = render_collapse_undo();
+        JX.DOM.listen(undo, 'click', 'differential-collapse-undo', function(e) {
+          e.kill();
+          data.hidden = false;
+          JX.DOM.show(diff);
+          JX.DOM.remove(undo);
+        });
+        JX.DOM.appendContent(diff.parentNode, undo);
       }
       JX.Stratcom.invoke('differential-toggle-file-toggled');
     });
@@ -92,5 +108,19 @@ JX.behavior('differential-toggle-files', function(config) {
         // automatically jump there like we want.
         JX.DOM.scrollTo(target);
       }
-    });
+  });
+
+  var render_collapse_undo = function() {
+    var link = JX.$N(
+      'a',
+      {href: '#', sigil: 'differential-collapse-undo'},
+      pht('undo'));
+
+    return JX.$N(
+      'div',
+      {className: 'differential-collapse-undo',
+       sigil: 'differential-collapse-undo-div'},
+      [pht('collapsed'), ' ', link]);
+  };
+
 });