Open Bug 1769235 Opened 2 years ago Updated 2 years ago

The row number is misaligned from the row after a copy/paste operation is done in the excel document

Categories

(Core :: DOM: Core & HTML, defect, P3)

Desktop
All
defect

Tracking

()

Tracking Status
firefox-esr91 --- wontfix
firefox100 --- wontfix
firefox101 --- wontfix
firefox102 --- wontfix
firefox103 --- wontfix
firefox104 --- fix-optional

People

(Reporter: cbaica, Unassigned)

References

(Regression)

Details

(Keywords: regression)

Attachments

(3 files)

Attached video misalignment bug

Affected versions

  • Fx 102.0a1
  • Fx 101.0b6
  • Fx 100.0 RC

Affected platforms

  • Windows 10
  • macOS 10.12.6

Steps to reproduce

  1. Launch Firefox.
  2. Navigate to online office excel, create a new file and add some data in some cells.
  3. Copy the cells then paste them somewhere else in the document.

Expected result

  • Content is copied over in the desired location without any other changes to the document / page.

Actual result

  • The row number becomes misaligned to the actual rows.

Regression range

  • Will come back with a regression range ASAP

Additional notes

  • The issue does not occur on ubuntu 22.
  • The issue goes away with a page refresh.
  • The issue does not occur in google spreadsheets, only in the online office excel.
Has STR: --- → yes
Has Regression Range: --- → no
QA Whiteboard: [qa-regression-triage]

It can be reproduced with the old Firefox 78 as well as Nightly 102.0a1 Windows10.
So, I think this is not a recent regression.

Pasting with Ctrl+V will reappear this problem.
The row numbers on the left side of the table are shifted by one.

However, pasting with the page context menu or tool button does not reproduce the problem.

And I confirmed that the problem is not reproduced if setting dom.allow_cut_copy to false.

Component: Layout → DOM: Core & HTML
Has Regression Range: no → yes

Set release status flags based on info from the regressing bug 1597857

:edgar, since you are the author of the regressor, bug 1597857, could you take a look?
For more information, please visit auto_nag documentation.

Flags: needinfo?(echen)

I could not reproduce the issue. Cristian, are you still able to reproduce this?

Flags: needinfo?(echen) → needinfo?(cristian.baica)

I can still reproduce this issue in Nightly102.0a1(20220525093624) Windows10.

Thank you @Alice. @Edgar as Alice mentioned, the issue is still reproducible on the latest Nightly 102 on Windows 10 as well as the latest beta/RC (Fx 101.0).

Flags: needinfo?(cristian.baica)

Set release status flags based on info from the regressing bug 1597857

Could the severity be reviewed? Seems it's higher than an S3 based on the site.
Is this possibly a webcompat issue?

Flags: needinfo?(htsai)

I am not able to reproduce this issue on Win 11, nightly 103.

Hi Alice0775 White or Cristian, any chance you can test on Win 11? I am also wondering if you've applied other styling formats to the cells.
I tried the below:

  1. enter data into certain cells A1:C3, without applying any additional styles. Copy the cells and paste them over to another location. Everything works as expected.
  2. enter data into certain cells A1:C3, then I freeze row 1. Copy cells A1:C3 and paste them over to another location. It works as expected.
  3. insert a table into cells A1:C3, enter data. Copy the cells A1:C3 and paste them over to another location. It works as expected.

Did you have additional steps or configurations that I missed here? Thank you.

Flags: needinfo?(htsai)
Flags: needinfo?(cristian.baica)
Flags: needinfo?(alice0775)

I can also reproduce the issue in Nightly103.0a1(20220622094342) Ubuntu20.04 as well as Windows10.

Paste cells using keyboard shortcuts(Ctrl+v). The issue does not occur if paste cells with mouse operation.

Flags: needinfo?(alice0775)
OS: Windows → All

Hello,

I've tested this on Win 11 as well, but I was not able to reproduce the issue. However, there is something I'd like to note here: the indent done on the paste action is done on Win 11 as well, with the distinction that the rows don't become misaligned.
Regarding the formating, the issue occurs regardless of the formating of the text or of the cells, on the affected OSs.

There are no additional steps or configuration required to reproduce the issue.

Flags: needinfo?(cristian.baica)

Interestingly, in Firefox, the sheet's undo tool button remains disabled after pasting using the Ctrl+V shortcut, but in Chrome it is enabled as expected.

I am not able to reproduce this on macOS 12.
I think S3 is still right - though the site is popular, the issue is not reproducible reliably on every platform. Also according to the comments above, some workarounds here, using mouse can work, page refresh ... ...

However, I think it's still interesting to know why OS versions seem to have impact here. Mirko, you looked into some table copy/paste issues before, any thoughts here? Thank you.

Flags: needinfo?(mbrodesser)
Flags: needinfo?(mbrodesser)

