MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

バージョンアップ(115)でuserChrome.cssが無効に
https://forums.mozillazine.jp/viewtopic.php?f=3&t=22239		 ページ 1 ／ 1
作成者:  うまっぽい [ 2023年9月11日(月) 17:57 ]
記事の件名:  バージョンアップ(115)でuserChrome.cssが無効に
お世話になります。
早速ですがThunderbirdを115にアップデートしたらuserChrome.cssが無効になりました。
(OSはWindows11 Homeです)

仕様変更とのことですが、以下の内容を新しい仕様に変更お願いできますか。
※未読メッセージなどを強調させたいです。


■スレッドペインの未読メッセージの表示色を変える

treechildren::-moz-tree-cell-text(unread) {
color: red !important;
text-decoration: underline;
}

■フォルダペインの未読メッセージの表示色を変える

#folderTree > treechildren::-moz-tree-cell-text(hasUnreadMessages-true) {
color: red !important;
text-decoration: underline;
}

/* closed folder containing subfolder with unread messages */
#folderTree > treechildren::-moz-tree-cell-text(closed, subfoldersHaveUnreadMessages-true) {
color: red !important;
text-decoration: underline;
}

/* open folder containing subfolder with unread messages */
#folderTree > treechildren::-moz-tree-cell-text(subfoldersHaveUnreadMessages-true) {
color: red !important;
text-decoration: underline;
}

■フォルダペインの新着メッセージがあるアカウント名の文字色を変更する

#folderTree > treechildren::-moz-tree-cell-text(isServer-true)
{
color: black !important;
}

/* style account name with new mail */
#folderTree > treechildren::-moz-tree-cell-text(isServer-true, biffState-NewMail)
{
color: red !important;
text-decoration: underline;
}

