[Bug][Wiki Customization Snippets] v4.0.1 - Tab Numbering and Counting CSS broken.

[TFWol]

Since the update, CSS for Tab Numbering and Counting is janky.

The variables dealing with counting tabs is different. I think it's only counting what's seen in the view port.

From Wiki

#tabbar {
  counter-reset: vtabs atabs tabs;
  /* vtabs tracks visible tabs, atabs tracks active tabs, tabs tracks all tabs */
}
tab-item:not(.collapsed):not(.discarded) {
  counter-increment: vtabs atabs tabs;
}
tab-item:not(.collapsed) {
  counter-increment: vtabs tabs;
}
tab-item:not(.discarded) {
  counter-increment: atabs tabs;
}
tab-item {
  counter-increment: tabs;
}

Are the variables the only thing that needs to change?

[piroor]

As the version note https://github.com/piroor/treestyletab/releases/tag/4.0.1 said, customization with CSS counter won't be work as expected anymore. You'll need to create something helper addon to do such customizations.
You may need to use APIs like this: https://github.com/piroor/treestyletab/wiki/API-for-other-addons#get-tree-information-for-all-tabs-in-a-window-as-a-flat-array

[irvinm]

@piroor in thinking about this a little bit a helper addon makes a lot of sense. (Using either TST API or even FF API to track this information)

The part I was wondering is if you had any option or thoughts how to solve taking the information from the helper addon and being able to display it in the TST sidebar or make the information available via CSS. I know there is the sub panel API, but I think you are treating that as experimental and that there is a limitation of only 1 sub panel at a time.

Ideally, just being able to populate and maintain "vtabs, atabs, tabs" would be best as people's CSS could stay the same. However, these are just CSS counters and I don't think the helper addon would have access to add, maintain, or update this information. I don't think makes sense in this context.

Could the helper addon add CSS variables to the sidebar style sheet (--vtabs: 0, --atabs: 0, --tabs: 0) during the "Register to TST" process, then monitor and update those values ... (would that be done by registering to TST again?)

I'll think more about it, but would love your opinion.

[piroor]

I think we need to use APIs to add extra contents into tabs https://github.com/piroor/treestyletab/wiki/Extra-Tab-Contents-API with place=front.

[Decohero]

I had been expecting a tab counter extension based on the TST API to appear, but I never saw one. The absence of an accurate tab count has been so disruptive to my workflow that I tried creating one myself. It's not perfect, but for those few who may require this feature, it seems to work well enough:

Plugin here:
https://addons.mozilla.org/en-US/firefox/addon/tst-tabcount/

Code here:
https://github.com/Decohero/tst-tabcount

[irvinm]

@piroor, in my case, I am more interested in the functionality of just tracking the total tabs & active tabs. (https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#combined-active-and-total-tab-count)

.newtab-button {
  --tab-count-text: counter(atabs) "/" counter(tabs) " tabs";
}

It is easy enough to track total tabs and loaded tabs just using Firefox APIs, but I can't see any way to make this information available to TST CSS as variables. It is possible to just leave this information with a separate addon and update the addon badge with 1 piece of this information. It would also be possible to utilize the TST sub-panel API, but since there is only 1 sub-panel allowed, this might not be optimal.

I did make an addon for this as a test for the total tabs and it works fine.

Can you think of any way to make this information available to TST CSS? If not, maybe I could just update and pass that TST CSS with the actual values each time it changes. However, add\changing CSS only happens when registering with TST, right? Should I just do that on each change?

Example CSS:

.newtab-button {
  --tab-count-text: "39 / 860 tabs";
}

Example call with just CSS:

async function registerToTST() {
  try {
  let result = await browser.runtime.sendMessage(TST_ID, {
    type: 'register-self',
    // The name of your addon (string, optional)
    name: browser.i18n.getMessage('extensionName'),
    // Icons (used for extra context menu items, works on TST 2.4.18 and later)
    icons: browser.runtime.getManifest().icons, // { '16': '/path/to/icon.png', 24: '...', ... }
    // The list of listening message types (array of string)
    listeningTypes: ['tab-mousedown', 'tab-mouseup'],
    // Accept bulk messages from TST (works on TST 4.0 and later)
    allowBulkMessaging: true,
    // Receive notified messages with light tree (works on TST 4.0 and later)
    lightTree: true,
    // Extra style rules applied in the sidebar (string, optional)
    style: `
      .newtab-button {
        --tab-count-text: "39 / 860 tabs";
      }
    `,
    // Extra permissions to receive tab information via TST's API (works on TST 3.0.12 and later)
    permissions: ['tabs']
  });
  }
  catch(e) {
    // TST is not available
  }
}
registerToTST();

[TFWol]

I was mainly interested in this too. I had hoped fixing this dependency would make all the other snippets work, but it looks more complicated than I thought.