(In reply to Alice0775 White from comment #12)

I can also reproduce the issue in Nightly103.0a1(20220622094342) Ubuntu20.04 as well as Windows10.

Paste cells using keyboard shortcuts(Ctrl+v). The issue does not occur if paste cells with mouse operation.

Couldn't reproduce it on Ubuntu 20.04 with current Nightly. See the attached video.

Alice: can you reproduce the issue with the same table content?

Flags: needinfo?(alice0775)

(In reply to Mirko Brodesser (:mbrodesser) from comment #17)

(In reply to Alice0775 White from comment #12)

I can also reproduce the issue in Nightly103.0a1(20220622094342) Ubuntu20.04 as well as Windows10.

Paste cells using keyboard shortcuts(Ctrl+v). The issue does not occur if paste cells with mouse operation.

Couldn't reproduce it on Ubuntu 20.04 with current Nightly. See the attached video.

Alice: can you reproduce the issue with the same table content?

Yes. I can reproduce the issue in Nightly104.0a1 Ubuntu20.04 and Windows10.

Flags: needinfo?(alice0775)

(In reply to Alice0775 White from comment #18)

(In reply to Mirko Brodesser (:mbrodesser) from comment #17)

(In reply to Alice0775 White from comment #12)

I can also reproduce the issue in Nightly103.0a1(20220622094342) Ubuntu20.04 as well as Windows10.

Paste cells using keyboard shortcuts(Ctrl+v). The issue does not occur if paste cells with mouse operation.

Couldn't reproduce it on Ubuntu 20.04 with current Nightly. See the attached video.

Alice: can you reproduce the issue with the same table content?

Yes. I can reproduce the issue in Nightly104.0a1 Ubuntu20.04 and Windows10.

Does your Ubuntu 20.04 run with Wayland or x11? One can check with echo $XDG_SESSION_TYPE from a terminal.

Flags: needinfo?(alice0775)

(In reply to Mirko Brodesser (:mbrodesser) from comment #19)

Does your Ubuntu 20.04 run with Wayland or x11? One can check with echo $XDG_SESSION_TYPE from a terminal.

$ echo $XDG_SESSION_TYPE
x11
Flags: needinfo?(alice0775)

(In reply to Alice0775 White from comment #20)

(In reply to Mirko Brodesser (:mbrodesser) from comment #19)

Does your Ubuntu 20.04 run with Wayland or x11? One can check with echo $XDG_SESSION_TYPE from a terminal.

$ echo $XDG_SESSION_TYPE
x11

Same here. I don't know how to proceed with this issue, since it doesn't reproduce on my machine.

I'm not aware of any similar issue for other websites, so this might be a Microsoft Excel Online specific bug. We could reach out to Microsoft to check it. @Edgar: or do you have another idea how to proceed here?

Flags: needinfo?(echen)

On ubuntu,
-- Ctrl+V moves the entire table slightly to the right. And Ctrl+Shift+V will move it back.

-- Setting widget.gtk.overlay-scrollbars.enabled to false makes it worse in addition to the above, and then the row numbers are off by almost 1/2 to 1 cell.

(I feel that the layout calculations for the excel sheet are incorrectly taking into account the width of the scrollbars.)

(In reply to Alice0775 White from comment #22)

On ubuntu,
-- Ctrl+V moves the entire table slightly to the right. And Ctrl+Shift+V will move it back.

-- Setting widget.gtk.overlay-scrollbars.enabled to false makes it worse in addition to the above, and then the row numbers are off by almost 1/2 to 1 cell.

Interesting, with flipping that pref, I can observe the effect too. @emilio: any gut feeling if the root-cause for the case when not flipping the pref could be layout-related?
@stransky: does the behavior when flipping above pref perhaps point to a Core:Widgte:GTK bug?

(I feel that the layout calculations for the excel sheet are incorrectly taking into account the width of the scrollbars.)

Flags: needinfo?(stransky)
Flags: needinfo?(emilio)

Yes, widget.gtk.overlay-scrollbars.enabled is from Gtk.

Component: DOM: Core & HTML → Widget: Gtk
Flags: needinfo?(stransky)
Priority: -- → P3

That should happen on all platforms that gave no overlay scrollbars, not just GTK (like windows 10). So no, not a GTK bug.

Component: Widget: Gtk → DOM: Core & HTML

I haven't dug, but that having overlay scrollbars off changes behavior suggest that the page is probably making an invalid assumption using DOM measurement APIs

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)

Workaround CSS for excel.officeapps.live.com

.ewr-grdcontarea-ltr td {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  
}

.ewr-grdblk-background-color {
  vertical-align: unset;
}

Yeah so I'm pretty sure this is not a Firefox bug. Their clipboard code injects this stylesheet:

table
	{mso-displayed-decimal-separator:"\,";
	mso-displayed-thousand-separator:"\.";}tr
	{mso-height-source:auto;}col
	{mso-width-source:auto;}td
	{padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	text-align:general;
	vertical-align:bottom;
	border:none;
	white-space:nowrap;
	mso-rotate:0;}.xl16
	{font-weight:700;}

Which they don't remove and breaks the layout.

When we Ctrl+C from excel, the contents of the text/html flavor of the clipboard are:

<div ccp_infra_version='3' ccp_infra_timestamp='1657197192149' ccp_infra_user_hash='1963311272' ccp_infra_copy_id='6df40c0a-a36d-464c-aab2-365febbde444' data-ccp-timestamp='1657197192149'><html><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><meta name=ProgId content=Excel.Sheet><meta name=Generator content="Microsoft Excel 15"><style>table
	{mso-displayed-decimal-separator:"\,";
	mso-displayed-thousand-separator:"\.";}
tr
	{mso-height-source:auto;}
col
	{mso-width-source:auto;}
td
	{padding-top:1px;
	padding-right:1px;
	padding-left:1px;
	mso-ignore:padding;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:Calibri, sans-serif;
	mso-font-charset:0;
	text-align:general;
	vertical-align:bottom;
	border:none;
	white-space:nowrap;
	mso-rotate:0;}
.xl16
	{font-weight:700;}
.xl66
	{color:black;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;}
.xl67
	{color:black;
	font-weight:700;
	font-family:Calibri;
	mso-generic-font-family:auto;
	mso-font-charset:0;}
</style></head><body link="#0563C1" vlink="#954F72"><table width=256 style='border-collapse:collapse;width:192pt'><!--StartFragment--><col width=64 style='width:48pt' span=4><tr height=20 style='height:15.0pt'><td width=64 height=20 style='width:48pt;height:15.0pt'></td><td width=64 style='width:48pt'></td><td width=64 style='width:48pt'></td><td width=64 class=xl66 style='width:48pt'></td></tr><tr height=20 style='height:15.0pt'><td height=20 style='height:15.0pt'></td><td></td><td></td><td class=xl67>foobar</td></tr><tr height=20 style='height:15.0pt'><td height=20 style='height:15.0pt'></td><td></td><td></td><td class=xl67>baz</td></tr><tr height=20 style='height:15.0pt'><td height=20 style='height:15.0pt'></td><td></td><td class=xl16>foobar</td><td class=xl66></td></tr><tr height=20 style='height:15.0pt'><td height=20 style='height:15.0pt'></td><td></td><td class=xl16>baz</td><td></td></tr><tr height=20 style='height:15.0pt'><td height=20 class=xl16 style='height:15.0pt'>foobar</td><td></td><td></td><td></td></tr><tr height=20 style='height:15.0pt'><td height=20 class=xl16 style='height:15.0pt'>baz</td><td></td><td></td><td></td></tr><!--EndFragment--></table></body></html></div>

So maybe Chromium browsers sanitize the stylesheet when pasting?

When copying in Chrome, I get this in the clipboard:

<div ccp_infra_version="3" ccp_infra_timestamp="1657197316923" ccp_infra_user_hash="1963311272" ccp_infra_copy_id="32de61ba-af12-4c3b-9bd6-b0c040dce4f2" data-ccp-timestamp="1657197316923" style="color: rgb(0, 0, 0); font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><table width="192" style="border-collapse: collapse; width: 144pt;"><colgroup><col width="64" span="3" style="width: 48pt;"></colgroup><tbody><tr height="20" style="height: 15pt;"><td width="64" height="20" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; width: 48pt; height: 15pt;"></td><td width="64" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; width: 48pt;"></td><td width="64" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; width: 48pt;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td><td style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td class="xl67" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 700; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;">foobar</td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td class="xl67" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 700; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;">baz</td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td><td class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr><tr height="20" style="height: 15pt;"><td height="20" class="xl66" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap; height: 15pt;"></td><td style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td><td style="padding-top: 1px; padding-right: 1px; padding-left: 1px; color: black; font-size: 11pt; font-weight: 400; font-style: normal; text-decoration: none; font-family: Calibri, sans-serif; vertical-align: bottom; border: none; white-space: nowrap;"></td></tr></tbody></table></div>

So styles are inline and don't break the layout.

This seems something potentially worth contacting microsoft about? Just removing the extra stylesheet before or after pasting would fix this.

Flags: needinfo?(emilio)

Though when pasting stylesheets, Chrome seems to fully sanitize the stylesheet away, and we don't. So that's possibly an interop issue, and fixing that would also fix this.

Attached file Test-case

So Chrome seems to be doing something somewhat complex when pasting, where they apply the inline stylesheet manually or something?

Clearing NI on Edgar as Emilio has done deep analysis.

Flags: needinfo?(echen)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: