From 59abc3af4afff37b77d88ea3ba03f811b82ffce0 Mon Sep 17 00:00:00 2001 From: e10withadot <91983480+e10withadot@users.noreply.github.com> Date: Wed, 21 May 2025 19:19:21 +0300 Subject: [PATCH 1/3] added a list of relevant about:config flags to the Guides section (#188) * added about:config-flags.mdx to the guide * reformatted to work --- content/docs/guides/about-config-flags.mdx | 151 +++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 content/docs/guides/about-config-flags.mdx diff --git a/content/docs/guides/about-config-flags.mdx b/content/docs/guides/about-config-flags.mdx new file mode 100644 index 0000000..08b7780 --- /dev/null +++ b/content/docs/guides/about-config-flags.mdx @@ -0,0 +1,151 @@ +--- +title: List of Hidden/Advanced Preferences +description: A list of useful flags in Zen Browser's Advanced Preferences page (about:config). +--- +These are a variety of settings that can change Zen's appearance, behavior, and more. To access them, go to `about:config` in Zen Browser, and search for the title of the flag. Some of these flags may require a restart to work. + +### Appearance +#### `zen.theme.content-element-separation` +Changes the size of the border around the browser window. 8 by default. +#### `zen.theme.accent-color` +The color hex value of Zen's main accent color. +#### `zen.theme.essentials-favicon-bg` +Enables a colorful icon for when an essential tab is selected, based on the website's favicon. Enabled by default. +#### `zen.theme.gradient` +Allows setting custom sidebar colors. Enabled by default. +#### `zen.theme.gradient.show-custom-colors` +Allows setting a color hex as your sidebar color. Disabled by default. +#### `zen.view.experimental-rounded-view` +??? Disabled by default. +#### `zen.view.gray-out-inactive-windows` +If a window is inactive, the theme color fades to gray. Enabled by default. +#### `zen.watermark.enabled` +Shows a splash screen briefly when Zen is opened. Enabled by default. + +### Transparency & Blur +#### `zen.theme.acrylic-elements` +Windows-specific. Allows use of Windows' Acrylic protocol for a blur effect in Zen. Enabled by default on Windows. +#### `zen.widget.linux.transparency` +Linux-specific. Makes the browser UI transparent. +#### `browser.tabs.allow_transparent_browser` +Changes the default website background to your theme color. Disabled by default. + +Enabling could break the way certain websites look. + + +### Tabs +#### `zen.tab-unloader.excluded-urls` +A comma-separated list of URLs exempt from being unloaded. +#### `zen.tabs.dim-pending` +Dims unloaded tabs. Enabled by default. +#### `zen.tabs.rename-tabs` +Allows renaming pinned tabs. Enabled by default. +#### `zen.ctrlTab.show-pending-tabs` +Allow switching to unloaded tabs using Ctrl+Tab, when "Ctrl+Tab cycles through tabs in recently used order" is enabled. Disabled by default. +#### `zen.startup.smooth-scroll-in-tabs` +Turns on smooth scrolling when scrolling through tabs. Enabled by default. +#### `toolkit.tabbox.switchByScrolling` +Allows to switch tabs by scrolling when hovering over tabs. Disabled by default. + +### New Tabs +#### `zen.urlbar.replace-newtab` +Replaces opening a new tab, with instead showing the URL bar and allowing you to input a query which will then open a new tab. Enabled by default. +#### `zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed` +Opens a new tab when all pinned tabs are unloaded, and all tabs are closed. Disabled by default. + +### URL Bar +#### `zen.urlbar.hide-one-offs` +Hides the alternative search engines from appearing in the URL bar. Enabled by default. +#### `zen.urlbar.show-domain-only-in-sidebar` +When Single Toolbar is enabled, shows only the website domain(ex: example.com) instead of the full URL(ex: example.com\/page). Enabled by default. +#### `zen.urlbar.show-protections-icon` +Shows the "protections" icon in the URL bar, which details security information about the current website. Disabled by default. +#### `zen.urlbar.wait-to-clear` +How long the URL bar saves what you typed, if you typed something in and unfocused it in milliseconds. 45000 by default. + +### Sidebar +#### `zen.view.sidebar-collapsed.hide-mute-button` +Hides the mute button in Collapsed Toolbar mode. +#### `zen.view.sidebar-expanded.max-width` +Controls the width of the sidebar in Single Toolbar or Multiple Toolbars mode. +#### `zen.view.sidebar-height-throttle` +??? 200 by default. + +### Window Controls +#### `zen.view.hide-window-controls` +Hides the window controls. Enabled by default. + +In Single Toolbar mode, this hides the toolbar, which can then be revealed on hover. + +#### `zen.view.experimental-force-window-controls-left` +Forces the window controls to appear on the left side of the window. Disabled by default. + +If the sidebar is in the left side, it will appear in it. + +#### `zen.view.experimental-no-window-controls` +Removes the window controls entirely. Disabled by default. + +This will disable the toolbar in Single Toolbar mode. + + +### Workspaces +#### `zen.workspaces.swipe-actions` +Allows swiping with the trackpad on the sidebar to switch workspaces. Enabled by default. +#### `zen.workspaces.wrap-around-navigation` +When swiping through tabs, allow going to the last workspace from the first workspace by swiping left, or vice versa. Enabled by default. +#### `zen.workspaces.natural-scroll` +Turns on natural scrolling for swiping through workspaces. Disabled by default. +#### `zen.workspaces.scroll-modifier-key` +Controls the hotkey that enables hovering over the sidebar and switching workspaces by scrolling. Options are 'ctrl', 'alt', 'shift'. Default is 'ctrl'. + +### Compact mode +#### `zen.view.compact.animate-sidebar` +Animates the webpage moving in/out when compact mode is enabled/disabled. Enabled by default. +#### `zen.view.compact.color-sidebar` +Colors the sidebar with your custom theme color during compact mode. Enabled by default. +#### `zen.view.compact.color-toolbar` +Colors the toolbar with your custom theme color during compact mode. Enabled by default. +#### `zen.view.show-background-tab-toast` +Shows a toast when a tab is open while compact mode is enabled. Enabled by default. +#### `zen.view.compact.show-sidebar-and-toolbar-on-hover` +Shows the sidebar/toolbar if you hover in their general area during compact mode. Enabled by default. +#### `zen.view.compact.toolbar-flash-popup` +Shows the sidebar for a moment when opening a new tab during compact mode. Disabled by default. + +`zen.view.compact.toolbar-flash-popup.duration` controls the duration in milliseconds. 800 by default. + +#### `zen.view.compact.toolbar-hide-after-hover.duration` +Controls the duration until which the toolbar/sidebar hides after you stopped hovering over it in compact mode. 1000 by default. + +### Split View +#### `zen.splitView.enable-tab-drop` +When enabled, dropping a tab from the sidebar to the current webpage starts split view. Enabled by default. +#### `zen.splitView.min-resize-width` +The minimum width or height of any split view tab. The number represents the percentage of the screen taken up by the tab. 7 by default. +#### `zen.splitView.rearrange-hover-size` +??? 24 by default. + +### Media +#### `zen.mediacontrols.enabled` +Shows a media player interface if audio is playing in another tab, or a conference call interface if you're in a conference call. Enabled by default. +#### `media.videocontrols.picture-in-picture.enabled` +Allows picture-in-picture. Enabled by default. +#### `media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled` +Automatically turns on picture-in-picture when switching tabs during video playback. Disabled by default. + +### Other +#### `zen.keyboard.shortcuts.enabled` +Allows changing keyboard shortcuts. Enabled by default. +#### `zen.glance.open-essential-external-links` +When enabled, external links that are opened inside an essential tab will open in Glance. Enabled by default. +#### `browser.toolbars.bookmarks.visibility` +Controls when the bookmarks toolbar is shown. Options are 'always', 'newtab', 'never'. Default is 'never'. +#### `zen.downloads.download-animation` +When enabled, plays an animation when a download begins. Enabled by default. + +`zen.downloads.download-animation-duration` controls the duration in miliseconds. 1000 by default. + +#### `zen.haptic-feedback.enabled` +macOS-specific. Triggers haptic feedback on the trackpad's vibration motor when you drag tabs around, or change the texture in the Change Theme Colors pop-up. Enabled by default. +#### `zen.browser.is-cool` +This is true. From 96037b562524ec142bf68511cc7c59983d9b0145 Mon Sep 17 00:00:00 2001 From: Jonas List Date: Wed, 21 May 2025 18:31:19 +0200 Subject: [PATCH 2/3] Added KeyboardShortcut component for consistent key display (#190) * Updated user manual and themes marketplace documentation * Added KeyboardShortcut component for consistent key display * Removed unnecessary state for isMac --- components/KeyboardShortcut.tsx | 62 +++++++++++++++++++ .../contribute/docs/editing-with-vscode.mdx | 3 +- content/docs/faq.mdx | 4 +- content/docs/guides/live-editing.mdx | 5 +- .../themes-marketplace-preferences.mdx | 4 +- content/docs/user-manual/bookmarks.mdx | 9 +-- content/docs/user-manual/compact-mode.mdx | 7 ++- content/docs/user-manual/extensions.mdx | 3 +- content/docs/user-manual/glance.mdx | 5 +- content/docs/user-manual/pip.mdx | 28 +++++---- content/docs/user-manual/split-view.mdx | 9 +-- content/docs/user-manual/urlbar.mdx | 5 +- tsconfig.json | 3 + 13 files changed, 111 insertions(+), 36 deletions(-) create mode 100644 components/KeyboardShortcut.tsx diff --git a/components/KeyboardShortcut.tsx b/components/KeyboardShortcut.tsx new file mode 100644 index 0000000..4c0cd6c --- /dev/null +++ b/components/KeyboardShortcut.tsx @@ -0,0 +1,62 @@ +"use client"; + +import React, { useEffect, useState } from "react"; + +interface KeyboardShortcutProps { + shortcut: string; + macosShortcut?: string; + className?: string; +} + +const KeyboardShortcut: React.FC = ({ + shortcut, + macosShortcut, + className, +}) => { + const [displayShortcut, setDisplayShortcut] = useState(shortcut); + + useEffect(() => { + // OS detection should run only on the client-side + const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0; + + if (isMacUser) { + if (macosShortcut) { + setDisplayShortcut(macosShortcut); + } else { + // Convert common Windows/Linux keys to macOS equivalents + let convertedShortcut = shortcut; + convertedShortcut = convertedShortcut.replace(/Ctrl\s*\+\s*/gi, "⌘ + "); + convertedShortcut = convertedShortcut.replace(/Alt\s*\+\s*/gi, "⌥ + "); + convertedShortcut = convertedShortcut.replace(/Cmd\s*\+\s*/gi, "⌘ + "); // In case Cmd was used in the base shortcut + convertedShortcut = convertedShortcut.replace( + /Option\s*\+\s*/gi, + "⌥ + " + ); // In case Option was used + // Replace individual keys if not part of a combo already handled + convertedShortcut = convertedShortcut.replace(/(? + {keys.map((key, index) => ( + + + {key.toLowerCase() === "shift" ? "⇧" : key} + + {index < keys.length - 1 && +} + + ))} + + ); +}; + +export default KeyboardShortcut; diff --git a/content/docs/contribute/docs/editing-with-vscode.mdx b/content/docs/contribute/docs/editing-with-vscode.mdx index 1a1225f..caedf68 100644 --- a/content/docs/contribute/docs/editing-with-vscode.mdx +++ b/content/docs/contribute/docs/editing-with-vscode.mdx @@ -2,6 +2,7 @@ title: Editing with VS Code description: How to use Visual Studio Code to contribute to the Zen Browser documentation. --- +import KeyboardShortcut from '@components/KeyboardShortcut'; Visual Studio Code (VS Code) is a popular and powerful code editor that works well for editing Zen Browser documentation, especially with the right extensions. @@ -27,7 +28,7 @@ To get the best experience editing `.mdx` files in VS Code, we recommend install ### Installation 1. Open VS Code. -2. Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window or by pressing `Ctrl+Shift+X` (Windows/Linux) or `Cmd+Shift+X` (macOS). +2. Go to the Extensions view by clicking the Extensions icon in the Activity Bar on the side of the window or by pressing . 3. Search for `mdx`. 4. Click **Install** on the MDX extension by unifiedjs. diff --git a/content/docs/faq.mdx b/content/docs/faq.mdx index 45c187a..8316719 100644 --- a/content/docs/faq.mdx +++ b/content/docs/faq.mdx @@ -2,7 +2,7 @@ title: FAQ icon: CircleHelp --- - +import KeyboardShortcut from '@components/KeyboardShortcut'; import { Callout } from 'fumadocs-ui/components/callout'; import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; @@ -70,7 +70,7 @@ Your support helps the team maintain and enhance Zen Browser for everyone! Use shortcuts to perform Split View actions faster! -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 +1. Select multiple tabs by left-clicking them while holding the key, or left-click 2 tabs while holding the 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 diff --git a/content/docs/guides/live-editing.mdx b/content/docs/guides/live-editing.mdx index 781e654..9dfc2d9 100644 --- a/content/docs/guides/live-editing.mdx +++ b/content/docs/guides/live-editing.mdx @@ -2,6 +2,7 @@ title: Live Editing Zen Theme description: Learn how to live edit the appearance of Zen Browser by editing the userChrome.css file. --- +import KeyboardShortcut from '@components/KeyboardShortcut'; import { Callout } from 'fumadocs-ui/components/callout'; @@ -34,7 +35,7 @@ This Guide will help you customize the appearance of Zen Browser by live editing 3. Search for `devtools.chrome.enabled` and toggle it to `true`. -1. In Zen Browser, press `Ctrl + Shift + Alt + I` to open the Developer Tools. +1. In Zen Browser, press to open the Developer Tools. 2. Navigate to the **Style Editor** tab. 3. In the filter/search bar, type `userChrome` to locate the `userChrome.css` file you created earlier. @@ -52,7 +53,7 @@ This Guide will help you customize the appearance of Zen Browser by live editing 2. You can start editing the file directly within the Style Editor. ![inspect button](/assets/live-editing/inspect.png) - **Note:** You can use the **Inspect** button to hover over and select elements on the page. This allows you to learn about the `id`, `class`, or other attributes of elements, which you can then target in your `userChrome.css` file. -3. To apply your changes, save the file by clicking **Save** or by pressing `Ctrl + S`. +3. To apply your changes, save the file by clicking **Save** or by pressing . Any changes you make to the `userChrome.css` file will be applied immediately to Zen Browser. Use this file to customize various UI elements, such as colors, fonts, and the layout. diff --git a/content/docs/themes-store/themes-marketplace-preferences.mdx b/content/docs/themes-store/themes-marketplace-preferences.mdx index f18f7e9..35c03ff 100644 --- a/content/docs/themes-store/themes-marketplace-preferences.mdx +++ b/content/docs/themes-store/themes-marketplace-preferences.mdx @@ -244,7 +244,7 @@ You can also have negative conditions `property` fields defined in `preferences.json` using the `"dropdown"` type will have one key difference when used in your mod's CSS: dots (`.`) in the `property` name are replaced with hyphens (`-`). -

+ 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. @@ -358,7 +358,7 @@ String preferences can be detected in your CSS using the `var(--property)` opera `property` fields defined in `preferences.json` using the `"string"` type will have one key difference when used in your mod's CSS: dots (`.`) in the `property` name are replaced with hyphens (`-`). -

+ 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. diff --git a/content/docs/user-manual/bookmarks.mdx b/content/docs/user-manual/bookmarks.mdx index a068833..65d175d 100644 --- a/content/docs/user-manual/bookmarks.mdx +++ b/content/docs/user-manual/bookmarks.mdx @@ -3,6 +3,7 @@ title: Bookmarks description: Managing bookmarks in Zen --- import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; +import KeyboardShortcut from '@components/KeyboardShortcut'; Zen, as a fork of Firefox, inherits its webpage bookmarking system primarily from Firefox itself, with some additional Zen enhancements. Zen offers two vertical tab layouts: **Single toolbar layout**, which integrates a compact address bar into the vertical tabs toolbar, and **Multiple toolbars layout**, featuring a traditional, full-size address bar in a separate horizontal toolbar. This guide covers the basics of creating and managing bookmarks, tailored to your chosen Zen layout. @@ -29,7 +30,7 @@ To bookmark a page, find and click on the bookmark icon in the address bar. A po - While you could use your mouse to click the bookmark icon, we recommend using the keyboard shortcut `Ctrl/Cmd + D` for bookmarking, especially in **Single toolbar layout**. + While you could use your mouse to click the bookmark icon, we recommend using the keyboard shortcut for bookmarking, especially in **Single toolbar layout**. Alternatively, you can bookmark a single tab by right-clicking it and selecting `"Bookmark Tab..."` from the context menu, which opens a detailed bookmarking dialog with options for *tagging* and *keywords*. @@ -47,7 +48,7 @@ You can find your recently added bookmarks through Zen's application menu. Click ### Bookmarks Toolbar and Bookmarks Menu Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) for bookmarks: -- **Bookmarks Toolbar**: This can be considered a public location for bookmarks, displayed in the browser's [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome). You typically find it beneath the main browser toolbar, which is featured in **Multiple toolbars layout** in Zen, while in **Single toolbar layout**, hovering your cursor to the top edge will display the hidden Bookmarks Toolbar, next to your window controls. To toggle the visibility of your Bookmarks Toolbar, use the shortcut `Ctrl/Cmd + Shift + B` +- **Bookmarks Toolbar**: This can be considered a public location for bookmarks, displayed in the browser's [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome). You typically find it beneath the main browser toolbar, which is featured in **Multiple toolbars layout** in Zen, while in **Single toolbar layout**, hovering your cursor to the top edge will display the hidden Bookmarks Toolbar, next to your window controls. To toggle the visibility of your Bookmarks Toolbar, use the shortcut {/* TODO: *insert video* */} ![Bookmarks Toolbar](/assets/user-manual/bookmarks/bookmarks-toolbar.png) @@ -64,14 +65,14 @@ Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) fo ### Bookmarks Sidebar -Your bookmarks are also available via what is known as the [Firefox Sidebar](https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced). The Sidebar can be opened by adding a Sidebar button to your controls, or preferably by using the shortcut `Ctr/Cmd + B` to open the Bookmarks Sidebar. You can find all of your bookmarks here including entries from both Bookmarks Toolbar and Bookmarks Menu, in the form of a tree structure explorer with access to a searching function at the top. +Your bookmarks are also available via what is known as the [Firefox Sidebar](https://support.mozilla.org/kb/use-firefox-sidebar-access-bookmarks-history-synced). The Sidebar can be opened by adding a Sidebar button to your controls, or preferably by using the shortcut to open the Bookmarks Sidebar. You can find all of your bookmarks here including entries from both Bookmarks Toolbar and Bookmarks Menu, in the form of a tree structure explorer with access to a searching function at the top. {/* TODO: *insert video/image* */} ![Bookmarks Sidebar](/assets/user-manual/bookmarks/bookmarks-sidebar.png) ### Bookmarks Library -The Firefox Library is a unified manager for Bookmarks, History, and Downloads. You can access the Library by the shortcut `Ctrl/Cmd + Shift + O` or from the application menu `"Bookmarks"`>`"Manage bookmarks"`. While most of its functions here have already been offered via the Bookmarks Sidebar, the Library is important for your purpose of Importing and Backing up Zen's bookmarks. +The Firefox Library is a unified manager for Bookmarks, History, and Downloads. You can access the Library by the shortcut or from the application menu `"Bookmarks"`>`"Manage bookmarks"`. While most of its functions here have already been offered via the Bookmarks Sidebar, the Library is important for your purpose of Importing and Backing up Zen's bookmarks. ![Bookmarks Library](/assets/user-manual/bookmarks/bookmarks-library.png) diff --git a/content/docs/user-manual/compact-mode.mdx b/content/docs/user-manual/compact-mode.mdx index 897e2f6..dbe241c 100644 --- a/content/docs/user-manual/compact-mode.mdx +++ b/content/docs/user-manual/compact-mode.mdx @@ -2,10 +2,11 @@ title: Compact Mode description: Minimalistic interface for focused browsing --- +import KeyboardShortcut from '@components/KeyboardShortcut'; Compact Mode is one of Zen's main feature that let you hide all browser toolbars and give wider view for the website you're currently visit. -You can activate this feature by right click on empty area on the `toolbar > "Compact Mode" > "Enable compact mode"`, or use `Alt + Ctrl/Cmd + C` keyboard shortcut. +You can activate this feature by right click on empty area on the `toolbar > "Compact Mode" > "Enable compact mode"`, or use keyboard shortcut. {
@@ -28,8 +29,8 @@ In Multiple Toolbar or Collapsed Toolbar mode, you can choose which bar to hide. You can also use these extra shortcuts to show the hidden bars, suitable for heavy keyboard users. Unlike usual hovering gesture, showing sidebar/toolbar using these shortcuts is done persistently, until you pressed the shortcut again to hide it. -- **Toggle Floating Sidebar**: `Alt + Ctrl/Cmd + S` - Show the tab sidebar for all toolbar modes -- **Toggle Floating Toolbar**: `Alt + Ctrl/Cmd + W` - Show the top toolbar for Multiple & Collapsed Toolbar mode +- **Toggle Floating Sidebar**: - Show the tab sidebar for all toolbar modes +- **Toggle Floating Toolbar**: - Show the top toolbar for Multiple & Collapsed Toolbar mode _All shortcuts can be modified via `Settings > Keyboard Shortcuts`._ diff --git a/content/docs/user-manual/extensions.mdx b/content/docs/user-manual/extensions.mdx index d0ed7a2..0ef0fff 100644 --- a/content/docs/user-manual/extensions.mdx +++ b/content/docs/user-manual/extensions.mdx @@ -2,6 +2,7 @@ title: Extensions description: Get to know how extensions work in Zen --- +import KeyboardShortcut from '@components/KeyboardShortcut'; Extensions are a small software piece that enhance and personalize a browser by adding or modifying browser function and features. Example of commonly installed extensions includes ad blockers, easy reader mode, privacy and tracking managers, media downloaders, password managers, and tweaks for commonly used websites. @@ -25,7 +26,7 @@ If you haven't installed any extensions yet, clicking the Extensions button will Add-Ons Manager is a page that primarily let you see extension details, manage its preferences, assign shortcuts, disable and remove extensions. You can access Add-Ons Manager by: - Open the extension button > Click `Manage extensions`. - Open the main menu > Click "Add-ons and themes". -- Press the default keyboard shortcut `Ctrl/Cmd + Shift + A`. +- Press the default keyboard shortcut . Select "Extensions" and you can see the list of your installed extensions. You can click on each extensions name to expand the details, or click toggle in each extensions to disable or enable it. diff --git a/content/docs/user-manual/glance.mdx b/content/docs/user-manual/glance.mdx index 14cbd1c..6325576 100644 --- a/content/docs/user-manual/glance.mdx +++ b/content/docs/user-manual/glance.mdx @@ -2,8 +2,9 @@ title: Glance description: Preview websites on top of your current tab --- +import KeyboardShortcut from '@components/KeyboardShortcut'; -Zen's Glance lets you preview websites on top of your current tab, without fully switching to it. By default, you can create a Glance view by holding `Alt` as trigger key when clicking a link in a regular tab. In Essentials and pinned tabs, Glance will be automatically created when clicking a link outside current website, without having to pressing the trigger key. +Zen's Glance lets you preview websites on top of your current tab, without fully switching to it. By default, you can create a Glance view by holding as trigger key when clicking a link in a regular tab. In Essentials and pinned tabs, Glance will be automatically created when clicking a link outside current website, without having to pressing the trigger key. {
@@ -20,6 +21,6 @@ Once Glance appeared, there's three buttons on its top left side: - Expand button to move the website into a new tab. - Split button to add the website as a split tab. -You can disable/enable Glance and change the trigger method (from `Alt + Click` to `Ctrl + Click` or `Shift + Click`) by opening `Settings` > `Look and Feel` > `Glance`. +You can disable/enable Glance and change the trigger method (from to or ) by opening `Settings` > `Look and Feel` > `Glance`. With Glance, you can take a quick look of websites, move on if you're done with the site, and go back to your previous surfing activities easily. diff --git a/content/docs/user-manual/pip.mdx b/content/docs/user-manual/pip.mdx index c43c882..759e071 100644 --- a/content/docs/user-manual/pip.mdx +++ b/content/docs/user-manual/pip.mdx @@ -2,6 +2,7 @@ title: Picture-in-Picture description: Watch videos in a separate window --- +import KeyboardShortcut from '@components/KeyboardShortcut'; With **Picture-in-Picture (PiP)** in **Zen**, you can pop videos out of webpages into a clean, always-on-top floating window. Whether you're working, browsing, or just casually scrolling, PiP keeps your video visible without disrupting your flow. @@ -30,7 +31,7 @@ On pages with a single video, Zen displays a PiP icon in the **address bar**. You can also launch PiP by **right-clicking** on the video. - Some platforms like YouTube use custom menus. - In that case, use **Shift + Right-Click** or **double right-click** to access Zen’s native menu. + In that case, use or **double right-click** to access Zen’s native menu. ![PIP context menu](/assets/user-manual/pip/pip-context-menu.png) @@ -45,17 +46,17 @@ Enable it by setting the property below in about:config to TRUE ## Keyboard Shortcuts -| Action | Shortcut | -|------------------------------|-----------------------------| -| Launch/Close PiP | `Ctrl + Shift + ]` | -| Mute / Unmute | `Ctrl + ↓ / Ctrl + ↑` | -| Volume Control | `↑ / ↓` | -| Seek 5s Back / Forward | `← / →` | -| Seek 10% Back / Forward | `Ctrl + ← / Ctrl + →` | -| Jump to Start / End | `Home / End` | -| Pause / Play | `Space` | -| Fullscreen Toggle | `Double-click` or `F` | -| Close PiP Window | `Ctrl + W` | +| Action | Shortcut | +|------------------------------|-------------------------------------------------------------------------------------------| +| Launch/Close PiP | | +| Mute / Unmute | / | +| Volume Control | / | +| Seek 5s Back / Forward | / | +| Seek 10% Back / Forward | / | +| Jump to Start / End | / | +| Pause / Play | | +| Fullscreen Toggle | or | +| Close PiP Window | | ## How to Disable Picture-in-Picture @@ -138,4 +139,5 @@ More platforms are being added. - **Simple Dismissal** To hide the Media Player, just click the “X” on the controller. Zen will take the hint. -{/* TODO: enter video */} \ No newline at end of file +{/* TODO: enter video */} + diff --git a/content/docs/user-manual/split-view.mdx b/content/docs/user-manual/split-view.mdx index 3290172..c9790a2 100644 --- a/content/docs/user-manual/split-view.mdx +++ b/content/docs/user-manual/split-view.mdx @@ -2,6 +2,7 @@ title: Split View description: Open multiple tabs side by side easily --- +import KeyboardShortcut from '../../../components/KeyboardShortcut'; Zen's Split View lets you view up to 4 tabs side by side, so you can compare information or multitask easily. @@ -25,15 +26,15 @@ When split view is enabled, the active tab will have an overlay on its top side, - With **Drag Handle** `:::` button, you can move a split tab to various directions (left, bottom, right, or top side of another tabs). - Meanwhile, clicking **Unsplit Tab** `‒` button will remove the tab and expand it outside the previous split view. -- Currently, you can **unsplit all tabs within a split view** by pressing `Alt + Ctrl/Cmd + U` shortcut. +- Currently, you can **unsplit all tabs within a split view** by pressing shortcut. ### Toggle Split View shortcuts Zen also provide keyboard shortcuts to help you rearrange the split tabs automatically into a horizontal, vertical, or grid layout. -- **Toggle Split View Horizontal**: `Alt + Ctrl/Cmd + H` -- **Toggle Split View Vertical**: `Alt + Ctrl/Cmd + V` -- **Toggle Split View Grid**: `Alt + Ctrl/Cmd + G` +- **Toggle Split View Horizontal**: +- **Toggle Split View Vertical**: +- **Toggle Split View Grid**: { /* TODO: insert gif/video of horizontal, vertical, and grid toggling split view here */} diff --git a/content/docs/user-manual/urlbar.mdx b/content/docs/user-manual/urlbar.mdx index 2f193fa..28df2ce 100644 --- a/content/docs/user-manual/urlbar.mdx +++ b/content/docs/user-manual/urlbar.mdx @@ -2,6 +2,7 @@ title: URL Bar & Search Functions description: Smart navigation with persistent input memory --- +import KeyboardShortcut from '@components/KeyboardShortcut'; Different from most browsers, Zen uses the **URL bar** as a quick and efficient way to navigate the web, eliminating the need for a dedicated new tab page. @@ -23,13 +24,13 @@ If you close the URL bar after typing a URL or search query, the text will still ### Toggle floating behavior of the URL bar Zen has several floating behaviors for its URL bar, which can be changed in `Settings` > `Look and Feel` > `Zen URL Bar`: -- **Floating only when typing** (Default) – The URL bar will float in the center when you access it from the New Tab button or the `Ctrl + L`/ keyboard shortcut. But, if you open the URL bar by clicking, it will stick to its regular position at the top. +- **Floating only when typing** (Default) – The URL bar will float in the center when you access it from the New Tab button or the keyboard shortcut. But, if you open the URL bar by clicking, it will stick to its regular position at the top. - **Always floating** – The URL bar will always float in the center, both from clicking directly, New Tab button, and keyboard shortcuts. - **Normal** – The position of the opened URL bar will always be attached to the top, whether accessed by clicking directly, using the New Tab button, or via keyboard shortcuts. ### Setting default search engine -By default, Zen provides **Google**, **DuckDuckGo**, and **Wikipedia** (English) as default search engine providers. You can choose between Google and DuckDuckGo in the onboarding process after installing Zen. +By default, Zen provides **Google**, **DuckDuckGo**, and **Wikipedia** (English) as default search engine providers. You can choose between Google, DuckDuckGo and *[Ecosia*](https://blog.ecosia.org/ecosia-firefox-switch/)* in the onboarding process after installing Zen. ![Default search engines during onboarding](/assets/user-manual/urlbar/onboarding-search.png) diff --git a/tsconfig.json b/tsconfig.json index 504b291..8e51c0e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,6 +25,9 @@ ], "@/*": [ "./src/*" + ], + "@components/*": [ + "./components/*" ] }, "plugins": [ From 33799819ab4789fe912b5750a4135a22e8f32444 Mon Sep 17 00:00:00 2001 From: Jonas List Date: Wed, 21 May 2025 21:35:32 +0200 Subject: [PATCH 3/3] Moved KeyboardShortcut component to src directory (#191) --- content/docs/contribute/docs/editing-with-vscode.mdx | 2 +- content/docs/faq.mdx | 2 +- content/docs/guides/about-config-flags.mdx | 2 +- content/docs/guides/live-editing.mdx | 2 +- content/docs/user-manual/bookmarks.mdx | 2 +- content/docs/user-manual/compact-mode.mdx | 2 +- content/docs/user-manual/extensions.mdx | 2 +- content/docs/user-manual/glance.mdx | 2 +- content/docs/user-manual/pip.mdx | 2 +- content/docs/user-manual/split-view.mdx | 2 +- content/docs/user-manual/urlbar.mdx | 2 +- {components => src/components}/KeyboardShortcut.tsx | 0 tsconfig.json | 3 --- 13 files changed, 11 insertions(+), 14 deletions(-) rename {components => src/components}/KeyboardShortcut.tsx (100%) diff --git a/content/docs/contribute/docs/editing-with-vscode.mdx b/content/docs/contribute/docs/editing-with-vscode.mdx index caedf68..1b7fba6 100644 --- a/content/docs/contribute/docs/editing-with-vscode.mdx +++ b/content/docs/contribute/docs/editing-with-vscode.mdx @@ -2,7 +2,7 @@ title: Editing with VS Code description: How to use Visual Studio Code to contribute to the Zen Browser documentation. --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Visual Studio Code (VS Code) is a popular and powerful code editor that works well for editing Zen Browser documentation, especially with the right extensions. diff --git a/content/docs/faq.mdx b/content/docs/faq.mdx index 8316719..f89b39a 100644 --- a/content/docs/faq.mdx +++ b/content/docs/faq.mdx @@ -2,7 +2,7 @@ title: FAQ icon: CircleHelp --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; import { Callout } from 'fumadocs-ui/components/callout'; import { InlineTOC } from 'fumadocs-ui/components/inline-toc'; diff --git a/content/docs/guides/about-config-flags.mdx b/content/docs/guides/about-config-flags.mdx index 08b7780..518ae9d 100644 --- a/content/docs/guides/about-config-flags.mdx +++ b/content/docs/guides/about-config-flags.mdx @@ -1,5 +1,5 @@ --- -title: List of Hidden/Advanced Preferences +title: Hidden/Advanced Preferences description: A list of useful flags in Zen Browser's Advanced Preferences page (about:config). --- These are a variety of settings that can change Zen's appearance, behavior, and more. To access them, go to `about:config` in Zen Browser, and search for the title of the flag. Some of these flags may require a restart to work. diff --git a/content/docs/guides/live-editing.mdx b/content/docs/guides/live-editing.mdx index 9dfc2d9..d077705 100644 --- a/content/docs/guides/live-editing.mdx +++ b/content/docs/guides/live-editing.mdx @@ -2,7 +2,7 @@ title: Live Editing Zen Theme description: Learn how to live edit the appearance of Zen Browser by editing the userChrome.css file. --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; import { Callout } from 'fumadocs-ui/components/callout'; diff --git a/content/docs/user-manual/bookmarks.mdx b/content/docs/user-manual/bookmarks.mdx index 65d175d..187a878 100644 --- a/content/docs/user-manual/bookmarks.mdx +++ b/content/docs/user-manual/bookmarks.mdx @@ -3,7 +3,7 @@ title: Bookmarks description: Managing bookmarks in Zen --- import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Zen, as a fork of Firefox, inherits its webpage bookmarking system primarily from Firefox itself, with some additional Zen enhancements. Zen offers two vertical tab layouts: **Single toolbar layout**, which integrates a compact address bar into the vertical tabs toolbar, and **Multiple toolbars layout**, featuring a traditional, full-size address bar in a separate horizontal toolbar. This guide covers the basics of creating and managing bookmarks, tailored to your chosen Zen layout. diff --git a/content/docs/user-manual/compact-mode.mdx b/content/docs/user-manual/compact-mode.mdx index dbe241c..5cfa46c 100644 --- a/content/docs/user-manual/compact-mode.mdx +++ b/content/docs/user-manual/compact-mode.mdx @@ -2,7 +2,7 @@ title: Compact Mode description: Minimalistic interface for focused browsing --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Compact Mode is one of Zen's main feature that let you hide all browser toolbars and give wider view for the website you're currently visit. diff --git a/content/docs/user-manual/extensions.mdx b/content/docs/user-manual/extensions.mdx index 0ef0fff..41ad744 100644 --- a/content/docs/user-manual/extensions.mdx +++ b/content/docs/user-manual/extensions.mdx @@ -2,7 +2,7 @@ title: Extensions description: Get to know how extensions work in Zen --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Extensions are a small software piece that enhance and personalize a browser by adding or modifying browser function and features. Example of commonly installed extensions includes ad blockers, easy reader mode, privacy and tracking managers, media downloaders, password managers, and tweaks for commonly used websites. diff --git a/content/docs/user-manual/glance.mdx b/content/docs/user-manual/glance.mdx index 6325576..0984f2f 100644 --- a/content/docs/user-manual/glance.mdx +++ b/content/docs/user-manual/glance.mdx @@ -2,7 +2,7 @@ title: Glance description: Preview websites on top of your current tab --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Zen's Glance lets you preview websites on top of your current tab, without fully switching to it. By default, you can create a Glance view by holding as trigger key when clicking a link in a regular tab. In Essentials and pinned tabs, Glance will be automatically created when clicking a link outside current website, without having to pressing the trigger key. diff --git a/content/docs/user-manual/pip.mdx b/content/docs/user-manual/pip.mdx index 759e071..c0d2d8b 100644 --- a/content/docs/user-manual/pip.mdx +++ b/content/docs/user-manual/pip.mdx @@ -2,7 +2,7 @@ title: Picture-in-Picture description: Watch videos in a separate window --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; With **Picture-in-Picture (PiP)** in **Zen**, you can pop videos out of webpages into a clean, always-on-top floating window. Whether you're working, browsing, or just casually scrolling, PiP keeps your video visible without disrupting your flow. diff --git a/content/docs/user-manual/split-view.mdx b/content/docs/user-manual/split-view.mdx index c9790a2..7b1d10c 100644 --- a/content/docs/user-manual/split-view.mdx +++ b/content/docs/user-manual/split-view.mdx @@ -2,7 +2,7 @@ title: Split View description: Open multiple tabs side by side easily --- -import KeyboardShortcut from '../../../components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Zen's Split View lets you view up to 4 tabs side by side, so you can compare information or multitask easily. diff --git a/content/docs/user-manual/urlbar.mdx b/content/docs/user-manual/urlbar.mdx index 28df2ce..8a84589 100644 --- a/content/docs/user-manual/urlbar.mdx +++ b/content/docs/user-manual/urlbar.mdx @@ -2,7 +2,7 @@ title: URL Bar & Search Functions description: Smart navigation with persistent input memory --- -import KeyboardShortcut from '@components/KeyboardShortcut'; +import KeyboardShortcut from '@/components/KeyboardShortcut'; Different from most browsers, Zen uses the **URL bar** as a quick and efficient way to navigate the web, eliminating the need for a dedicated new tab page. diff --git a/components/KeyboardShortcut.tsx b/src/components/KeyboardShortcut.tsx similarity index 100% rename from components/KeyboardShortcut.tsx rename to src/components/KeyboardShortcut.tsx diff --git a/tsconfig.json b/tsconfig.json index 8e51c0e..504b291 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,9 +25,6 @@ ], "@/*": [ "./src/*" - ], - "@components/*": [ - "./components/*" ] }, "plugins": [