[Feature Request]: Add new styling for sidebar tabs, etc.

[randomguy-2650]

Description

Firefox 138 added some new features, like a sidebar. You can enable vertical tabs and the tabs wouldn’t look correct if Vertical Tabs is enabled.

Vertical Tabs enabled:

Vertical Tabs disabled:

Additional info (Optional)

Firefox version: 138.0.4
Operating system: Windows 11 24H2 (irrelevant)

[benzBrake]

My self-used patch, you can add it to custom.css temporary.
Tested on https://github.com/e3kskoy7wqk/Firefox-for-windows-7 141a1

@media (-moz-pref("userChrome.ui-chrome-refresh")) {
  .tab-background {
    padding: 3px 12px 0 !important;
  }

  #tabbrowser-tabs[orient="vertical"] {
    :root[uidensity="compact"] & {
      --tab-min-height: 32px !important;
    }

    :root[uidensity="touch"] & {
      --tab-min-height: 48px !important;
    }

    .tabbrowser-tab {
      padding-block: 0px !important;
    }

    .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
      max-width: 100% !important;
    }

    & .tab-stack,
    & .tab-background {
      --tab-vertical-padding: 0px;
      padding-top: 0px !important;
      min-height: var(--tab-min-height) !important;
      max-height: var(--tab-min-height) !important;

      &:before,
      &:after {
        content: none !important;
      }
    }

    :root:not([expanded]) & .tab-background {
      width: calc(100% - 2 * var(--tab-horizontal-padding)) !important;
    }

    & .tabbrowser-tab:is([visuallyselected], [selected]) {
      &>.tab-stack>.tab-background {
        border-bottom-left-radius: 11px !important;
        border-bottom-right-radius: 11px !important;
      }
    }

    & .tab-content {

      &:before,
      &:after {
        content: none !important;
      }
    }
  }

  #tabs-newtab-button {
    --tab-hover-background-color: transparent;
  }

  #tabbrowser-arrowscrollbox-periphery {
    margin-inline: var(--tab-horizontal-padding) !important;
    padding-inline: 0 !important;

    & #tabs-newtab-button {
      width: 100% !important;
      max-width: unset !important;
      min-width: unset !important;
      padding-inline: 0 !important;
      margin-inline: 0 !important;
      border-radius: 11px !important;
      justify-content: flex-start !important;
      --tab-icon-end-margin: 0;

      &:not([disabled]):hover {
        background-color: var(--md-tab-background-color-hover) !important;
      }

      & .toolbarbutton-icon {
        --md-tab-background-color-hover: transparent;
      }
    }
  }

  #sidebar-main {
    &:not([sidebar-launcher-expanded]) {
      #vertical-tabs .tab-close-button {
        display: none !important;
      }
    }
  }
}

[randomguy-2650]

My self-used patch, you can add it to custom.css temporary. Tested on https://github.com/e3kskoy7wqk/Firefox-for-windows-7 141a1

@media (-moz-pref("userChrome.ui-chrome-refresh")) {
  .tab-background {
    padding: 3px 12px 0 !important;
  }

  #tabbrowser-tabs[orient="vertical"] {
    :root[uidensity="compact"] & {
      --tab-min-height: 32px !important;
    }

    :root[uidensity="touch"] & {
      --tab-min-height: 48px !important;
    }

    .tabbrowser-tab {
      padding-block: 0px !important;
    }

    .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
      max-width: 100% !important;
    }

    & .tab-stack,
    & .tab-background {
      --tab-vertical-padding: 0px;
      padding-top: 0px !important;
      min-height: var(--tab-min-height) !important;
      max-height: var(--tab-min-height) !important;

      &:before,
      &:after {
        content: none !important;
      }
    }

    :root:not([expanded]) & .tab-background {
      width: calc(100% - 2 * var(--tab-horizontal-padding)) !important;
    }

    & .tabbrowser-tab:is([visuallyselected], [selected]) {
      &>.tab-stack>.tab-background {
        border-bottom-left-radius: 11px !important;
        border-bottom-right-radius: 11px !important;
      }
    }

    & .tab-content {

      &:before,
      &:after {
        content: none !important;
      }
    }
  }

  #tabs-newtab-button {
    --tab-hover-background-color: transparent;
  }

  #tabbrowser-arrowscrollbox-periphery {
    margin-inline: var(--tab-horizontal-padding) !important;
    padding-inline: 0 !important;

    & #tabs-newtab-button {
      width: 100% !important;
      max-width: unset !important;
      min-width: unset !important;
      padding-inline: 0 !important;
      margin-inline: 0 !important;
      border-radius: 11px !important;
      justify-content: flex-start !important;
      --tab-icon-end-margin: 0;

      &:not([disabled]):hover {
        background-color: var(--md-tab-background-color-hover) !important;
      }

      & .toolbarbutton-icon {
        --md-tab-background-color-hover: transparent;
      }
    }
  }

  #sidebar-main {
    &:not([sidebar-launcher-expanded]) {
      #vertical-tabs .tab-close-button {
        display: none !important;
      }
    }
  }
}

I’d say this is pretty good, but it isn’t refined enough to fit Material 3 design principles, as if Chrome officially had vertical tabs, but as of when this comment was created, it isn’t a thing yet. It could be refined even further in the future, maybe with help by other people or a maintainer, but I currently don’t have enough time to refine the styles even more, but maybe in the future.

Nit: There’s a little style bug in your code in the new tab button when reverting back to horizontal tabs.