2012年12月11日火曜日

firefox : ピン止めされたタブのタイトルを表示

ラベル: 時刻:

firefox17でのお話。 firefoxでタブをピン留めすると、タブからタイトルが消えてアイコンだけになります。 これだと意外に不便です。 例えば、Yahooの天気予報とニューストピックをピン留めした場合、両方同じアイコンになって判別できません。 最初の何文字かは表示したい。

そんなときは、userChrome.cssやアドオンのstylishなどでこう書きます。 

.tabbrowser-tab[pinned] *:nth-child(3)
{
    min-width:100pt;
    text-decoration: underline;
    font-weight: bolder;
}

.tabbrowser-tab[pinned]:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAASUlEQVQoz52QOw4AIAhDi+d25N7PgUGRwU+XBtK0UNMEWmFBTQfYNrNvjw5J4GSuEdT9bYQj0puICHo78qKHsO3fPXwJCpxHhwENzBCmyHjLbgAAAABJRU5ErkJggg==);
/*  content: "*"; アイコンじゃなくていい場合 */
}

/* タイトル表示するならアイコンは要らないという場合
.tab-icon-image[pinned] {
    display:none;
}
*/

ピン留めされたタブのラベル?にmin-widthを設定すれば、タイトルが表示されました。 タイトルはできるだけ短くなるらしく、max-widthの方を設定しても無駄。 まぁ、頭がちょっと見えていたらいいんですけどね。

タイトルを表示させただけだと普通のタブとピン留めされたタブの区別が付かないので、下線や太字などの文字装飾を追加しています。 ついでにピン留めのアイコンを16x16ピクセルで適当に描いて()データURIスキームで追加。

ちなみに、アイコンの画像ファイルをリソースに指定する方法を検索したけど見つかりませんでした。 スキンの画像を流用とか、デフォルトのアイコンを流用とかはできるらしいんですけどね。

データURIスキームは、cssやhtmlなどで画像ファイルを書くところに「url(data:image/png;base64,????????)」などと書いて使います(pngファイルの場合)。 本来別ファイルが必要なものをドキュメントに埋め込むための仕組みです。 cssと画像ファイルなどを別々に管理する必要が無くなります。 「ウェブサイトに使って通信量を減らす」みたいな使い方もあるようですね。 cssと画像ファイルの2つを送るより1つにまとめた方が速いとか。 画像ファイル以外でも使えるようですが、画像ファイル以外で実際に使っているところは見たことがありません。

????????の部分は画像ファイルのバイナリデータをbase64でエンコードするだけです。 javaでエンコードするサンプルコードはこちら。

エンコード後のデータサイズは元の画像ファイルより大きくなるので注意。 小さな画像用です。

投稿者