Mastering the Tab Group Editor

This article is no longer maintained, so its content might be out of date.

This is how to use the Tab Group Editor, in advanced mode, simply explained. Quite good if you've seen Use Tab Groups to organize a lot of tabs.

Tab Group Editor

You can get familiar with the Tab Group Editor over at Use Tab Groups to organize a lot of tabs. It is written quite well, but it is a little too concentrated (sort of like lemonade frozen concentrate). So you should read it slowly, or over again.

If you have visited it then, and have got a little familiar with the editor, there are a few more surprises in the editor. If you haven't used the task group editor much, don't worry about it.

Let's just call it editor. We'll try to get you intimate with the advanced features of the editor. You may have tried it before but if you open it now you may see this.

What? My little screens went to a Stack!


Ah yes... You've encountered a "enhanced feature" of the editor. Obviously if you had a lot of screens in your group, Mozilla would have to represent it as a Stack. There are too many screens to represent in "tiles", because there's not enough screen real estate to do that.

What can you do with a stack? There a couple of ways to deal with it. Most people want it to turn the stack back into what we call tiles.

Resize the Stack's Group

What you might try to do is grab it by the right-hand corner and expand it's size a little bit

Resizing Tab Group

At first it seems like a success, because you can see the nice tiles back again But what happened is you've entered into what's known as Overlap Mode

Overlap Mode

It can go one of two ways. Either the editor has enough room to move over the one you're overlapping, or it might have to turn it into another stack. In either case, you've got at least one stack back to tiles, but you might have swapped the stack into another group.

new stack results

So what you need is more room around your group. You'll need that room to increase the size of the group that was (or is) a stack. That is the best way to avoid Overlap Mode.

What's Overlap Mode?

overall tag editor case

Let's explain Overlap Mode a little bit. Think of it a blocks of different sizes (all rectangular) that may be moved, or resized. Furthermore, lets imagine they are made of rubber. We can stretch it pretty far. So what happens when you get into Overlap Mode, by increasing the size so much that the other block, next to it, has to move literally (or bounce), or has to resize. If the other block resizes, it may have to get smaller (the one that you've bounced into) which may force it into a stack. So let's look at what happened. We dragged the box larger, got into Overlap Mode, and made the other box a little bit too small. That's what forced into becoming a stack.

Look back at the screen above. See what's causing our problem? It's the group called "Main" which is also a stack. Let's move it. All groups have handles on both sides and the bottom (not the top) near the edge of the group. So we can drag it down

dragging a tag group

and to the left

dragging a tag group2

That's good. Now you can resize the "Mozilla" group, or whatever your group's name is,

resizing tab group mozilla

and turn it back into tiles. The editor assumes you know what you're doing, so just be a little careful, until you've got the hang of it.

The other choice is just to ...

Treat it as a Stack

What you can do with a stack is use the tiny little magnifying glass to find any screen in any group. It's been documented some in Use Tab Groups to organize a lot of tabs.

Also what you can do is click on the little icon under the stack

stack icon

and get a preview of all the pages in the group. Then you can click on a page

stack preview

and go back to view it in Firefox.

Firefox pixilated

Note that you can also click back to anywhere, by clicking in the blue (which borders the black), just outside of the preview, and go back to the stack, inside the editor.

Tile Resizing

Also, notice that the tiles resize automatically.

different size tiles

How does it do that? It's kind of simple, based on how many tiles are in the group and how much screen real estate it has to use.

One last but important thing to mention to you...

Don't try the close button, unless you mean it

There is a close button on each group. If you clicked it like this

closing tab group

then you'd see this

closed tab

BE VERY CAREFUL! If you close that group, then you are closing, or are dismissing, that entire group of pages. They are GONE, from your browser.

Thankfully you can click on the "Undo Close Group"

back to unclosed group

and you're back to the group of tiles.

If you happened to notice (three pictures back) that stacks also have a close button which works the same. If you think about it, it's a stack, so you might want to look at it as tiles, especially before you close it, and lose all those tiles.

So you know now that groups can either happen to be represented as tiles, or stacks, both of which can be of different sizes.


These fine people helped write this article:

Illustration of hands


Grow and share your expertise with others. Answer questions and improve our knowledge base.

Learn More