Import button can break due to animations

[WAZAAAAA0]

Pressing the Delete All and Import buttons in a quick succession with animations enabled can break the Import screen. Steps to reproduce:

REQUIREMENT: you need a site with at least 2 cookies in it

1. click Delete All and Import immediately after (Left Click on Delete All -> Tab -> Space with the help of a keyboard makes it easier to reproduce)
2. you'll find yourself in a situation where only the Cancel and Import buttons exist but there's no text field to write anything, forcing you to Cancel

SHOWCASE:

Cookie-Editor.Import.animation.bug.mp4

[volovikariel]

Investigating this right now - just writing down some findings here.

Having at least one cookie not be removed seems to prevent the bug ( 😕 ?!).

Tested by replacing the existing code that removes the cookies:

cookie-editor/interface/popup/cookie-list.js

Lines 322 to 326 in 0d88685

	for (const cookieId in loadedCookies) {
	if (Object.prototype.hasOwnProperty.call(loadedCookies, cookieId)) {
	removeCookie(loadedCookies[cookieId].cookie.name);
	}
	}

With the following (which instead removes all but one of the cookies):

for (const cookieId of Object.keys(loadedCookies).slice(0, -1)) {
  if (Object.prototype.hasOwnProperty.call(loadedCookies, cookieId)) {
    removeCookie(loadedCookies[cookieId].cookie.name);
  }
}

Update 1
Ah - I think onCookiesChanged is fired whenever the CookieStore changes (which happens when the cookies are deleted).

This in turn calls the showNoCookies method whenever there's no cookies left.

cookie-editor/interface/popup/cookie-list.js

Lines 1016 to 1026 in 0d88685

	if (changeInfo.removed) {
	if (loadedCookies[id]) {
	loadedCookies[id].removeHtml(() => {
	if (!Object.keys(loadedCookies).length) {
	showNoCookies();
	}
	});
	delete loadedCookies[id];
	}
	return;
	}

I'm guessing the two animations are fired in quick succession, first the showNoCookies one, then the import one.

Not sure how to go about fixing it yet, but looking into it 👍

[volovikariel]

I believe I figured it out.

The issue is that the showNoCookies triggers regardless of what page we're on.

If we're not on the "main" (Cookie-Editor) page, then there's no reason to showNoCookies.

I added a simple check that makes sure that we are on the main page. If we're not, we return early.

function showNoCookies() {
  if (disableButtons) {
    return;
  }
  // Don't show the no-cookies message if we aren't on the correct page (e.g: if we're on the import page)
  const pageTitle =
    pageTitleContainer?.querySelector('h1')?.textContent ?? '';
  if (pageTitle !== 'Cookie-Editor') {
    return;
  }
  cookiesListHtml = null;

It seems to work fine for me.
Will make a PR 👍