2009-06-29

HTML 5 Parser

ポスト @ 13:32:58 | mozilla

mozilla-central に HTML5 Parser が入った。このパーサは Validator.nu で使われており、HTML 5 のパーシングアルゴリズムを実装している。もともと Java で書かれているが、機械的に C++ のコードに変換することができ、Gecko では C++ のコードを利用している。

今のところ、このパーサはデフォルトでは無効で、これまでのパーサが利用されている。新しいパーサを利用するには about:config で html5.enabletrue にする。

新しいパーサでは、XHTML 構文で書かれた文書だけではなく、HTML 構文で書かれた文書に埋め込まれた SVG や MathML も処理できる (Smile)

関連

mozilla-central でのソースコード

2009-06-24

Gecko で JavaScript が無効なときに <canvas> の代替コンテントを表示するためのプチハック

ポスト @ 16:44:22 | mozilla

<canvas> 要素はスクリプトによってグラフィックスを描くための要素ですが、それゆえに、スクリプトと視覚メディアが利用できなければ、直接情報を提供することができません。そのため HTML 5 仕様では <canvas> はその要素のコンテンツとして代替コンテントを持てるとしています。この代替コンテントは (インタラクティヴな視覚的メディアで) スクリプトが無効な場合や視覚的でないメディアに対して提供されることになっています。

とはいえ、今のところ Gecko はそのどちらの場合にも代替コンテントを提供していません。この記事では JavaScript が無効なときに <canvas> の代替コンテントを表示するハックを紹介します。

手順

  1. mozilla-central レポジトリからソースコードをとってくる
  2. 以下のパッチをあてる
  3. ビルドする

スクリーンショット

スクリーンショット

パッチ

diff -r 1aa35fa65790 layout/base/nsCSSFrameConstructor.cpp
--- a/layout/base/nsCSSFrameConstructor.cpp Tue Jun 23 22:11:43 2009 -0400
+++ b/layout/base/nsCSSFrameConstructor.cpp Wed Jun 24 16:50:56 2009 +0900
@@ -3739,7 +3739,7 @@ nsCSSFrameConstructor::FindHTMLData(nsIC
     SIMPLE_TAG_CREATE(iframe, NS_NewSubDocumentFrame),
     SIMPLE_TAG_CREATE(spacer, NS_NewSpacerFrame),
     COMPLEX_TAG_CREATE(button, &nsCSSFrameConstructor::ConstructButtonFrame),
-    SIMPLE_TAG_CREATE(canvas, NS_NewHTMLCanvasFrame),
+    SIMPLE_TAG_CHAIN(canvas, nsCSSFrameConstructor::FindCanvasData),
 #if defined(MOZ_MEDIA)
     SIMPLE_TAG_CREATE(video, NS_NewHTMLVideoFrame),
     SIMPLE_TAG_CREATE(audio, NS_NewHTMLVideoFrame),
@@ -3846,6 +3846,18 @@ nsCSSFrameConstructor::FindObjectData(ns
                        sObjectData, NS_ARRAY_LENGTH(sObjectData));
 }
 
