Affected versions

• 88.0a1(2021-03-25), 87.0b2

Affected platforms

• WIndows 10, Ubuntu 20;

Steps to reproduce

1. Launch Firefox, enable DevTools;
2. Open the Stylesheet tab;
3. Load any webpage;
4. (Optional) navigate across pages;

Expected result

• stylesheet section is populated with data;

Actual result

• the eye icon appears pixelated or deformed at times while loading;

Regression range

• First bad: 2019-09-14;
• Last good: 2019-09-13;
• Pushlog: URL;

Additional notes

• attached recording to best illustrate the issue;
• issue triggered while data sets, on some cases the icon "stretch" happens after the cell "settles down"/sets.
• is not influenced by size of webpage loaded, triggers to both light or heavy loaded webpages on "bad" builds.

Thank you for the report Cristian.

I could reproduce this problem in Win10 + Nightly

Honza

Note: this is coming from the following animation https://searchfox.org/mozilla-central/rev/be413c29deeb86be6cdac22445e0d0b035cb9e04/devtools/client/themes/splitview.css#32

/* Loading animation */
@keyframes item-load {
  0% {
    transform: scaleY(0) translateY(-100%);
  }
  100% {
    transform: none;
  }
}

.splitview-nav > li {
  animation: item-load .5s var(--animation-curve);
  /* ... */
}

Not sure what the expectation is here.
I think with such a transform, you can expect icons to be blurry before the animation ends.
The only "solution" would be to get rid of the animation. I don't think it brings much and I would be ok with removing it.

(splitview is only used by the styleeditor)

I'm removing the animation in Bug 1766811