In prose diff dialogs (like "Show Details" in transactions), show "old", "new" and "diff" tabs

Summary:
Ref T7643. When you do something like this:

  - Edit a task description.
  - Click "Show Details" on the resulting transaction.
  - Get a prose diff dialog showing the change.

...now add some "Old" and "New" tabs. These are useful for:

  - reverting to the old text by copy/pasting;
  - reading just the new/old text if the diff is noisy;
  - sometimes just nice to have?

(This looks a little rough but I didn't want to put a negative margin on tab groups inside dialogs? Not sure what the best fix here is.)

Test Plan: {F1909390}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T7643

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

resources/celerity/map.php

@@ -9,10 +9,10 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => 'cea72e09',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '46d588e4',
+    'core.pkg.css' => '4fc9469e',
     'core.pkg.js' => '035325a7',
     'darkconsole.pkg.js' => 'e7393ebb',
-    'differential.pkg.css' => 'e1d704ce',
+    'differential.pkg.css' => 'a4ba74b5',
     'differential.pkg.js' => '634399e9',
     'diffusion.pkg.css' => '91c5d3a6',
     'diffusion.pkg.js' => '84c8f8fd',
@@ -21,7 +21,7 @@ return array(
     'maniphest.pkg.js' => '949a7498',
     'rsrc/css/aphront/aphront-bars.css' => '231ac33c',
     'rsrc/css/aphront/dark-console.css' => 'f54bf286',
-    'rsrc/css/aphront/dialog-view.css' => '593d3f67',
+    'rsrc/css/aphront/dialog-view.css' => '84f1e6a6',
     'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d',
     'rsrc/css/aphront/list-filter-view.css' => '5d6f0526',
     'rsrc/css/aphront/multi-column.css' => '84cc6640',
@@ -60,7 +60,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => 'bc6f2127',
     'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a',
     'rsrc/css/application/differential/add-comment.css' => 'c47f8c40',
-    'rsrc/css/application/differential/changeset-view.css' => '9ef7d354',
+    'rsrc/css/application/differential/changeset-view.css' => 'b158cc46',
     'rsrc/css/application/differential/core.css' => '5b7b8ff4',
     'rsrc/css/application/differential/phui-inline-comment.css' => '5953c28e',
     'rsrc/css/application/differential/revision-comment.css' => '14b8565a',
@@ -552,7 +552,7 @@ return array(
     'almanac-css' => 'dbb9b3af',
     'aphront-bars' => '231ac33c',
     'aphront-dark-console-css' => 'f54bf286',
-    'aphront-dialog-view-css' => '593d3f67',
+    'aphront-dialog-view-css' => '84f1e6a6',
     'aphront-list-filter-view-css' => '5d6f0526',
     'aphront-multi-column-view-css' => '84cc6640',
     'aphront-panel-view-css' => '8427b78d',
@@ -576,7 +576,7 @@ return array(
     'conpherence-thread-manager' => '358c717b',
     'conpherence-transaction-css' => '85129c68',
     'd3' => 'a11a5ff2',
-    'differential-changeset-view-css' => '9ef7d354',
+    'differential-changeset-view-css' => 'b158cc46',
     'differential-core-view-css' => '5b7b8ff4',
     'differential-inline-comment-editor' => '64a5550f',
     'differential-revision-add-comment-css' => 'c47f8c40',
@@ -1733,9 +1733,6 @@ return array(
       'javelin-workflow',
       'javelin-stratcom',
     ),
-    '9ef7d354' => array(
-      'phui-inline-comment-view-css',
-    ),
     '9f36c42d' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -1838,6 +1835,9 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
+    'b158cc46' => array(
+      'phui-inline-comment-view-css',
+    ),
     'b1f0ccee' => array(
       'javelin-install',
       'javelin-dom',

src/applications/transactions/controller/PhabricatorApplicationTransactionDetailController.php

@@ -42,6 +42,7 @@ final class PhabricatorApplicationTransactionDetailController
     return $this->newDialog()
       ->setTitle(pht('Change Details'))
       ->setWidth(AphrontDialogView::WIDTH_FORM)
+      ->setClass('aphront-dialog-tab-group')
       ->appendChild($details)
       ->addCancelButton($cancel_uri, $button_text);
   }

src/applications/transactions/view/PhabricatorApplicationTransactionTextDiffDetailView.php

@@ -122,12 +122,44 @@ final class PhabricatorApplicationTransactionTextDiffDetailView
       }
     }
 
-    return phutil_tag(
+    $diff_view = phutil_tag(
       'div',
       array(
         'class' => 'prose-diff',
       ),
       $result);
+
+    $old_view = phutil_tag(
+      'div',
+      array(
+        'class' => 'prose-diff',
+      ),
+      $this->oldText);
+
+    $new_view = phutil_tag(
+      'div',
+      array(
+        'class' => 'prose-diff',
+      ),
+      $this->newText);
+
+    return id(new PHUITabGroupView())
+      ->addTab(
+        id(new PHUITabView())
+          ->setKey('old')
+          ->setName(pht('Old'))
+          ->appendChild($old_view))
+      ->addTab(
+        id(new PHUITabView())
+          ->setKey('new')
+          ->setName(pht('New'))
+          ->appendChild($new_view))
+      ->addTab(
+        id(new PHUITabView())
+          ->setKey('diff')
+          ->setName(pht('Diff'))
+          ->appendChild($diff_view))
+      ->selectTab('diff');
   }
 
   private function buildDiff() {

webroot/rsrc/css/aphront/dialog-view.css

@@ -165,3 +165,7 @@
 .aphront-dialog-object-list .aphront-dialog-body {
   padding: 0 12px;
 }
+
+.aphront-dialog-tab-group .aphront-dialog-body {
+  padding: 0 12px;
+}

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

@@ -94,6 +94,7 @@
 }
 
 .prose-diff {
+  padding: 12px 0;
   white-space: pre-wrap;
   color: {$greytext};
 }