Avoid using Chrome's @@bidi_* type i18n messages

... for the sake of portability.

When including vapi-common.js in an HTML file, then the body element there
will have a "dir" attribute filled with the current locale's direction
(ltr or rtl).

The following languages are considered right-to-left: ar, he, fa, ps, ur.
Everything else is left-to-right.

After the "dir" attribute is set, we can decide in CSS which elements
should have different styling for rtl languages (e.g., body[dir=rtl] #id).
This commit is contained in:
Deathamns 2014-10-21 16:45:54 +02:00
parent 86222cb368
commit 6d49ef0dac
20 changed files with 241 additions and 214 deletions

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — Your filters</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — Ubiquitous rules</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — About</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — Asset</title>
<style>
#content {

View File

@ -1,16 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock</title>
</head>
<body>
<script src="lib/punycode.min.js"></script>
<script src="lib/publicsuffixlist.min.js"></script>
<script src="lib/yamd5.js"></script>
<script src="js/vapi-appinfo.js"></script>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-background.js"></script>
<script src="js/vapi-appinfo.js"></script>
<script src="js/background.js"></script>
<script src="js/xal.js"></script>
<script src="js/async.js"></script>

View File

@ -2,31 +2,39 @@ ul {
padding: 0;
list-style-type: none;
}
ul#options {
#options {
margin-top: 0;
}
ul#options li {
#options li {
margin-bottom: 0.5em;
}
ul#lists {
#lists {
margin: 0.5em 0 0 0;
padding-__MSG_@@bidi_end_edge__: 0em;
padding-__MSG_@@bidi_start_edge__: 1em;
padding-left: 1em;
padding-right: 0em;
}
ul#lists > li {
body[dir=rtl] #lists {
padding-left: 0em;
padding-right: 1em;
}
#lists > li {
margin: 0.5em 0 0 0;
padding: 0;
font-size: 15px;
list-style-type: none;
}
ul#lists > li > ul {
#lists > li > ul {
margin: 0.25em 0 0 0;
}
li.listDetails {
font-size: 14px;
margin: 0 auto 0 auto;
margin-__MSG_@@bidi_start_edge__: 1em;
margin-__MSG_@@bidi_end_edge__: 0em;
margin-left: 1em;
margin-right: 0em;
}
body[dir=rtl] li.listDetails {
margin-left: 0em;
margin-right: 1em;
}
li.listDetails > * {
unicode-bidi: embed;
@ -70,7 +78,11 @@ button.custom.reloadAll:not(.disabled) {
position: fixed;
display: initial;
top: 1em;
__MSG_@@bidi_end_edge__: 1em;
right: 1em;
}
body[dir=rtl] #buttonApply {
right: auto;
left: 1em;
}
#buttonApply.disabled {
display: none;
@ -98,8 +110,10 @@ span.obsolete {
background-color: hsl(36, 100%, 75%);
}
#externalListsDiv {
margin: 2em auto 0 auto;
margin-__MSG_@@bidi_start_edge__: 2em;
margin: 2em auto 0 2em;
}
body[dir=rtl] #externalListsDiv {
margin: 2em 2em 0;
}
#externalLists {
font-size: smaller;

View File

