[Bug] Firefox tab crashes after dismissing Quick Menu only when Firefox Inspector's Animations View has been activated once

[Fanolian]

I reported this in Bug 1783021 - Tab crashes caused by extension "ContextSearch web-ext"'s Quick Menu after Inspector's Animations View has been activated once. Here's a copy-and-paste of that bug report:

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0 Build ID: 20220803094413

Steps to reproduce

1. In a new profile, install ContextSearch web-ext 1.41.1. Keep extension's settings as default.
2. Open any webpage, e.g. https://www.example.com/.
3. Open Firefox's Inspector. Switch the right-pane to Animations.
4. Invoke ContextSearch's Quick Menu by: 4a. highlighting a word; and then 4b. holding a right-click.
5. Dismiss Quick Menu by left-clicking anywhere outside Quick Menu.

Actual result

The tab crashes with signature [@ mozilla::dom::MutationObservers::NotifyAnimationMutated].

Expected result

No crashes.

Additional notes

1. A crash can be triggered even if Animation View is not active, as long as it has been activated at least once after a page is loaded. I.E. (Step 1 is implied): a: step 2 > 3 > switch to Layout View / close Inspector > step 4 > 5 => Crash; b: step 2 > 3 > keep Animations View active > reload page > 4 > 5 => Crash; c: step 2 > 3 > switch to Layout View / close Inspector > reload page > 4 > 5 => NO Crashes; d: open a new tab (about:newtab) > step 3 > 2 > 4 > 5 => Crash.

2. This crash is a longstanding bug. I can reproduce it since 2020-05-13 build but only because ContextSearch's Quick Menu stopped working/cannot be invoked prior to that build.

3. ContextSearch's Quick Menu works most of the time besides this scenario.

[Fanolian]

The crash happens since v1.40rc3. I have left a video in Firefox's bug report.

[ssborbis]

Yep, I'm seeing it.

I'll see if I can narrow down what's happening on my end.

[ssborbis]

I'll give you what I know so far.

If an element attached to the shadow DOM is removed before a CSS transition completes, it will crash the tab.

I've been using this test code in the console, after bringing up the animations tab.

1. create custom DOM element attached to document.documentElement
2. attach shadowRoot to the new element
3. attach DIV with CSS transition to shadowRoot
4. run CSS transition, but remove DIV before transition completes

(() => {
  let s = document.createElement('shadow-test');
  document.documentElement.appendChild(s);
  s.attachShadow({mode:"open"});

  let property = 'opacity';
  let initial = '1';
  let final = '0';

  let div = document.createElement('div');
  div.style = `${property}:${initial};transition:${property} 2s;`

  s.shadowRoot.appendChild(div);
  div.offsetWidth;

  div.style[property] = final;
  setTimeout(() => div.parentNode.removeChild(div), 1000);
})();

[ssborbis]

On further testing, it may only happen when transitioning the opacity. top and left seemed to have no effect.

[ssborbis]

My mistake. I needed to momentarily click over to the Inspector tab and back to console to trigger the bug. Indeed, it does crash with left, top, width, opacity, and no doubt others. In fact, I managed to crash Firefox completely by running the code while the tab in question was in the background, and I was typing here.

[ssborbis]

Looks like this is patched in FF 107+