Break long words in differential two-up view

Summary: This should prevent long lines from making the code width different between files, which can be annoying. (And of course, it stops long lines from making a giant scrollbar too.)

Test Plan:
Loaded this diff in Chrome, Firefox, IE9, and IE8:

{F137505}

(That's a screenshot from Chrome, but it looks about the same in the other browsers.)

Reviewers: chad, #blessed_reviewers, epriestley

Reviewed By: #blessed_reviewers, epriestley

Subscribers: epriestley, Korvin, chad

Maniphest Tasks: T2004

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

resources/celerity/map.php

@@ -8,9 +8,9 @@ return array(
   'names' =>
   array(
     'core.pkg.css' => 'fb144113',
-    'core.pkg.js' => 'e39d336b',
+    'core.pkg.js' => '57d0e1c4',
     'darkconsole.pkg.js' => 'ca8671ce',
-    'differential.pkg.css' => 'cc216438',
+    'differential.pkg.css' => '331c38d9',
     'differential.pkg.js' => '11a5b750',
     'diffusion.pkg.css' => '3783278d',
     'diffusion.pkg.js' => '5b4010f4',
@@ -55,7 +55,7 @@ return array(
     'rsrc/css/application/countdown/timer.css' => '86b7b0a0',
     'rsrc/css/application/diff/inline-comment-summary.css' => '14a91639',
     'rsrc/css/application/differential/add-comment.css' => 'c478bcaa',
-    'rsrc/css/application/differential/changeset-view.css' => 'd1951f43',
+    'rsrc/css/application/differential/changeset-view.css' => 'df93fa84',
     'rsrc/css/application/differential/core.css' => '7ac3cabc',
     'rsrc/css/application/differential/results-table.css' => '239924f9',
     'rsrc/css/application/differential/revision-comment.css' => '48186045',
@@ -463,7 +463,7 @@ return array(
     'rsrc/js/core/behavior-line-linker.js' => 'bc778103',
     'rsrc/js/core/behavior-more.js' => '9b9197be',
     'rsrc/js/core/behavior-object-selector.js' => 'b4eef37b',
-    'rsrc/js/core/behavior-oncopy.js' => 'c3e218fe',
+    'rsrc/js/core/behavior-oncopy.js' => 'e69e4400',
     'rsrc/js/core/behavior-phabricator-nav.js' => 'b5842a5e',
     'rsrc/js/core/behavior-phabricator-remarkup-assist.js' => 'c021950a',
     'rsrc/js/core/behavior-refresh-csrf.js' => 'c4b31646',
@@ -505,7 +505,7 @@ return array(
     'conpherence-notification-css' => '403cf598',
     'conpherence-update-css' => '1099a660',
     'conpherence-widget-pane-css' => '87b12e0c',
-    'differential-changeset-view-css' => 'd1951f43',
+    'differential-changeset-view-css' => 'df93fa84',
     'differential-core-view-css' => '7ac3cabc',
     'differential-inline-comment-editor' => 'f2441746',
     'differential-results-table-css' => '239924f9',
@@ -596,7 +596,7 @@ return array(
     'javelin-behavior-phabricator-nav' => 'b5842a5e',
     'javelin-behavior-phabricator-notification-example' => 'c51a6616',
     'javelin-behavior-phabricator-object-selector' => 'b4eef37b',
-    'javelin-behavior-phabricator-oncopy' => 'c3e218fe',
+    'javelin-behavior-phabricator-oncopy' => 'e69e4400',
     'javelin-behavior-phabricator-remarkup-assist' => 'c021950a',
     'javelin-behavior-phabricator-reveal-content' => '8f24abfc',
     'javelin-behavior-phabricator-search-typeahead' => 'f6b56f7a',
@@ -1634,11 +1634,6 @@ return array(
       2 => 'javelin-util',
       3 => 'javelin-magical-init',
     ),
-    'c3e218fe' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-    ),
     'c4b31646' =>
     array(
       0 => 'javelin-request',
@@ -1814,6 +1809,11 @@ return array(
       2 => 'javelin-view-visitor',
       3 => 'javelin-util',
     ),
+    'e69e4400' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+    ),
     'e7c21fb3' =>
     array(
       0 => 'javelin-dom',

src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php

@@ -7,6 +7,17 @@ final class DifferentialChangesetTwoUpRenderer
     return false;
   }
 
+  private function renderColgroup() {
+    return phutil_tag('colgroup', array(), array(
+      phutil_tag('col', array('class' => 'num')),
+      phutil_tag('col', array('class' => 'left')),
+      phutil_tag('col', array('class' => 'num')),
+      phutil_tag('col', array('class' => 'copy')),
+      phutil_tag('col', array('class' => 'right')),
+      phutil_tag('col', array('class' => 'cov')),
+    ));
+  }
+
   public function renderTextChange(
     $range_start,
     $range_len,
@@ -31,6 +42,8 @@ final class DifferentialChangesetTwoUpRenderer
     }
 
     $html = array();
+    $html[] = $this->renderColgroup();
+
     $old_lines = $this->getOldLines();
     $new_lines = $this->getNewLines();
     $gaps = $this->getGaps();
@@ -184,7 +197,7 @@ final class DifferentialChangesetTwoUpRenderer
       }
 
       $o_num = null;
-      $o_classes = 'left';
+      $o_classes = '';
       $o_text = null;
       if (isset($old_lines[$ii])) {
         $o_num  = $old_lines[$ii]['line'];
@@ -192,14 +205,15 @@ final class DifferentialChangesetTwoUpRenderer
         if ($old_lines[$ii]['type']) {
           if ($old_lines[$ii]['type'] == '\\') {
             $o_text = $old_lines[$ii]['text'];
-            $o_classes .= ' comment';
+            $o_class = 'comment';
           } else if ($original_left && !isset($highlight_old[$o_num])) {
-            $o_classes .= ' old-rebase';
+            $o_class = 'old-rebase';
           } else if (empty($new_lines[$ii])) {
-            $o_classes .= ' old old-full';
+            $o_class = 'old old-full';
           } else {
-            $o_classes .= ' old';
+            $o_class = 'old';
           }
+          $o_classes = $o_class;
         }
       }
 
@@ -265,7 +279,6 @@ final class DifferentialChangesetTwoUpRenderer
           }
         }
       }
-      $n_classes .= ' right'.$n_colspan;
 
       if (isset($hunk_starts[$o_num])) {
         $html[] = $context_not_available;
@@ -283,10 +296,11 @@ final class DifferentialChangesetTwoUpRenderer
         $n_id = null;
       }
 
-      // NOTE: This is a unicode zero-width space, which we use as a hint
+      // NOTE: This is a unicode 'word joiner' (essentially a non-breaking
-      // when intercepting 'copy' events to make sure sensible text ends
+      // zero-width space), which we use as a hint when intercepting 'copy'
-      // up on the clipboard. See the 'phabricator-oncopy' behavior.
+      // events to make sure sensible text ends up on the clipboard.
-      $zero_space = "\xE2\x80\x8B";
+      // See the 'phabricator-oncopy' behavior.
+      $zero_space = "\xE2\x81\xA0";
 
       // NOTE: The Javascript is sensitive to whitespace changes in this
       // block!
@@ -326,9 +340,9 @@ final class DifferentialChangesetTwoUpRenderer
           }
           $html[] = phutil_tag('tr', array('class' => 'inline'), array(
             phutil_tag('th', array()),
-            phutil_tag('td', array('class' => 'left'), $comment_html),
+            phutil_tag('td', array(), $comment_html),
             phutil_tag('th', array()),
-            phutil_tag('td', array('colspan' => 3, 'class' => 'right3'), $new),
+            phutil_tag('td', array('colspan' => 3), $new),
           ));
         }
       }
