脳log[Firefox: 2008-05-27～]

♪ [Firefox][javascript][SHJS] <pre>が真っ白になり、黒色の領域が出現する。

例えばこのページ http://vvvvvv.sakura.ne.jp/ds14050/diary/20080112-7.html 。Endキーで末尾に移動して PageUpで戻っていくと空白の PREが目に入ると思う。その少し上にはページの内容を覆い隠す黒い領域があるはず。(そうでなければ修正されたのだろう。Firefox2で最初に確認し、Firefox3.0RC1でも直っていなかったが)

大量の PREが存在したり、一つだけでも巨大な PREが存在する場合に起こる様子。innerHTMLで PREの内容を置き換えているのも原因になっているかもしれない。

画面の末端にスクロールした状態でページをリロード(F5 or Ctrl+R)すると下方の PREが正常に表示される反面、上端付近の PREに同じ問題が生じる。遠方の PREの書き換えに問題があるのでは？

真っ白の PREの中で、右クリックしたりテキストを選択したりといったアクションを起こせば正常に表示されることが多い。

あと、PREの中から開始した選択は PREの外に出られなかったり。(これは TEXTAREAと違い PREでは Ctrl+Aで全文選択ができないために用意された代替手段だという気もする)

♪ [Firefox] Firefox 3 beta 5の faviconがおかしくなったので

アイコンキャッシュを全削除。

>sqlite3 places.sqlite
sqlite> DELETE FROM moz_favicons;

favicon.icoが存在しないサイトの faviconが何かの拍子に別のサイトの faviconになってしまうことが何度かあった。(そしてそのサイトには favicon.icoがもともと存在しないため、更新されることもなく間違え続ける)

♪ [Firefox] Firefox3 beta5 をインストールした

Firefox2が標準ユーザーでのアップデートに失敗するようになっていて 2.0.0.14のインストールが面倒くさかった*ので 2をアンインストールして 3 beta5をインストール。Firefox2のときと違って

extensions.checkCompatibility false

を知ってるから、バージョンの数字だけを見て、ほとんどの拡張を使用不可能にされるアホらしい事態慎重すぎる対応は避けられる。(といっても半数近くの拡張がすでに 3に対応していた。Google Toolbarは Fx3をクラッシュさせた)

• http://firefox.geckodev.org/index.php?usercontent.css#gd114c0a を表示すると Firefoxの CPU(デュアルコア)使用率が 50%に張り付く
• フォームの background-color指定が効かなくなっている
• 選択テキストのドラッグが Safariばりにエロい (文字が滲んでて汚いが)
• 「同時に複数のタブを閉じるときは確認する」が働いていない
• 長い URLが折り返してる (white-space: pre-wrapも使えるとか)
• ブックマークアイコンがネスケだ (色合いが)
• タブキー押しっぱなしのフォーカス移動が高速
• <input type="file">が入力欄(に見える部分)も含めてボタンである

というのが気付いたところ。

 追記

フォームの背景色の問題は起こるところと起こらないところがある。自サイトの tDiaryと本棚では色が変わらないが、はてなや、google.co.jpのホームページの検索窓は色が変わる。google.co.jpでも、結果ページの検索ボックスは背景色が変わらない。(いずれも Firebugで Inspectして、userContent.cssで行った background-colorの指定が有効なのは確認している)

Firefox2と 3(の Gecko)で何が変わったのだろう。背景色が全く変えられなくなったわけじゃないみたいだけど。

 追記

borderや border-styleや border-widthをインラインスタイル属性として <input>タグに書き込むと背景色が変わった。(ボーダーの属性値は noneでも solidでも 0pxでも良い)

わけがわからないから、Firefoxの CSSへの準拠度が上がったせいでサイトデザインの不具合が明らかになった、というわけではないな。

♪ [Firefox] Bitstream Vera Sans Mono フォント(等幅)をインストール

Firefoxも IE7も可能な場所はすべてメイリオを使うことにしているが、Serif(明朝)と等幅フォントをメイリオにするわけにはいかない。いままで等幅フォントはデフォルトの MS ゴシックのままにしていたのだが、よく耐えられたものだと思う。日本語部分は MS ゴシックなりなんなりに頼らなければならない*にしても英字部分の選択肢は無数にあるじゃないか、ということに気付いてしまった。

http://www.codestyle.org/css/font-family/sampler-Monospace.shtml

