WorkingOnHTML

Getting started

It’s probably easiest to download the ‘unstable’ release from the Frontpage (or directly at http://frim.frim.nl/GitX.app.zip).

To get the raw source of the current HTML view, you can press the ‘c’ key to copy the source code to the pasteboard. Then, right-click on GitX, and select “Show Package Contents”. In the bundle you will find some .js, .css and .html files that make up most of GitX. You can copy these files and use them together with the raw source you just copied.

Changing the source

After you know what you want to change, the best way to proceed is to change the js / html code and see what GitX makes of it. You can either directly edit the files in the package or, clone the GitX code and use XCode. After you saved, your changes you can restart GitX and your changes should be immediately visible. (If you are editing the Application HTML/CSS/JS using Show Package Contents, you can just right-click on an HTML view and select Reload instead of quit/relaunch). Prototype is included with GitX. It’s API reference is here: http://www.prototypejs.org/api. If you want to include other libraries, such as scriptaculous for animations or so, that is no problem. Furthermore, the HTML view uses WebKit for its rendering, so a lot of methods and css selectors are also available. For example, I use the css -webkit-rounded-corners attribute to create rounded corners in diffs.

Debugging

To enable the Web Inspector in the GitX HTML views, run the following command in a terminal window. You can now right click in the web views and select ‘Inspect Element’ to open the Web Inspector. Web Inspector allows you to browse the DOM, inspect CSS, and evaluate JavaScript expressions.

defaults write nl.frim.GitX WebKitDeveloperExtras -bool true