@@ -338,11 +352,11 @@ final class DifferentialChangesetTwoUpRenderer
                                                      $on_right = true);
           $html[] = phutil_tag('tr', array('class' => 'inline'), array(
             phutil_tag('th', array()),
-            phutil_tag('td', array('class' => 'left')),
+            phutil_tag('td', array()),
             phutil_tag('th', array()),
             phutil_tag(
               'td',
-              array('colspan' => 3, 'class' => 'right3'),
+              array('colspan' => 3),
               $comment_html),
           ));
         }
@@ -391,9 +405,9 @@ final class DifferentialChangesetTwoUpRenderer
         $comment_html = $this->renderInlineComment($comment, $on_right = false);
         $html_old[] = phutil_tag('tr', array('class' => 'inline'), array(
           phutil_tag('th', array()),
-          phutil_tag('td', array('class' => 'left'), $comment_html),
+          phutil_tag('td', array(), $comment_html),
           phutil_tag('th', array()),
-          phutil_tag('td', array('colspan' => 3, 'class' => 'right3')),
+          phutil_tag('td', array('colspan' => 3)),
         ));
       }
     }
@@ -402,11 +416,11 @@ final class DifferentialChangesetTwoUpRenderer
         $comment_html = $this->renderInlineComment($comment, $on_right = true);
         $html_new[] = phutil_tag('tr', array('class' => 'inline'), array(
           phutil_tag('th', array()),
-          phutil_tag('td', array('class' => 'left')),
+          phutil_tag('td', array()),
           phutil_tag('th', array()),
           phutil_tag(
             'td',
-            array('colspan' => 3, 'class' => 'right3'),
+            array('colspan' => 3),
             $comment_html),
         ));
       }
