【Firefox72】userchrome.cssでカスタマイズして未読タブ、選択タブの文字色を変える方法

この記事では、FireFox72でuserChrome.css、userChrome.js、xxx.uc.jsを使用したカスタマイズする方法について紹介します。
userChromeなら標準機能や拡張機能で変更できない、未読タブなどのフォント設定などができるようになるので、FirFoxがより使いやすくなります。

 

毎度のことながらFirefox71から72にアップデートしたら、タブの色を変えるなどのカスタマイズがデフォルトになってしまいました。

FireFox72

一部の機能はそのまま使えなくなってしまいましたが、Firefox72でも再び再起動ボタンの追加や未読タブの色をuserChrome.cssで設定することができるようになりました。

Firefox72

タブバーの位置もブックマークツールバーの下に配置するカスタマイズもできました。

 

過去のバージョンでの対応と違い、Firefox本体がインストールされているフォルダにもファイルを格納する必要も増えています。

Firefoxはカスタマイズした方が格段に使いやすくなるので、カスタマイズするにしちゃうのがおすすめです。

 

気になるところまで読み飛ばす
カスタマイズを有効にする手順を見る カスタマイズ有効化手順をみる

未読タブのカスタマイズ方法を見る 未読タブのカスタマイズ方法をみる

 

スポンサーリンク

userChrome.css、xxx.uc.jsでカスタマイズできるようにする

userChrome.css、拡張機能用のスクリプト(xxx.uc.js)を使えるようにする手順について説明します。

ざっくりした手順は、このようになっています。

  1. 念の為バックアップ
  2. 必要ファイルをダウンロード
  3. config.js を配置
  4. config-prefs.jsを配置
  5. userChrome.css、userChrome.jsを格納
  6. xxx.uc.jsを格納
  7. Firefoxを再起動

ファイルを格納する順番は、どれから格納しても問題ありません。

 

Firefoxのプロファイルフォルダをバックアップしておく

まず作業前に、1度Firefoxを終了させて使用しているプロファイルフォルダをバックアップしておくと、何かあった時にも安心です。

プロファイルフォルダは、このパスにあります。

C:\Users\{user_name}\AppData\Roaming\Mozilla\Firefox\Profiles

 

簡単にプロファイルフォルダを開くには、Firefoxのヘルプから「トラベルシューティング情報」をクリックします。

トラベルシューティング情報

 

開いた先にある「プロファイルフォルダー」のフォルダーを開くボタンをクリックすると、簡単に開くことができます。

「プロファイルフォルダー」のフォルダーを開くボタンをクリックする

 

 

userChrome.cssなどをダウンロードする

github@alice0775さんのgithubページから使用したいFirefoxのバージョンと一致するディレクトリを開きます。

もしくは一度、まとめてダウンロードしちゃうのもアリです。

githubからダウンロードする

 

今回対応するのはFirefox72なので「72」のディレクトリを開きます

ファイルが沢山ありますが、使用するのはuserChrome.css、userChrome.js、config.js、config-prefs.jsの4ファイルです。

使用するのはuserChrome.css、userChrome.js、config.js、config-prefs.jsの4ファイルです。

一部のファイルは「install_folder」フォルダの中にあります。

使用するファイル
  • 72/install_folder/config.js
  • 72/install_folder/defaults/pref/config-prefs.js
  • 72/userChrome.css
  • 72/userChrome.js
最近のFirefoxではファイルの文字コードは、BOM無しのUTF-8じゃないとダメらしいです。うまく動作しない時はファイルの文字コードを確認してみてください。

 

config.js を配置する。

「install_folder」フォルダ内のconfig.jsをFirefox本体と同じ階層に配置します

デフォルト設定でインストールしているなら「C:\Program Files\Mozilla Firefox」になると思います。

config.js を配置する。

 

config-prefs.jsを配置する。

ダウンロードしたファイルの「72/install_folder/defaults/pref/」フォルダにあるconfig-prefs.jsを格納します

config-prefs.jsを格納したFirefox本体のあるフォルダーから、「defaults」「pref」と移動し、「channel-prefs.js」がある階層に配置します。

デフォルトのままインストールしている場合は「C:\Program Files\Mozilla Firefox\defaults\pref\」になります。

config-prefs.jsを配置する。

 

userChrome.css、userChrome.jsを格納する

今までも使用してきた、この2ファイルは今までと同じプロファイルフォルダー内の「chrome」に格納します

  • userChrome.css
  • userChrome.js

今まで使ってきたuserChrome.cssファイルが存在している場合は、ダウンロードしたuserChrome.cssの中身をテキストエディターなどを使って、今まで使用していたファイルの先頭にコピペします。

userChrome.css、userChrome.jsを格納する

userChrome.cssのnamespaceの一行は、カスタマイズによっては邪魔になるかもしれません。

