[Contribution] CSS code for Vertical Tab collapsing and combine addon button into single line

[GunGunGun]

Tab Collapsing:

/*-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. */

   #TabsToolbar-customization-target {
    max-width: none !important;
    min-width: 0px !important;
  }
  
  #sidebar-splitter {
    display: none !important;
  }
  
  #sidebar-header {
    display: none !important;
  }
  
  
  /*shared*/
  #TabsToolbar {
    position: relative !important;
    clip-path: inset(0) !important;
    z-index: 1 !important;
  }
  
  :root {
    --default-vertitaltab-width: 42px;
    --hoverd-verticaltab-width: 20em;
  }

  :root[uidensity=compact]{
    --default-vertitaltab-width: 35px !important;
  }

  :root[uidensity=touch]{
    --default-vertitaltab-width: 60px !important;
  }
    
  
  
  /*close*/
  #TabsToolbar {
    --hovering-verticaltab-width: calc( var(--default-vertitaltab-width));
    width: var(--default-vertitaltab-width) !important;
  }



  
  /*open*/
  #TabsToolbar:hover {
    width: var(--hoverd-verticaltab-width) !important; 

  }
  
  
  /*left*/
  #TabsToolbar:not([positionend="true"]):hover {
    margin-right: calc((var(--hoverd-verticaltab-width) - var(--default-vertitaltab-width)) * -1) !important;
  }
  
  /*right*/
  #TabsToolbar[positionend="true"]:hover {
    margin-left: calc((var(--hoverd-verticaltab-width) - var(--default-vertitaltab-width)) * -1) !important;
  }
  
  /* if tab doesn't have an icon, make sure it still has tab icon */

  .tab-icon-image:not([src], [busy]) {
    width: 16px !important;
    height: 16px !important;
    display: inherit !important;
  }

Result: https://streamable.com/ca1aab

Combine Buttons into single line:

var tbbutton = document.querySelectorAll('#TabsToolbar-customization-target .toolbarbutton-1')

var tbbuttoncontainer = document.createElement('hbox');
tbbuttoncontainer.id = 'tbbuttoncontainer';
//document.querySelector('#TabsToolbar-customization-target').appendChild(tbbuttoncontainer);
document.querySelector('#TabsToolbar-customization-target').insertBefore(tbbuttoncontainer, document.querySelector('#TabsToolbar-customization-target').firstChild);
                                             
for (var i = 0; i < tbbutton.length; i++) {
tbbuttoncontainer.insertAdjacentElement('beforeEnd', tbbutton[i]);
}

tbbuttoncontainer.style.display = 'flex';

#TabsToolbar-customization-target .toolbarbutton-1 .toolbarbutton-text {

    display: none !important;
  }

    #TabsToolbar-customization-target .toolbarbutton-1 {
    width: 26px !important;
    height: 26px !important;
  }
  #tbbuttoncontainer {
        display: flex!important;
        flex-direction: row!important;
    }
    #tbbuttoncontainer #new-tab-button {
        display: none!important;
    }

Result:

[Ryosuke-Asano]

beauty!

[GunGunGun]

I want to add some notes, the timing of adding CSS can cause issue too, currently the only way to make tab collapsing work is to wait for vertical tab to completely load and add code to Dev Toolbox, I don't know what is the issue but I think you can improve this by delaying style load using core code:

https://streamable.com/uk2k3o