タグ

firefoxとvisualizeに関するnitoyonのブックマーク (2)

  • INSIDE Gecko handouts

    スライド スライドは、Microsoft PowerPoint 2007のpptx形式です。ビューアはMicrosoftのサイトからダウンロードできます。 insidegecko.pptx ※ビューアで見る方へ: PowerPoint Viewerには起動不良のバグがありますので、Microsoftのページの指示に従って修正してください。 Tango Desktop Projectの著作物(17, 18, 60ページ目のアイコン)を含んでいます。再利用の際は、著作者が指定したライセンスに従ってください。 サンプルHTML スライド中でレンダリングの過程の実例を示すために使用したHTMLドキュメントです。CSSにMozillaの独自拡張が含まれていますが、全体的なレイアウトはIEやOperaでも正しく再現されます。 sample.html ムービー プレゼンで使用したムービーです。wmv9で

    nitoyon
    nitoyon 2007/09/16
    Gecko エンジンの内部解説。アルゴリズムの図示が大変興味深い。PPT のアニメーションもうまい。
  • GeckoのReflowをアニメーションにする - 最速チュパカブラ研究会

    MDCの記事用にGeckoのReflow(レイアウトを組み立てる処理)の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。 まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。 作り方は大体以下のような感じです 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込む Rubyスクリプトでログを舐めて、frame treeを再構成する もう一度最初からログを舐めて、各

    nitoyon
    nitoyon 2007/03/28
    きれい! ブラウザが HTML 構造をどのように解釈していくかを図示。再描画したり、float したりがおもしろい。
  • 1