You should be able to simply set z-index: 1 for #nav-bar as well to not have tabs cover it. And then add margin to both tabs and the content-area to create empty space at right. Then you could also do some hackery to make the scrollbar display in that empty area and make it not respond to mouse events, that would cause the tabs to not expand when scrollbar is hovered. But of course that also means that the scrollbar cannot be clicked - basically it becomes just an indicator, which might be alright.

So all in all you would add this to vertical_tabs.css:

:root:not([customizing],[chromehidden~="menubar"]){
  --uc-vertical-tabs-width: 40px;
}
:root:not([customizing]) #tabbrowser-tabs:hover{
  width: 220px !important;
  z-index: 1;
}
#nav-bar{
  z-index: 1;
}
#main-window:not([inDOMFullscreen]) > body > #browser{
  margin-right: calc(var(--uc-vertical-tabs-width) + 8px);
}
:root:not([customizing]) #tabbrowser-tabs{
  margin-right: 8px;
}
#tabs-newtab-button,
.tabbrowser-tab{
  pointer-events: auto;
}
scrollbox[orient="horizontal"]{
  scrollbar-width: thin;
  pointer-events: none;
  margin-right: -8px;
}

The empty area on right might become “wrong” colored, but you can then just add whatever background-color you want for the #main-window

Note, you said you have tabs on right side of window so the empty area only works with that.

You can get tabs over web-content by simply adding z-index to tabbrowser-tabs. So adding this after vertical_tabs code should work:

:root:not([customizing],[chromehidden~="menubar"]){
  --uc-vertical-tabs-width: 40px;
}
:root:not([customizing]) #tabbrowser-tabs:hover{
  width: 220px !important;
  z-index: 1;
} 

But I’m not sure how you should make scrollbar not trigger expansion.

I know that style did have the problem you describe, but it should have been fixed since early March. At least on my Linux and Windows systems this issue doesn’t occur anymore.

Yeah, I had tested with DE, but turns out that the update for it had failed for whatever reason and I was actually still on DE 137. Indeed updating to DE 138 had a problem - but it’s now fixed.

Other than tabs sidebar not having any background color (which also happens when it’s on left side, and is now fixed) I don’t see any problems. What else isn’t working properly?

Go to about:config and create a new number pref with name ui.prefersReducedMotion and set the value to 0. Afterwards that Firefox profile should use animations even if they are disabled on OS. Works on Windows at least.

I see. In that case you can achieve what you want - however, it really isn’t enough to just apply different flex-direction because all the buttons also have different styling. So you’ll end up with something like this:

sidebar-main{
  --uc-flex-direction: column;
}
sidebar-main[expanded]{
  --uc-flex-direction: row;
  --uc-buttonbox-padding-inline: var(--space-medium);
  --uc-sidebar-button-outer-padding: 0;
}
.tools-and-extensions{
  flex-direction: var(--uc-flex-direction) !important;
  justify-content: start !important;
  padding-inline-start: var(--uc-buttonbox-padding-inline,0) !important;
}
.tools-and-extensions > moz-button{
  width: unset !important;
  --button-outer-padding-inline: var(--uc-sidebar-button-outer-padding,var(--space-medium)) !important;
  --button-outer-padding-block-start: var(--space-xxsmall) !important;
}
button > .button-background{
  width: var(--button-size-icon) !important;
}

Since :host is unavailable in user style context, doing exactly this is probably impossible. But I wonder what you are actually trying to achieve? Moreover, under which condition does .tools-and-extensions ever have orientation=vertical attribute while sidebar-main is simultaneously expanded?

Sorry, but I don’t know what the issue could be. I’ve been trying all sorts of configurations but I cannot reproduce the issue you are describing anymore. I did find a problem that occurs when letterboxing is enabled and window is somewhat narrow where hovering a link then moves the web-content area - and fixed that though.

The last part of the style that you mentioned shouldn’t even be necessary anymore because web-content is covering the statuspanel - this wasn’t the case in some older Firefox versions.

Hmm, perhaps there’s some other condition relevant under which the issue still occurs. I tested with Tor Browser on Windows, and there the change I pushed fixed the issue.

This needed just a small addition to fake_statusbar_w_bookmarksbar.css, just update and it should work.

I doubt there’s any way for css to really distinguish between the two. But few things come to mind that I could believe might be usable as a proxy; perhaps there is a pref that is set only in wayland or only in x11 systems, or perhaps the window has some attribute set only in one of the two modes. If nothing else, you could invent a pref and use that to manually select when your rules should apply.

I’d probably just make the img use a variable if one is set, and then set the variable for the shadow root host based on its extensionId attribute:

.button-background > img{
  content: var(--my-custom-image,none);
}
moz-button[extensionId="some-extension-id"]{
  --my-custom-image: url("image.png");
}

CSS variables go through from the shadow host to the elements inside. So you can do stuff like this:

.tab-audio-button[muted]{
  --my-custom-image: url("muted.png");
}
.tab-audio-button[soundplaying]{
  --my-custom-image: url("sound.png");
}
.button-background{
  background-image: var(--my-custom-image) !important;
}

I don’t know if the alternate row color is what you want here, but you could add these:

  --background-color-canvas: var(--in-content-page-background) !important;
  --table-row-background-color-alternate: var(--in-content-box-background) !important;

Could you add an image showing what is changing to white. And also tell what color you expect instead.

Also, your snippet is missing a closing } so whatever you might have in your userContent.css after that can also be affecting about:config and other internal pages.

Go to about:config and set the pref browser.ml.chat.hideLocalhost to false Afterwards you can select localhost as the provider in Settings > Firefox Labs

One thing you could do is like this:

html[windowtype="Toolkit:PictureInPicture"] > body::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  outline: 2px solid red;
  outline-offset: -2px;
  pointer-events: none;
}

F12 opens web developer tools - the console there runs scripts in the website context - you cannot use that to access browser internals like PlacesUtils.

You need to run your script via browser console, I can’t remember a hotkey for it, but you can find it from menu > more tools… > browser console

Also, I’m not sure but there’s a chance that browser console is “read-only” in release firefox - meaning you might not be able to run anything from it. If that is the case, then open normal web developer tools (F12) and go to its settings, there’s some checkbox there to enable “browser chrome debugging” or something like that. After checking that (and reopening browser console) you can run your function from browser console.

How exactly are you trying to run your javascript? Website javascript certainly won’t be allowed to create bookmarks. If you run the function on browser side however, then it should work fine - but then I don’t understand why it’s wrapped into javascript url.

If it’s a javascript: url because you tried to run this as bookmark itself (ie. clicking this special bookmark creates another bookmark folder and a bookmark inside it) then that’s not going to work because that’s pretty much just user provided code running in website context.