enhance(frontend): ブラウザのコンテキストメニューを使用できるように

CHANGELOG.md

@@ -23,6 +23,7 @@
   (Cherry-picked from https://github.com/taiyme/misskey/pull/238)
 - Enhance: AiScriptを0.19.0にアップデート
 - Enhance: Allow negative delay for MFM animation elements (`tada`, `jelly`, `twitch`, `shake`, `spin`, `jump`, `bounce`, `rainbow`)
+- Enhance: ブラウザのコンテキストメニューを使用できるように
 - Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
 - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
 - Fix: リバーシの対局を正しく共有できないことがある問題を修正

locales/index.d.ts

@@ -10086,6 +10086,24 @@ export interface Locale extends ILocale {
          */
         "loop": string;
     };
+    "_contextMenu": {
+        /**
+         * Misskey独自のコンテキストメニュー
+         */
+        "title": string;
+        /**
+         * 常に表示する
+         */
+        "always": string;
+        /**
+         * Shiftキーを押しながらで表示
+         */
+        "withShift": string;
+        /**
+         * 無効（常にブラウザのUIを使用）
+         */
+        "never": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;

locales/ja-JP.yml

@@ -2689,3 +2689,9 @@ _mediaControls:
   pip: "ピクチャインピクチャ"
   playbackRate: "再生速度"
   loop: "ループ再生"
+
+_contextMenu:
+  title: "Misskey独自のコンテキストメニュー"
+  always: "常に表示する"
+  withShift: "Shiftキーを押しながらで表示"
+  never: "無効（常にブラウザのUIを使用）"

packages/frontend/src/os.ts

@@ -11,6 +11,7 @@ import * as Misskey from 'misskey-js';
 import type { ComponentProps as CP } from 'vue-component-type-helpers';
 import type { Form, GetFormResultType } from '@/scripts/form.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
+import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
 import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
@@ -649,6 +650,13 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
 }
 
 export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
+	if (
+		defaultStore.state.contextMenu === 'never' ||
+		(defaultStore.state.contextMenu === 'withShift' && !ev.shiftKey)
+	) {
+		return Promise.resolve();
+	}
+
 	let returnFocusTo = getHTMLElementOrNull(ev.currentTarget ?? ev.target) ?? getHTMLElementOrNull(document.activeElement);
 	ev.preventDefault();
 	return new Promise(resolve => nextTick(() => {

packages/frontend/src/pages/settings/general.vue

@@ -176,6 +176,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
 				<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
 			</MkSelect>
+			<MkSelect v-model="contextMenu">
+				<template #label>{{ i18n.ts._contextMenu.title }}</template>
+				<option value="always">{{ i18n.ts._contextMenu.always }}</option>
+				<option value="withShift">{{ i18n.ts._contextMenu.withShift }}</option>
+				<option value="never">{{ i18n.ts._contextMenu.never }}</option>
+			</MkSelect>
 			<MkRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing>
 				<template #label>{{ i18n.ts.numberOfPageCache }}</template>
 				<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
@@ -315,6 +321,7 @@ const enableSeasonalScreenEffect = computed(defaultStore.makeGetterSetter('enabl
 const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHorizontalSwipe'));
 const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer'));
 const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfirmFollow'));
+const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu'));
 
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
@@ -357,6 +364,7 @@ watch([
 	disableStreamingTimeline,
 	enableSeasonalScreenEffect,
 	alwaysConfirmFollow,
+	contextMenu,
 ], async () => {
 	await reloadAsk();
 });

packages/frontend/src/store.ts

@@ -454,6 +454,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: true,
 	},
+	contextMenu: {
+		where: 'device',
+		default: 'always' as 'always' | 'withShift' | 'never',
+	},
 
 	sound_masterVolume: {
 		where: 'device',