@ -12,42 +12,48 @@
vertical-align: baseline;
display: inline-block;
}
#dashboard-nav-widgets {
direction: __MSG_@@bidi_dir__;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
*[data-tip] {
[data-tip] {
cursor: pointer;
position: relative;
}
*[data-tip]:hover:after {
[data-tip]:hover:after {
background-color: #ffffee;
border: 1px solid gray;
border-radius: 3px;
box-shadow: 1px 1px 3px gray;
color: black;
content: attr(data-tip);
direction: __MSG_@@bidi_dir__;
font: 11px sans-serif;
left: 0;
line-height: 130%;
min-width: 55%;
padding: 4px 6px;
position: absolute;
text-align: __MSG_@@bidi_start_edge__;
text-align: left;
top: 110%;
white-space: pre-line;
z-index: 20;
animation: tooltip 0.8s;
-webkit-animation: tooltip 0.8s;
}
*[data-tip][data-tip-anchor="top"]:hover:after {
bottom: 105%;
__MSG_@@bidi_start_edge__: auto;
__MSG_@@bidi_end_edge__: -10%;
top: auto;
body[dir=rtl] [data-tip]:hover:after {
text-align: right;
}
[data-tip][data-tip-anchor="top"]:hover:after {
bottom: 105%;
top: auto;
left: auto;
right: -10%;
}
body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
left: -10%;
right: auto;
}
@keyframes tooltip {
0% { opacity: 0; }
85% { opacity: 0; }

View File

@ -2,7 +2,6 @@ body {
margin: 0;
padding: 0 0.5em 5em 0.5em;
font: 14px sans-serif;
direction: __MSG_@@bidi_dir__;
}
h2, h3 {
margin: 1em 0;
@ -17,11 +16,6 @@ h2:nth-of-type(1) {
h3 {
font-size: 16px;
}
h2 + * {
margin: 0 auto;
margin-__MSG_@@bidi_start_edge__: 1em;
padding-__MSG_@@bidi_end_edge__: 0em;
}
a {
text-decoration: none;
}

68
src/css/dashboard.css Normal file
View File

@ -0,0 +1,68 @@
html, body {
margin: 0;
border: 0;
padding: 0;
font: 15px httpsb,sans-serif;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#dashboard-nav {
margin: 0;
border: 0;
padding: 0;
position: absolute;
width: 100%;
top: 0;
height: 50px;
z-index: 10;
}
#dashboard-nav-widgets {
margin: 0;
border-bottom: 1px solid #ccc;
padding: 4px 0 0;
white-space: nowrap;
background-color: white;
}
#dashboard-nav-widgets span {
padding: 0 0.5em;
font-size: larger;
}
.tabButton {
margin: 0;
border: 1px solid #ccc;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom: 1px solid #ccc;
padding: 4px;
display: inline-block;
position: relative;
top: 1px;
color: black;
background-color: #eee;
font: inherit;
cursor: pointer;
text-decoration: none;
}
.tabButton:focus {
outline: 0;
}
.tabButton:active,.tabButton:visited {
color: inherited;
}
.tabButton.selected {
border-bottom: 1px solid white;
background-color: white;
border-bottom: 1px solid white;
}
iframe {
margin: 0;
border: 0;
padding: 0;
background-color: transparent;
width: 100%;
height: 100%;
border-top: 50px solid transparent;
box-sizing: border-box;
}

View File

@ -4,7 +4,6 @@ body {
padding: 0;
font: 13px sans-serif;
background-color: white;
direction: __MSG_@@bidi_dir__;
min-width: 180px;
overflow: hidden;
display: inline-block;
@ -114,13 +113,18 @@ p {
#dynamicFilteringToggler > div:nth-of-type(4) {
left: 75%;
}
#dynamicFilteringToggler a {
#dynamicFilteringToggler > a {
padding: 0 2px 0 8px;
position: absolute;
__MSG_@@bidi_end_edge__: 0;
right: 0;
color: #aaa;
visibility: hidden;
}
body[dir=rtl] #dynamicFilteringToggler > a {
right: auto;
left: 0;
}
#dynamicFilteringToggler a:hover {
color: #444;
}

82
src/css/stats.css Normal file
View File

@ -0,0 +1,82 @@
div {
margin: 1em 0;
}
ul {
list-style-type: none;
}
#refresh {
margin: 0 0.5em 0 4px;
display: inline-block;
vertical-align: middle;
font-size: 2em;
cursor: pointer;
}
select {
padding: 2px 0;
font-size: 14px;
min-width: 20em;
max-width: 40em;
}
select option {
max-width: 40em;
}
#requests {
margin: 2em 0 0 0;
display: none;
}
#requests.logEnabled {
display: block;
}
#requests table {
margin: 1em 0;
border: 0;
border-collapse: collapse;
min-width: 600px;
}
#requests.empty table {
display: none;
}
tr td, tr th {
border: 1px solid #aaa;
padding: 4px 6px;
white-space: pre;
}
tr.domainHeader td {
font: 16px sans-serif;
}
tr.domainHeader td span {
margin-right: 0.5em;
font-size: 14px;
color: #aaa;
cursor: pointer;
}
tr.requestEntry {
font: 12px monospace;
}
tr.requestEntry td:nth-of-type(1) {
border: 0;
background-color: white;
width: 3em;
}
tr.requestEntry td:nth-of-type(2) {
text-align: right;
}
tr.logBlocked {
background-color: #fff8f8;
}
tr.logBlocked ~ tr td:nth-of-type(3) b {
padding: 2px 0;
color: #000;
background-color: rgba(255,0,0,0.1);
}
tr.logAllowed {
background-color: #f8fff8
}
tr.logAllowed ~ tr td:nth-of-type(3) b {
padding: 2px 0;
color: #000;
background-color: rgba(0,255,0,0.2);
}
tr.logMirrored {
background-color: #ffffbb !important;
}

