2011年8月31日水曜日

ESウェブブラウザ通信(8/30)

前回のESウェブブラウザ通信では、www.google.co.jpの表示でCSSの'z-index'が働くようになるところまで進めました。

r1893

今回は、ページの下から2行目のAdvertising Programsからはじまるリンクの部分のマージンがなくなっている問題の対応から作業を続けました。

r1894
r1894では、HTMLのcenterタグを使っていると、CSSのmarginの設定まで強制的に上書きしてしまう問題を修正しています。ただ今度はマージンが広すぎるように見えます。
r1895では、ブロック要素に指定したマージンの設定をインライン要素にまで適用してしまっていたバグを修正しました。r1896では、さらにインラインレベルボックスのベースラインの計算を修正して以下のようになりました。


r1896

下から2行目のテキストのリンクの間隔が揃った他に、トップの黒いバーの"more"の横に表示されている▼マークの縦方向の位置も揃うようになりました。ちなみに、この▼マーク、ビットマップではなくて、CSSのボーダートップで作られているんですね。

続いて、フォームコントロールの表示機能の実装を進めました。(それまでは強制的にテキストボックスのように表示しているだけでした。) r1897では、CSSの'binding'プロパティに簡易的に対応をはじめて、テキストボックスとかボタンとかをそれぞれ個別のスタイルで描画するための枠組みを導入しました。

r1897
まだレイアウトは変ですが、buttonとかinput-textfieldといったコントロールの種類をCSSから指定できるようになりました。現状では、ブラウザのプログラム本体がスタイルにbindingが指定されている要素に出会ったら、それを別のDOM要素に展開して表示するということをしています。このあたり、全体像としては今後XBL2とかがどうなっていくのか、とかまだ不透明なところもある感じですが、ひとまずこんな感じで進めていきます。

r1898ではshrink-to-fitのバグをさらにひとつ直して、r1899ではボタンのデフォルトのスタイルをすこし手直しして以下のようになりました。

r1899

まだHTMLのテーブルに対応していないので、Advanced searchとかのリンクが本来とは違ってしまっていますが、わりとそれらしくなってきました。

しばらくCSS寄りの実装ばかりを進めて来たので、ここでDOM/HTMLのAPIの実装を少しだけ進めて、黒いバーの"more"をクリックしたときにプルダウンメニューが表示されるようにする作業をはじめてみました。r1902までで最低限のAPIを実装して、"more"をクリックしてみたときは次のようになりました。

r1902

"more"の部分が白くハイライト表示されましたが、肝心のプルダウンメニューがまだ表示されません。CSSのposition:absoluteで絶対配置されている要素の子孫の中にさらに絶対配置されている要素があるということを想定できていなかったのでした。r1903でこのバグを修正したのが次のスクリーンショットです。

r1903
何か直すと他のバグが表面化するというお約束のような画面になってますが、プルダウンメニューの幅が足りていません。この時点ではCSSのオーバーフローにまったく対応していなかったので、プルダウンメニューの初期包含ブロックが"more"を含んだボックスで、その幅に制約されてこんな感じになっていました。r1905では'overflow'プロパティに対応するために必要な箇所にTODOを入れて、デフォルトのvisible指定の時の動作を行うように修正しました。

r1905
一応それらしい感じでプルダウンメニューが出てくるようになりました。ただこの段階では、"more"をクリックすると黒いバーが1ピクセル下に下がるという変な状態になっていました。moreの部分はクリックすると高さが1px増えてベースラインを動かすので、Web, Images, ... という部分にはvertical-align: topが指定されているのですが、ESブラウザがまだ'vertical-align'に対応していなかったのでした。r1907では'vertical-align'の一部に対応して、この問題を修正しています(拡大してよく見てみると、r1905では"Web"の部分の赤いバーの上にさらに黒い線が1本入ってしまっていたのがわかると思います)。

r1907
ここまでできると、そろそろ検索もできるようにしたいところなのですが、この段階ではまだできませんでした。このページではWindowのloadイベントで、
onload="document.f&&document.f.q.focus();
のようにフォーカスをメインのテキストフィールドに指定しようとしているのですが、この辺のAPIが未実装だったのです。r1909では、HTMLDocumentのオペレーション、
getter object (DOMString name);
に対応して、'document.f'の部分が動くようにしています。さらに、r1912では、HTMLFormElementのオペレーション、
caller getter object (DOMString name);
に対応して、'f.q'の部分が動くようにしました。focus()はオープンソース時から実装が入っていたので、これでようやく検索したい文字を入力できるようになりました。(この辺のunnamed operationは一度止めようという話にW3Cでなったはずですが、結論を待っていても仕方ないのでesidlのC++バインディングではgetElementというメソッド名に変換しています。JSAPI経由だと、JSClassのgetPropertyからSPECIAL_GETTER_メッセージに変換してC++バインディングでgetElementの呼び出しというパスになっているので、JavaScriptにはgetElementという名前は見えません。)

