How do we customise the groups tab?

[faurehu]

Currently, there are guides for developing add-ons that will enhance features for the sidebar. There are also guides for manipulating the style of the sidebar.

However, I would also like to customise the group tab page. When I collect multiple tabs in a group, I can see which tabs are in this group, I can configure a few settings and I can rename the group. I can also click on the tabs to open the page and I can close them from this view.

I would like to be able to customise this view. Not only would I like to style the page but also add some components, like adding notes for the group itself or for the tabs. Renaming the tabs would also be useful. It would also be useful to be able to drag the tabs within this page and create more groups.

I realize that some of it could be done with css, and that the rest would require add-on extensions. If somebody could point me in the right direction, it would be greatly appreciated.

[irvinm]

At the end of the day, the group tab page is just HTML and applying some TST CSS is fairly simple.

In TST, you basically make any changes to that page by starting with :root.group-tab to specify that page only and then the CSS you want. Simply inspect that page like any other HTML for the elements you want to change.

From the wiki:

On TST 3.5.5 and later user styles are applied to both the sidebar and group tab contents. If you want your styles to be applied only for the sidebar or group tabs, you can use special classes of the root HTML element: sidebar or group-tab. For example: :root.sidebar tab-item { ... }, :root.group-tab li { ... }, and also.

Example, I like to have a yellow box around items I hover over for more clarity:

:root.group-tab li[id^="tab-item"]:hover { 
	border: 1px solid yellow !important;
}

Or add a red background to the close button when hovering over it:

:root.group-tab .closebox:hover::before {
	opacity: 1;
	background: red;
	border-radius: 5px;
}

As for the addon enhancements to that page ... I think you might do something similar. I don't think that trying to write an addon integrated with TST brings much value, but looking for "group-page.html" URLs and then embedding functionality into the HTML might work.

Think about parsing (regex?) the URL and maybe looking for "/resources/group-tab.html" out of "moz-extension://fc4f9767-7140-437e-821d-392caf47413e/resources/group-tab.html?title=Main#". Then on those pages, inserting/modifying what you want to add to those pages.

As for the specific items you mentioned:

• Adding notes for the group itself or for the tabs.
  • Definitely an addon idea. Given the group tab could use all of the space in the main area, maybe add something to the title bar row like a button or drop down that pops up a text area for notes.
• Renaming the tabs
  • If you are talking about renaming the actually name of the tab, there are already other addon that do that. If you don't actually change the name of the tab, TST would likely "repaint" that page with the actual names each time a tab is added or removed. So if you could capture some "action" on a URL on that page, then just take that text and change the tab label.
• Drag the tabs within this page and create more groups.
  • I've always thought this would be helpful, but might be fairly complex from a UI perspective. However, once done, the underlying "actions" would be easy with a bunch of "move tab" commands to arrange the tabs.