webkit Dump Render Tree 工作流程

1.下载一个webkit的版本，目前我使用的版本是webkit-r54749,这个版本正好是android2.2版本对应webkit版本
2.进行编译，这个过程根据自己机器环境qt，gtk，win之类都是可以编译，在这里简单说一下怎么进行编译
切换到WebKit-r54749目录下
./WebKitTools/Scripts/build-webkit --help
下面罗列出很多的细节：
 --help                            Show this help message
  --clean                           Cleanup the build directory
  --debug                           Compile in debug mode
  --cairo-win32                     Build using Cairo (rather than CoreGraphics) on Windows
  --chromium                        Build the Chromium port on Mac/Win/Linux
  --gtk                             Build the GTK+ port
  --qt                              Build the Qt port
  --inspector-frontend              Copy changes to the inspector front-end files to the build directory

  --makeargs=<arguments>            Optional Makefile flags

  --minimal                         No optional features, unless explicitly enabled.

  --[no-]3d-canvas                  Toggle 3D canvas support (default: 0)
  --[no-]3d-rendering               Toggle 3D rendering support (default: 0)
  --[no-]channel-messaging          Toggle MessageChannel and MessagePort support (default: 1)
  --[no-]client-based-geolocation   Toggle client-based Geolocation support (default: 1)
  --[no-]coverage                   Toggle code coverage support (default: 0)
  --[no-]database                   Toggle Database Support (default: 1)
  --[no-]datagrid                   Toggle Datagrid Support (default: 0)
  --[no-]datalist                   Toggle HTML5 datalist support (default: 1)
  --[no-]dom-storage                Toggle DOM Storage Support (default: 1)
  --[no-]eventsource                Toggle server-sent events support (default: 1)
  --[no-]filters                    Toggle Filters support (default: 1)
  --[no-]geolocation                Toggle Geolocation support (default: 1)
  --[no-]icon-database              Toggle Icon database support (default: 1)
  --[no-]indexed-database           Toggle Indexed Database API support (default: 0)
  --[no-]javascript-debugger        Toggle JavaScript Debugger/Profiler support (default: 1)
  --[no-]mathml                     Toggle MathML support (default: 0)
  --[no-]notifications              Toggle Desktop Notifications Support (default: 0)
  --[no-]offline-web-applications   Toggle Offline Web Application Support (default: 1)
  --[no-]ruby                       Toggle HTML5 Ruby support (default: 1)
  --[no-]shared-workers             Toggle SharedWorkers support (default: 1)
  --[no-]svg                        Toggle SVG support (default: 1)
  --[no-]svg-animation              Toggle SVG animation support (implies SVG support) (default: 1)
  --[no-]svg-as-image               Toggle SVG as Image support (implies SVG support) (default: 1)
  --[no-]svg-dom-objc-bindings      Toggle SVG DOM Objective-C bindings support (implies SVG support) (default: 0)
  --[no-]svg-fonts                  Toggle SVG fonts support (imples SVG support) (default: 1)
  --[no-]svg-foreign-object         Toggle SVG foreign object support (implies SVG support) (default: 1)
  --[no-]svg-use                    Toggle SVG use element support (implies SVG support) (default: 1)
  --[no-]video                      Toggle Video support (default: 1)
  --[no-]web-sockets                Toggle Web Sockets support (default: 1)
  --[no-]wml                        Toggle WML support (default: 0)
  --[no-]xhtmlmp                    Toggle XHTML-MP support (default: 0)
  --[no-]wcss                       Toggle WCSS support (default: 0)
  --[no-]workers                    Toggle Web Workers support (default: 1)
  --[no-]xpath                      Toggle XPath support (default: 1)
  --[no-]xslt                       Toggle XSLT support (default: 1)
这个时候就可以根据自己环境选择

