Fine tune visuals in document-blocked page

Related feedback:
https://github.com/uBlockOrigin/uBlock-issues/issues/3206#issuecomment-2449415643
This commit is contained in:
Raymond Hill 2024-10-31 11:18:42 -04:00
parent fd3624f541
commit 34771d02d1
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
2 changed files with 35 additions and 5 deletions

View file

@ -68,6 +68,14 @@ a {
position: relative;
z-index: 10;
}
#theURL > p > span:first-of-type {
display: block;
max-height: 6lh;
overflow-y: auto;
}
:root.mobile #theURL > p > span:first-of-type {
max-height: 3lh;
}
#theURL #toggleParse {
background-color: transparent;
top: 100%;
@ -132,9 +140,11 @@ body[dir="rtl"] #toggleParse {
#urlskip a {
display: block;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow-y: auto;
word-break: break-all;
}
:root.mobile #urlskip a {
max-height: 3lh;
}
#actionContainer {

View file

@ -75,7 +75,25 @@ let details = {};
/******************************************************************************/
dom.text('#theURL > p > span:first-of-type', details.url);
const urlToFragment = raw => {
try {
const fragment = new DocumentFragment();
const url = new URL(raw);
const hn = url.hostname;
const i = raw.indexOf(hn);
const b = document.createElement('b');
b.append(hn);
fragment.append(raw.slice(0,i), b, raw.slice(i+hn.length));
return fragment;
} catch(_) {
}
return raw;
};
/******************************************************************************/
dom.clear('#theURL > p > span:first-of-type');
qs$('#theURL > p > span:first-of-type').append(urlToFragment(details.url));
dom.text('#why', details.fs);
if ( typeof details.to === 'string' && details.to.length !== 0 ) {
@ -85,7 +103,9 @@ if ( typeof details.to === 'string' && details.to.length !== 0 ) {
let pos = text.indexOf(linkPlaceholder);
if ( pos !== -1 ) {
const link = document.createElement('a');
link.href = link.textContent = details.to;
link.href = details.to;
dom.cl.add(link, 'code');
link.append(urlToFragment(details.to));
fragment.append(
text.slice(0, pos),
link,