🦊

Vivaldiでアドレスバーの横にブックマークバーを配置する

2023/08/12に公開

モチベーション

Firefoxに慣れてしまってはアドレスバーの横にブックマークを並べられないブラウザを使うことができなくなってしまう．タブバーとツールバーで結構な高さを取るのにブックマークバーを表示しては目障りで仕方がない．
しかし「NHKプラス」が「Firefox」のサポートを“完全”終了へ～ 5月23日より視聴不可能にからもわかるように最近はFirefoxのサポートを終えているサイトも少なくない．私にとっての問題はnoteの記事作成画面においてmarkdown形式でペーストしてもFirefoxではnote形式に展開されないというものだった．
FirefoxからChromiumブラウザへの乗り換えで散見されたVivaldiを選んでみたが，標準のカスタマイズ機能ではツールバーにブックマークを置けないようなのでカスタムcssファイルを作成した．

制作物

https://gist.github.com/slnq/5b77b333d26a07409104694c2b22fef7

vivaldi.cssがVivaldiで使っているUI用のCSS
userChrome.cssはFirefoxで使っているUI用のCSS
userContent.cssはFirefoxで使っている任意のサイト用のCSS

vivaldi.css

Vivaldiではアドレスバーなどが含まれるmainbar，bookmark-bar，サイトを表示するinnerがmainというflexコンテナに入っている．この辺のことはGuide: Customizing Vivaldi’s UI with CSS modsを参考にするとわかりよい．当初はmainbarとbookmark-barを2重のflexコンテナに入れることを考えたが，カスタムjsファイルを読み込む為のbrowser.htmlがアップデートの度に初期化されるらしくcssのみでの実装を考えた．結果としては以下のようになった(全文はvivaldi.cssに書いておく)．

#main {
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.inner {
  flex-basis: 100% !important;
}

このコードの中でもflex-directionやwrapはすぐに思いつくのだが，それだけではうまくいかず色々と試した末にflex-basis: 100% !important;が肝要であるとわかった．
一応これでブックマークバーとツールバーを並べることには成功したが，Firefoxではツールバーにブックマークを展開していたわけで，見た目は一緒だが構造は違うよなと少しもどかしい．

Firefox

userChrome.cssでは右クリックしたときのメニューの要素を大量に隠しているのでわかりにくくなっているが，基本的にはタブバーを低くしたり，ページ内検索を上に移し背景を設定している．
userContent.cssでは新規タブの背景画像を設定したり，TweetDeckの新しいバージョンへの以降を促すリンクを消したり，YouTubeのヘッダーを透過させたりしている．これもVivaldiで使いたいのだが拡張機能を使わないといけないようで二の足を踏んでいる．

所感

取り敢えずブラウザに求める要素のうち最も大事なブックマークをアドレスバーの横への配置をChromiumベースのブラウザで実装できてよかった．610億円を払って「Firefox」を延命するGoogleのズル賢さからもわかるようにFirefoxが無くなることはないだろうが，今後も肩身は狭いだろう．Vivaldi以外の候補としてはSleipnirとFloorpがあったが日本発のものは情報が少ないことが往々にしてあるため避けがちである．
取り敢えずPCのブラウザ環境には満足したので後はAppleは携帯端末のWebKit強制の終了を待つのみ．

モチベーション

制作物

vivaldi.css

Firefox

所感

Discussion