From 3ddb31a96c025017fd806f9075e7203ae1f1a700 Mon Sep 17 00:00:00 2001 From: gorhill Date: Mon, 3 Nov 2014 14:27:59 -0500 Subject: [PATCH] rtl languages friendly: issue #29 --- src/about.html | 8 +++---- src/css/common.css | 7 +++--- src/css/dashboard-common.css | 7 +++++- src/css/info.css | 9 ++++---- src/css/popup.css | 9 ++++---- src/css/user-rules.css | 41 ++++++++++++++++++++++++++++++++- src/js/i18n.js | 5 ++-- src/js/popup.js | 12 ++++++---- src/popup.html | 1 + src/privacy.html | 10 ++++++-- src/user-rules.html | 4 ++-- tools/_locales/en/messages.json | 16 +++++++++++++ 12 files changed, 100 insertions(+), 29 deletions(-) diff --git a/src/about.html b/src/about.html index c719d7e..9bb9281 100644 --- a/src/about.html +++ b/src/about.html @@ -23,11 +23,11 @@ ul {



  • -

  • +
  • diff --git a/src/css/common.css b/src/css/common.css index 8b5aab0..ce5c5e3 100644 --- a/src/css/common.css +++ b/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; } - diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 172ef9c..972508c 100644 --- a/src/css/dashboard-common.css +++ b/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; } diff --git a/src/css/info.css b/src/css/info.css index 1127131..cbaf7d2 100644 --- a/src/css/info.css +++ b/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 { diff --git a/src/css/popup.css b/src/css/popup.css index 5071661..9a7d0fa 100644 --- a/src/css/popup.css +++ b/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; diff --git a/src/css/user-rules.css b/src/css/user-rules.css index 7f854f5..224028c 100644 --- a/src/css/user-rules.css +++ b/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%; } diff --git a/src/js/i18n.js b/src/js/i18n.js index c070b20..da66f6d 100644 --- a/src/js/i18n.js +++ b/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; diff --git a/src/js/popup.js b/src/js/popup.js index 6dc5a41..d586650 100644 --- a/src/js/popup.js +++ b/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(); } /******************************************************************************/ diff --git a/src/popup.html b/src/popup.html index dca3ec7..a2d976e 100644 --- a/src/popup.html +++ b/src/popup.html @@ -75,6 +75,7 @@
    +
    diff --git a/src/privacy.html b/src/privacy.html index 07b6dc5..1df9ebe 100644 --- a/src/privacy.html +++ b/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; + } @@ -86,7 +92,7 @@ ul > li {
    - +

    diff --git a/src/user-rules.html b/src/user-rules.html index 3a2d3a4..139cfd7 100644 --- a/src/user-rules.html +++ b/src/user-rules.html @@ -15,14 +15,14 @@

    - +

      - + diff --git a/tools/_locales/en/messages.json b/tools/_locales/en/messages.json index 2f5f164..a41a857 100644 --- a/tools/_locales/en/messages.json +++ b/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": ""