r1912
CSSのbindingプロパティで置き換えて表示しているフォームコントロールもブラウザ内部では通常のDOM要素なので、CSSのスタイル設定も有効です。で、上記の例だとcenterタグの設定がテキストフィールドの中まで有効になってしまっていて、入力した"Hello"というテキストまでセンタリングされてしまっていました。これは想定外なので、r1914では、デフォルトのtext-alignをフォームコントロールに設定するようにして、この問題を直しました。

r1914
今日のところはここまでです。次回はボタンを押したときの動作とかそういったあたりからの予定です。

2011年8月23日火曜日

ESウェブブラウザ通信(8/22)

先週はちょっと御所まで行って送り火を見てきました。去年見たときにはエスリルはまだ工事中だったと思うと1年経つのもあっという間です。


ESプロジェクトの方は、ESオペレーティングシステムのクロスビルドにgcc 4.6.1を使えるようになりました。ESウェブブラウザの作業がもう少し進んだら、ESカーネルもWeb IDLのC++0x改めC++11バインディングに対応していく予定です。ESウェブブラウザのビルドにC++11が必須になっているので、どちらにしても新しめのgccが必要になってきたのでした。この辺の話はまた適当な機会に書けたらいいなと思います。

ESブラウザの方は、www.esrille.comに続いて今度はwww.google.co.jpを表示できるように開発を進めています。以下、これまで通りスクリーンショットと合わせて進捗報告です。

お盆前頃の状態は以下のような感じでした。スタイルシートのパーサーにシンタックスエラーから回復する機能がなかったのと、CSSのインラインブロックに対応していなかったのとで、大分おかしな表示になっていました。


ESブラウザでは対応することがない、filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
のようなようなスタイルが使われていても、ブラウザはそれを無視して処理を継続していかないといけないのですが、そういう機能がなかったわけです。

r1879でインラインブロックに対応させて、r1881でとりあえずCSSのシンタックスエラーから回復できるようにさせると次のようになりました。


まだかなり期待と違います。この時点のバグリストはこんな感じでした。
  • centerタグに対応する。Googleのロゴが左によってるのはこの所為。
  • z-indexに対応する。上部の黒色のバーに一切文字が書かれていないのはこれの所為。
  • ロゴのまわりの黒い部分を白くする。
  • etc.
r1883でcenterタグやdivタグのalign属性に対応するようにさせた段階では次のようになりました。


これでロゴはセンターに来たのですが、ボタンや下部のリンクが変な位置のままです。これはshrink-to-fitしたあとにラインボックスのセンタリングとかを調整しなおしてなかったのが原因だったのでr1884で修正しました。


まだまだ色々とおかしいのですが、センタリングに関しては意図通りになってきました。r1885からはz-indexに対応する処理の実装を始めました。


黒いバーの部分に文字は出てきたのですが、文字の背後に白い矩形が表示されてしまっています。 ESブラウザで表示しているフォントにはアンチエイリアスがかかっているのですが、これはOpenGLの処理としては半透明のテクスチャを貼っているわけで、単純にz-indexに対応したz値をポリゴンにアサインして描画すればよいというわけではないのですね。上の例だと、描画順は、bodyの白色、黒いバーの部分の灰色のテキスト、最後に黒いバー、なので、テキストはbodyの白色にアルファブレンドされて表示されてしまったわけです。

このあと少し実験を続けたのですが、古典的な不透明ポリゴンを先に描画して、半透明を後にz順で描画みたいな実装をするぐらいなら、素直にCSSのスタッキングコンテキスト順に何パスかして描画するのと大差ない気がしてきたので少し保留にしました。

r1889では、shrink-to-fitのアルゴリズムを再び手直ししました。バーの中のテキストの間隔が広がったのと、アクティブな項目の上の赤いバーが表示されるようになっています。(shrink-to-fitは本格的に実装するとそれほど軽い処理だとも思えないので、他の手段があればあればそちらを使った方がいい気もするのだけれど。)


r1891では、Googleのロゴの背後が黒くなっていたのを直しました。


'background-color'の初期値は透明じゃないといけないところが、ESブラウザの'color'の初期値の黒色になっていたというバグでした。これでGoogleロゴのまわりは白くなったのですが、この段階ではまだz-indexの処理が不完全だったので、右上のオプションボタンのまわりは逆に白くなってしまいました。原因はr1885のときのテキストの背後に白い矩形が見えたのと同じです。

そこで、せっかくのバックエンドにOpenGLを使っているので、r1893ではMultisample Transparencyを使ってz-indexに対応してみました。


フォントがより正確に表示されている関係で色合いが薄くなった分、むしろ汚く見えてしまうような感じがなきにしもあらずですが、z-indexの処理としては期待通りになりました。

今日のところはだいたいこんな感じです。まだマージンの処理とか細かいバグもありますが、今後HTMLのテーブルとフォームのサポートを進めていけば表示に関しては落ち着きそうです。このまま実際に検索して結果を見られるようになるまで進めていきます。