Add support for right-to-left, top-to-bottom scripts

pages/options/options.css

@@ -62,7 +62,7 @@ body {
 }
 
 .input-text {
-    margin-left: 29px !important;
+    margin-left: 29px;
 }
 
 /**
@@ -92,3 +92,26 @@ body {
 	align-items: center;
 	display: flex;
 }
+
+/**
+ * Right to Left
+ */
+
+body[dir="rtl"] .badge {
+    margin-left: 0;
+    margin-right: 6px;
+}
+
+body[dir="rtl"] .description-option {
+    margin-left: 0;
+    margin-right: 29px;
+}
+
+body[dir="rtl"] .input-checkbox {
+    margin: 0 0 0 4px;
+}
+
+body[dir="rtl"] .input-text {
+    margin-left: 0;
+    margin-right: 29px;
+}

pages/options/options.js

@@ -31,6 +31,21 @@ const VALUE_SEPARATOR = ';';
  * Private Methods
  */
 
+options._determineScriptDirection = function (language) {
+
+    let rightToLeftLanguages, scriptDirection;
+
+    rightToLeftLanguages = ['ar', 'he'];
+
+    if (rightToLeftLanguages.indexOf(language) !== -1) {
+        scriptDirection = 'rtl';
+    } else {
+        scriptDirection = 'ltr';
+    }
+
+    return scriptDirection;
+};
+
 options._getOptionElement = function (optionKey) {
     return document.querySelector('[data-option=' + optionKey + ']');
 };
@@ -41,9 +56,11 @@ options._getOptionElement = function (optionKey) {
 
 document.addEventListener('DOMContentLoaded', function () {
 
-    let i18nElements, optionElements;
+    let i18nElements, scriptDirection, optionElements;
 
     i18nElements = document.querySelectorAll('[data-i18n-content]');
+    scriptDirection = options._determineScriptDirection(navigator.language);
+    document.body.setAttribute('dir', scriptDirection);
 
     i18nElements.forEach(function (i18nElement) {
 

pages/popup/popup.js

@@ -27,25 +27,49 @@ const WEB_DOMAIN_EXPRESSION = /:\/\/(.[^\/]+)(.*)/;
 const WEB_PREFIX_VALUE = 'www.';
 const WEB_PREFIX_LENGTH = WEB_PREFIX_VALUE.length;
 
+/**
+ * Private Methods
+ */
+
+popup._determineScriptDirection = function (language) {
+
+    let rightToLeftLanguages, scriptDirection;
+
+    rightToLeftLanguages = ['ar', 'he'];
+
+    if (rightToLeftLanguages.indexOf(language) !== -1) {
+        scriptDirection = 'rtl';
+    } else {
+        scriptDirection = 'ltr';
+    }
+
+    return scriptDirection;
+};
+
 /**
  * Initializations
  */
 
 document.addEventListener('DOMContentLoaded', function () {
 
-    let optionsButtonElement, i18nElements;
+    let optionsButtonElement, optionsTitle, scriptDirection, i18nElements;
 
     optionsButtonElement = document.getElementById('options-button');
+    optionsTitle = chrome.i18n.getMessage('optionsTitle');
+
+    scriptDirection = popup._determineScriptDirection(navigator.language);
 
-    let optionsTitle = chrome.i18n.getMessage('optionsTitle');
     optionsButtonElement.setAttribute('title', optionsTitle);
+    optionsButtonElement.setAttribute('dir', scriptDirection);
 
     i18nElements = document.querySelectorAll('[data-i18n-content]');
 
     i18nElements.forEach(function (i18nElement) {
 
         let i18nMessageName = i18nElement.getAttribute('data-i18n-content');
+
         i18nElement.innerText = chrome.i18n.getMessage(i18nMessageName);
+        i18nElement.setAttribute('dir', scriptDirection);
     });
 
     chrome.storage.local.get('amountInjected', function (items) {
@@ -103,7 +127,9 @@ document.addEventListener('DOMContentLoaded', function () {
                         protectionToggleElement.setAttribute('class', 'button button-toggle active');
 
                         let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
+                        
                         protectionToggleElement.setAttribute('title', disableProtectionTitle);
+                        protectionToggleElement.setAttribute('dir', scriptDirection);
 
                         protectionToggleElement.addEventListener('click', function () {