diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index fc479aadc..ed56964e2 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -1117,6 +1117,10 @@ "message": "off", "description": "Firefox-specific: appears as 'uBlockâ‚€ (off)'" }, + "docblockedTitle": { + "message": "Page blocked", + "description": "Used as a title for the document-blocked page" + }, "docblockedPrompt1": { "message": "uBlock Origin has prevented the following page from loading:", "description": "Used in the strict-blocking page" @@ -1153,6 +1157,10 @@ "message": "Permanently", "description": "English: Permanently" }, + "docblockedDisable": { + "message": "Proceed", + "description": "Button text to navigate to the blocked page" + }, "cloudPush": { "message": "Export to cloud storage", "description": "tooltip" diff --git a/src/css/common.css b/src/css/common.css index 56993f9e2..5f298a651 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -30,6 +30,7 @@ Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005 */ :root { + --default-gap-xxlarge: 40px; --default-gap-xlarge: 32px; --default-gap-large: 24px; --default-gap: 16px; diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css index fd076ef40..a6f8b0ff6 100644 --- a/src/css/document-blocked.css +++ b/src/css/document-blocked.css @@ -20,16 +20,21 @@ body { display: flex; - flex-direction: column; - padding: 40px; - text-align: center; + padding: var(--default-gap-xxlarge) var(--default-gap-small); + justify-content: center; } -body > div { - margin: 0 0 var(--default-gap-large) 0; +:root.mobile body { + padding: var(--default-gap-small); } -body > div > * { - margin: 0 0 var(--default-gap-xsmall) 0; + +#rootContainer { + max-width: min(100vw, 600 + px); } +#rootContainer > * { + margin: 0 0 var(--default-gap-xxlarge) 0; + } + a { text-decoration: none; } @@ -41,7 +46,6 @@ a { width: 100%; } #warningSign > a { - fill: rgb(var(--yellow-50)); font-size: 96px; } #theURL { @@ -106,25 +110,33 @@ body[dir="rtl"] #toggleParse { #parsed span:first-of-type { font-weight: bold; } + #whyex a { white-space: nowrap; } -#proceed { - margin-bottom: var(--default-gap); +#whyex ul { + display: flex; + flex-direction: column; + margin: 0; + padding-inline-start: var(--default-gap-xsmall); } -:root.mobile .proceedButtons { + +#actionContainer { + display: flex; + justify-content: space-between; + } +:root.mobile #actionContainer { justify-content: center; display: flex; flex-direction: column; } -.proceedButtons > button { - margin-inline-end: var(--default-gap); - margin-block-end: var(--default-gap-xsmall); +#actionContainer > button { + margin-bottom: 2rem } -.filterList:first-child .filterListSeparator { - display: none; - } +.filterList { + display: flex; +} .filterList .filterListSupport[href=""] { display: none; } diff --git a/src/document-blocked.html b/src/document-blocked.html index ae841b979..2533ddfda 100644 --- a/src/document-blocked.html +++ b/src/document-blocked.html @@ -3,56 +3,51 @@ - + -
exclamation-triangle
- -
-

- -
- -
-

-

- +
+ -
- - -
+
+

+ +
-
-

-

- - -

-
+
+

+

+ +
- diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js index e2eb034d5..a6f9a91fa 100644 --- a/src/js/document-blocked.js +++ b/src/js/document-blocked.js @@ -58,7 +58,7 @@ let details = {}; if ( Array.isArray(lists) === false || lists.length === 0 ) { return; } - const parent = uDom.nodeFromSelector('#whyex > span:nth-of-type(2)'); + const parent = uDom.nodeFromSelector('#whyex > ul'); for ( const list of lists ) { const listElem = document.querySelector('#templates .filterList') .cloneNode(true); @@ -77,27 +77,6 @@ let details = {}; /******************************************************************************/ -(( ) => { - const matches = /^(.*)\{\{hostname\}\}(.*)$/.exec(vAPI.i18n('docblockedProceed')); - if ( matches === null ) { return; } - const proceed = document.querySelector('#templates .proceed').cloneNode(true); - proceed.children[0].textContent = matches[1]; - proceed.children[2].textContent = matches[2]; - const hnOption = proceed.querySelector('.hn'); - if ( details.hn !== details.dn ) { - hnOption.textContent = details.hn; - hnOption.setAttribute('value', details.hn); - } else { - hnOption.remove(); - } - const dnOption = proceed.querySelector('.dn'); - dnOption.textContent = details.dn; - dnOption.setAttribute('value', details.dn); - document.getElementById('proceed').append(proceed); -})(); - -/******************************************************************************/ - uDom.nodeFromSelector('#theURL > p > span:first-of-type').textContent = details.url; uDom.nodeFromId('why').textContent = details.fs; @@ -217,9 +196,7 @@ if ( window.history.length > 1 ) { /******************************************************************************/ const getTargetHostname = function() { - const elem = document.querySelector('#proceed select'); - if ( elem === null ) { return details.hn; } - return elem.value; + return details.hn; }; const proceedToURL = function() { @@ -246,8 +223,14 @@ const proceedPermanent = async function() { proceedToURL(); }; -uDom('#proceedTemporary').attr('href', details.url).on('click', proceedTemporary); -uDom('#proceedPermanent').attr('href', details.url).on('click', proceedPermanent); +uDom('#proceed').on('click', ( ) => { + const input = document.querySelector('#disableWarning'); + if ( input.checked ) { + proceedPermanent(); + } else { + proceedTemporary(); + } +}); /******************************************************************************/