In Jupyter notebooks, apply intraline diffing to source code lines

Summary: Ref T13425. When we render a diff between two source lines, highlight intraline changes.

Test Plan: Viewed a Jupyter notebook with a code diff in it, saw the changed subsequences in the line highlighted.

Maniphest Tasks: T13425

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

resources/celerity/map.php

@@ -9,7 +9,7 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '3c8a0668',
     'conpherence.pkg.js' => '020aebcf',
-    'core.pkg.css' => '7ce5a944',
+    'core.pkg.css' => '88366522',
     'core.pkg.js' => '6e5c894f',
     'differential.pkg.css' => '607c84be',
     'differential.pkg.js' => 'a0212a0b',
@@ -169,7 +169,7 @@ return array(
     'rsrc/css/phui/phui-pager.css' => 'd022c7ad',
     'rsrc/css/phui/phui-pinboard-view.css' => '1f08f5d8',
     'rsrc/css/phui/phui-policy-section-view.css' => '139fdc64',
-    'rsrc/css/phui/phui-property-list-view.css' => '807b1632',
+    'rsrc/css/phui/phui-property-list-view.css' => '9c477af1',
     'rsrc/css/phui/phui-remarkup-preview.css' => '91767007',
     'rsrc/css/phui/phui-segment-bar-view.css' => '5166b370',
     'rsrc/css/phui/phui-spacing.css' => 'b05cadc3',
@@ -865,7 +865,7 @@ return array(
     'phui-pager-css' => 'd022c7ad',
     'phui-pinboard-view-css' => '1f08f5d8',
     'phui-policy-section-view-css' => '139fdc64',
-    'phui-property-list-view-css' => '807b1632',
+    'phui-property-list-view-css' => '9c477af1',
     'phui-remarkup-preview-css' => '91767007',
     'phui-segment-bar-view-css' => '5166b370',
     'phui-spacing-css' => 'b05cadc3',

src/applications/files/document/PhabricatorJupyterDocumentEngine.php

@@ -93,6 +93,54 @@ final class PhabricatorJupyterDocumentEngine
           $u_content = $this->newCellContainer($u_content);
           $v_content = $this->newCellContainer($v_content);
 
+          return id(new PhabricatorDocumentEngineBlockDiff())
+            ->setOldContent($u_content)
+            ->addOldClass('old')
+            ->setNewContent($v_content)
+            ->addNewClass('new');
+        case 'code/line':
+          $usource = idx($ucell, 'raw');
+          $vsource = idx($vcell, 'raw');
+          $udisplay = idx($ucell, 'display');
+          $vdisplay = idx($vcell, 'display');
+          $ulabel = idx($ucell, 'label');
+          $vlabel = idx($vcell, 'label');
+
+          $intraline_segments = ArcanistDiffUtils::generateIntralineDiff(
+            $usource,
+            $vsource);
+
+          $u_segments = array();
+          foreach ($intraline_segments[0] as $u_segment) {
+            $u_segments[] = $u_segment;
+          }
+
+          $v_segments = array();
+          foreach ($intraline_segments[1] as $v_segment) {
+            $v_segments[] = $v_segment;
+          }
+
+          $usource = ArcanistDiffUtils::applyIntralineDiff(
+            $udisplay,
+            $u_segments);
+
+          $vsource = ArcanistDiffUtils::applyIntralineDiff(
+            $vdisplay,
+            $v_segments);
+
+          $u_content = $this->newCodeLineCell($ucell, $usource);
+          $v_content = $this->newCodeLineCell($vcell, $vsource);
+
+          $classes = array(
+            'jupyter-cell-flush',
+          );
+
+          $u_content = $this->newJupyterCell($ulabel, $u_content, $classes);
+          $v_content = $this->newJupyterCell($vlabel, $v_content, $classes);
+
+          $u_content = $this->newCellContainer($u_content);
+          $v_content = $this->newCellContainer($v_content);
+
           return id(new PhabricatorDocumentEngineBlockDiff())
             ->setOldContent($u_content)
             ->addOldClass('old')
@@ -441,8 +489,10 @@ final class PhabricatorJupyterDocumentEngine
         return $this->newCodeOutputCell($cell);
     }
 
-    return $this->newRawCell(id(new PhutilJSON())
+    $json_content = id(new PhutilJSON())
-      ->encodeFormatted($cell));
+      ->encodeFormatted($cell);
+
+    return $this->newRawCell($json_content);
   }
 
   private function newRawCell($content) {
@@ -514,7 +564,7 @@ final class PhabricatorJupyterDocumentEngine
     );
   }
 
-  private function newCodeLineCell(array $cell) {
+  private function newCodeLineCell(array $cell, $content = null) {
     $classes = array();
     $classes[] = 'PhabricatorMonospaced';
     $classes[] = 'remarkup-code';
@@ -531,6 +581,10 @@ final class PhabricatorJupyterDocumentEngine
 
     $classes = implode(' ', $classes);
 
+    if ($content === null) {
+      $content = $cell['display'];
+    }
+
     return array(
       $cell['label'],
       array(
@@ -540,7 +594,7 @@ final class PhabricatorJupyterDocumentEngine
             'class' => $classes,
           ),
           array(
-            $cell['display'],
+            $content,
           )),
       ),
     );

webroot/rsrc/css/phui/phui-property-list-view.css

@@ -316,12 +316,12 @@ div.phui-property-list-stacked .phui-property-list-properties
 }
 
 td.new .jupyter-cell-code-line {
-  background: {$new-background};
+  background: rgba(255, 255, 255, 0.5);
   border-color: {$new-bright};
 }
 
 td.old .jupyter-cell-code-line {
-  background: {$old-background};
+  background: rgba(255, 255, 255, 0.5);
   border-color: {$old-bright};
 }