wiki:WebInspectorCodingStyleGuide

Version 6 (modified by Brian Burg, 9 years ago) (diff)

Fix tt styles, add links to mechanization tracking bug, repository directory, and Map/Set spec draft

These are JavaScript coding styles used in the Source/WebInspectorUI/UserInterface folder.

(Note: Few if any of these guidelines are checked by check-webkit-style. There's a tracking bug for that: https://bugs.webkit.org/show_bug.cgi?id=125045)

  • No trailing whitespace
  • Indent with 4 spaces
  • The opening bracket '{' after a named, non-inlined function goes on the next line. Anywhere else, the opening bracket '{' stays on the same line.
  • Style for object literals is: {key1: value1, key2: value2}.
  • Calling a constructor with no arguments should have no parenthesis '()'. eg. var map = new Map;
  • Inline anonymous functions, especially if they don't need a bound this-object (using .bind()). Example:
        this.requestRootDOMNode(function(rootNode) {
            ...
        });
    
  • Avoid using the "on" prefix where possible. The _onFoo methods can just be _foo.
  • New class names should use the name of the base class as a suffix. (ex: TimelinesContentView < ContentView). Exceptions: classes extending WebInspector.Object (unless they are a represented object), and deep hierarchies such as DebuggerSidebarPanel < NavigationSidebarPanel < SidebarPanel < Object.
  • Add new lines before and after different tasks performed in the same function.
  • Consider using `Map` and `Set` collections instead of plain objects.
  • Consider using rgb() over hex colors in CSS
  • Firewall the protocol inside the Manager classes. JSON objects received from the protocol are called "payload" in the code. The payload is usually deconstructed at the Managers level and passes down as smart objects inheriting from WebInspector.Object.

The new Inspector object classes should have the following format:

WebInspector.NewObjectType = function()
{
    WebInspector.Object.call(this);
    this._propertyName = ...;
}

WebInspector.NewObjectType.Event = {
    PropertyWasChanged: "new-object-type-property-was-changed"
};

WebInspector.NewObjectType.prototype = {
    constructor: WebInspector.NewObjectType,
    __proto__: WebInspector.Object.prototype,

    // Public

    get propertyName()
    {
        return this._propertyName;
    },

    set propertyName(value)
    {
        this._propertyName = value;
        this.dispatchEventToListeners(WebInspector.NewObjectType.Event.PropertyWasChanged);
    },

    publicMethod: function()
    {
        /* public methods called outside the class */
    }

    // Protected
    handleEvent: function(event)
    {
        /* delegate methods, event handlers, and overrides. */
    },

    // Private

    _privateMethod: function()
    {
        /* private methods are underscore prefixed */
    }
};