mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
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
This commit is contained in:
Ben Alpert
epriestley
parent
85394a9e9e
commit
9fedd343eb
6 changed files with 74 additions and 56 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// when intercepting 'copy' events to make sure sensible text ends
|
||||
// up on the clipboard. See the 'phabricator-oncopy' behavior.
|
||||
$zero_space = "\xE2\x80\x8B";
|
||||
// NOTE: This is a unicode 'word joiner' (essentially a non-breaking
|
||||
// zero-width space), which we use as a hint when intercepting 'copy'
|
||||
// events to make sure sensible text ends up on the clipboard.
|
||||
// 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',
|
||||
|
|
|
|||
|
|
@ -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'])),
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in a new issue