@@ -424,12 +438,15 @@ final class DifferentialChangesetTwoUpRenderer
       $th_new = phutil_tag('th', array('id' => "C{$id}OL1"), 1);
     }
 
-    $output = hsprintf(
+    $output = array();
+    $output[] = $this->renderColgroup();
+
+    $output[] = hsprintf(
       '<tr class="differential-image-diff">'.
         '%s'.
-        '<td class="left differential-old-image">%s</td>'.
+        '<td class="differential-old-image">%s</td>'.
         '%s'.
-        '<td class="right3 differential-new-image" colspan="3">%s</td>'.
+        '<td class="differential-new-image" colspan="3">%s</td>'.
       '</tr>'.
       '%s'.
       '%s',

src/applications/diffusion/controller/DiffusionBrowseFileController.php

@@ -789,7 +789,7 @@ final class DiffusionBrowseFileController extends DiffusionBrowseController {
           $anchor_text,
 
           // NOTE: See phabricator-oncopy behavior.
-          "\xE2\x80\x8B",
+          "\xE2\x81\xA0",
 
           // TODO: [HTML] Not ideal.
           phutil_safe_html(str_replace("\t", '  ', $line['data'])),

src/view/layout/PhabricatorSourceCodeView.php

@@ -61,7 +61,8 @@ final class PhabricatorSourceCodeView extends AphrontView {
           pht('...'));
       } else {
         $content_number = $line_number;
-        $content_line = hsprintf("\xE2\x80\x8B%s", $line);
+        // NOTE: See phabricator-oncopy behavior.
+        $content_line = hsprintf("\xE2\x81\xA0%s", $line);
       }
 
       $row_attributes = array();

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

@@ -16,12 +16,30 @@
 .differential-diff {
   background: #fff;
   width: 100%;
+  min-width: 780px;
   border-top: 1px solid {$lightblueborder};
   border-bottom: 1px solid {$lightblueborder};
+  table-layout: fixed;
+}
+
+.differential-diff col.num {
+  width: 45px;
+}
+
+.differential-diff col.left,
+.differential-diff col.right {
+  width: 49.25%;
+}
+
+.differential-diff col.copy {
+  width: 0.5%;
+}
+
+.differential-diff col.cov {
+  width: 1%;
 }
 
 .differential-diff td {
-  min-width: 320px;
   /*
     Disable ligatures in Firefox. Firefox 3 has fancypants ligature support, but
     it gets applied to monospaced fonts, which sucks because it means that the
@@ -35,6 +53,7 @@
   letter-spacing:     0.0083334px;
   vertical-align:     top;
   white-space:        pre-wrap;
+  word-wrap:          break-word;
   padding:            0 8px 1px;
   line-height:        16px;
 }
@@ -42,9 +61,6 @@
 .differential-diff th {
   text-align:         right;
   padding:            2px 6px 0px 0px;
-  width:              4%;
-  min-width:          45px;
-  max-width:          4%;
   vertical-align:     top;
   background:         {$lightbluebackground};
   color:              {$bluetext};
@@ -59,21 +75,6 @@
   -ms-user-select:      none;
   user-select:          none;
 }
-.differential-diff td.left {
-  width: 45%;
-}
-
-.differential-diff td.right,
-.differential-diff td.right1 {
-  width: 43.5%;
-}
-
-.differential-diff td.right2 {
-  width: 44.5%;
-}
-.differential-diff td.right3 {
-  width: 45%;
-}
 
 .differential-changeset-immutable .differential-diff th {
   cursor: auto;
@@ -126,8 +127,6 @@
 }
 
 .differential-diff td.cov {
-  min-width: 1%;
-  width: 1%;
   padding: 0;
 }
 
@@ -252,6 +251,7 @@ td.cov-X {
   width:              100%;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
+  box-sizing:         border-box;
   overflow:           hidden;
   white-space:        normal;
 }

webroot/rsrc/js/core/behavior-oncopy.js

@@ -16,7 +16,7 @@
  */
 JX.behavior('phabricator-oncopy', function() {
 
-  var zws = "\u200B"; // Unicode Zero-Width Space
+  var zws = "\u2060"; // Unicode Word Joiner (Non-Breaking Zero-Width Space)
 
   JX.enableDispatch(document.body, 'copy');
   JX.Stratcom.listen(