From a9d949f5f46f9d3df2dd85d3ed6ca132887b5e2e Mon Sep 17 00:00:00 2001 From: Matttttt <18152455+martholomew@users.noreply.github.com> Date: Mon, 25 Nov 2024 18:54:37 +0000 Subject: [PATCH] Redid the Action Popup (#1525) * Reduxed the action popup; added an svg to material.css; redid some logic in action-popup-main.js * got rid of debugs * re-added titles and permissions errors * fixed formatting; added os specific key names; tooltip displays error messages; still missing mobile version * change color of warnings * cleaned up CSS & HTML; tested on Firefox mobile * fixed issue with hidden element not hiding * fixed/cleaned up CSS some more * removed added console statement * removed extraneous variables Signed-off-by: Matttttt <18152455+martholomew@users.noreply.github.com> --------- Signed-off-by: Matttttt <18152455+martholomew@users.noreply.github.com> Co-authored-by: martholomew --- ext/action-popup.html | 124 +++------ ext/css/action-popup.css | 423 ++++++++---------------------- ext/js/pages/action-popup-main.js | 74 ++++-- 3 files changed, 211 insertions(+), 410 deletions(-) diff --git a/ext/action-popup.html b/ext/action-popup.html index ddaec23206..be862649f3 100644 --- a/ext/action-popup.html +++ b/ext/action-popup.html @@ -11,94 +11,54 @@ + - -
- Loading... -
- -
-
- -
- - - - diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css index 77238003d7..8f007dd6b2 100644 --- a/ext/css/action-popup.css +++ b/ext/css/action-popup.css @@ -16,166 +16,58 @@ * along with this program. If not, see . */ +/* Variables */ + :root { --font-size-no-units: 14; --font-size: calc(1px * var(--font-size-no-units)); - --line-height-no-units: 20; --line-height: calc(var(--line-height-no-units) / var(--font-size-no-units)); - - --badge-size: 16px; - - --warning-color: #96751c; - --warning-color-light: #edc75e; - - --nav-button-background-image: linear-gradient(#f8f8f8, #e0e0e0); - --nav-button-border-color: #cccccc; - --nav-button-background-image-focus: linear-gradient(#e8e8e8, #d0d0d0); - --nav-button-border-color-focus: #aaaaaa; - --nav-button-background-image-active-focus: linear-gradient(#c8c8c8, #e0e0e0); - --nav-button-border-color-active-focus: #808080; - --nav-button-icon-bg: #333333; --background-color: #f8f9fa; --text-color: #333333; - --svg-filter: 0; } :root[data-theme=dark] { - --nav-button-background-image: linear-gradient(#464646, #444444); - --nav-button-border-color: #333333; - --nav-button-background-image-focus: linear-gradient(#171717, #2f2f2f); - --nav-button-border-color-focus: #555555; - --nav-button-background-image-active-focus: linear-gradient(#373737, #1f1f1f); - --nav-button-border-color-active-focus: #7f7f7f; - --nav-button-icon-bg: #fbfbfb; --background-color: #1e1e1e; --text-color: #cccccc; - --svg-filter: invert(100%); -} - -body { - padding: 10px; - margin: 0; - font-family: 'Segoe UI', Tahoma, sans-serif; - font-size: var(--font-size); - width: max-content; - height: max-content; - background-color: var(--background-color); } -h3 { - margin: 10px 0; - font-family: inherit; - font-weight: 500; - line-height: 1.1; - font-size: 24px; - color: var(--text-color); -} -label { - font-weight: normal; -} +/* Initilization */ -#mini { - display: flex; - flex-flow: column nowrap; - align-items: center; -} -#full { +body[data-loaded=true] #loading { display: none; } -:root[data-mode=full] #mini { + +body:not([data-loaded=true]) #action-popup { display: none; } -:root[data-mode=full] #full { - 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); +:root[data-mode=full] #action-popup { + display: initial; } -.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; - align-items: center; - line-height: 1.5em; - margin: 0 -10px; - padding: 0.5em 10px; - cursor: pointer; - color: var(--text-color); - text-decoration: none; - background-color: transparent; - transition: background-color 0.125s linear 0s; - max-width: none; -} -.link-group:not([hidden]) { +#action-popup { display: flex; + flex-flow: column nowrap; + align-items: center; } -.link-group:hover, -.link-group:active { - color: var(--text-color); - text-decoration: none; -} -.link-group:hover>.link-group-label, -.link-group:active>.link-group-label { - text-decoration: underline; -} -.link-group:hover { - background-color: rgba(0, 0, 0, 0.05); -} -.link-group:active { - background-color: rgba(0, 0, 0, 0.1); -} -.link-group-icon { - width: 26px; - height: 26px; - text-align: center; - vertical-align: middle; - display: inline-block; - margin-right: 0.25em; - background-repeat: no-repeat; - background-size: contain; -} -.link-group-icon>input { + +body { + padding: 10px; margin: 0; - padding: 0; + font-family: 'Segoe UI', Tahoma, sans-serif; + font-size: var(--font-size); + width: max-content; + height: max-content; + background-color: var(--background-color); } -.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); filter: var(--svg-filter); } -.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); filter: var(--svg-filter); } -.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); filter: var(--svg-filter); } -.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); filter: var(--svg-filter); } -.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); filter: var(--svg-filter); } -.link-group-icon[data-icon=profile] { background-image: url(/images/profile.svg); filter: var(--svg-filter); } -.link-group-label { - vertical-align: middle; -} -.link-group-badge { - margin-left: 0.5em; +/* Toggle */ + +body[data-loaded=true] .toggle-group { + transition: transform 0.35s; } -/* Toggle */ .toggle>input[type=checkbox] { width: 0; height: 0; @@ -185,19 +77,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,15 +101,6 @@ 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; -} .toggle-on, .toggle-off, @@ -224,12 +110,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 +131,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,227 +176,140 @@ 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; - top: -1px; - right: -1px; - bottom: -1px; -} + select.profile-select { - position: absolute; - left: 0; - top: 0; - width: 100%; + width: 7em; 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; cursor: pointer; font-size: var(--font-size); + overflow: hidden; + text-overflow: ellipsis; } -.profile-select optgroup { - color: #666666; - font-weight: normal; - font-style: normal; - background-color: #f2f2f2; + +/* Action Containers */ + +h2.action-title { + padding: 0; + margin: 0; + font-size: 1.125em; + line-height: 1.5; } -.profile-select option { - color: #333333; - font-weight: normal; - font-style: normal; - background-color: initial; + +.action-icon:hover { + cursor: pointer; } -.nav-button-warning-badge { - pointer-events: none; - width: 12px; - height: 6px; - position: absolute; - right: calc(50% - 6px); - top: -8px; - z-index: 1; +.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; } -.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(/images/material-down-arrow.svg); - --icon-size: contain; +.low-emphasis { + position: relative; +} - -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); +.action-item-left { + flex: 1 1 auto; + align-self: center; + position: relative; + display: flex; + justify-content: flex-start; } -.nav-button-warning-badge-inner { - margin: 1px 2px; +.action-item-center { + flex: 1 1 auto; + align-self: center; + display: flex; + flex-flow: column nowrap; + align-items: center; + justify-content: center; } -.nav-button-warning-badge-outer { - animation: nav-button-warning-badge-animation ease-in-out 2s alternate infinite; +.action-item-right { + flex: 0 1 auto; + align-self: stretch; + display: flex; + flex-flow: row nowrap; + align-items: center; + align-content: center; + justify-content: flex-end; } -@keyframes nav-button-warning-badge-animation { - 0% { opacity: 1; background-color: #edc75e; } - 100% { opacity: 1; background-color: #333333; } + +.action-container:not([hidden]) { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; } -.warning-badge { - position: relative; - width: var(--badge-size); - height: var(--badge-size); - margin: 0; +.action-container button { + flex: 0 0 auto; +} + +/* Tooltip */ + +.tooltip { + color: #808080; padding: 0; - background-color: var(--warning-color-light); - border-radius: 50%; - box-shadow: var(--shadow-vertical); + margin: 0; + margin-top: 0.5em; } -.warning-badge:not([hidden]) { - display: block; + +.enable-dictionary-tooltip { + color: #f0ad4e; } -.warning-badge>.icon { - display: block; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: var(--warning-color); + +.tooltip>a:link, a:visited { + color: #f0ad4e; } + /* Mobile overrides */ /* Treat devices that can't hover as mobile devices */ @media (hover: none) { - #full { + #action-popup { display: initial; } - #mini { - display: none; - } body { min-width: 95%; width: max-content; font-size: calc(var(--font-size) * 2); text-align: center; } - h3 { - font-size: calc(var(--font-size) * 3.4); - } .toggle-on, .toggle-off { font-size: calc(var(--font-size) * 4); } @@ -532,6 +326,9 @@ select.profile-select { max-width: 95vw; overflow-wrap: break-word; } + select.profile-select { + font-size: calc(var(--font-size) * 2); + } } /* Dark mode before themes are applied diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js index 59b7711c58..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,6 +86,32 @@ class DisplayController { // Private + /** */ + _updateDisplayModifierKey() { + const {profiles, profileCurrent} = /** @type {import('settings').Options} */ (this._optionsFull); + /** @type {NodeListOf} */ + 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')); + } + } + } + /** * @param {MouseEvent} e */ @@ -202,9 +233,12 @@ 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._updateDisplayModifierKey(); void this._updateDictionariesEnabledWarnings(options); void this._updatePermissionsWarnings(options); @@ -235,8 +269,7 @@ 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++) { + 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 +278,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 +292,16 @@ 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) { - void this._setDefaultProfileIndex(value); + if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value < /** @type {import('settings').Options} */ (this._optionsFull).profiles.length) { + 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); + } + } } } @@ -283,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(); @@ -300,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'); + } } } @@ -313,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} */