Improve configuration feedback

pages/options/options.css

@@ -7,15 +7,29 @@ body {
     cursor: default;
     font-family: 'Noto Sans', Arial, sans-serif !important;
     font-size: 12px;
+    margin-top: -15px;
     padding: 10px !important;
 }
 
 .option {
-    margin-bottom: 22px;
+    margin-top: 25px;
 }
 
 .notice {
-    margin-top: 12px;
+    border-radius: 3px;
+    box-sizing: border-box;
+    margin-top: 25px;
+    max-width: 470px;
+    padding: 14px 16px;
+}
+
+.notice-default {
+    background-color: #f1f1f1;
+}
+
+.notice-warning {
+    background-color: #ffa500;
+    color: #fff;
 }
 
 /**
@@ -74,10 +88,58 @@ body {
  */
 
 .icon {
-    color: #777;
     margin-right: 3px;
 }
 
+/**
+ * Buttons
+ */
+
+.button {
+    -moz-user-select: none;
+    background-color: #f5f5f5;
+    border-radius: 2px;
+    border: 1px solid #cfcfcf;
+    color: #5f5f5f;
+    cursor: pointer;
+    float: right;
+    font-size: 12px;
+    outline: 0;
+    padding: 5px 22px;
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.button:hover {
+    background-color: #fff;
+}
+
+.button:active {
+    background-color: #dedede;
+}
+
+.button-warning {
+    background-color: #ea9700;
+    border: 1px solid #d88c00;
+    color: #fff;
+}
+
+.button-warning:hover {
+    background-color: #d88c00;
+    border-color: #c98200;
+}
+
+.button-warning:active {
+    background-color: #c07c00;
+    border-color: #b47400;
+}
+
+.button-notice {
+    margin-left: auto;
+    padding: 5px 9px;
+}
+
 /**
 * Links
 */
@@ -118,14 +180,19 @@ body {
     display: flex;
 }
 
+.notice-head {
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
 .notice-body {
-    background-color: #fbfbfb;
-    border-radius: 3px;
-    border: 1px solid #e7e7e7;
-    color: #595959;
-    display: inline-block;
-    font-size: 11px;
-    padding: 8px 10px;
+    align-items: center;
+    display: flex;
+}
+
+.notice-message {
+    line-height: 1.3;
+    margin-right: 14px;
 }
 
 /**

pages/options/options.html

@@ -23,6 +23,29 @@
 
         <script src="options.js"></script>
 
+        <section class="notice notice-warning hidden" id="notice-block-missing">
+
+            <div class="notice-head">
+
+                <i class="fai fa-exclamation-triangle icon"></i>
+                <span data-i18n-content="blockMissingTitle"></span>
+
+            </div>
+
+            <div class="notice-body" dir="ltr">
+
+                <div class="notice-message">
+                    This feature breaks websites. Do not leave it enabled, unless you are prepared to manually whitelist any affected domains.
+                </div>
+                
+                <div class="button button-notice button-warning" id="button-block-missing">
+                    Disable
+                </div>
+
+            </div>
+
+        </section>
+
         <section class="option">
 
             <div class="title-option">
@@ -105,13 +128,18 @@
 
         </section>
 
-        <section class="notice hidden" id="notice-locale">
+        <section class="notice notice-default hidden" id="notice-locale">
 
             <div class="notice-body" dir="ltr">
 
-                <i class="fai fa-exclamation-triangle icon"></i>
-                Your preferred language is not yet fully supported.
-                <a class="link-text" href="https://crowdin.com/project/decentraleyes" target="_blank">
+                <div class="notice-message">
+
+                    <i class="fai fa-exclamation-triangle icon"></i>
+                    Your preferred language is not yet fully supported.
+
+                </div>
+                
+                <a class="button button-notice" href="https://crowdin.com/project/decentraleyes" target="_blank">
                     Help Translate
                 </a>
 

pages/options/options.js

@@ -48,16 +48,33 @@ options._renderOptionsPanel = function () {
     elements.whitelistedDomains.value = domainWhitelist;
 
     options._registerOptionChangedEventListeners(elements);
+    options._registerMiscellaneousEventListeners();
+
+    if (options._optionValues.blockMissing === true) {
+        options._renderBlockMissingNotice();
+    }
 
     if (options._languageSupported === false) {
         options._renderLocaleNotice();
     }
 };
 
+options._renderBlockMissingNotice = function () {
+
+    let blockMissingNoticeElement = document.getElementById('notice-block-missing');
+    blockMissingNoticeElement.setAttribute('class', 'notice notice-warning');
+};
+
+options._hideBlockMissingNotice = function () {
+
+    let blockMissingNoticeElement = document.getElementById('notice-block-missing');
+    blockMissingNoticeElement.setAttribute('class', 'notice notice-warning hidden');
+};
+
 options._renderLocaleNotice = function () {
 
     let localeNoticeElement = document.getElementById('notice-locale');
-    localeNoticeElement.setAttribute('class', 'notice');
+    localeNoticeElement.setAttribute('class', 'notice notice-default');
 };
 
 options._registerOptionChangedEventListeners = function (elements) {
@@ -69,6 +86,19 @@ options._registerOptionChangedEventListeners = function (elements) {
     elements.whitelistedDomains.addEventListener('keyup', options._onOptionChanged);
 };
 
+options._registerMiscellaneousEventListeners = function () {
+
+    let blockMissingButtonElement = document.getElementById('button-block-missing');
+
+    blockMissingButtonElement.addEventListener('click', function () {
+
+        let changeEvent = new Event('change');
+
+        options._optionElements.blockMissing.checked = false;
+        options._optionElements.blockMissing.dispatchEvent(changeEvent);
+    });
+};
+
 options._determineOptionValues = function () {
 
     return new Promise((resolve) => {
@@ -173,6 +203,15 @@ options._onOptionChanged = function ({target}) {
         optionValue = target.value;
     }
 
+    if (optionKey === Setting.BLOCK_MISSING) {
+
+        if (optionValue === true) {
+            options._renderBlockMissingNotice();
+        } else {
+            options._hideBlockMissingNotice();
+        }
+    }
+
     if (optionKey === Setting.DISABLE_PREFETCH) {
         options._configureLinkPrefetching(optionValue);
     }