From f1a035d5c2c655a598a00dbb682d667f891bafe4 Mon Sep 17 00:00:00 2001 From: epriestley Date: Wed, 20 Feb 2019 04:40:06 -0800 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 +++++------ .../DifferentialChangesetTwoUpRenderer.php | 5 ++--- .../PHUIDiffOneUpInlineCommentRowScaffold.php | 1 - .../PHUIDiffTwoUpInlineCommentRowScaffold.php | 4 ++-- .../differential/changeset-view.css | 20 ++++++++++++++----- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index 3a5ed56056..3188de0052 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -11,7 +11,7 @@ return array( '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 @@ return array( '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 @@ return array( '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 @@ return array( 'javelin-util', 'phabricator-shaped-request', ), + 'd92bed0d' => array( + 'phui-inline-comment-view-css', + ), 'da15d3dc' => array( 'phui-oi-list-view-css', ), @@ -2005,9 +2008,6 @@ return array( 'javelin-uri', 'phabricator-notification', ), - 'de570228' => array( - 'phui-inline-comment-view-css', - ), 'dfa1d313' => array( 'javelin-behavior', 'javelin-dom', diff --git a/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php b/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php index 7c728c1ff7..c37655bb93 100644 --- a/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php +++ b/src/applications/differential/render/DifferentialChangesetTwoUpRenderer.php @@ -223,7 +223,7 @@ final class DifferentialChangesetTwoUpRenderer ($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 @@ final class DifferentialChangesetTwoUpRenderer 'msg' => $title, ), 'class' => 'copy '.$class, - ), - ''); + )); } } } diff --git a/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php b/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php index 1f8e05bc27..fe5cab8622 100644 --- a/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php +++ b/src/infrastructure/diff/view/PHUIDiffOneUpInlineCommentRowScaffold.php @@ -18,7 +18,6 @@ final class PHUIDiffOneUpInlineCommentRowScaffold $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 index 769ad84d1f..f9bde17bf3 100644 --- a/src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php +++ b/src/infrastructure/diff/view/PHUIDiffTwoUpInlineCommentRowScaffold.php @@ -65,8 +65,7 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold ); $right_attrs = array( - 'colspan' => 3, - 'class' => 'right3', + 'colspan' => 2, 'id' => ($right_side ? $right_side->getScaffoldCellID() : null), ); @@ -74,6 +73,7 @@ final class PHUIDiffTwoUpInlineCommentRowScaffold 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 index 55cc5e8fd3..6ed939a2ee 100644 --- 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, @@ -178,6 +179,10 @@ should always have a boring grey background. */ overflow: hidden; } +.differential-diff td + td.n { + border-left: 1px solid {$thinblueborder}; +} + .differential-diff td.n::before { content: attr(data-n); } @@ -443,10 +448,6 @@ unselectable. */ -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 @@ unselectable. */ -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) { @@ -473,3 +474,12 @@ unselectable. */ 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; +}