i18n work

platform/chromium/vapi-common.js

@@ -30,10 +30,10 @@
 
 'use strict';
 
-self.vAPI = self.vAPI || {};
+/******************************************************************************/
 
+var vAPI = self.vAPI = self.vAPI || {};
 var chrome = self.chrome;
-var vAPI = self.vAPI;
 
 /******************************************************************************/
 

src/css/popup.css

@@ -38,12 +38,13 @@ body {
     position: absolute;
     top: 0;
     }
-html.ltr .toolbar.alignLeft,
-html.rtl .toolbar.alignRight {
+
+body[dir="ltr"] .toolbar.alignLeft,
+body[dir="rtl"] .toolbar.alignRight {
     left: 0;
     }
-html.ltr .toolbar.alignRight,
-html.rtl .toolbar.alignLeft {
+body[dir="ltr"] .toolbar.alignRight,
+body[dir="rtl"] .toolbar.alignLeft {
     right: 0;
     }
 
@@ -83,10 +84,10 @@ body.tScopeSite .scopeRel:not(.disabled) {
     color: #a00;
     }
 
-html.ltr #buttonMtxSwitches + .dropdown-menu {
+body[dir="ltr"] #buttonMtxSwitches + .dropdown-menu {
     left: -80%;
     }
-html.rtl #buttonMtxSwitches + .dropdown-menu {
+body[dir="rtl"] #buttonMtxSwitches + .dropdown-menu {
     right: -80%;
     }
 #mtxSwitches > li  {
@@ -98,10 +99,10 @@ html.rtl #buttonMtxSwitches + .dropdown-menu {
 #mtxSwitches > li > span:before {
     font: 120% FontAwesome;
     }
-html.ltr #mtxSwitches > li > span:before {
+body[dir="ltr"] #mtxSwitches > li > span:before {
     padding-right: 0.5em;
     }
-html.rtl #mtxSwitches > li > span:before {
+body[dir="rtl"] #mtxSwitches > li > span:before {
     padding-left: 0.5em;
     }
 #mtxSwitches > li > span:before {

src/css/user-rules.css

@@ -28,7 +28,7 @@ div > p:last-child {
 #diff > .pane > div > span {
     float: left;
     }
-html.ltr #revertButton:after {
+body[dir="ltr"] #revertButton:after {
     content: '\2009\f061';
     font-family: FontAwesome;
     font-style: normal;
@@ -37,7 +37,7 @@ html.ltr #revertButton:after {
     vertical-align: baseline;
     display: inline-block;
     }
-html.rtl #revertButton:after {
+body[dir="rtl"] #revertButton:after {
     content: '\2009\f060';
     font-family: FontAwesome;
     font-style: normal;
@@ -46,7 +46,7 @@ html.rtl #revertButton:after {
     vertical-align: baseline;
     display: inline-block;
     }
-html.ltr #commitButton:before {
+body[dir="ltr"] #commitButton:before {
     content: '\f060\2009';
     font-family: FontAwesome;
     font-style: normal;
@@ -55,7 +55,7 @@ html.ltr #commitButton:before {
     vertical-align: baseline;
     display: inline-block;
     }
-html.rtl #commitButton:before {
+body[dir="rtl"] #commitButton:before {
     content: '\f061\2009';
     font-family: FontAwesome;
     font-style: normal;

src/js/i18n.js

@@ -23,21 +23,14 @@
 // jQuery must be present at this point.
 
 window.addEventListener('load', function() {
-    // http://en.wikipedia.org/wiki/Right-to-left
-    var rtlLanguages = {
-        'ar': true,
-        'fa': true,
-        'he': true
-    };
-    uDom('html').toggleClass('rtl', rtlLanguages.hasOwnProperty(navigator.language));
-    uDom('html').toggleClass('ltr', rtlLanguages.hasOwnProperty(navigator.language) === false);
+    'use strict';
 
     var nodeList = document.querySelectorAll('[data-i18n]');
     var i = nodeList.length;
     var node;
     while ( i-- ) {
         node = nodeList[i];
-        node.innerHTML = vAPI.i18n(node.getAttribute('data-i18n'));
+        vAPI.insertHTML(node, vAPI.i18n(node.getAttribute('data-i18n')));
     }
     // copy text of <h1> if any to document title
     node = document.querySelector('h1');

src/privacy.html

@@ -33,10 +33,10 @@ ul > li {
     word-wrap: normal;
     overflow-x: scroll;
     }
-html.ltr #spoof-user-agent-with {
+body[dir="ltr"] #spoof-user-agent-with {
     margin-left: 1.25em;
     }
-html.rtl #spoof-user-agent-with {
+body[dir="rtl"] #spoof-user-agent-with {
     margin-right: 1.25em;
     }
 </style>