1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 14:00:56 +01:00
phorge-phorge/webroot/rsrc/css/application
epriestley 37f12a05ea Behold! Copy text from either side of a diff!
Summary:
Ref T12822. Ref T13161. By default, when users select text from a diff and copy it to the clipboard, they get both sides of the diff and all the line numbers. This is usually not what they intended to copy.

As of D20188, we use `content: attr(...)` to render line numbers. No browser copies this text, so that fixes line numbers.

We can use "user-select" CSS to visually prevent selection of line numbers and other stuff we don't want to copy. In Firefox and Chrome, "user-select" also applies to copied text, so getting "user-select" on the right nodes is largely good enough to do what we want.

In Safari, "user-select" is only visual, so we always need to crawl the DOM to figure out what text to pull out of it anyway.

In all browsers, we likely want to crawl the DOM anyway because this will let us show one piece of text and copy a different piece of text. We probably want to do this in the future to preserve "\t" tabs, and possibly to let us render certain character codes in one way but copy their original values. For example, we could render "\x07" as "␇".

Finally, we have to figure out which side of the diff we're copying from. The rule here is:

  - If you start the selection by clicking somewhere on the left or right side of the diff, that's what you're copying.
  - Otherwise, use normal document copy rules.

So the overall flow here is:

  - Listen for clicks.
  - When the user clicks the left or right side of the diff, store what they clicked.
  - When a selection starts, and something is actually selected, check if it was initiated by clicking a diff. If it was, apply a visual effect to get "user-select" where it needs to go and show the user what we think they're doing and what we're going to copy.
  - (Then, try to handle a bunch of degenerate cases where you start a selection and then click inside that selection.)
  - When a user clicks elsewhere or ends the selection with nothing selected, clear the selection mode.
  - When a user copies text, if we have an active selection mode, pull all the selected nodes out of the DOM and filter out the ones we don't want to copy, then stitch the text back together. Although I believe this didn't work well in ~2010, it appears to work well today.

Test Plan: This mostly seems to work in Safari, Chrome, and Firefox. T12822 has some errata. I haven't tested touch events but am satisfied if the touch event story is anything better than "permanently destroys data".

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13161, T12822

Differential Revision: https://secure.phabricator.com/D20191
2019-02-19 15:17:07 -08:00
..
almanac Allow Almanac service types to define default properties 2014-12-17 11:10:50 -08:00
auth Show the customized "Login" message on the login screen 2019-01-18 19:54:02 -08:00
base Fix the most significant "phantom notification" badness 2018-04-19 17:24:19 -07:00
chatlog [Redesign] Larger Font PostProcessor 2015-06-26 09:33:03 -07:00
conduit Show how to call Conduit API methods from clients 2015-05-08 12:19:52 -07:00
config Let the top-level exception handler dump a stack trace if we reach debug mode before things go sideways 2019-02-11 15:36:19 -08:00
conpherence Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
contentsource Move #888 and #999 to $lightgreytext 2013-09-02 08:12:18 -07:00
countdown Increase specificity in blue property boxes 2016-05-03 17:26:31 -07:00
daemon Execute Maniphest batch edits in the background with a web UI progress bar 2015-06-23 13:36:16 -07:00
dashboard Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
diff Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
differential Behold! Copy text from either side of a diff! 2019-02-19 15:17:07 -08:00
diffusion Mostly make blame work with DocumentEngine 2018-04-09 04:48:21 -07:00
feed [Redesign] Update Feed 2015-05-28 11:47:06 -07:00
files Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
flag Reorganize phui-object-item CSS, add drag ui 2016-12-14 11:53:17 -08:00
harbormaster Allow unit test results to specify that their details are formatted with remarkup when reporting to "harbormaster.sendmessage" 2018-08-28 13:26:11 -07:00
herald Allow Herald rules to add comments 2017-12-18 09:10:57 -08:00
maniphest Define bulk edits in terms of EditEngine, not hard-coded ad-hoc definitions 2018-01-19 12:43:47 -08:00
objectselector Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
owners Use a tokenizer, not a gigantic poorly-ordered "<select />", to choose repositories in Owners 2018-03-07 20:57:24 -08:00
paste Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
people Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
phame Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
pholio Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
phortune Allow Phortune accounts to customize their billing address and name 2019-01-16 16:16:27 -08:00
phrequent UIColor Blues and common color integration 2013-09-02 08:10:47 -07:00
phriction Fix Phriction document linking in mail bodies 2016-04-20 06:55:00 -07:00
policy Clean up Multirow Manager UI 2014-11-17 14:06:05 -08:00
ponder Minor Ponder spacing updates 2016-03-03 15:22:33 -08:00
project Add an Experimental Dark Mode to Phabricator 2017-07-18 06:44:32 -07:00
releeph Use standard UI elements to render pull requests in Releeph 2014-04-18 06:44:45 -07:00
search Mobile layouts for Diffusion 2017-08-30 12:28:00 -07:00
slowvote Solidify PHUITwoColumnView as a page layout 2016-03-01 07:23:08 -08:00
tokens Make tokens more accessible to assitive technologies 2014-05-05 10:54:34 -07:00
uiexample Clean up FontAwesome / Timeline CSS 2014-04-22 18:29:14 -07:00