From 0b038f64779cf74d81b47749a211df9c64164b66 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 10 Dec 2021 18:20:41 +0900
Subject: [PATCH] =?UTF-8?q?fix(client):=20=E3=83=A1=E3=83=8B=E3=83=A5?=
 =?UTF-8?q?=E3=83=BC=E3=81=AA=E3=81=A9=E3=81=8C=E3=82=A6=E3=82=A3=E3=83=B3?=
 =?UTF-8?q?=E3=83=89=E3=82=A6=E3=81=AE=E8=A3=8F=E3=81=AB=E9=9A=A0=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  1 +
 packages/client/src/components/ui/popup.vue   | 10 ++++----
 packages/client/src/components/ui/tooltip.vue |  6 +++--
 packages/client/src/components/ui/window.vue  | 24 ++-----------------
 packages/client/src/os.ts                     | 14 +++++++++--
 5 files changed, 23 insertions(+), 32 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dacbf969da..e45e02090c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 ### Bugfixes
 - クライアント: タッチ機能付きディスプレイを使っていてマウス操作をしている場合に一部機能が動作しない問題を修正
 - クライアント: クリップの設定を編集できない問題を修正
+- クライアント: メニューなどがウィンドウの裏に隠れる問題を修正
 
 ## 12.98.0 (2021/12/03)
 
diff --git a/packages/client/src/components/ui/popup.vue b/packages/client/src/components/ui/popup.vue
index 2374de2eaf..abacd828ae 100644
--- a/packages/client/src/components/ui/popup.vue
+++ b/packages/client/src/components/ui/popup.vue
@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'popup-menu' : ''" appear @after-leave="$emit('closed')" @enter="$emit('opening')">
-	<div v-show="manualShowing != null ? manualShowing : showing" ref="content" class="ccczpooj" :class="{ front, fixed, top: position === 'top' }" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+	<div v-show="manualShowing != null ? manualShowing : showing" ref="content" class="ccczpooj" :class="{ fixed, top: position === 'top' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
 		<slot :max-height="maxHeight" :close="close"></slot>
 	</div>
 </transition>
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref, watch } from 'vue';
+import * as os from '@/os';
 
 function getFixedContainer(el: Element | null | undefined): Element | null {
 	if (el == null || el.tagName === 'BODY') return null;
@@ -57,6 +58,7 @@ export default defineComponent({
 		const transformOrigin = ref('center');
 		const showing = ref(true);
 		const content = ref<HTMLElement>();
+		const zIndex = os.claimZIndex(props.front);
 
 		const close = () => {
 			// eslint-disable-next-line vue/no-mutating-props
@@ -204,6 +206,7 @@ export default defineComponent({
 			transformOrigin,
 			maxHeight,
 			close,
+			zIndex,
 		};
 	},
 });
@@ -226,14 +229,9 @@ export default defineComponent({
 
 .ccczpooj {
 	position: absolute;
-	z-index: 10000;
 
 	&.fixed {
 		position: fixed;
 	}
-
-	&.front {
-		z-index: 20000;
-	}
 }
 </style>
diff --git a/packages/client/src/components/ui/tooltip.vue b/packages/client/src/components/ui/tooltip.vue
index 2a63c207fd..90326a0ff5 100644
--- a/packages/client/src/components/ui/tooltip.vue
+++ b/packages/client/src/components/ui/tooltip.vue
@@ -1,6 +1,6 @@
 <template>
 <transition name="tooltip" appear @after-leave="$emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ maxWidth: maxWidth + 'px' }">
+	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
 		<slot>{{ text }}</slot>
 	</div>
 </transition>
@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
 
 export default defineComponent({
 	props: {
@@ -33,6 +34,7 @@ export default defineComponent({
 
 	setup(props, context) {
 		const el = ref<HTMLElement>();
+		const zIndex = os.claimZIndex(true);
 
 		const setPosition = () => {
 			if (el.value == null) return;
@@ -88,6 +90,7 @@ export default defineComponent({
 
 		return {
 			el,
+			zIndex,
 		};
 	},
 })
@@ -108,7 +111,6 @@ export default defineComponent({
 
 .buebdbiu {
 	position: absolute;
-	z-index: 11000;
 	font-size: 0.8em;
 	padding: 8px 12px;
 	box-sizing: border-box;
diff --git a/packages/client/src/components/ui/window.vue b/packages/client/src/components/ui/window.vue
index 5019396b36..265d86acd1 100644
--- a/packages/client/src/components/ui/window.vue
+++ b/packages/client/src/components/ui/window.vue
@@ -1,6 +1,6 @@
 <template>
 <transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
-	<div v-if="showing" class="ebkgocck" :class="{ front }">
+	<div v-if="showing" class="ebkgocck">
 		<div class="body _window _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
 			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
 				<span class="left">
@@ -124,10 +124,6 @@ export default defineComponent({
 		this.applyTransformTop((window.innerHeight / 2) - (this.$el.offsetHeight / 2));
 		this.applyTransformLeft((window.innerWidth / 2) - (this.$el.offsetWidth / 2));
 
-		os.windows.set(this.id, {
-			z: Number(document.defaultView.getComputedStyle(this.$el, null).zIndex)
-		});
-
 		// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
 		this.top();
 
@@ -135,7 +131,6 @@ export default defineComponent({
 	},
 
 	unmounted() {
-		os.windows.delete(this.id);
 		window.removeEventListener('resize', this.onBrowserResize);
 	},
 
@@ -160,17 +155,7 @@ export default defineComponent({
 
 		// 最前面へ移動
 		top() {
-			let z = 0;
-			const ws = Array.from(os.windows.entries()).filter(([k, v]) => k !== this.id).map(([k, v]) => v);
-			for (const w of ws) {
-				if (w.z > z) z = w.z;
-			}
-			if (z > 0) {
-				(this.$el as any).style.zIndex = z + 1;
-				os.windows.set(this.id, {
-					z: z + 1
-				});
-			}
+			(this.$el as any).style.zIndex = os.claimZIndex(this.front);
 		},
 
 		onBodyMousedown() {
@@ -394,11 +379,6 @@ export default defineComponent({
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: 10000; // mk-modalのと同じでなければならない
-
-	&.front {
-		z-index: 11000; // front指定の時は、mk-modalのよりも大きくなければならない
-	}
 
 	> .body {
 		overflow: hidden;
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 0f86a8520b..404fe24d8f 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -18,8 +18,6 @@ export const pendingApiRequestsCount = ref(0);
 let apiRequestsCount = 0; // for debug
 export const apiRequests = ref([]); // for debug
 
-export const windows = new Map();
-
 const apiClient = new Misskey.api.APIClient({
 	origin: url,
 });
@@ -164,6 +162,18 @@ export const popups = ref([]) as Ref<{
 	props: Record<string, any>;
 }[]>;
 
+let popupZIndex = 1000000;
+let popupZIndexForFront = 2000000;
+export function claimZIndex(front = false): number {
+	if (front) {
+		popupZIndexForFront += 100;
+		return popupZIndexForFront;
+	} else {
+		popupZIndex += 100;
+		return popupZIndex;
+	}
+}
+
 export async function popup(component: Component | typeof import('*.vue') | Promise<Component | typeof import('*.vue')>, props: Record<string, any>, events = {}, disposeEvent?: string) {
 	if (component.then) component = await component;