rtl languages friendly: issue #29

src/about.html

@@ -23,11 +23,11 @@ ul {
     <li><span data-i18n="aboutPermissions"></span><br>
     <li><a href="https://github.com/gorhill/uMatrix" data-i18n="aboutCode"></a><br>
     <li><a href="https://github.com/gorhill/uMatrix/issues" data-i18n="aboutIssues"></a><br>
-    <li><span data-i18n="aboutContributors"></span><br>
+    <li><span data-i18n="aboutContributors"></span>
         <ul>
-            <li>Code: <a href="https://github.com/gorhill/uMatrix/graphs/contributors">µMatrix, <a href="https://github.com/gorhill/httpswitchboard/graphs/contributors">HTTP Switchboard</a>
-            <li>Issues: <a href="https://github.com/gorhill/uMatrix/issues?q=is%3Aissue">µMatrix</a>, <a href="https://github.com/gorhill/httpswitchboard/issues?q=is%3Aissue">HTTP Switchboard</a>
-            <li>Translations: <a href="https://github.com/gorhill/uMatrix/wiki/Translation-work-contributors">Crowdin</a>
+            <li><span data-i18n="aboutCodeContributors"></span> <a href="https://github.com/gorhill/uMatrix/graphs/contributors">µMatrix, <a href="https://github.com/gorhill/httpswitchboard/graphs/contributors">HTTP Switchboard</a>
+            <li><span data-i18n="aboutIssueContributors"></span> <a href="https://github.com/gorhill/uMatrix/issues?q=is%3Aissue">µMatrix</a>, <a href="https://github.com/gorhill/httpswitchboard/issues?q=is%3Aissue">HTTP Switchboard</a>
+            <li><span data-i18n="aboutTranslationContributors"></span> <a href="https://github.com/gorhill/uMatrix/wiki/Translation-work-contributors">Crowdin</a>
         </ul>
 </ul>
 

src/css/common.css

@@ -72,10 +72,11 @@ html.rtl {
     white-space: pre-line;
     z-index: 20;
     }
-.tip-anchor-left[data-tip]:hover:after {
+html.ltr .tip-anchor-left[data-tip]:hover:after,
+html.rtl .tip-anchor-right[data-tip]:hover:after {
     left: -5vw;
     }
-.tip-anchor-right[data-tip]:hover:after {
+html.ltr .tip-anchor-right[data-tip]:hover:after,
+html.rtl .tip-anchor-left[data-tip]:hover:after {
     right: -5vw;
     }
-

src/css/dashboard-common.css

@@ -20,9 +20,14 @@ h3 {
     font-size: 16px;
     }
 h2 + * {
-    margin: 0 0 0 1em;
     padding: 0;
     }
+html.ltr h2 + * {
+    margin: 0 0 0 1em;
+    }
+html.rtl h2 + * {
+    margin: 0 1em 0 0;
+    }
 a {
     text-decoration: none;
     }

src/css/info.css

@@ -15,15 +15,16 @@ select {
     white-space: nowrap;
     }
 #requests-log {
-    margin: 0;
+    background-color: white;
     border: 1px inset #eee;
-    padding: 0;
+    direction: ltr;
     font: 11px monospace;
-    background-color: white;
+    margin: 0;
     overflow: scroll;
+    padding: 0;
     width: calc(100% - 1.5em);
     }
-#requests-log table {
+#requestsTable {
     border-collapse: collapse;
     }
 #requests-log tr {

src/css/popup.css

@@ -38,10 +38,12 @@ body {
     position: absolute;
     top: 0;
     }
-.toolbar.alignLeft {
+html.ltr .toolbar.alignLeft,
+html.rtl .toolbar.alignRight {
     left: 0;
     }
-.toolbar.alignRight {
+html.ltr .toolbar.alignRight,
+html.rtl .toolbar.alignLeft {
     right: 0;
     }
 
@@ -316,8 +318,7 @@ body.tScopeNarrow #scopeCell {
 
 .matrix .matRow > .matCell:first-child {
     width: 16em;
-    text-align: start;
-    direction: rtl;
+    text-align: right;
     }
 .matrix .matRow.l2 > .matCell:first-child {
     margin-left: 1px;

src/css/user-rules.css

@@ -26,6 +26,42 @@ div > p:last-child {
 #diff > div > div > span {
     float: left;
     }
+html.ltr #revertButton:after {
+    content: '\2009\f061';
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    vertical-align: baseline;
+    display: inline-block;
+    }
+html.rtl #revertButton:after {
+    content: '\2009\f060';
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    vertical-align: baseline;
+    display: inline-block;
+    }
+html.ltr #commitButton:before {
+    content: '\f060\2009';
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    vertical-align: baseline;
+    display: inline-block;
+    }
+html.rtl #commitButton:before {
+    content: '\f061\2009';
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    vertical-align: baseline;
+    display: inline-block;
+    }
 #revertButton,
 #commitButton,
 #diff.edit #editEnterButton {
