Skip to content

Commit 6d49ef0

Browse files
DeathamnsDeathamns
committed
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).
1 parent 86222cb commit 6d49ef0

20 files changed

Lines changed: 239 additions & 212 deletions

‎src/1p-filters.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta charset="utf-8">
55
<title>µBlock — Your filters</title>
66
<link rel="stylesheet" type="text/css" href="css/common.css">
77
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

‎src/3p-filters.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta charset="utf-8">
55
<title>µBlock — Ubiquitous rules</title>
66
<link rel="stylesheet" type="text/css" href="css/common.css">
77
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

‎src/about.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta charset="utf-8">
55
<title>µBlock — About</title>
66
<link rel="stylesheet" type="text/css" href="css/common.css">
77
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">

‎src/asset-viewer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta charset="utf-8">
55
<title>µBlock — Asset</title>
66
<style>
77
#content {

‎src/background.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4+
<meta charset="utf-8">
55
<title>µBlock</title>
66
</head>
77
<body>
88
<script src="lib/punycode.min.js"></script>
99
<script src="lib/publicsuffixlist.min.js"></script>
1010
<script src="lib/yamd5.js"></script>
11+
<script src="js/vapi-appinfo.js"></script>
1112
<script src="js/vapi-common.js"></script>
1213
<script src="js/vapi-background.js"></script>
13-
<script src="js/vapi-appinfo.js"></script>
1414
<script src="js/background.js"></script>
1515
<script src="js/xal.js"></script>
1616
<script src="js/async.js"></script>

‎src/css/3p-filters.css‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,39 @@ ul {
22
padding: 0;
33
list-style-type: none;
44
}
5-
ul#options {
5+
#options {
66
margin-top: 0;
77
}
8-
ul#options li {
8+
#options li {
99
margin-bottom: 0.5em;
1010
}
11-
ul#lists {
11+
#lists {
1212
margin: 0.5em 0 0 0;
13-
padding-__MSG_@@bidi_end_edge__: 0em;
14-
padding-__MSG_@@bidi_start_edge__: 1em;
13+
padding-left: 1em;
14+
padding-right: 0em;
1515
}
16-
ul#lists > li {
16+
body[dir=rtl] #lists {
17+
padding-left: 0em;
18+
padding-right: 1em;
19+
}
20+
#lists > li {
1721
margin: 0.5em 0 0 0;
1822
padding: 0;
1923
font-size: 15px;
2024
list-style-type: none;
2125
}
22-
ul#lists > li > ul {
26+
#lists > li > ul {
2327
margin: 0.25em 0 0 0;
2428
}
2529
li.listDetails {
2630
font-size: 14px;
2731
margin: 0 auto 0 auto;
28-
margin-__MSG_@@bidi_start_edge__: 1em;
29-
margin-__MSG_@@bidi_end_edge__: 0em;
32+
margin-left: 1em;
33+
margin-right: 0em;
34+
}
35+
body[dir=rtl] li.listDetails {
36+
margin-left: 0em;
37+
margin-right: 1em;
3038
}
3139
li.listDetails > * {
3240
unicode-bidi: embed;
@@ -70,7 +78,11 @@ button.custom.reloadAll:not(.disabled) {
7078
position: fixed;
7179
display: initial;
7280
top: 1em;
73-
__MSG_@@bidi_end_edge__: 1em;
81+
right: 1em;
82+
}
83+
body[dir=rtl] #buttonApply {
84+
right: auto;
85+
left: 1em;
7486
}
7587
#buttonApply.disabled {
7688
display: none;
@@ -98,8 +110,10 @@ span.obsolete {
98110
background-color: hsl(36, 100%, 75%);
99111
}
100112
#externalListsDiv {
101-
margin: 2em auto 0 auto;
102-
margin-__MSG_@@bidi_start_edge__: 2em;
113+
margin: 2em auto 0 2em;
114+
}
115+
body[dir=rtl] #externalListsDiv {
116+
margin: 2em 2em 0;
103117
}
104118
#externalLists {
105119
font-size: smaller;

‎src/css/common.css‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,48 @@
1212
vertical-align: baseline;
1313
display: inline-block;
1414
}
15-
#dashboard-nav-widgets {
16-
direction: __MSG_@@bidi_dir__;
17-
}
1815

