diff --git a/content/docs/user-manual/shortcuts.mdx b/content/docs/user-manual/shortcuts.mdx new file mode 100644 index 0000000..163d607 --- /dev/null +++ b/content/docs/user-manual/shortcuts.mdx @@ -0,0 +1,186 @@ +--- +title: Keyboard Shortcuts +description: Enhance your Zen experience with customizable keybinds +--- + +import KeyboardShortcut from '@/components/KeyboardShortcut'; + +Zen Browser supported lots of keyboard shortcuts to help you do common tasks quicker. Access `Settings" /> > `Keyboard Shortcuts" /> and edit the available shortcuts to suit your workflow even more! + +### Change or rebind keyboard shortcuts in Zen + +{/* TODO: insert video of editing a keyboard shortcuts */} + +- In Keyboard Shortcuts setting page, to change or rebind shortcut of a feature, click the text field beside it, press your shortcuts, and press Esc to save your new shortcut. + - The text field will show a dark green outline quickly when the new shortcut is succesfully assigned and saved. + - The text field will show a red outline if the new shortcut you assign is already taken as default shortcut for other feature in Zen. Below the field, a *Conflict with another shortcut* warning will be shown. If you encounter this, you can try assign another shortcut, or press Backspace to clear the shortcut field. You can also clear the shortcut field of a feature you don't need, before assigning it as a new shortcut for other features. + - Some Zen features might not have conflict when its original shortcut got reassigned for other features, but when the shortcut is called, it will resort to do the original feature. You can check the Keyboard Settings if the shortcut you're assigning is already set for other feature, and try assign other shortcut to make it work. +- Not all features are available in the Keyboard Shortcuts settings, especially alternative shortcuts derived from Firefox ([Check default Firefox shortcut lists](https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly)). This might result in failure when applying or accessing the feature using a custom shortcut you assigned. If a Firefox shortcut is not available in the Keyboard Shortcuts settings, you won't be able to use it as a custom shortcut yet. Kindly report it to [Zen Github Issues page](https://github.com/zen-browser/desktop/issues) first! + + +## List of editable keyboard shortcuts in Zen + +### Compact Mode + +| **Action** | **Shortcut** | +| ----------------------- | ---------------------------------------------- | +| Toggle Floating Toolbar | | +| Toggle Floating Sidebar | | +| Toggle Compact Mode | | + +### Workspaces + +| **Action** | **Shortcut** | +| -------------------------- | ---------------------------------------------- | +| Backward Workspace | | +| Forward Workspace | | +| Switch to Workspace (1-10) | Not set by default | + +You can assign custom keyboard shortcuts to switch into up to 10 workspaces. + +### Split View + +The "Toggle Split View" shortcuts currently only applicable when selecting multiple tabs in tab sidebar, and doesn't worked when used inside a split view. + +| **Action** | **Shortcut** | +| ------------------------------ | ---------------------------------------------- | +| Close Split View (Unsplit All) | | +| Toggle Split View Horizontal | | +| Toggle Split View Vertical | | +| Toggle Split View Grid | | + +### Window & Tab Management + +| **Action** | **Shortcut** | +| ----------------------- | ------------------------------------------------ | +| New Window | | +| New Tab | | +| Close Tab | | +| Close Window | | +| Quit Application | | +| Restore Last Closed Tab | | +| Undo Close Window | | +| Select tab #1 - #8 ^ | | +| Select last tab | | + +- By default, you can **switch to next tab** using the shortcut and **switch to previous tab** using the shortcut. +- When you're in Compact Mode and switching tabs using or `Look and Feel` > `Theme Settings`. +- Pressing when you're in the last tab will switch you to the first available tab (Essentials first, then pinned tabs, and lastly, regular tabs). +- ^ Tab numbers listed for these keyboard shortcuts includes Essentials and pinned tabs. Example: If you have three Essentials, four pinned tabs, and five regular tabs: + - until will switch you to your Essentials, + - until will switch you to your pinned tabs, + - will switch you to your first regular tab, + - will switch you to your last tab (12th). +- Zen can also let you cycle through recently used tabs, instead of cycling through all of your tabs. Enable it by go to `Settings` > `General` > `Tabs` and check the `Ctrl + Tab cycles through tabs in recently used order`. A popup containing up to 7 recently used tabs will show up when you press | +| Go Forward | | +| Navigate Back (Alternative) | | +| Navigate Forward (Alternative) | | +| Go Home | | +| Reload Page | | +| Reload Page (Skip Current Cache) | | +| Go to History (Open History Sidebar) | | +| Open Private Browsing Window | | + +### Search & Find + +| **Action** | **Shortcut** | +| --------------------------------------- | ------------------------------------------------ | +| Focus Search ^ | | +| Focus Search ^ (Alternative) | | +| Find on Page | | +| Find Again (Jump to Next Result) | | +| Find Previous (Jump to Previous Result) | | + +^ Focus Search shortcut will open your URL bar, shift focus and enable Search mode using your default search engine. + +### Page Operations + +| **Action** | **Shortcut** | +| --------------------------------------- | ------------------------------------------------ | +| Open Location (Current link in URL Bar) | | +| Open Location (Alternative) | | +| Save Page | | +| Print Page | | +| Toggle Reader Mode | | +| Toggle Picture-in-Picture | | +| View Page Source | | +| View Page Info | | + +### History & Bookmarks + +| **Action** | **Shortcut** | +| -------------------------------- | ------------------------------------------------ | +| Show All History | | +| Bookmark This Page | | +| Bookmark This Page (Alternative) | | +| Show Bookmarks Library | | + +### Media & Display + +| **Action** | **Shortcut** | +| --------------------- | ------------------------------------------------ | +| Toggle Mute | | +| Zoom Out | | +| Zoom In | | +| Reset Zoom Level | | +| Switch Text Direction | | +| Take Screenshot | | + +### Developer Tools + +| **Action** | **Shortcut** | +| ----------------------------- | ------------------------------------------------------ | +| Toggle DevTools | | +| Toggle Browser Toolbox | | +| Toggle Browser Console | | +| Toggle Responsive Design Mode | | +| Toggle Inspector | | +| Toggle Web Console | | +| Toggle JavaScript Debugger | | +| Toggle Network Monitor | | +| Toggle Style Editor | | +| Toggle Performance | | +| Toggle Storage | | +| Toggle DOM | | +| Toggle Accessibility | | + +### Zen Features + +| **Action** | **Shortcut** | +| ------------------------------ | ------------------------------------------------------ | +| Copy Current URL as Markdown | | +| Copy Current URL | | +| Toggle Sidebar Width | | +| Reset Pinned Tab to Pinned URL | Not set by default | + +### Other Features + +| **Action** | **Shortcut** | +| -------------------------- | ----------------------------------------------------- | +| Open Downloads | | +| Open Add-ons | | +| Open File | | +| Delete Key | | +| Enter Full Screen | | +| Exit Full Screen | | +| About Processes | | +| Show Bookmarks Sidebar | | +| Show Bookmarks Toolbar | | +| Stop Loading | | +| Toggle AI Chatbot Sidebar^ | | +| Toggle Firefox Sidebar | | +| Show All Tabs | | +| Clear Browsing Data | | +| WR Capture Command | | +| Toggle WR Capture Sequence | | + +--- + +Read more about default keyboard shortcuts in Firefox: +[Keyboard shortcuts - Perform common Firefox tasks quickly | Firefox Help](https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly) diff --git a/content/docs/user-manual/translate.mdx b/content/docs/user-manual/translate.mdx new file mode 100644 index 0000000..2c947ff --- /dev/null +++ b/content/docs/user-manual/translate.mdx @@ -0,0 +1,133 @@ +--- +title: Translations +description: Translate webpages or text selections directly in Zen +--- + +import { Callout } from 'fumadocs-ui/components/callout'; + +Based on Firefox, Zen also inherit its translation features, allowing you navigate websites in various language easily. The translation process are done locally on your device, instead of relying in cloud services. You can translate a whole page, translate a specific text selection, or translated a link text! + +### Translating the full page + +When you visit a webpage in a supported language, the translation panel will popped up automatically. You can also do it manually by opening **Main Menu** button and selecting **Translate page** option. + +{/* TODO: Insert screenshot of Translation panel popped up near the URL bar in Single Toolbar mode */} + + +You can also use a dedicated Translate button in the right side of the URL bar, which shows up when visiting webpages outside of your preferred language. In Single Toolbar mode, the button will be hidden by default and can be accessed after clicking the URL bar. + + +Zen detects the page languages manually and will suggest to translate it to your preferred languages. You can use the "**Translate from**" dropdown menu to change page language to detect, and use the "**Translate to**" dropdown menu to change your translation output language. Select "**Translate**" to translate the entire page. + + +Zen will download the language first if you're using this feature for the first time. After the language is downloaded, translation process will take around 20-60 seconds, depend on the length of contents. + + +The **Translate button** in URL bar will be updated along with the translation process, and after the translation process gets completed, your preferred language will be shown beside the icon. + +To revert the page to the original language, click the Translate button in the URL bar and select "**Show original**". + +{/* TODO: Insert screenshot of Translation panel popped up after a translate process is done, and highlight the "Show original" button */} + +### Translating text selection + +You can also translate a specific word or sentence, which will be handy when reading pages or learning in a foreign language. Select the text you want to translate, right click, and select "**Translate Selection to...**" option. + +{/* TODO: Screenshot of a selected text, right clicked with Translate Selection to... option highlighted */} + +The selected texts will be translated and displayed in a pop-up. Select "**Copy**" to save the whole translation to your clipboard, "**Translate full page**" to translate the entire webpage, or "**Done**" to close the pop-up. + +{/* TODO: Screenshot of translating a specific sentence */} + +You can also select a text manually to copy only a specific part of your translation, or change the input and output translation language using the "From" and "To" dropdown menu. + +You can also right click a hyperlink without selecting any text, and select "**Translate Link Text to...**" to translate the link text. + +{/* TODO: Screenshot of rightclicking a hyperlink with Translate Link Text to... option highlighted */} + +#### What if I encounter a page with mixed languages or contents in multiple languages? + +The translation feature primarily focuses on the main language of the webpage, so it might not handle pages with mixed languages or content in multiple languages optimally. You can translate specific part of the webpage that uses one language and do this multiple times for different parts to understand the webpage better. + +## Customize Translation Settings + +You can tailor your translation experience from two places: the translation panel pop-up and the "**Language & Appearance**" section in Settings. + +### Apply settings from translation panel + +1. Click the **Translate** button in your URL bar or click `Main Menu` button > "**Translate Page**" option to open the "**Translate this page?**" panel pop-up. +2. Click the gear button on the top side of the panel to reveal translation options. + +{/* TODO: Screenshot of options in the gear menu */} + +3. "**Always offer to translate**" checkbox will determine whether the translation panel will automatically popped up, and suggest you to translate when visiting sites outside your preferred languages. +4. With "**Always translate...**" and "**Never translate...**" checkboxes, you can choose to automatically translate the whole webpages, or to never translate the webpages at all for a specific language. +5. You can check "**Never translate this site**" so the translation will not be suggested nor processed after a specific website is loaded. +6. To revert a change, simply reselect an option to uncheck it. The checkmark will dissapear, indicating that it's disabled. +6. Selecting "**Manage languages**" will open `Settings` > `General` > `Language & Appearance` to reveal more settings regarding languages and translation features. + +### Using Webpage Language Settings + +Zen lets you set separate languages for displaying user interface (menu, messages, notifications) and webpages, accessible from `Settings` > `General` > `Language & Appearance` > `Language`. + +Select "**Choose**" beside the "Choose your preferred language for displaying pages" text to open the Webpage Language Settings. + +{/* TODO: Screenshot of Webpage Language Settings */} + +You can click **Select a language to add** to add more language to your preference and click **Add** to put it onto the options. Then, you can choose a language and click **Move Up** to prioritize it, click **Move Down** to deprioritize it, or **Remove** to remove it from your preferred language. Click **OK** to confirm your preference. + +### Translations Options + +Below the Language section in Settings, the **Translations** section lets you: +- Download languages for offline translations. Translation for all languages will weigh around 1.3 GB, meanwhile individual languages varies from 17-34 MB (for languages using regular Latin characters) to 59-116 MB (for languages that uses its own character set like Arabic, Japanese, Korean, Russian, or Traditional Chinese). +- Add or remove languages on the "Always translate these languages" list to enable the translation process automatically. +- Add or remove languages to the "Never translate these languages" list to prevent the translation process happen automatically. +- Manage the "Never translate these sites" list. (Websites can be added to the list from the translation panel, as described above) + +{/* TODO: Add the "More Translation Settings" screenshot */} + +### Supported Languages + +Here are the languages that currently supported for translating webpages in Zen: +- Arabic +- Bulgarian +- Chinese (Simplified) +- Catalan +- Croatian +- Czech +- Danish +- Dutch +- Estonian +- Finnish +- French +- German +- Greek +- Hungarian +- Indonesian +- Italian +- Japanese +- Korean +- Latvian +- Lithuanian +- Polish +- Portuguese +- Romanian +- Russian +- Serbian +- Slovak +- Slovenian +- Spanish +- Swedish +- Turkish +- Ukrainian +- Vietnamese + +New languages are constantly added over time. You can learn further about the translation development process and language availability in [Mozilla/Translations](https://mozilla.github.io/translations/) website. + +#### Report incorrect translations + +You can help enhance translations in Zen and Firefox-based browsers by reporting inaccuracies to Mozilla through [this form](https://docs.google.com/forms/d/e/1FAIpQLSdoRWnsHX6vVnGIRyLi4Kl-p0GrmeVIioqWsTz3aVTRfLScng/viewform). Report translation errors by entering the source language, the target langauge, the original sentence and translated sentence. Optionally, you can also provide a rating of the translation and a correct translation. + +--- + +Read more about translation feature in Firefox: [Firefox Translation | Firefox Help](https://support.mozilla.org/en-US/kb/website-translation)