備忘録

私的メモ

Firefox userChrome.js: ロケーションバーをタブバー左に移動

ロケーションバーなどをタブバー左に移動させる。
ロケーションバーをダブルクリックでタブバーを隠す。
タブバーを隠したままでの使用は非推奨。

 

Firefox 72 以降での使用推奨。

Firefox 68 ESR ではロケーションバーの一部機能が正常に機能せず。
ロケーションバーにURLアドレス、或いは検索ワードを入力する場合、
Firefox ホーム("about:home" または "about:newtab")からロケーションバーに入力、
ドロップダウンリストからの操作でのみ機能する。

 

userChrome.js


( () => {

const uTabbrowserTabs = document.getElementById("tabbrowser-tabs");

let uCustLayout = {
    init() {
            this.moveItems();
            uCustLayout = null;
    },

    cstTrg: document.getElementById("TabsToolbar-customization-target"),
    urlbar: document.getElementById("urlbar-container"),

    moveItems() {
        // タブの左にメニューボタン、戻るボタン、進むボタン、
        // 更新ボタン、ホームボタン、ロケーションバーを移動
        this.cstTrg.insertBefore( document.getElementById("PanelUI-button"), uTabbrowserTabs );
        this.cstTrg.insertBefore( document.getElementById("back-button"), uTabbrowserTabs );
        this.cstTrg.insertBefore( document.getElementById("forward-button"), uTabbrowserTabs );
        this.cstTrg.insertBefore( document.getElementById("stop-reload-button"), uTabbrowserTabs );
        this.cstTrg.insertBefore( document.getElementById("home-button"), uTabbrowserTabs );
        this.cstTrg.insertBefore( this.urlbar, uTabbrowserTabs );
        // ロケーションバーとタブバーの幅比率
        this.urlbar.flex = "1";
        uTabbrowserTabs.flex = "2";
        // ロケーションバーをダブルクリックでタブバーの表示切替
        this.urlbar.ondblclick = () => { uTabbrowserTabs.collapsed = !uTabbrowserTabs.collapsed; };
    }
};

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

} ) ();

 

userChrome.css

/* ロケーションバー最小幅 */
#urlbar-container { min-width: 54px !important; }
/* タブバー左余白 */
#new-tab-button { margin-left: 60px !important; }
/* ウインドウ最小幅 */
#main-window:not([chromehidden~="toolbar"]) { min-width: 630px !important; }