Render sometimes-legible prose diffs in the Phabricator UI

Summary:
Ref T3353. This hooks the prose engine up to the UI and throws away the hard-wrapping hacks.

These are likely still very rough in many cases, but are hopefully a big step forward from the old version in the vast majority of cases.

Test Plan: {F1677809}

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T3353

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

resources/celerity/map.php

@@ -10,7 +10,7 @@ return array(
     'core.pkg.css' => '8aeacc63',
     'core.pkg.js' => '3f15fa62',
     'darkconsole.pkg.js' => 'e7393ebb',
-    'differential.pkg.css' => 'a3a7e5df',
+    'differential.pkg.css' => 'f5569f20',
     'differential.pkg.js' => '4b7d8f19',
     'diffusion.pkg.css' => '91c5d3a6',
     'diffusion.pkg.js' => '3a9a8bfa',
@@ -57,7 +57,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' => 'febd2372',
+    'rsrc/css/application/differential/changeset-view.css' => '3f49a4bd',
     '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(
     'conpherence-update-css' => 'faf6be09',
     'conpherence-widget-pane-css' => '775eaaba',
     'd3' => 'a11a5ff2',
-    'differential-changeset-view-css' => 'febd2372',
+    'differential-changeset-view-css' => '3f49a4bd',
     'differential-core-view-css' => '5b7b8ff4',
     'differential-inline-comment-editor' => '64a5550f',
     'differential-revision-add-comment-css' => 'c47f8c40',
@@ -1157,6 +1157,9 @@ return array(
       'javelin-util',
       'javelin-uri',
     ),
+    '3f49a4bd' => array(
+      'phui-inline-comment-view-css',
+    ),
     '3f5d6dbf' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -2200,9 +2203,6 @@ return array(
     'fea0eb47' => array(
       'javelin-install',
     ),
-    'febd2372' => array(
-      'phui-inline-comment-view-css',
-    ),
   ),
   'packages' => array(
     'core.pkg.css' => array(

src/applications/transactions/controller/PhabricatorApplicationTransactionDetailController.php

@@ -24,8 +24,7 @@ final class PhabricatorApplicationTransactionDetailController
 
     return $this->newDialog()
       ->setTitle(pht('Change Details'))
-      ->setWidth(AphrontDialogView::WIDTH_FULL)
-      ->setFlush(true)
+      ->setWidth(AphrontDialogView::WIDTH_FORM)
       ->appendChild($details)
       ->addCancelButton($cancel_uri);
   }

src/applications/transactions/view/PhabricatorApplicationTransactionTextDiffDetailView.php

@@ -17,41 +17,48 @@ final class PhabricatorApplicationTransactionTextDiffDetailView
   }
 
   public function render() {
-    $old = $this->oldText;
-    $new = $this->newText;
+    $diff = $this->buildDiff();
 
-    // TODO: On mobile, or perhaps by default, we should switch to 1-up once
-    // that is built.
+    require_celerity_resource('differential-changeset-view-css');
 
-    if (strlen($old)) {
-      $old = phutil_utf8_hard_wrap($old, 80);
-      $old = implode("\n", $old)."\n";
+    $result = array();
+    foreach ($diff->getParts() as $part) {
+      $type = $part['type'];
+      $text = $part['text'];
+      switch ($type) {
+        case '-':
+          $result[] = phutil_tag(
+            'span',
+            array(
+              'class' => 'old',
+            ),
+            $text);
+          break;
+        case '+':
+          $result[] = phutil_tag(
+            'span',
+            array(
+              'class' => 'new',
+            ),
+            $text);
+          break;
+        case '=':
+          $result[] = $text;
+          break;
+      }
     }
 
-    if (strlen($new)) {
-      $new = phutil_utf8_hard_wrap($new, 80);
-      $new = implode("\n", $new)."\n";
-    }
+    return phutil_tag(
+      'div',
+      array(
+        'class' => 'prose-diff',
+      ),
+      $result);
+  }
 
-    try {
-      $engine = new PhabricatorDifferenceEngine();
-      $changeset = $engine->generateChangesetFromFileContent($old, $new);
-
-      $whitespace_mode = DifferentialChangesetParser::WHITESPACE_SHOW_ALL;
-
-      $markup_engine = new PhabricatorMarkupEngine();
-      $markup_engine->setViewer($this->getUser());
-
-      $parser = new DifferentialChangesetParser();
-      $parser->setUser($this->getUser());
-      $parser->setChangeset($changeset);
-      $parser->setMarkupEngine($markup_engine);
-      $parser->setWhitespaceMode($whitespace_mode);
-
-      return $parser->render(0, PHP_INT_MAX, array());
-    } catch (Exception $ex) {
-      return $ex->getMessage();
-    }
+  private function buildDiff() {
+    $engine = new PhutilProseDifferenceEngine();
+    return $engine->getDiff($this->oldText, $this->newText);
   }
 
 }

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

@@ -93,6 +93,19 @@
   user-select: none;
 }
 
+.prose-diff span.old,
+.prose-diff span.new {
+  padding: 0 2px;
+}
+
+.prose-diff span.old {
+  color: {$redtext};
+}
+
+.prose-diff span.new {
+  color: {$greentext};
+}
+
 .differential-diff th.selected {
   background-color: {$sh-yellowbackground};
 }
@@ -118,12 +131,14 @@
 }
 
 .differential-diff td.old-full,
-.differential-diff td.old span.bright {
+.differential-diff td.old span.bright,
+.prose-diff span.old {
   background: rgba(251, 175, 175, .7);
 }
 
 .differential-diff td.new-full,
-.differential-diff td.new span.bright {
+.differential-diff td.new span.bright,
+.prose-diff span.new {
   background: rgba(151, 234, 151, .6);
 }