Release Vulpes OS 2.7-preview.22
This commit is contained in:
OverSu
parent
200d1fb235
commit
a138f97877
294 changed files with 515786 additions and 187 deletions
294
host/actors/KeypadChild.sys.mjs
Normal file
294
host/actors/KeypadChild.sys.mjs
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
import {nextKeypadTarget} from 'resource://vulpes/services/keypad-navigation.mjs';
|
||||
import {KeypadText} from 'resource://vulpes/services/keypad-text.mjs';
|
||||
import {InputEditor} from 'resource://vulpes/services/input-editor.mjs';
|
||||
|
||||
export class KeypadChild extends JSWindowActorChild {
|
||||
receiveMessage(message) {
|
||||
if (message.name === 'Vulpes:FocusBrowserToolbar') {
|
||||
if (this.document.location.hostname !== 'system.localhost') return;
|
||||
const bar = [...this.document.querySelectorAll('.chrome .urlbar')].find(element => {
|
||||
if (!element.checkVisibility({checkOpacity:true,checkVisibilityCSS:true})) return false;
|
||||
const rect = element.getBoundingClientRect();
|
||||
return rect.width > 0 && element.contains(this.document.elementFromPoint(
|
||||
rect.x + rect.width / 2, rect.y + rect.height / 2));
|
||||
});
|
||||
if (bar) this.select(bar);
|
||||
return;
|
||||
}
|
||||
if (message.name !== 'Vulpes:Navigate') return;
|
||||
const {key, code = '', keyCode = 0, repeat = false} = message.data;
|
||||
if (typeof key !== 'string' || key.length > 32) return;
|
||||
const document = this.document, win = this.contentWindow;
|
||||
if (key === 'F2') {
|
||||
if (!repeat) this.sendAsyncMessage('Vulpes:KeypadNotifications');
|
||||
return;
|
||||
}
|
||||
const exposed = element => {
|
||||
if (!element.checkVisibility({checkOpacity:true,checkVisibilityCSS:true})) return false;
|
||||
const rect = element.getBoundingClientRect();
|
||||
const x = rect.x + rect.width / 2, y = rect.y + rect.height / 2;
|
||||
return x >= 0 && x < win.innerWidth && y >= 0 && y < win.innerHeight &&
|
||||
element.contains(document.elementFromPoint(x, y));
|
||||
};
|
||||
this.composer ||= new KeypadText();
|
||||
if (key==='#' && !repeat) {
|
||||
this.hashHoldHandled=false;
|
||||
this.hashStartMode=this.composer.mode;
|
||||
this.hashStartReturnMode=this.composer.returnMode;
|
||||
}
|
||||
const target = document.activeElement;
|
||||
const editing = !target?.readOnly && (target?.isContentEditable || target?.localName === 'textarea' ||
|
||||
(target?.localName === 'input' && ['text','search','email','url','tel','password','number'].includes(target.type)));
|
||||
const modal = [...document.querySelectorAll('[aria-modal="true"],[data-type="confirm"],[data-type="action"]')]
|
||||
.reverse().find(exposed);
|
||||
if (!editing || modal) { this.composer.commit(); this.hint?.remove(); }
|
||||
if (modal && !this.modalAnchor && target?.localName === 'select') this.modalAnchor = target;
|
||||
if (!modal) this.modalAnchor = null;
|
||||
const browserControls = target?.closest?.('.chrome .controls');
|
||||
const inBrowserToolbar = browserControls && document.location.hostname === 'system.localhost';
|
||||
// Keep toolbar keys in Gaia; Down returns to the browser's content frame.
|
||||
if (!editing && !modal && (!inBrowserToolbar || key === 'ArrowDown')) {
|
||||
for (const frame of document.querySelectorAll('iframe')) {
|
||||
if (!frame.checkVisibility({checkOpacity:true,checkVisibilityCSS:true})) continue;
|
||||
const rect = frame.getBoundingClientRect();
|
||||
if (rect.width <= 0 || rect.height <= 0) continue;
|
||||
if (document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2) !== frame) continue;
|
||||
if (frame.browsingContext) {
|
||||
if (inBrowserToolbar) frame.focus();
|
||||
const browserContent = message.data.browserContent ||
|
||||
document.location.hostname === 'system.localhost' &&
|
||||
!!frame.closest('.appWindow')?.querySelector('.chrome .urlbar');
|
||||
this.sendAsyncMessage('Vulpes:KeypadRoute', {
|
||||
contextId:frame.browsingContext.id, key, code, keyCode, repeat, browserContent,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// The Nokia's red key maps to F4; keep Gaia's own call controls.
|
||||
if (key === 'F4' || key === 'EndCall') {
|
||||
if (repeat) return;
|
||||
this.composer.commit(); this.hint?.remove();
|
||||
const hangup = [...document.querySelectorAll('#callbar-hang-up,#incoming-reject')].find(exposed);
|
||||
if (hangup && !hangup.disabled) hangup.click();
|
||||
else this.sendAsyncMessage('Vulpes:KeypadHome');
|
||||
return;
|
||||
}
|
||||
// Gaia's dial pad is touch-driven, including its own number model.
|
||||
if (!modal && document.location.hostname === 'communications.localhost' && !editing) {
|
||||
const digit = /^[0-9*#]$/.test(key) ? key : key === 'Backspace' ? 'delete' : null;
|
||||
const button = digit && document.querySelector('[role="key"][data-value="'+digit+'"]');
|
||||
if (button && exposed(button)) { this.activate(button); return; }
|
||||
}
|
||||
if (!modal && key === 'F1') {
|
||||
const button = [...document.querySelectorAll('#callbar-answer,#incoming-answer,#keypad-callbar-call-action')].find(exposed);
|
||||
if (button && !button.disabled) { button.click(); return; }
|
||||
}
|
||||
if (editing && !modal && !['Escape', 'BrowserBack', 'GoBack', 'ContextMenu', 'ArrowUp', 'ArrowDown'].includes(key)) {
|
||||
if (key==='#' && repeat && !this.hashHoldHandled &&
|
||||
Services.env.get('VULPES_DEVICE')==='beatles' && !['tel','number'].includes(target.type)) {
|
||||
this.hashHoldHandled=true;
|
||||
this.composer.setT9(this.hashStartMode!=='t9',
|
||||
this.hashStartMode==='t9' ? this.hashStartReturnMode : this.hashStartMode);
|
||||
if (this.composer.mode==='t9') this.loadT9Dictionary();
|
||||
this.showMode(target);
|
||||
return;
|
||||
}
|
||||
if (!repeat || !/^[0-9*#]$/.test(key)) this.editKey(target, key);
|
||||
return;
|
||||
}
|
||||
if (['Escape', 'BrowserBack', 'GoBack', 'Backspace'].includes(key)) {
|
||||
this.composer.commit(); this.hint?.remove();
|
||||
const addressCancel = document.querySelector('#rocketbar.active #rocketbar-cancel');
|
||||
if (addressCancel && exposed(addressCancel)) { addressCancel.click(); return; }
|
||||
const cancel = modal?.querySelector('[data-action="cancel"],button.cancel,button[data-l10n-id="cancel"]');
|
||||
if (cancel) { cancel.click(); this.modalAnchor?.focus({preventScroll:true}); return; }
|
||||
const header = [...document.querySelectorAll('gaia-header[action="back"],gaia-header[action="close"]')]
|
||||
.find(exposed);
|
||||
const back = header?.shadowRoot?.querySelector('.action-button') || header?.querySelector('.action-button') ||
|
||||
[...document.querySelectorAll('[data-action="back"],button.back,[role="button"].back')]
|
||||
.find(exposed);
|
||||
if (back) back.click();
|
||||
else this.sendAsyncMessage('Vulpes:KeypadHome');
|
||||
return;
|
||||
}
|
||||
if (key === 'ContextMenu') {
|
||||
this.sendAsyncMessage('Vulpes:KeypadCards');
|
||||
return;
|
||||
}
|
||||
if (!modal && target?.localName === 'select' && ['Enter','Accept','Select'].includes(key)) {
|
||||
target.click();
|
||||
return;
|
||||
}
|
||||
if (!modal && target?.type === 'range' && ['ArrowLeft','ArrowRight'].includes(key)) {
|
||||
key === 'ArrowLeft' ? target.stepDown() : target.stepUp();
|
||||
target.dispatchEvent(new win.Event('input', {bubbles:true}));
|
||||
target.dispatchEvent(new win.Event('change', {bubbles:true}));
|
||||
return;
|
||||
}
|
||||
this.composer.commit(); this.hint?.remove();
|
||||
const arrows = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
|
||||
if (!arrows.includes(key) && !['Enter', 'Accept', 'Select'].includes(key)) {
|
||||
return;
|
||||
}
|
||||
const root = modal || (inBrowserToolbar ? browserControls : document);
|
||||
const candidates = [...root.querySelectorAll('a[href],button,input,select,textarea,[contenteditable="true"],[role="button"],[role="key"],[role="tab"],[tabindex]:not([tabindex="-1"]),[data-vulpes-keypad-focus],gaia-app-icon,gaia-pin-card,gaia-switch,gaia-checkbox')];
|
||||
if (inBrowserToolbar) candidates.push(...browserControls.querySelectorAll('.urlbar'));
|
||||
for (const header of root.querySelectorAll('gaia-header'))
|
||||
candidates.push(...(header.shadowRoot?.querySelectorAll('button') || []));
|
||||
const elements = [...new Set(candidates)].filter(element => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return !element.disabled && !element.hasAttribute('disabled') && !element.readOnly && element.getAttribute('aria-disabled') !== 'true' &&
|
||||
element.checkVisibility({checkOpacity:true,checkVisibilityCSS:true}) &&
|
||||
rect.width > 0 && rect.height > 0 && rect.right > 0 && rect.left < win.innerWidth;
|
||||
});
|
||||
if (!elements.length) {
|
||||
if (key === 'ArrowUp' && message.data.browserContent && win.scrollY <= 0)
|
||||
this.sendAsyncMessage('Vulpes:KeypadToolbar');
|
||||
else win.scrollBy({top:key === 'ArrowUp' ? -80 : key === 'ArrowDown' ? 80 : 0});
|
||||
return;
|
||||
}
|
||||
const focused = elements.includes(document.activeElement) ? document.activeElement : null;
|
||||
const compactSelection = document.documentElement.dataset.vulpesLayout === 'compact' ?
|
||||
document.querySelector('[data-vulpes-compact-selected]') : null;
|
||||
const current = elements.indexOf(focused || compactSelection || (this.selected?.isConnected && this.selected));
|
||||
const rects = elements.map(element => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return {x:rect.x + rect.width / 2, y:rect.y + rect.height / 2};
|
||||
});
|
||||
if (!arrows.includes(key)) {
|
||||
this.activate(elements[current < 0 ? 0 : current]);
|
||||
if (modal && !modal.isConnected) this.modalAnchor?.focus({preventScroll:true});
|
||||
return;
|
||||
}
|
||||
const index = nextKeypadTarget(rects, current, key);
|
||||
if (key === 'ArrowUp' && message.data.browserContent && win.scrollY <= 0 && (current < 0 || index < 0)) {
|
||||
this.sendAsyncMessage('Vulpes:KeypadToolbar');
|
||||
return;
|
||||
}
|
||||
if (index < 0) {
|
||||
win.scrollBy({top:key === 'ArrowUp' ? -80 : key === 'ArrowDown' ? 80 : 0});
|
||||
return;
|
||||
}
|
||||
this.select(elements[index]);
|
||||
}
|
||||
select(element) {
|
||||
const document = this.document;
|
||||
if (!this.style) {
|
||||
this.style = document.createElement('style');
|
||||
this.style.textContent = '[data-vulpes-keypad-focus]{outline:2px solid #00aaff !important;outline-offset:-2px !important;}';
|
||||
document.documentElement.append(this.style);
|
||||
}
|
||||
this.composer?.commit(); this.hint?.remove();
|
||||
this.selected?.removeAttribute('data-vulpes-keypad-focus');
|
||||
this.selected = element;
|
||||
this.selected.setAttribute('data-vulpes-keypad-focus', '');
|
||||
if (!this.selected.hasAttribute('tabindex')) this.selected.setAttribute('tabindex', '-1');
|
||||
this.selected.focus({preventScroll:true});
|
||||
this.selected.scrollIntoView({block:'nearest',inline:'nearest'});
|
||||
}
|
||||
activate(element) {
|
||||
if (element.disabled || element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true') return;
|
||||
if (['gaia-switch', 'gaia-checkbox'].includes(element.localName)) {
|
||||
// The component owns toggling and change events inside its shadow tree.
|
||||
// Calling the host's native click from this actor bypasses that handler.
|
||||
element.shadowRoot?.querySelector(element.localName === 'gaia-switch' ? '#switch' : '#checkbox')?.click();
|
||||
return;
|
||||
}
|
||||
if (element.getAttribute('role') === 'key' && element.hasAttribute('data-value')) {
|
||||
for (const type of ['touchstart','touchend'])
|
||||
element.dispatchEvent(new this.contentWindow.Event(type,{bubbles:true,cancelable:true}));
|
||||
} else element.click();
|
||||
}
|
||||
editKey(element, key) {
|
||||
const editor = new InputEditor(this.contentWindow);
|
||||
editor.focus(element);
|
||||
if (element.classList.contains('recipient') && ['Enter','Backspace'].includes(key)) {
|
||||
const keyCode = key === 'Enter' ? 13 : 8;
|
||||
// Gaia's recipients consume keypress, but a synthetic KeyboardEvent also
|
||||
// enters unsupported native key-binding IPC in the standalone host.
|
||||
const event = new this.contentWindow.Event('keypress', {bubbles:true,cancelable:true});
|
||||
for (const [name,value] of Object.entries({key,keyCode,which:keyCode,
|
||||
DOM_VK_BACK_SPACE:8,DOM_VK_ENTER:14,DOM_VK_TAB:9}))
|
||||
Object.defineProperty(event.wrappedJSObject,name,{value});
|
||||
if (!element.dispatchEvent(event)) { this.composer.commit(); return; }
|
||||
}
|
||||
const state = editor.state();
|
||||
const numeric = ['tel','number'].includes(state.inputType) ||
|
||||
['tel','numeric','decimal'].includes(state.inputMode);
|
||||
if (/^[0-9*#]$/.test(key)) {
|
||||
if (this.composer.mode==='t9' && this.t9Loading && /^[2-9]$/.test(key)) {
|
||||
this.t9Queue ||= [];
|
||||
if (this.t9Queue.length<16) this.t9Queue.push(key);
|
||||
return;
|
||||
}
|
||||
const operation = this.composer.press(key, {field:element,
|
||||
text:element.isContentEditable ? element.textContent : element.value,
|
||||
start:state.selectionStart, end:state.selectionEnd, numeric});
|
||||
if (operation?.text !== undefined) {
|
||||
if (operation.replace) editor.edit({operation:'replace',offset:-operation.replace,
|
||||
length:operation.replace,text:operation.text});
|
||||
else editor.edit({operation:'key',key:operation.text});
|
||||
}
|
||||
if (operation?.mode === 't9') this.loadT9Dictionary();
|
||||
if (!numeric) this.showMode(element);
|
||||
} else {
|
||||
this.composer.commit();
|
||||
if (key === 'ArrowLeft' || key === 'ArrowRight') {
|
||||
const start = key === 'ArrowLeft' ? Math.max(0, state.selectionStart - 1) :
|
||||
Math.min(state.text.length, state.selectionEnd + 1);
|
||||
editor.edit({operation:'selection', start, length:0});
|
||||
} else if (key.length === 1 || ['Backspace', 'Enter'].includes(key)) {
|
||||
editor.edit({operation:'key', key});
|
||||
}
|
||||
}
|
||||
}
|
||||
showMode(element) {
|
||||
if (!this.hint) {
|
||||
this.hint = this.document.createElement('span');
|
||||
this.hint.id = 'vulpes-keypad-mode';
|
||||
this.hint.style.cssText = 'position:fixed;right:4px;bottom:4px;z-index:2147483647;pointer-events:none;padding:2px 5px;border-radius:3px;background:#102337;color:white;font:12px sans-serif';
|
||||
this.contentWindow.addEventListener('blur', () => {
|
||||
this.composer.commit(); this.hint.remove();
|
||||
}, true);
|
||||
}
|
||||
if (this.composer.mode==='t9') {
|
||||
const french=(this.document.documentElement.lang || this.contentWindow.navigator.language || '').toLowerCase().startsWith('fr');
|
||||
this.hint.textContent=(french ? 'T9 · maintien # · * ' : 'T9 · hold # · * ')+
|
||||
(this.t9Loading ? '…' : this.composer.suggestion || '');
|
||||
} else this.hint.textContent=this.composer.mode+' · #';
|
||||
this.document.documentElement.append(this.hint);
|
||||
}
|
||||
loadT9Dictionary() {
|
||||
const win=this.contentWindow;
|
||||
const locale=(this.document.documentElement.lang || win.navigator.language || 'en').toLowerCase();
|
||||
if (this.t9Loading || this.composer.dictionary.size && this.t9Locale===locale) return;
|
||||
this.t9Loading=true;
|
||||
this.composer.dictionary=new Map();
|
||||
const choices=[locale,locale.split('-')[0]];
|
||||
if (locale==='en-us') choices.unshift('en_us');
|
||||
if (locale==='en-gb') choices.unshift('en_gb');
|
||||
if (locale==='pt-br') choices.unshift('pt_br');
|
||||
if (locale==='pt-pt') choices.unshift('pt_pt');
|
||||
const root=Services.env.get('VULPES_WORKSPACE_ROOT');
|
||||
if (!root) { this.t9Loading=false; return; }
|
||||
this.t9Field=this.document.activeElement;
|
||||
const {IOUtils}=ChromeUtils.importESModule('resource://gre/modules/IOUtils.sys.mjs');
|
||||
(async()=>{
|
||||
for (const language of choices) {
|
||||
if (!/^(?:[a-z]{2,3}(?:_[a-z]{2}|-[a-z]{2}|-latn|-cyrl)?)$/.test(language)) continue;
|
||||
try {
|
||||
const bytes=await IOUtils.read(root+'/tundra/devices/beatles/t9/'+language+'.tsv');
|
||||
this.composer.setDictionary(new TextDecoder().decode(bytes));
|
||||
if (this.composer.dictionary.size) { this.t9Locale=locale; break; }
|
||||
} catch (_) {}
|
||||
}
|
||||
this.t9Loading=false;
|
||||
if (this.hint?.isConnected) this.showMode(this.document.activeElement);
|
||||
if (this.document.activeElement===this.t9Field) {
|
||||
for (const key of this.t9Queue || []) this.editKey(this.t9Field,key);
|
||||
}
|
||||
this.t9Queue=[];
|
||||
})();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue