Skip to content

Commit 8adad98

Browse files
committed
New way to convey IDN and CNAME info in popup panel
Hostnames which have unpunycoded IDN or canonical name information will have this information reported as an extra line under the hostname name in the popup panel, rather than as a tooltip. For the fenix UI flavor, the save/revert tools are now shown regardless of whether the overview area is visible or not.
1 parent 1a133d0 commit 8adad98

File tree

6 files changed

+52
-48
lines changed

6 files changed

+52
-48
lines changed

src/css/popup-fenix.css

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ body.off #switch .fa-icon {
9494
visibility: hidden;
9595
}
9696
.rulesetTools [id]:not(:first-of-type) {
97-
margin-top: 0.25em;
97+
margin-top: 0.2em;
9898
}
9999
.rulesetTools [id]:hover {
100100
fill: black;
@@ -259,32 +259,31 @@ body[dir="rtl"] #tooltip {
259259
color: #000;
260260
display: inline-flex;
261261
flex-shrink: 0;
262-
line-height: 2;
262+
padding: 0.33em 0;
263263
position: relative;
264264
}
265265
#firewallContainer > div:first-of-type > span:first-of-type {
266266
cursor: pointer;
267+
flex-direction: unset;
267268
}
268269
#firewallContainer > div > span:first-of-type {
270+
align-items: flex-end;
271+
flex-direction: column;
269272
justify-content: flex-end;
270273
padding-right: 2px;
271274
width: calc(100% - 4em);
272275
}
273276
#firewallContainer > div.isCname > span:first-of-type {
274277
color: mediumblue;
275278
}
276-
#firewallContainer > div > span:first-of-type > sup {
277-
color: #666;
278-
display: none;
279-
font-size: 80%;
280-
font-weight: normal;
281-
line-height: 1;
282-
}
283-
#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup {
279+
#firewallContainer > div > span:first-of-type > sub {
284280
display: inline-block;
281+
font-size: 85%;
282+
font-weight: normal;
283+
padding: 0.25em 0 0 0;
285284
}
286-
#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup::before {
287-
content: '\0416\2002';
285+
#firewallContainer > div > span:first-of-type > sub:empty {
286+
display: none;
288287
}
289288
#firewallContainer > div > span:first-of-type ~ span {
290289
margin-left: 1px;
@@ -380,6 +379,7 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
380379
left: 0;
381380
opacity: 0.4;
382381
position: absolute;
382+
top: 0;
383383
width: 7px;
384384
}
385385
#firewallContainer > div.isRootContext > span:first-of-type::before {

src/css/popup.css

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -270,32 +270,31 @@ body[dir="rtl"] #tooltip {
270270
color: #000;
271271
display: inline-flex;
272272
flex-shrink: 0;
273-
line-height: 2;
273+
padding: 0.33em 0;
274274
position: relative;
275275
}
276276
#firewallContainer > div:first-of-type > span:first-of-type {
277277
cursor: pointer;
278+
flex-direction: unset;
278279
}
279280
#firewallContainer > div > span:first-of-type {
281+
align-items: flex-end;
282+
flex-direction: column;
280283
justify-content: flex-end;
281284
padding-right: 2px;
282285
width: calc(100% - 4em);
283286
}
284287
#firewallContainer > div.isCname > span:first-of-type {
285288
color: mediumblue;
286289
}
287-
#firewallContainer > div > span:first-of-type > sup {
288-
color: #666;
289-
display: none;
290-
font-size: 80%;
291-
font-weight: normal;
292-
line-height: 1;
293-
}
294-
#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup {
290+
#firewallContainer > div > span:first-of-type > sub {
295291
display: inline-block;
292+
font-size: 85%;
293+
font-weight: normal;
294+
padding: 0.25em 0 0 0;
296295
}
297-
#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup::before {
298-
content: '\0416\2002';
296+
#firewallContainer > div > span:first-of-type > sub:empty {
297+
display: none;
299298
}
300299
#firewallContainer > div > span:first-of-type ~ span {
301300
margin-left: 1px;
@@ -391,6 +390,7 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span {
391390
left: 0;
392391
opacity: 0.4;
393392
position: absolute;
393+
top: 0;
394394
width: 7px;
395395
}
396396
#firewallContainer > div.isRootContext > span:first-of-type::before {

