Automatic panel header/title tab

sonofevil commented 3 months ago

Description

Since panels don't show up in any way in Firefox' regular tab bar, it would be nice to have some sort of visual indicator for where a panel/group starts and ends.

So perhaps the addon could (optionally) automatically create a header tab with the name and icon of the group and place it at the start of a tab group. I have a lot of pinned tabs so I've mainly used the addon to sort them by topic into groups. Having each group separated by an easily identifiable header icon would be very handy.

Perhaps the user could also optionally manage groups by where those header tabs are placed, i.e. what tabs are between the current and the next header, with the addon automatically updating groups based on that. And when you open the header tab, you can configure name and icon. Just some possibilities.

I don't know how to best deal with groups containing both pinned and unpinned tabs. Personally I only really care about grouping pinned tabs.

sonofevil commented 3 months ago

In fact, since tab elements have their title stored in a top-level "label" property, these header tabs could even be used to style tab groups with userChrome.css. Like this:

Browser html: <tab is="tabbrowser-tab" label="TabGroupHeader(teal): Github Issues" class="tabbrowser-tab" context="tabContextMenu" labeldirection="ltr" fadein="true" style="" pinned="true" pending="true">

userChrome.css:

tab[label^="TabGroupHeader(teal)"] ~ tab:not(tab[label^="TabGroupHeader(teal)"] ~ tab[label^="TabGroupHeader"] ~ tab) {
    background-color: #008080 !important; 
}

This styles every tab following a tab with a title starting with "TabGroupHeader(teal)" except if there is another tab whose title starts with "TabGroupHeader" inbetween. (This means we can't use the same style rule for two groups tho.) Needs some tweaking obviously.

Furthermore, we could use this to shrink unpinned header tabs to a small size or even hide them so they don't take up any extra space on the tab bar. Lots of possibilities.

sonofevil commented 3 months ago

Basic proof of concept Header tab html:

 <!DOCTYPE html>
<html>
<head>
  <title>TabGroupHeader(red): Github</title>
  <link rel="icon" type="image/x-icon" href="resource://usercontext-content/briefcase.svg">
</head>
<body>

<h1>This is a Tab Group Header</h1>

</body>
</html>

userChrome.css:

tab[label^="TabGroupHeader(red)"], tab[label^="TabGroupHeader(red)"] ~ tab:not(tab[label^="TabGroupHeader(red)"] ~ tab[label^="TabGroupHeader"] ~ tab):not([label^="TabGroupHeader"]) {
  background-color: red !important;
}

Result: Screenshot_20240327_141431

sonofevil commented 3 months ago

Here's a nicer look:

/* General group style */
tab > stack::before {
  width: 200%;
  height: calc(var(--tab-min-height) / 1.3);
  position: absolute;
  align-self: center;
  border-style: solid;
  border-width: 2px 0px;
}

tab[label^="TabGroupHeader"] > stack::before {
  border-radius: 5px;
  left: 50%;
}

/* Tab group 1 (red) */
tab[label^="TabGroupHeader(red)"] > stack::before, 
tab[label^="TabGroupHeader(red)"] ~ tab:not(
  [label^="TabGroupHeader"], 
  [label^="TabGroupHeader(red)"] ~ [label^="TabGroupHeader"] ~ *
  ) stack::before {
  content: "";
  border-color: red;
}

tab[label^="TabGroupHeader(red)"] .tab-icon-image {
  fill: red !important;
}

Screenshot_20240327_172812

Edit: I think it is futile to use exception rules (:not) to stop the styling at the next header. I actually don't think it's possible with CSS to do it in a way that let's you re-use the same rule for multiple containers. And thinking about, there seems to be no actual benefit over instead just having containers further down the line override the previous rules. For "container-less" tabs we can just use the default "Tabs" container. For unpinned tabs, separate header tabs would be needed.

albino1 commented 3 months ago

Since panels don't show up in any way in Firefox' regular tab bar, it would be nice to have some sort of visual indicator for where a panel/group starts and ends.

It might be easier and make more sense to just hide the inactive tabs of the other panels instead of showing them all, then every tab you see is in the panel you're currently browsing:

Tabs -> Native (horizontal) tabs -> Hide Native Tabs of Inactive Panels

mbnuqw / sidebery

Automatic panel header/title tab #1546

Description