Merge branch 'zen-browser:main' into main

This commit is contained in:
blu3 2025-02-23 11:09:19 +03:00 committed by GitHub
commit c201663108
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 133 additions and 139 deletions

Binary file not shown.

View file

@ -1,7 +1,7 @@
---
title: Contributing to Zen Browser
draft: false
lastmod: 2024-08-26
lastmod: 2025-02-07
---
Thank you for considering contributing to Zen Browser! We appreciate your time and effort in improving this project. The following is a set of guidelines for contributing to Zen Browser. These guidelines are intended to make it easier for you to get involved.
@ -23,7 +23,7 @@ To help you get started with contributing, we have created separate guides for e
- [[www | Getting Started with Zen's Homepage Development]]
- [[docs | Getting Started with Documentation Contributions]]
- [[translation | Getting Started with Translations]]
Please follow the appropriate guide based on the repository you want to contribute to.
### Reporting Bugs
@ -33,7 +33,7 @@ If you find a bug, please open an issue and describe the problem in detail. Incl
>[!important]
>Open the issue in it's corresponding GitHub repository:
>- [Desktop Browser App](https://github.com/zen-browser/desktop/issues)
>- [Zen's Custom Themes](https://github.com/zen-browser/theme-store)
>- [Zen's Custom Mods](https://github.com/zen-browser/theme-store)
>- [Zen's Homepage Website](https://github.com/zen-browser/www)
>- [This documentation Website](https://github.com/zen-browser/docs)
@ -41,7 +41,7 @@ If you find a bug, please open an issue and describe the problem in detail. Incl
![[discuss.png]]
We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category.
We welcome suggestions for new features or improvements to existing ones. To suggest a feature, please start a new Github discussion in the Ideas category.
*Use the correct Github Repository based on the list above*
---

View file

@ -55,7 +55,7 @@ Your support helps the team maintain and enhance Zen Browser for everyone!
1. Select multiple tabs by left-clicking them while holding the `Ctrl` key, or left-click 2 tabs while holding the `Shift` key to select all tabs in between
2. Right click a tab, and select `Split x Tabs`
3. Change the view mode by pressing the 🔗 button in the top address bar
3. Change the view mode by pressing the `[|]` button in the top address bar
## How to switch tabs by scrolling?
You can enable this feature by changing a setting in the browser's configuration. Here's how:

View file

@ -53,11 +53,9 @@ In MacOS you can use the Graphical Interface of the Desktop app to add Zen Brows
#### 1. Go into the 1Password desktop app and open Settings.
#### 2. In the Labs tab, click "Enable Custom Browser Support" and enable it.
#### 2. In the Browser tab, click "Add Browser".
#### 3. In the Browser tab, click "Add Browser".
#### 4. In your Applications folder, find and add "Zen Browser, then authorize 1Password when prompted.
#### 3. In your Applications folder, find and add "Zen Browser", then authorize 1Password when prompted.
![[macos-settings-4.png]]

View file

@ -19,6 +19,7 @@ This [[guides/index|guide]] will help you customize the appearance of Zen Browse
1. In the Profile Folder, create a new folder and name it `chrome`.
2. Inside the `chrome` folder, create a new blank file named `userChrome.css`.
3. Restart Zen Browser to apply the changes.
## Step 3: Open Style Editor in Zen Browser

View file

@ -9,9 +9,8 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
* #### [[building|Building Zen Browser 📦]]
* #### [[user-manual/index|User Manual 📖]]
* #### [[guides/index|Guides 🛠️]]
* #### [[themes-store/index|Theme Store 🎨]]
* #### [[themes-store/index|Mods Registry 🎨]]
* #### [[faq | Frequently Asked Questions ❓]]
* #### [[benchmarks | Performance Benchmarks 📊]]
* #### [[contribute/index | Contribution Guides 🌟]]
* #### [[security|Security 🔐]]
* #### [[welcome-to-zen|Welcome to Zen 🔐]]

View file

@ -1,34 +1,59 @@
---
title: Security 🔐
title: Privacy & Security 🔐
aliases:
- Security 🔐
- Privacy & Security 🔐
description: At Zen Browser, your online safety and privacy are our top priorities. We've implemented a range of security features to ensure you're protected while browsing.
lastmod: 2024-09-18
---
> [!important] Password, Cookies, and Cache Management
> All passwords, cookies, and cache in Zen Browser are managed by Firefox. This means your saved passwords are automatically encrypted, providing an extra layer of security to keep your login credentials safe. Cookies and cache are also handled according to Firefox's strict privacy policies, ensuring your data is stored securely and only accessible to you.
> All passwords, cookies, and cache in Zen Browser are **managed by Firefox**. This means your saved passwords are **automatically encrypted**, providing an extra layer of security to keep your login credentials safe. Cookies and cache are also handled according to Firefox's strict privacy policies, ensuring your data is stored securely and only accessible to you.
> For more information visit [Firefox Privacy and Security](https://support.mozilla.org/es/products/firefox/privacy-and-security)
## Adjusting Security Settings
### 1. Latest Firefox Version
Zen Browser lets you customize privacy and security settings to improve your browsing safety. If you want to adjust or change these settings:
Zen Browser is built on the latest version of Firefox, one of the most secure browsers available today. This means you benefit from all of Firefox's security patches and updates as soon as they are released, keeping you safe from known vulnerabilities.
1. Click the `menu button` and select `Settings`.
2. On the sidebar, go to the `Privacy & Security` section.
### 2. Tracking Protection
---
## Security settings
To protect your privacy, Zen Browser includes **tracking protection**. This feature automatically blocks websites and advertisers from tracking your online activity, making it harder for third parties to collect your data and show you targeted ads.
### 3. OCSP Enabled
> [!success] Latest Firefox Version
> Zen Browser is built on the **latest version of Firefox**, one of the most secure browsers available today. This means you benefit from all of Firefox's security patches and updates as soon as they are released, keeping you safe from known vulnerabilities.
### 1. OCSP Enabled
Zen Browser uses **OCSP (Online Certificate Status Protocol)** to check the validity of a websites security certificate. This ensures that you only connect to safe websites with up-to-date and valid certificates, protecting you from malicious sites that may have expired or revoked certificates.
### 4. HTTPS Only Mode
### 2. HTTPS Only Mode
**HTTPS Only Mode** ensures that you connect securely to websites by using the HTTPS version whenever possible. HTTPS encrypts the communication between you and the website, protecting your data from being intercepted by hackers.
> [!info] You can enable HTTPS-Only Mode in **all windows** or **private windows only**.
For more information visit [HTTPS-Only Mode in Firefox](https://support.mozilla.org/en-US/kb/https-only-prefs)
### 3. Deceptive Content and Dangerous Software Protection
### 5. SSL Treat Unsafe Negotiation as Broken by Default
Zen Browser helps protect you from **phishing, malware, and fraudulent websites**. It uses URL filters and real-time checks to block harmful content, making your browsing experience safer.
Zen Browser treats insecure SSL connections (those that don't meet modern security standards) as broken by default. This means that if a website is not properly secured, Zen Browser will alert you and block the unsafe connection, preventing potential security risks.
To learn more, visit [Block deceptive content and dangerous downloads in Firefox](https://support.mozilla.org/en-US/kb/block-deceptive-content-and-dangerous-downloads-firefox)
### 4. SSL Treat Unsafe Negotiation as Broken by Default
Zen Browser treats insecure SSL connections (those that don't meet modern security standards) as broken by default. This means that if a **website is not properly secured**, Zen Browser will alert you and **block the unsafe connection**, preventing potential security risks.
---
## Privacy settings
### 1. Tracking Protection
To protect your privacy, Zen Browser includes **tracking protection**. This feature automatically blocks websites and advertisers from tracking your online activity, making it harder for third parties to collect your data and show you targeted ads.
> [!info] You can choose from three levels of Tracking Protection: **Standard**, **Strict**, or **Custom**.
### 2. DNS over HTTPS
Zen Browser allows the users to enable DNS over HTTPS, which **sends your request for a domain name through an encrypted connection**, providing a secure DNS and making it harder for others to see which website youre about to access.
> [!info] You can choose from three protection levels: **Default Protection**, **Increased Protection**, or **Max Protection**.
---

View file

@ -1,3 +1,3 @@
---
title: Themes Store 🎨
title: Mods Registry 🎨
---

View file

@ -1,9 +1,9 @@
---
title: Themes Store Preferences ⚙️
lastmod: 2024-09-16
title: Mods Registry Preferences ⚙️
lastmod: 2025-02-07
---
The `preferences.json` file allows theme developers to define custom preferences that control the behavior and appearance of themes in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root.
The `preferences.json` file allows mod developers to define custom preferences that control the behavior and appearance of mods in the Zen Browser. Each preference is defined with a `property`, a `label`, a `type`, and optionally `options` (for dropdown preferences), `defaultValue`, `placeholder` (to configure preference placeholder) and `disabledOn` (to disable property on selected OS). The `preferences.json` file contains a list of these preference objects at its root.
## Preferences fields
@ -11,7 +11,7 @@ The `preferences.json` file allows theme developers to define custom preferences
The `property` field is a string that should follow Firefox's preference naming schema, similar to `about:config` entries. The `property` name can be any valid string that aligns with this schema.
For example: `theme.mytheme.background_color`
For example: `mod.mymod.background_color`
### Field: `label` - Label
@ -35,7 +35,7 @@ The `checkbox` type allows a togglable input to enable or disable a property.
```json title="Checkbox Example"
{
"property": "theme.mytheme.enable_dark_mode",
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox"
}
@ -47,7 +47,7 @@ The `dropdown` type allows to select a single choice on multiple options.
```json title="Dropdown Example"
{
"property": "theme.mytheme.background_color",
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"options": [
@ -70,7 +70,7 @@ The `string` type is a text input that allows to insert valid css values without
```json title="String Example"
{
"property": "theme.mytheme.tab_padding",
"property": "mod.mymod.tab_padding",
"label": "Set tab padding",
"type": "string"
}
@ -161,18 +161,18 @@ For example: `e.g: 10px`
<details>
<summary><font weight="bold" size=4.75><b>See Full Example</b></font></summary>
Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a theme:
Below is a full example of what a `preferences.json` file might look like with multiple preference objects in its root. Each object represents a preference defined for a mod:
```json
[
{
"property": "theme.mytheme.enable_dark_mode",
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox",
"defaultValue": true
},
{
"property": "theme.mytheme.background_color",
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"placeholder": "Select a color",
@ -189,7 +189,7 @@ Below is a full example of what a `preferences.json` file might look like with m
]
},
{
"property": "theme.mytheme.show_bookmarks_bar",
"property": "mod.mymod.show_bookmarks_bar",
"label": "Show bookmarks bar",
"type": "string",
"disabledOn": ["macos"]
@ -207,19 +207,19 @@ In this example:
---
## Using preferences in the theme's CSS
## Using preferences in the mod's CSS
Once you have defined your preferences in the `preferences.json` file, you can use them in your themes CSS to modify the appearance or behavior based on the users selections.
Once you have defined your preferences in the `preferences.json` file, you can use them in your mods CSS to modify the appearance or behavior based on the users selections.
### Checkbox Preferences
Checkbox preferences can be detected in your CSS using the `-moz-bool-pref` media query, which evaluates the boolean value (`true` or `false`) of a checkbox preference.
For example, if you have a preference to enable dark mode in your theme:
For example, if you have a preference to enable dark mode in your mod:
```json
{
"property": "theme.mytheme.enable_dark_mode",
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox"
}
@ -228,7 +228,7 @@ For example, if you have a preference to enable dark mode in your theme:
You can use the following CSS to change the background color when the dark mode preference is enabled:
```css {1}
@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") {
@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
body {
background-color: #000;
color: #fff;
@ -238,16 +238,16 @@ You can use the following CSS to change the background color when the dark mode
You can also have negative conditions
```css {1}
@media not (-moz-bool-pref: "theme.mytheme.enable_dark_mode")
@media not (-moz-bool-pref: "mod.mymod.enable_dark_mode")
```
### Dropdown Preferences
> [!attention]
> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your themes CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
> `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mods CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
>
> E.g. `theme.mytheme.background_color` becomes `theme-mytheme-background_color` in the CSS file.
> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
> This transformation ensures that the property can be used as an attribute selector or inside a media query.
For dropdown preferences, you can detect the selected value using the `:has(){:css}` CSS pseudo-class, which applies styles based on the selected attribute and value in the DOM.
@ -256,7 +256,7 @@ For example, if you have a preference to select the background color from a drop
```json
{
"property": "theme.mytheme.background_color",
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"options": [
@ -276,13 +276,13 @@ You can use the following CSS to change the background color based on the select
```css {2,8,14}
/* Green background */
body:has(#theme-mytheme[theme-mytheme-background_color="green"]) {
body:has(#mod-mymod[mod-mymod-background_color="green"]) {
background-color: #008000;
color: #000;
}
/* Blue background */
body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) {
body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
background-color: #0000ff;
color: #fff;
}
@ -290,7 +290,7 @@ body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) {
In this example:
- The background color and text color change based on the value selected in the `background_color` dropdown.
- The selector `body:has(#theme-mytheme[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option.
- The selector `body:has(#mod-mymod[background_color="value"]){:css}` checks the `background_color` attribute and applies the relevant styles based on the selected option.
---
@ -302,12 +302,12 @@ Suppose your `preferences.json` file includes these two preferences:
```json
[
{
"property": "theme.mytheme.enable_dark_mode",
"property": "mod.mymod.enable_dark_mode",
"label": "Enable dark mode",
"type": "checkbox"
},
{
"property": "theme.mytheme.background_color",
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "dropdown",
"options": [
@ -328,7 +328,7 @@ You can combine the CSS like this:
```css
/* Checkbox for dark mode */
@media (-moz-bool-pref: "theme.mytheme.enable_dark_mode") {
@media (-moz-bool-pref: "mod.mymod.enable_dark_mode") {
body {
background-color: #000;
color: #fff;
@ -336,12 +336,12 @@ You can combine the CSS like this:
}
/* Dropdown for background color selection */
body:has(#theme-mytheme[theme-mytheme-background_color="green"]) {
body:has(#mod-mymod[mod-mymod-background_color="green"]) {
background-color: #008000;
color: #000;
}
body:has(#theme-mytheme[theme-mytheme-background_color="blue"]) {
body:has(#mod-mymod[mod-mymod-background_color="blue"]) {
background-color: #0000ff;
color: #fff;
}
@ -358,16 +358,16 @@ This allows users to:
String preferences can be detected in your CSS using the `var(--property)` operator. The preference property is saved at `:root` level.
> [!attention]
> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your themes CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
> `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mods CSS: **dots (`.`) in the `property` name are replaced with hyphens (`-`)**.
>
> E.g. `theme.mytheme.background_color` becomes `theme-mytheme-background_color` in the CSS file.
> E.g. `mod.mymod.background_color` becomes `mod-mymod-background_color` in the CSS file.
> This transformation ensures that the property can be used as an attribute selector or inside a media query.
For example, if you have a preference to enable dark mode in your theme:
For example, if you have a preference to enable dark mode in your mod:
```json
{
"property": "theme.mytheme.background_color",
"property": "mod.mymod.background_color",
"label": "Background color",
"type": "string"
}
@ -377,6 +377,6 @@ You can use the following CSS to change the background color when the dark mode
```css {2}
.myClass {
background-color: var(--theme-mytheme-background_color)
background-color: var(--mod-mymod-background_color)
}
```

View file

@ -1,33 +1,33 @@
---
title: Themes Store Submission Guidelines 📋
lastmod: 2024-08-19
title: Mods Registry Submission Guidelines 📋
lastmod: 2025-02-07
---
If you are a theme developer and would like to submit your theme, please follow these guidelines:
If you are a [mod developer] and would like to submit your mod, please follow these guidelines:
1. **Theme requirements**:
- Your theme must be compatible with Zen Browser.
- Your theme must be open-source.
- Your theme must not contain any malicious code.
- Your theme must not violate any copyright laws.
1. **Mod requirements**:
- Your mod must be compatible with Zen Browser.
- Your mod must be open-source.
- Your mod must not contain any malicious code.
- Your mod must not violate any copyright laws.
2. **Theme Validation**:
- Your theme's name must be unique and less than `25` characters.
- Your theme's description must be less than `100` characters.
- Your theme's screenshot must be a `PNG` with a size of `300x200` (it can be resized after upload).
- Your theme must contain a valid `README` describing the theme and how to use it.
- If your theme has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
2. **Mod Validation**:
- Your mod's name must be unique and less than `25` characters.
- Your mod's description must be less than `100` characters.
- Your mod's screenshot must be a `PNG` with a size of `300x200` (it can be resized after upload).
- Your mod must contain a valid `README` describing the mod and how to use it.
- If your mod has any preferences values, they must be set in the `preferences` text area as a `JSON` object.
- See how preferences work [here](themes-store/themes-marketplace-preferences.md).
3. **Theme Submission**:
- To submit your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
3. **Mod Submission**:
- To submit your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new?assignees=&labels=new-theme&projects=&template=create-theme.yml&title=%5Bcreate-theme%5D%3A+)
- Fill out the template with the required information.
- Once you have submitted your theme, it will be analyzed by a bot and a pull request will be created.
- If your theme is approved, it will be added to the Themes Marketplace.
- Once you have submitted your mod, it will be analyzed by a bot and a pull request will be created.
- If your mod is approved, it will be added to the Mods Registry.
4. **Theme Update**:
- If you would like to update your theme, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
4. **Mod Update**:
- If you would like to update your mod, please create an issue [here](https://github.com/zen-browser/theme-store/issues/new)
- Please explain the changes you have made.
> [!info]
> Themes are automatically updated and generated by the bot. If your theme is not approved, you will receive a message with the reason why it was not approved.
> Mods are automatically updated and generated by the bot. If your mod is not approved, you will receive a message with the reason why it was not approved.

View file

@ -1,16 +1,16 @@
---
title: Information about Themes Store
lastmod: 2024-09-19
title: Information about Mods Registry
lastmod: 2025-02-07
---
The Themes Store is a place where you can find and install themes for Zen Browser.
The Mods Registry is a place where you can find and install mods for Zen Browser.
## How to install a theme
## How to install a mod
1. Open Zen Browser.
2. Click on the theme you would like to install on the [Themes Store](https://www.zen-browser.app/themes).
2. Click on the mod you would like to install on the [Mods Registry](https://www.zen-browser.app/mods).
3. Click on the "Install" button.
## For theme developers
## For mod developers
If you are a theme developer and would like to submit your theme, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page.
If you are a mod developer and would like to submit your mod, please follow the instructions on the [Submission Guidelines](themes-store/themes-marketplace-submission-guidelines.md) page.

View file

@ -0,0 +1,25 @@
---
title: Zen URL bar
aliases:
- URL bar
---
<div align="center">
<video width="100%" loop autoplay>
<source src="/assets/user-manual/urlbar/vid.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
## Zen URL bar
Zen Browsers **URL bar** is a powerful tool that helps you navigate the web quickly and efficiently. There's no need to open a new tab or window to search the web—simply type your query into the URL bar and hit Enter to search. The URL bar also supports direct navigation to websites, so you can type a URL and press Enter to visit the site directly.
* Can be disabled in settings or `about:config` (`zen.urlbar.replace-newtab`)
### How does it work?
* When trying to open a new tab, the search bar will appear. This allows you to navigate faster and more efficiently by being able to type out the address or getting auto-completed without having a change in the view.
* If the newtab urlbar is closed but you've typed something. The text is remembered unless the URL or tab has been changed.
* Otherwise, the functionality is basically the same as before, only when focusing the urlbar either by clicking on with the shortcut

View file

@ -1,54 +0,0 @@
---
title: Welcome to Zen!
aliases:
- Welcome ✨
description: Welcome to zen, this is a quick guide of common features people commonly miss out!
lastmod: 2024-12-18
---
# Welcome to Zen!
If you've recently updated Zen after a significant version jump, I recommend creating a new profile. You can do this by clicking the button in the bottom-left corner and selecting the option to create a new profile.
## Cool New Improvements in Zen:
## Better Themes:
<div align="center">
<img src="/assets/welcome/image.png" />
</div>
You can change the gradient by right-clicking on the sidebar and clicking ”Change Theme Colors.” You can also add custom colors via hex codes or other color formats.
[Zen Gradients](https://youtu.be/a3p7tWeK4io)
## Zen Glance:
<div align="center">
<img src="/assets/welcome/image 1.png" />
</div>
This opens links in a mini tab (this can be especially useful because you can open bookmarks from the top bar in Glance). If you want to swap the modifier key used to activate Glance you can go to settings under “Look and Feel”.
## New Tab Organization:
<div align="center">
<img src="/assets/welcome/image 4.png" />
</div>
There is now an option for the URL in the sidebar (We also made this work with Windows even). Tabs are now organized into 3 categories.
- Essentials (the square ones at the top)
- Pinned (these are workspace specific)
- Normal tabs (parenthesis cuz symmetry)
## Split View:
<div align="center">
<img src="/assets/welcome/image 2.png" />
</div>
Split view now has options for resizing the splits as well as rearranging split view items. You can split more than 20 tabs in one split view at a time (this is insane but Arc limited me to 4 even on a widescreen).
<div align="center">
<img src="/assets/welcome/image 3.png" />
</div>