私はタブバーの位置を変更するカスタマイズに悪影響が出たので削除しました。

 

カスタマイズスクリプト(xxx.uc.js)を格納する

拡張機能用のスクリプト(xxxxx.uc.js)もプロファイルフォルダー内の「chrome」に格納します。

一部の機能が動作しなくなったので、更新が止まった古いスクリプトは動かないかもしれません。

最近まで使用していたなら大丈夫だと思いますが、Firefox66以降ではファイルの文字エンコードはBOM無しのUTF-8じゃないと動作しません。

文字エンコードを変更して保存しなおせば動作する可能性があります。

 

Firefoxを再起動する

各ファイルを格納したらFirefoxを起動します。基本的にはこれで再びカスタマイズが有効になるはずです。

私はタブバーの位置を変更するカスタマイズだけが、正常に動作していなかったです。

 

userChrome.cssを使えるようにする

72ではuserChrome.cssだけを使う場合のみ必要な設定みたいですが、念の為設定しておきました。

今まで使っていたので、有効になったままでしたが。

URLバーに「about:config」と入力して、configを表示させます。

URLバーに「about:config」と入力

「toolkit.legacyUserProfileCustomizations.stylesheets」で検索して、値をtrueにします。

trueになっていたらそのままで大丈夫です。

「toolkit.legacyUserProfileCustomizations.stylesheets」の値をtrue

 

未読タブと開いているタブの色を変える方法

未読タブと開いているタブの色を変える方法

FireFox71から72に更新して使えなくなった場合は、userChrome.js、config.js、config-prefs.jsを最新のファイルに更新すれば、そのまま使えるようになりました。

Firefox72で、未読のタブと今開いているタブの文字を調する方法について紹介します。

Firefox72では71まで使用していたuserChrome.cssがそのまま使えました。

タブバーの位置など、そのまま使えないものもあるようです。

 

userChrome.cssの設定

まずuserChrome.cssにカラー設定を追記します。

FireFox71まで、未読タブの色を変えていたなら、そのままの設定が使えると思います。

下のサンプルでは、選択中のタブを太字、未読タブの文字色を赤色にする設定になります。

/* 選択中のタブ */
.tabbrowser-tab[selected] .tab-text {
  font-weight: bold !important;
}

/* 未読タブのタイトル文字色の変更 */
.tabbrowser-tab[unread="true"] .tab-text {
font-weight: bold !important;
  color: red !important;
}

 

未読タブを有効化させるスクリプト

Firefox61から未読タブにunreadが付かなくなってしまったので、カスタマイズスクリプトで有効化させる必要があります。

unread属性をタブに付与するための「setAttribute_unread.uc.js」スクリプトをダウンロードします。

ダウンロードした「setAttribute_unread.uc.js」ファイルをFirefoxのプロファイルフォルダ内の「chrome」フォルダ内に配置します。

2020年1月9日現在だと、そのままだと動かないのでsetAttribute_unread.uc.jsを少し修正します。

 

if(location.href !== 'chrome://browser/content/browser.xul') return;

 

となっている箇所を、このように修正します。(「browser.xul」→「browser.xhtml」)

 

if(location.href !== 'chrome://browser/content/browser.xhtml') return;
「chrome://browser/content/browser.xul」は廃止されたようです。

 

修正後のファイルは、このようになります。

(function(){
	if(location.href !== 'chrome://browser/content/browser.xhtml') return;
	let func = {
		add : function(e){
			e.target.setAttribute('unread', 'true');
		},
		remove : function(e){
			e.target.removeAttribute('unread');
		}
	}
	gBrowser.tabContainer.addEventListener('TabOpen', func.add, false);
	gBrowser.tabContainer.addEventListener('TabSelect', func.remove, false);
	gBrowser.tabContainer.addEventListener('TabClose', func.remove, false);
	window.addEventListener('unload', function uninit(){
		gBrowser.tabContainer.removeEventListener('TabOpen', func.add, false);
		gBrowser.tabContainer.removeEventListener('TabSelect', func.remove, false);
		gBrowser.tabContainer.removeEventListener('TabClose', func.remove, false);
		window.removeEventListener('unload', uninit, false);
	}, false);
})()

 

 

タブバーの位置をブックマークツールバーの下にする。

バージョン71から72に更新したら、ブックマークツールバーとタブバーが重なってしまいました。

 

同様の質問があり解決されていたので、こちらの方法で試したらうまくいきました。

今回の対応でuserChrome.cssに記載のあった、namespace の1行を削除するかコメントアウトするとうまくいくとのことです。

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

この一行をまるっと削除しました。

削除して、以下のCSSをコピペします。

/* barre de NAVIGATION */
#nav-bar {
    -moz-box-ordinal-group: 1 !important;
    margin-top: -2px !important;
    border: none !important;
    box-shadow: none !important;
}

