From 22b3cd9d335ab874718606aaa994798f7721cb0d Mon Sep 17 00:00:00 2001 From: martholomew Date: Thu, 24 Oct 2024 18:26:46 -0600 Subject: [PATCH 1/5] Reduxed the action popup; added an svg to material.css; redid some logic in action-popup-main.js --- ext/action-popup.html | 125 +++++---------- ext/css/action-popup.css | 252 ++++++++++++++---------------- ext/css/material.css | 1 + ext/images/info.svg | 1 + ext/js/pages/action-popup-main.js | 34 +++- 5 files changed, 193 insertions(+), 220 deletions(-) create mode 100644 ext/images/info.svg diff --git a/ext/action-popup.html b/ext/action-popup.html index ddaec23206..c2f5c16f7f 100644 --- a/ext/action-popup.html +++ b/ext/action-popup.html @@ -11,94 +11,55 @@ + - -
- Loading... -
- -
-
- -
- - - - diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css index 77238003d7..c19dffa574 100644 --- a/ext/css/action-popup.css +++ b/ext/css/action-popup.css @@ -38,6 +38,7 @@ --background-color: #f8f9fa; --text-color: #333333; --svg-filter: 0; + --animation-duration: 0.5s; } :root[data-theme=dark] { @@ -90,31 +91,6 @@ label { display: initial; } - -/* 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(/images/profile.svg); } -.icon[data-icon=cog] { --icon-image: url(/images/cog.svg); } -.icon[data-icon=key] { --icon-image: url(/images/key.svg); } -.icon[data-icon=magnifying-glass] { --icon-image: url(/images/magnifying-glass.svg); } -.icon[data-icon=exclamation-point-short] { --icon-image: url(/images/exclamation-point-short.svg); } -.icon[data-icon=question-mark-circle] { --icon-image: url(/images/question-mark-circle.svg); } - - /* Page-specific styles */ .link-group { flex-flow: row nowrap; @@ -185,19 +161,22 @@ label { -moz-appearance: none; appearance: none; } + .toggle>input[type=checkbox]:not(:checked)~.toggle-group { transform: translateX(-50%); } + .toggle { box-sizing: border-box; - width: 60px; - height: 34px; + width: 85px; + height: 43px; position: relative; overflow: hidden; border: 1px solid #245580; border-radius: 4px; display: inline-block; } + .toggle-group { position: absolute; width: 200%; @@ -206,12 +185,15 @@ label { bottom: 0; user-select: none; } + body[data-loaded=true] .toggle-group { transition: transform 0.35s; } + body[data-loaded=true] #loading { display: none; } + body:not([data-loaded=true]) #action-popups { display: none; } @@ -224,12 +206,13 @@ body:not([data-loaded=true]) #action-popups { align-items: center; padding: 6px 12px; font-size: var(--font-size); - font-weight: normal; + font-weight: bold; line-height: var(--line-height); text-align: center; white-space: nowrap; cursor: pointer; } + .toggle-on, .toggle-off { position: absolute; @@ -244,30 +227,24 @@ body:not([data-loaded=true]) #action-popups { left: 0; right: 50%; color: #ffffff; - background-color: #337ab7; border-color: #2e6da4; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 3px 5px rgba(0, 0, 0, 0); - background-image: linear-gradient(#337ab7, #265a88); + background-image: linear-gradient(225deg, #bc00ff, #00eeff); background-repeat: repeat-x; } input[type=checkbox]:focus~.toggle-group>.toggle-on, input[type=checkbox]~.toggle-group>.toggle-on:hover { - background-color: #265a88; - background-image: linear-gradient(#2d65a0, #265a88 50%); + filter: grayscale(30%); } input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-on:not(:hover) { - background-color: #337ab7; - background-image: linear-gradient(#337ab7, #265a88); + background-image: linear-gradient(225deg, #bc00ff, #00eeff); } input[type=checkbox]:focus-visible~.toggle-group>.toggle-on { - background-color: #265a88; - background-image: linear-gradient(#2d65a0, #265a88 50%); + filter: grayscale(30%); } input[type=checkbox]~.toggle-group>.toggle-on:active, input[type=checkbox]~.toggle-group>.toggle-on:active:focus { - background-color: #204d74; - background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } @@ -295,104 +272,32 @@ input[type=checkbox]~.toggle-group>.toggle-on:active:focus { color: #333333; text-shadow: 0 1px 0 #ffffff; background-color: #ffffff; - background-image: linear-gradient(#ffffff, #e0e0e0); background-repeat: repeat-x; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); } input[type=checkbox]:focus~.toggle-group>.toggle-off, input[type=checkbox]~.toggle-group>.toggle-off:hover, input[type=checkbox]~.toggle-group>.toggle-handle:hover { background-color: #e6e6e6; - background-image: linear-gradient(#e0e0e0, #e6e6e6 50%); - border-color: #adadad; } input[type=checkbox]:focus:not(:focus-visible)~.toggle-group>.toggle-off:not(:hover) { background-color: #ffffff; - background-image: linear-gradient(#ffffff, #e0e0e0); - border-color: #cccccc; } input[type=checkbox]:focus-visible~.toggle-group>.toggle-off, input[type=checkbox]~.toggle-group>.toggle-off:hover { background-color: #e6e6e6; - background-image: linear-gradient(#e0e0e0, #e6e6e6 50%); - border-color: #adadad; } input[type=checkbox]~.toggle-group>.toggle-off:active, input[type=checkbox]~.toggle-group>.toggle-handle:active, input[type=checkbox]~.toggle-group>.toggle-off:active:focus, input[type=checkbox]~.toggle-group>.toggle-handle:active:focus { - background-color: #d4d4d4; - background-image: none; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - border-color: #8c8c8c; -} - - -/* Navigation buttons and icons */ -.nav-button-container { - display: flex; - justify-content: center; - margin-top: 10px; - white-space: nowrap; -} -.nav-button { - background-image: var(--nav-button-background-image); - border: 1px solid var(--nav-button-border-color); - margin: 0; - padding: 2px 3px; - cursor: pointer; - position: relative; -} -.nav-button+.nav-button { - margin-left: -1px; -} -.nav-button:hover, -.nav-button:focus { - z-index: 1; - border-color: var(--nav-button-border-color-focus); - background-image: var(--nav-button-background-image-focus); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); - outline: none; -} -.nav-button:focus:not(:focus-visible) { - background-image: var(--nav-button-background-image); - border-color: var(--nav-button-border-color); - box-shadow: none; -} -.nav-button:focus-visible { - z-index: 1; - border-color: var(--nav-button-border-color-focus); - background-image: var(--nav-button-background-image-focus); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); -} -.nav-button:active, -.nav-button:active:focus { - z-index: 1; - border-color: var(--nav-button-border-color-active-focus); - background-image: var(--nav-button-background-image-active-focus); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); -} -.nav-button>.icon { - --icon-size: 16px 16px; - display: block; - width: 16px; - height: 16px; - box-sizing: content-box; - background-color: var(--nav-button-icon-bg); -} -.nav-button:first-child, -.nav-button:first-child[hidden]+.nav-button { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; -} -.nav-button:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; } +/* Actions */ .action-select-profile { position: relative; } + .profile-select-container { position: absolute; left: -1px; @@ -400,36 +305,21 @@ input[type=checkbox]~.toggle-group>.toggle-handle:active:focus { right: -1px; bottom: -1px; } + select.profile-select { - position: absolute; left: 0; top: 0; - width: 100%; + width: 6em; height: 100%; box-sizing: border-box; border: 0; margin: 0; - padding: 0.375em; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - opacity: 0; - outline: none; + /* background-position: right calc(3em / var(--font-size-no-units)) center; */ cursor: pointer; font-size: var(--font-size); } -.profile-select optgroup { - color: #666666; - font-weight: normal; - font-style: normal; - background-color: #f2f2f2; -} -.profile-select option { - color: #333333; - font-weight: normal; - font-style: normal; - background-color: initial; -} + +/* Warnings */ .nav-button-warning-badge { pointer-events: none; @@ -497,6 +387,104 @@ select.profile-select { background-color: var(--warning-color); } +/* Action Containers */ + +.action-icon:hover { + cursor: pointer; +} + + +.action-icon { + flex: 0 0 auto; + align-self: center; +} +.action-icon>.icon { + display: block; + background-color: var(--button-default-icon-color); + width: 1.5em; + height: 1.5em; +} + +.action-item { + position: relative; + padding: .5em; +} +.action-item:not([hidden]) { + display: block; +} +.action-item-outer { + display: block; + width: 100%; +} +.action-item-inner { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-content: stretch; + width: 100%; +} + +.action-item-left { + padding: var(--action-group-inner-vertical-padding) var(--action-group-inner-horizontal-padding-half) var(--action-group-inner-vertical-padding) var(--action-group-inner-horizontal-padding); + flex: 1 1 auto; + align-self: center; + position: relative; +} +.action-item-center { + padding: var(--action-group-inner-vertical-padding) var(--action-group-inner-horizontal-padding); + flex: 1 1 auto; + align-self: center; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: center; +} +.action-item-right { + padding: var(--action-group-inner-vertical-padding) var(--action-group-inner-horizontal-padding) var(--action-group-inner-vertical-padding) var(--action-group-inner-horizontal-padding-half); + flex: 0 1 auto; + align-self: stretch; + max-height: var(--action-group-right-max-height); + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + justify-content: flex-end; + padding-left: .5em; +} + +.action-container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; +} + +.action-container button { + flex: 0 0 auto; +} + +/* Misc */ + +h2 { + padding: 0; + margin: 0; + font-size: 1.125em; + font-weight: normal; + line-height: 1.5; +} + +.tooltip { + color: gray; + padding: 0; + margin: 0; +} + +input[type=text] { + width: 12em; +} + + + /* Mobile overrides */ /* Treat devices that can't hover as mobile devices */ diff --git a/ext/css/material.css b/ext/css/material.css index 9013365f6c..d82acbfefd 100644 --- a/ext/css/material.css +++ b/ext/css/material.css @@ -282,6 +282,7 @@ body { .icon[data-icon=connection] { --icon-image: url(/images/connection.svg); } .icon[data-icon=external-link] { --icon-image: url(/images/external-link.svg); } .icon[data-icon=monitor] { --icon-image: url(/images/monitor.svg); } +.icon[data-icon=info] { --icon-image: url(/images/info.svg); } .icon[data-icon=material-down-arrow] { --icon-image: url(/images/material-down-arrow.svg); --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); diff --git a/ext/images/info.svg b/ext/images/info.svg new file mode 100644 index 0000000000..7ec09ca679 --- /dev/null +++ b/ext/images/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js index 59b7711c58..fc3f73df25 100644 --- a/ext/js/pages/action-popup-main.js +++ b/ext/js/pages/action-popup-main.js @@ -81,6 +81,15 @@ class DisplayController { // Private + _updateDisplayModifierKey() { + const {profiles, profileCurrent} = /** @type {import('settings').Options} */ (this._optionsFull); + /** @type {NodeListOf} */ + const modifierKeys = document.querySelectorAll('em.modifier-key'); + for (let i = 0; i < modifierKeys.length; i++) { + modifierKeys[i].textContent = profiles[profileCurrent].options.scanning.inputs[0].include ? profiles[profileCurrent].options.scanning.inputs[0].include : "no key"; // Change to your desired text + } + } + /** * @param {MouseEvent} e */ @@ -202,7 +211,9 @@ class DisplayController { const extensionEnabled = options.general.enable; const onToggleChanged = () => this._api.commandExec('toggleTextScanning'); for (const toggle of /** @type {NodeListOf} */ (document.querySelectorAll('.enable-search,.enable-search2'))) { - toggle.checked = extensionEnabled; + if (toggle.checked !== extensionEnabled) { + toggle.checked = extensionEnabled; + } toggle.addEventListener('change', onToggleChanged, false); } void this._updateDictionariesEnabledWarnings(options); @@ -211,6 +222,7 @@ class DisplayController { this._themeController.theme = options.general.popupTheme; this._themeController.siteOverride = true; this._themeController.updateTheme(); + this._updateDisplayModifierKey(); } /** */ @@ -235,8 +247,8 @@ class DisplayController { /** @type {NodeListOf} */ const selects = document.querySelectorAll('.profile-select'); /** @type {NodeListOf} */ - const optionGroups = document.querySelectorAll('.profile-select-option-group'); - for (let i = 0; i < Math.min(selects.length, optionGroups.length); i++) { + // const optionGroups = document.querySelectorAll('.profile-select-option-group'); + for (let i = 0; i < Math.min(selects.length); i++) { const fragment = document.createDocumentFragment(); for (let j = 0, jj = profiles.length; j < jj; ++j) { const {name} = profiles[j]; @@ -245,8 +257,8 @@ class DisplayController { option.value = `${j}`; fragment.appendChild(option); } - optionGroups[i].textContent = ''; - optionGroups[i].appendChild(fragment); + selects[i].textContent = ''; + selects[i].appendChild(fragment); selects[i].value = `${profileCurrent}`; selects[i].addEventListener('change', this._onProfileSelectChange.bind(this), false); @@ -259,8 +271,18 @@ class DisplayController { _onProfileSelectChange(event) { const node = /** @type {HTMLInputElement} */ (event.currentTarget); const value = Number.parseInt(node.value, 10); - if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= /** @type {import('settings').Options} */ (this._optionsFull).profiles.length) { + + console.log('Selected profile index:', value); // Debug log + + if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value < /** @type {import('settings').Options} */ (this._optionsFull).profiles.length) { void this._setDefaultProfileIndex(value); + // Update the displayed modifier key after changing the profile + this._optionsFull.profileCurrent = value; + const defaultProfile = this._optionsFull.profiles[this._optionsFull.profileCurrent]; + if (defaultProfile !== null) { + this._setupOptions(defaultProfile); + } + console.log('Modifier key text updated for profile:', this._optionsFull.profiles[value]); // Debug log } } From f82bb6f9a6fd03ba8eca78dccbdcdbbde81625c9 Mon Sep 17 00:00:00 2001 From: martholomew Date: Thu, 24 Oct 2024 18:29:06 -0600 Subject: [PATCH 2/5] got rid of debugs --- ext/js/pages/action-popup-main.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js index fc3f73df25..b8e6ef446b 100644 --- a/ext/js/pages/action-popup-main.js +++ b/ext/js/pages/action-popup-main.js @@ -271,18 +271,13 @@ class DisplayController { _onProfileSelectChange(event) { const node = /** @type {HTMLInputElement} */ (event.currentTarget); const value = Number.parseInt(node.value, 10); - - console.log('Selected profile index:', value); // Debug log - if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value < /** @type {import('settings').Options} */ (this._optionsFull).profiles.length) { void this._setDefaultProfileIndex(value); - // Update the displayed modifier key after changing the profile this._optionsFull.profileCurrent = value; const defaultProfile = this._optionsFull.profiles[this._optionsFull.profileCurrent]; if (defaultProfile !== null) { this._setupOptions(defaultProfile); } - console.log('Modifier key text updated for profile:', this._optionsFull.profiles[value]); // Debug log } } From 5f41352fd78cd14468e66e70007a39e2ee20f19c Mon Sep 17 00:00:00 2001 From: martholomew Date: Thu, 24 Oct 2024 18:42:53 -0600 Subject: [PATCH 3/5] re-added titles and permissions errors --- ext/action-popup.html | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/ext/action-popup.html b/ext/action-popup.html index c2f5c16f7f..e6ab3b6de5 100644 --- a/ext/action-popup.html +++ b/ext/action-popup.html @@ -44,17 +44,26 @@

