1778091 - Highlight text color is not preserved after pressing Enter in yahoo mails

Status: VERIFIED FIXED

(Core :: DOM: Editor, defect, P1)

Description

[Petruta Horea [:phorea], Desktop Test Engineering (back on Sep 5th)]

Found in

• Firefox 103 beta 4

Affected versions

• Firefox 102 (RC and ESR)
• Firefox 103 beta 4
• latest Nightly 104.0a1 2022-07-04

Affected platforms

• Win 10 64-bit
• Ubuntu 22
• OSX 10.14.6

Steps to reproduce

1. Access the following website: https://mail.yahoo.com/ and login
2. Compose a new email
3. Select Text color option from the bottom of the new email composition
4. Select a highlight color and start typing
5. Press Enter

Expected result

• Highlight color is preserved after pressing Enter

Actual result

• Highlight color is applied only for the first row, then it changes to the default one

Regression range

• Pushlog: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a67baeba9a658f8650657389f38aa9bc7e2eef07&tochange=f895a0b6c0e3748e11381173b3cd32a7bb8c60dd
• DEBUG : Found commit message: Bug 1730429 - part 2: Delete empty inline elements which become newly empty but preserve the styles for next editing r=m_kato

Comment 1

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I created an account, and tried to compose a new email with the default settings, but I cannot reproduce it with the STR. Do you still reproduce it?

It could be fixed by the Yahoo side? (bug 1730429 aligns the behavior to the other browsers.)

Comment 2

[Petruta Horea [:phorea], Desktop Test Engineering (back on Sep 5th)]

Attachment: outlook.gif

(In reply to Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(Away: ~6/29) from comment #1)

This reproduces on all Firefox versions since bug 1730429 landed.

It also reproduces on outlook mail, please see the attachment (I will provide the credentials we use for outlook on a private message).

Comment 3

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Thank you. I took a mistake. I checked with foreground color, not background color. I managed reproduce this too.

Comment 4

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

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

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Sigh, I got the expected result with raw DOM test cases. So, this could be caused by that Gecko runs a UA specific path in Outlook and Yahoo! Mail.

• https://jsfiddle.net/d_toybox/xwa91u4j/1/
• https://jsfiddle.net/d_toybox/xwa91u4j/2/

Comment 6

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Oh, I see. This is what the minimized testcase.
https://jsfiddle.net/d_toybox/xwa91u4j/3/

Comment 7

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

At the post-processing here, the DOM tree becomes:

<span style="background-color:xxx">foo</span></div>
<div><span style="background-color:xxx">{}<span><br></div>

Then, the <span> is removed.

However, Chrome creates the new paragraph as:

<div><span style="background-color:xxx">{}<br><span></div>

So, perhaps, we should move the invisible <br> into the <span> before checking if it's removable.

Comment 8

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

It seems that the Outlook issue is another bug.

Comment 9

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I realize that this bug is not reproducible if I test it with list items.

The symptom is different in Yahoo! Mail and Outlook from point of view of the DOM tree result. However, I found a useful utility method CopyLastEditableChildStylesWithTransaction which is used by HandleInsertParagraphInListItemElement and it fixes both Yahoo! Mail and Outlook, so using it must be the safest way to uplift.

Comment 10

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Hmm, CopyLastEditableChildStylesWithTransaction has some problems. So it's not good to use in a patch for uplifting to ESR...

Comment 11

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Attachment: Bug 1778091 - Make `HTMLEditor` move invisible `<br>` element into the empty inline element after splitting a paragraph at end r=m_kato!

In Yahoo! Mail, the paragraph has <br> after <span> element which has
background-color. In this case, Gecko creates the following DOM tree after
splitting the paragraph:

<div><span>foo</span></div><div><span></span><br></div>

Then, the empty <span> in the right paragraph will be removed by the
post-processing. However, in this case, the inline element is required for
preserving the style continued from the previous paragraph.

In this case, we should move the <br> element into the <span> to make
it non-empty and avoid it to be removed. This is compatible with Chrome.

Comment 12

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

The patch will fix the similar issue in Outlook too. However, it might be not safe to uplift in to ESR since it changes our traditional behavior. I think that it's safe to fix it in ESR102 after shipping the fix in the release channel.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5f2fe4601a9e
Make `HTMLEditor` move invisible `<br>` element into the empty inline element after splitting a paragraph at end r=m_kato

Comment 14

[bszekely]

https://hg.mozilla.org/mozilla-central/rev/5f2fe4601a9e

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/34787 for changes under testing/web-platform/tests

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 17

[Petruta Horea [:phorea], Desktop Test Engineering (back on Sep 5th)]

Verified as fixed across platforms using Firefox 104 beta 5.

Comment 18

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Release Note Request (optional, but appreciated)
[Why is this notable]:
Regression in major web app (Yahoo Mail (this bug) and Outlook (bug 1778249))
[Affects Firefox for Android]:
Not sure whether they use same UI for mobile, but if in the desktop mode, it should be reproducible.
[Suggested wording]:
Highlight color is preserved correctly after typing Enter in the mail composer of Yahoo Mail and Outlook.
[Links (documentation, blog post, etc)]:
Nothing.