./WebKitTools/Scripts/build-webkit --gtk --debug
这样就可以编译一个基于gtk的debug版本
我们发现在WebKit-r54749目录下会生成一个WebKitBuild目录
有个Debug目录存在
当然在编译的过程中会有很多的错误，比如缺少某个库，之类的错误，这个时候要根据缺失的进行安装，在这里就不进行详细介绍了
当然最新的webkit版本较之这个版本已经有太多的变化了，但是核心部门的大致逻辑不会有太大的变化，只不过分工更加明细了，结构更加合理了
闲话少说接着来
在Debug目录下有个Programs，然后我们看下里面存在一个
DumpRenderTree  GtkLauncher  jsc  minidom  unittests
这么几个文件，GtkLauncher就是webkit的入口程序
DumpRenderTree这就是我们这节说的重点所在，这个可执行程序对应的源文件就是DumpRenderTree.cpp文件中
我们直接执行
./DumpRenderTree  http://192.168.1.68/index.html
就可以看到下面的打印
layer at (0,0) size 76x92
  RenderView at (0,0) size 76x92
layer at (0,0) size 76x92
  RenderBlock {HTML} at (0,0) size 76x92
    RenderBody {BODY} at (0,0) size 76x92
      RenderTable {TABLE} at (0,0) size 1x1
        RenderTableSection {TBODY} at (0,0) size 1x1
          RenderTableRow {TR} at (0,0) size 1x1
            RenderTableCell {TD} at (0,0) size 1x1 [r=0 c=0 rs=1 cs=1]
              RenderImage {IMG} at (0,0) size 1x1
如果是第一次运行有可能会出现这样的错误
** ERROR **: WEBKIT_TESTFONTS environment variable is not set, but it should point to the directory containing the fonts you can clone from git://gitorious.org/qtwebkit/testfonts.git
这个是需要设置一个fonts的路径
我们只需要这样做下：export WEBKIT_TESTFONTS=/opt/raul/sources/browser/WebKit-r54749/WebKitTools/DumpRenderTree/fonts
就可以了
我们接着看忙活半天的成果
有个这个好工具就非常有助于我们学习webkit的render过程
我们简单的分析一下是如何打印出这个罗列顺序的，熟悉浏览器用法的人都知道浏览器有个最基本的功能，右键查看页面源代码。
这个功能和DumpRenderTree功能很相近，就是把内部Dom tree中的结构给提炼出来
现在简单分析下提炼的过程

int main(int argc, char* argv[])
{
    g_thread_init(NULL);
    gtk_init(&argc, &argv);

#if PLATFORM(X11)
    FcInit();
    initializeFonts();
#endif

    struct option options[] = {
        {"notree", no_argument, &dumpTree, false},
        {"pixel-tests", no_argument, &dumpPixels, true},
        {"tree", no_argument, &dumpTree, true},
        {NULL, 0, NULL, 0}
    };

    int option;
    while ((option = getopt_long(argc, (char* const*)argv, "", options, NULL)) != -1)
        switch (option) {
            case '?':   // unknown or ambiguous option
            case ':':   // missing argument
                exit(1);
                break;
        }

    window = gtk_window_new(GTK_WINDOW_POPUP);
    container = GTK_WIDGET(gtk_scrolled_window_new(NULL, NULL));
    gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(container), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);
    gtk_container_add(GTK_CONTAINER(window), container);
    gtk_widget_show_all(window);

     webView = createWebView() ;
    gtk_container_add(GTK_CONTAINER(container), GTK_WIDGET(webView));
    gtk_widget_realize(GTK_WIDGET(webView));
    gtk_widget_show_all(container);
    gtk_widget_grab_focus(GTK_WIDGET(webView));
    mainFrame = webkit_web_view_get_main_frame(webView);

    setDefaultsToConsistentStateValuesForTesting();

    gcController = new GCController();
    axController = new AccessibilityController();

    if (argc == optind+1 && strcmp(argv[optind], "-") == 0) {
        char filenameBuffer[2048];
        printSeparators = true;
        while (fgets(filenameBuffer, sizeof(filenameBuffer), stdin)) {
            char* newLineCharacter = strchr(filenameBuffer, '\n');
            if (newLineCharacter)
                *newLineCharacter = '\0';

            if (strlen(filenameBuffer) == 0)
                continue;

            runTest(filenameBuffer);
        }
    } else {
        printSeparators = (optind < argc-1 || (dumpPixels && dumpTree));
        for (int i = optind; i != argc; ++i)
            runTest(argv[i]);
    }

    delete gcController;
    gcController = 0;

    delete axController;
    axController = 0;

    gtk_widget_destroy(window);

    return 0;
}
下面是基本的main函数，initializeFonts();这个函数的实现包含的就是上面提高的找不到WEBKIT_TESTFONTS环境变量的问题
在这个过程中做的基本的事件就是加载一个页面，然后把这个页面的基本的render tree的结构打印出来，顺便运行一下几个单元测试
我们只是研究下关键代码
 webView = createWebView();
