Added and updated images for bookmarks, split-view, and workspaces sections (#163)
* Added and updated images for bookmarks, split-view, and workspaces sections * Update documentation index with new icons and card descriptions
|
@ -7,12 +7,12 @@ icon: BookOpen
|
|||
import {
|
||||
SpeechIcon,
|
||||
BookIcon,
|
||||
WrenchIcon,
|
||||
PaletteIcon,
|
||||
HelpCircleIcon,
|
||||
BarChartIcon,
|
||||
HeartIcon,
|
||||
ShieldIcon
|
||||
ShieldIcon,
|
||||
Paintbrush,
|
||||
Hammer
|
||||
} from 'lucide-react';
|
||||
|
||||
Welcome to **Zen Browser's Documentation!** Here, you'll find everything you need to get the most out of your browsing experience. Dive in to explore how Zen can make your browsing more secure, private, and efficient.
|
||||
|
@ -25,10 +25,16 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
|
|||
description="Complete user guide and features"
|
||||
/>
|
||||
<Card
|
||||
icon={<WrenchIcon />}
|
||||
title="Guides"
|
||||
icon={<Paintbrush />}
|
||||
title="CSS Live Editing"
|
||||
href="/guides/live-editing"
|
||||
description="Tutorials and how-to guides"
|
||||
description="Live CSS editing for customizing the browser"
|
||||
/>
|
||||
<Card
|
||||
icon={<Hammer />}
|
||||
title="Build the Browser"
|
||||
href="/guides/building"
|
||||
description="Build the browser from source"
|
||||
/>
|
||||
<Card
|
||||
icon={<PaletteIcon />}
|
||||
|
@ -42,12 +48,6 @@ Welcome to **Zen Browser's Documentation!** Here, you'll find everything you nee
|
|||
href="/faq"
|
||||
description="Frequently asked questions"
|
||||
/>
|
||||
<Card
|
||||
icon={<BarChartIcon />}
|
||||
title="Benchmarks"
|
||||
href="/benchmarks"
|
||||
description="Performance comparisons"
|
||||
/>
|
||||
<Card
|
||||
icon={<ShieldIcon />}
|
||||
title="Security"
|
||||
|
|
|
@ -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.
|
||||

|
||||
</Tab>
|
||||
<Tab value="Multiple Toolbars">
|
||||
In **Multiple toolbars layout**, you will find the bookmark icon exposed on the right of your address bar.
|
||||

|
||||
</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* */}
|
||||

|
||||
|
||||
<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 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*
|
||||

|
||||
|
||||
<Callout>
|
||||
_All shortcuts can be modified via `Settings > Keyboard Shortcuts`._
|
||||
|
|
|
@ -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>
|
||||

|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -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"
|
||||
*/}
|
||||

|
||||
|
||||
|
||||
### 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>
|
||||
|
|
|
@ -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.
|
||||
|
||||

|
||||
|
||||
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.
|
||||
|
||||

|
||||
|
|
After Width: | Height: | Size: 704 KiB |
After Width: | Height: | Size: 641 KiB |
BIN
public/assets/user-manual/bookmarks/bookmarks-library.png
Normal file
After Width: | Height: | Size: 348 KiB |
BIN
public/assets/user-manual/bookmarks/bookmarks-sidebar.png
Normal file
After Width: | Height: | Size: 848 KiB |
BIN
public/assets/user-manual/bookmarks/bookmarks-toolbar.png
Normal file
After Width: | Height: | Size: 638 KiB |
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 639 KiB |
BIN
public/assets/user-manual/split-view/split-context-menu.png
Normal file
After Width: | Height: | Size: 754 KiB |
Before Width: | Height: | Size: 719 KiB After Width: | Height: | Size: 839 KiB |
Before Width: | Height: | Size: 326 KiB After Width: | Height: | Size: 598 KiB |
BIN
public/assets/user-manual/workspaces/enable-container-tabs.png
Normal file
After Width: | Height: | Size: 705 KiB |
Before Width: | Height: | Size: 306 KiB After Width: | Height: | Size: 690 KiB |