From f1a035d5c2c655a598a00dbb682d667f891bafe4 Mon Sep 17 00:00:00 2001 From: epriestley Date: Wed, 20 Feb 2019 12:40:06 +0000 Subject: [PATCH] In Differential, give the "moved/copied from" gutter a more clear visual look Summary: Depends on D20196. See PHI985. When empty, the "moved/copied" gutter currently renders with the same background color as the rest of the line. This can be misleading because it makes code look more indented than it is, especially if you're unfamiliar with the tool: {F6225179} If we remove this misleading coloration, we get a white gap. This is more clear, but looks a little odd: {F6225181} Instead, give this gutter a subtle background fill in all casses, to make it more clear that it's a separate gutter region, not a part of the text diff: {F6225183} Test Plan: See screenshots. Copied text from a diff, added/removed inlines, etc. Reviewers: amckinley Reviewed By: amckinley Differential Revision: https://secure.phabricator.com/D20197 --- resources/celerity/map.php | 12 ++++++------ src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php | 5 ++--- src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php | 1 - src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php | 4 ++-- webroot/rsrc/css/application/differential/changeset-view.css | 20 +++++++++++++++----- 5 file(s) changed, 25 insertion(s)(+), 17 deletion(s)(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -11,7 +11,7 @@ 'conpherence.pkg.js' => '020aebcf', 'core.pkg.css' => 'e3c1a8f2', 'core.pkg.js' => '2cda17a4', - 'differential.pkg.css' => '97e13037', + 'differential.pkg.css' => 'ab23bd75', 'differential.pkg.js' => '67e02996', 'diffusion.pkg.css' => '42c75c37', 'diffusion.pkg.js' => '91192d85', @@ -61,7 +61,7 @@ 'rsrc/css/application/dashboard/dashboard.css' => '4267d6c6', 'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d', 'rsrc/css/application/differential/add-comment.css' => '7e5900d9', - 'rsrc/css/application/differential/changeset-view.css' => 'de570228', + 'rsrc/css/application/differential/changeset-view.css' => 'd92bed0d', 'rsrc/css/application/differential/core.css' => '7300a73e', 'rsrc/css/application/differential/phui-inline-comment.css' => '48acce5b', 'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d', @@ -540,7 +540,7 @@ 'conpherence-thread-manager' => 'aec8e38c', 'conpherence-transaction-css' => '3a3f5e7e', 'd3' => 'd67475f5', - 'differential-changeset-view-css' => 'de570228', + 'differential-changeset-view-css' => 'd92bed0d', 'differential-core-view-css' => '7300a73e', 'differential-revision-add-comment-css' => '7e5900d9', 'differential-revision-comment-css' => '7dbc8d1d', @@ -1997,6 +1997,9 @@ 'javelin-util', 'phabricator-shaped-request', ), + 'd92bed0d' => array( + 'phui-inline-comment-view-css', + ), 'da15d3dc' => array( 'phui-oi-list-view-css', ), @@ -2004,9 +2007,6 @@ 'javelin-behavior', 'javelin-uri', 'phabricator-notification', - ), - 'de570228' => array( - 'phui-inline-comment-view-css', ), 'dfa1d313' => array( 'javelin-behavior', diff --git a/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php b/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php --- a/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php +++ b/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php @@ -223,7 +223,7 @@ ($new_lines[$ii]['type'] == '\\'); if ($not_copied) { - $n_copy = phutil_tag('td', array('class' => "copy {$n_class}")); + $n_copy = phutil_tag('td', array('class' => 'copy')); } else { list($orig_file, $orig_line, $orig_type) = $copy_lines[$n_num]; $title = ($orig_type == '-' ? 'Moved' : 'Copied').' from '; @@ -243,8 +243,7 @@ 'msg' => $title, ), 'class' => 'copy '.$class, - ), - ''); + )); } } } diff --git a/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php b/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php --- a/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php +++ b/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php @@ -18,7 +18,6 @@ $attrs = array( 'colspan' => 3, - 'class' => 'right3', 'id' => $inline->getScaffoldCellID(), ); diff --git a/src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php b/src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php --- a/src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php +++ b/src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php @@ -65,8 +65,7 @@ ); $right_attrs = array( - 'colspan' => 3, - 'class' => 'right3', + 'colspan' => 2, 'id' => ($right_side ? $right_side->getScaffoldCellID() : null), ); @@ -74,6 +73,7 @@ phutil_tag('td', array('class' => 'n'), $left_hidden), phutil_tag('td', $left_attrs, $left_side), phutil_tag('td', array('class' => 'n'), $right_hidden), + phutil_tag('td', array('class' => 'copy')), phutil_tag('td', $right_attrs, $right_side), ); diff --git a/webroot/rsrc/css/application/differential/changeset-view.css b/webroot/rsrc/css/application/differential/changeset-view.css --- a/webroot/rsrc/css/application/differential/changeset-view.css +++ b/webroot/rsrc/css/application/differential/changeset-view.css @@ -144,6 +144,7 @@ min-width: 0.5%; width: 0.5%; padding: 0; + background: {$lightbluebackground}; } .differential-diff td.new-copy, @@ -176,6 +177,10 @@ cursor: pointer; border-right: 1px solid {$thinblueborder}; overflow: hidden; +} + +.differential-diff td + td.n { + border-left: 1px solid {$thinblueborder}; } .differential-diff td.n::before { @@ -443,10 +448,6 @@ -ms-user-select: none; -webkit-user-select: none; user-select: none; -} - -.differential-diff.copy-l > tbody > tr > td, -.differential-diff.copy-r > tbody > tr > td { opacity: 0.5; } @@ -463,7 +464,7 @@ -ms-user-select: none; -webkit-user-select: none; user-select: none; - opacity: 0.25; + opacity: 0.5; } .differential-diff.copy-r > tbody > tr > td:nth-child(5) { @@ -472,4 +473,13 @@ -webkit-user-select: auto; user-select: auto; opacity: 1; +} + +.differential-diff.copy-l > tbody > tr.inline > td, +.differential-diff.copy-r > tbody > tr.inline > td { + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + opacity: 0.5; } -- tangled.sh