Mozilla Firefox 多段タブスレ Part.3 (988ﾚｽ)
上下前次1-新
850(1): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)18:17 ID:ZtSNSulB0(3/7) AAS
>>849
タブ間の垂直間隔でアクティブタブ(ピン留め含む)が効いていません
仕様なのかわかりませんが対応できたらお願いします。
tabbrowser-tabs {
--tab-block-margin: 1px;
}
851: (ﾜｯﾁｮｲ ca31-/90x) [850] 08/02(土)18:53 ID:ZtSNSulB0(4/7) AAS
すみませんbox-shadowで対応しました
/* アクティブタブの背景色 */
.tab-background:is([selected], [multiselected]) {
background-color: #94a3b3 !important;
box-shadow: 0 1px 0 #94a3b3 inset !important;
}
852(2): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)19:16 ID:ZtSNSulB0(5/7) AAS
MultiTabRows@Merci.chao.uc
バーの順番を入れ替えている場合
タブを削除していくとタブの無いタブバーが1段残ったままになります。
画像ﾘﾝｸ
#toolbar-menubar { order: 1; } /* メニューバー */
#nav-bar { order: 2; } /* ナビゲーションツールバー */
#TabsToolbar { order: 3; } /* タブバー */
#PersonalToolbar { order: 4; } /* ブックマークツールバー */
853(1): Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)21:29 ID:gkqAaoohH(6/7) AAS
>>850
#tabbrowser-tabs ですね
最初のハッシュコードが抜けてるせいかも
>>852
userChrome.css をメールで送っていただければ、こちらで確認できますので、よろしくお願いします
mercichao@gmail.com
github でもオッケーです
外部ﾘﾝｸ:github.com
854(1): 08/02(土)22:36 AAS
これ、タブの幅を少し広げるには、何処を変更すればいいですか？
段数は３段がよかったので「maxTabRows: 3,」にしたのですが、
幅の変更がよく分からない…(汗)
855: 08/02(土)22:42 AAS
>>854
あ、解決しました。
browser.tabs.tabMinWidth を書き換えたら、リアルタイムで変化して、
適切な幅が分かり易くていいですね。
856: Merci chao (JP 0He7-+9KN) [mercichao@gmail.com] 08/02(土)22:46 ID:gkqAaoohH(7/7) AAS
>>852
バージョン 3.1 が公開されました：
外部ﾘﾝｸ[js]:github.com
Firefox を次回起動したときに、アップデート通知が表示されるかもしれません（※通知機能を無効にしていない場合）
今のところ通知は英語ですが、日本語メッセージは v3.1 に含まれています
変更履歴：
- 追加 autoCollapse と関連オプション: ホバーしていないときにタブを1行に折りたたむ。Firefox 115 では layout.css.has-selector.enabled を有効にする必要があります。（実験的）
- 追加 tabsAtBottom：タブバーを下部に配置（1: ナビゲーションツールバーの下、2: ブックマークツールバーの下）。Firefox 115 では未対応。
- 追加 hideDragPreview：タブやグループをドラッグ中にプレビューを非表示。値の例：0（常に表示）、1（グループのみ）、2（タブのみ）、3（両方）。
- 追加 animationDuration：アニメーションの長さ（ミリ秒、0〜1000）。※長すぎるとパフォーマンスに影響します。
- 追加 tabMaxWidth：タブの最大幅を指定。最小幅は browser.tabs.tabMinWidth を使ってください。
- 追加 hideScrollButtonsWhenDragging：ドラッグ時にスクロールボタンを非表示にする設定。
- タブグループからタブ全体をドラッグする際、ドロップするまではグループを維持。
- Firefox 142 に対応。
- タブを上下端にドラッグしてスクロールする際の不具合を修正。
- compactControlButtons は Windows 11 では常に利用可能。
- 一部テーマでの表示崩れを修正。
- その他、軽微なバグ修正。
新しく追加された tabsAtBottom オプションで、タブバーの表示順を変更できるようになりました
userChrome.css に関連する設定を使っている場合は、一度削除して、問題が解消するか確認してみてください
それと、タイトルバーを使っているようですね。もしよければ、以前のレガシー拡張をベースにした別スクリプト「Page Title in URL Bar」も試してみてください：
外部ﾘﾝｸ[js]:github.com
ページタイトルと URL の両方がアドレスバーに表示されます
このような感じになります：
画像ﾘﾝｸ
857: (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)22:47 ID:ZtSNSulB0(6/7) AAS
>>853 ありがとうございます
原因違ったようです
ツールバーの順番は関係なかったです
原因はこれでした--tab-min-height: 25px;
デフォルトの36pxだと問題無く消えます。
Firefoxの密度設定は通常に設定しています
#tabbrowser-tabs {
/* タブのコンテンツの高さ：
* コンパクト-29px、通常-36px、タッチ-41px；
* 24px 未満には設定しないこと。また、ピクセル単位の整数値を使うことで表示の不具合を防ぎます。*/
--tab-min-height: 25px;
}
一応CSS送りました。見ていただけると助かります。
858(1): (ﾜｯﾁｮｲ ca31-/90x) 08/02(土)23:51 ID:ZtSNSulB0(7/7) AAS
もしかしたら1段目のタブバー自体の高さが残ってるのかも
タブがある状態で導入したから気づかなかったけど
でも#tabbrowser-tabsで高さを変更すればバーもタブも高さは変わるはずでは？
859(1): Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)00:55 ID:lhru72SWH(1/4) AAS
>>858
userChrome_Tab.css にタブの幅を設定していたルール：
/* タブの横幅 */
.tabbrowser-tab[fadein]:not([pinned]) {
min-width: 125px !important; /* 最小値 デフォルト 76px */
max-width: 165px !important; /* 最大値 デフォルト 225px */
}
これらは上記の新バーションの設定「userChromeJS.multiTabRows@Merci.chao.tabMaxWidth」と「browser.tabs.tabMinWidth」で指定してください
ざっと見れば、これは一番怪しいです
あとでちゃんと調べてみるね
そして、userChrome_Toolbar.css にあるこれらの記述を削除し、新しい設定「userChromeJS.multiTabRows@Merci.chao.tabsAtBottom」を 1 に変更してね
#toolbar-menubar { order: 1; } /* メニューバー */
#nav-bar { order: 2; } /* ナビゲーションツールバー */
#TabsToolbar { order: 3; } /* タブバー */
#PersonalToolbar { order: 4; } /* ブックマークツールバー */
860(2): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)02:55 ID:Y4DZOhir0(1/4) AAS
>>859 ありがとうございます
これだけ残して検証しました
#tabbrowser-tabs {
--tab-min-height: 25px;
}
タブの高さは変わるけど1段目のタブバーの高さが固定されたままになりませんか？
861: (ﾜｯﾁｮｲ 0ba7-4ObG) 08/03(日)05:23 ID:3zkFSrrp0(1) AAS
この手のものは急いで導入しないで修正されるまで待たんと時間ばかり持ってかれるが
飛びつきさんがいるおかげで修正が早まることになるから飛びつきさんはありがたいと思うことにしてる
862: (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)07:01 ID:Y4DZOhir0(2/4) AAS
AIに見てもらったらどうやら
MultiTabRows@Merci.chao.uc.jsとMultiRowTabLiteforFx.uc.jsは折返しの仕様が違うことが原因ぽい
MultiTabRows@Merci.chao.uc.jsは見た目は折り返してるけど、タブバーの高さは固定されたままなので整合性が取れない
MultiRowTabLiteforFx.uc.jsは タブが多段になるとタブバーの高さも動的に変わるので整合性が高い
と言われた。修正可能か聞いたけど駄目っぽい
よくわからんけどMultiRowTabLiteforFx.uc.jsは2段目以降のバーは、実は1段目のバーの高さが折り返し分伸るだけで別に段数が増えるわけではない？
MultiTabRows@Merci.chao.uc.jsはタブ自体は折り返しているがバーが固定さてたまま折り返しの分伸びないってことっぽい？
なのでデフォルトの高さより低くすると1段しか無い時にタブだけ低くなってデフォルト分のバーの高さが残る
で、この残ってるのが2段めが消えないように見えると⋯
863: (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)08:03 ID:Y4DZOhir0(3/4) AAS
やっと出来たー
なんとかタブバーの高さを段数に応じて折り返し可能にしてみたけど一時的な回避策です
環境次第ではおかしくなるかもです
水平間隔、垂直間隔は1px, タブのコンテンツの高さ25px用です。
/* 暫定折り返し対応策 */
#tabbrowser-tabs {
display: flex !important; /* 横並び＋折り返し */
flex-wrap: wrap !important; /* 複数行に対応 */
height: auto !important;
min-height: var(--tab-min-height) !important;
--tab-overflow-clip-margin: 1px;
--tab-inline-padding: 1px;
--tab-min-height: 25px;
--tab-block-margin: 1px;
}
js内でなんとかしてほしい
864(1): (ｽｯﾌﾟﾌﾟT Sd9b-d7oq) 08/03(日)08:35 ID:AR96PkUsd(1/2) AAS
MultiRowTabLiteforFx.uc.js を編集しようとしたら，
「〜というファイルを開けません
読み込みアクセス権がありません」と出るようになってしまった。
解決方法を教えてください。
865: (ﾜｯﾁｮｲ a37b-B3Cu) 08/03(日)10:16 ID:rMwK8ju20(1) AAS
まずはAIに聞こう
866(1): (ﾜｯﾁｮｲW 139f-//aw) 08/03(日)10:35 ID:32zEt/4x0(1) AAS
>>864
エスパーだけど、最近の関連スレでの類似書き込みを見るにESETあたり使ってるんじゃねーの
867: (ｽｯﾌﾟﾌﾟT Sd9b-d7oq) 08/03(日)10:48 ID:AR96PkUsd(2/2) AAS
>>866
ESETが原因でした。
ありがとうございました。
いくつかの設定をOFFにしていったけど，あっちをOFFにして，あっちをONにして…とやってたら，どの設定が原因かわからなくなった…
868(1): Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)11:32 ID:lhru72SWH(2/4) AAS
>>860
やっと原因が分かりました
これって、前に話してた件ですよね？
画像ﾘﾝｸ
原因は、Firefoxの組み込みスタイルルールにより、`#tabbrowser-tabs` に `min-height` が適用されており、そのルールでは `--tab-min-height` という変数に 36px が設定されているためです：
画像ﾘﾝｸ
一方で、`userChrome_Tab.css` では 25px に設定していて、上書きもされていないのに…
画像ﾘﾝｸ
実は、`--tabstrip-min-height` が `:root` で定義、計算されているせいでした：
画像ﾘﾝｸ
なので、`:root` に `--tab-min-height` を指定してあげることで、`--tabstrip-min-height` にも反映されるようになります：
画像ﾘﾝｸ
Firefoxの組み込みスタイルの方が優先度が高いみたいなので、`!important` を付けるのは必要そうです
これで余白もちゃんと消えました：
画像ﾘﾝｸ
`--tab-min-height` の挙動をちゃんと確認してなかったのは自分のミスでした…。
あと、`userChrome_Tab.css` にある `min-width` や `max-width` の指定も忘れずに削除してくださいね
タブが動いたりアニメーションする時に、わずかに揺れるような現象があります。これは、`--tab-min-height` を 25px に設定した場合に、他のスタイルルールの影響でタブの最終的な高さが小数点付きになってしまうためです。 おそらく視覚的なグリッチ（表示上の不具合）であり、次のバージョンで修正を試みる予定です。
869: Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)11:37 ID:lhru72SWH(3/4) AAS
>>860
--tab-block-margin も同じようにしてね
870(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/03(日)12:31 ID:Y4DZOhir0(4/4) AAS
>>868
ありがとうございます。お疲れ様です。
問題なく動作するようになりました。
:root {
--tab-min-height: 25px !important;
--tab-inline-padding: 1px !important;
--tab-overflow-clip-margin: 1px !important;
--tab-block-margin: 1px !important;
--tab-inline-padding: 8px !important;
}
クリーンな状態で導入しなかったせいで混乱したけど
たぶんタブに色を付けてなかったら気づかなかったと思う
871: Merci chao (JP 0Hf3-pNjB) [mercichao@gmail.com] 08/03(日)12:33 ID:lhru72SWH(4/4) AAS
タブの高さによって、より複雑な依頼されているようです
特にドラッグ＆ドロップ処理では、正確な高さ判定が求められます。終的な高さが小数点付きになってしまうと不具合が発生するのを観察しました
当面は、なるべく Firefox のデフォルトスタイルを使用することをおすすめします
872: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)11:49 ID:8f1dKc9uH(1/2) AAS
>>870
タブの高さ関連ルール：
:root {
/* タブ間の垂直間隔 */
--tab-block-margin: 1px !important;
/*
タブのコンテンツの高さ：コンパクト-29px、通常-36px、タッチ-41px；
24px 未満には設定しないこと。また、ピクセル単位の整数値を使うことで表示の不具合を防ぎます
*/
--tab-min-height: 36px !important;
/*
このルールが必要になる条件：(--tab-min-height) + (--tab-block-margin) * 2 < 33px
なぜ 33px か？.tab-label-container のデフォルト高さは2.7em、フォントサイズが12pxの場合は最大で約33px
タブは .tab-label-container より高くする必要があります
例：
- --tab-min-height = 29px
- --tab-block-margin = 1px
→ 合計：29 + 1×2 = 31px
31px < 33px となるため、レイアウト崩れを防ぐためにこのルールが必要です
*/
.tab-label-container {
height: auto !important;
}
}
873: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)12:12 ID:8f1dKc9uH(2/2) AAS
タブの高さを調整したい方は、上記のルールを追加することで、現在の MultiTabRows@Merci.chao.uc.js バージョン 3.1 でも正常に動作するはずです
不具合が発生した方は、ぜひご報告ください
874(2): 870 (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)15:31 ID:626kAffw0(1/5) AAS
タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります
なので0.5pxで指定すると見た目上1pxになるが、アイコンと文字よりタブが下方向にずれたように見えます
環境によっては下のバーにタブが少し重なりますし、他にも色々と表示の乱れが出ますね。
対策として垂直間隔と水平間隔の余白を無くし、タブの右端と下端に背景色で'box-shadow'を使い擬似的に垂直間隔と水平間隔の余白を1pxに見えるようにしました。
多段タブや他の表示には影響は無いと思いますがどうでしょうか？
画像ﾘﾝｸ
/* タブ高さ・余白を調整する */
:root {
--tab-min-height: 25px !important;
--tab-block-margin: 0px !important;
--tab-inline-padding: 6px !important;
}
/* 通常タブの水平間隔の余白を無くす */
.tabbrowser-tab {
display: inline-block !important;
margin-inline: 0 !important;
}
/* ピン留めタブの水平間隔を無くす */
.tabbrowser-tab[pinned] {
padding-inline: 0 !important;
}
875: Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)16:58 ID:R8dnqpmrH(1/6) AAS
>>874
> タブの垂直間隔と水平間隔を見た目上1pxしたいが1pxで指定すると実際は2pxになります
上記の inline-padding や block-margin は、padding-left・right や margin-top・bottom を一括で設定する、Firefox の組み込みパラメータです。
そのため 1px を指定すると、実際には 2px の余白が追加されてしまいます
また、小数点指定は環境によって表示の乱れなど様々な問題を引き起こすため、0.5px などの指定は避けた方が無難です
なお、box-shadow は要素のサイズやレイアウトに影響を与えないため、安心して使用できます
ただし、以下のルールでは組み込みパラメータを使用せず、margin や padding を直接指定するため、レイアウトが乱れる可能性があります：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.tabbrowser-tab {
/*
デフォルトは flex なので、inline-block は全然別のレイアウト設定です
inline-block と flex の違いや動作原理を理解していない場合は、使用しないでください
*/
display: inline-block !important;
/* タブ間の水平間隔は :root の --tab-overflow-clip-margin で指定してください */
margin-inline: 0 !important;
}
/* ピン留めタブの水平間隔は .tab-content[pinned] の padding-inline で指定してください */
.tabbrowser-tab[pinned] {
padding-inline: 0 !important;
}
876(3): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)17:01 ID:R8dnqpmrH(2/6) AAS
>>874
総括すると、このような感じ：画像ﾘﾝｸ
:root {
--tab-overflow-clip-margin: 1px !important; /* タブ間の水平間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-inline-padding: 6px !important; /* タブの左右の余白 */
--tab-block-margin: 1px !important; /* タブ間の垂直間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-min-height: 25px !important;
}
.tab-label-container {
height: auto !important;
}
.tab-content[pinned] {
padding-inline: 5px !important; /* ピン留めされたタブの左右余白 */
}
/* 以下はスクリーンショットの真似 */
.tab-background {
--background: rgb(180, 180, 180);
background: var(--background) !important;
box-shadow: 1px 1px var(--background) !important;
border-radius: 2px !important;
&[selected] {
--background: rgb(148, 163, 179);
}
}
877(1): Merci chao (JP 0Hcf-B3Cu) [mercichao@gmail.com] 08/04(月)17:32 ID:R8dnqpmrH(3/6) AAS
修正：
:root {
--tab-overflow-clip-margin: 0px !important; /* タブ間の水平間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-inline-padding: 6px !important; /* タブの左右の余白 */
--tab-block-margin: 0px !important; /* タブ間の垂直間隔、以下の box-shadow で 1px 間隔を真似 */
--tab-min-height: 25px !important;
}
.tab-label-container {
height: auto !important;
}
.tab-content[pinned] {
padding-inline: 5px !important; /* ピン留めされたタブの左右余白 */
}
/* Active Tab BG */
.tab-background:is([selected], [multiselected]) {
background-color: #94a3b3 !important;
box-shadow:
inset 0 -1px 0 0 #d2d2d2, /* 下端に1pxの影 */
inset 1px 0 0 0 #d2d2d2 !important; /* 右端に1pxの影 */
}
/* Inactive Tab BG */
.tab-background:not([selected], [multiselected]) {
background-color: #a5a5a5 !important;
box-shadow:
inset 0 -1px 0 0 #d2d2d2, /* 下端に1pxの影 */
inset 1px 0 0 0 #d2d2d2 !important; /* 右端に1pxの影 */
}
878(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)18:04 ID:626kAffw0(2/5) AAS
>>876
ありがとうございます。
そうですよね。タブを背景色で削るんじゃなくてタブの色を端に足せばいいんですよね。
コンパクトにすることに夢中だったせいか気づかなかった。
おかげで綺麗に修正できました
879(1): (ﾜｯﾁｮｲ 6b31-B3Cu) 08/04(月)18:43 ID:626kAffw0(3/5) AAS
あれ？ 修正来てた
まぁいいか
余白をゼロにしてから背景色でタブを削るなら修正された>>877の記述で
余白をゼロにぜずタブの色で足して詰めるなら>>876の記述で
ってことでいいのかな？
上下前次1-新書関写板覧索設栞歴
あと 109 ﾚｽあります
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ
ぬこの手 ぬこTOP 0.030s