A new tag is born

After the lack of success cloning the canvas tag I decided to try and do the same with a less "complicated" tag. The canvas tag involves more files than most tags therefore making it more difficult to setup all the dependencies correctly in the build system. The best tag to clone after the canvas was the button tag. It is simple yet it requires a custom rendering module. I started from scratch once again and followed the same procedure to clone it. I also decided to call the new tag opengl instead of WebOpenGL because it followed the tag naming convention more closely.
The project built successfully and I could see the opengl tag files in the build log. However, the opengl tag did not render like a button but as a label instead. To ensure that the opengl tag was actually being created I inserted print statements in the constructors of both the tag and the tag's custom renderer. I was disappointed to see that nothing was printed when an opengl tag was created. I examined each of the files were I had made entries to inform the builder to create this new tag. I realized that there was one place in which the button tag was referenced but not the opengl tag. I made the appropriate entry and tried again. Viola! This time both print statements were executed. I had created a new HTML tag.
Even though an instance of the custom renderer was being created, the tag was still not displaying as a button. However, because the ultimate goal was to display a pixel map, I knew that further tweaking was involved so I wasn't too worried.
Next: play around with the custom render in order to display a fixed pixel map when the opengl tag is created.

Working with the build system

After reading over the Bakefile documentation I inserted the WebOpenGL filenames into the appropriate file. However, the build system did not pick up the new files. Also, the build started to fail on a file which I did not edit. I reverted the changes that I had made to ensure that it wasn't caused by anything that I had done. However, the build still failed. After several tries I decided to start up again with a clean copy of WebKit. I saved the files I had changed and the ones I had created and downloaded the WebKit source code again. This took about an hour. I then built WebKit using the clean source and it worked fine although it took about another hour.
After some more reading I realized that WebKit was being build on my machine using qmake. This required a different set of files to be edited. I inserted the appropriate entries into the files and was happy to see that the build system did pick up the new WebOpenGL files.
The first build error I got referred to a missing reference on the webOpenGLTag variable. I soon realized that all the HTML tag names were declared in a file called HTMLTagNames.in. I added the entry webOpenGL to this file and was able to get pass the build error. The second error referred to a missing method name reference.
The next step is to find out where this error is coming from, fix it and hopefully complete the build.

Problems with extraneous files

While trying to determine which files I should copy, rename and/or edit in order to create a clone of the Canvas tag renamed to WebOpenGL I found files whose extension I did not recognize. Among these were .idl, .mm, and .pro. I had already seen files which I knew were IDE specific such as Visual Studio project files. The task now was to determine whether the unknown file types were IDE specific or were necessary for the build system to work correctly. I did a Google search for these unknown file extensions and found some where needed by Visual Studio, such as .idl, while others remained mysteriously hard to determine. After spending quite sometime on this task I decided to ignore all known IDE specific files. I then directed myself to the WebKit Wiki where I found documentation on the Bakefile system. This is the tool used to build WebKit. After reading this documentation briefly I realized that the files mentioned did not match those in the source code. Therefore my next task is to determine which files are needed by the build system and include the appropriate entries in these files so that the WebOpenGL tag can be created correctly.

Creating a new tag

I've been searching around the code for places which would need to be edited in order to create a new HTML element. I found the WebKit/WebCore/html directory which contains classes for all the elements. I also found some of the classes in the WebKit/WebCore/rendering directory. HTML elements seem to derive from the HTMLElement base class. Next, I picked an HTML element which I would like to "clone." My approach is basically to create a simple element achieved by copying a current element and renaming the classes and files. I chose to grep for the HTMLHeadElement which is one the simplest elements. I found references in more places than just the WebKit/WebCore directory. However, because the WebOpenGL element will resemble the HTMLCanvasElement more closely, I decided to repeat the grep search for this element. The results showed that most files which had references to HTMLHeadElement also had references to HTMLCanvasElement, but, there were files unique to each set of results. Curious, I also searched for references to HTMLDivElement and HTMLParagraphElement. These results were closer to the results from HTMLHeadElement--there were more files in common. There were a set a files that were unique to the results from the HTMLCanvasElement which makes sense since it is quite a different tag from head, div, and p. As I mentioned my project is more like the HTMLCanvasElement so I've decided that I'm going to "clone" the HTMCanvasElement instead of the HTMLHeadElement.

It starts

So in order to get this project started the first thing I did was, well naturally, download WebKit. That took about two hours. Haha. Well I guess I have time to talk about what it is that I'm going to do (or plan to do) with WebKit. In short, the plan is to enable the OpenGL API for WebKit-based Web browsers. So, a developer would be able to write an OpenGL program but instead of the rendering happening in a window provided by the operating system it would happen inside the Web browser.
After the downloading came the compiling. I ran into some difficulties because the environment for Linux has to be setup differently. Specifically, I had to install the QT development libraries and set the appropriate environment variables. The WebKit installation instructions didn't provide any help when I first ran into compiling problems, but , as always, Google helped me find the way. I eventually came across a post which explained what I need to do. The compilation took about another hour.
After that I had similar problems running the bare-bones browser which comes with
WebKit. The solution, again, was in setting up the correct environment variables.
After ensuring everything was up and running I started looking at the code structure in order to figure out where I would have to insert code to create the new OpenGL HTML tag. I searched for the HTML Canvas code by greping for the clearRect method which is specific to the Canvas API. I found two main places where the code laid. The first is WebKit/WebCore/html which is where the code for each of the HTML elements lives. The second is /WebKit/WebCore/rendering which is where the code that actually does the rendering for the HTML Canvas tag lives. I looks like it is within these two directories that the majority of the WebOpenGL code will reside.