FF133.0

133.0の更新でツールバーの構造が変わり、カスタマイズがしやすくなった。特にタブバーとナビゲーションバーを入れ替えたい人にはうれしい更新となる。

ツールバーの構造

参考までに、前バージョンのツールバーの構造は下図のようになっていた。

navigator-toolbox（ツールバー全体）
├─titlebar
│ ├─toolbar-menubar（メニューバー）
│ └─TabsToolbar（タブバー）
├─nav-bar（URLバーもといナビゲーションバー）
└─PersonalToolbar（ブックマークバー）

titlebarというコンテナの中に、メニューバーとタブバーが格納されていることがわかるかと思う。タブバーとナビゲーションバーは、外観上は隣り合っているが、構造としてはそうなっていなかった。CSSの性質上、このような直接つながっていない要素を関連付けてスタイリングするのはむずかしく、大体ややこしくなる。

それが133.0では下図のような構造に変更された。titlebarというコンテナがなくなり、独立した4つのバーになった。これで外観とも一致する。

navigator-toolbox（ツールバー全体）
├─toolbar-menubar（メニューバー）
├─TabsToolbar（タブバー）
├─nav-bar（URLバーもといナビゲーションバー）
└─PersonalToolbar（ブックマークバー）

各バーの親要素であるnavigator-toolboxはフレックスコンテナ。なので、4つのバーはそれぞれフレックスアイテムという扱いになる。フレックスアイテムは、並び順を変更するためのorderというプロパティが使えるため、バーを並び替えるのは造作もない。

/* タブバーをナビゲーションバーの下に移動 */
#toolbar-menubar {
	order: 1;
}
#nav-bar {
	order: 2;
}
#TabsToolbar {
	order: 3;
}
#PersonalToolbar {
	order: 4;
}

ちなみに、前バージョンでもorderを使うことはできた。のだが、例えばorderを使ってタブバーを動かそうとするとメニューバーも付いてきてしまうため、メニューバーだけを戻したりとかせねばならず、とにかく面倒くさかったのであった。

userChrome.css

というわけで、以下が133.0用に新調したuserChrome.css。「ツールバーカスタマイズ」中はなるべくデフォルトの表示に戻すようにしてある。思いつく副作用も打ち消してある。普通の使い方してると絶対いるやつが消えたりするので、そのまま使うのはおすすめしません。

11/28追記：メニューバーのブックマークからブックマークツールバーを開いたときにも反応していたのを修正しました。（ブックマークバーをマウスホバーで開くコード）

12/06追記：バーが裏に隠れて見えていなかったので修正しました。（リダイレクトバーをセンタリング）

/* 変数 */
:root {
	--personaltoolbar-height: 34px;
}

/* ナビゲーションバーの下線の色 */
#navigator-toolbox:not(:has([customizing])) {
	border-bottom-color: #ddd !important;
}

/* タブバーをナビゲーションバーの下に移動 */
#toolbar-menubar:not([customizing]) {
	order: 1;
}
#nav-bar:not([customizing]) {
	order: 2;
}
#TabsToolbar:not([customizing]) {
	order: 3;
}
#PersonalToolbar:not([customizing]) {
	order: 4;
}

/* リダイレクトバーをセンタリング */
#navigator-toolbox:has([value="refresh-blocked"]) {
	z-index: 1 !important;
}
#navigator-toolbox:has([value="refresh-blocked"]) + #browser {
	z-index: 0 !important;
}
#tab-notification-deck:has([value="refresh-blocked"]) {
	position: absolute;
	transform: translate(calc(calc(100vw - 100%) / 2), 50vh);
}

