Clean up image file diffs UI

Summary: Uses AphrontTable now, cleans up interactions. Fixes T5874, Fixes T4910

Test Plan:
tested a large image

{F192585}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Maniphest Tasks: T4910, T5874

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

resources/celerity/map.php

@@ -7,10 +7,10 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '5e4bb6d1',
-    'core.pkg.js' => '7c8455ef',
+    'core.pkg.css' => '740b85f8',
+    'core.pkg.js' => 'f67c8265',
     'darkconsole.pkg.js' => 'df001cab',
-    'differential.pkg.css' => '4a93db37',
+    'differential.pkg.css' => '8f46d832',
     'differential.pkg.js' => 'eb182ccd',
     'diffusion.pkg.css' => '591664fa',
     'diffusion.pkg.js' => 'bfc0737b',
@@ -55,7 +55,7 @@ return array(
     'rsrc/css/application/dashboard/dashboard.css' => 'a2bfdcbf',
     'rsrc/css/application/diff/inline-comment-summary.css' => '8cfd34e8',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
-    'rsrc/css/application/differential/changeset-view.css' => 'ff8eacf8',
+    'rsrc/css/application/differential/changeset-view.css' => 'a6626a0c',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
     'rsrc/css/application/differential/results-table.css' => '239924f9',
     'rsrc/css/application/differential/revision-comment.css' => '48186045',
@@ -104,7 +104,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '40151074',
-    'rsrc/css/core/remarkup.css' => '7fd5585f',
+    'rsrc/css/core/remarkup.css' => 'da8f5d5b',
     'rsrc/css/core/syntax.css' => '863f3cd8',
     'rsrc/css/core/z-index.css' => '44e1d311',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -447,7 +447,7 @@ return array(
     'rsrc/js/core/Notification.js' => '0c6946e7',
     'rsrc/js/core/Prefab.js' => 'bbae734c',
     'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
-    'rsrc/js/core/TextAreaUtils.js' => 'b3ec3cfc',
+    'rsrc/js/core/TextAreaUtils.js' => '5c93c52c',
     'rsrc/js/core/ToolTip.js' => '3915d490',
     'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
     'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
@@ -520,7 +520,7 @@ return array(
     'conpherence-notification-css' => '04a6e10a',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => 'bf275a6c',
-    'differential-changeset-view-css' => 'ff8eacf8',
+    'differential-changeset-view-css' => 'a6626a0c',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'f2441746',
     'differential-results-table-css' => '239924f9',
@@ -732,14 +732,14 @@ return array(
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => 'bbae734c',
     'phabricator-profile-css' => 'b459416e',
-    'phabricator-remarkup-css' => '7fd5585f',
+    'phabricator-remarkup-css' => 'da8f5d5b',
     'phabricator-search-results-css' => 'f240504c',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => 'a2ccd7bd',
     'phabricator-slowvote-css' => '266df6a1',
     'phabricator-source-code-view-css' => '7d346aa4',
     'phabricator-standard-page-view' => '517cdfb1',
-    'phabricator-textareautils' => 'b3ec3cfc',
+    'phabricator-textareautils' => '5c93c52c',
     'phabricator-tooltip' => '3915d490',
     'phabricator-transaction-view-css' => '5d0cae25',
     'phabricator-ui-example-css' => '528b19de',
@@ -1194,6 +1194,11 @@ return array(
       'javelin-stratcom',
       'javelin-dom',
     ),
+    '5c93c52c' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-vector',
+    ),
     '5fefb143' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1553,9 +1558,6 @@ return array(
     'b3e7d692' => array(
       'javelin-install',
     ),
-    'b3ec3cfc' => array(
-      'javelin-install',
-    ),
     'b42eddc7' => array(
       'javelin-install',
       'javelin-dom',

src/applications/differential/render/DifferentialChangesetHTMLRenderer.php

@@ -325,26 +325,31 @@ abstract class DifferentialChangesetHTMLRenderer
 
         $readable_key = idx($key_map, $key, $key);
 
-        $rows[] = phutil_tag('tr', array(), array(
-          phutil_tag('th', array(), $readable_key),
-          phutil_tag('td', array('class' => 'oval'), $oval),
-          phutil_tag('td', array('class' => 'nval'), $nval),
-        ));
+        $row = array(
+          $readable_key,
+          $oval,
+          $nval
+        );
+        $rows[] = $row;
+
       }
     }
 
-    array_unshift(
-      $rows,
-      phutil_tag('tr', array('class' => 'property-table-header'), array(
-        phutil_tag('th', array(), pht('Property Changes')),
-        phutil_tag('td', array('class' => 'oval'), pht('Old Value')),
-        phutil_tag('td', array('class' => 'nval'), pht('New Value')),
-      )));
-
+    $classes = array('', 'oval', 'nval');
+    $headers = array(
+      pht('Property'),
+      pht('Old Value'),
+      pht('New Value'),
+    );
+    $table = id(new AphrontTableView($rows))
+      ->setHeaders($headers)
+      ->setColumnClasses($classes);
     return phutil_tag(
-      'table',
-      array('class' => 'differential-property-table'),
-      $rows);
+      'div',
+      array(
+        'class' => 'differential-property-table',
+      ),
+      $table);
   }
 
   public function renderShield($message, $force = 'default') {

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

@@ -212,6 +212,14 @@ td.cov-I {
   background-image: url(/rsrc/image/checker_dark.png);
 }
 
+.differential-diff .differential-image-diff td {
+  padding: 8px;
+}
+
+.differential-image-stage {
+  overflow: scroll;
+}
+
 .differential-meta-notice {
   border-top: 1px solid {$yellow};
   border-bottom: 1px solid {$yellow};
@@ -324,51 +332,24 @@ td.cov-I {
 }
 
 .differential-property-table {
-  width: auto;
-  margin: 12px auto;
-  background: #e3e3e3;
-}
-
-.differential-property-table th {
-  text-align: right;
-  width: 10em;
-  font-weight: bold;
-  color: {$greytext};
-  white-space: nowrap;
-  padding: 4px 8px;
-  border-right: 1px solid {$greytext};
-}
-
-.differential-property-table td {
-  padding: 4px 8px;
-  width: 35em;
+  margin: 12px;
+  background: {$lightgreybackground};
+  border: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$blueborder};
 }
 
 .differential-property-table td em {
   color: {$lightgreytext};
 }
 
-.differential-property-table tr.property-table-header th,
-.differential-property-table tr.property-table-header td {
-  text-align: center;
-  font-weight: bold;
-  border-bottom: 1px solid {$greytext};
-}
-
 .differential-property-table td.oval {
   background: #ffd0d0;
+  width: 50%;
 }
 
 .differential-property-table td.nval {
   background: #d0ffd0;
-}
-
-.differential-property-table tr.property-table-header td.oval {
-  background: #ffaaaa;
-}
-
-.differential-property-table tr.property-table-header td.nval {
-  background: #aaffaa;
+  width: 50%;
 }
 
 .differential-inline-undo {