Improve dictionaries not enabled badges (#1349)

* Improve badges on the settings page

* Add badges on the context page

5 files changed, 171 insertions, 22 deletions

diff --git a/ext/bg/context.html b/ext/bg/context.html
index afd89207..76e4db2a 100644
--- a/ext/bg/context.html
+++ b/ext/bg/context.html
@@ -30,7 +30,12 @@
                 <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
             </select></span>
         </button>
-        <a class="nav-button action-open-settings" data-icon="cog" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'></a>
+        <a class="nav-button action-open-settings" data-icon="cog" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'>
+            <div class="nav-button-warning-badge no-dictionaries-enabled-warning" hidden>
+                <div class="nav-button-warning-badge-outer"></div>
+                <div class="nav-button-warning-badge-inner"></div>
+            </div>
+        </a>
         <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search" data-hotkey='["global:openSearchPage","title","Search ({0})"]'></a>
         <a class="nav-button action-open-info" data-icon="question-mark" title="Information" data-hotkey='["global:openInfoPage","title","Information ({0})"]'></a>
     </div>
@@ -42,7 +47,11 @@
         <span class="link-group-icon"><input type="checkbox" id="enable-search2"></span><span class="link-group-label">Enable content scanning</span>
     </label>
     <a class="link-group action-open-settings">
-        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Settings</span>
+        <span class="link-group-icon" data-icon="chevron"></span>
+        <span class="link-group-label">Settings</span>
+        <span class="link-group-badge">
+            <div class="flex-margin-left warning-badge no-dictionaries-enabled-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></div>
+        </span>
     </a>
     <a class="link-group action-open-search">
         <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span>
diff --git a/ext/bg/css/context.css b/ext/bg/css/context.css
index 773f79c6..447c5066 100644
--- a/ext/bg/css/context.css
+++ b/ext/bg/css/context.css
@@ -15,6 +15,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+:root {
+    --badge-size: 16px;
+
+    --warning-color: #96751c;
+    --warning-color-light: #edc75e;
+}
+
 body {
     padding: 10px;
     margin: 0;
@@ -50,8 +57,34 @@ label {
 }
 
 
+/* Icons */
+.icon {
+    --icon-image: none;
+    --icon-size: contain;
+
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center center;
+    -webkit-mask-mode: alpha;
+    -webkit-mask-size: var(--icon-size);
+    -webkit-mask-image: var(--icon-image);
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-mode: alpha;
+    mask-size: var(--icon-size);
+    mask-image: var(--icon-image);
+}
+.icon[data-icon=profile]                 { --icon-image: url(/mixed/img/profile.svg); }
+.icon[data-icon=cog]                     { --icon-image: url(/mixed/img/cog.svg); }
+.icon[data-icon=magnifying-glass]        { --icon-image: url(/mixed/img/magnifying-glass.svg); }
+.icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); }
+.icon[data-icon=question-mark-circle]    { --icon-image: url(/mixed/img/question-mark-circle.svg); }
+
+
+/* Page-specific styles */
 .link-group {
-    display: block;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
     line-height: 1.5em;
     margin: 0 -10px;
     padding: 0.5em 10px;
@@ -102,6 +135,9 @@ label {
 .link-group-label {
     vertical-align: middle;
 }
+.link-group-badge {
+    margin-left: 0.5em;
+}
 
 /* Toggle */
 .toggle>input[type=checkbox] {
@@ -235,6 +271,7 @@ body[data-loaded=true] .toggle-group {
     margin: 0;
     padding: 2px 3px;
     cursor: pointer;
+    position: relative;
 }
 .nav-button+.nav-button {
     margin-left: -1px;
@@ -337,3 +374,69 @@ select.profile-select {
     font-style: normal;
     background-color: initial;
 }
+
+.nav-button-warning-badge {
+    pointer-events: none;
+    width: 12px;
+    height: 6px;
+    position: absolute;
+    right: calc(50% - 6px);
+    top: -8px;
+    z-index: 1;
+}
+.nav-button-warning-badge-inner,
+.nav-button-warning-badge-outer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #edc75e;
+
+    --icon-image: url(/mixed/img/material-down-arrow.svg);
+    --icon-size: contain;
+
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center center;
+    -webkit-mask-mode: alpha;
+    -webkit-mask-size: var(--icon-size);
+    -webkit-mask-image: var(--icon-image);
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    mask-mode: alpha;
+    mask-size: var(--icon-size);
+    mask-image: var(--icon-image);
+}
+.nav-button-warning-badge-inner {
+    margin: 1px 2px;
+}
+.nav-button-warning-badge-outer {
+    animation: nav-button-warning-badge-animation ease-in-out 2s alternate infinite;
+}
+@keyframes nav-button-warning-badge-animation {
+    0% { opacity: 1; background-color: #edc75e; }
+    100% { opacity: 1; background-color: #333333; }
+}
+
+.warning-badge {
+    position: relative;
+    width: var(--badge-size);
+    height: var(--badge-size);
+    margin: 0;
+    padding: 0;
+    background-color: var(--warning-color-light);
+    border-radius: 50%;
+    box-shadow: var(--shadow-vertical);
+}
+.warning-badge:not([hidden]) {
+    display: block;
+}
+.warning-badge>.icon {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--warning-color);
+}
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 53278951..725804c3 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -54,6 +54,7 @@
     --modal-width-small: 400px;
     --modal-height-small: 200px;
     --modal-transition-offset: -64px;
+    --badge-size: 16px;
 
     --link-color: var(--accent-color);
     --link-color-hover: var(--accent-color-dark);
@@ -62,7 +63,7 @@
     --outline-item-background-color: rgba(13, 13, 13, 0);
     --outline-item-background-color-hover: rgba(13, 13, 13, 0.15);
     --warning-color: #96751c;
-    --warning-color-light: hsl(44, 80%, 65%);
+    --warning-color-light: #edc75e;
     --dim-background-color: rgba(0, 0, 0, 0.5);
     --content-dimmer-color: rgba(0, 0, 0, 0.1);
 
@@ -421,26 +422,10 @@ a.heading-link-light {
     position: absolute;
     right: calc(var(--outline-item-icon-size) * -0.125);
     top: calc(var(--outline-item-icon-size) * -0.125);
-    width: calc(var(--outline-item-icon-size) * 0.5);
-    height: calc(var(--outline-item-icon-size) * 0.5);
-    margin: 0;
-    padding: 0;
-    background-color: var(--warning-color-light);
-    border-radius: calc(var(--outline-item-icon-size) * 0.5);
-    box-shadow: var(--shadow-vertical);
 }
 .outline-item-left-warning-badge:not([hidden]) {
     display: block;
 }
-.outline-item-left-warning-badge>.icon {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--warning-color);
-}
 .outline-item-label {
     white-space: nowrap;
     padding-left: var(--padding);
@@ -1970,6 +1955,29 @@ input.sentence-termination-character-input2 {
     top: calc(1em * (3 / var(--font-size-no-units)));
 }
 
+.warning-badge {
+    position: relative;
+    width: var(--badge-size);
+    height: var(--badge-size);
+    margin: 0;
+    padding: 0;
+    background-color: var(--warning-color-light);
+    border-radius: 50%;
+    box-shadow: var(--shadow-vertical);
+}
+.warning-badge:not([hidden]) {
+    display: block;
+}
+.warning-badge>.icon {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--warning-color);
+}
+
 
 /* Generic layouts */
 .margin-above {
@@ -2016,6 +2024,9 @@ input.sentence-termination-character-input2 {
     flex-flow: row wrap;
     align-items: center;
 }
+.flex-margin-left {
+    margin-left: 0.5em;
+}
 
 .flex-column-nowrap {
     display: flex;
diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js
index 65853514..e9833687 100644
--- a/ext/bg/js/context-main.js
+++ b/ext/bg/js/context-main.js
@@ -100,6 +100,7 @@ class DisplayController {
             toggle.checked = extensionEnabled;
             toggle.addEventListener('change', onToggleChanged, false);
         }
+        this._updateDictionariesEnabledWarnings(options);
     }
 
     async _setupHotkeys() {
@@ -150,6 +151,26 @@ class DisplayController {
             }]
         );
     }
+
+    async _updateDictionariesEnabledWarnings(options) {
+        const noDictionariesEnabledWarnings = document.querySelectorAll('.no-dictionaries-enabled-warning');
+        const dictionaries = await api.getDictionaryInfo();
+
+        let enabledCount = 0;
+        for (const {title} of dictionaries) {
+            if (
+                Object.prototype.hasOwnProperty.call(options.dictionaries, title) &&
+                options.dictionaries[title].enabled
+            ) {
+                ++enabledCount;
+            }
+        }
+
+        const hasEnabledDictionary = (enabledCount > 0);
+        for (const node of noDictionariesEnabledWarnings) {
+            node.hidden = hasEnabledDictionary;
+        }
+    }
 }
 
 (async () => {
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 5dd85dd2..341d7f21 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -22,7 +22,7 @@
     <div class="sidebar"><div class="sidebar-inner">
         <div class="sidebar-body">
             <a href="#!profile"          class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="profile"></span></span><span class="outline-item-label">Profile</span></a>
-            <a href="#!dictionaries"     class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></span></span><span class="outline-item-label">Dictionaries</span></a>
+            <a href="#!dictionaries"     class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="book"></span><span class="outline-item-left-warning-badge no-dictionaries-enabled-warning" hidden><div class="warning-badge"><span class="icon" data-icon="exclamation-point-short"></span></div></span></span><span class="outline-item-label">Dictionaries</span></a>
             <a href="#!general"          class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="cog"></span></span><span class="outline-item-label">General</span></a>
             <a href="#!scanning"         class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="scanning"></span></span><span class="outline-item-label">Scanning</span></a>
             <a href="#!popup"            class="outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup"></span></span><span class="outline-item-label">Popup</span></a>
@@ -125,7 +125,12 @@
     <div class="settings-group">
         <div class="settings-item settings-item-button" data-modal-action="show,dictionaries"><div class="settings-item-inner">
             <div class="settings-item-left">
-                <div class="settings-item-label">Configure installed and enabled dictionaries&hellip;</div>
+                <div class="settings-item-label">
+                    <div class="flex-row-nowrap">
+                        <div>Configure installed and enabled dictionaries&hellip;</div>
+                        <div class="flex-margin-left warning-badge no-dictionaries-enabled-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></div>
+                    </div>
+                </div>
             </div>
             <div class="settings-item-right open-panel-button-container">
                 <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>