/* ブックマークツールバーをマウスホバーで表示する */
:root[inFullscreen] #PersonalToolbar[collapsed="false"] {
	visibility: visible !important;
}
*:root:not([chromehidden~="directories"]) #PersonalToolbar[collapsed="false"]:not([customizing]) {
	height: 0;
}
*:root:not([chromehidden~="directories"]) #navigator-toolbox:hover:not(:has([customizing])) #PersonalToolbar[collapsed="false"],
*:root:not([chromehidden~="directories"]) #navigator-toolbox:not(:hover,:has([customizing])) #PersonalToolbar[collapsed="false"]:has(#PlacesToolbar .bookmark-item[open]) {
	height: var(--personaltoolbar-height);
}
*:root:not([chromehidden~="directories"]) #navigator-toolbox:hover:not(:has([customizing])):has(#PersonalToolbar[collapsed="false"]),
*:root:not([chromehidden~="directories"]) #navigator-toolbox:not(:hover,:has([customizing])):has(#PersonalToolbar[collapsed="false"]):has(#PlacesToolbar .bookmark-item[open]) {
	z-index: 1 !important;
}
*:root:not([chromehidden~="directories"]) #navigator-toolbox:hover:not(:has([customizing])):has(#PersonalToolbar[collapsed="false"]) + #browser,
*:root:not([chromehidden~="directories"]) #navigator-toolbox:not(:hover,:has([customizing])):has(#PersonalToolbar[collapsed="false"]):has(#PlacesToolbar .bookmark-item[open]) + #browser {
	z-index: 0 !important;
	margin-top: calc(0px - var(--personaltoolbar-height));
}
#PersonalToolbar:not([customizing]) .bookmark-item {
	margin: 0 !important;
}

/* 検索欄の幅 */
#nav-bar:not([customizing]) #search-container {
	min-width: 430px !important;
}

/* サウンドアイコン非表示 */
.tab-icon-stack:where([muted],[soundplaying]) > .tab-icon-overlay {
	display: none;
}
.tab-icon-stack:where([muted],[soundplaying]) > .tab-icon-image {
	opacity: 1 !important;
}

/* ローディングアイコンをフリップ */
@keyframes x-rotate {
	0% {
		transform: rotateX(0);
	}
	100% {
		transform: rotateX(1turn);
	}
}
.tab-icon-stack[busy] {
	animation: x-rotate 1s ease-in infinite;
}

/* メニュー項目を垂直方向にセンタリング */
#toolbar-menubar:not([customizing]) #menubar-items {
	position: relative;
}
#toolbar-menubar:not([customizing]) #main-menubar {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: 100%;
}

/* タブを閉じるボタン非表示 */
#TabsToolbar:not([customizing]) .tab-close-button {
	display: none;
}

/* 拡張機能ボタン（ナビゲーションツールバー内）非表示 */
#nav-bar:not(:has([customizing])) #unified-extensions-button {
	display: none;
}

/* メニューボタン非表示 */
#nav-bar:not(:has([customizing])) #PanelUI-button {
	display: none;
}

/* すべてのタブボタン非表示 */
#TabsToolbar:not([customizing]) #alltabs-button {
	display: none;
}

/* コンテキストメニュー */
#context-back,
#context-forward,
#context-reload,
/*#context-stop,*/
#context-bookmarkpage,
#context-sep-navigation {
	display: none !important;
}

/* 「プライベートウィンドウ」という文字を非表示 */
.private-browsing-indicator-label {
	display: none;
}

/* ページ内検索 */
@keyframes x-vanish {
	99% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}
findbar {
	z-index: 1;
	order: -1;
	transition: none !important;
	margin-right: 2em;
	margin-bottom: -46px;
	border-top: none !important;
	background: none !important;
	white-space: nowrap;
	filter: drop-shadow(4px 4px 4px rgba(100, 100, 0, 0.3));
}
findbar:active {
	animation: x-vanish 1s forwards;
}
findbar::before {
	content:"";
	display: flex;
	flex-grow: 100;
}
.findbar-container {
	flex-direction: row-reverse;
	overflow-inline: visible !important;
	margin-inline-start: unset !important;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	border-color: var(--chrome-content-separator-color);
	min-width: unset !important;
	height: 34px !important;
	background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
}
.findbar-textbox {
	margin-left: 8px !important;
}
.findbar-find-previous.tabbable {
	margin: -5px 0px -5px 8px !important;
}
.findbar-find-next.tabbable {
	margin: -5px 0 -5px !important;
	border-radius: unset !important;
}
.findbar-find-previous.tabbable,
.findbar-find-next.tabbable {
	border-radius: unset !important;
	padding: 0 9px !important;
}
findbar > toolbarbutton {
	margin: 0 !important;
	border-radius: unset !important;
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: var(--chrome-content-separator-color);
	width: 34px !important;
	height: 34px !important;
	background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
}
findbar > toolbarbutton:hover {
	background: none;
	background-color: #dddde4 !important;
}