+/* static */
+const nsCSSFrameConstructor::FrameConstructionData*
+nsCSSFrameConstructor::FindCanvasData(nsIContent *aContent,
+                                      nsStyleContext *aStyleContext) {
+  if (!aContent->GetOwnerDoc()->IsScriptEnabled())
+    return nsnull;
+
+  static const FrameConstructionData sCanvasData =
+    SIMPLE_FCDATA(NS_NewHTMLCanvasFrame);
+  return &sCanvasData;
+}
+
 nsresult
 nsCSSFrameConstructor::ConstructFrameFromItemInternal(FrameConstructionItem& aItem,
                                                       nsFrameConstructorState& aState,
diff -r 1aa35fa65790 layout/base/nsCSSFrameConstructor.h
--- a/layout/base/nsCSSFrameConstructor.h   Tue Jun 23 22:11:43 2009 -0400
+++ b/layout/base/nsCSSFrameConstructor.h   Wed Jun 24 16:50:56 2009 +0900
@@ -1057,6 +1057,8 @@ private:
     FindInputData(nsIContent* aContent, nsStyleContext* aStyleContext);
   static const FrameConstructionData*
     FindObjectData(nsIContent* aContent, nsStyleContext* aStyleContext);
+  static const FrameConstructionData*
+    FindCanvasData(nsIContent *aContent, nsStyleContext* aStyleContext);
 
   /* Construct a frame from the given FrameConstructionItem.  This function
      will handle adding the frame to frame lists, processing children, adding

参考

2009-03-06

Mozilla ソースツリーの IDL の位置が変更

ポスト @ 15:17:12 | mozilla

Mozilla では XPCOM のインタフェースを IDL を使って記述している。 もちろん DOM オブジェクトのインタフェースも IDL で記述されており、ビルド時に IDL から自動的に C++ 用ヘッダファイル (nsIFooBar.h のような) などが生成されていたりする。

さて mozilla-central では、先日これら IDL の位置が変更された。例えば、<canvas> 要素 の 2d コンテクスト (CanvasRenderingContext2D) の IDL は以下のように動かされた。

変更前 mozilla/dom/public/idl/canvas/nsIDOMCanvasRenderingContext2D.idl
変更後 (現在) mozilla/dom/interfaces/canvas/nsIDOMCanvasRenderingContext2D.idl

dom/public/idl/ が dom/interfaces/ に変っただけである。

しかし話はこれで終りではなく、今後もソースツリーの構成は変るようだ。

DOM について言えば、実装 (nsFooBar.(h|cpp) など) も現在の位置から動かされるようだ。現在は content/ と dom/src/ に別れているファルを dom/ 以下にまとめられる。 一貫性が増してわかりやすくなる反面、リンク切れが頻発すると思われるので、これらのファイルを参照するときは注意が必要だろう。

もっとも mxr では、あるファイルが違うディレクトリに移動していても簡単に見つけることができる。

2008-08-30

もじら組Wiki 向けユーザスタイルシート

ポスト @ 21:34:33 | firefox

もじら組Wiki が少し見づらいなと思ったので、とりあえず、見出しに応じて内容をインデントさせてみることに。以下はそのユーザスタイルシート。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(wiki.mozilla.gr.jp),
               domain(wiki2.mozilla.gr.jp) {
    div.wiki_body > h4 ~ *:not(h4):not(h3):not(h2):not(form) {
        margin-left : 1.5em !important;
    }

    div.wiki_body > h3 ~ *:not(h3):not(h2):not(form) {
        margin-left : 1em !important;
    }

    div.wiki_body > h2 ~ *:not(h2):not(form) {
        margin-left : 0.5em !important;
    }
}

2008-08-04

mozilla-qt

ポスト @ 22:36:21 | mozilla

現在 Firefox の Linux 版ではツールキットに GTK2 が使われていますが、しばらく前から Qt 版の開発も行われています。そして、今日 Qt 版に大量の変更がチェックインされたので、ビルドしてみることにしました。

これ以前にも Qt 版の開発はありましたが、現在メインのソースツリーには含まれていません。参考: 2004 年のスラッシュドットの記事

まずはソースコードをとってきます。

$ hg clone http://hg.mozilla.org/users/vladimir_mozilla.com/index.cgi/mozilla-qt/ mozilla-qt

Ubuntu 8.04 (Hardy) の Qt 4 パッケージのバージョン 4.3.4 ですが、Qt 4.4.0 を自分で入れていたのでそちらを使うことにします。

すでに Qt 4.4.1 がリリースされていますが…。

$ export LD_LIBRARY_PATH=/usr/local/Trolltech/Qt-4.4.0/lib:$LD_LIBRARY_PATH
$ export PKG_CONFIG_PATH=/usr/local/Trolltech/Qt-4.4.0/lib/pkgconfig:$PKG_CONFIG_PATH

/usr/local/Trolltech/Qt-4.4.0/ が Qt のインストール先ディレクトリです。

用意した .mozconfig は以下のとおりです。

mk_add_options MOZ_CO_PROJECT=browser
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/obj-@CONFIG_GUESS@
ac_add_options --enable-application=browser
ac_add_options --disable-debug
ac_add_options --disable-tests
ac_add_options --enable-libxul
ac_add_options --enable-default-toolkit=cairo-qt
ac_add_options --enable-canvas
ac_add_options --enable-svg
ac_add_options --disable-printing
ac_add_options --disable-crashreporter
mk_add_options --with-qtdir=/usr/local/Trolltech/Qt-4.4.0

--enable-default-toolkitcairo-qt を設定するのがミソです。で、あとは普通にビルドするだけです。

$ make -f client.mk build

するとあっさりビルドできました。動かしてみたスクリーンショットが以下。

スクリーンショット

ツールバーの描画がおかしかったり、「View」→「Character Encoding」を開こうとすると固まったりと、まだまだバギーでした。ページの描画は割とまともでしたが、テキストまわりの処理はまだまだのようで、手元の環境では日本語などをうまく表示できない場合もありました。

まだ常用できるような域には達してしませんが、ということは、これからが楽しみということでもあります。

参考

2008-06-16

SVG で波紋

ポスト @ 3:19:04 | opera, svg

SVG のフィルタとアニメーション (と JavaScript) で、波紋っぽい効果を出してみました。クリックした場所から波が伝わるような効果がでます (色々と手抜きですが)。

Opera 位でしか動きません (Opera 9.5 で動作確認)。あと、もの凄く重たいので注意。手元では時おり Opera がクラッシュしました。

2008-06-15

Re: canvas で文字を表示してみる

ポスト @ 11:38:21 | canvas, mozilla

Firefox 3 から canvas 要素で文字を描けるようになりました。で、その例を色々みてみると、描画内容を初期化するために canvas 要素の widthheight プロパティを弄っている例が多いです。しかし ctx.clearRect() で十分です。

ただし ctx.clearRect() ctx.translate() 等の変形の影響を受けるので、 ctx.save() ctx.restore() をお忘れなく (あるいは ctx.setTransform(1, 0, 0, 1, 0, 0))。

ということで、higeorange さんの例を勝手に弄ってみます。higeorange さんのコードを以下に示します。

var canvas = $('cnvs');
    canvas.width = 300;
    canvas.height = 100;
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);

ctx.clearRect() を使っておられるわけですが、たとえば以下のように書けます。

var canvas = $('cnvs');
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.save(); // コンテクストの状態を保存
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);
    ctx.restore(); // コンテクストの状態を save() した時の状態に復帰

あるいは以下のようにも書けます。

var canvas = $('cnvs');
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);
    ctx.setTransform(1, 0, 0, 1, 0, 0); // 変形行列を単位行列に

蛇足 1

Firefox 3 でのテキスト API は独自のものですが、mozilla-central では既に HTML 5 草案の API に対応しています。

蛇足 2

canvas 要素の widthheight を設定すると、Gecko は描画対象 (gfxASurface) と描画コンテクスト (gfxContext) を一度破棄してから再度作成・初期化します。

一方、 ctx.clearRect() は描かれている領域の一部をクリアするだけで、 surface を破棄したり再作成したりということはありません。

2008-04-29

まっすぐなバー

ポスト @ 11:59:53 | mozilla

未だにテーマの変更が Firefox trunk へチェックインされている今日この頃、皆様はいかがお過ごしでしょうか。Piro さんは 大変な目にあっているようですが。

さてそんな中、Windows のデフォルトテーマ以外ではロケーションバーの左端がカーブせず、真っ直ぐになるよう変更されました (Linux/GTK2 では以前から真っ直ぐ)。

スクリーンショット

CSS でどうやって判断しているのか見たところ、:-moz-system-metric(windows-default-theme) 疑似クラスを使っていました。

:-moz-system-metric(windows-default-theme) を使うと、Windows でデフォルトテーマ (Luna, Royale, Zune, Aero) を使っているか否かに基づいてスタイルを制御できます。例えば、Windows のテーマによって文字の色を変更するには以下のように書くことができます。

*:-moz-system-metric(windows-default-theme) {
  /* Windows のデフォルトテーマなら */
  color: red;
}
*:not(:-moz-system-metric(windows-default-theme)) {
  /* Windows のデフォルトテーマ以外、
     あるいは Windows 以外なら */
  color: blue;
}