数が多くてお手数おかけしますが、どうぞよろしくお願いします。
作成者:  EarlgreyTea [ 2023年9月11日(月) 21:59 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
うまっぽい さん、EarlgreyTea と申します。

うまっぽい さんが書きました:
早速ですがThunderbirdを115にアップデートしたらuserChrome.cssが無効になりました。

正確には userChrome.css が無効になったわけではなく、そこで指定している CSS のセレクター等が Thunderbird の画面UIの変更で使えなくなったということです。
残念ながら、私はいまそれを調査する時間をあまり取れません。
なので、もしこうしたらいいよとわかる方は、ぜひそれをご提示いただけたらと思います。

あと、CSS を人に聞くだけでなく、自分で調べられるようになった方が今後よいと思いますので、やり方のとっかかり部分をお教えします。

Thunderbird でメニュー＞ツール＞開発ツール (Ctrl + Shit + I) を選択します。
その最、「リモートデバッグ接続要求」という画面が出て「接続を許可しますか？」と訊いてくるので「OK」を押します。
すると「◯◯プロセスブラウザーツールボックス」という画面が開きます。
その画面とThunderbirdの画面を作業しやすいようにうまく配置しておきます。

ツールボックスのツールバー左の「インスペクター」およびその左端の矢印ボタンを使用します。
矢印ボタンを押して青字になった状態で、Thunderbirdの調べたいUI部分をクリックします。
そうすると、インスペクター画面に対応するHTML部分が表示されます。
逆にインスペクター画面で選択すると、対応するThunderbirdの画面の部分が選択されます。
こうやってCSSを書きたい部分のHTML構造を調べ、どういうセレクターにしたら指定できるか調べます。

これが基本的なやり方です
作成者:  うまっぽい [ 2023年9月12日(火) 10:06 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
EarlgreyTea様ありがとうございます。

開発ツールの手順とても参考になりました。

しかし、試したところうまくできません。

スレッドツリーの未読色を赤に変えるテストをしてみました。
開発ツールで以下のようにcssを変更しました。

#threadTree tbody [data-properties~="unread"] {
font-weight: bold;
color: red; /* ここを追加 */
}
結果は思い通りに未読メッセージが赤文字となりましたが、userChome.cssにそのままコピペしてThunderbirdを再起動したらcssが反映されてませんでした。

コピペでは駄目でしょうか？
作成者:  EarlgreyTea [ 2023年9月12日(火) 21:18 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
UI側で設定していないプロパティならともかく、
userChrome.css で上書きしようとしているわけですから「!important」は必須です。
作成者:  Heartfield [ 2023年9月13日(水) 10:54 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
うまっぽい　さん、Heartfield　です。

調査方法は EarlgreyTea さん が非常に詳しく書いてくださっているので、試していただければと思います。

ご参考に。

コード:
/* フォルダツリーで未読メッセージがあるフォルダの文字色を青色に変更 */
.unread > .container > .name {
  color: blue !important;
}

/* フォルダツリーで新着メッセージがあるフォルダ名の文字色を赤色に変更 */
.new-messages > .container > .name {
  color: red !important;
}

/* フォルダツリーで未読メッセージがあるフォルダを選択したときのフォルダの文字色を白色に変更 */
#folderTree:focus-within li.selected.unread > .container > .name {
  color: white !important;
}

/* メッセージリストで未読メッセージの文字色を青色に変更 */
tr[data-properties~="untagged"][data-properties~="unread"] {
  color: blue !important;
}

/* メッセージリストで未読メッセージを選択したときの文字色を白色に変更 */
tr[data-properties~="untagged"][data-properties~="unread"].selected {
  color: white !important;
}
作成者:  うまっぽい [ 2023年9月13日(水) 16:27 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
EarlgreyTea様

!importantの意味がわかってませんでした。
そもそもcssも簡単なものしか理解してません。
大変勉強になりました、ありがとうございました。


Heartfield様

やりたいことがご教授いただいたコードでできました。
ありがとうございました。
そのコードを見ながらEarlgreyTea様に教えていただいた開発ツールで確認するととても勉強になります。

EarlgreyTea様、 Heartfield様
大変お世話になり、ありがとうございました。
今後仕様変更があっても自力で出来そうです！
作成者:  やまP [ 2023年10月19日(木) 18:07 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
参考までですが私の好きなパターンで下記で動きました。


#threadTree tr:nth-of-type(odd) {
background-color: #E9EFF7;
}

:root {
--thread-pane-unread-color: #FF0000 !important;
}

#threadTree tbody [data-properties~="unread"] {
color: var(--thread-pane-unread-color);
}

.unread > .container > .name,
.new-messages > .container > .name {
color: #FF0000 !important;
}

#folderTree:focus-within li.selected.unread > .container > .name,
#folderTree:focus-within li.selected.new-messages > .container > .name {
color: #ffffff !important;
}

.unread > .container > .unread-count {
background-color: #FF0000 !important;
}

#folderTree:focus-within li.selected > .container > .unread-count {
background-color: #ffffff !important;
color: #FF0000 !important;
}
作成者:  やまP [ 2024年8月07日(水) 13:52 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
2024.8.7 アップデートがかかって効かなくなっていたので下記に修正したら表示されました。

#threadTree tr:nth-of-type(odd) {
background-color: #E9EFF7;
}

:root {
--thread-pane-unread-color: #FF0000 !important;
}

#threadTree tbody [data-properties~="unread"] {
color: #ff0000 !important;
}

.unread > .container > .name,
.new-messages > .container > .name {
color: #FF0000 !important;
}

#folderTree:focus-within li.selected.unread > .container > .name,
#folderTree:focus-within li.selected.new-messages > .container > .name {
color: #ffffff !important;
}

.unread > .container > .unread-count {
background-color: #FF0000 !important;
}

#folderTree:focus-within li.selected > .container > .unread-count {
background-color: #ffffff !important;
color: #FF0000 !important;
}
作成者:  るみぞう [ 2024年9月22日(日) 08:31 ]
記事の件名:  Re: バージョンアップ(115)でuserChrome.cssが無効に
未読メール色設定がツリー表示は大丈夫だったのですが、メール側は黒文字に戻ってしまってい、困ってました。＃FF0000 ⇒ #0000FF に変更して青色で使用させていただきました。
ありがとうございます。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/