1916
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::after#Tooltips */
20-
*[data-tip] {
17+
[data-tip] {
2118
cursor: pointer;
2219
position: relative;
2320
}
24-
*[data-tip]:hover:after {
21+
[data-tip]:hover:after {
2522
background-color: #ffffee;
2623
border: 1px solid gray;
2724
border-radius: 3px;
2825
box-shadow: 1px 1px 3px gray;
2926
color: black;
3027
content: attr(data-tip);
31-
direction: __MSG_@@bidi_dir__;
3228
font: 11px sans-serif;
3329
left: 0;
3430
line-height: 130%;
3531
min-width: 55%;
3632
padding: 4px 6px;
3733
position: absolute;
38-
text-align: __MSG_@@bidi_start_edge__;
34+
text-align: left;
3935
top: 110%;
4036
white-space: pre-line;
4137
z-index: 20;
4238
animation: tooltip 0.8s;
4339
-webkit-animation: tooltip 0.8s;
4440
}
45-
*[data-tip][data-tip-anchor="top"]:hover:after {
41+
body[dir=rtl] [data-tip]:hover:after {
42+
text-align: right;
43+
}
44+
45+
[data-tip][data-tip-anchor="top"]:hover:after {
4646
bottom: 105%;
47-
__MSG_@@bidi_start_edge__: auto;
48-
__MSG_@@bidi_end_edge__: -10%;
4947
top: auto;
48+
left: auto;
49+
right: -10%;
5050
}
51+
52+
body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
53+
left: -10%;
54+
right: auto;
55+
}
56+
5157
@keyframes tooltip {
5258
0% { opacity: 0; }
5359
85% { opacity: 0; }

‎src/css/dashboard-common.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ body {
22
margin: 0;
33
padding: 0 0.5em 5em 0.5em;
44
font: 14px sans-serif;
5-
direction: __MSG_@@bidi_dir__;
65
}
76
h2, h3 {
87
margin: 1em 0;
@@ -17,11 +16,6 @@ h2:nth-of-type(1) {
1716
h3 {
1817
font-size: 16px;
1918
}
20-
h2 + * {
21-
margin: 0 auto;
22-
margin-__MSG_@@bidi_start_edge__: 1em;
23-
padding-__MSG_@@bidi_end_edge__: 0em;
24-
}
2519
a {
2620
text-decoration: none;
2721
}

‎src/css/dashboard.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
html, body {
2+
margin: 0;
3+
border: 0;
4+
padding: 0;
5+
font: 15px httpsb,sans-serif;
6+
position: relative;
7+
width: 100%;
8+
height: 100%;
9+
overflow: hidden;
10+
}
11+
#dashboard-nav {
12+
margin: 0;
13+
border: 0;
14+
padding: 0;
15+
position: absolute;
16+
width: 100%;
17+
top: 0;
18+
height: 50px;
19+
z-index: 10;
20+
}
21+
#dashboard-nav-widgets {
22+
margin: 0;
23+
border-bottom: 1px solid #ccc;
24+
padding: 4px 0 0;
25+
white-space: nowrap;
26+
background-color: white;
27+
}
28+
#dashboard-nav-widgets span {
29+
padding: 0 0.5em;
30+
font-size: larger;
31+
}
32+
.tabButton {
33+
margin: 0;
34+
border: 1px solid #ccc;
35+
border-top-left-radius: 3px;
36+
border-top-right-radius: 3px;
37+
border-bottom: 1px solid #ccc;
38+
padding: 4px;
39+
display: inline-block;
40+
position: relative;
41+
top: 1px;
42+
color: black;
43+
background-color: #eee;
44+
font: inherit;
45+
cursor: pointer;
46+
text-decoration: none;
47+
}
48+
.tabButton:focus {
49+
outline: 0;
50+
}
51+
.tabButton:active,.tabButton:visited {
52+
color: inherited;
53+
}
54+
.tabButton.selected {
55+
border-bottom: 1px solid white;
56+
background-color: white;
57+
border-bottom: 1px solid white;
58+
}
59+
iframe {
60+
margin: 0;
61+
border: 0;
62+
padding: 0;
63+
background-color: transparent;
64+
width: 100%;
65+
height: 100%;
66+
border-top: 50px solid transparent;
67+
box-sizing: border-box;
68+
}

‎src/css/popup.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ body {
44
padding: 0;
55
font: 13px sans-serif;
66
background-color: white;
7-
direction: __MSG_@@bidi_dir__;
87
min-width: 180px;
98
overflow: hidden;
109
display: inline-block;
@@ -114,13 +113,18 @@ p {
114113
#dynamicFilteringToggler > div:nth-of-type(4) {
115114
left: 75%;
116115
}
117-
#dynamicFilteringToggler a {
116+
#dynamicFilteringToggler > a {
118117
padding: 0 2px 0 8px;
119118
position: absolute;
120-
__MSG_@@bidi_end_edge__: 0;
119+
right: 0;
121120
color: #aaa;
122121
visibility: hidden;
123122
}
123+
body[dir=rtl] #dynamicFilteringToggler > a {
124+
right: auto;
125+
left: 0;
126+
}
127+
124128
#dynamicFilteringToggler a:hover {
125129
color: #444;
126130
}

0 commit comments

Comments
 (0)