これはもう Bitstream Vera Sans Monoしかない。Nimbus Mono Lも悪くはないけど、Bitstream Vera Sans Monoは線が太めで、MSゴシックみたいに掠れた感じが全くしないのがいい。他のフォントはヒゲが多かったり、四角かったりで好みではない。

 どんだけ拡大しても太字が区別できない

Firefoxで Bitstream Vera Sans Monoの文字をどれだけ拡大しても太字と普通の字が区別できないのはフォントの問題じゃない気がしてきた。ノーマル、太字、斜体、太字＆斜体の四種がインストールされてるのは確認してるし、フォントビューアでは区別できるのに、Firefoxでは区別できない。

……。Firefoxを再起動したら区別できるようになった。フォントをインストールした後は一回再起動した方がいいみたい。

 IE7のフォント設定

フォントの選択肢が少なすぎる。Bitstream Vera Sans Monoも設定できなかった。それに日本語のページでのデフォルトのフォントは指定できるのに英語のページでのフォントが指定できないのはなんで？⁑

 Firefoxの<input type="text">でのフォントって？

等幅でも明朝でもゴシックでもない。そもそも Googleの検索ボックスの中の文字があまりに見苦しかったから新しい等幅フォントを探してきたというのに。どのフォントの設定をいじっても変化しない。ユーザースタイルシートでなんとかなるか？

……。userContent.cssに

input { font-family: monospace }

を追加したら Bitstream Vera Sans Monoになった。ヽ(^0^)ノわーい

なんでもかんでも monospaceにしたら場所(幅)をとって仕方ないのでやっぱりちょっと変更。

input { font-family: monospace }
input[type] { font-family: sans-serif }
input[type=text],
input[type=file] { font-family: monospace }

 結局 Consolasにしちゃった

Consolasは Vistaに付いてくる、Bitstream Vera Sans Monoの左右を詰めたようなフォント。空間効率って大事。(自分は気にしないけど、ゼロの形もシータの大文字みたいなのから一般的な斜線の入ったものになっている)

 この日記のテーマ(wall3)が font faceまで指定していた件

body {
	padding			:	0 2.5% ;
	font-family		:	'Verdana', 'Osaka', 'MS UI Gothic', sans-serif ;
	font-size		:	100% ;
}

Verdanaは嫌いじゃないよ、プロポーショナルだから Sakura Editorでは使えないけど。MS UI ゴシックも悪くない。メイリオ以前はこれを常用していた。sans-serif(ゴシック)も serif(明朝)より断然好きだ。

でもフォントは自分で(見る人間が)選ぶ。ファウスト並みにこだわってるのならその意志は尊重する(けど読みにくかったら読まない)けれども。

♪ [Firefox] いったいどうすれば？ > "192.168.1.7" との接続を確立しようとしていますが、このサーバが使用している証明書は "192.168.1.7" のものです。……

ちなみに Internet Explorer 7 では「この Web サイトのセキュリティ証明書は信頼できる提供元から発行されていません。」という別のエラーになった。

♪ [Firefox] 見えてる要素にだけフォーカスがあたればいいのに

スペースキーやページダウンキーで Webページを読み進めていくと、次のページ、といったリンクが最後にあるのはよくあること。Tabキーでそこにフォーカスを持って行こうとすると、サイドバーを上から下まで辿り本文を上から下まで 辿りする羽目になるのもよくあること。うんざりです。

Firefoxでスクリプトからフォーカスを順(逆)に辿るには

document.commandDispatcher.advanceFocus();
document.commandDispatcher.rewindFocus();

を使えばいいらしいが、onfocusイベントでこれらを使ったのではページは既にスクロールしてしまったあと。DHTMLの onfocusinのタイミングでフォーカスをスキップしたい。userCrome.jsでちょちょいと何とかならんものか。

マウスが手許になくなったとき恒例のぼやきでした。

♪ [Firefox][HTML] font-family:fantasy と font-family:cursive でどせいさんフォント

驚いた。Firefoxでブラウズ中に普通のサイトでどせいさんフォントが表示されたから。

そのサイトは font-familyとして fantasyを指定していた。自分はどせいさんフォントをインストールしていた。でも Firefoxが fantasyと cursiveなフォントとして どせいさん を選んだ理由がわからぬ。そんな設定項目があっただろうか。(フォントにそういうメタデータが含まれているのだろうか。プロポーショナルか等幅かをプログラムが見分けられる(はず)のだから不思議はないか)

♪ [Firefox] Mouseless Browsing 0.4.1+

何日かマウスを使っていないのでブラウザ(Firefox)のキーボードインターフェイスが気になる。

 Find As You Typeでリンクにフォーカス

