Continued active and total tab solution counting

[irvinm]

Continuing with coming up with solutions to count the active and total tabs (#3472, #3540, etc), I spent some time today flushing out another possible solution extending somewhat what rixx already provided with their addon.

In my case, I also wanted to track both active and total tabs and I know some people also care about "per window" tracking as well. (Although I only use 1 window 99% of the time)

I was able to come up a fairly good solution for my use case, but @piroor there might be a bug in here. I've noticed that when I create a new WINDOW, the custom CSS I passed to TST to be applied to the newtab button is not created\applied when the window is first created. As soon as there is any change to the tab states from that point, the CSS is applied properly.

Right after new window is created:

After tab states change ... new tab in this case:

Video example:

updateTabCount code:

const updateTabCount = async () => {
  try {
    // Get all tabs globally
    const allTabs = await browser.tabs.query({});
    const loadedTabsGlobal = allTabs.filter(tab => !tab.discarded).length;
    const totalTabsGlobal = allTabs.length;

    // Get all windows
    const windows = await browser.windows.getAll();
    let contents = '';

    // Iterate through each window to get tabs info
    for (const window of windows) {
      const tabsThisWindow = await browser.tabs.query({ windowId: window.id });
      const loadedTabsThisWindow = tabsThisWindow.filter(tab => !tab.discarded).length;
      const totalTabsThisWindow = tabsThisWindow.length;

      // Generate HTML content for this window
      contents += `<div style="font-family: monospace; display: table;">
                      <div style="display: table-row;">
                          <span style="display: table-cell; text-align: right;width: 80px;">Window ${window.id}:</span>
                          <span style="display: table-cell; text-align: right; padding-left: 5px; width: 25px;" id="loadedTabsThisWindow-${window.id}">${loadedTabsThisWindow}</span>
                          <span style="display: table-cell; padding-left: 2px;">/</span>
                          <span style="display: table-cell; text-align: left; padding-left: 2px; width: 25px;" id="totalTabsThisWindow-${window.id}">${totalTabsThisWindow}</span>
                          <span style="display: table-cell; padding-left: 5px;">tabs</span>
                      </div>
                   </div>`;
    }

    // Add global tabs info
    contents += `<div style="font-family: monospace; display: table;">
                    <div style="display: table-row;">
                        <span style="display: table-cell; text-align: right;width: 80px;">Total:</span>
                        <span style="display: table-cell; text-align: right; padding-left: 5px; width: 25px;">${loadedTabsGlobal}</span>
                        <span style="display: table-cell; padding-left: 2px;">/</span>
                        <span style="display: table-cell; text-align: left; padding-left: 2px; width: 25px;">${totalTabsGlobal}</span>
                        <span style="display: table-cell; padding-left: 5px;">tabs</span>
                    </div>
                 </div>`;

    // Update the TST new tab button with the generated content
    await browser.runtime.sendMessage('[email protected]', {
      type: 'set-extra-contents',
      place: 'new-tab-button',
      contents: contents,
    });
  } catch (e) {
    console.error('Failed to update tab count', e);
  }
};

register to TST ... initially and when a window is added or removed to update the button height:

// Register the addon with TST
const registerToTST = async () => {
  try {
    const windows = await browser.windows.getAll();
    const height = 1.5 + windows.length; // Calculate new height
    // Base CSS to include with updates
    const baseCSS = `
      .newtab-button::after {
        display: none;
      }
      .newtab-button .extra-items-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    `;
    // New CSS for updating the height of .newtab-button
    const heightCSS = `.newtab-button { height: ${height}rem !important; }`;
    // Combine the base CSS with the new height CSS
    const combinedCSS = baseCSS + heightCSS;

    // Send a message to TST to update the CSS
    const result = await browser.runtime.sendMessage('[email protected]', {
      type: 'register-self',
      name: 'Your Addon Name',
      style: combinedCSS,
      listeningTypes: ['ready', 'tabbar-updated']
    });

    if (!result.success) {
      console.error('Failed to register addon with TST');
    }
  } catch (e) {
    console.error('Failed to communicate with TST', e);
  }
};

[irvinm]

@piroor I have placed the code on Github as it mostly works. I will clean it up and publish the addon after resolving some of these challenges.

Code location: https://github.com/irvinm/TST-Active-and-Total-Tabs

Problems I am seeing:

• I am never getting a "ready" message back from TST. Plan was to call registertoTST (to register & set newtab button height) then to call updateTabCount to update the text via CSS via set-extra-contents.
  -- Bad workaround right now was to call "register", "wait", then "update" (doesn't work without the wait)
  --- https://github.com/irvinm/TST-Active-and-Total-Tabs/blob/9e7b89572230218d041ddea9d4b689afa85f48c6/background.js#L24-L40
  - If I hide and show the sidebar via F1, the text on the button is not displayed as well. I have fixed this.
  -- Again, it works after adding\changing any tabs after that.

Are there any problems with trying to "register" multiple times with TST due to the changes in CSS? Or another question, should I be able to call "register" then immediately call TST again to set-extra-contents?

Here is the latest progress which shows the workaround in action (but without the sleep, same as before) and the sidebar hiding and showing not showing the CSS.

[irvinm]

I think I have figured things out and have submitted the addon to AMO.

[irvinm]

https://addons.mozilla.org/en-US/firefox/addon/tst-active-and-total-tabs-ctr/