这个函数的实现如下：

static WebKitWebView* createWebView()
{
    WebKitWebView* view = WEBKIT_WEB_VIEW(webkit_web_view_new());

    // From bug 11756: Use a frame group name for all WebViews created by
    // DumpRenderTree to allow testing of cross-page frame lookup.
    webkit_web_view_set_group_name(view, "org.webkit.gtk.DumpRenderTree");

    g_object_connect(G_OBJECT(view),
                     "signal::load-started", webViewLoadStarted, 0,
                     "signal::load-finished",  webViewLoadFinished,  0,
                     "signal::window-object-cleared", webViewWindowObjectCleared, 0,
                     "signal::console-message", webViewConsoleMessage, 0,
                     "signal::script-alert", webViewScriptAlert, 0,
                     "signal::script-prompt", webViewScriptPrompt, 0,
                     "signal::script-confirm", webViewScriptConfirm, 0,
                     "signal::title-changed", webViewTitleChanged, 0,
                     "signal::navigation-policy-decision-requested", webViewNavigationPolicyDecisionRequested, 0,
                     "signal::status-bar-text-changed", webViewStatusBarTextChanged, 0,
                     "signal::create-web-view", webViewCreate, 0,
                     "signal::close-web-view", webViewClose, 0,
                     "signal::database-quota-exceeded", databaseQuotaExceeded, 0,
                     NULL);

    WebKitWebInspector* inspector = webkit_web_view_get_inspector(view);
    g_object_connect(G_OBJECT(inspector),
                     "signal::inspect-web-view", webInspectorInspectWebView, 0,
                     "signal::show-window", webInspectorShowWindow, 0,
                     "signal::close-window", webInspectorCloseWindow, 0,
                     NULL);

    if (webView) {
        WebKitWebSettings* settings = webkit_web_view_get_settings(webView);
        webkit_web_view_set_settings(view, settings);
    }

    return view;
}
最关键的部位是在
"signal::load-finished", webViewLoadFinished, 0,
我们看webViewLoadFinished函数的实现
static void webViewLoadFinished(WebKitWebView* view, WebKitWebFrame* frame, void*)
{
    if (!done && !gLayoutTestController->dumpFrameLoadCallbacks()) {
        guint pendingFrameUnloadEvents = webkit_web_frame_get_pending_unload_event_count(frame);
        if (pendingFrameUnloadEvents) {
            char* frameName = getFrameNameSuitableForTestResult(view, frame);
            printf("%s - has %u onunload handler(s)\n", frameName, pendingFrameUnloadEvents);
            g_free(frameName);
        }
    }

    if (frame != topLoadingFrame)
        return;

    topLoadingFrame = 0;
    WorkQueue::shared()->setFrozen(true); // first complete load freezes the queue for the rest of this test
    if (gLayoutTestController->waitToDump())
        return;

    if (WorkQueue::shared()->count())
        g_timeout_add(0, processWork, 0);
    else
         dump() ;
}
在最后一行找到他的小尾巴了，那么看看到底如何提取出来的那？
void dump()
{
    invalidateAnyPreviousWaitToDumpWatchdog();

    bool dumpAsText = gLayoutTestController->dumpAsText();
    if (dumpTree) {
        char* result = 0;
        gchar* responseMimeType = webkit_web_frame_get_response_mime_type(mainFrame);

        dumpAsText = g_str_equal(responseMimeType, "text/plain");
        g_free(responseMimeType);

        // Test can request controller to be dumped as text even
        // while test's response mime type is not text/plain.
        // Overriding this behavior with dumpAsText being false is a bad idea.
        if (dumpAsText)
            gLayoutTestController->setDumpAsText(dumpAsText);

        if (gLayoutTestController->dumpAsText())
            result = dumpFramesAsText(mainFrame);
        else
             result = webkit_web_frame_dump_render_tree(mainFrame) ;

        if (!result) {
            const char* errorMessage;
            if (gLayoutTestController->dumpAsText())
                errorMessage = "[documentElement innerText]";
            else if (gLayoutTestController->dumpDOMAsWebArchive())
                errorMessage = "[[mainFrame DOMDocument] webArchive]";
            else if (gLayoutTestController->dumpSourceAsWebArchive())
                errorMessage = "[[mainFrame dataSource] webArchive]";
            else
                errorMessage = "[mainFrame renderTreeAsExternalRepresentation]";
            printf("ERROR: nil result from %s", errorMessage);
        } else {
            printf("%s", result);
            g_free(result);
            if (!gLayoutTestController->dumpAsText() && !gLayoutTestController->dumpDOMAsWebArchive() && !gLayoutTestController->dumpSourceAsWebArchive())
                dumpFrameScrollPosition(mainFrame);

            if (gLayoutTestController->dumpBackForwardList())
                dumpBackForwardListForAllWebViews();
        }

        if (printSeparators) {
            puts("#EOF"); // terminate the content block
            fputs("#EOF\n", stderr);
            fflush(stdout);
            fflush(stderr);
        }
    }

    if (dumpPixels) {
        if (!gLayoutTestController->dumpAsText() && !gLayoutTestController->dumpDOMAsWebArchive() && !gLayoutTestController->dumpSourceAsWebArchive()) {
            // FIXME: Add support for dumping pixels
        }
    }

    // FIXME: call displayWebView here when we support --paint

    done = true;
    gtk_main_quit();
}
这个函数太长，我们还是截取最关键的代码
result = webkit_web_frame_dump_render_tree(mainFrame);
这个函数执行返回的结果就是我们上面执行打印的结果