src/js/popup-fenix.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -287,16 +287,22 @@ const buildAllFirewallRows = function() {
287287
const isPunycoded = prettyDomainName !== des;
288288

289289
const span = row.querySelector('span:first-of-type');
290-
span.classList.toggle(
291-
'isIDN',
292-
isPunycoded &&
293-
reCyrillicAmbiguous.test(prettyDomainName) === true &&
294-
reCyrillicNonAmbiguous.test(prettyDomainName) === false
295-
);
296290
span.querySelector('span').textContent = prettyDomainName;
297-
span.title = isDomain && isPunycoded ? des : '';
298291

299292
const classList = row.classList;
293+
294+
let desExtra = '';
295+
if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) {
296+
desExtra = punycode.toUnicode(popupData.cnameMap.get(des));
297+
} else if (
298+
isDomain && isPunycoded &&
299+
reCyrillicAmbiguous.test(prettyDomainName) &&
300+
reCyrillicNonAmbiguous.test(prettyDomainName) === false
301+
) {
302+
desExtra = des;
303+
}
304+
span.querySelector('sub').textContent = desExtra;
305+
300306
classList.toggle('isRootContext', des === popupData.pageHostname);
301307
classList.toggle('isDomain', isDomain);
302308
classList.toggle('isSubDomain', !isDomain);
@@ -306,10 +312,6 @@ const buildAllFirewallRows = function() {
306312
classList.toggle('totalBlocked', hnDetails.totalBlockCount !== 0);
307313
classList.toggle('expandException', expandExceptions.has(hnDetails.domain));
308314

309-
if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) {
310-
span.title = punycode.toUnicode(popupData.cnameMap.get(des));
311-
}
312-
313315
row = row.nextElementSibling;
314316
}
315317

@@ -975,7 +977,7 @@ const toggleHostnameSwitch = async function(ev) {
975977
hostname: popupData.pageHostname,
976978
state: target.classList.contains('on'),
977979
tabId: popupData.tabId,
978-
persist: popupData.dfEnabled === false || ev.ctrlKey || ev.metaKey,
980+
persist: ev.ctrlKey || ev.metaKey,
979981
});
980982

981983
cachePopupData(response);

src/js/popup.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -322,16 +322,22 @@ const buildAllFirewallRows = function() {
322322
const isPunycoded = prettyDomainName !== des;
323323

324324
const span = row.querySelector('span:first-of-type');
325-
span.classList.toggle(
326-
'isIDN',
327-
isPunycoded &&
328-
reCyrillicAmbiguous.test(prettyDomainName) === true &&
329-
reCyrillicNonAmbiguous.test(prettyDomainName) === false
330-
);
331325
span.querySelector('span').textContent = prettyDomainName;
332-
span.title = isDomain && isPunycoded ? des : '';
333326

334327
const classList = row.classList;
328+
329+
let desExtra = '';
330+
if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) {
331+
desExtra = punycode.toUnicode(popupData.cnameMap.get(des));
332+
} else if (
333+
isDomain && isPunycoded &&
334+
reCyrillicAmbiguous.test(prettyDomainName) === true &&
335+
reCyrillicNonAmbiguous.test(prettyDomainName) === false
336+
) {
337+
desExtra = des;
338+
}
339+
span.querySelector('sub').textContent = desExtra;
340+
335341
classList.toggle('isRootContext', des === popupData.pageHostname);
336342
classList.toggle('isDomain', isDomain);
337343
classList.toggle('isSubDomain', !isDomain);
@@ -341,10 +347,6 @@ const buildAllFirewallRows = function() {
341347
classList.toggle('totalBlocked', hnDetails.totalBlockCount !== 0);
342348
classList.toggle('expandException', expandExceptions.has(hnDetails.domain));
343349

344-
if ( classList.toggle('isCname', popupData.cnameMap.has(des)) ) {
345-
span.title = punycode.toUnicode(popupData.cnameMap.get(des));
346-
}
347-
348350
row = row.nextElementSibling;
349351
}
350352

src/popup-fenix.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
</div>
6565

6666
<div id="templates" style="display: none">
67-
<div data-des="" data-type="*"><span><sup></sup><span></span></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
67+
<div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
6868
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
6969
<div id="hotspotTip"></div>
7070
<div id="tooltip"></div>

src/popup.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
5454
</div>
5555

5656
<div id="templates" style="display: none">
57-
<div data-des="" data-type="*"><span><sup></sup><span></span></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
57+
<div data-des="" data-type="*"><span><span></span><sub></sub></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
5858
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
5959
<div id="hotspotTip"></div>
6060
<div id="tooltip"></div>

0 commit comments

Comments
 (0)