Geckoの中のアニメインターネットを知らず

Gecko 内部のアニメーション処理を理解するために必要になる小技を紹介します。 Gecko Inside 史上最も簡単な内容です。※個人の感想です。このスライドに書かれていることを使えば、あなたも明日から Gecko のアニメーション開発者になれます！※個人の願望です。

概要: Gecko 内部のアニメーション処理は DOM、Layout、Graphics と３つの大きなコンポーネントにまたがっています。これらにまたがっている処理の全てを理解するのは大変困難です。そして私もそのほとんどの処理を理解していません。また、コードというものは日々の開発の中で変化していくので、『この前見た時と何か違うなあ…』などと思っていると、以前とはすっかり処理が変わっていたということもままあります。そのようなことがありますので、この発表ではアニメーションの処理については発表しません。この発表では、そのような処理の全体像が分からない中でも、バグの修正や新しい機能の実装を進めていくためには何が必要になるのか、そしてその必要になる小技を紹介します。

Geckoの中のアニメ
インターネットを知らず

池添浩之, Gecko inside #5, 2016年吉日

Gecko内でのアニメーション処理の流れ

Script by @craigbuckler sitepoint.com/css3-starwars-scrolling-text/

?

Image by Toni Pecoraro

Photo by Major Clanger

documentの特定

        // nsIDocument* document;
nsAutoCString spec;
document->GetDocumentURI()->GetSpec(spec);
printf("document: %s\n", spec.get());

1. animationの特定 (DOM要素から)

HTML

C++

      // Element* element;
nsAutoString id;
element->GetId(id);
printf("element: %s\n",
       NS_ConvertUTF16toUTF8(id).get());

2. animationの特定 (nsIFrameから)

      // nsIFrame* frame;
if (frame->GetContent()->IsElement()) {
  // elementから特定できるようになる
  Element* element =
    frame->GetContent()->AsElement();

3. animationの特定 (id属性から)

Javascript

      var animation = div.getAnimations()[0];
animation.id = 'オレオレ';

C++

      // Animation& animation;
nsAutoString id;
animation.GetId(id);
printf("animation id: %s\n",
       NS_ConvertUTF16toUTF8(id).get());

4. animationの特定 (compositorスレッド)

TBD

デバッガを使う

      // Animation& animation;
nsAutoString id;
animation.GetId(id);
if (id.EqualsLiteral("target")) {
  ... // ここにbreak point
}

Timestampの表示

      // TimeStamp time;
bool unused;
TimeDuration duration =
  time - TimeStamp::ProcessCreation(unused);
printf("%f\n", duration.ToMilliSeconds());

nsCSSPropertyの表示

      // nsCSSProperty property;
printf("%s\n",
       nsCSSProps::PropertyIDLName(property));

AnimValuesStyleRuleの表示

      // AnimValusStyleRule* styleRule;
styleRule->List();