HTML suggestion for tree organized

[XCanG]

I look in panel.pug, panel.js and panel.styl and looks like you use simple ul-li list and display: flex for organizing tabs, but I not see how you will convert that list into tree with that.

I suggest you use display: grid instead. I know many of it and already write site full of grid (if you interesting, visit it for example) And if you new to this grid, then read good article: https://css-tricks.com/snippets/css/complete-guide-grid/#0

Well what about example, I show you on codepen: https://codepen.io/XCanG/pen/QMQEOa Also in inspector select container object and show grid lines (where is # button) If you not find, then see at screen shot

[XCanG]

Also in example I give you idea how to store your custom user settings, just make another style what will use :root {} with list of variables and user settings of it, it will control all styles.

[idlewan]

I use display: flex on the top-level body because I need #empty-space to take the remainder of space for drag and drop to work well.

I use display: flex on each li.tab because I need the favicon and the sound icon to be a set size, and the span containing the title to take the remainder of space, have an ellipsis and have align-self center to be centered vertically, and flex was easier than having width: calc(100% - $favicon_width) or width: calc(100% - $favicon_width - $soundicon_width); etc.

For now it works well, so until having a tree becomes possible, I see no reason to change it. It might be enough to add this anyway:

.tab {
  clear: both;
}
.tab.in1{
  width: calc(100% - 10px);
  float: right
}   

As always, CSS has many ways to achieve layout.

I don't even use flex on ul#tabs, so I could, if needed, use your pen as an example and add grid to ul#tabs. However it's just not needed for now, a simple list of 100% width blocks are just fine.

[idlewan]

I appreciate the example for variables, that might come in handy. As with the tree of tabs though, it's not needed until it's needed, so will only be changed if user customisation makes it in.

[XCanG]

Well you may use float for that, but this icons still be possible place in grid concept design too. I just not add that because of make simple design showing only tabs and his childs in a tree.

About customisation you still may use that on flex, as I made that in grid.

[XCanG]

Also, just a question, but this menu is customizeable or not?

[idlewan]

That menu is part of firefox's sidebar, not part of the extension. You can put the following into ffox_profile_dir/chrome/userChrome.css to hide it:

#sidebar-header {
    visibility: collapse;
}

[XCanG]

I think better than hide it will modify.