Re-design document-blocked page as per feedback

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1005

There is probably more work to do regarding the
shown URL -- it might be better to truncate it
on small screen display since it can be quite
long sometimes.

src/css/common.css

@@ -34,6 +34,19 @@
     src: url('fonts/fontawesome-webfont.ttf') format('truetype');
     }
 
+/**
+    Common uBO spacing.
+    Ref: https://github.com/uBlockOrigin/uBlock-issues/issues/1005
+*/
+:root {
+    --default-gap-xlarge: 32px;
+    --default-gap-large: 24px;
+    --default-gap: 16px;
+    --default-gap-small: 12px;
+    --default-gap-xsmall: 8px;
+    --default-gap-xxsmall: 4px;
+    }
+
 /* Common uBO styles */
 body {
     background-color: var(--default-surface);
@@ -60,9 +73,10 @@ body {
 a {
     color: var(--link-ink);
     }
-code {
+code, .code {
-    background-color: var(--bg-code);
+    background-color: var(--button-surface);
-    padding: 0 0.25em;
+    font-family: monospace;
+    padding: 4px;
     }
 hr {
     border: 0;
@@ -75,8 +89,10 @@ textarea {
 button {
     align-items: center;
     appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     border: 1px solid transparent;
-    border-radius: 4px;
+    border-radius: 5px;
     background-color: var(--button-surface);
     color: var(--button-ink);
     display: inline-flex;
@@ -86,8 +102,7 @@ button {
     letter-spacing: 0.5px;
     min-height: 36px;
     padding: 0 var(--font-size);
-    -moz-appearance: none;
+    vertical-align: middle;
-    -webkit-appearance: none;
     }
 button.vflex {
     height: 100%;
@@ -117,6 +132,10 @@ button.important[disabled] {
     filter: var(--button-disabled-filter);
     pointer-events: none;
     }
+button.preferred {
+    background-color: var(--button-preferred-surface);
+    color: var(--button-preferred-ink);
+    }
 button.iconifiable > .fa,
 button.iconifiable > .fa-icon {
     padding-left: 0;
@@ -183,6 +202,16 @@ label {
     stroke: var(--default-surface);
     }
 
+select {
+    padding: 2px;
+    }
+:root.desktop select {
+    appearance: none;
+    --webkit-appearance: none;
+    background-color: var(--select-surface);
+    font: inherit;
+    }
+
 .hidden {
     display: none;
     height: 0;

src/css/document-blocked.css

@@ -19,46 +19,32 @@
 */
 
 body {
-    padding: 0.5em;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    line-height: 20px;
+    padding: 40px;
     text-align: center;
     }
-
-@media (max-height: 640px) {
-    body {
-        font-size: small;
-        }
-}
 body > div {
-    margin: 0 0 1em 0;
+    margin: 0 0 var(--default-gap-large) 0;
     }
-body > div > p,
+body > div > * {
-body > div > div {
+    margin: 0 0 var(--default-gap-xsmall) 0;
-    margin: 4px 0;
-    }
-body > div > p:first-child {
-    margin: 1em 0 0 0;
     }
 a {
     text-decoration: none;
     }
-select {
-    font: inherit;
-    padding: 2px;
-    }
 .code {
-    background-color: var(--bg-code);
+    font-size: 13px;
-    font-family: monospace;
-    line-height: 1;
-    padding: 4px;
     word-break: break-all;
     }
 #warningSign {
     width: 100%;
     }
 #warningSign > a {
-    fill: var(--large-icon-info-lvl-2);
+    fill: var(--yellow-50);
-    font-size: 10em;
+    font-size: 96px;
-    padding: 0;
     }
 #theURL {
     padding: 0;
@@ -77,7 +63,7 @@ select {
     color: var(--fg-0-60);
     cursor: pointer;
     fill: var(--fg-0-60);
-    padding: 0.2em;
+    padding: var(--default-gap-xxsmall);
     position: absolute;
     transform: translate(0, -50%);
     }
@@ -103,8 +89,8 @@ body[dir="rtl"] #theURL > p > span {
     border-top: none;
     color: var(--fg-0-80);
     font-size: small;
-    overflow-x: hidden;
+    overflow-x: auto;
-    padding: 4px;
+    padding: var(--default-gap-xxsmall);
     text-align: initial;
     text-overflow: ellipsis; 
     }
@@ -126,8 +112,17 @@ body[dir="rtl"] #theURL > p > span {
 #whyex a {
     white-space: nowrap;
 }
-.proceedChoice {
+#proceed {
-    text-align: left;
+    margin-bottom: var(--default-gap);
+    }
+:root.mobile .proceedButtons {
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    }
+.proceedButtons > button {
+    margin-inline-end: var(--default-gap);
+    margin-block-end: var(--default-gap-xsmall);
     }
 
 .filterList:first-child .filterListSeparator {
@@ -136,3 +131,8 @@ body[dir="rtl"] #theURL > p > span {
 .filterList .filterListSupport[href=""] {
     display: none;
     }
+
+/* Small-screen devices */
+:root.mobile button {
+    width: 100%;
+    }

src/css/themes/default.css

@@ -14,7 +14,7 @@
     --blue-10: #80ebff;
     --blue-50: #0060df;
     --blue-60: #0250bb;
-    --ink-20: #312a64;
+    --ink-20: #312a65;
     --ink-50: #291d4f;
     --ink-80: #20123a;
     --ink-80-a4: #20123a0a;
@@ -96,11 +96,15 @@
     --button-disabled-filter: opacity(38%);
     --button-disabled-surface: var(--light-gray-30);
     --button-disabled-ink: var(--ink-20);
+    --button-preferred-surface: var(--ink-20);
+    --button-preferred-ink: white;
 
     --checkbox-size: calc(var(--font-size) + 2px);
     --checkbox-ink: var(--light-gray-90);
     --checkbox-checked-ink: var(--ink-20);
 
+    --select-surface: white;
+
     --bg-transient-notice: hsla(60, 100%, 95%, 1);
 
     --dashboard-bar-shadow:

src/document-blocked.html

@@ -18,35 +18,34 @@
         <p class="code"></p>
         <ul id="parsed"></ul>
     </div>
-    </div>
+</div>
 
 <div>
     <p data-i18n="docblockedPrompt2"></p>
-    <p id="why" class="code"></p><!--
+    <p id="why" class="code"></p>
- --><p id="whyex" style="display: none;"><span data-i18n="docblockedFoundIn"></span> <span></span></p>
+    <p id="whyex" style="display: none;"><span data-i18n="docblockedFoundIn"></span> <span></span></p>
     </div>
 
 <div>
-    <p><button id="back" data-i18n="docblockedBack" type="button"></button>
+    <button id="back" class="preferred" data-i18n="docblockedBack" type="button"></button>
-    <button id="bye" data-i18n="docblockedClose" type="button"></button></p>
+    <button id="bye" class="preferred" data-i18n="docblockedClose" type="button"></button>
-    </div>
+</div>
 
 <div>
     <p id="proceed"></p>
-    <p><button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
+    <p class="proceedButtons">
-    <button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button></p>
+        <button id="proceedTemporary" data-i18n="docblockedDisableTemporary" type="button"></button>
-    </div>
+        <button id="proceedPermanent" data-i18n="docblockedDisablePermanent" type="button"></button>
+    </p>
+</div>
 
 <div id="templates" style="display: none;">
     <span class="proceed">
         <span></span>
-        <span class="proceedChoice">
         <select>
             <option class="hn" value="" selected>
             <option class="dn" value="">
         </select> 
-        </span>
-        <span class="proceedChoice code hn"></span>
         <span></span>
     </span>
     <span class="filterList">

src/js/document-blocked.js

@@ -84,16 +84,13 @@ let details = {};
     if ( matches === null ) { return; }
     const proceed = uDom('#templates .proceed').clone();
     proceed.descendants('span:nth-of-type(1)').text(matches[1]);
-    proceed.descendants('span:nth-of-type(4)').text(matches[2]);
+    proceed.descendants('span:nth-of-type(3)').text(matches[2]);
-
+    if ( details.hn !== details.dn ) {
-    if ( details.hn === details.dn ) {
-        proceed.descendants('span:nth-of-type(2)').remove();
-        proceed.descendants('.hn').text(details.hn);
-    } else {
-        proceed.descendants('span:nth-of-type(3)').remove();
         proceed.descendants('.hn').text(details.hn).attr('value', details.hn);
-        proceed.descendants('.dn').text(details.dn).attr('value', details.dn);
+    } else {
+        proceed.descendants('.hn').remove();
     }
+    proceed.descendants('.dn').text(details.dn).attr('value', details.dn);
 
     uDom('#proceed').append(proceed);
 })();