Treestyletab: Add ColorfulTabs feature to new Tree Style Tab WebExtension

[MurzNN]

Firefox have very useful ColorfulTabs extension that colorize tabs per domain. It works well with XUL version of Tree Style Tab extension, but new Tree Style Tab WebExtension implement his own tab bar, that cannot be styled via other addons.

So will be good to add in new Tree Style Tab WebExtension same build-in feature for colorize tabs in per-domain basis. What do you think about this?

[piroor]

Sorry I won't implement it as a built-in feature of TST. Instead I recommend you to create new addon which can work with it. It now provides some APIs to register stylesheet to the sidebar from other addons, and tabs in the sidebar have an attribute data-current-uri. So, if you register something generated style rules like following, it will work like the legacy ColorfulTabs:

.tab[data-current-uri^="https://www.google.com/"] { background: green; }
.tab[data-current-uri^="https://www.mozilla.com/"] { background: red; }

[jjaksic]

There is now this fork: https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab-rainbowtabsfork/

[piroor]

@jjaksic Wow! By the way, now TST has some APIs to help implementing separate addon for the feature. For example you can register custom CSS for the sidebar. How about develop the feature as a separate addon?

[MurzNN]

@meph1570 can you lookup a TST API for possibility to make Colored tabs as TST plugin, instead of separate forked extension? This will be easier to support, instead of forking and monitor all new commits.

[MurzNN]

@piroor Can you provide some short code example of TST API usage for coloring single tab (via applying css rules directly to this tab, not as a global css rule with selector such as .tab[data-current-uri^="https://www.google.com/"] { background: green; })? At now I see only examples how to alter css only for specific tabs (all, hover, active, etc), or via global css rule.

[piroor]

@meph1570 @MurzNN OK, here is sample codes to set color of TST's tabs from ColorfulTabs:

(async () => {
  const kTST_ID = '[email protected]';

  // define colors
  browser.runtime.sendMessage(kTST_ID, {
    type: 'register-self',
    style: `
      .tab.colorfultabs-group-1 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7),
                                                    rgba(183, 144, 228, 0.5),
                                                    rgb(183, 144, 228)),
                          linear-gradient(to left, rgb(183, 144, 228),
                                                   rgb(183, 144, 228));
      }
      .tab.colorfultabs-group-2 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7),
                                                    rgba(228, 196, 144, 0.5),
                                                    rgb(228, 196, 144)),
                          linear-gradient(to left, rgb(228, 196, 144),
                                                   rgb(228, 196, 144));
      }
    `
  });

  // set classes for tabs
  browser.runtime.sendMessage(kTST_ID, {
    type:  'add-tab-state',
    tabs:  (await browser.tabs.query({ url: '*://piro.sakura.ne.jp/*' })).map(tab => tab.id),
    state: 'colorfultabs-group-1'
  });
  browser.runtime.sendMessage(kTST_ID, {
    type:  'add-tab-state',
    tabs:  (await browser.tabs.query({ url: '*://addons.mozilla.org/*' })).map(tab => tab.id),
    state: 'colorfultabs-group-2'
  });

  // update color definitions
  browser.runtime.sendMessage(kTST_ID, {
    type: 'register-self',
    style: `
      .tab.colorfultabs-group-1 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7),
                                                    rgba(183, 144, 228, 0.5),
                                                    rgb(183, 144, 228)),
                          linear-gradient(to left, rgb(183, 144, 228),
                                                   rgb(183, 144, 228));
      }
      .tab.colorfultabs-group-2 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7),
                                                    rgba(228, 196, 144, 0.5),
                                                    rgb(228, 196, 144)),
                          linear-gradient(to left, rgb(228, 196, 144),
                                                   rgb(228, 196, 144));
      }
      .tab.colorfultabs-group-3 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7),
                                                    rgba(144, 228, 185, 0.5),
                                                    rgb(144, 228, 185)),
                          linear-gradient(to left, rgb(144, 228, 185),
                                                   rgb(144, 228, 185));
      }
    `
  });
  browser.runtime.sendMessage(kTST_ID, {
    type:  'add-tab-state',
    tabs:  (await browser.tabs.query({ url: '*://www.google.com/*' })).map(tab => tab.id),
    state: 'colorfultabs-group-3'
  });
})();

• You can register your addon multiple times (without unregistering), for updating style sheet.
• You can give custom class for each tab. You can apply custom color for each tab based on the custom class.
• You'll need to listen browser.tabs.onCreated and browser.tabs.onUpdated to apply colors for newly opened tabs.

But there is a problems on TST:

• TST doesn't notify "sidebar is opened" message to other addons. ColorfulTabs need to apply stylesheet after TST's sidebar is initialized, so I should add new notification message to TST for this purpose.

[piroor]

I've implemented new notification message types sidebar-show and sidebar-hide. Se also: https://github.com/piroor/treestyletab/wiki/API-for-other-addons#when-the-tst-sidebar-is-shownhidden
They messages will be available on the next release of TST.

[infinity0]

For the time being I've rebased @meph1570's fork here https://github.com/infinity0/treestyletab/ if people want to use it, but would prefer to see it as a separate extension.

[MurzNN]

@infinity0 Can you describe what is difference between your and @meph1570's fork?

[infinity0]

It's based off the latest TST and I fixed a few bugs, otherwise there's no changes.

[MurzNN]

So we can hope, that you will periodically update codebase to latest TST in your fork? Great, thanks!
Can you publish your fork to Mozilla repository like this https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab-rainbowtabsfork/ for easy install/upgrade?

[infinity0]

@MurzNN part of the reason I did that rebase was to make it easy for someone to see just exactly what that extension actually does, in terms of a single commit. That should lower the barrier for spinning this off as a separate extension.

I don't want to upload this to AMO as that would send off the wrong signal, users might start demanding me keep the patch up-to-date. I might do that, I might not, I don't want to get anyone's hopes up. The best solution is for someone else to maintain a separate extension as suggested above.

[MurzNN]

I start creating separate extension using TST API for colorizing tabs here https://github.com/MurzNN/tst-colored-tabs - this is only alpha tests at now, no working features.

[mausalimi]

ok, it can be done obviously.

fork by jjaksic works, but is outdated.

the one by infinity0 does not work at all for me.

[infinity0]

It's not supposed to work for you.

The Debian package works fine.

[mausalimi]

ah ok, it doesn't say it works only for some people.

[MurzNN]

I pushed first commit to https://github.com/MurzNN/tst-colored-tabs where tab colorize function seems works normally, and published here https://addons.mozilla.org/ru/firefox/addon/tst-colored-tabs/

[mausalimi]

great, it looks good after a quick test with newest TST and FF 65.0 b8

/edit: one problem though: after a browser restart, all tabs are uncolored again.

[MurzNN]

I've released 0.2 version with bugfix & improvements, please fill detected bugs into https://github.com/MurzNN/tst-colored-tabs project issues.
And let's close this issue.