@@ -68,7 +104,9 @@ div > p:last-child {
     }
 #diff li {
     background-color: white;
+    direction: ltr;
     padding: 2px 0;
+    text-align: left;
     white-space: nowrap;
     }
 #diff li:nth-of-type(2n+0) {
@@ -95,7 +133,7 @@ div > p:last-child {
     background-color: #f8f8ff;
     border: 0;
     border-top: 1px solid #eee;
-    visibility: hidden;
+    direction: ltr;
     font: 12px monospace;
     line-height: calc(140% + 4px);
     height: 100%;
@@ -106,6 +144,7 @@ div > p:last-child {
     padding: 1em 0 0 0;
     position: absolute;
     resize: none;
+    visibility: hidden;
     white-space: nowrap;
     width: 100%;
     }

src/js/i18n.js

@@ -29,9 +29,8 @@ window.addEventListener('load', function() {
         'fa': true,
         'he': true
     };
-    if ( rtlLanguages[navigator.language] ) {
-        uDom('html').addClass('rtl');
-    }
+    uDom('html').toggleClass('rtl', rtlLanguages.hasOwnProperty(navigator.language));
+    uDom('html').toggleClass('ltr', rtlLanguages.hasOwnProperty(navigator.language) === false);
 
     var nodeList = document.querySelectorAll('[data-i18n]');
     var i = nodeList.length;

src/js/popup.js

@@ -63,6 +63,7 @@ var matrixHeaderPrettyNames = {
     'other': ''
 };
 
+var firstPartyLabel = '';
 var blacklistedHostnamesLabel = '';
 
 /******************************************************************************/
@@ -534,7 +535,7 @@ function renderMatrixCellDomain(cell, domain) {
         .prop('hostname', domain)
         .addClass(getCellClass(domain, '*'))
         .contents();
-    contents.nodeAt(0).textContent = '\u202A' + punycode.toUnicode(domain);
+    contents.nodeAt(0).textContent = punycode.toUnicode(domain);
     contents.nodeAt(1).textContent = ' ';
 }
 
@@ -543,7 +544,7 @@ function renderMatrixCellSubdomain(cell, domain, subomain) {
         .prop('hostname', subomain)
         .addClass(getCellClass(subomain, '*'))
         .contents();
-    contents.nodeAt(0).textContent = '\u202A' + punycode.toUnicode(subomain.slice(0, subomain.lastIndexOf(domain)-1)) + '.';
+    contents.nodeAt(0).textContent = punycode.toUnicode(subomain.slice(0, subomain.lastIndexOf(domain)-1)) + '.';
     contents.nodeAt(1).textContent = punycode.toUnicode(domain);
 }
 
@@ -552,7 +553,7 @@ function renderMatrixMetaCellDomain(cell, domain) {
         .prop('hostname', domain)
         .addClass(getCellClass(domain, '*'))
         .contents();
-    contents.nodeAt(0).textContent = '\u202A\u2217.' + punycode.toUnicode(domain);
+    contents.nodeAt(0).textContent = '\u2217.' + punycode.toUnicode(domain);
     contents.nodeAt(1).textContent = ' ';
 }
 
@@ -694,7 +695,7 @@ function hostnameCompare(a,b) {
 /******************************************************************************/
 
 function makeMatrixGroup0SectionDomain() {
-    return makeMatrixRowDomain('1st-party').addClass('g0 l1');
+    return makeMatrixRowDomain(firstPartyLabel).addClass('g0 l1');
 }
 
 function makeMatrixGroup0Section() {
@@ -952,7 +953,8 @@ function initMenuEnvironment() {
         prettyNames[key] = text;
     }
 
-    blacklistedHostnamesLabel = '\u202A' + uDom('[data-i18n="matrixBlacklistedHostnames"]').text();
+    firstPartyLabel = uDom('[data-i18n="matrix1stPartyLabel"]').text();
+    blacklistedHostnamesLabel = uDom('[data-i18n="matrixBlacklistedHostnames"]').text();
 }
 
 /******************************************************************************/

src/popup.html

@@ -75,6 +75,7 @@
 <!-- Convenient to auto-fetch locale strings used in scripts -->
 <div style="display: none;">
     <span data-i18n="matrixBlacklistedHostnames"></span>
+    <span data-i18n="matrix1stPartyLabel"></span>
 </div>
 
 <script src="lib/punycode.min.js"></script>

src/privacy.html

@@ -24,7 +24,7 @@ ul > li {
     color: #888;
     }
 #spoof-user-agent-with {
-    margin-left: 1.25em;
+    direction: ltr;
     display: block;
     font-size: 11px;
     width: 50em;
@@ -33,6 +33,12 @@ ul > li {
     word-wrap: normal;
     overflow-x: scroll;
     }
+html.ltr #spoof-user-agent-with {
+    margin-left: 1.25em;
+    }
+html.rtl #spoof-user-agent-with {
+    margin-right: 1.25em;
+    }
 </style>
 </head>
 
@@ -86,7 +92,7 @@ ul > li {
         <input id="spoof-user-agent" type="checkbox"><label data-i18n="privacySpoofUserAgentPrompt1" for="spoof-user-agent"></label> <input id="spoof-user-agent-every" type="text" value="5" size="3"> <span data-i18n="privacySpoofUserAgentPrompt2"></span>
         <button class="whatisthis"></button>
         <div class="whatisthis-expandable para" data-i18n="privacySpoofUserAgentHelp"></div>
-        <textarea id="spoof-user-agent-with"></textarea>
+        <textarea id="spoof-user-agent-with" spellcheck="false"></textarea>
 </ul>
 
 <h2 data-i18n="privacyBehindTheSceneHeader"></h2>

src/user-rules.html

@@ -15,14 +15,14 @@
     <div class="pane left">
         <div>
             <h2 data-i18n="userRulesPermanentHeader"></h2>
-            <button type="button" id="revertButton"><span data-i18n="userRulesRevert"></span>&thinsp;<span class="fa">&#xf061;</span></button>
+            <button type="button" id="revertButton" data-i18n="userRulesRevert"></button>
             </div>
         <ul></ul>
         </div>
     <div class="pane right">
         <div>
             <h2 data-i18n="userRulesTemporaryHeader"></h2>
-            <button type="button" id="commitButton"><span class="fa">&#xf060;</span>&thinsp;<span data-i18n="userRulesCommit"></span></button>
+            <button type="button" id="commitButton" data-i18n="userRulesCommit"></button>
             <button type="button" id="editEnterButton" data-i18n="userRulesEdit"></button>
             <button type="button" id="editStopButton" data-i18n="userRulesEditSave"></button>
             <button type="button" id="editCancelButton" data-i18n="userRulesEditDicard"></button>

tools/_locales/en/messages.json

@@ -99,6 +99,10 @@
         "message": "Reload the page.",
         "description": "Tool tip for the reload button"
     },
+    "matrix1stPartyLabel" : {
+        "message": "1st-party",
+        "description": "1st-party"
+    },
     "matrixBlacklistedHostnames" : {
         "message": "{{count}} blacklisted hostname(s)",
         "description": "Appears in the metadata row of bottom-most group: **mind the limited width**"
@@ -451,6 +455,18 @@
         "message":"Contributors",
         "description":"English: Contributors"
     },
+    "aboutCodeContributors":{
+        "message":"Code:",
+        "description":""
+    },
+    "aboutIssueContributors":{
+        "message":"Issues:",
+        "description":""
+    },
+    "aboutTranslationContributors":{
+        "message":"Translations:",
+        "description":""
+    },
     "aboutUserDataHeader" : {
         "message": "Your data",
         "description": ""