Firefox userChrome.js: ナビゲーションバーを垂直化

ナビゲーションバーを垂直化。
ロケーションバーをタブバー左に移動させるスクリプトと併用。

Firefox 72 以降での使用を推奨。

ボタンでナビゲーションバーを水平⇔垂直切り替え。

ナビゲーションバー垂直配置に伴うレイアウト変更で
標準のブックマークツールバーの表示切替が機能しなくなるため、
こちらもボタンを設置。

ナビゲーションバー、ブックマークツールバーのカスタマイズは水平配置で編集可。

アドオンのインストール、更新は水平配置推奨。

全画面表示は水平配置推奨。

オーバーフローメニュー

垂直配置でウインドウを縮小すると
格納無効（overflows="false"）に設定しているアイテム以外は全て
オーバーフローメニューに格納されてしまう。
復元は水平配置でのみ可。

Firefox 68 ESR では垂直配置での格納は機能せず。

userChrome.js

( () => {

const uNavToolbox = document.getElementById("navigator-toolbox");
const uNavBar = document.getElementById("nav-bar");
const uNBTrg = document.getElementById("nav-bar-customization-target");
const uPersonalToolbar = document.getElementById("PersonalToolbar");
const uBrowser = document.getElementById("browser");
const uAppcontent = document.getElementById("appcontent");

// ブックマークツールバーに配置されたアイテムを読み込むため表示
uPersonalToolbar.collapsed = false;

let uVerNavbar = {
    init() {
        this.disableOverflows();
        this.cloneToolbarButton();
        this.setPersonalToolbarButton();
        this.setNavBarButton();
        uPersonalToolbar.collapsed = true;
        this.eventToggleNavBar();
        uVerNavbar = null;
    },

    toolbarButton: null,
    ptButton: null,
    nbButton: null,

    disableOverflows() {
        // 任意のボタンにオーバーフローメニューへの格納無効を設定
        document.getElementById("sidebar-button").setAttribute("overflows", false); // サイドバーボタン
        document.getElementById("zoom-controls").setAttribute("overflows", false); // ズームボタン
    },

    cloneToolbarButton() {
        // Document.createElement("toolbarbutton") で生成したツールバーボタンが機能しないため
        // 既存のものを複製、属性全除去、クラス設定
        this.toolbarButton = uNBTrg.querySelector("toolbarbutton").cloneNode(false);
        do {
            this.toolbarButton.removeAttribute( this.toolbarButton.getAttributeNames()[0] );
        } while ( this.toolbarButton.hasAttributes() );
        this.toolbarButton.className = "toolbarbutton-1 chromeclass-toolbar-additional";
    },
    
    setPersonalToolbarButton() {
        // ナビゲーションバー垂直配置に伴うレイアウト変更で
        // 標準のブックマークツールバーの表示切替が機能しなくなるため設置
        this.ptButton = this.toolbarButton.cloneNode(false);
        uNBTrg.insertBefore(this.ptButton, uNBTrg.firstChild); // ボタン挿入
        this.ptButton.id = "personalToolbar-button";
        this.ptButton.setAttribute("label", "ブックマークツールバー");
        this.ptButton.setAttribute("tooltiptext", "ブックマークツールバーを表示します");
        this.ptButton.setAttribute("style", "list-style-image: url('chrome://browser/skin/bookmarks-toolbar.svg');");
        this.ptButton.setAttribute("overflows", false);
        this.ptButton.onclick = () => { uPersonalToolbar.collapsed = !uPersonalToolbar.collapsed; };
    },

    setNavBarButton() {
        this.nbButton = this.toolbarButton.cloneNode(false);
        uNBTrg.insertBefore(this.nbButton, uNBTrg.firstChild); // ボタン挿入
        this.nbButton.id = "navbar-button";
        this.nbButton.setAttribute("label", "ツールバー切り替え");
        this.nbButton.setAttribute("tooltiptext", "ツールバーの配置を切り替えます");
        this.nbButton.setAttribute("style", "list-style-image: url('chrome://devtools/skin/images/command-frames.svg');");
        this.nbButton.setAttribute("overflows", false);
        this.nbButton.onclick = this.eventToggleNavBar;
    },
    
    eventToggleNavBar() {
        if (uNavBar.orient == "") {
            // ナビゲーションバー垂直配置
            uNavBar.orient = "vertical";
            uNBTrg.orient = "vertical";
            // ナビゲーションバー幅指定
            uNavBar.setAttribute("style", "min-width: 40px; max-width: 40px;");

            // ナビゲーションバー移動
            //*** 左配置 ***
            uBrowser.insertBefore(uNavBar, uBrowser.firstChild);
            //*** 右配置 ***
            // 配置順序指定
            //uNavBar.ordinal = "6";
            //uBrowser.appendChild(uNavBar);

            // ブックマークツールバー移動
            uAppcontent.insertBefore(uPersonalToolbar, uAppcontent.firstChild);
        } else {
            // ナビゲーションバー水平配置
            uNavBar.removeAttribute("orient");
            uNBTrg.removeAttribute("orient");
            // ナビゲーションバー幅指定削除
            uNavBar.removeAttribute("style");
            // 配置順序指定削除
            uNavBar.removeAttribute("ordinal");
            // ナビゲーションバー移動
            uNavToolbox.appendChild(uNavBar);

            // ブックマークツールバー移動
            uNavToolbox.appendChild(uPersonalToolbar);
        };
    }
};

// 初期化
setTimeout( () => { uVerNavbar.init(); }, 2000 );

} ) ();

