[Bug] "Undefined" entries at bottom of sidebar

[wlonkly]

Abstract

I regularly see one or two "Undefined" "tabs" at the bottom of my TST sidebar, like so:

(And in that screen shot there's an extra closing X, too, which is a new problem for me.)

I can't interact with them, and they appear in multiple browser windows, although a new, empty browser window doesn't have them. I haven't been able to figure out how to cause them to appear.

This is not a recent version issue, it's been happening on and off for as long as I can remember.

Steps to reproduce

I can't reproduce this on a clean profile, but in my current profile:

1. Open a new window.
2. Create a few tabs until the the "undefined" entries appear.
3. Close one tab and see that the "undefined" entries disappear.

I also tried disabling each of my extensions, one at a time, but the problem still happens. I also tried disabling all extensions except TST for private browsing, and in a private browsing window the problem still happens.

I'm happy to do some exploring in Browser Toolbox if you let me know what to check.

Environment

• Platform (OS): MacOS 14.4.1
• Version of Firefox: 124.0.2
• Version (or revision) of Tree Style Tab: 4.0.12

[wlonkly]

Ah, I think this one is on me -- it's the <ul id="dummy-tabs"> which I am inadvertently revealing with custom CSS. I forgot I even had custom CSS.

For the record, here's my custom CSS as of right now, before I figure out what's wrong. I'll close this issue with a note about what was causing the dummy-tabs to show shortly.

/* Show title of unread tabs with  italic font */
:root.sidebar tab-item.unread .label-content {
  font-style: italic !important;
}

/* Add private browsing indicator per tab */
:root.sidebar tab-item.private-browsing tab-label:before {
  content: "🕶";
}

/* narrow tabs with no border or shadow */
tab-item {
  --tab-size: 24px !important;
  height: var(--tab-size);
  border: none !important;	
  box-shadow: none !important;
}

/* only display closebox on hover */
#tabbar tab-item:not(:hover) tab-closebox {
  display: none;
}

/* hide new tab button */
.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0 !important; /* Eliminate dead space on bottom */
}

/* background blends into tabs */
#background {
  background-color: var(--tab-surface);
}

[wlonkly]

It was this. I'm not even sure where this came from, or why I have it, since removing it doesn't seem to change the appearance of the sidebar, other than making the dummy-tabs ul visible.

/* background blends into tabs */
#background {
  background-color: var(--tab-surface);
}