View File

@ -1,91 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title data-i18n="dashboardName"></title>
<style>
html, body {
margin: 0;
border: 0;
padding: 0;
font: 15px httpsb,sans-serif;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#dashboard-nav {
margin: 0;
border: 0;
padding: 0;
position: absolute;
width: 100%;
top: 0;
height: 50px;
z-index: 10;
}
#dashboard-nav-widgets {
margin: 0;
border-bottom: 1px solid #ccc;
padding: 4px 0 0;
white-space: nowrap;
background-color: white;
}
#dashboard-nav-widgets span {
padding: 0 0.5em;
font-size: larger;
}
.tabButton {
margin: 0;
border: 1px solid #ccc;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom: 1px solid #ccc;
padding: 4px;
display: inline-block;
position: relative;
top: 1px;
color: black;
background-color: #eee;
font: inherit;
cursor: pointer;
text-decoration: none;
}
.tabButton:focus {
outline: 0;
}
.tabButton:active,.tabButton:visited {
color: inherited;
}
.tabButton.selected {
border-bottom: 1px solid white;
background-color: white;
border-bottom: 1px solid white;
}
iframe {
margin: 0;
border: 0;
padding: 0;
background-color: transparent;
width: 100%;
height: 100%;
border-top: 50px solid transparent;
box-sizing: border-box;
}
</style>
<link href='css/common.css' rel='stylesheet' type='text/css'>
<link href="css/dashboard.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="dashboard-nav">
<div id="dashboard-nav-widgets">
<span>µBlock</span>
<a class="tabButton" href="#" data-dashboard-panel-url="3p-filters.html" data-i18n="3pPageName"></a>
<a class="tabButton" href="#" data-dashboard-panel-url="1p-filters.html" data-i18n="1pPageName"></a>
<a class="tabButton" href="#" data-dashboard-panel-url="whitelist.html" data-i18n="whitelistPageName"></a>
<a class="tabButton" href="#" data-dashboard-panel-url="settings.html" data-i18n="settingsPageName"></a>
<a class="tabButton" href="#" data-dashboard-panel-url="stats.html" data-i18n="statsPageName"></a>
<a class="tabButton" href="#" data-dashboard-panel-url="about.html" data-i18n="aboutPageName"></a>
<span data-i18n="extName"></span>
<a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a>
<a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a>
<a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a>
<a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a>
<a class="tabButton" href="#stats.html" data-i18n="statsPageName"></a>
<a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
</div>
</div>

View File

