webkit SDL+Cairo port 移植分享

webkit SDL port 移植分享
        最近在研究WebKit如何在嵌入式上跑起来，以往的WebKit代码有很多版本，比如win、gtk、efl、Android、qt等。之前也在官网上下载过WebkitGTK版本的，感觉光是依赖GTK的东西就一大堆库，感觉这玩意儿有点庞大，所以没想弄，至于efl和qt我又不熟，最后看见网上有说可以基于SDL port进行移植，于是我就报着试一下的心态去搞一下。最先准备就在WebkitGTK版本上改动，但是搞了一个月，没搞出来，WebkitGTK代码里面只有GTK的Port，所有参考只有看GTK版本的，让我很是难熬。直到看了Android4.2源码里的Webkit代码，才发现里面有好多Port，想想先从这个搞起吧。
由于Android4.2的Webkit代码是2011年的代码，所以gcc和g++都要使用比较旧的版本（这里我使用的是4.4.x版本的）
首先，我们进入webkit/source目录下，这里有个CMakeLists.txt，这个Makefile文件就是首文件，它还包含了JavaScriptCore、WebCore、WebKit等Makefile，具体设置如下：

SET(JAVASCRIPTCORE_DIR "${CMAKE_SOURCE_DIR}/JavaScriptCore")
SET(WEBCORE_DIR "${CMAKE_SOURCE_DIR}/WebCore")
SET(WEBKIT_DIR "${CMAKE_SOURCE_DIR}/WebKit")
SET(TOOLS_DIR "${CMAKE_SOURCE_DIR}/../Tools")

这些都是后续会去编译的目录，每个目录下也会有一个CMakeLists.txt文件

既然我们要移植SDL Port，就要增加这个Port（注：以前是没有SDL这个字符串的，需要手动添加）：

SET(ALL_PORTS Efl WinCE <span style="color:#ff0000;">SDL</span>)
SET(<span style="color:#ff0000;">PORT </span>"NOPORT" CACHE STRING "choose which WebKit port to build (one of ${ALL_PORTS})")

设置好Port后，看下一行，这些都是编译依赖的工具包，在Ubuntu上只需apt-get就可以了（注：不是Webkit运行依赖库，只是编译依赖库）

FIND_PACKAGE(BISON REQUIRED)
FIND_PACKAGE(FLEX REQUIRED)
FIND_PACKAGE(Gperf REQUIRED)
FIND_PACKAGE(Perl REQUIRED)
FIND_PACKAGE(PythonInterp REQUIRED)

当你看到这一行的时候，你会发现这里有个${PORT}，这个就是上面红色标记的那个值得变量。

INCLUDE(OptionsCommon)
INCLUDE(Options${PORT})

这两个Options.cmake文件在webkit/Source/cmake文件夹下，你会看见这个文件夹下面有OptionsCommon.cmake，也有OptionsEfl.cmake、OptionsWinCE.cmake、OptionsWindows.cmake。这里我先创建了一个OptionsSDL.cmake，然后参考OptionsEfl.cmake，把efl改成sdl，然后下面这张图就是我们Webkit编译以及运行时所依赖的库了，首先我们不需要EFL，所以改成SDL，至于freetype，由于我使用的是Cairo来画图，而Cairo在linux平台使用的Font实现是基于freetype，所以需要这玩意儿。关于下载，webkit有两个port，一个soup，一个是curl，由于本人对curl比较熟，所以决定还是用curl比较好。具体设置大家如何研究一下这文件夹。

添加了SDL，就需要再添加一个FindSDL.cmake，如下：

# - Try to find SDL
# Once done, this will define
#
#  SDL_FOUND - system has SDL
#  SDL_INCLUDE_DIRS - the SDL include directories
#  SDL_LIBRARIES - link these to use SDL

include(LibFindMacros)

# Use pkg-config to get hints about paths
libfind_pkg_check_modules(SDL_PKGCONF sdl)

# Include dir
find_path(SDL_INCLUDE_DIR
NAMES SDL.h
PATHS ${SDL_PKGCONF_INCLUDE_DIRS}
)

# Finally the library itself
find_library(SDL_LIBRARY
NAMES SDL
PATHS ${SDL_PKGCONF_LIBRARY_DIRS}
)

# Set the include dir variables and the libraries and let libfind_process do the rest.
# NOTE: Singular variables for this library, plural for libraries this this lib depends on.
set(SDL_PROCESS_INCLUDES SDL_INCLUDE_DIR)
set(SDL_PROCESS_LIBS SDL_LIBRARY)
libfind_process(SDL)

上面包含的这些依赖库，你需要在网上去下载这些源代码，编译！这里我就不一一讲了。

配置大概结束了，下面就可以在webkit根目录下建立一个WebkitBuild，执行cmake -DPORT=SDL -DCMAKE_BUILD_TYPE=release ../Source
执行的时候你会看见很多类似这样的提示CMakelistsSDL.txt not found，然后会有具体目录，这些虽然不报错，但是非常关键，不可忽略（注：其他错误大家可以网上查阅，一般都有），这些都是javascriptCore、WebCore、WebKit、javascriptCore\wtf四个目录的port需要添加的东西的CMakeLists,txt了。

我们需要做的就是到上述目录中添加CMakelistsSDL.txt，所有都参考当下目录的CMakelistsEfl.txt，因为CMakelistsEfl.txt也是用的Cairo，所以关于这里的port可以不用考虑了，具体步骤就是复制过来，把elf相关的全部改成sdl就可以了，把elf目录复制一份成sdl目录，把文件名都改成sdl文件名，由于port里面的内容除了绘图相关的代码比较多，一般都是NotImplement，所以拷贝过来如果编译失败，找到这个函数，能改则改，不能改就先NotImplement就可以了。反正port的代码可以爽死你，哈哈，各种错误，各种修改，你懂的，大家可以尝试一下，反正我是搞了一个月才修修补补终于编译过了，不过幸运的是关于绘图改动很少，因为efl也是用的Cairo。上面的port实现相当复杂，除了参考efl，也可以参考Android的代码。关于WebKit目录可以参考wince，因为比较简单，哈哈。

等webkit编译好后，差不多就可以写个SDL画窗口的例子，将SDL的surface和Cairo的Cairo_surface绑定一起就ok了!至于移植到不同的平台，只需要交叉编译各个依赖库以及WebKit库就OK了！
想要源码的朋友可以发邮箱，不过可以自己尝试一下，这样比较好！