Firefoxの設定で「オプション > 詳細 > 一般 > アクセシビリティ > キー入力時に検索を開始する」を有効にすると、Ctrl+Fやスラッシュを押してからでなくとも、目に付いた単語をタイプするだけでインクリメンタルなページ内検索が行える。このとき検索結果の文字列にフォーカスが移動するのが非常に都合が良くて、リンク文字列がアルファベットであればタブキーを使って順番にフォーカスを移動するよりスムーズにリンクにフォーカスをあててページを移動できる。

 Mouseless Browsingでリンクにフォーカス

Firefoxの拡張機能のひとつである Mouseless Browsingもまたキーボードを使ったナビゲーションを円滑にする。そのアプローチは全てのリンクにシリアルナンバーを割り振るというもの。リンクの右下隅に表示される数字をタイプして Enterを押すとリンク先に移動し、Enterの代わりにプラスキーを押すと新しいタブで開くといった具合。

ところで、「オプション > 詳細 > 一般 > アクセシビリティ > キー入力時に検索を開始する」と Mouseless Browsingは競合する。数字をタイプすると両方が同時に動き出すのだ。

 共存案1

最初は、Mouseless Browsingにはシリアルナンバーを割り振ることだけを任せて、Find As You Typeで数字をタイプしてリンクにフォーカスを合わせ、リンクをクリックするのは Enter(新しいタブで開くなら Ctrl+Enter。どちらも Windows版 Firefoxの標準割り当て)、でうまくいくように思えた。実際、悪くない動作をする。

唯一、気に入らないのはスクロール位置がガタガタ移動するのが避けられないこと。例えば 125番のリンクをクリックしようと [1][2][5][Enter]とタイプすると、Enterを押すまでの間に、1番のリンク、12番のリンク、125番のリンクの順にフォーカスが移動しスクロール位置も合わせて移動するので見てて疲れる。前にも書いたが、フォーカスの移動に伴ってスクロール位置が移動するのはストレス。目の見える自分にとってフォーカスをあてたい対象は今、見えている範囲にあるのだから。

原因は Find As You Typeがインクリメンタルな検索を行うことにあって、Mouseless Browsingならそういうことは起こらないのだが。

 共存案2

Mouseless Browsingは良くできたやつで、こいつの設定に「Use numpad exclusively for Mouseless Browsing」というのがある。これをチェックしておけば、テンキー以外のキーをタイプしたときは Find As You Type、テンキーを使ったときは Mouseless Browsing、とどちらも有効にしたまま棲み分けができる。テンキーを使う時にはスクロールの問題も起こらない。

ところがこれにも問題が。このチェックが有効だとフォームに数字を入力するときにテンキーが使えない。exclusiveだとはいってもフォーカスが文字入力可能な場所にあるときはキーボード入力を Firefoxの標準のハンドラに譲って欲しい。そんなわがままを可能にする修正が下の 4点。元がいいから変更も楽だった。

 Mouseless Browsing0.4.1に加えた変更点

<Fx profile>*\extensions\{c0bcf963-624b-47fe-aa78-8cc02434cf32}\defaults\preferences\mlb_prefs.js の 13行目に一行挿入。(初期設定を追加)

12 pref("mouselessbrowsing.exclusiveNumpad", false);
13 pref("mouselessbrowsing.exclusiveNumpadUnlessWritable", false);
14 pref("mouselessbrowsing.executeAutomatic", false);

<Fx profile>\extensions\{c0bcf963-624b-47fe-aa78-8cc02434cf32}\chrome\mouselessbrowsing.jar\content\mouselessbrowsing\prefs.xul に 70-72行目を挿入。(設定画面に項目を追加)

67 <row>
68    <checkbox id="exclusiveNumpad" label="Use numpad exclusively for Mouseless Browsing" prefid="mouselessbrowsing.exclusiveNumpad" defaultValue="0"/>
69 </row>
70 <row>
71     <checkbox id="exclusiveNumpadUnlessWritable" style="margin-left:30px" label="Unless a writable element has focus" prefid="mouselessbrowsing.exclusiveNumpadUnlessWritable" defaultValue="0"/>
72 </row>
73 <row>
74     <checkbox id="executeAutomatic" label="Execute automatically without pressing Enter" prefid="mouselessbrowsing.executeAutomatic" defaultValue="false"/>
75 </row>

<Fx profile>\extensions\{c0bcf963-624b-47fe-aa78-8cc02434cf32}\chrome\mouselessbrowsing.jar\content\mouselessbrowsing\mouselessbrowsingInit.js に 164行目を追加。(設定の読み込み)