看来还需要继续追踪
gchar* webkit_web_frame_dump_render_tree(WebKitWebFrame* frame)
{
    g_return_val_if_fail(WEBKIT_IS_WEB_FRAME(frame), NULL);

    Frame* coreFrame = core(frame);
    if (!coreFrame)
        return g_strdup("");

    FrameView* view = coreFrame->view();

    if (view && view->layoutPending())
        view->layout();

     String string = externalRepresentation(coreFrame) ;
    return g_strdup(string.utf8().data());
}
String string = externalRepresentation(coreFrame);这个函数返回的，这位大仙何许人阿，追踪了下，发现是在
RenderTreeAsText.cpp中进行定义的
这个类是render模块专门拿出来处理收集信息
String externalRepresentation(Frame* frame, RenderAsTextBehavior behavior)
{
    frame->document()->updateLayout();

    RenderObject* o = frame->contentRenderer();
    if (!o)
        return String();

    TextStream ts;
#if ENABLE(SVG)
    writeRenderResources(ts, o->document());
#endif
    if (o->hasLayer()) {
         RenderLayer* l = toRenderBox(o)->layer();
        writeLayers(ts, l, l, IntRect(l->x(), l->y(), l->width(), l->height()), 0, behavior);
        writeSelection(ts, o) ;
    }
    return ts.release();
}

好了从逻辑上来说，就弄到这边吧，留点自己思考的时间

在android平台上如果要打印render tree 直接通过webview.dumpDomTree(false)

很是方便，前提需要把NDEBUG定义注释掉，留点引子下次继续介绍。