[Enhancement] Provide CSS variable for sidebar width

[rtgibbons]

I was playing around with layout of the sidebar and nav-bar. I'm looking for the ability to get the sidebar width and be able to use that in userChrome.css. I've tried searching and looking around for it and haven't stumbled on it yet. Is it possible to set this as a CSS variable for use in the Browsers scope?

What I'm looking to do is to move the #nav-bar dynamically based on the width of sidebar (see Safari). Attached is a screenshot of what it looks like in Firefox now, but if I resize the sidebar, the #nav-bar doesn't move. which can case the sidebar to go "on top" of the navigation buttons.

Here is my userChrome.css that gets me what I have done to date (still a few small tweaks needed)

/* Remove TreeStyleTab header from top of sidebar */
:root {
  --x-sidebar-static-width: 250px;
  --x-urlbar-height: 40px;
}

#nav-bar:not([tabs-hidden="true"]) {
  left: var(--x-sidebar-static-width);
  width: calc(100% - var(--x-sidebar-static-width));
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
  #sidebar-header {
  display: none;
}

/* Adjust sidebar and titlebar for modern layout */
#sidebar-box {
  width: var(--x-sidebar-static-width) !important;
  position: relative;
  top: calc(-1 * var(--x-urlbar-height));
  padding-top: var(--x-urlbar-height);
}

[piroor]

TST is now a WebExtensions addon so it cannot expose anything CSS variable to the chrome area. You may need to do something hack like userChrome.js.

[rtgibbons]

Thanks , I'll have to hack around with this and see what I can come up with. Thanks.