Changes between Version 11 and Version 12 of HackingWebInspector


Ignore:
Timestamp:
Feb 19, 2014 3:21:29 PM (10 years ago)
Author:
BJ Burg
Comment:

Improve words

Legend:

Unmodified
Added
Removed
Modified

  • HackingWebInspector

    v11 v12  
    1 = Contributing to Web Inspector =
     1= Modifying the Web Inspector =
    22
    3 Let's say, we don't like red color for CSS property names. We want to change it to purple.
     3The Web Inspector user interface is implemented using JavaScript, CSS, and HTML. So, it's relatively easy to dig into the Web Inspector's sources and fix bugs or add new features.
     4This wiki page documents the minimal steps required to modify styles used by the Web Inspector and submit your changes as a patch for review.
     5
     6Let'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!
    47
    58== Inspect The Inspector ==
    69
    7 On Mac, set the following defaults to allow inspecting the inspector, and logging console messages to stdout. (To increase the level of possible inception, add more defaults for higher page group levels.)
     10Since 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.
     11
     12For the Mac port, set the following defaults to allow inspecting the inspector, and logging console messages to stdout. (To increase the level of possible inception, add more defaults for higher page group levels.)
    813
    914{{{
    … …  
    1419
    1520
    16 Run Safari or [http://nightly.webkit.org/ WebKit Nightly build]. Open Web Inspector.
     21After updating these settings, run the [http://nightly.webkit.org/ WebKit Nightly]. Then, open the Web Inspector and right-click to inspect the inspector itself.
    1722
    18 We can edit `SyntaxHighlightingDefaultTheme.css` in our favorite code editor, but we cannot make a patch from it. After next update `SyntaxHighlightingDefaultTheme.css` will be overwritten and our changes disappeared.
     23By inspecting the CSS property names in the second-level inspector, we quickly find that the colors are defined by rules in `Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css`.
     24To 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.
    1925
    2026== Create / Update a Bug Report ==
    … …  
    2329 * [http://webkit.org/new-inspector-bug Create New Web Inspector Bug]
    2430
    25 It will benefit both you and the usual Web Inspector developers if you create or comment on a bug report for the feature or fix you intend to work on. A "Bug" report is for all code changes, this include fixes, issues, and ideas for new features.
     31The WebKit project uses "bugs" in Bugzilla for fixes, new features, and any other code changes. Every commit must have an accompanying Bugzilla bug.
     32So, the first step is to ensure that your proposed enhancement or fix has an associated bug.
    2633
    27 This step is very important, because your update will automatically notify the regular Web Inspector developers. This will allow them to immediately provide you with some feedback, and pointers / guidance for solving the issue or adding the feature!
     34Once you find or create a bug report, make sure to add a comment stating your intent to work on the bug.
     35This step is very important; comments on bugs in the Web Inspector Bugzilla component will automatically notify Web Inspector reviewers.
     36This will allow them to answer any questions you may have about a proposed fix, and give feedback, pointers, and guidance for solving the issue.
    2837
    2938== Now Do Your Hacking ==
    … …  
    4958 4. Edit `Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css` within a git repository.
    5059
    51  5. Copy files from `Source/WebInspectorUI/UserInterface` to the build by running `make -C Source/WebInspectorUI release`. Do it after every time you modify Inspector's files.
     60 5. Copy files from `Source/WebInspectorUI/UserInterface` to the build directory by running `make -C Source/WebInspectorUI release`. Do it after every time you modify Inspector's files.
    5261
    5362 7. Look at your changes
    … …  
    7281
    7382
    74 If you have any questions there are always people willing to help. Just jump onto [http://freenode.net/irc_servers.shtml Freenode IRC] and visit #webkit or #webkit-inspector.
     83If you have any questions there are always people willing to help! Just jump onto [http://freenode.net/irc_servers.shtml Freenode IRC] and visit #webkit or #webkit-inspector.
    7584
    7685----