1625534 - Extra newline inserted when copying text that includes an element with "-moz-user-select:none"

Status: NEW

(Core :: DOM: Copy & Paste and Drag & Drop, defect, P3)

Description

[Thayne]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0

Steps to reproduce:

Attempt to copy a target name from a GCP build status output page. I tried to create a minimal reproducable example, but didn't have much luck. I'm not sure where the newline is coming from, since my selection is inside a span. Here's an html fragment that it comes from:

<div _ngcontent-cyj-c25="" class="target-name ng-star-inserted" title="//print-service/test/com/lucidchart/services/print/common:common"><mat-icon _ngcontent-cyj-c25="" class="mat-icon notranslate mat-icon-no-color" role="img" aria-hidden="true" title="Broken"><svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
<g id="Icons-&-Logos/Build-Statuses/18px/Broken/WhiteOL" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Inherited-from-Failed" transform="translate(7.000000, 10.000000)"></g>
<circle id="Oval" stroke="#FFFFFF" fill="#202124" cx="8" cy="8" r="7.5"></circle>
<polygon id="Path" fill="#FFFFFF" points="7 4 9 4 9 9 7 9"></polygon>
<polygon id="Fill-2" fill="#FFFFFF" points="7 10 9 10 9 12 7 12"></polygon>
</g>
</svg></mat-icon><a _ngcontent-cyj-c25="" asctrackelement="InvocationContentTargetsList" trackaction="navigateToTargetContent" href="/results/invocations/b444bdd9-dff9-4df8-82fb-a28254fd6fc5/targets/%2F%2Fprint-service%2Ftest%2Fcom%2Flucidchart%2Fservices%2Fprint%2Fcommon:common"><span _ngcontent-cyj-c25="" dir="ltr">//print-service/test/com/lucidchart/services/print/common:common</span></a><mat-chip-list _ngcontent-cyj-c25="" class="mat-chip-list" tabindex="-1" aria-disabled="false" aria-invalid="false" aria-multiselectable="false" aria-orientation="horizontal" id="mat-chip-list-32"><div class="mat-chip-list-wrapper"><!----></div></mat-chip-list></div>

Actual results:

There was an extra newline at the beginning of the text when I pasted as plain text (in a terminal)

Expected results:

There should not have been a newline at the beginning.

Note, I tried this on chrome, and it did not have the newline at the beginning.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Emily McDonough [:alaskanemily]]

This will be hard to debug without an example. Is it possible to produce a testcase, even if it's not reduced?

Comment 3

[Daniel Holbert [:dholbert]]

I think the example was just the code in comment 0 (and the STR are: paste that code into a html document, view that document, select-all, copy, and then paste into a text editor).

I can reproduce, using those STR, and I'm working on making this into a more-reduced testcase...

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (from reporter)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Comment 6

[Daniel Holbert [:dholbert]]

The thing that produces the newline (in the copied content) seems to be the SVG (and specifically its graphical child element -- if you make it just an empty <svg></svg> or even <svg><g></g></svg>, then the bug doesn't reproduce).

So I guess I'll reclassify this as SVG. Though it might really belong in some DOM component; I'm not entirely sure which code manages serialization of copypasted content... I'll CC a few folks who might know or have thoughts.

Comment 7

[Daniel Holbert [:dholbert]]

Regression range for testcase 2:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=96c61b1dd0a1ecbc37fd4e257ff0bdff6f56df8b&tochange=b79457b703d9b51cf3e38199f4e154d21bc6fc97

In that range, I would bet this is:

https://hg.mozilla.org/mozilla-central/rev/90453be111d2e6eceeb39a5785f5eff6a8d422d2
Ting-Yu Lin — Bug 1286882 - Make SVG basic shape elements unselectable. r=dholbert

Comment 8

[Daniel Holbert [:dholbert]]

So I'll bet the issue here is that we end up with two selected regions, which are disjoint/non-adjacent, since the selected area is spanning an un-selectable piece (the SVG basic shape, which is unselectable via -moz-user-select:none, as of Bug 1286882).

And that scenario apparently results in a newline being added when pasting.

I'll attach a testcase that uses -moz-user-select more directly to trigger this (which will go back further than comment 7's regression range due to not depending on that SVG styling.

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (using -moz-user-select/-webkit-user-select directly to create an unselectable region)

Comment 10

[Daniel Holbert [:dholbert]]

Regression range for testcase 3:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=152ef25e89ae&tochange=98ea98c8191a

That suggests this is a regression from bug 739396.

Comment 11

[Firefox Bug Husbandry Bot]

Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is P3 (Backlog,) indicating it has been triaged, the bug's Severity is being updated to S3 (normal.)