既に Firefox 3 のテーマ (Windows 版) は Vista 向けとそれ以前向けに別れています。その上にさらにその中で OS のデフォルトテーマ云々というのは やり過ぎじゃないのかな、という気がします。

2008-03-27

「Acid3 は基本的に価値なし」

ポスト @ 11:51:03 , 修正 @ 2008-03-27 18:13:20 | mozilla

MoCo の Rob Sayre さんが Acid3 is basically worthless という記事を書いています。Acid3 テスト対応の一連の動きを受けての事だと思いますが、ちょっと穏やかではないですね。Firefox 3 は Acid3 をパスしないという事ですから他所の動きに気を取られ過ぎる事もないのではないかと思うのですが。

一応、以下に訳してみました (かなり意訳していますので悪しからず) 。追記: 原文が追記されていたので、訳文も更新。

Acid3 は基本的に価値なし

私は Mozilla の Acid3 で落っこちた箇所を対象としたスプレッドシートに目を通してみて、その修正の内ほんの一握りしか Web あるいはブラウザを実質的に改善しないだろうという印象を受けました。そいつらはバグで、修正されるでしょう (たぶん SMIL 以外は…一体なんで?) が、Web 製作者ないしユーザに少しの影響もないものです。ほとんど「標準への関与」 ("commitment to standards") に対してスタンドプレーする機会のようなものにしか見えません。テキストノードが相互運用性をもたないのに createNodeIterator をテストするのは心得違いでしかも偽善的だと私は思います。

加えて、標準への関与は Mozilla において強い力をもっており、そしてそこに我々は自分達の実装に機械的に合格印を押す人を絶えず探したりはしません。

追記 — 私は Opera が最初に 100/100 を叩き出したというのを知りませんでした。おめでとう、貧相な発想の標準とすべてに。 (Wink)

再追記 — 恥を知れ!

SUMO

ポスト @ 10:31:45 | mozilla

Firefox trunk ではヘルプが SUMO (support.mozilla.com) になったとのことなので、さっそく F1 を押してみたら www.mozilla.org/support/ につながってしまい、以下のようなメッセージが。

NOTE: Firefox Support Official Online Documentation and Frequently Asked Questions are currently down, due to server issues. For Firefox Help, try the other support resources linked on this page.

さっそく落ちてしまったようです。Firefox 3 がリリースした後は大丈夫でしょうか。