ツリー型タブを使うとタブをサイドバーに表示できるようになってとても便利なのですが、Firefox Quantum 版の場合、ブラウザの制約から上にあるタブも残ってしまいます。
そこで、userChrome.css を使って Firefox 自体に独自の CSS をあてると、このタブを非表示にすることができるのですが、そうすると今度はタイトルバーに何も表示されずデッドスペースが生まれます。
タブブラウザの欠点として、タブ幅の制約からページタイトルを全て表示しきれないというところが前から不便で気になっていたのですが、折角あいたデッドスペースがあるので、そこにページタイトルを表示する方法がないか調べてみました。

Firefox Quantum は前のバージョンと比べるとカスタマイズがしにくくなっていて、アドオンを入れたら一発で解決というわけにはいきません。
ただ、userChrome.css を使って見た目を調整することはできるので、Firefox がもともと用意している要素をうまく使って、この要件をうまく実現できないか試行錯誤してみました。

もともとどんな要素が用意されていて、それらがどんな属性を持っているかというのは、アドレスバーから chrome://browser/content/browser.xul を開いて、開発ツールを使うことで調べることができます。

ページのタイトルは、選択中のタブに書かれているので、それを拡張してタイトルバーっぽい見た目にし、幅をいっぱいまで広げてみました。

/*
 * タイトルバーにページタイトルを表示
 */

/* 選択中のタブ以外を非表示にする */
.tabbrowser-tab[fadein]:not([selected]) {
    display: none !important;
}

/* タブやその子要素に対するクリックイベントを透過させる */
.tabbrowser-tab[fadein][selected],
.tabbrowser-tab[fadein][selected] * {
    pointer-events: none !important;
}

/* 選択中のタブの位置と幅を設定 */
.tabbrowser-tab[fadein][selected] {
    position: absolute !important;
    left: 73px !important;
    min-height: var(--tab-min-height) !important;
    max-width: none !important;
    width: 0 !important;
}

/* ウィンドウを最大化すると左端にあるスペースが隠れるのでタブの位置を調整 */
window[sizemode="maximized"] .tabbrowser-tab[fadein][selected] {
    left: 33px !important;
}

/* タブの枠と背景を表示しない */
.tab-background[fadein][selected] {
    display: none !important;
}

/* タブからはみ出した文字を隠さない */
.tab-label-container[selected] {
    overflow: visible !important;
    mask-image: none !important;
}

/* ピン留めされたタブのアイコンの右にも余白を挿入 */
.tab-icon-image[pinned] {
    margin-inline-end: 6px;
}

/* ページタイトルの色をタイトルバーの文字の色に変更 */
.tab-text[fadein][selected] {
    max-width: calc(100% - 200px) !important;
    color: var(--titlebar-text-color) !important;
}

/* タブを閉じるボタンを表示しない (ツリー型タブで操作するため不要) */
.tab-close-button[fadein][selected] {
    display: none;
}

/* サウンドアイコンを表示しない (ツリー型タブで操作するため不要) */
.tab-icon-sound[selected] {
    display: none;
}

タブを隠したときのタイトルバーは表示としてはデッドスペースなのですが、UI としては他のアプリケーション同様、ドラッグ＆ドロップする際に使ったり、ダブルクリックでウィンドウを最大化する際に使ったり、意外と使われます。
しかし、選択中のタブを広げてしまうと、マウスクリックは選択中のタブに対する操作として扱われてしまいます。
それを防ぐために pointer-events: none !important; という CSS を使い、クリックしたイベントがタブに伝わらないようにして、タイトルバーのタブ以外の部分をクリックしたときと同じ挙動をするようにしてあります。