MrOtherGuy

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.

Like this:

@-moz-document url-prefix("about:preferences"){
  treechildren::-moz-tree-drop-feedback { background: #f00 !important; }
}

That attribute is simply renamed to customtitlebar because vertical tabs being an option "tabsintitlebar" is pretty misleading. Anyway, hide_tabs_toolbar_v2 also uses the customtitlebar attribute.

That is not browser toolbox - just normal devtools. Browser toolbox is separate tool which is used to inspect the browser window itself rather than web content. It's essentially a separate Firefox instance with it's own profile.

That is not possible. Browser toolbox runs in a completely separate Firefox instance in a separate profile so there's no way you could display it inside the "main" browser window.

I don't think there a way to open the library to history section via address. Library window history and bookmarks section are the same document, and the buttons that open open library window to history view do it by opening the window with extra window arguments - which you cannot do by simply changing the url.

A possible other option to show history would be to open Firefox view to history section. about:firefoxview#history

#urlbar:hover won't work because bookmarks toolbar is not inside urlbar. You could do this using the :has selector but at this point I think it would probably be best to just throw autohide_bookmarks_toolbar.css out the window and instead write some custom thing.

So, what you could do instead is to go to customize mode and move bookmarks toolbar items out of the bookmarks toolbar and place it directly to the right of the urlbar. Then use some css like this:

:where(#urlbar-container) + #personal-bookmarks{
  position: absolute !important;
  top: 100%;
  width: 100vw;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 100ms ease 400ms;
}
#urlbar-container:hover + #personal-bookmarks,
#personal-bookmarks:hover{
  transform: scaleY(1);
}
#PlacesToolbar{
  justify-content: center;
}
#PlacesToolbarItems{
  max-width: min-content;
  background-color: var(--toolbar-bgcolor);
  border: 1px solid black;
  border-top: none;
}
#navigator-toolbox{
  z-index: 4 !important;
}

You can then just hide disable the bookmarks toolbar.

The code you posted should (and does) only add a border for the box - not the whole window width. Check that you don't have some other code the adds a border for the whole width.