Code Structure

The Zen Browser is a fork of Firefox with custom features like vertical tabs, workspaces, and themes. The source code is organized in the src/ directory, with patches and custom implementations for Zen-specific features.

Main Directories

• src/zen/: Contains Zen-specific features.
  • workspaces/: Implements workspace functionality (e.g., ZenWorkspaces.mjs, ZenWorkspace.mjs).
  • compact-mode/: Handles compact mode UI.
  • glance/: Quick tab preview feature.
  • common/: Shared utilities like ZenUIManager.mjs and ZenStartup.mjs.
  • tabs/: Tab management, including pinned tabs.
• src/browser/: Browser components with patches (e.g., browser.xhtml patches).
• prefs/: Preference files in YAML format for various features (e.g., zen.yaml for general prefs, glance.yaml for glance feature).

How to Patch the Firefox Source Code

You can create patches on the Firefox source code by modifying the files in the engine/ directory which is created after you've run the npm run init command.

Steps to Make Changes on the Firefox Source Code

1. Find the file you want to modify

• You can easily navigate the Firefox source code using Mozilla's Searchfox tool
• Modify the file in the engine/ directory

2. Patch the file and import the changes

• Run npm run export <path>
• Run npm run import

3. Build and Test

• Rebuild the browser

How to Add New Preferences

Preferences in Zen Browser are defined in YAML files under prefs/. These are loaded and applied to customize behavior.

Steps to Add a New Pref

1. Choose or Create a YAML File:

• For workspace-related prefs, edit prefs/zen.yaml or create a new one like workspaces.yaml if needed.
• Example structure in YAML:

  - name: zen.workspaces.new-pref
    value: true

2. Define the Pref:

• name: The preference key (e.g., 'zen.workspaces.enable-feature').
• value: Default value (bool, string, int).
• condition: Optional

3. Integrate in Code:

• Use Services.prefs.getBoolPref('zen.workspaces.new-pref', defaultValue) in JavaScript files (e.g., ZenWorkspaces.mjs).

4. Build and Test:

• Rebuild the browser.

Glance Example

To add a pref for enabling/disabling the Glance feature:

• In prefs/glance.yaml:

  - name: zen.glance.enabled
    value: true

• In src/zen/glance/ZenGlanceManager.mjs:

  const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true);

Additional Resources

• Firefox Source Docs