@ -29,7 +29,7 @@
/******************************************************************************/
var loadDashboardPanel = function(tab, q) {
var tabButton = uDom('[data-dashboard-panel-url="' + tab + '"]');
var tabButton = uDom('[href="#' + tab + '"]');
if ( !tabButton ) {
return;
}
@ -42,7 +42,7 @@ var loadDashboardPanel = function(tab, q) {
/******************************************************************************/
var onTabClickHandler = function(e) {
loadDashboardPanel(uDom(this).attr('data-dashboard-panel-url'));
loadDashboardPanel(this.hash.slice(1));
e.preventDefault();
};

View File

@ -377,7 +377,7 @@ var onMessage = function(request, sender, callback) {
case 'elementPickerArguments':
response = {
i18n: {
'@@bidi_dir': vAPI.i18n('@@bidi_dir'),
'@@bidi_dir': document.body.getAttribute('dir'),
create: vAPI.i18n('pickerCreate'),
pick: vAPI.i18n('pickerPick'),
quit: vAPI.i18n('pickerQuit'),

View File

@ -38,7 +38,7 @@ var messagingConnector = function(response) {
// Safari bug
// Deleting the response.requestId below (only in some cases, probably
// when frames are present on the page) will remove it from all the
// following messages too, however with the following line it won't
// following messages too, however with the following line it won't.
vAPI.safari && console.log;
delete vAPI.messaging.listeners[response.requestId];

View File

@ -5,6 +5,14 @@
window.vAPI = window.vAPI || {};
// http://www.w3.org/International/questions/qa-scripts#directions
var setScriptDirection = function(langugae) {
document.body.setAttribute(
'dir',
~['ar', 'he', 'fa', 'ps', 'ur'].indexOf(langugae) ? 'rtl' : 'ltr'
);
};
vAPI.download = function(details) {
if (!details.url) {
return;
@ -40,6 +48,8 @@ if (window.chrome) {
vAPI.i18n = function(s) {
return chrome.i18n.getMessage(s) || s;
};
setScriptDirection(vAPI.i18n('@@ui_locale'));
} else if (window.safari) {
vAPI.getURL = function(path) {
return safari.extension.baseURI + path;
@ -53,14 +63,14 @@ if (window.chrome) {
if (vAPI.i18nData[vAPI.i18n = navigator.language.replace('-', '_')]
|| vAPI.i18nData[vAPI.i18n = vAPI.i18n.slice(0, 2)]) {
vAPI.i18nAlpha2 = vAPI.i18n;
vAPI.i18nLocale = vAPI.i18n;
} else {
vAPI.i18nAlpha2 = vAPI.i18nData._;
vAPI.i18nLocale = vAPI.i18nData._;
}
xhr = new XMLHttpRequest;
xhr.overrideMimeType('application/json;charset=utf-8');
xhr.open('GET', './_locales/' + vAPI.i18nAlpha2 + '/messages.json', false);
xhr.open('GET', './_locales/' + vAPI.i18nLocale + '/messages.json', false);
xhr.send();
vAPI.i18nData = JSON.parse(xhr.responseText);
@ -72,6 +82,8 @@ if (window.chrome) {
return this.i18nData[s] || s;
};
setScriptDirection(vAPI.i18nLocale);
// update popover size to its content
if (safari.self.identifier === 'popover' && safari.self) {
window.addEventListener('load', function() {

View File

@ -2,7 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/popup.css" type="text/css">
<title>µBlock</title>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — Settings</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

View File

@ -1,95 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — Statistics</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<style>
div {
margin: 1em 0;
}
ul {
list-style-type: none;
}
#refresh {
margin: 0 0.5em 0 4px;
display: inline-block;
vertical-align: middle;
font-size: 2em;
cursor: pointer;
}
select {
padding: 2px 0;
font-size: 14px;
min-width: 20em;
max-width: 40em;
}
select option {
max-width: 40em;
}
#requests {
margin: 2em 0 0 0;
display: none;
}
#requests.logEnabled {
display: block;
}
#requests table {
margin: 1em 0;
border: 0;
border-collapse: collapse;
min-width: 600px;
}
#requests.empty table {
display: none;
}
tr td, tr th {
border: 1px solid #aaa;
padding: 4px 6px;
white-space: pre;
}
tr.domainHeader td {
font: 16px sans-serif;
}
tr.domainHeader td span {
margin-right: 0.5em;
font-size: 14px;
color: #aaa;
cursor: pointer;
}
tr.requestEntry {
font: 12px monospace;
}
tr.requestEntry td:nth-of-type(1) {
border: 0;
background-color: white;
width: 3em;
}
tr.requestEntry td:nth-of-type(2) {
text-align: right;
}
tr.logBlocked {
background-color: #fff8f8;
}
tr.logBlocked ~ tr td:nth-of-type(3) b {
padding: 2px 0;
color: #000;
background-color: rgba(255,0,0,0.1);
}
tr.logAllowed {
background-color: #f8fff8
}
tr.logAllowed ~ tr td:nth-of-type(3) b {
padding: 2px 0;
color: #000;
background-color: rgba(0,255,0,0.2);
}
tr.logMirrored {
background-color: #ffffbb !important;
}
</style>
<link rel="stylesheet" type="text/css" href="css/stats.css">
</head>
<body>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>µBlock — Whitelist</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">