Coding Guidelines

This is WORK IN PROGRESS, if you want to add stuff put it into the Discussion

General rules

• Code should be indented with “4 spaces” as spaces are the only way to guarantee code renders the same in any environment (link this)
• Every .js and .css must contain a GPL header
• Behaviour goes to Javascript files and Looks go to CSS files
• Install the EditorConfig plugin for your editor and use this config.

Basic Directory Structure of an Extension (wip)

/extension-name@ozonos.org
./Makefile
./extension.js
./metadata.json
./README.md
./LICENSE
./AUTHORS
./CHANGELOG
../schema
../styles(optional)
../images

Resources

Starting from 3.14 Gnome Shell is wrapping some components into Shared Objects. If you are working on Themes or Extension things can get quite painful without any reference code to look at. So we added some scripts for your Convenience which have been floating around online.

• Find a script to extract the Shell Theme here
• Find a script to extract the Gnome Shell Source here

You need to have glib2-devel installed for the scripts to work (sudo yum install glib2-devel)

Rules about Makefiles

It must be possible to make, make install and make uninstall with the Makefile in the extension.

Add an Example File

Guidelines for formatting JSON(Metadata)

The JSON file should be properly formatted and should be checked against a validator (add link) In case of extensions, while mentioning the version, use the major version number, for example 3.12 and not 3.12.2.

Example:

{
    "shell-version": ["3.10", "3.12"],
    "uuid": "atom-dock@ozonos.org",
    "name": "Atom Dock",
    "description": "Custom Dock for Ozon Desktop"
}

Guidelines for formatting CSS

• Put spaces before { in rule declarations.
• Put line breaks between rulesets.
• Place closing braces of declaration blocks on a new line.
• All property declarations should be followed by a semicolon (;).
• Each declaration should appear on its own line.
• In case of a selector with a single property, the whole block should be written in one line.
• If you are using Sass, install SCSS-Lint plugin for your editor and use this config.

/* In case of classes with only one property, you can wrap up like this */
.panel { background-color: #333; }

/* In case of classes with multiple properties, the code should be written as below, */
.panel {
    background-color: #333;
    border: none;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

Guidelines for formatting Javascript

• Use variable names that reflect their purpose, f.e.: indicatorsToggleButton, not ambiguous names like “me”, “a b c” or “mySuperDuperVar”
• Keep Code commenting to a minimum, if you need to comment every line, there’s probably something wrong with your code
• Close brackets even if you don’t have to, it keeps up readability
• In cas of doubt, refer to the Gnome gjs Guidelines
• To minimize code errors, install the JSHint plugin for your editor and use this config.
• For code style checking, install the JSCS plugin for your editor and use this config.