Placing the Status Bar and Tab Bar on top of everything

You’ll notice that we’ve lost the Tab Bar, and also the Status Bar. That’s normal because they’re both children of the “Library” artboard.

We can lift them out of $.Library by making them parentless:

$.Status_Bar.parent = null
$.Tabs.parent = null

Setting their parent to null will make them… orphans, I suppose. Their parent is now the screen, and they will also jump to the top of the list in the Layer Panel.

Just what we wanted!

There’s one problem with this, though. The extra layers we’ll create in the next steps (a ScrollComponent here, a transparent gray overlay there) will also be placed on top of all existing layers.

So we would then have to bring Status and Tab to the front again (and again, and again):

$.Status_Bar.bringToFront()
$.Tabs.bringToFront()

The solution: We make the Status Bar and Tab Bar parentless after everything else, by placing the lines at the end of our project.

So I made a fold that contains this …

# Status Bar and Tab Bar on top of everything
$.Status_Bar.parent = null
$.Tabs.parent = null

… and made sure that it stays at the end of the document.