163 MLB_exclusiveUseOfNumpad = prefs.getBoolPref("mouselessbrowsing.exclusiveNumpad");
164 MLB_exclusiveUseOfNumpadUnlessWritable = prefs.getBoolPref("mouselessbrowsing.exclusiveNumpadUnlessWritable");
165 MLB_executeAutomaticEnabled = prefs.getBoolPref("mouselessbrowsing.executeAutomatic");

<Fx profile>\extensions\{c0bcf963-624b-47fe-aa78-8cc02434cf32}\chrome\mouselessbrowsing.jar\content\mouselessbrowsing\mouselessbrowsingEvent.js の 361行目を変更。(条件判定ロジックの変更)

361 return MLB_exclusiveUseOfNumpad && isNumpad;

↓

361 return MLB_exclusiveUseOfNumpad && isNumpad &&
362     !(MLB_exclusiveUseOfNumpadUnlessWritable && Utils.isWritableElement(event.originalTarget));

う〜ん。満足。

♪ [Firefox] ブラウザ、フォーカス、Tabキー

 タブキーでフォーカスが移動する先は現在表示されてる(フレームに収まってる)部分だけで良い。

あるページを読んでいる。読み進んでいく。「次のページへ」というリンクがある。タブキーを押す。ページがギュンッと巻き戻って一番最初のリンク*にフォーカスが移動する。さらにタブを押す、押し続ける。サイドバーのリンクを順にたどってフォーカスがページ下方へ移動していく。やがてまたもページが巻き戻る。今度は本文中のリンクを順に下方にたどっていく。やっと「次のページへ」にたどり着く。

今見ているリンクにフォーカスを合わそうとしているのに、フォーカスはとんでもないところに飛んでいく。タブキーを押すことによってスクロール位置が変わるのが非常にストレス。タブキーでフォーカスが移動する先は現在表示されてる(フレームに収まってる)部分だけで良い。

 tabindexを失念していた

HTML作成者が tabindexをリンクやフォームに割り振っていた場合 tabindexの小さい順にフォーカスが移動するのだった。tabindexが一つでも指定されていればそちらを優先すべきだな。(といっても、tabindexが指定されていて欲しいのは自分がよく使うページだけだけど。不特定の人に見せるのが目的のページで押し付けは良くない。)

• カスタムのHTMLウィジットのための強化tabindex (www.mozilla-japan.org)
• アクセシビリティのある DHTML (www.mozilla-japan.org)

tabindexはフォーカスの順番を決めるだけのものではないのだなぁ。

 これを機に Firefoxの拡張に手を出すか、ありもので間に合わすか。

ありものは↓。

• Mouseless Browsing
• CrossFire - OperaのShift+矢印をMozillaでも

Mouseless Browsingを使っているが Find As You Typeと競合するのでテンキーを Mouseless Browsing専用にしている。そうすると、テキストフィールドに数字を入力するのが不便(テンキーが使えないので)。

自前でやる場合、次にフォーカスを得るエレメントがどれなのかを自前で探すのは避けたいところ。それをするんだったら greasemonkeyで onblurを捕まえて、次にフォーカスを得るエレメントを順に辿っていって、最初に見つかったブラウザのフレーム内に収まってる(=見えている)エレメントを focus()すればいいはず。

♪ [Firefox]タスクバーからの起動が遅い <> FirefoxやThunderbirdのメモリ消費量を劇的に減らす方法

2004年6月18日の投稿

タスクバーからの起動が遅い

2006年4月15日の記事

FirefoxやThunderbirdのメモリ消費量を劇的に減らす方法

あちらを立てればこちらが立たず。Firefoxは about:configや user.jsで簡単に設定が変更できるので、メモリ容量と相談してお好みでってことですな。

♪ [Firefox] Amazonからコピーした ISBNの末尾にスペースがくっついて邪魔なら

layout.word_select.eat_space_to_next_word = false

Windows版ではデフォルトで trueらしい。でも今回 探してた設定はコレ↑じゃなくて、画像を読み込めなかった時に表示される altテキストを(画像と同じ)置換要素として表示する方法。

画像を表示できなくて altを表示する場合でも IEのように widthと height属性*を尊重して欲しいわけ。widthが無効でその上 改行(&#x0D;&#x0A;)も有効でないと来たら、どうやって折り返したらいいの？

HTMLはいじらない。CSSで解決するなら

img { display: inline-block }

となりそうだが inline-blockは CSS2.1で追加された値なので Firefox1.5は未対応。どうしたらいいの？