Closed Bug 1592054 Opened 5 years ago Closed 5 years ago

There's a brief flash of unstyled tab content (especially noticeable in debug builds during tests)

Categories

(Firefox :: Tabbed Browser, defect, P1)

defect

Tracking

()

RESOLVED FIXED
Firefox 72
Tracking Status
firefox72 --- fixed

People

(Reporter: bgrins, Assigned: bgrins)

Details

Attachments

(3 files)

Attached image tab-with-patch.gif

What happens currently is that we first append child content into the tab
when it's connected, then we do attribute inheritance which sets the relevant
styling properties (https://searchfox.org/mozilla-central/rev/11d9c7b7fa82fdfb8ac2a8f0864e9d8d5fe2b926/browser/base/content/tabbrowser-tab.js#109-110). I believe since this is happening inside connectedCallback we are getting a brief period of time where the tab appears unselected.

Attached image tab-without-patch.gif

This is the problem (accidentally attached the gif with the fix applied in Comment 0).

This prevents a brief flash of unstyled tab content that can be noticed especially
in debug builds.

What happens currently is that we first append child content into the tab
upon connection, then we do attribute inheritance which sets the relevant
styling properties.

With this change we first set up the child content and attributes before appending
the tab into the DOM, so that it's ready to render after being appended.

Using shadow DOM initialized in the constructor of the Custom Element would fix this too - though it would require rewriting a lot of CSS to use Shadow Parts.

Assignee: nobody → bgrinstead
Priority: -- → P1
Pushed by bgrinstead@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/31efcbdc024b
Initialize tabbrowser-tab contents before appending it into the DOM r=dao
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 72
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: