Added and updated images for bookmarks, split-view, and workspaces sections

This commit is contained in:
Jonas List 2025-04-16 22:09:16 +02:00
parent bc311a4ac7
commit d6ce0d1c42
15 changed files with 23 additions and 14 deletions

View file

@ -1,6 +1,7 @@
---
title: Bookmarks in Zen
---
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
Zen, as a fork of Firefox, inherits its webpage bookmarking system from the Gecko engine, with some of that extra Zen touch added on top. 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.
@ -8,21 +9,23 @@ Zen, as a fork of Firefox, inherits its webpage bookmarking system from the Geck
To bookmark a page, find and click on the bookmark icon in the address bar. A pop up dialog will allow you to name and move your bookmark.
{/* TODO: insert video of popup dialog */}
<Callout type="info" title="Tips:">
Did you know Zen offers Workspaces specific bookmarks?
</Callout>
In **Multiple toolbars layout**, you will find the bookmark icon exposed on the right of your address bar, while in **Single toolbar layout**, you must first expand your compact address bar by clicking on it then find the icon there.
{/* TODO: insert video of popup dialog */}
<Tabs groupId="toolbar" items={['Single Toolbar', 'Multiple Toolbars']} persist>
<Tab value="Single Toolbar">
In **Single toolbar layout**, you must first expand your compact address bar by clicking on it then find the icon there.
![Bookmark Popup](/assets/user-manual/bookmarks/bookmark-popup-single-toolbar.png)
</Tab>
<Tab value="Multiple Toolbars">
In **Multiple toolbars layout**, you will find the bookmark icon exposed on the right of your address bar.
![Bookmark Popup](/assets/user-manual/bookmarks/bookmark-popup-multiple-toolbars.png)
</Tab>
</Tabs>
{/* TODO: **Single toolbar layout**
*insert video*
**Multiple toolbars layout**
*insert video* */}
<Callout type="info" title="Tips:">
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**.
@ -42,6 +45,7 @@ Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) fo
- **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`
{/* TODO: *insert video* */}
![Bookmarks Toolbar](/assets/user-manual/bookmarks/bookmarks-toolbar.png)
<Callout type="info" title="Tips:">
If you want to fully hide the Bookmarks Toolbar, you can change these settings in `about:config`
@ -58,12 +62,13 @@ Taken from the default behavior of Gecko, Zen offers 3 locations (or, groups) fo
Your bookmarks are also avaialbe 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.
{/* TODO: *insert video/image* */}
![Bookmarks Sidebar](/assets/user-manual/bookmarks/bookmarks-sidebar.png)
### Bookmarks Library
The Firefox Library is a Bookmarks/History/Download Manager. You can access the Library by the shortcut `Ctrl/Cmd + Shift + O`. While you can manage your bookmarks here in the same fashion as the Sidebar with extra details, you should only open the Library for the purpose of Importing and Backing up Zen's data.
*insert library image*
![Bookmarks Library](/assets/user-manual/bookmarks/bookmarks-library.png)
<Callout>
_All shortcuts can be modified via `Settings > Keyboard Shortcuts`._

View file

@ -24,9 +24,7 @@ In Multiple Toolbar or Collapsed Toolbar mode, you can choose which bar to hide.
- **Hide toolbar**: Hide the top toolbar, accessible when hovering top edge of the browser.
- **Hide both**: Hide both top toolbar and tab sidebar.
<div align="center">
<img src="/assets/user-manual/compact-mode/enable-compact-mode.png" alt="Compact Mode" width="500" />
</div>
![Compact Mode](/assets/user-manual/compact-mode/enable-compact-mode.png)
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.

View file

@ -15,6 +15,8 @@ You can create split view simply by open one tab, drag another tab from sidebar
- click new tab button, insert url, load it, and drag it into the existing split.
- right click a link from one of the tabs > click "split link in new tab"
*/}
![Split ](/assets/user-manual/split-view/split-context-menu.png)
### Using split wiew
When split view is enabled, the active tab will have an overlay on its top side, containing two buttons: **Drag Handle** `:::` button and **Unsplit Tab** `` button.
@ -37,4 +39,6 @@ Zen also provide keyboard shortcuts to help you rearrange the split tabs automat
You can also press one of the Toggle Split View shortcuts to split current tab with the tab below it.
> All shortcuts can be modified via `Settings > Keyboard Shortcuts`.
<Callout>
All shortcuts can be modified via `Settings > Keyboard Shortcuts`.
</Callout>

View file

@ -15,6 +15,8 @@ Perfect for power users, workspaces bring the flexibility of multiple browser wi
### Container Tabs / Multi-Account Containers
Container Tabs is a feature derived from Firefox that provide separate cookie sessions within the same browser profile. With Container Tabs, you can log in with multiple accounts on the same sites without having to log out/in multiple times.
![Enable Container Tabs](/assets/user-manual/workspaces/enable-container-tabs.png)
By default, there are four containers provided by Firefox: **Personal**, **Work**, **Banking**, and **Shopping**. You can manage, remove, or add new containers from `"Settings" > "General" > "Container Tabs"`. You can choose between 9 colors and 13 icons to customize or create your own containers.
![Container Tabs](/assets/user-manual/workspaces/container-tabs.png)

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 641 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 348 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 638 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 KiB

After

Width:  |  Height:  |  Size: 639 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 754 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 719 KiB

After

Width:  |  Height:  |  Size: 839 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 326 KiB

After

Width:  |  Height:  |  Size: 598 KiB

Before After
Before After

Binary file not shown.

After

Width:  |  Height:  |  Size: 705 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 306 KiB

After

Width:  |  Height:  |  Size: 690 KiB

Before After
Before After