野良 Scrapbox アプリ - 動的なタブ幅のリサイズ

blog.kondoumh.com

Electron 14 がリリースされたので野良 Scrapbox に適用しました。

13の時は発生してなかったんですが、タブを作成するときにページ内リンク以外のメニューとか、ツールバーの favs などからページを開くとアプリごとサクッと落ちるようになってしまいました。

タブの UI 部品である electron-tabs に問題がありそうとあたりを付けて試しに最新バージョン (v0.15.0) を適用してみました。

www.npmjs.com

最新版では問題が出ませんでした。適用してたのは、v0.10.0 という2年ぐらい前のバージョンです。2年前といえば、Electron 6か7の頃。かなり古いのでやはりアップデートしないといけない感じです。

ずっとバージョンを固定してたのは、electron-tabs v0.11.0 以降 WebView を埋め込んだタブは折り返しされず隠れてしまうという現象があり、ずっと直っていないからでした。公式のサンプルですらそうなのでもうそういう仕様だと思うしかないみたいです。いちおう issue 登録したので様子見はしますが。

ということで、ブラウザのようにタブをたくさん開いたときにタブ幅をぎゅっと詰めて沢山開くことができるようにするかーってことで、リサイズを実装することにしました。

f:id:kondoumh:20210913152852p:plain

f:id:kondoumh:20210913152909p:plain

これは雑な計算でスタイルシートの幅調整しているだけですが、Chrome などのタブ幅調整がいかに視覚的に違和感ないよう高度に実装されてるかうっすら想像できました*1

github.com

*1:ブラウザのタブは DOM ではなくは各 OS のウィジェットで実装されてると思いますが