Modifying the Web Inspector
Let's say, we don't like red color for CSS property names, and we would prefer property names to be purple instead. Let's get started!
Inspect The Inspector
Since the Web Inspector UI is just another web page, we can inspect the Web Inspector with a second-level Web Inspector instance to quickly see what's going on. This requires a few magic settings to enable the "Inspect..." context menu on the Web Inspector window.
For the Mac port, set the following defaults to allow inspecting the inspector.
defaults write com.apple.Safari WebKitDeveloperExtrasEnabled -bool YES
After updating these settings, run the WebKit Nightly. Then, open the Web Inspector and right-click to inspect the inspector itself.
By inspecting the CSS property names in the second-level inspector, we quickly find that the colors are defined by rules in
To create and submit a patch with our changes, we must to create an accompanying Bugzilla bug, and compute the diff of our changes against WebKit trunk.
Create / Update a Bug Report
The WebKit project uses "bugs" in Bugzilla for fixes, new features, and any other code changes. Every commit must have an accompanying Bugzilla bug. So, the first step is to ensure that your proposed enhancement or fix has an associated bug.
Once you find or create a bug report, make sure to add a comment stating your intent to work on the bug. This step is very important; comments on bugs in the Web Inspector Bugzilla component will automatically notify Web Inspector reviewers. This will allow them to answer any questions you may have about a proposed fix, and give feedback, pointers, and guidance for solving the issue.
Now Do Your Hacking
- Using Git with WebKit
git clone git://git.webkit.org/WebKit.git cd WebKit git checkout -b purple_css_values
- Build WebKit
Tools/Scripts/build-webkit --releaseA clean build takes 20-80 minutes depending on the vintage of your machine.
- Run it
Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.csswithin a git repository.
- Copy files from
Source/WebInspectorUI/UserInterfaceto the build directory by running
make -C Source/WebInspectorUI release. Do it after every time you modify Inspector's files.
- Look at your changes
git status git diff Source/WebInspectorUI/
Tools/Scripts/check-webkit-style Tools/Scripts/prepare-ChangeLog --bug xxxxx # edit WebCore/ChangeLog
Instead of xxxxx you should put bug number, like 32926.
- Upload a patch and wait for a review!
Tools/Scripts/webkit-patch upload xxxxx -m "patch"
If you have any questions there are always people willing to help! Just jump onto Freenode IRC and visit #webkit or #webkit-inspector.
Parts of the tutorial was taken from Quick Hacking on the Web Inspector.