Closed Bug 1562928 Opened 1 year ago Closed 1 year ago

Thumbnail sticks around for dismissed "recommended" tile, alongside unrelated new text (until new thumbnail has been downloaded)

Categories

(Firefox :: New Tab Page, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 70
Iteration:
70.1 - Jul 8 - 21
Tracking Status
firefox69 + verified
firefox70 --- verified

People

(Reporter: dholbert, Assigned: thecount)

References

Details

(Keywords: github-merged)

Attachments

(6 files, 1 obsolete file)

STR:

  1. Start Firefox with a fresh profile, on a slow network connection.
  2. Open a new tab.
  3. Once some recommendation tiles have appeared, hover one of them and use its "..." top-right menu to dismiss it.

ACTUAL RESULTS:
Its text is immediately replaced with a new recommendation, but the thumbnail sticks around for some time (until the new thumbnail is available). This can look pretty bizarre if the new text and old thumbnail are unrelated.

EXPECTED RESULTS:
The old thumbnail should disappear immediately when the text changes (e.g. it could be replaced by a blank gray area and then the new thumbnail).

I'm using Nightly 69.0a1 (2019-07-01) (64-bit) on Linux.

See attached screencast, which I captured while tethered with my cell phone in an area with very slow reception.

Attachment #9075407 - Attachment description: screencast of bug → screencast of bug (the interesting part starts ~10 seconds in)

The thumbnail here is a <picture> element, and we immediately update the src / srcset attributes on its img descendant. In both Chrome and Firefox, this pattern produces the behavior described -- the old image's pixels remain visible until the new image is downloaded & ready to draw.

So, we should probably not be updating the thumbnail this way. Instead, we probably be replacing the img descendant entirely. This ensures that the old image will stop being displayed promptly, even if the new image isn't ready yet.

Here's a reduced testcase of what I think the new tab page is currently doing.

If you use the devtools network tab to throttle your network connection & disable the network cache, then you can see that the old image sticks around for an appreciable amount of time (seconds, depending on your [throttled] network speed) even after you've clicked the button to dismiss it. This happens in both Chrome and Firefox, so it's not a gecko bug -- it's just the way img elements work.

To really get the image to stop showing up, we have to replace its img element entirely, I think. I'll attach another testcase to demonstrate that behavior.

Here's a demo of one possible fix, discussed above -- replacing the old img element instead of merely tweaking it.

Here's as screencast comparing the two testcases.

Note that in the first half of this screencast (showing attachment 9075414 [details], the current-behavior testcase), the stale image sticks around after I've clicked the button (i.e. after I've dismissed a new-tab tile).

Whereas in the second half, (showing attachment 9075415 [details], the proposed-behavior testcase), the stale image immediately disappears when I click the button (which is arguably the right behavior for a "dismiss" user intent).

Additionally in the original screencast, notice how the 6th card keeps its old image when the 6th card shifts to the 5th slot.

Tawanda - is this an uplift candidate (Do we need this fixed before we go live Sept 3)?

Flags: needinfo?(tkanhema)
Priority: -- → P1
Assignee: nobody → sdowne
Iteration: --- → 70.1 - Jul 8 - 21
Duplicate of this bug: 1559381

Jess - Yes we should try to get this fixed

Flags: needinfo?(tkanhema)
Blocks: 1566202
Status: NEW → RESOLVED
Closed: 1 year ago
Keywords: github-merged
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70

I have verified that the issue is no longer reproducible on the latest Nightly 70.0a1 (Build ID 20190721215935) on Windows 10, macOS 10.14, and Arch Linux 4.14.3.

Status: RESOLVED → VERIFIED

Is this something we should consider uplifting to Beta for Fx69? If so, please nominate this for Beta approval when you get a chance.

Flags: needinfo?(sdowne)

[Tracking Requested - why for this release]:

Sounds like it is.

Flags: needinfo?(sdowne)

FYI, tracking status doesn't guarantee anything about uplifts. It's just a way of noting that we care about that bug for a given release. Approval is handled by requesting it on the patch via the Details link on the attachment and requesting approval-mozilla-beta.

Scott - since this has landed in nightly and has been verified, can you do the official Beta uplift request?

Flags: needinfo?(sdowne)

Beta/Release Uplift Approval Request

  • User impact if declined: User experience and performance issues on newtab.

  • Is this code covered by automated tests?: Yes

  • Has the fix been verified in Nightly?: Yes

  • Needs manual test from QE?: Yes

  • If yes, steps to reproduce: STR:

    Start Firefox with a fresh profile, on a slow network connection. (you can use devtools to make it slow)
    Open a new tab.
    Once some recommendation tiles have appeared, hover one of them and use its "..." top-right menu to dismiss it.

ACTUAL RESULTS:
Its text is immediately replaced with a new recommendation, but the thumbnail sticks around for some time (until the new thumbnail is available). This can look pretty bizarre if the new text and old thumbnail are unrelated.

EXPECTED RESULTS:
The old thumbnail should disappear immediately when the text changes (e.g. it could be replaced by a blank gray area and then the new thumbnail).

  • List of other uplifts needed: None
  • Risk to taking this patch: Low
  • Why is the change risky/not risky? (and alternatives if risky): Tested, verified, on nightly, small changeset, has tests.
  • String changes made/needed: none
Flags: needinfo?(sdowne)
Attachment #9080403 - Flags: approval-mozilla-beta?
Attachment #9080356 - Flags: approval-mozilla-beta?
Flags: qe-verify+

Opps noticed Mardak already did the attachment.

QA Whiteboard: [qa-triaged]
Attachment #9080403 - Attachment is obsolete: true
Attachment #9080403 - Flags: approval-mozilla-beta?

Comment on attachment 9080356 [details]
Bug 1562928 - Thumbnail sticks around for dismissed "recommended" tile, alongside unrelated new text (until new thumbnail has been downloaded)

Fixes some UX issues on the newtab page. Approved for 69.0b8.

Attachment #9080356 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

I have verified that the issue is no longer reproducible with the latest Firefox Beta (69.0b8 Build ID - 20190725174626) on Windows 10, macOS 10.14, and Arch Linux 4.14.3.

You need to log in before you can comment on or make changes to this bug.