/* barre PERSONNELLE */
#PersonalToolbar {
    -moz-box-ordinal-group: 2 !important;
}

/* barre d'ONGLETS */
#TabsToolbar {
    -moz-box-ordinal-group: 3 !important;
}

/* Clean up spacing */
.titlebar-placeholder {
    display: none !important;
}

/*!* Hides ... at the end of the address bar *!*/
/*#pageActionButton {*/
/*    display: none !important;*/
/*}*/

/*!* Hides star at the end of the address bar *!*/
/*#star-button {*/
/*    width: 0px !important;*/
/*}*/

/*!* Hides reader button at the end of the address bar *!*/
/*#reader-mode-button,*/
/*#readinglist-addremove-button {*/
/*    display:none !important;*/
/*}*/

/*!* Hides empty square at start of tab bar *!*/
/*#TabsToolbar .titlebar-placeholder[type="pre-tabs"] {*/
/*    display:none  !important;*/
/*}*/

/* Hides hamburger button */
#PanelUI-menu-button {
    /*display: none !important;*/
}

/* Change bookmark icon */
.bookmark-item[container] {
    list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjklEQVR42mNkAIIfx2xbgVQWAwHw//9/hh9cVgxX7ny5aBs6zQEkxgg1YD2QCiBkAAgwCdowXH0u8cHQKV9w1ICBNODaC4kvH24vUHVIO/+CLANuvhJnUGVdu4PD6rAnJQYcABrgOMIN2A00wI3MaBT/+vHOQl371PP3YQYQn505rRgu3/180S50ugNIDACEZogRw/LarAAAAABJRU5ErkJggg==') !important;
}

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


@import "./tabs_below_navigation_toolbar.css";

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
    -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
    margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
    margin-top: 26px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
    margin-top: 26px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
    -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
    display:block !important;
    position: fixed !important;
    right: 0 !important;
    visibility: visible !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
    display:block !important;
    position: fixed !important;
    width: 100vw !important;
    -moz-window-dragging: drag !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
    top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
    margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
    top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
    top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
    /* set to '0', if no menubar is used */
    #main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
        margin-top: 18px !important;
    }
    /* set to '0', if no menubar is used */
    #main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
        margin-top: 34px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
        top: 8px !important;
    }
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
        top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
        top: 8px !important;
    }
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
    border-top: 0 !important;
    box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
    padding: 0px 0px !important;
    height: 16px !important;
    width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
    position: relative !important;
    padding: 0px 0px !important;
    margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
    padding: unset !important;
    height: unset !important;
    width: unset !important;
}

/* make sure button icon colors set correctly */
#main-window:not(:-moz-lwtheme) #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon,
#main-window:not([style*='--lwt-header-image']):-moz-lwtheme:-moz-lwtheme-darktext #TabsToolbar-customization-target toolbarbutton .toolbarbutton-icon {
    fill: var(--classic_squared_tabs_new_tab_icon_color) !important;
    color: var(--classic_squared_tabs_new_tab_icon_color) !important;
}

/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"] * #TabsToolbar {
    -moz-padding-start: 0px !important;
}
/* tweaks for fullscreen mode */
#main-window[tabsintitlebar][sizemode="fullscreen"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #toolbar-menubar[autohide="true"] ~ #TabsToolbar .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="fullscreen"] #navigator-toolbox #PanelUI-button,
#main-window #TabsToolbar #window-controls {
    display: none !important;
}

/* hide non-required items */
#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
    display: none !important;
}

/* Windows 10 extra tweaks */
@media (-moz-os-version: windows-win10) {
    #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme):hover:not([disabled="true"]),
    #main-window:not([tabsintitlebar]) menubar > menu:not(:-moz-lwtheme)[_moz-menuactive="true"]:not([disabled="true"]) {
        background-color: Highlight !important;
        color: HighlightText !important;
    }
}

/* disable Mozillas tab jumping nonsense when moving tabs */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
    padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
    padding-bottom: unset !important;
    margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
    margin-top: unset !important;
}

/* change width of pinned tab */
.tab-content[pinned] {
    /*padding: 0 2px !important;*/
}

 

未読タブの文字色を変えるカスタマイズにも影響は無かったので、他に影響がなければ、これでも良いかも。

 

無事に未読タブのカスタマイズを有効化できました

Firefoxはメジャーアップデート毎にカスタマイズが使えなくなるのではないかとドキドキです。

複数のタブを一気に開いてから読むことがあるので、未読なタブが分かるようになっている方が使いやすいです。

未読タブのカスタマイズを有効化

Firefox72でも無事カスタマイズすることができて安心しました。

 

それでは、今回はこれまで。

ありがとうございました。

コメント

目次へ
Secured By miniOrange
タイトルとURLをコピーしました