marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-08-13 00:19:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Optimize CE()

Browse Source
This commit is contained in:
redphx
2024-12-23 05:55:11 +07:00
parent 560a4c309c
commit 03b7c7358e
27 changed files with 179 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/index.ts
View File

@@ -113,7 +113,7 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
const isSafari = UserAgent.isSafari();
let $secondaryAction: HTMLElement;
if (isSafari) {
$secondaryAction = CE('p', {}, t('settings-reloading'));
$secondaryAction = CE('p', false, t('settings-reloading'));
} else {
$secondaryAction = CE('a', {
href: 'https://better-xcloud.github.io/troubleshooting',
@@ -123,12 +123,12 @@ if (isFullVersion() && BX_FLAGS.SafariWorkaround && document.readyState !== 'loa
// Show the reloading overlay
const $fragment = document.createDocumentFragment();
$fragment.appendChild(CE('style', {}, css));
$fragment.appendChild(CE('style', false, css));
$fragment.appendChild(CE('div',{
class: 'bx-reload-overlay',
},
CE('div', {},
CE('p', {}, t('load-failed-message')),
CE('div', false,
CE('p', false, t('load-failed-message')),
$secondaryAction,
),
));

2
src/modules/game-bar/microphone-action.ts
View File

@@ -24,7 +24,7 @@ export class MicrophoneAction extends BaseGameBarAction {
onClick: this.onClick,
});
this.$content = CE('div', {}, $btnMuted, $btnDefault);
this.$content = CE('div', false, $btnMuted, $btnDefault);
BxEventBus.Stream.on('microphone.state.changed', payload => {
const enabled = payload.state === MicrophoneState.ENABLED;

2
src/modules/game-bar/renderer-action.ts
View File

@@ -24,7 +24,7 @@ export class RendererAction extends BaseGameBarAction {
classes: ['bx-activated'],
});
this.$content = CE('div', {}, $btnDefault, $btnActivated);
this.$content = CE('div', false, $btnDefault, $btnActivated);
BxEventBus.Stream.on('video.visibility.changed', payload => {
this.$content.dataset.activated = (!payload.isVisible).toString();

2
src/modules/game-bar/speaker-action.ts
View File

@@ -24,7 +24,7 @@ export class SpeakerAction extends BaseGameBarAction {
classes: ['bx-activated'],
});
this.$content = CE('div', {}, $btnEnable, $btnMuted);
this.$content = CE('div', false, $btnEnable, $btnMuted);
BxEventBus.Stream.on('speaker.state.changed', payload => {
const enabled = payload.state === SpeakerState.ENABLED;

2
src/modules/game-bar/touch-control-action.ts
View File

@@ -25,7 +25,7 @@ export class TouchControlAction extends BaseGameBarAction {
classes: ['bx-activated'],
});
this.$content = CE('div', {}, $btnEnable, $btnDisable);
this.$content = CE('div', false, $btnEnable, $btnDisable);
}
onClick = (e: Event) => {

8
src/modules/loading-screen.ts
View File

@@ -110,11 +110,11 @@ export class LoadingScreen {
let $waitTimeBox = LoadingScreen.$waitTimeBox;
if (!$waitTimeBox) {
$waitTimeBox = CE('div', { class: 'bx-wait-time-box' },
CE('label', {}, t('server')),
CE('span', {}, getPreferredServerRegion()),
CE('label', {}, t('wait-time-estimated')),
CE('label', false, t('server')),
CE('span', false, getPreferredServerRegion()),
CE('label', false, t('wait-time-estimated')),
$estimated = CE('span', {}),
CE('label', {}, t('wait-time-countdown')),
CE('label', false, t('wait-time-countdown')),
$countDown = CE('span', {}),
);

2
src/modules/mkb/mkb-popup.ts
View File

@@ -78,7 +78,7 @@ export class MkbPopup {
this.$title = CE('p'),
this.$btnActivate = this.createActivateButton(),
CE('div', {},
CE('div', false,
createButton({
label: t('ignore'),
style: ButtonStyle.GHOST,

2
src/modules/stream/stream-stats.ts
View File

@@ -227,7 +227,7 @@ export class StreamStats {
class: `bx-stat-${statKey}`,
title: stat.name,
},
CE('label', {}, statKey.toUpperCase()),
CE('label', false, statKey.toUpperCase()),
stat.$element,
);

4
src/modules/ui/dialog/profile-manger/base-profile-manager-dialog.ts
View File

@@ -167,14 +167,14 @@ export abstract class BaseProfileManagerDialog<T extends PresetRecord> extends N
this.$container = CE('div', { class: 'bx-centered-dialog' },
CE('div', { class: 'bx-dialog-title' },
CE('p', {}, this.title),
CE('p', false, this.title),
createButton({
icon: BxIcon.CLOSE,
style: ButtonStyle.FOCUSABLE | ButtonStyle.CIRCULAR | ButtonStyle.GHOST,
onClick: e => this.hide(),
}),
),
CE('div', {},
CE('div', false,
$header,
this.$defaultNote = CE('div', { class: 'bx-default-preset-note bx-gone' }, t('default-preset-note')),
),

4
src/modules/ui/dialog/profile-manger/keyboard-shortcuts-manager-dialog.ts
View File

@@ -37,7 +37,7 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
continue;
}
const $fieldSet = CE('fieldset', {}, CE('legend', {}, groupLabel));
const $fieldSet = CE('fieldset', false, CE('legend', false, groupLabel));
for (const action in items) {
const crumbs = items[action as keyof typeof items];
if (!crumbs) {
@@ -66,7 +66,7 @@ export class KeyboardShortcutsManagerDialog extends BaseProfileManagerDialog<Key
}
}
this.$content = CE('div', {},
this.$content = CE('div', false,
this.$unbindNote = CE('i', { class: 'bx-mkb-note' }, t('right-click-to-unbind')),
$rows,
);

6
src/modules/ui/dialog/profile-manger/mkb-mapping-manager-dialog.ts
View File

@@ -93,7 +93,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
}
private render() {
const $rows = CE('div', {},
const $rows = CE('div', false,
this.$unbindNote = CE('i', { class: 'bx-mkb-note' }, t('right-click-to-unbind')),
);
@@ -131,7 +131,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
}
const savePreset = () => this.savePreset();
const $extraSettings = CE('div', {},
const $extraSettings = CE('div', false,
createSettingRow(
t('map-mouse-to'),
this.$mouseMapTo = BxSelectElement.create(CE('select', { _on: { input: savePreset } },
@@ -166,7 +166,7 @@ export class MkbMappingManagerDialog extends BaseProfileManagerDialog<MkbPresetR
),
);
this.$content = CE('div', {},
this.$content = CE('div', false,
$rows,
$extraSettings,
);

8
src/modules/ui/dialog/remote-play-dialog.ts
View File

@@ -37,7 +37,7 @@ export class RemotePlayDialog extends NavigationDialog {
const $settingNote = CE('p', {});
const currentResolution = getPref(PrefKey.REMOTE_PLAY_STREAM_RESOLUTION);
let $resolutions : HTMLSelectElement | NavigationElement = CE('select', {},
let $resolutions : HTMLSelectElement | NavigationElement = CE('select', false,
CE('option', { value: StreamResolution.DIM_720P }, '720p'),
CE('option', { value: StreamResolution.DIM_1080P }, '1080p'),
// CE('option', { value: StreamResolution.DIM_1080P_HQ }, `1080p (HQ)`),
@@ -58,8 +58,8 @@ export class RemotePlayDialog extends NavigationDialog {
const $qualitySettings = CE('div', {
class: 'bx-remote-play-settings',
}, CE('div', {},
CE('label', {}, t('target-resolution'), $settingNote),
}, CE('div', false,
CE('label', false, t('target-resolution'), $settingNote),
$resolutions,
));
@@ -72,7 +72,7 @@ export class RemotePlayDialog extends NavigationDialog {
for (let con of consoles) {
const $child = CE('div', { class: 'bx-remote-play-device-wrapper' },
CE('div', { class: 'bx-remote-play-device-info' },
CE('div', {},
CE('div', false,
CE('span', { class: 'bx-remote-play-device-name' }, con.deviceName),
CE('span', { class: 'bx-remote-play-console-type' }, con.consoleType.replace('Xbox', ''))
),

10
src/modules/ui/dialog/settings-dialog.ts
View File

@@ -170,8 +170,8 @@ export class SettingsDialog extends NavigationDialog {
this.$btnSuggestion = CE('div', {
class: 'bx-suggest-toggler bx-focusable',
tabindex: 0,
}, CE('label', {}, t('suggest-settings')),
CE('span', {}, '❯'),
}, CE('label', false, t('suggest-settings')),
CE('span', false, '❯'),
);
this.$btnSuggestion.addEventListener('click', SuggestionsSetting.renderSuggestions.bind(this));
@@ -518,7 +518,7 @@ export class SettingsDialog extends NavigationDialog {
label: t('layout'),
content: CE('select', {
disabled: true,
}, CE('option', {}, t('default'))),
}, CE('option', false, t('default'))),
onCreated: (setting: SettingTabSectionItem, $elm: HTMLSelectElement) => {
$elm.addEventListener('input', e => {
TouchController.applyCustomLayout($elm.value, 1000);
@@ -1066,7 +1066,7 @@ export class SettingsDialog extends NavigationDialog {
orientation: 'horizontal',
}
},
CE('span', {}, label),
CE('span', false, label),
section.helpUrl && createButton({
icon: BxIcon.QUESTION,
style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE,
@@ -1146,7 +1146,7 @@ export class SettingsDialog extends NavigationDialog {
focus: () => this.focusActiveTab(),
},
}),
CE('div', {},
CE('div', false,
this.$btnReload = createButton({
icon: BxIcon.REFRESH,
style: ButtonStyle.FOCUSABLE | ButtonStyle.DROP_SHADOW,

4
src/modules/ui/dialog/settings/controller-extra.ts
View File

@@ -56,7 +56,7 @@ export class ControllerExtraSettings extends HTMLElement {
}));
$container.append(
CE('span', {}, t('no-controllers-connected')),
CE('span', false, t('no-controllers-connected')),
CE('div', { class: 'bx-controller-extra-wrapper' },
$selectControllers,
@@ -98,7 +98,7 @@ export class ControllerExtraSettings extends HTMLElement {
),
{
multiLines: true,
$note: CE('div', { class: 'bx-settings-dialog-note' }, 'ⓘ ' + t('slightly-increase-input-latency')),
$note: CE('div', { class: 'bx-settings-dialog-note' }, 'ⓘ ' + t('slightly-increases-input-latency')),
},
),
),

2
src/modules/ui/dialog/settings/suggestions.ts
View File

@@ -92,7 +92,7 @@ export class SuggestionsSetting {
// Start rendering
const $suggestedSettings = CE('div', { class: 'bx-suggest-wrapper' });
const $select = CE('select', {},
const $select = CE('select', false,
hasRecommendedSettings && CE('option', { value: 'recommended' }, t('recommended')),
!hasRecommendedSettings && CE('option', { value: 'highest' }, t('highest-quality')),
CE('option', { value: 'default' }, t('default')),

2
src/modules/ui/game-tile.ts
View File

@@ -30,7 +30,7 @@ export class GameTile {
if (typeof totalWaitTime === 'number' && isElementVisible($elm)) {
const $div = CE('div', { class: 'bx-game-tile-wait-time' },
createSvgIcon(BxIcon.PLAYTIME),
CE('span', {}, totalWaitTime < 60 ? totalWaitTime + 's' : secondsToHm(totalWaitTime)),
CE('span', false, totalWaitTime < 60 ? totalWaitTime + 's' : secondsToHm(totalWaitTime)),
);
const duration = (totalWaitTime >= 15 * 60) ? 'long' : (totalWaitTime >= 10 * 60) ? 'medium' : (totalWaitTime >= 5 * 60 ) ? 'short' : '';

2
src/modules/ui/header.ts
View File

@@ -39,7 +39,7 @@ export class HeaderSection {
onClick: e => SettingsDialog.getInstance().show(),
});
this.$buttonsWrapper = CE('div', {},
this.$buttonsWrapper = CE('div', false,
getPref(PrefKey.REMOTE_PLAY_ENABLED) ? this.$btnRemotePlay : null,
this.$btnSettings,
);

2
src/utils/css.ts
View File

@@ -164,7 +164,7 @@ body::-webkit-scrollbar {
`);
}
const $style = CE('style', {}, css);
const $style = CE('style', false, css);
document.documentElement.appendChild($style);
}

66
src/utils/html.ts
View File

@@ -89,11 +89,9 @@ type HTMLElementTagNameMap = {
[key: string] : HTMLElement;
};
function createElement<T extends keyof HTMLElementTagNameMap>(elmName: T, props: CreateElementOptions={}, ..._: any): HTMLElementTagNameMap[T] {
function createElement<T extends keyof HTMLElementTagNameMap>(elmName: T, props?: CreateElementOptions | false, ..._: any): HTMLElementTagNameMap[T] {
let $elm;
const hasNs = 'xmlns' in props;
// console.trace('createElement', elmName, props);
const hasNs = props && 'xmlns' in props;
if (hasNs) {
$elm = document.createElementNS(props.xmlns, elmName as string);
@@ -102,35 +100,39 @@ function createElement<T extends keyof HTMLElementTagNameMap>(elmName: T, props:
$elm = document.createElement(elmName as string);
}
if (props._nearby) {
setNearby($elm, props._nearby);
delete props._nearby;
}
if (props) {
// console.trace('createElement', elmName, props);
if (props._on) {
for (const name in props._on) {
$elm.addEventListener(name, props._on[name]);
}
delete props._on;
}
if (props._dataset) {
for (const name in props._dataset) {
$elm.dataset[name] = props._dataset[name] as string;
}
delete props._dataset;
}
for (const key in props) {
if ($elm.hasOwnProperty(key)) {
continue;
if (props._nearby) {
setNearby($elm, props._nearby);
delete props._nearby;
}
const value = props[key];
if (hasNs) {
$elm.setAttributeNS(null, key, value);
} else {
$elm.setAttribute(key, value);
if (props._on) {
for (const name in props._on) {
$elm.addEventListener(name, props._on[name]);
}
delete props._on;
}
if (props._dataset) {
for (const name in props._dataset) {
$elm.dataset[name] = props._dataset[name] as string;
}
delete props._dataset;
}
for (const key in props) {
if ($elm.hasOwnProperty(key)) {
continue;
}
const value = props[key];
if (hasNs) {
$elm.setAttributeNS(null, key, value);
} else {
$elm.setAttribute(key, value);
}
}
}
@@ -184,14 +186,14 @@ export function createButton<T=HTMLButtonElement>(options: BxButtonOptions): T {
options.classes && $btn.classList.add(...options.classes);
options.icon && $btn.appendChild(createSvgIcon(options.icon));
options.label && $btn.appendChild(CE('span', {}, options.label));
options.label && $btn.appendChild(CE('span', false, options.label));
options.title && $btn.setAttribute('title', options.title);
options.onClick && $btn.addEventListener('click', options.onClick);
$btn.tabIndex = typeof options.tabIndex === 'number' ? options.tabIndex : 0;
if (options.secondaryText) {
$btn.classList.add('bx-button-multi-lines');
$btn.appendChild(CE('span', {}, options.secondaryText));
$btn.appendChild(CE('span', false, options.secondaryText));
}
for (const key in options.attributes) {

2
src/utils/settings-storages/global-settings-storage.ts
View File

@@ -321,7 +321,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
requiredVariants: 'full',
label: t('enable-local-co-op-support'),
default: false,
note: () => CE('div', {},
note: () => CE('div', false,
CE('a', {
href: 'https://github.com/redphx/better-xcloud/discussions/275',
target: '_blank',

2
src/utils/translation.ts
View File

@@ -27,7 +27,6 @@ export const SUPPORTED_LANGUAGES = {
};
const Texts = {
"slightly-increase-input-latency": "Slightly increase input latency",
"achievements": "Achievements",
"activate": "Activate",
"activated": "Activated",
@@ -325,6 +324,7 @@ const Texts = {
"show-wait-time-in-game-card": "Show wait time in game card",
"simplify-stream-menu": "Simplify Stream's menu",
"skip-splash-video": "Skip Xbox splash video",
"slightly-increases-input-latency": "Slightly increases input latency",
"slow": "Slow",
"small": "Small",
"smart-tv": "Smart TV",

2
src/web-components/bx-dual-number-stepper.ts
View File

@@ -79,7 +79,7 @@ export class BxDualNumberStepper extends HTMLInputElement implements BxHtmlSetti
$rangeTo.addEventListener('input', self.onRangeInput);
self.addEventListener('input', self.onRangeInput);
self.append(CE('div', {}, $rangeFrom, $rangeTo));
self.append(CE('div', false, $rangeFrom, $rangeTo));
// Set values
BxDualNumberStepper.setValues.call(self, values);

6
src/web-components/bx-key-binding-button.ts
View File

@@ -121,15 +121,15 @@ class KeyBindingDialog {
this.$dialog = CE('div', { class: `bx-key-binding-dialog bx-gone` },
this.$title = CE('h2', {}),
CE('div', { class: 'bx-key-binding-dialog-content' },
CE('div', {},
CE('div', false,
this.$wait = CE('p', { class: 'bx-blink-me' }),
this.$inputList = CE('ul', {},
this.$inputList = CE('ul', false,
CE('li', { _dataset: { flag: BxKeyBindingButtonFlag.KEYBOARD_PRESS } }, t('keyboard-key')),
CE('li', { _dataset: { flag: BxKeyBindingButtonFlag.KEYBOARD_MODIFIER } }, t('modifiers-note')),
CE('li', { _dataset: { flag: BxKeyBindingButtonFlag.MOUSE_CLICK } }, t('mouse-click')),
CE('li', { _dataset: { flag: BxKeyBindingButtonFlag.MOUSE_WHEEL } }, t('mouse-wheel')),
),
CE('i', {}, t('press-esc-to-cancel')),
CE('i', false, t('press-esc-to-cancel')),
),
),
);

2
src/web-components/bx-number-stepper.ts
View File

@@ -48,7 +48,7 @@ export class BxNumberStepper extends HTMLInputElement implements BxHtmlSettingEl
class: 'bx-number-stepper',
id: `bx_setting_${escapeCssSelector(key)}`,
},
CE('div', {},
CE('div', false,
$btnDec = CE('button', {
_dataset: {
type: 'dec' as ButtonType,

8
src/web-components/bx-select.ts
View File

@@ -96,9 +96,9 @@ export class BxSelectElement extends HTMLSelectElement {
class: 'bx-select-value bx-focusable',
tabindex: 0,
},
CE('div', {},
CE('div', false,
self.$checkBox = CE('input', { type: 'checkbox' }),
self.$label = CE('span', {}, ''),
self.$label = CE('span', false, ''),
),
self.$indicators,
@@ -115,7 +115,7 @@ export class BxSelectElement extends HTMLSelectElement {
BxEvent.dispatch($select, 'input');
});
} else {
$content = CE('div', {},
$content = CE('div', false,
self.$label = CE('label', { for: $select.id + '_checkbox' }, ''),
self.$indicators,
);
@@ -259,7 +259,7 @@ export class BxSelectElement extends HTMLSelectElement {
$label.innerHTML = '';
const fragment = document.createDocumentFragment();
fragment.appendChild(CE('span', {}, groupLabel));
fragment.appendChild(CE('span', false, groupLabel));
fragment.appendChild(document.createTextNode(content));
$label.appendChild(fragment);