Firefox 64のmy設定【userChrome.cssその1】

Fx64usercss.png

userChrome.cssはFirefox本体のUIをカスタムするためのファイルです。プロファイルフォルダにchromeという名前のフォルダを作りそこに置いてください。

プロファイルフォルダはURLバーに「about:support」と入力し開いたページの「プロファイルフォルダー」欄にある「フォルダーを開く」というボタンから開けます。

昔はがっつり書き換えてたんですがここ最近はデフォルトのデザインも嫌いじゃないので割とシンプルです。65でまたいろいろ変わりそうな雰囲気ではあるんですけども…。

前提

  • テーマは「デフォルト(規定)」
  • ツールバーのUI密度は「コンパクト」
  • user.js(あるいはオプションの設定)で検索バー表示
  • ブックマークツールバー表示→ツールバーのカスタマイズで検索バーの隣に移動

userChrome.cssの先頭の行にはデフォルト名前空間をXULにする@namespace規則を。

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

以下大まかに表示場所ごとに分けたスタイルを記載します。

タブバー

/* タブバー前後のDrag space */
.titlebar-placeholder[type="pre-tabs"] {width: 5px !important;} 
.titlebar-placeholder[type="post-tabs"] {width: 15px !important;} 
/* タブスクロールボタン非表示 */
.scrollbutton-up, .scrollbutton-down {visibility: collapse !important;}
/* タブの影削除 */
.tab-label-container[textoverflow]:not([pinned]) {mask-image: unset !important;}
/* ピン以外のタブにマウスを合わせたとき閉じるボタンを表示 */
.tabbrowser-tab:not([pinned]):hover .tab-close-button.close-icon {display: inline-block !important;}

タブをサイドバーで表示できるアドオンを入れているのでデフォルトのタブコンテキストメニューがそちらでも表示できるようになればタブバー丸ごと非表示にしたいところですが今のところそのようなアドオンはないみたいです。

URLバー・ツールバー

/* URLバー・検索バーの高さ変更 */
#urlbar, .searchbar-textbox{
font-size:12px;
min-height: 20px !important;
max-height: 20px !important;
box-shadow:none !important;
}
/* URLバー/検索バーにフォーカス時IMEをオフオン切替 */
#urlbar *|input {ime-mode: inactive !important;}
#searchbar *|input {ime-mode: active !important;}
/* URLバー内の青色星アイコンをグレイ色に変更 */
#star-button,
#editBookmarkPanelStarIcon {filter: grayscale(100%);} 
/* ブクマツールバーラベル非表示 */
#personal-bookmarks toolbarbutton > label {display: none !important;}
/* ライブラリパネルの最近のブックマークを非表示 */
#panelMenu_recentBookmarks, #panelMenu_bookmarksMenu{display: none !important;}

おまけ

/* ハンバーガーボタンを本物に */
#PanelUI-menu-button > .toolbarbutton-badge-stack{list-style-image:none;}
#PanelUI-menu-button > .toolbarbutton-badge-stack:before{
content:"\1F354";
font-size:19px;
line-height:12px;
filter: grayscale(100%)!important;
}
#PanelUI-menu-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {display: none !important;}

コンテキストメニュー

量が膨大なのでよく見かけかつ不要なものだけとりあえず。

コンテンツエリアコンテキストメニュー

menugroup[id="context-navigation"],
#context-savepage,
#context-sendpagetodevice,
#context-sep-sendpagetodevice,
#context-sep-viewbgimage,
#context-viewbgimage,
#context-selectall,
#context-sep-selectall,
#context-openlink,
#context-openlinkintab,
#context-openlinkprivate,
#context-sep-open,
#context-bookmarklink,
#context-sendlinktodevice,
#context-sep-sendlinktodevice,
#context-sep-viewsource,
#context-viewinfo,
#context-sendimage,
#context-setDesktopBackground,
#context-undo,
#context-sep-undo,
#context-cut,
#context-copy,
#context-paste,
#context-delete,
#context-sep-paste,
#context-selectall,
#spell-separator {visibility: collapse !important;}

タブコンテキストメニュー

#context_reloadTab,
#context_toggleMuteTab,
#context_pinTab,
#context_unpinTab,
#context_duplicateTab,
#context_openTabInWindow,
#context_selectAllTabs,
#context_bookmarkTab,
#context_bookmarkSelectedTabs,
#context_sendTabToDevice,
#context_reloadAllTabs,
#context_bookmarkAllTabs,
#context_closeOtherTabs,
#context_undoCloseTab,
#context_closeTab,
#tabContextMenu > menuseparator {visibility: collapse !important;}

ページ内検索バーを上へ

/* ページ内検索バーを上へ */
.browserContainer {direction: rtl !important;}
.browserStack > browser * {direction: ltr !important;}
statuspanel {left: 0 !important; direction: ltr !important;}
findbar {
-moz-box-ordinal-group: 0 !important;
direction: ltr !important;
position: fixed !important;
margin: -1px 20px 0 0 !important;
box-shadow: none !important;
border: 1px solid var(--toolbox-border-bottom-color) !important;
border-top: 0 !important;
background-color: var(--toolbar-bgcolor) !important;
background-image: none !important;
}

サイドバー

サイドバーについてはのちほど。

Recent Entries

2019-01-10
サイドバーにタブを表示するFirefoxアドオン16選
2019-01-06
Firefox 64のmy設定【userChrome.cssその2】
2019-01-05
Firefox 64のmy設定【userChrome.cssその1】
2019-01-04
Firefox 64のmy設定【user.js】
2018-01-18
freo設置ディレクトリをルートURLで表示させる

Categories

Tags

Archives

2019年
01月
2018年
01月

Recent Images

  • サイドバーにタブを表示するFirefoxアドオン16選
  • Firefox 64のmy設定【userChrome.cssその1】
  • Firefox 64のmy設定【user.js】
  • WAF有効でも403エラーを回避する
  • Photo by ガーリードロップ

Utility Link

Page Top