4 files changed, 22 insertions, 32 deletions
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;