備忘録

私的メモ

Firefox userChrome.css: ブックマークツールバーを垂直化 2 - for Firefox 91 ESR

Firefox userChrome.css: ブックマークツールバーを垂直化Firefox 91 ESR に対応。

ロケーションバー等をタブバー左に配置するためにナビゲーションバーを使用するため
垂直ツールバーとしてブックマークツールバーを使用。

 

Firefox 91 ESR での使用を推奨。
ブックマークツールバーの表示有効化必須。
Arch Linux で作成した為、各 OS 環境に合った値の微調整が必要。

 

垂直ツールバー化は UI 密度がコンパクト・モードにのみ適用。
Firefox 91 ESR ではコンパクト・モードが公式サポートから外れているため
about:config から "browser.compactmode.show" を true にする必要が有る。

ウィンドウ幅が最小時とフルスクリーン時には通常表示に戻る仕様。

ブラウザの使用上、起動時のメニューバーの有無でナビゲーションバーの高さが決定される。
カスタマイズから他の UI 密度に切り替えるか、再起動するまで固定される。

 

メニューボタンの異動は全 UI 密度に適用。

通常、フルスクリーン時にはブックマークツールバーが表示されないが
ブックマークツールバーにアドオンボタンを配置する前提のため、
全 UI 密度でブックマークツールバーが表示されるようにした。

 

userChrome.css


/*
:root:not([chromehidden~="toolbar"])    各種ツールバー使用可能ウィンドウ
:root[sizemode="maximized"]    最大表示
:root[sizemode="normal"]    縮小表示
:root:not([width="foo"])    ウィンドウ非最小幅
:root:not([customizing])    非カスタマイズモード
:root:not[uidensity]    UI密度-通常
:root[uidensity="touch"]    UI密度-タッチ
:root[uidensity="compact"]    UI密度-コンパクト
:root:not([inFullscreen])    非フルスクリーンモード
:root:not([inDOMFullscreen])    非メディアプレイヤフルスクリーンモード
:root[tabsintitlebar]    タイトルバー非表示
*/


/******** 全UI密度用設定 ********/
/*メニューボタン移動*/
:root:not([customizing]) #nav-bar {
    --toolbar-start-end-padding: 3px !important;
}
:root:not([customizing]) #PanelUI-button {
    -moz-box-ordinal-group: 0 !important;
}
:root:not([customizing]) :is(#PanelUI-button, #PanelUI-menu-button) {
    -moz-box-ordinal-group: 0 !important;
}
/*フルスクリーンモード下でのブックマークツールバー有効化*/
:root:not([customizing])[inFullscreen]:not([inDOMFullscreen]) #PersonalToolbar {
    visibility: visible !important;
}



/******** 以下、コンパクトモード用設定 ********/
/*ウィンドウ縮小時のロケーションバーの最小幅*/
:root:not([customizing])[uidensity="compact"] #urlbar-container {
    min-width: 34px !important;
}


/****==== VerticalToolbar用設定 ====****/
/**== ロケーションバー・タブバー水平配置用設定 ==**/
/*== #navigator-toolbox ==*/
/*ボックス内のアイテムを水平配置*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #navigator-toolbox {
    -moz-box-orient: horizontal !important;
}
/*== #navigator-toolbox ==*/


/*== #navigator-toolbox > #titlebar ==*/
/*タブバーの設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #titlebar {
    -moz-box-flex: 1 !important;
    width: min(240px, 688px) !important;
    z-index: 1 !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #TabsToolbar .titlebar-spacer[type="pre-tabs"] {
    width: 20px !important;
}
/*== #navigator-toolbox > #titlebar ==*/


/*== #navigator-toolbox > #nav-bar ==*/
/*ロケーションバーの設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #nav-bar {
    -moz-box-flex: 1 !important;
    -moz-box-ordinal-group: 0 !important;
    margin-right: 3px !important;
    width: min(207px, 646px) !important;
    z-index: 2 !important;
}
/*== #navigator-toolbox > #nav-bar ==*/


/**== ブックマークツールバー垂直配置用設定 ==**/
/*== #navigator-toolbox > #PersonalToolbar ==*/
/*ブックマークツールバーの設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar {
    border-right: 1px solid var(--chrome-content-separator-color) !important;
    display: flex !important;
    flex-direction: column !important;
    left: 0px !important; /*左配置: left, 右配置: right*/
    min-height: calc(100% - 38px) !important;
    padding: 8px 3px 3px 2px !important;
    position: fixed !important;
    top: 38px !important;
    width: 30px !important;
    z-index: 0 !important;
}
/*ツールバーボタンの余白設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > toolbarbutton {
    margin: 1px 0 !important;
    padding: 4px !important;
}
/*スペーサーの高さ設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > toolbarspring {
    height: 1080px !important;
    min-height: 0 !important;
}
/*コンバインドボタン設定*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons {
    -moz-box-orient: vertical !important;
    margin: 1px 0 !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > toolbarbutton {
    margin: 0 !important;
    padding: 4px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > .toolbarbutton-combined-buttons-dropmarker {
    max-height: 14px !important;
    padding: 0 4px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > .toolbarbutton-combined-buttons-dropmarker > image {
    min-height: 14px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons > separator {
    height: 1px !important;
}
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > .toolbaritem-combined-buttons:not(:hover) > separator {
    background-size: 22px 1px !important;
    margin: 0 1px !important;
    width: 22px !important;
}
/* ズームボタン設定 */
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #PersonalToolbar > #zoom-controls {
    display: flex !important;
    flex-direction: column-reverse !important;
}
/*== #navigator-toolbox > #PersonalToolbar ==*/


/*== #browser ==*/
/*ブックマークツールバー表示領域の確保*/
/*左配置: margin-left, 右配置: margin-right*/
:root:not([chromehidden~="toolbar"]):is([sizemode="maximized"], [sizemode="normal"]:not([width="450"])):not([customizing])[uidensity="compact"]:not([inFullscreen]) #browser {
    margin-left: 30px !important;
}
/*== #browser ==*/