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

CHANGELOG.md

@@ -26,6 +26,7 @@
 - Enhance: Allow negative delay for MFM animation elements (`tada`, `jelly`, `twitch`, `shake`, `spin`, `jump`, `bounce`, `rainbow`)
 - Enhance: センシティブなメディアを開く際に確認ダイアログを出せるように
 - Enhance: デッキのアンテナ・リスト選択画面からそれぞれを新規作成できるように
+- Enhance: ブラウザのコンテキストメニューを使用できるように
 - Fix: `/about#federation` ページなどで各インスタンスのチャートが表示されなくなっていた問題を修正
 - Fix: ユーザーページの追加情報のラベルを投稿者のサーバーの絵文字で表示する (#13968)
 - Fix: リバーシの対局を正しく共有できないことがある問題を修正

locales/index.d.ts

@@ -10118,6 +10118,24 @@ export interface Locale extends ILocale {
  */
  "loop": string;
  };
+ "_contextMenu": {
+ /**
+ * コンテキストメニュー
+ */
+ "title": string;
+ /**
+ * アプリケーション
+ */
+ "app": string;
+ /**
+ * Shiftキーでアプリケーション
+ */
+ "appWithShift": string;
+ /**
+ * ブラウザのUI
+ */
+ "native": string;
+ };
 }
 declare const locales: {
  [lang: string]: Locale;

locales/ja-JP.yml

@@ -2697,3 +2697,9 @@ _mediaControls:
  pip: "ピクチャインピクチャ"
  playbackRate: "再生速度"
  loop: "ループ再生"
+
+_contextMenu:
+ title: "コンテキストメニュー"
+ app: "アプリケーション"
+ appWithShift: "Shiftキーでアプリケーション"
+ native: "ブラウザの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';
@@ -654,6 +655,13 @@ export function popupMenu(items: MenuItem[], src?: HTMLElement | EventTarget | n
 }
 
 export function contextMenu(items: MenuItem[], ev: MouseEvent): Promise<void> {
+ if (
+ defaultStore.state.contextMenu === 'native' ||
+ (defaultStore.state.contextMenu === 'appWithShift' && !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

@@ -177,6 +177,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="app">{{ i18n.ts._contextMenu.app }}</option>
+ <option value="appWithShift">{{ i18n.ts._contextMenu.appWithShift }}</option>
+ <option value="native">{{ i18n.ts._contextMenu.native }}</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>
@@ -317,6 +323,7 @@ const enableHorizontalSwipe = computed(defaultStore.makeGetterSetter('enableHori
 const useNativeUIForVideoAudioPlayer = computed(defaultStore.makeGetterSetter('useNativeUIForVideoAudioPlayer'));
 const alwaysConfirmFollow = computed(defaultStore.makeGetterSetter('alwaysConfirmFollow'));
 const confirmWhenRevealingSensitiveMedia = computed(defaultStore.makeGetterSetter('confirmWhenRevealingSensitiveMedia'));
+const contextMenu = computed(defaultStore.makeGetterSetter('contextMenu'));
 
 watch(lang, () => {
  miLocalStorage.setItem('lang', lang.value as string);
@@ -360,6 +367,7 @@ watch([
  enableSeasonalScreenEffect,
  alwaysConfirmFollow,
  confirmWhenRevealingSensitiveMedia,
+ contextMenu,
 ], async () => {
  await reloadAsk();
 });

packages/frontend/src/store.ts

@@ -458,6 +458,10 @@ export const defaultStore = markRaw(new Storage('base', {
  where: 'device',
  default: false,
  },
+ contextMenu: {
+ where: 'device',
+ default: 'app' as 'app' | 'appWithShift' | 'native',
+ },
 
  sound_masterVolume: {
  where: 'device',