Profile

- - + - -
- - - + + + +
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css index c19dffa574..a894b949a7 100644 --- a/ext/css/action-popup.css +++ b/ext/css/action-popup.css @@ -38,7 +38,6 @@ --background-color: #f8f9fa; --text-color: #333333; --svg-filter: 0; - --animation-duration: 0.5s; } :root[data-theme=dark] { @@ -393,7 +392,6 @@ select.profile-select { cursor: pointer; } - .action-icon { flex: 0 0 auto; align-self: center; @@ -405,9 +403,13 @@ select.profile-select { height: 1.5em; } +.low-emphasis { + position: relative; +} + .action-item { position: relative; - padding: .5em; + padding: 0.5em; } .action-item:not([hidden]) { display: block; @@ -449,7 +451,7 @@ select.profile-select { align-items: center; align-content: center; justify-content: flex-end; - padding-left: .5em; + padding-left: 0.5em; } .action-container { @@ -465,7 +467,7 @@ select.profile-select { /* Misc */ -h2 { +h2.action-title { padding: 0; margin: 0; font-size: 1.125em; @@ -474,15 +476,21 @@ h2 { } .tooltip { - color: gray; + color: #808080; padding: 0; margin: 0; } -input[type=text] { - width: 12em; +.enable-dictionary-tooltip { + color: #ff0000; + font-weight: bold; + font-style: normal; } +.tooltip>a:link, a:visited { + color: #ff0000; + font-style: normal; +} /* Mobile overrides */ diff --git a/ext/css/material.css b/ext/css/material.css index d82acbfefd..9013365f6c 100644 --- a/ext/css/material.css +++ b/ext/css/material.css @@ -282,7 +282,6 @@ body { .icon[data-icon=connection] { --icon-image: url(/images/connection.svg); } .icon[data-icon=external-link] { --icon-image: url(/images/external-link.svg); } .icon[data-icon=monitor] { --icon-image: url(/images/monitor.svg); } -.icon[data-icon=info] { --icon-image: url(/images/info.svg); } .icon[data-icon=material-down-arrow] { --icon-image: url(/images/material-down-arrow.svg); --icon-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1); diff --git a/ext/images/info.svg b/ext/images/info.svg deleted file mode 100644 index 7ec09ca679..0000000000 --- a/ext/images/info.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js index b8e6ef446b..19ff6c4231 100644 --- a/ext/js/pages/action-popup-main.js +++ b/ext/js/pages/action-popup-main.js @@ -20,6 +20,7 @@ import {ThemeController} from '../app/theme-controller.js'; import {Application} from '../application.js'; import {getAllPermissions, hasRequiredPermissionsForOptions} from '../data/permissions-util.js'; import {HotkeyHelpController} from '../input/hotkey-help-controller.js'; +import {HotkeyUtil} from '../input/hotkey-util.js'; class DisplayController { /** @@ -32,6 +33,8 @@ class DisplayController { this._optionsFull = null; /** @type {ThemeController} */ this._themeController = new ThemeController(document.documentElement); + /** @type {HotkeyUtil} */ + this._hotkeyUtil = new HotkeyUtil(); } /** */ @@ -40,6 +43,9 @@ class DisplayController { const manifest = chrome.runtime.getManifest(); + const {platform: {os}} = await this._api.getEnvironmentInfo(); + this._hotkeyUtil.os = os; + this._showExtensionInfo(manifest); void this._setupEnvironment(); this._setupButtonEvents('.action-open-search', 'openSearchPage', chrome.runtime.getURL('/search.html'), this._onSearchClick.bind(this)); @@ -58,7 +64,6 @@ class DisplayController { '' ); this._setupButtonEvents('.action-open-settings', 'openSettingsPage', chrome.runtime.getURL(optionsPageUrl)); - this._setupButtonEvents('.action-open-permissions', null, chrome.runtime.getURL('/permissions.html')); const {profiles, profileCurrent} = optionsFull; const defaultProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null; @@ -81,12 +86,29 @@ class DisplayController { // Private + /** */ _updateDisplayModifierKey() { const {profiles, profileCurrent} = /** @type {import('settings').Options} */ (this._optionsFull); /** @type {NodeListOf} */ - const modifierKeys = document.querySelectorAll('em.modifier-key'); - for (let i = 0; i < modifierKeys.length; i++) { - modifierKeys[i].textContent = profiles[profileCurrent].options.scanning.inputs[0].include ? profiles[profileCurrent].options.scanning.inputs[0].include : "no key"; // Change to your desired text + const modifierKeyHint = document.querySelectorAll('.tooltip'); + + const currentModifierKey = profiles[profileCurrent].options.scanning.inputs[0].include; + + /** @type {{ [key: string]: string }} */ + const modifierKeys = {}; + for (const value of /** @type {import('input').ModifierKey[]} */ (['alt', 'ctrl', 'shift', 'meta'])) { + const name = this._hotkeyUtil.getModifierDisplayValue(value); + modifierKeys[value] = name; + } + + for (let i = 0; i < modifierKeyHint.length; i++) { + modifierKeyHint[i].textContent = currentModifierKey ? 'Hold ' : 'Hover over text to scan'; + if (currentModifierKey) { + const em = document.createElement('em'); + em.textContent = modifierKeys[currentModifierKey]; + modifierKeyHint[i].appendChild(em); + modifierKeyHint[i].appendChild(document.createTextNode(' to scan')); + } } } @@ -216,13 +238,13 @@ class DisplayController { } toggle.addEventListener('change', onToggleChanged, false); } + void this._updateDisplayModifierKey(); void this._updateDictionariesEnabledWarnings(options); void this._updatePermissionsWarnings(options); this._themeController.theme = options.general.popupTheme; this._themeController.siteOverride = true; this._themeController.updateTheme(); - this._updateDisplayModifierKey(); } /** */ @@ -247,7 +269,6 @@ class DisplayController { /** @type {NodeListOf} */ const selects = document.querySelectorAll('.profile-select'); /** @type {NodeListOf} */ - // const optionGroups = document.querySelectorAll('.profile-select-option-group'); for (let i = 0; i < Math.min(selects.length); i++) { const fragment = document.createDocumentFragment(); for (let j = 0, jj = profiles.length; j < jj; ++j) { @@ -272,11 +293,14 @@ class DisplayController { const node = /** @type {HTMLInputElement} */ (event.currentTarget); const value = Number.parseInt(node.value, 10); if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value < /** @type {import('settings').Options} */ (this._optionsFull).profiles.length) { - void this._setDefaultProfileIndex(value); - this._optionsFull.profileCurrent = value; - const defaultProfile = this._optionsFull.profiles[this._optionsFull.profileCurrent]; - if (defaultProfile !== null) { - this._setupOptions(defaultProfile); + const optionsFull = this._optionsFull; + if (optionsFull && value < optionsFull.profiles.length) { + void this._setDefaultProfileIndex(value); + optionsFull.profileCurrent = value; + const defaultProfile = optionsFull.profiles[optionsFull.profileCurrent]; + if (defaultProfile !== null) { + this._setupOptions(defaultProfile); + } } } } @@ -300,7 +324,7 @@ class DisplayController { * @param {import('settings').ProfileOptions} options */ async _updateDictionariesEnabledWarnings(options) { - const noDictionariesEnabledWarnings = /** @type {NodeListOf} */ (document.querySelectorAll('.no-dictionaries-enabled-warning')); + const tooltip = document.querySelectorAll('.tooltip'); const dictionaries = await this._api.getDictionaryInfo(); const enabledDictionaries = new Set(); @@ -317,9 +341,11 @@ class DisplayController { } } - const hasEnabledDictionary = (enabledCount > 0); - for (const node of noDictionariesEnabledWarnings) { - node.hidden = hasEnabledDictionary; + if (enabledCount === 0) { + for (let i = 0; i < tooltip.length; i++) { + tooltip[i].innerHTML = 'No dictionary enabled'; + tooltip[i].classList.add('enable-dictionary-tooltip'); + } } } @@ -330,10 +356,11 @@ class DisplayController { const permissions = await getAllPermissions(); if (hasRequiredPermissionsForOptions(permissions, options)) { return; } - const warnings = /** @type {NodeListOf} */ (document.querySelectorAll('.action-open-permissions,.permissions-required-warning')); - for (const node of warnings) { - node.hidden = false; + const tooltip = document.querySelectorAll('.tooltip'); + for (let i = 0; i < tooltip.length; i++) { + tooltip[i].innerHTML = 'Please enable permissions'; } + this._setupButtonEvents('.action-open-permissions', null, chrome.runtime.getURL('/permissions.html')); } /** @returns {Promise} */ From 18b882549e80a0d7dfc314d6de2c799464742169 Mon Sep 17 00:00:00 2001 From: martholomew Date: Thu, 31 Oct 2024 17:48:59 -0600 Subject: [PATCH 5/5] change color of warnings --- ext/css/action-popup.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css index a894b949a7..7f513a4244 100644 --- a/ext/css/action-popup.css +++ b/ext/css/action-popup.css @@ -471,7 +471,6 @@ h2.action-title { padding: 0; margin: 0; font-size: 1.125em; - font-weight: normal; line-height: 1.5; } @@ -482,14 +481,11 @@ h2.action-title { } .enable-dictionary-tooltip { - color: #ff0000; - font-weight: bold; - font-style: normal; + color: #f0ad4e; } .tooltip>a:link, a:visited { - color: #ff0000; - font-style: normal; + color: #f0ad4e; }