Support for containers

[martinthomson]

The current UX for containers uses a coloured band at the top of the tab to indicate which container is active for that tab.

[Work-Parker]

Still having this issue. Firefox Nightly on Windows 10 64 bit

[bwinton]

Yep. No-one has worked on it, and it's not in the roadmap, so it's unlikely to be fixed anytime soon… But you can follow this bug to see when it does get fixed. 🙂

[Work-Parker]

Any way I can signal boost it or whatever so they can put this on the roadmap?

[bwinton]

I'm the person responsible for the roadmap, so, uh, not really… 😉

(Containers is a really cool technology, but the current usage numbers are so low that it's just not as important as the other things I need to do. If someone submitted a pull request that added container support, I wouldn't be opposed to merging it, but I don't see having the time to work on it myself in the near future. Which probably isn't the answer you were hoping for, but I wanted to be honest with you.)

[Work-Parker]

Not really, but I don't mind. Just trying to help out where I can, and if there are more important issues that need addressing then we should defiantly help with those first. Can you point me where I should go so I can help with those?

[bwinton]

Possibly… What kind of work are you looking to do? (Did you want to try adding container support and submitting a pull request?)

[Work-Parker]

I'm new to github, so I don't really know what a pull request is, but if that would help, then sure.

[bwinton]

Cool, uh, email me (bwinton@mozilla.com), and I'll walk you through the process of contributing (and we can avoid sending Martin more email)…

[alex-mayorga]

¡Hola @bwinton!

This one bite me too =)

Where in the code shall I start looking at?

¡Gracias! Alex

[bwinton]

Well, I think the first thing we would need was a design for how it should look. The CSS for the tabs is mostly in https://github.com/bwinton/TabCenter/blob/master/skin/base.css#L79 if you wanted to start playing around with that…

[fvsch]

@bwinton I'd like to experiment with this. I was wondering if there might be a chance to group tabs by container, and inject a header element in the tab list. Do you think the current architecture could be extended that way, or would that go in a "hell no, requires a complete rewrite" category?

I was thinking about having:

Tab in general container
Tab in general container
[Container A - new tab - close all]
Tab in container A
Tab in container A
Tab in container A
[Container B - new tab - close all]
Tab in container B
Tab in container B

(Starting with grouping + headers without buttons)

[bwinton]

Soooo, I think you might be able to extend the architecture that way, but the tabbrowser-tabs we're extending is remarkably finicky. (There's a reason we don't have the pinned tabs in a horizontal row above the un-pinned tabs. :cry:) The other thing to note is that @ericawright is currently re-writing a bit of that code to make some of the reverse code easier (hopefully), so you may want to wait until her PR has landed (or base your code off of it, once she's pushed a more recent version).

But having said that, I think a number of people would be very happy if you took a stab at it, and Erica and I would be more than happy to help you out if you run into problems. 🙂

So, to get you started, here are a couple of things you'll need to consider:

1. We have a reverse mode. Should that reverse just the tabs in each container, or the order of the containers as well?
2. What happens when you drag a tab from one container into another? How do you prevent that?
3. Can pinned tabs be in a container? How does that work?
4. When changing tabs with the keyboard, we scroll to the new tab. Should we also show the container header if it's the first tab in a container? What if it's the second?
5. When filtering with the searchbox at the top, should we include container names? What if none of the tabs in the container match? I think it might be neat to have a button that showed all the tabs in a container if you were filtering and clicked the container name.
6. I worry a little about trying to fit both a new tab button and a close all button in the container row…

Good luck!

[fvsch]

Good points re. grouping and not being able (by design) to change a tab from a container to another. I'll start smaller with just styling, to get parity with the horizontal tabs, but will try to think about that and experiment a bit.

On the technical side, I'd hoped the vertical tabs would have jumped on the React-or-similar bandwaggon as some devtools parts have, but sadly it's still good old gzool with the Flintstone's Flexbox. ^^ That's going to limit what's doable. Well, we'll see.

[bwinton]

Yeah, we would have liked to use something more modern, but not using the built-in tabstrip breaks everything, so that wasn't an option. :cry:

[fvsch]

So, minimal step = color coding or some way to surface a container in each tab, like for horizontal tabs.

I’m getting this result, but I’m not very happy about it. Thoughts? https://dl.dropboxusercontent.com/u/145744/tabcenter-containers-test.mov

[bwinton]

Ack, sorry for the delay…

I agree it's not great, particularly since you can't see what container a tab is in before switching to it. But it's also better than nothing… Let's see what @phlsa thinks!

[fvsch]

I tried earmarking tabs (very crudely). Might work better on the left.

I also tried showing the container’s icon, using code from the URL bar, but it seems the --identity-icon-color color is set on tabs, but not the --identity-icon (an image). I’ll have to look deeper.

[bwinton]

I think the left would be better… What about making the background colour slightly tinted to the colour of the container? Like at 10% opacity or something?

[benwaffle]

Yes, Why not just change the color of the blue line on the left?

[bwinton]

Because that only shows which container the current tab is in, not any of the others? (I mean, I kind of like that idea, but it does lose information…)

[benwaffle]

add it to all of the tabs, and use the different background (or something else) to indicate current tab

[callahad]

Or an additional thin, colored line on all tabs to represent the container that embiggens when a tab is selected?

[Keith94]

This is how the container tabs currently look with the Containers Experiment installed.

[benwaffle]

it needs some improvement for the current tab though

[bwinton]

@callahad: I think, now that #944 landed, it should be easier to change the colour of that bar, if the containers peeps wanted to fix it again. :wink:

[fvsch]

It's actually https://github.com/bwinton/TabCenter/pull/963 which landed and has relevant changes. (https://github.com/bwinton/TabCenter/pull/944 had a lot of things so we closed it because of the risk of regressions).

With the current code (from 963), changing the highlight color would require something like:

/* Use the Container color if available */
.tabbrowser-tab[usercontextid] {
  --tab-highlight-color: var(--identity-tab-color);
}

/* Make the indicator partly visible for Container tabs */
.tabbrowser-tab[usercontextid] .tab-selected-indicator:not([pinned]) {
  background-position: -3px 0;
}

It would need a few tests to make sure the animation is not broken in specific cases, which means checking there is no conflict with this: https://github.com/bwinton/TabCenter/commit/c14dce1f5ba6c6c68f7c6f2dbef2795c75b38a49

[grahamperrin]

For reference:

• https://github.com/mozilla/testpilot-containers/issues/336 (2017-03-04) Embrace the use of containers for tab management
• Sea Containers sidebar for managing tabs - Test Pilot / Containers - Mozilla Discourse (2017-05-11)
• https://github.com/mozilla/testpilot-containers/issues/504 (2017-05-11) Consider shipping sidebar tabs inside testpilot experiment