diff options
| -rw-r--r-- | CHANGELOG.md | 6 | ||||
| -rw-r--r-- | locales/index.d.ts | 20 | ||||
| -rw-r--r-- | locales/ja-JP.yml | 5 | ||||
| -rw-r--r-- | packages/backend/src/server/web/ClientServerService.ts | 4 | ||||
| -rw-r--r-- | packages/backend/src/server/web/boot.js | 56 | ||||
| -rw-r--r-- | packages/backend/src/server/web/manifest.json | 8 | ||||
| -rw-r--r-- | packages/frontend-shared/js/config.ts | 1 | ||||
| -rw-r--r-- | packages/frontend/src/boot/common.ts | 65 | ||||
| -rw-r--r-- | packages/frontend/src/boot/main-boot.ts | 22 | ||||
| -rw-r--r-- | packages/frontend/src/local-storage.ts | 1 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/custom-css.vue | 3 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/plugin.vue | 6 | ||||
| -rw-r--r-- | packages/frontend/src/pages/settings/theme.vue | 6 | ||||
| -rw-r--r-- | packages/frontend/src/plugin.ts | 2 | ||||
| -rw-r--r-- | packages/frontend/src/ui/_common_/common.vue | 22 |
15 files changed, 179 insertions, 48 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index f8e961073c..56efd7477c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,12 @@ - 日本語における公開範囲名称の「ダイレクト」が「指名」に改称されました ### Client +- Feat: セーフモード + - プラグイン・テーマ・カスタムCSSの使用でクライアントの起動に問題が発生した際に、これらを無効にして起動できます + - 以下の方法でセーフモードを起動できます + - `g` キーを連打する + - URLに`?safemode=true`を付ける + - PWAのショートカットで Safemode を選択して起動する - Fix: 一部の設定検索結果が存在しないパスになる問題を修正 (Cherry-picked from https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1171) - Fix: テーマエディタが動作しない問題を修正 diff --git a/locales/index.d.ts b/locales/index.d.ts index d2e2b729e8..f77925b410 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5501,6 +5501,22 @@ export interface Locale extends ILocale { * 日 */ "inDays": string; + /** + * セーフモードが有効です + */ + "safeModeEnabled": string; + /** + * セーフモードが有効なため、プラグインはすべて無効化されています。 + */ + "pluginsAreDisabledBecauseSafeMode": string; + /** + * セーフモードが有効なため、カスタムCSSは適用されていません。 + */ + "customCssIsDisabledBecauseSafeMode": string; + /** + * セーフモードが有効な間はデフォルトのテーマが使用されます。セーフモードをオフにすると元に戻ります。 + */ + "themeIsDefaultBecauseSafeMode": string; "_order": { /** * 新しい順 @@ -11839,6 +11855,10 @@ export interface Locale extends ILocale { * 修復ツールを起動 */ "otherOption3": string; + /** + * Misskeyをセーフモードで起動 + */ + "otherOption4": string; }; "_search": { /** diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 377231ee19..4d79b31b1b 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1370,6 +1370,10 @@ defaultImageCompressionLevel: "デフォルトの画像圧縮度" defaultImageCompressionLevel_description: "低くすると画質を保てますが、ファイルサイズは増加します。<br>高くするとファイルサイズを減らせますが、画質は低下します。" inMinutes: "分" inDays: "日" +safeModeEnabled: "セーフモードが有効です" +pluginsAreDisabledBecauseSafeMode: "セーフモードが有効なため、プラグインはすべて無効化されています。" +customCssIsDisabledBecauseSafeMode: "セーフモードが有効なため、カスタムCSSは適用されていません。" +themeIsDefaultBecauseSafeMode: "セーフモードが有効な間はデフォルトのテーマが使用されます。セーフモードをオフにすると元に戻ります。" _order: newest: "新しい順" @@ -3164,6 +3168,7 @@ _bootErrors: otherOption1: "クライアント設定とキャッシュを削除" otherOption2: "簡易クライアントを起動" otherOption3: "修復ツールを起動" + otherOption4: "Misskeyをセーフモードで起動" _search: searchScopeAll: "全て" diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts index 4d122b0fcf..768cfde701 100644 --- a/packages/backend/src/server/web/ClientServerService.ts +++ b/packages/backend/src/server/web/ClientServerService.ts @@ -188,6 +188,10 @@ export class ClientServerService { 'url': 'url', }, }, + 'shortcuts': [{ + 'name': 'Safemode', + 'url': '/?safemode=true', + }], }; manifest = { diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index 24794cbf2a..1a30e9ed2b 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -94,23 +94,37 @@ } //#endregion + let isSafeMode = (localStorage.getItem('isSafeMode') === 'true'); + + if (!isSafeMode) { + const urlParams = new URLSearchParams(window.location.search); + + if (urlParams.has('safemode') && urlParams.get('safemode') === 'true') { + localStorage.setItem('isSafeMode', 'true'); + isSafeMode = true; + } + } + //#region Theme - const theme = localStorage.getItem('theme'); - if (theme) { - for (const [k, v] of Object.entries(JSON.parse(theme))) { - document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString()); + if (!isSafeMode) { + const theme = localStorage.getItem('theme'); + if (theme) { + for (const [k, v] of Object.entries(JSON.parse(theme))) { + document.documentElement.style.setProperty(`--MI_THEME-${k}`, v.toString()); - // HTMLの theme-color 適用 - if (k === 'htmlThemeColor') { - for (const tag of document.head.children) { - if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { - tag.setAttribute('content', v); - break; + // HTMLの theme-color 適用 + if (k === 'htmlThemeColor') { + for (const tag of document.head.children) { + if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') { + tag.setAttribute('content', v); + break; + } } } } } } + const colorScheme = localStorage.getItem('colorScheme'); if (colorScheme) { document.documentElement.style.setProperty('color-scheme', colorScheme); @@ -127,11 +141,13 @@ document.documentElement.classList.add('useSystemFont'); } - const customCss = localStorage.getItem('customCss'); - if (customCss && customCss.length > 0) { - const style = document.createElement('style'); - style.innerHTML = customCss; - document.head.appendChild(style); + if (!isSafeMode) { + const customCss = localStorage.getItem('customCss'); + if (customCss && customCss.length > 0) { + const style = document.createElement('style'); + style.innerHTML = customCss; + document.head.appendChild(style); + } } async function addStyle(styleText) { @@ -159,9 +175,13 @@ otherOption1: 'Clear preferences and cache', otherOption2: 'Start the simple client', otherOption3: 'Start the repair tool', + otherOption4: 'Start Misskey in safe mode', }, locale?._bootErrors || {}); const reload = locale?.reload || 'Reload'; + const safeModeUrl = new URL(window.location.href); + safeModeUrl.searchParams.set('safemode', 'true'); + let errorsElement = document.getElementById('errors'); if (!errorsElement) { @@ -182,6 +202,12 @@ <p>${messages.solution4}</p> <details style="color: #86b300;"> <summary>${messages.otherOption}</summary> + <a href="${safeModeUrl}"> + <button class="button-small"> + <span class="button-label-small">${messages.otherOption4}</span> + </button> + </a> + <br> <a href="/flush"> <button class="button-small"> <span class="button-label-small">${messages.otherOption1}</span> diff --git a/packages/backend/src/server/web/manifest.json b/packages/backend/src/server/web/manifest.json index 41171d62a1..90d4530857 100644 --- a/packages/backend/src/server/web/manifest.json +++ b/packages/backend/src/server/web/manifest.json @@ -34,5 +34,11 @@ "text": "text", "url": "url" } - } + }, + "shortcuts": [ + { + "name": "Safemode", + "url": "/?safemode=true" + } + ] } diff --git a/packages/frontend-shared/js/config.ts b/packages/frontend-shared/js/config.ts index 26dd36d6c3..4963d631f9 100644 --- a/packages/frontend-shared/js/config.ts +++ b/packages/frontend-shared/js/config.ts @@ -23,6 +23,7 @@ export const version = _VERSION_; export const instanceName = (siteName === 'Misskey' || siteName == null) ? host : siteName; export const ui = localStorage.getItem('ui'); export const debug = localStorage.getItem('debug') === 'true'; +export const isSafeMode = localStorage.getItem('isSafeMode') === 'true'; export function updateLocale(newLocale: Locale): void { locale = newLocale; diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts index 992bde9bd1..ea41155ab0 100644 --- a/packages/frontend/src/boot/common.ts +++ b/packages/frontend/src/boot/common.ts @@ -5,7 +5,7 @@ import { computed, watch, version as vueVersion } from 'vue'; import { compareVersions } from 'compare-versions'; -import { version, lang, updateLocale, locale, apiUrl } from '@@/js/config.js'; +import { version, lang, updateLocale, locale, apiUrl, isSafeMode } from '@@/js/config.js'; import defaultLightTheme from '@@/themes/l-light.json5'; import defaultDarkTheme from '@@/themes/d-green-lime.json5'; import type { App } from 'vue'; @@ -168,28 +168,35 @@ export async function common(createVue: () => Promise<App<Element>>) { // NOTE: この処理は必ずクライアント更新チェック処理より後に来ること(テーマ再構築のため) watch(store.r.darkMode, (darkMode) => { - applyTheme(darkMode - ? (prefer.s.darkTheme ?? defaultDarkTheme) - : (prefer.s.lightTheme ?? defaultLightTheme), - ); - }, { immediate: miLocalStorage.getItem('theme') == null }); + const theme = (() => { + if (darkMode) { + return isSafeMode ? defaultDarkTheme : (prefer.s.darkTheme ?? defaultDarkTheme); + } else { + return isSafeMode ? defaultLightTheme : (prefer.s.lightTheme ?? defaultLightTheme); + } + })(); + + applyTheme(theme); + }, { immediate: isSafeMode || miLocalStorage.getItem('theme') == null }); window.document.documentElement.dataset.colorScheme = store.s.darkMode ? 'dark' : 'light'; - const darkTheme = prefer.model('darkTheme'); - const lightTheme = prefer.model('lightTheme'); + if (!isSafeMode) { + const darkTheme = prefer.model('darkTheme'); + const lightTheme = prefer.model('lightTheme'); - watch(darkTheme, (theme) => { - if (store.s.darkMode) { - applyTheme(theme ?? defaultDarkTheme); - } - }); + watch(darkTheme, (theme) => { + if (store.s.darkMode) { + applyTheme(theme ?? defaultDarkTheme); + } + }); - watch(lightTheme, (theme) => { - if (!store.s.darkMode) { - applyTheme(theme ?? defaultLightTheme); - } - }); + watch(lightTheme, (theme) => { + if (!store.s.darkMode) { + applyTheme(theme ?? defaultLightTheme); + } + }); + } //#region Sync dark mode if (prefer.s.syncDeviceDarkMode) { @@ -203,17 +210,19 @@ export async function common(createVue: () => Promise<App<Element>>) { }); //#endregion - if (prefer.s.darkTheme && store.s.darkMode) { - if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme); - } else if (prefer.s.lightTheme && !store.s.darkMode) { - if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme); - } + if (!isSafeMode) { + if (prefer.s.darkTheme && store.s.darkMode) { + if (miLocalStorage.getItem('themeId') !== prefer.s.darkTheme.id) applyTheme(prefer.s.darkTheme); + } else if (prefer.s.lightTheme && !store.s.darkMode) { + if (miLocalStorage.getItem('themeId') !== prefer.s.lightTheme.id) applyTheme(prefer.s.lightTheme); + } - fetchInstanceMetaPromise.then(() => { - // TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア - if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme)); - if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme)); - }); + fetchInstanceMetaPromise.then(() => { + // TODO: instance.defaultLightTheme/instance.defaultDarkThemeが不正な形式だった場合のケア + if (prefer.s.lightTheme == null && instance.defaultLightTheme != null) prefer.commit('lightTheme', JSON.parse(instance.defaultLightTheme)); + if (prefer.s.darkTheme == null && instance.defaultDarkTheme != null) prefer.commit('darkTheme', JSON.parse(instance.defaultDarkTheme)); + }); + } watch(prefer.r.overridedDeviceKind, (kind) => { updateDeviceKind(kind); diff --git a/packages/frontend/src/boot/main-boot.ts b/packages/frontend/src/boot/main-boot.ts index ae4e0445db..46e690a55f 100644 --- a/packages/frontend/src/boot/main-boot.ts +++ b/packages/frontend/src/boot/main-boot.ts @@ -28,8 +28,8 @@ import { addCustomEmoji, removeCustomEmojis, updateCustomEmojis } from '@/custom import { prefer } from '@/preferences.js'; import { launchPlugins } from '@/plugin.js'; import { updateCurrentAccountPartial } from '@/accounts.js'; -import { signout } from '@/signout.js'; import { migrateOldSettings } from '@/pref-migrate.js'; +import { unisonReload } from '@/utility/unison-reload.js'; export async function mainBoot() { const { isClientUpdated, lastVersion } = await common(async () => { @@ -391,6 +391,8 @@ export async function mainBoot() { } // shortcut + let safemodeRequestCount = 0; + let safemodeRequestTimer: number | null = null; const keymap = { 'p|n': () => { if ($i == null) return; @@ -402,6 +404,24 @@ export async function mainBoot() { 's': () => { mainRouter.push('/search'); }, + 'g': { + callback: () => { + // mを5回押すとセーフモードに入る + safemodeRequestCount++; + if (safemodeRequestCount >= 5) { + miLocalStorage.setItem('isSafeMode', 'true'); + unisonReload(); + } else { + if (safemodeRequestTimer != null) { + window.clearTimeout(safemodeRequestTimer); + } + safemodeRequestTimer = window.setTimeout(() => { + safemodeRequestCount = 0; + }, 300); + } + }, + allowRepeat: true, + } } as const satisfies Keymap; window.document.addEventListener('keydown', makeHotkey(keymap), { passive: false }); diff --git a/packages/frontend/src/local-storage.ts b/packages/frontend/src/local-storage.ts index 78fba9f7b4..b64a8c5dd5 100644 --- a/packages/frontend/src/local-storage.ts +++ b/packages/frontend/src/local-storage.ts @@ -33,6 +33,7 @@ export type Keys = ( 'preferences' | 'latestPreferencesUpdate' | 'hidePreferencesRestoreSuggestion' | + 'isSafeMode' | `miux:${string}` | `ui:folder:${string}` | `themes:${string}` | // DEPRECATED diff --git a/packages/frontend/src/pages/settings/custom-css.vue b/packages/frontend/src/pages/settings/custom-css.vue index 9b0e04860e..83a188b2cb 100644 --- a/packages/frontend/src/pages/settings/custom-css.vue +++ b/packages/frontend/src/pages/settings/custom-css.vue @@ -7,6 +7,8 @@ SPDX-License-Identifier: AGPL-3.0-only <div class="_gaps_m"> <FormInfo warn>{{ i18n.ts.customCssWarn }}</FormInfo> + <FormInfo v-if="isSafeMode" warn>{{ i18n.ts.customCssIsDisabledBecauseSafeMode }}</FormInfo> + <MkCodeEditor v-model="localCustomCss" manualSave lang="css"> <template #label>CSS</template> </MkCodeEditor> @@ -17,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only import { ref, watch, computed } from 'vue'; import MkCodeEditor from '@/components/MkCodeEditor.vue'; import FormInfo from '@/components/MkInfo.vue'; +import { isSafeMode } from '@@/js/config.js'; import * as os from '@/os.js'; import { unisonReload } from '@/utility/unison-reload.js'; import { i18n } from '@/i18n.js'; diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue index 16d5947ad2..bff307ab7d 100644 --- a/packages/frontend/src/pages/settings/plugin.vue +++ b/packages/frontend/src/pages/settings/plugin.vue @@ -10,7 +10,9 @@ SPDX-License-Identifier: AGPL-3.0-only <SearchKeyword>{{ i18n.ts._settings.pluginBanner }}</SearchKeyword> </MkFeatureBanner> - <FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink> + <MkInfo v-if="isSafeMode" warn>{{ i18n.ts.pluginsAreDisabledBecauseSafeMode }}</MkInfo> + + <FormLink v-else to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink> <FormSection> <template #label>{{ i18n.ts.manage }}</template> @@ -103,10 +105,12 @@ import MkCode from '@/components/MkCode.vue'; import MkFolder from '@/components/MkFolder.vue'; import MkKeyValue from '@/components/MkKeyValue.vue'; import MkFeatureBanner from '@/components/MkFeatureBanner.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { i18n } from '@/i18n.js'; import { definePage } from '@/page.js'; import { changePluginActive, configPlugin, pluginLogs, uninstallPlugin, reloadPlugin } from '@/plugin.js'; import { prefer } from '@/preferences.js'; +import { isSafeMode } from '@@/js/config.js'; import * as os from '@/os.js'; const plugins = prefer.r.plugins; diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue index accb1ccc55..d8ae356f6b 100644 --- a/packages/frontend/src/pages/settings/theme.vue +++ b/packages/frontend/src/pages/settings/theme.vue @@ -35,7 +35,9 @@ SPDX-License-Identifier: AGPL-3.0-only </div> </div> - <div class="_gaps"> + <MkInfo v-if="isSafeMode" warn>{{ i18n.ts.themeIsDefaultBecauseSafeMode }}</MkInfo> + + <div v-else class="_gaps"> <template v-if="!store.r.darkMode.value"> <SearchMarker :keywords="['light', 'theme']"> <MkFolder :defaultOpen="true" :max-height="500"> @@ -204,12 +206,14 @@ import JSON5 from 'json5'; import defaultLightTheme from '@@/themes/l-light.json5'; import defaultDarkTheme from '@@/themes/d-green-lime.json5'; import type { Theme } from '@/theme.js'; +import { isSafeMode } from '@@/js/config.js'; import * as os from '@/os.js'; import MkSwitch from '@/components/MkSwitch.vue'; import FormSection from '@/components/form/section.vue'; import FormLink from '@/components/form/link.vue'; import MkFolder from '@/components/MkFolder.vue'; import MkThemePreview from '@/components/MkThemePreview.vue'; +import MkInfo from '@/components/MkInfo.vue'; import { getBuiltinThemesRef, getThemesRef, removeTheme } from '@/theme.js'; import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js'; import { store } from '@/store.js'; diff --git a/packages/frontend/src/plugin.ts b/packages/frontend/src/plugin.ts index d6007a27ed..5610ae7095 100644 --- a/packages/frontend/src/plugin.ts +++ b/packages/frontend/src/plugin.ts @@ -6,6 +6,7 @@ import { ref, defineAsyncComponent } from 'vue'; import { Interpreter, Parser, utils, values } from '@syuilo/aiscript'; import { compareVersions } from 'compare-versions'; +import { isSafeMode } from '@@/js/config.js'; import { genId } from '@/utility/id.js'; import * as Misskey from 'misskey-js'; import { aiScriptReadline, createAiScriptEnv } from '@/aiscript/api.js'; @@ -232,6 +233,7 @@ export function launchPlugins() { } async function launchPlugin(id: Plugin['installId']): Promise<void> { + if (isSafeMode) return; const plugin = prefer.s.plugins.find(x => x.installId === id); if (!plugin) return; diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index da20d23cfd..37c95f2db2 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -94,6 +94,11 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-if="dev" id="devTicker"><span style="animation: dev-ticker-blink 2s infinite;">DEV BUILD</span></div> <div v-if="$i && $i.isBot" id="botWarn"><span style="animation: dev-ticker-blink 2s infinite;">{{ i18n.ts.loggedInAsBot }}</span></div> + +<div v-if="isSafeMode" id="safemodeWarn"> + <span style="animation: dev-ticker-blink 2s infinite;">{{ i18n.ts.safeModeEnabled }}</span> + <button class="_textButton" style="pointer-events: all;" @click="exitSafeMode">{{ i18n.ts.turnItOff }}</button> +</div> </template> <script lang="ts" setup> @@ -101,7 +106,10 @@ import { defineAsyncComponent, ref, TransitionGroup } from 'vue'; import * as Misskey from 'misskey-js'; import { swInject } from './sw-inject.js'; import XNotification from './notification.vue'; +import { isSafeMode } from '@@/js/config.js'; import { popups } from '@/os.js'; +import { unisonReload } from '@/utility/unison-reload.js'; +import { miLocalStorage } from '@/local-storage.js'; import { pendingApiRequestsCount } from '@/utility/misskey-api.js'; import * as sound from '@/utility/sound.js'; import { $i } from '@/i.js'; @@ -144,6 +152,13 @@ function onNotification(notification: Misskey.entities.Notification, isClient = sound.playMisskeySfx('notification'); } +function exitSafeMode() { + miLocalStorage.removeItem('isSafeMode'); + const url = new URL(window.location.href); + url.searchParams.delete('safemode'); + unisonReload(url.toString()); +} + if ($i) { if (store.s.realtimeMode) { const connection = useStream().useChannel('main'); @@ -396,7 +411,7 @@ if ($i) { width: 100%; height: max-content; text-align: center; - z-index: 2147483647; + z-index: 2147483646; color: #ff0; background: rgba(0, 0, 0, 0.5); padding: 4px 7px; @@ -405,6 +420,11 @@ if ($i) { user-select: none; } +#safemodeWarn { + @extend #botWarn; + z-index: 2147483647; +} + #devTicker { position: fixed; bottom: 0; |