Support RTL

piroor · Jan 10, 2025 · 73ccf92 · 73ccf92
1 parent 51a349d
commit 73ccf92
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 8 deletions.
diff --git a/submodules/webextensions-lib-l10n b/submodules/webextensions-lib-l10n
diff --git a/submodules/webextensions-lib-menu-ui b/submodules/webextensions-lib-menu-ui
diff --git a/submodules/webextensions-lib-tab-favicon-helper b/submodules/webextensions-lib-tab-favicon-helper
diff --git a/webextensions/common/common.js b/webextensions/common/common.js
@@ -209,3 +209,25 @@ export async function getTSTVersion() {
   }
   return '0.0';
 }
+
+const RTL_LANGUAGES = new Set([
+  'ar',
+  'he',
+  'fa',
+  'ur',
+  'ps',
+  'sd',
+  'ckb',
+  'prs',
+  'rhg',
+]);
+
+export function isRTL() {
+  const lang = (
+    navigator.language ||
+    navigator.userLanguage ||
+    //(new Intl.DateTimeFormat()).resolvedOptions().locale ||
+    ''
+  ).split('-')[0];
+  return RTL_LANGUAGES.has(lang);
+}
diff --git a/webextensions/options/init.js b/webextensions/options/init.js
@@ -7,7 +7,8 @@
 
 import {
   log,
-  configs
+  configs,
+  isRTL,
 } from '/common/common.js';
 import * as Permissions from '/common/permissions.js';
 import Options from '/extlib/Options.js';
@@ -37,6 +38,7 @@ window.addEventListener('DOMContentLoaded', async () => {
   for (const label of document.querySelectorAll('#menu-items label, #bookmarksPermissionCheck')) {
     label.lastChild.nodeValue = label.lastChild.nodeValue.replace(/\(&[a-z]\)|&([a-z])/i, '$1');
   }
+  document.documentElement.classList.toggle('rtl', isRTL());
 
   await configs.$loaded;
 

diff --git a/webextensions/options/options.css b/webextensions/options/options.css
@@ -11,6 +11,10 @@
   opacity: 0;
 }
 
+:root.rtl {
+  direction: rtl;
+}
+
 body {
   background: var(--bg-color);
   color: var(--text-color);

diff --git a/webextensions/panel/panel.css b/webextensions/panel/panel.css
@@ -40,6 +40,10 @@
   }
 }
 
+:root.rtl {
+  direction: rtl;
+}
+
 body {
   background: var(--bg-color);
   color: var(--text-color);
@@ -109,14 +113,15 @@ body {
 }
 
 #tabs li .checkbox-container {
-  margin-left: 0.5em;
+  margin-inline-start: 0.5em;
   padding: var(--item-vertical-padding) 0;
 }
 
 #tabs li label {
   flex-grow: 1;
   overflow: hidden;
-  padding: var(--item-vertical-padding) 1em var(--item-vertical-padding) 0;
+  padding-block: var(--item-vertical-padding);
+  padding-inline: 0 1em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -212,11 +217,11 @@ body {
   bottom: 0;
   color: var(--text-color);
   display: none;
-  left: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   line-height: 1.5;
   padding: 1.5em;
   position: fixed;
-  right: 0;
   text-shadow: 0 0 0.5em var(--bg-color),
                0 0 0.5em var(--bg-color),
                0 0 0.5em var(--bg-color),

diff --git a/webextensions/panel/panel.js b/webextensions/panel/panel.js
@@ -12,6 +12,7 @@ import {
   shouldIncludeHidden,
   handleMissingReceiverError,
   callTSTAPI,
+  isRTL,
 } from '/common/common.js';
 import * as Constants from '/common/constants.js';
 import DragSelection from '/common/drag-selection.js';
@@ -37,6 +38,8 @@ const gTabItems = new Map();
 const gHighlightedTabs = new Map();
 
 window.addEventListener('DOMContentLoaded', async () => {
+  document.documentElement.classList.toggle('rtl', isRTL());
+
   gTabBar = document.querySelector('#tabs');
   gMenu = document.querySelector('#menu');
   gMenu.ui = new MenuUI({
+0 −3		.eslintignore
+0 −66		.eslintrc.js
+1 −1		.github/workflows/main.yml
+2 −2		Makefile
+87 −20		MenuUI.js
+76 −0		eslint.config.mjs
+6 −3		package.json
+1 −1		.eslintrc.js
+73 −15		TabFavIconHelper.js
+1 −1		package.json