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 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);