Firefox(Nightly)の環境を整えた話

Firefoxはサブブラウザになったけど、色々環境を整えた結果いい感じになったので、まとめる。
現在使っているのは Firefox59.0a1(Nightly)。

Vim操作

Vim vixenを使っている。
見た目がVimperatorっぽくて懐かしさを感じる…

Vim Vixen入れてみた。このコマンドライン、凄い懐しさを感じますわ… pic.twitter.com/v94wmo6Q2i
— tomimori (@typetonk2) 2017年10月12日

twitter.com

ツリー型タブの導入

タブバーは削除予定のため、ツリー型タブを追加した。
ついでにマルチプルタブハンドラも追加した。主にURLのコピー用。

Stylusの導入

vixenのヒント文字を大きくするために追加。userChrome.cssでは設定出来なかった。WEとFirefox本体で分かれてるからかな。

.vimvixen-hint {
    font-size: 16px;
}

.vimvixen-console-frame {
    ime-mode: inactive !important;
}

.vimvixen-console-frame は、何故か反映されず。とりあえず残してる。

UIの変更

本題。過去にもcssを弄ってURLバーを非表示とかしてたけど、Firefox57からはWEになったため、拡張側からUIを弄れなくなった。
そのため、userChrome.cssを使って設定。

色々試行錯誤したけど、 tridactylのREADMEから参照できるuserChrome.cssのおかげで、全てが解決した。

そのままだとまだ少し物足りなかったので少し弄り、現在は以下の感じに落ち着いた。

普段はタブバー/URLバーを非表示。
非表示中は、元々表示されていた箇所にあるリンク等をクリック出来る。
- 試行錯誤中は、見えない何かが存在してクリック出来なかった。
Alt+DやAlt+F等の、標準のショートカットでURLバーやメニューにフォーカスしたら、表示される。
画面を全体化した時、画面最上部にカーソルを持っていけば、タブバー等が表示される。
- 試行錯誤中は、見えない何かのせいか、最上部より手前で表示されてしまった。

Vimperator使っていた時のように、とてもスッキリとしたUI。ノートPCだとほんと助かるんだよなぁ。

FirefoxのUI、TridactylのuserChrome.cssを参考に弄って、ほぼ理想通りの形になったので、暫くこれでいこ。タブバーは消したり消さなかったりするかも。 pic.twitter.com/Tyxcnb54rh
— tomimori (@typetonk2) 2017年11月20日

twitter.com

css

環境によっては、色々数値を変えないと駄目かもしれない。

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

/* References.
 * https://github.com/cmcaine/tridactyl/blob/master/src/static/userChrome-minimal.css
 * https://support.mozilla.org/ja/questions/1185426
 * https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#for-only-tree-style-tab-sidebar-1397
 * chrome://browser/skin/browser.css
 */

.urlbar {
  ime-mode: inactive;
}

/* User config */
#navigator-toolbox {
    /* The height of the area at the top of the screen that causes the nav-bar to be shown
    If zero, you can still focus with <C-l> or F6.
     */
    --tridactyl-auto-show-zone: 0;
}

/* Hide grey container box */
:root:not([customizing]) #navigator-toolbox:not(:hover):not(:focus-within) { 
    max-height: 0;
    min-height: calc(0px); /* I have no idea why just using 0 or 0px does not work... */
}

/* Auto hide tab bar */
:root:not([customizing]) #navigator-toolbox:not(:hover):not(:focus-within) #TabsToolbar { 
    visibility: collapse;
}

/* Auto hide nav bar */
:root:not([customizing]) #navigator-toolbox:not(:hover):not(:focus-within) #nav-bar {
    max-height: 0 !important;
    min-height: 0 !important;
    /* Use margin-bottom to allow trigger zones that are larger than the nav-bar */
    margin-bottom: calc(-1 * var(--tridactyl-auto-show-zone));
    /* margin-bottom: 0; */
    opacity: 0;
    transform: translateY(-7px);
} 

/* Avoid transparent background for menubar if nav-toolbox not focussed */
#navigator-toolbox:not(:hover):not(:focus-within) #toolbar-menubar > * {
    /* Colour matches the grey background of the default firefox theme. Can't see what variable it uses */
    background-color: rgb(232, 232, 231);
}

/* Make top bar more compact */

/* Make nav-bar thinner */
#nav-bar, #TabsToolbar {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* We need more padding when maximised (maybe just on Windows?) */
#main-window[sizemode="maximized"] #nav-bar {
    padding-top: 0px !important;
}
#main-window[sizemode="maximized"] #mainPopupSet {
    padding-top: 7px !important;
}

/* Partial removal of black bottom 1px line shown in fullscreen mode */
#navigator-toolbox::after { display: none !important; }

/* Kill tab bar */
/* #TabsToolbar { visibility: collapse; } */

/* Compact tab bar */
/* Remove window decorations (Close, Minimize, Fullscreen) */
#titlebar {
  display: none !important;
}

#TabsToolbar .titlebar-placeholder { display: none !important; }

/* Delete header of Tree Style Tab */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/* Move tab bar to bottom */
#TabsToolbar {
  -moz-box-ordinal-group: 2;
}

AnkPixivToolの復活

つい先日気付いたけれど、 AnkPixivToolがWEに対応していた。開発者の皆様、本当にお疲れ様です。

WE対応の恩恵なのかChromeでも動き、Chromeではbrowser_action(ツールバーボタンのクリック)にショートカットを設定できるため、片手でポンポン画像が保存出来てとても捗る。

どちらかというと、Chromeを使う上でより便利になった感じ。
Firefoxも早くbrowser_actionにショートカット設定できるようになって。なる…よね？

総評

UIがスッキリしたおかげで、調べものは良くFirefoxを使うようになった。拡張はまだまだ過渡期といった感じだけれど、少しずつ良くなってきた感もある。

引き続き、今後に期待したい。

クマーなひとときv2

雑多なメモ。twitterで書ききれないもの等。

Firefox(Nightly)の環境を整えた話

Firefox(Nightly)の環境を整えた話

Vim操作

ツリー型タブの導入

Stylusの導入

UIの変更

css

AnkPixivToolの復活

総評