Ctrl + Е.",
- "description": "Hotkeys description"
+ "message": "Ви також можете налаштувати гарячі клавіші на сторінці Управління гарячими клавішами в розширеннях Firefox . Вони будуть працювати на всіх вікнах і сторінках браузера.",
+ "description": "You can also configure hotkeys on the Manage extension shortcuts in Firefox page. They will work on all windows and browser pages."
},
"addHotKeyButton": {
"message": "Додати гарячу клавішу",
@@ -1031,10 +1031,6 @@
}
}
},
- "hotkeysDescription2": {
- "message": "Ви також можете налаштувати гарячі клавіші на сторінці Управління гарячими клавішами в розширеннях Firefox . Вони будуть працювати на всіх вікнах і сторінках браузера.",
- "description": "You can also configure hotkeys on the Manage extension shortcuts in Firefox page. They will work on all windows and browser pages."
- },
"muteTab": {
"message": "Вимкнути звук вкладки",
"description": "Mute tab"
diff --git a/addon/src/_locales/zh_CN/messages.json b/addon/src/_locales/zh_CN/messages.json
index 3407d0c5..61a33263 100644
--- a/addon/src/_locales/zh_CN/messages.json
+++ b/addon/src/_locales/zh_CN/messages.json
@@ -278,8 +278,8 @@
"description": "Hotkeys"
},
"hotkeysDescription": {
- "message": "在这里，你可以添加快捷键。【限制】
1. 这些快捷键只在网页中生效(网址协议为http:、https:)。而在浏览器页面(about:)则无法工作，因为 WebExtensions 的 API 不允许如此。
2. 某些快捷键会在不同的键盘布局中无法工作。例如，在英语布局中创建的
Ctrl + ~ ，在俄语布局中则无法工作，因为在后者中这个按键有另外的编码。要修复这个问题，你只要在后者中再创建一个快捷键 Ctrl + Ё。",
- "description": "Hotkeys description"
+ "message": "您也可以在页面配置快捷键。它们可以在所有窗口和浏览器页面工作。",
+ "description": "You can also configure hotkeys on the Manage extension shortcuts in Firefox page. They will work on all windows and browser pages."
},
"addHotKeyButton": {
"message": "添加快捷键",
@@ -1011,10 +1011,6 @@
}
}
},
- "hotkeysDescription2": {
- "message": "您也可以在页面配置快捷键。它们可以在所有窗口和浏览器页面工作。",
- "description": "You can also configure hotkeys on the Manage extension shortcuts in Firefox page. They will work on all windows and browser pages."
- },
"muteTab": {
"message": "静音标签页",
"description": "Mute tab"
diff --git a/addon/src/_locales/zh_TW/messages.json b/addon/src/_locales/zh_TW/messages.json
index 2fb392c2..deb58f94 100644
--- a/addon/src/_locales/zh_TW/messages.json
+++ b/addon/src/_locales/zh_TW/messages.json
@@ -278,8 +278,8 @@
"description": "Hotkeys"
},
"hotkeysDescription": {
- "message": "可以在這裡新增快速鍵。限制：
1. 這些快速鍵只適用於網頁 (http:, https:)，不適用於瀏覽器頁面 (about:)，因 WebExtension 的 API 不允許。
2. 有些快速鍵在不同的鍵盤配置可能無法運作。例如英文配置下設定的快速鍵
Ctrl + ~ 在俄羅斯文配置下無法運作，因為此按鍵在後者有不同的按鍵碼；在俄羅斯文配置下設定快速鍵 Ctrl +Ё 即可修復此問題。",
- "description": "Hotkeys description"
+ "message": "也可以在 Manage extension shortcuts in Firefox 設定全域快速鍵。",
+ "description": "You can also configure hotkeys on the Manage extension shortcuts in Firefox page. They will work on all windows and browser pages."
},
"addHotKeyButton": {
"message": "新增快速鍵",
@@ -1023,10 +1023,6 @@
}
}
},
- "hotkeysDescription2": {
- "message": "也可以在 Manage extension shortcuts in Firefox 設定全域快速鍵。",
- "description": "You can also configure hotkeys on the Manage extension shortcuts in Firefox page. They will work on all windows and browser pages."
- },
"muteTab": {
"message": "分頁靜音",
"description": "Mute tab"
diff --git a/addon/src/js/constants.js b/addon/src/js/constants.js
index 19a136f5..436705e5 100644
--- a/addon/src/js/constants.js
+++ b/addon/src/js/constants.js
@@ -4,6 +4,8 @@ export const STG_BASE_URL = browser.runtime.getURL('');
export const IS_BACKGROUND_PAGE = self.location.href.startsWith(MANIFEST.background.page);
+export const IS_MAC = (navigator.userAgentData?.platform || navigator.platform || '').toLowerCase().includes('mac');
+
export const ACTIVE_SYMBOL = '〇';
export const DISCARDED_SYMBOL = '✱';
export const STICKY_SYMBOL = '📌';
@@ -323,22 +325,11 @@ export const DEFAULT_OPTIONS = Object.freeze({
hotkeys: [
{
- ctrlKey: true,
- shiftKey: false,
- altKey: false,
- metaKey: false,
- key: '`',
- keyCode: 192, // TODO
+ value: `${IS_MAC ? 'Mac' : ''}Ctrl+Backquote`,
action: 'load-next-group',
groupId: 0,
- },
- {
- ctrlKey: true,
- shiftKey: true,
- altKey: false,
- metaKey: false,
- key: '`',
- keyCode: 192,
+ }, {
+ value: `${IS_MAC ? 'Mac' : ''}Ctrl+Shift+Backquote`,
action: 'load-prev-group',
groupId: 0,
},
diff --git a/addon/src/js/groups.js b/addon/src/js/groups.js
index 79aba960..5a5532a4 100644
--- a/addon/src/js/groups.js
+++ b/addon/src/js/groups.js
@@ -846,25 +846,25 @@ export function getTitle({id, title, isArchive, isSticky, tabs, iconViewType, ne
title = beforeTitle.join(' ') + ' ' + title;
}
- tabs = tabs.slice();
-
if (withCountTabs) {
- title += ' (' + tabsCountMessage(tabs, isArchive) + ')';
+ title += ' (' + tabsCountMessage(tabs.slice(), isArchive) + ')';
}
- if (withTabs && tabs.length) {
- title += ':\n' + tabs
- .slice(0, 30)
- .map(tab => Tabs.getTitle(tab, false, 70, !isArchive))
- .join('\n');
-
- if (tabs.length > 30) {
- title += '\n...';
+ if (withTabs) {
+ if (tabs.length) {
+ title += ':\n' + tabs
+ .slice(0, 30)
+ .map(tab => Tabs.getTitle(tab, false, 70, !isArchive))
+ .join('\n');
+
+ if (tabs.length > 30) {
+ title += '\n...';
+ }
}
}
if (window.localStorage.enableDebug) {
- let windowId = Cache.getWindowId(id) || tabs[0]?.windowId || 'no window';
+ let windowId = Cache.getWindowId(id) || tabs?.[0]?.windowId || 'no window';
title = `@${windowId}:#${id} ${title}`;
}
diff --git a/addon/src/js/hotkeys.js b/addon/src/js/hotkeys.js
new file mode 100644
index 00000000..5a955cf5
--- /dev/null
+++ b/addon/src/js/hotkeys.js
@@ -0,0 +1,102 @@
+
+const IS_MAC = (navigator.userAgentData?.platform || navigator.platform || '').toLowerCase().includes('mac');
+
+const mapValue = value => [value, value];
+
+export const NOT_SUPPORTED_CODE_KEYS = new Set([
+ 'Tab', 'CapsLock', 'Escape', 'Backspace', 'NumLock', 'OSLeft', 'OSRight',
+]);
+
+const FunctionalKeysRegExp = /^F([0-9]|1[0-2])$/;
+
+const codeKeyMap = new Map([
+ // digits
+ ...Array.from({length: 10}, (n, i) => [`Digit${i}`, i]),
+ ...Array.from({length: 10}, (n, i) => [`Numpad${i}`, i]),
+
+ // Functional keys
+ ...Array.from({length: 12}, (n, i) => `F${i + 1}`).map(mapValue),
+
+ // alphabet
+ ...Array.from({length: 26}, (n, i) => String.fromCharCode(i + 65)).map(char => [`Key${char}`, char]),
+
+ ...['Home', 'End', 'PageUp', 'PageDown', 'Insert', 'Delete', 'Space', 'Comma', 'Period', 'Quote', 'Backquote', 'Semicolon', 'Slash', 'Backslash', 'Enter', 'Equal', 'Minus'].map(mapValue),
+
+ ['NumpadEnter', 'Enter'],
+
+ ['NumpadDecimal', 'Decimal'],
+ ['NumpadSubtract', 'Subtract'],
+ ['NumpadMultiply', 'Multiply'],
+ ['NumpadDivide', 'Divide'],
+
+ ['ArrowUp', 'Up'],
+ ['ArrowDown', 'Down'],
+ ['ArrowLeft', 'Left'],
+ ['ArrowRight', 'Right'],
+
+ ...['MediaPlayPause', 'MediaStop'].map(mapValue),
+ ['MediaTrackNext', 'MediaNextTrack'],
+ ['MediaTrackPrevious', 'MediaPrevTrack'],
+]);
+
+function normalizeEventKey({code}) {
+ return codeKeyMap.get(code);
+}
+
+function isFuncKeyValue(value) {
+ return FunctionalKeysRegExp.test(value);
+}
+
+export function isValidHotkeyEvent(event) {
+ if (!event.ctrlKey && !event.altKey && !event.metaKey) {
+ return isFuncKeyValue(event.code);
+ }
+
+ if (!normalizeEventKey(event)) {
+ return false;
+ }
+
+ return true;
+}
+
+export function isValidHotkeyValue(value) {
+ const parts = value.split('+');
+ return (parts.length >= 2 && parts.every(key => key)) || isFuncKeyValue(value);
+}
+
+// Command ???? хз
+export function nomalizeValueForPlatform(value) {
+ if (IS_MAC && value.startsWith('Ctrl')) {
+ return value.replace('Ctrl', 'MacCtrl');
+ } else if (!IS_MAC && value.startsWith('MacCtrl')) {
+ return value.replace('MacCtrl', 'Ctrl');
+ }
+
+ return value;
+}
+
+export function eventToHotkeyValue(event) {
+ const valueParts = [];
+
+ if (event.ctrlKey) {
+ valueParts.push(IS_MAC ? 'MacCtrl' : 'Ctrl');
+ }
+
+ if (event.metaKey) {
+ valueParts.push('Command');
+ }
+
+ if (event.altKey) {
+ valueParts.push('Alt');
+ }
+
+ if (event.shiftKey) {
+ valueParts.push('Shift');
+ }
+
+ const normalizedKey = normalizeEventKey(event);
+
+ valueParts.push(normalizedKey || '');
+
+ return valueParts.join('+');
+}
diff --git a/addon/src/js/utils.js b/addon/src/js/utils.js
index cacd0e1c..3da36a47 100644
--- a/addon/src/js/utils.js
+++ b/addon/src/js/utils.js
@@ -12,6 +12,8 @@ const tagsToReplace = {
const INNER_HTML = 'innerHTML';
+export const IS_MAC = (navigator.userAgentData?.platform || navigator.platform || '').toLowerCase().includes('mac');
+
export function unixNow() {
return Math.round(Date.now() / 1000);
}
@@ -470,7 +472,7 @@ export function normalizeGroupIcon(iconUrl) {
}
export function resizeImage(img, height, width, useTransparency = true, ...canvasParams) { // img: new Image()
- let canvas = document.createElement('canvas'),
+ const canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
if (!useTransparency) {
@@ -486,7 +488,7 @@ export function resizeImage(img, height, width, useTransparency = true, ...canva
}
function isCanvasBlank(canvas, useTransparency, ...canvasParams) {
- let blank = document.createElement('canvas'),
+ const blank = document.createElement('canvas'),
canvasDataUrl = canvas.toDataURL(...canvasParams);
if (!useTransparency) {
@@ -499,7 +501,7 @@ function isCanvasBlank(canvas, useTransparency, ...canvasParams) {
let isEmpty = canvasDataUrl === blank.toDataURL(...canvasParams);
if (!isEmpty) {
- let blankContext = blank.getContext('2d');
+ const blankContext = blank.getContext('2d');
blankContext.fillStyle = 'rgb(255, 255, 255)';
blankContext.fillRect(0, 0, blank.width, blank.height);
@@ -570,20 +572,20 @@ export function compareVersions(a, b) {
return 0;
}
- let regExStrip0 = /(\.0+)+$/,
+ const regExStrip0 = /(\.0+)+$/,
segmentsA = a.replace(regExStrip0, '').split('.'),
segmentsB = b.replace(regExStrip0, '').split('.'),
l = Math.min(segmentsA.length, segmentsB.length);
for (let i = 0; i < l; i++) {
- let diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
+ const diff = parseInt(segmentsA[i], 10) - parseInt(segmentsB[i], 10);
if (diff) {
return diff > 0 ? 1 : -1;
}
}
- let diff = segmentsA.length - segmentsB.length;
+ const diff = segmentsA.length - segmentsB.length;
if (diff) {
return diff > 0 ? 1 : -1;
diff --git a/addon/src/manifest.json b/addon/src/manifest.json
index c1e8accb..c42fa14b 100644
--- a/addon/src/manifest.json
+++ b/addon/src/manifest.json
@@ -59,8 +59,8 @@
"content_scripts": [
{
"matches": ["
-
-
-
-
-
-
+
-
+
-
- ![]()
+
+ ![]()
@@ -1214,6 +1196,25 @@
width: 300px;
}
+ .hotkeys {
+ .control .input {
+ width: 15em;
+ ime-mode: disabled;
+ }
+ .control:not(.key-success):not(.key-error) .input:focus {
+ --in-content-border-focus: transparent;
+ outline: 2px solid dodgerblue;
+ }
+ .control.key-success .input:focus {
+ --in-content-border-focus: transparent;
+ outline: 2px solid limegreen;
+ }
+ .control.key-error .input {
+ --in-content-border-focus: transparent;
+ outline: 2px solid orangered;
+ }
+ }
+
.hotkeys > .field {
&:not(:last-child) {
border-bottom: 1px solid var(--color-hr);
diff --git a/addon/src/stg-background.js b/addon/src/stg-background.js
index 300fadf4..441c0f2e 100644
--- a/addon/src/stg-background.js
+++ b/addon/src/stg-background.js
@@ -14,6 +14,7 @@ import * as Groups from './js/groups.js';
import * as Tabs from './js/tabs.js';
import * as Windows from './js/windows.js';
import * as Management from './js/management.js';
+import * as Hotkeys from './js/hotkeys.js';
self.IS_TEMPORARY = false;
@@ -2699,9 +2700,10 @@ async function saveOptions(_options) {
const tabs = await Tabs.get(null, null, null, {
discarded: false,
}),
- actionData = {
+ actionData = JSON.clone({
action: 'update-hotkeys',
- };
+ hotkeys: options.hotkeys,
+ });
tabs.forEach(tab => Tabs.sendMessage(tab.id, actionData));
}
@@ -2863,9 +2865,7 @@ async function restoreBackup(data, clearAddonDataBeforeRestore = false) {
await loadingBrowserAction();
- const {os} = await browser.runtime.getPlatformInfo(),
- isMac = os === browser.runtime.PlatformOs.MAC,
- currentData = {};
+ const currentData = {};
let {lastCreatedGroupPosition} = await Storage.get('lastCreatedGroupPosition');
@@ -2917,9 +2917,7 @@ async function restoreBackup(data, clearAddonDataBeforeRestore = false) {
data.groups ??= [];
data.hotkeys ??= [];
- if (!isMac) {
- data.hotkeys.forEach(hotkey => hotkey.metaKey = false);
- }
+ data.hotkeys.forEach(hotkey => hotkey.value = Hotkeys.nomalizeValueForPlatform(hotkey.value));
data.groups.forEach(groupToRestore => {
if (!currentData.groups.some(currentGroup => currentGroup.id === groupToRestore.moveToGroupIfNoneCatchTabRules)) {
@@ -3666,6 +3664,7 @@ async function runMigrateForData(data) {
{
version: '5.1.1',
async migration() {
+ // migrate groups
const mainGroupId = data.groups.find(group => group.isMain)?.id;
data.groups.forEach(group => {
@@ -3678,6 +3677,62 @@ async function runMigrateForData(data) {
delete group.isMain;
delete group.moveToMainIfNotInCatchTabRules;
});
+
+ // migrate hotkeys
+ const keysMap = new Map([
+ [110, 'Decimal'],
+ [109, 'Subtract'],
+ [106, 'Multiply'],
+ [111, 'Divide'],
+ [222, 'Quote'],
+ [192, 'Backquote'],
+ [13, 'Enter'],
+ [191, 'Slash'],
+ [220, 'Backslash'],
+ [61, 'Equal'],
+ [173, 'Minus'],
+ [32, 'Space'],
+ [188, 'Comma'],
+ [190, 'Period'],
+ [59, 'Semicolon'],
+
+ ...['Home', 'End', 'PageUp', 'PageDown', 'Insert', 'Delete', 'Enter'].map(value => [value, value]),
+ ]);
+
+ function normalizeHotkeyKey({key, keyCode}) {
+ return keysMap.get(keyCode) || keysMap.get(key) || key.toUpperCase();
+ }
+
+ data.hotkeys.forEach(hotkey => {
+ const valueParts = [];
+
+ if (hotkey.ctrlKey) {
+ valueParts.push(IS_MAC ? 'MacCtrl' : 'Ctrl');
+ }
+
+ if (hotkey.metaKey) {
+ valueParts.push('Command');
+ }
+
+ if (hotkey.altKey) {
+ valueParts.push('Alt');
+ }
+
+ if (hotkey.shiftKey) {
+ valueParts.push('Shift');
+ }
+
+ valueParts.push(normalizeHotkeyKey(hotkey));
+
+ hotkey.value = valueParts.join('+');
+
+ delete hotkey.ctrlKey;
+ delete hotkey.shiftKey;
+ delete hotkey.altKey;
+ delete hotkey.metaKey;
+ delete hotkey.key;
+ delete hotkey.keyCode;
+ });
},
},
];
diff --git a/addon/src/web/hotkeys.js b/addon/src/web/content-script.js
similarity index 67%
rename from addon/src/web/hotkeys.js
rename to addon/src/web/content-script.js
index 45a86acb..eccc883d 100644
--- a/addon/src/web/hotkeys.js
+++ b/addon/src/web/content-script.js
@@ -1,103 +1,88 @@
'use strict';
-import './move-tab-popup.scss';
-import Messages from '../js/messages.js';
+import './select-group-popup.scss';
+import {isValidHotkeyEvent, eventToHotkeyValue, NOT_SUPPORTED_CODE_KEYS} from '../js/hotkeys.js';
-let errorCounter = 0,
- hotkeys = [],
+let hotkeys = [],
foundHotKey = false;
-const POPUP_ID = 'stg-move-tab-to-group-popup-wrapper';
+const POPUP_ID = 'stg-select-group-popup-wrapper';
-browser.runtime.onMessage.addListener(changeHotkeysListener);
+browser.runtime.onMessage.addListener(onMessageListener);
-window.addEventListener('unload', unsubscribeAllListeners);
+// window.addEventListener('unload', unsubscribeAllListeners);
-init();
-
-async function init() {
- removeWindowListeners();
-
- let result = null;
+loadHotkeys();
+addWindowListeners();
+async function loadHotkeys(errorCounter = 0) {
try {
- result = await browser.storage.local.get({hotkeys});
-
- if (!result) {
- throw Error;
- }
+ ({hotkeys} = await browser.storage.local.get({hotkeys}));
} catch (e) {
errorCounter++;
if (errorCounter < 100) {
- setTimeout(init, 200);
+ setTimeout(loadHotkeys, 200, errorCounter);
} else {
console.error('[STG] can\'t load hotkeys from storage');
- errorCounter = 0;
}
-
- return;
- }
-
- hotkeys = result.hotkeys;
-
- if (hotkeys.length) {
- addWindowListeners();
}
}
-function changeHotkeysListener(request) {
+function onMessageListener(request) {
if (request.action === 'update-hotkeys') {
- init();
+ hotkeys = request.hotkeys;
} else if (request.action === 'show-groups-popup') {
- showGroupsPopup(request);
+ if (foundHotKey) {
+ setTimeout(onMessageListener, 100, request);
+ } else {
+ showGroupsPopup(request);
+ }
} else if (request.action === 'show-prompt') {
return showPrompt(request);
}
}
-function removeWindowListeners() {
- window.removeEventListener('keydown', checkKey);
- window.removeEventListener('keyup', resetFoundHotKey);
-}
+// function removeWindowListeners() {
+// window.removeEventListener('keydown', checkKey);
+// window.removeEventListener('keyup', resetFoundHotKey);
+// }
function addWindowListeners() {
window.addEventListener('keydown', checkKey);
window.addEventListener('keyup', resetFoundHotKey);
}
-function unsubscribeAllListeners() {
- removeWindowListeners();
- browser.runtime.onMessage.removeListener(changeHotkeysListener);
-}
+// function unsubscribeAllListeners() {
+// removeWindowListeners();
+// browser.runtime.onMessage.removeListener(onMessageListener);
+// }
function resetFoundHotKey() {
foundHotKey = false;
}
-function checkKey(e) {
- if (foundHotKey || [KeyEvent.DOM_VK_SHIFT, KeyEvent.DOM_VK_CONTROL, KeyEvent.DOM_VK_ALT, KeyEvent.DOM_VK_META].includes(e.keyCode)) { // not track only auxiliary keys
+function checkKey(event) {
+ if (
+ foundHotKey ||
+ !hotkeys.length ||
+ event.repeat ||
+ NOT_SUPPORTED_CODE_KEYS.has(event.code) ||
+ document.getElementById(POPUP_ID) ||
+ !isValidHotkeyEvent(event)
+ ) {
return;
}
- hotkeys.some(function(hotkey) {
- if (hotkey.ctrlKey === e.ctrlKey &&
- hotkey.shiftKey === e.shiftKey &&
- hotkey.altKey === e.altKey &&
- hotkey.metaKey === e.metaKey &&
- (
- (hotkey.keyCode && hotkey.keyCode === e.keyCode) ||
- (!hotkey.keyCode && !e.keyCode && hotkey.key.toUpperCase() === e.key.toUpperCase())
- )
- ) {
+ const hotkeyValue = eventToHotkeyValue(event);
+
+ hotkeys.some(hotkey => {
+ if (hotkeyValue === hotkey.value) {
foundHotKey = true;
- stopEvent(e);
+ stopEvent(event);
- Messages.sendMessage(hotkey.action, {
- groupId: hotkey.groupId,
- })
- .then(() => foundHotKey = false);
+ browser.runtime.sendMessage(hotkey).catch(() => {});
return true;
}
@@ -107,7 +92,6 @@ function checkKey(e) {
function stopEvent(e) {
e.preventDefault();
e.stopPropagation();
- e.stopImmediatePropagation();
}
function showGroupsPopup(data) {
@@ -115,7 +99,7 @@ function showGroupsPopup(data) {
return;
}
- let wrapper = document.createElement('div'),
+ const wrapper = document.createElement('div'),
closeGroupsPopup = wrapper.remove.bind(wrapper),
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -124,15 +108,15 @@ function showGroupsPopup(data) {
Object.assign(wrapper, {
id: POPUP_ID,
onclick: closeGroupsPopup,
- onkeydown: ({keyCode}) => KeyEvent.DOM_VK_ESCAPE === keyCode ? closeGroupsPopup() : null,
+ onkeydown: ({code}) => code === 'Escape' ? closeGroupsPopup() : null,
});
document.body.append(wrapper);
- let main = document.createElement('div');
+ const main = document.createElement('div');
main.classList.add('stg-popup-main');
wrapper.append(main);
- let header = document.createElement('div');
+ const header = document.createElement('div');
header.classList = 'stg-popup-has-text stg-popup-header';
Object.assign(header, {
tabIndex: -1,
@@ -143,38 +127,38 @@ function showGroupsPopup(data) {
return;
}
- if (KeyEvent.DOM_VK_DOWN === e.keyCode) {
+ if (e.code === 'ArrowDown') {
setFocusToNextElement(groupsWrapper.lastElementChild, 'down', e);
- } else if (KeyEvent.DOM_VK_UP === e.keyCode) {
+ } else if (e.code === 'ArrowUp') {
setFocusToNextElement(groupsWrapper.firstElementChild, 'up', e);
}
},
});
main.append(header);
- let groupsWrapper = document.createElement('div');
+ const groupsWrapper = document.createElement('div');
groupsWrapper.classList.add('stg-popup-groups-wrapper');
main.append(groupsWrapper);
function checkUpDownKeys(e) {
- if ([KeyEvent.DOM_VK_PAGE_UP, KeyEvent.DOM_VK_HOME].includes(e.keyCode)) {
+ if (['PageUp', 'Home'].includes(e.code)) {
setFocusToNextElement(groupsWrapper.lastElementChild, 'down', e);
return true;
- } else if ([KeyEvent.DOM_VK_PAGE_DOWN, KeyEvent.DOM_VK_END].includes(e.keyCode)) {
+ } else if (['PageDown', 'End'].includes(e.code)) {
setFocusToNextElement(groupsWrapper.firstElementChild, 'up', e);
return true;
}
}
function createGroupNode(group, isEnabled) {
- let groupNode = document.createElement('div');
+ const groupNode = document.createElement('div');
groupNode.dataset.groupId = group.id;
groupNode.classList.add('stg-popup-group');
- let imgNode = document.createElement('img');
+ const imgNode = document.createElement('img');
imgNode.src = group.iconUrl.startsWith('/icons') ? browser.runtime.getURL(group.iconUrl) : group.iconUrl;
- let figureNode = document.createElement('figure');
+ const figureNode = document.createElement('figure');
figureNode.classList = 'group-icon';
group.isSticky && figureNode.classList.add('is-sticky');
figureNode.append(imgNode);
@@ -182,13 +166,13 @@ function showGroupsPopup(data) {
groupNode.append(figureNode);
if (group.contextualIdentity) {
- let containerImgNode = document.createElement('img');
+ const containerImgNode = document.createElement('img');
containerImgNode.title = group.contextualIdentity.name;
containerImgNode.src = group.contextualIdentity.iconUrl;
containerImgNode.style.fill = group.contextualIdentity.colorCode;
- let containerFigureNode = document.createElement('figure');
+ const containerFigureNode = document.createElement('figure');
containerFigureNode.classList = 'container-icon';
containerFigureNode.append(containerImgNode);
@@ -204,7 +188,7 @@ function showGroupsPopup(data) {
groupNode.append(archiveImgNode);
}*/
- let titleNode = document.createElement('span');
+ const titleNode = document.createElement('span');
titleNode.innerText = group.title;
titleNode.classList.add('stg-popup-has-text');
groupNode.append(titleNode);
@@ -215,7 +199,7 @@ function showGroupsPopup(data) {
groupNode.onmouseover = () => groupsWrapper.contains(document.activeElement) && header.focus();
groupNode.onclick = function(sendData) {
- Messages.sendMessage(sendData).catch(e => console.error(e));
+ browser.runtime.sendMessage(sendData).catch(() => {});
closeGroupsPopup();
}.bind(null, {
...data,
@@ -228,14 +212,14 @@ function showGroupsPopup(data) {
return;
}
- if (e.key === 'Enter' || e.code === 'Space') {
+ if (e.code.includes('Enter') || e.code === 'Space') {
stopEvent(e);
groupNode.click();
- } else if (e.key === 'Tab') {
+ } else if (e.code === 'Tab') {
setFocusToNextElement(groupNode, e.shiftKey ? 'up' : 'down', e);
- } else if (e.key === 'ArrowDown') {
+ } else if (e.code === 'ArrowDown') {
setFocusToNextElement(groupNode, 'down', e);
- } else if (e.key === 'ArrowUp') {
+ } else if (e.code === 'ArrowUp') {
setFocusToNextElement(groupNode, 'up', e);
}
};
@@ -256,8 +240,9 @@ function showGroupsPopup(data) {
stopEvent(eventToStop);
}
- let nodes = Array.from(groupsWrapper.children).filter(n => !n.classList.contains('stg-popup-disabled')),
- nodeIndex = nodes.indexOf(node);
+ const nodes = Array.from(groupsWrapper.children).filter(n => !n.classList.contains('stg-popup-disabled'));
+
+ let nodeIndex = nodes.indexOf(node);
if ('down' === vector) {
nodeIndex++;
@@ -289,7 +274,7 @@ function showGroupsPopup(data) {
data.groups.forEach(group => groupsWrapper.append(createGroupNode(group, !data.disableGroupIds.includes(group.id))));
if (true !== data.disableNewGroupItem) {
- let newGroupNode = createGroupNode({
+ const newGroupNode = createGroupNode({
id: 'new',
title: browser.i18n.getMessage('createNewGroup'),
iconUrl: browser.runtime.getURL('/icons/group-new.svg'),
@@ -313,7 +298,7 @@ function showGroupsPopup(data) {
}
});
} else {
- let hoveredElements = document.querySelectorAll(':hover');
+ const hoveredElements = document.querySelectorAll(':hover');
if (groupsWrapper.contains(hoveredElements[hoveredElements.length - 1])) {
header.focus();
diff --git a/addon/src/web/move-tab-popup.scss b/addon/src/web/select-group-popup.scss
similarity index 96%
rename from addon/src/web/move-tab-popup.scss
rename to addon/src/web/select-group-popup.scss
index 56cc1d5b..52bb3caf 100644
--- a/addon/src/web/move-tab-popup.scss
+++ b/addon/src/web/select-group-popup.scss
@@ -1,7 +1,7 @@
// reset styles
-#stg-move-tab-to-group-popup-wrapper,
-#stg-move-tab-to-group-popup-wrapper div {
+#stg-select-group-popup-wrapper,
+#stg-select-group-popup-wrapper div {
width: unset;
margin: unset;
padding: unset;
@@ -10,7 +10,7 @@
box-shadow: unset;
}
-#stg-move-tab-to-group-popup-wrapper {
+#stg-select-group-popup-wrapper {
position: fixed;
left: 0;
top: 0;
diff --git a/addon/webpack.config.mjs b/addon/webpack.config.mjs
index 5e9d64f5..d9a5002d 100644
--- a/addon/webpack.config.mjs
+++ b/addon/webpack.config.mjs
@@ -27,7 +27,7 @@ export default {
'popup/popup': './popup/popup.js',
'options/options': './options/options.js',
'manage/manage': './manage/manage.js',
- 'web/hotkeys': './web/hotkeys.js',
+ 'web/content-script': './web/content-script.js',
},
experiments: {
outputModule: true,
@@ -57,6 +57,7 @@ export default {
utils: '/js/utils.js',
json: '/js/json.js',
storage: '/js/storage.js',
+ hotkeys: '/js/hotkeys.js',
// vue mixins
'default-group.mixin': '/js/mixins/default-group.mixin.js',
@@ -141,6 +142,7 @@ export default {
'js/tabs.js',
'js/windows.js',
'js/management.js',
+ 'js/hotkeys.js',
'js/mixins',