userChrome.css

/*** コンバインドボタン ***/
/*
垂直配置での2つ以上結合したボタンのスタイルを変更
Firefox 68 ESR でのオーバーフローメニュー格納を避けるため
セパレータを非表示に、ボーダーで代用
*/
#nav-bar-customization-target[orient="vertical"] > .toolbaritem-combined-buttons {
    -moz-box-orient: vertical !important;
    margin: 2px 0 !important;
    padding: 0 6px !important;
  }
#nav-bar-customization-target[orient="vertical"] > .toolbaritem-combined-buttons > separator {
    display: none !important;
  }
#nav-bar-customization-target[orient="vertical"] > .toolbaritem-combined-buttons > separator + toolbarbutton {
    border-top: 1px solid rgba(255, 255, 255, .3) !important;
  }
#nav-bar-customization-target[orient="vertical"] > .toolbaritem-combined-buttons:hover > separator + toolbarbutton {
    border-top: 1px solid rgba(255, 255, 255, .0) !important;
  }

/*** ズームボタン ***/
/*
垂直配置でのボタン順序変更
順序変更に伴うボーダー表示変更
リセットボタンのフォント調整
*/
#nav-bar-customization-target[orient="vertical"] > #zoom-controls > #zoom-out-button {
    -moz-box-ordinal-group: 3 !important;
  }
#nav-bar-customization-target[orient="vertical"] > #zoom-controls > #zoom-reset-button {
    -moz-box-ordinal-group: 2 !important;
    border-color: rgba(255, 255, 255, .3) !important;
    border-style: solid none !important;
    border-width: 1px !important;
  }
#nav-bar-customization-target[orient="vertical"] > #zoom-controls:hover > #zoom-reset-button {
    border-color: rgba(255, 255, 255, .0) !important;
  }
#nav-bar-customization-target[orient="vertical"] > #zoom-controls > #zoom-reset-button > .toolbarbutton-text {
    font-size: 11px !important;
    max-width: 28px !important;
    min-width: 28px !important;
    padding: 5px 0 !important;
  }
#nav-bar-customization-target[orient="vertical"] > #zoom-controls > #zoom-in-button {
    -moz-box-ordinal-group: 1 !important;
    border: none !important;
  }