diff --git a/content/docs/contribute/desktop.mdx b/content/docs/contribute/desktop/building.mdx similarity index 72% rename from content/docs/contribute/desktop.mdx rename to content/docs/contribute/desktop/building.mdx index 958e0ae..6e2bc21 100644 --- a/content/docs/contribute/desktop.mdx +++ b/content/docs/contribute/desktop/building.mdx @@ -1,7 +1,7 @@ --- -title: Browser +title: Building Zen --- -import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; +import { Tabs, Tab } from 'fumadocs-ui/components/tabs'; We've taken the time to make building Zen Browser as easy as possible, independent of your operating system or technical knowledge. @@ -13,8 +13,6 @@ The following resources are essential for a successful build. Without them, you - Git ([Download here](https://git-scm.com/downloads)) – Required for version control and managing source code. - Python 3 ([Download here](https://www.python.org/downloads/)) – Needed for running build scripts and automation tools. - Node.js 21+ ([Download here](https://nodejs.org/)) – Required for managing dependencies and running JavaScript-based tools. -- MozillaBuild ([Download here](https://wiki.mozilla.org/MozillaBuild)) – Required for `mach` and Gecko compilation. -- 7-Zip ([Download here](https://www.7-zip.org/download.html)) – Used to extract Firefox source archives. - sccache ([Download here](https://github.com/mozilla/sccache/releases)) – A caching tool that speeds up rebuilds by storing compiled objects. @@ -25,16 +23,45 @@ If you're using Windows, ensure that all the basic software requirements are add We cannot provide support if a build fails. Please understand this before proceeding with the following steps. -## Step 1: Clone the Project - -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. +## Step 1: Getting Started & Clone the Project + +First, let's get your system ready for building Zen. + + + +

Follow the steps below to set up your Windows environment for building Zen Browser:

+
    +
  1. Install [MozillaBuild](https://wiki.mozilla.org/MozillaBuild) and add it to your `PATH`.
    2. +
  2. Install [7-Zip](https://www.7-zip.org/) and add it to your `PATH`.
    3. +
  3. Ensure you have Visual Studio with the "Desktop development with C++" workload installed.
    4. +
+ + +

Follow the steps below to set up your Linux environment for building Zen Browser:

+
    +
  1. For Debian-based Linux (such as Ubuntu): `sudo apt update && sudo apt install curl python3 python3-pip git`
    2. +
  2. `For Fedora Linux: sudo dnf install python3 python3-pip git`
    3. +
+ + +

Follow the steps below to set up your macOS environment for building Zen Browser:

+
    +
  1. Install Xcode from the App Store, after that run the following command in your terminal:
    2. + ``` +sudo xcode-select --switch /Applications/Xcode.app +sudo xcodebuild -license + ``` +
+ + + +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. ```bash -git clone https://github.com/zen-browser/desktop.git --recurse-submodules --depth 10 +git clone https://github.com/zen-browser/desktop.git --depth 10 cd desktop ``` -- **`--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. - **`--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. ## Step 2: Install Dependencies diff --git a/content/docs/contribute/desktop/code-structure-and-prefs.mdx b/content/docs/contribute/desktop/code-structure-and-prefs.mdx new file mode 100644 index 0000000..458a8a5 --- /dev/null +++ b/content/docs/contribute/desktop/code-structure-and-prefs.mdx @@ -0,0 +1,56 @@ +--- +title: Code Structure +description: Zen Browser Code Structure and Preference Management +--- + +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: + ```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`: + ```yaml + - name: zen.glance.enabled + value: true + ``` +- In `src/zen/glance/ZenGlanceManager.mjs`: + ```javascript + const glanceEnabled = Services.prefs.getBoolPref('zen.glance.enabled', true); + ``` + + + For more details, refer to existing preference definitions in the `prefs/` directory and their corresponding code implementations in `src/zen/`. + \ No newline at end of file diff --git a/content/docs/contribute/desktop/index.mdx b/content/docs/contribute/desktop/index.mdx new file mode 100644 index 0000000..d058331 --- /dev/null +++ b/content/docs/contribute/desktop/index.mdx @@ -0,0 +1,10 @@ +--- +title: Contributing To Desktop +--- + +import { BookIcon, HammerIcon } from 'lucide-react' + + + } description="Getting Started with Zen Browser Development" href="/contribute/desktop/building" /> + } description="Getting Started with Zen's Homepage Development" href="/contribute/desktop/working" /> + \ No newline at end of file diff --git a/content/docs/contribute/desktop/meta.json b/content/docs/contribute/desktop/meta.json new file mode 100644 index 0000000..11741fb --- /dev/null +++ b/content/docs/contribute/desktop/meta.json @@ -0,0 +1,6 @@ +{ + "title": "Desktop", + "pages": [ + "..." + ] +} \ No newline at end of file diff --git a/content/docs/user-manual/webpanel.mdx b/content/docs/user-manual/webpanel.mdx deleted file mode 100644 index 83f1129..0000000 --- a/content/docs/user-manual/webpanel.mdx +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Web Panel (Deprecated) ---- - - - Since the release of version [1.11b](https://zen-browser.app/release-notes/#1.11b), **Web Panel** has been indefinitely **removed** from Zen due to a discovered [security vulnerability](https://bugzilla.mozilla.org/show_bug.cgi?id=1935985) that could allow websites in web panels to bypass sandboxing protections, potentially enabling malicious code execution on your system. - - We understand that this change may cause inconvenience to our current user base relying on Web Panel, and we sincerely apologize for the disruption. We do plan to bring Web Panel back in the future once we address these issues and ensure that the feature stable and secure. - - -
- Webpanel -
- -The **Zen Web Panel** brings your favorite web apps—like chats, notes, or to-do lists—right into your browser window for quick, side-by-side multitasking. Instead of switching tabs, you can keep essentials within reach, making it easy to reference or interact without losing focus on your main task. - -With options to float or pin these panels alongside your browsing tabs, the Sidebar is perfect for keeping tools like messaging or music accessible. Planned upgrades will even add notification badges for real-time updates, creating a streamlined and productive workspace within Zen. diff --git a/public/assets/user-manual/webpanel/webpanel.png b/public/assets/user-manual/webpanel/webpanel.png deleted file mode 100644 index 1de9232..0000000 Binary files a/public/assets/user-manual/webpanel/webpanel.png and /dev/null differ