Apply RTL appearance to the options page, group tabs, and the startup…

… page #3689
piroor · Jan 6, 2025 · e0e0aa3 · e0e0aa3
1 parent e03504d
commit e0e0aa3
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 0 deletions.
diff --git a/webextensions/common/common.js b/webextensions/common/common.js
@@ -62,6 +62,7 @@ const localKeys = DEVICE_SPECIFIC_CONFIG_KEYS.concat(mapAndFilter(`
   optionsExpandedGroups
   optionsExpandedSections
   outOfScreenTabsRenderingPages
+  rtl,
   sidebarPosition
   sidebarVirtuallyClosedWindows
   sidebarVirtuallyOpenedWindows
@@ -142,6 +143,7 @@ export const configs = new Configs({
   sidebarPosition: Constants.kTABBAR_POSITION_AUTO,
   sidebarPositionRighsideNotificationShown: false,
   sidebarPositionOptionNotificationTimeout: 20 * 1000,
+  rtl: isRTL(),
 
   style: /^Mac/i.test(navigator.platform) ? 'sidebar' : 'proton',
   colorScheme: /^Linux/i.test(navigator.platform) ? 'system-color' : 'photon' ,

diff --git a/webextensions/options/init.js b/webextensions/options/init.js
@@ -58,6 +58,8 @@ if ((location.hash &&
     /independent=true/.test(location.search))
   document.body.classList.add('independent');
 
+document.documentElement.classList.toggle('rtl', isRTL());
+
 const CODEMIRROR_THEMES = `
 3024-day
 3024-night

diff --git a/webextensions/resources/group-tab.js b/webextensions/resources/group-tab.js
@@ -286,6 +286,7 @@
           'renderTreeInGroupTabs',
           'showAutoGroupOptionHint',
           'showAutoGroupOptionHintWithOpener',
+          'rtl',
         ]
       }),
       browser.runtime.sendMessage({
@@ -304,6 +305,8 @@
     `;
     gUserStyleRules.textContent = userStyleRules;
 
+    document.documentElement.classList.toggle('rtl', configs.rtl);
+
     updateTree.enabled = configs.renderTreeInGroupTabs;
     updateTree();
 

diff --git a/webextensions/resources/module/startup.js b/webextensions/resources/module/startup.js
@@ -9,10 +9,13 @@ import '/extlib/l10n.js';
 
 import {
   configs,
+  isRTL,
 } from '/common/common.js';
 import * as Constants from '/common/constants.js';
 import * as Permissions from '/common/permissions.js';
 
+document.documentElement.classList.toggle('rtl', isRTL());
+
 window.addEventListener('DOMContentLoaded', () => {
   document.querySelector('#title').textContent = document.title = `${browser.i18n.getMessage('extensionName')} ${browser.runtime.getManifest().version}`;
   document.querySelector('#syncTabsToDeviceOptionsLink').href = `${Constants.kSHORTHAND_URIS.options}#syncTabsToDeviceOptions`;