Skip to content

Commit 04a32c6

Browse files
mr-cheffymr-cheffy
authored
Merge pull request #215 from zen-browser/better-docs
2 parents 2e9612d + 969c325 commit 04a32c6

File tree

6 files changed

+108
-26
lines changed

6 files changed

+108
-26
lines changed

‎content/docs/contribute/desktop.mdx‎ renamed to ‎content/docs/contribute/desktop/building.mdx‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: Browser
2+
title: Building Zen
33
---
4-
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
4+
import { Tabs, Tab } from 'fumadocs-ui/components/tabs';
55

66
We've taken the time to make building Zen Browser as easy as possible, independent of your operating system or technical knowledge.
77

@@ -13,8 +13,6 @@ The following resources are essential for a successful build. Without them, you
1313
- Git ([Download here](https://git-scm.com/downloads)) – Required for version control and managing source code.
1414
- Python 3 ([Download here](https://www.python.org/downloads/)) – Needed for running build scripts and automation tools.
1515
- Node.js 21+ ([Download here](https://nodejs.org/)) – Required for managing dependencies and running JavaScript-based tools.
16-
- MozillaBuild ([Download here](https://wiki.mozilla.org/MozillaBuild)) – Required for `mach` and Gecko compilation.
17-
- 7-Zip ([Download here](https://www.7-zip.org/download.html)) – Used to extract Firefox source archives.
1816
- sccache ([Download here](https://github.com/mozilla/sccache/releases)) – A caching tool that speeds up rebuilds by storing compiled objects.
1917

2018
<Callout>
@@ -25,16 +23,45 @@ If you're using Windows, ensure that all the basic software requirements are add
2523
We cannot provide support if a build fails. Please understand this before proceeding with the following steps.
2624
</Callout>
2725

28-
## Step 1: Clone the Project
29-
30-
First, you need to clone the Zen Browser repository to your local machine. This will create a local copy of the project that you can work on.
26+
## Step 1: Getting Started & Clone the Project
27+
28+
First, let's get your system ready for building Zen.
29+
30+
<Tabs groupId="toolbar" items={['Windows', 'Linux', 'macOS']} persist>
31+
<Tab value="Windows">
32+
<p>Follow the steps below to set up your Windows environment for building Zen Browser:</p>
33+
<ol>
34+
<li>Install [MozillaBuild](https://wiki.mozilla.org/MozillaBuild) and add it to your `PATH`.</li>
35+
<li>Install [7-Zip](https://www.7-zip.org/) and add it to your `PATH`.</li>
36+
<li>Ensure you have Visual Studio with the "Desktop development with C++" workload installed.</li>
37+
</ol>
38+
</Tab>
39+
<Tab value="Linux">
40+
<p>Follow the steps below to set up your Linux environment for building Zen Browser:</p>
41+
<ol>
42+
<li>For Debian-based Linux (such as Ubuntu): `sudo apt update && sudo apt install curl python3 python3-pip git`</li>
43+
<li>`For Fedora Linux: sudo dnf install python3 python3-pip git`</li>
44+
</ol>
45+
</Tab>
46+
<Tab value="macOS">
47+
<p>Follow the steps below to set up your macOS environment for building Zen Browser:</p>
48+
<ol>
49+
<li>Install Xcode from the App Store, after that run the following command in your terminal:</li>
50+
```
51+
sudo xcode-select --switch /Applications/Xcode.app
52+
sudo xcodebuild -license
53+
```
54+
</ol>
55+
</Tab>
56+
</Tabs>
57+
58+
After having everything set up, you need to clone the Zen Browser repository to your local machine. This will create a local copy of the project that you can work on.
3159

3260
```bash
33-
git clone https://github.com/zen-browser/desktop.git --recurse-submodules --depth 10
61+
git clone https://github.com/zen-browser/desktop.git --depth 10
3462
cd desktop
3563
```
3664

37-
- **`--recurse-submodules`**: This flag ensures that all submodules are cloned along with the main project. Zen Browser relies on several submodules, so this step is essential.
3865
- **`--depth 10`**: This makes sure you dont download the entire git history, it would take a long time otherwise due to that we used to store compiled binaries on the repository.
3966

4067
## Step 2: Install Dependencies

‎content/docs/contribute/desktop/code-structure-and-prefs.mdx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: Code Structure
3+
description: Zen Browser Code Structure and Preference Management
4+
---
5+
6+
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.
7+
8+
## Main Directories
9+
- **src/zen/**: Contains Zen-specific features.
10+
- `workspaces/`: Implements workspace functionality (e.g., ZenWorkspaces.mjs, ZenWorkspace.mjs).
11+
- `compact-mode/`: Handles compact mode UI.
12+
- `glance/`: Quick tab preview feature.
13+
- `common/`: Shared utilities like ZenUIManager.mjs and ZenStartup.mjs.
14+
- `tabs/`: Tab management, including pinned tabs.
15+
- **src/browser/**: Browser components with patches (e.g., browser.xhtml patches).
16+
- **prefs/**: Preference files in YAML format for various features (e.g., zen.yaml for general prefs, glance.yaml for glance feature).
17+
18+
## How to Add New Preferences
19+
Preferences in Zen Browser are defined in YAML files under `prefs/`. These are loaded and applied to customize behavior.
20+
21+
### Steps to Add a New Pref
22+
1. **Choose or Create a YAML File**:
23+
- For workspace-related prefs, edit `prefs/zen.yaml` or create a new one like `workspaces.yaml` if needed.
24+
- Example structure in YAML:
25+
```yaml
26+
- name: zen.workspaces.new-pref
27+
value: true
28+
```
29+
30+
2. **Define the Pref**:
31+
- `name`: The preference key (e.g., 'zen.workspaces.enable-feature').
32+
- `value`: Default value (bool, string, int).
33+
- *`condition`: Optional*
34+
35+
3. **Integrate in Code**:
36+
- Use `Services.prefs.getBoolPref('zen.workspaces.new-pref', defaultValue)` in JavaScript files (e.g., ZenWorkspaces.mjs).
37+
38+
4. **Build and Test**:
39+
- Rebuild the browser.
40+
41+
42+
### Glance Example
43+
To add a pref for enabling/disabling the Glance feature:
44+
- In `prefs/glance.yaml`:
45+
```yaml
46+
- name: zen.glance.enabled
47+
value: true
48+
```
49+
- In `src/zen/glance/ZenGlanceManager.mjs`:
50+
```javascript
51+
const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true);
52+
```
53+
54+
<Callout type="info" title="Tip">
55+
For more details, refer to existing preference definitions in the `prefs/` directory and their corresponding code implementations in `src/zen/`.
56+
</Callout>

‎content/docs/contribute/desktop/index.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: Contributing To Desktop
3+
---
4+
5+
import { BookIcon, HammerIcon } from 'lucide-react'
6+
7+
<Cards>
8+
<Card title="Building Zen" icon={<BookIcon />} description="Getting Started with Zen Browser Development" href="/contribute/desktop/building" />
9+
<Card title="Working on Zen" icon={<HammerIcon />} description="Getting Started with Zen's Homepage Development" href="/contribute/desktop/working" />
10+
</Cards>

‎content/docs/contribute/desktop/meta.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"title": "Desktop",
3+
"pages": [
4+
"..."
5+
]
6+
}

‎content/docs/user-manual/webpanel.mdx‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎public/assets/user-manual/webpanel/webpanel.png‎

-120 KB
Binary file not shown.

0 commit comments

Comments
 (0)