MrOtherGuy

I run nightly, not exclusively but pretty close, and I must say Firefox' nightly builds are pretty damn stable in my experience. For sure, there are situations where some feature y is clearly unfinished, but it's super rare to face a situation where I would even need to think about working around some issue - such game breaking issues just don't happen too much at all. Usually, if a build is found to be truly broken (like crashes very often etc.) then nightly updates get paused. I can remember maybe two times that I've had to revert to previous build in over ten years because the I had received an update before updates were halted.

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.

Oh I think I misunderstood what you are doing, I thought you meant you set the content document body to also have the background-image, in which case the same alignment issue would still happen. But it sounds like you have just one image at the main-window body and the content area is transparent.

With some shuffling you could achieve pretty much the same result visually - so that the header sticks, but doesn't overlay the list:

@-moz-document url("about:addons"){
  #content{
    max-height: 100vh;
    display: grid;
    grid-template-rows: auto auto 1fr;
    --in-content-page-background: transparent;
  }
  #page-header > .sticky-container{
    position: static !important;
  }
  #main{
    overflow: auto;
    padding-inline: 6px;
    scrollbar-gutter: stable;
  }
}

I'm not sure if you can do that, but you may be able to make the sticky-container opaque, so that it covers the scrolled contents, but assign it the same background-image that you are using on body and then try setting background-attachment: fixed for it and maybe play with few background-position values to align it to the background-image of the body. And also make sure the image is shown as same size.