From 16afd316388994f86edf9fc8571d830f894c6fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 5 Aug 2023 09:37:08 +0200
Subject: [PATCH] fix: Use resize observer to calculate menubar icon limit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 package-lock.json               | 97 +++++++++++++++++++++++++++------
 package.json                    |  2 +
 src/components/Menu/MenuBar.vue | 77 ++++++--------------------
 3 files changed, 100 insertions(+), 76 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 82bf76dd364..78f220d92fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
         "@tiptap/pm": "^2.0.4",
         "@tiptap/suggestion": "^2.0.4",
         "@tiptap/vue-2": "^2.0.4",
+        "@vueuse/shared": "^10.3.0",
         "debounce": "^1.2.1",
         "escape-html": "^1.0.3",
         "highlight.js": "^11.8.0",
@@ -94,6 +95,7 @@
         "@vitejs/plugin-vue2": "^2.2.0",
         "@vue/test-utils": "^1.3.0 <2",
         "@vue/vue2-jest": "^29.2.4",
+        "@vueuse/core": "^10.3.0",
         "cypress": "^12.17.2",
         "eslint-plugin-cypress": "^2.13.3",
         "identity-obj-proxy": "^3.0.0",
@@ -5733,7 +5735,7 @@
         "vue-demi": ">=0.14.0"
       }
     },
-    "node_modules/@vueuse/core": {
+    "node_modules/@vueuse/components/node_modules/@vueuse/core": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.2.tgz",
       "integrity": "sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==",
@@ -5747,7 +5749,7 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/metadata": {
+    "node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.2.tgz",
       "integrity": "sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==",
@@ -5755,7 +5757,7 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared": {
+    "node_modules/@vueuse/components/node_modules/@vueuse/shared": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.2.tgz",
       "integrity": "sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==",
@@ -5766,6 +5768,41 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.3.0.tgz",
+      "integrity": "sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.3.0",
+        "@vueuse/shared": "10.3.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.3.0.tgz",
+      "integrity": "sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.3.0.tgz",
+      "integrity": "sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==",
+      "dependencies": {
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -26593,30 +26630,58 @@
         "@vueuse/core": "10.1.2",
         "@vueuse/shared": "10.1.2",
         "vue-demi": ">=0.14.0"
+      },
+      "dependencies": {
+        "@vueuse/core": {
+          "version": "10.1.2",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.2.tgz",
+          "integrity": "sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.17",
+            "@vueuse/metadata": "10.1.2",
+            "@vueuse/shared": "10.1.2",
+            "vue-demi": ">=0.14.0"
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "10.1.2",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.2.tgz",
+          "integrity": "sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ=="
+        },
+        "@vueuse/shared": {
+          "version": "10.1.2",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.2.tgz",
+          "integrity": "sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==",
+          "requires": {
+            "vue-demi": ">=0.14.0"
+          }
+        }
       }
     },
     "@vueuse/core": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.2.tgz",
-      "integrity": "sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.3.0.tgz",
+      "integrity": "sha512-BEM5yxcFKb5btFjTSAFjTu5jmwoW66fyV9uJIP4wUXXU8aR5Hl44gndaaXp7dC5HSObmgbnR2RN+Un1p68Mf5Q==",
+      "dev": true,
       "requires": {
         "@types/web-bluetooth": "^0.0.17",
-        "@vueuse/metadata": "10.1.2",
-        "@vueuse/shared": "10.1.2",
-        "vue-demi": ">=0.14.0"
+        "@vueuse/metadata": "10.3.0",
+        "@vueuse/shared": "10.3.0",
+        "vue-demi": ">=0.14.5"
       }
     },
     "@vueuse/metadata": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.2.tgz",
-      "integrity": "sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ=="
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.3.0.tgz",
+      "integrity": "sha512-Ema3YhNOa4swDsV0V7CEY5JXvK19JI/o1szFO1iWxdFg3vhdFtCtSTP26PCvbUpnUtNHBY2wx5y3WDXND5Pvnw==",
+      "dev": true
     },
     "@vueuse/shared": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.2.tgz",
-      "integrity": "sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==",
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.3.0.tgz",
+      "integrity": "sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==",
       "requires": {
-        "vue-demi": ">=0.14.0"
+        "vue-demi": ">=0.14.5"
       }
     },
     "@webassemblyjs/ast": {
diff --git a/package.json b/package.json
index ffffb82c0a8..8f414c2b750 100644
--- a/package.json
+++ b/package.json
@@ -85,6 +85,7 @@
     "@tiptap/pm": "^2.0.4",
     "@tiptap/suggestion": "^2.0.4",
     "@tiptap/vue-2": "^2.0.4",
+    "@vueuse/shared": "^10.3.0",
     "debounce": "^1.2.1",
     "escape-html": "^1.0.3",
     "highlight.js": "^11.8.0",
@@ -123,6 +124,7 @@
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/test-utils": "^1.3.0 <2",
     "@vue/vue2-jest": "^29.2.4",
+    "@vueuse/core": "^10.3.0",
     "cypress": "^12.17.2",
     "eslint-plugin-cypress": "^2.13.3",
     "identity-obj-proxy": "^3.0.0",
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index c2052735839..409667610c7 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -71,9 +71,9 @@
 
 <script>
 import { NcActionSeparator, NcActionButton } from '@nextcloud/vue'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import debounce from 'debounce'
+import { useResizeObserver } from '@vueuse/core'
 
 import HelpModal from '../HelpModal.vue'
 import actionsFullEntries from './entries.js'
@@ -130,33 +130,14 @@ export default {
 			randomID: `menu-bar-${(Math.ceil((Math.random() * 10000) + 500)).toString(16)}`,
 			displayHelp: false,
 			displayTranslate: false,
-			forceRecompute: 0,
 			isReady: false,
 			isVisible: this.$editor.isFocused,
-			windowWidth: 0,
 			canTranslate: loadState('text', 'translation_languages', []).length > 0,
+			resize: null,
+			iconsLimit: 4,
 		}
 	},
 	computed: {
-		iconsLimit() {
-			// just force this computed to run again
-			// eslint-disable-next-line no-unused-expressions
-			(
-				this.forceRecompute,
-				this.windowWidth
-			)
-			const { menubar } = this.$refs
-			const menuBarWidth = menubar && menubar.clientWidth > 200
-				? menubar.clientWidth
-				: 200
-
-			// leave some buffer - this is necessary so the bar does not wrap during resizing
-			const spaceToFill = menuBarWidth - 4
-			const slots = Math.floor(spaceToFill / 44)
-
-			// Leave one slot empty for the three dot menu
-			return slots - 1
-		},
 		visibleEntries() {
 			const list = [...actionsFullEntries].filter(({ priority }) => {
 				// if entry do not have priority, we assume it aways will be visible
@@ -178,9 +159,7 @@ export default {
 		},
 	},
 	mounted() {
-		window.addEventListener('resize', this.getWindowWidth)
-		subscribe('files:sidebar:opened', this.redrawAfterTransition)
-		subscribe('files:sidebar:closed', this.redrawAfterTransition)
+		this.resize = useResizeObserver(this.$refs.menubar, this.onResize)
 
 		this.$onFocusChange = () => {
 			this.isVisible = this.$editor.isFocused
@@ -192,51 +171,29 @@ export default {
 		this.$editor.on('focus', this.$onFocusChange)
 		this.$editor.on('blur', this.$onBlurChange)
 
-		this.$checkInterval = setInterval(() => {
-			const { menubar } = this.$refs
-			const isWidthAvailable = (menubar && menubar.clientWidth > 0)
-
-			if (this.$isRichEditor && isWidthAvailable) {
-				this.redrawMenuBar()
-			}
-
-			if (!this.$isRichEditor || isWidthAvailable) {
-				clearInterval(this.$checkInterval)
-			}
-
-			if (isWidthAvailable || !this.$isRichEditor) {
-				this.$nextTick(() => {
-					this.isReady = true
-				})
-			}
-		}, 100)
-
 		this.$nextTick(() => {
+			this.isReady = true
 			this.$emit('update:loaded', true)
 		})
 	},
 	beforeDestroy() {
-		window.removeEventListener('resize', this.getWindowWidth)
-
-		unsubscribe('files:sidebar:opened', this.redrawAfterTransition)
-		unsubscribe('files:sidebar:closed', this.redrawAfterTransition)
+		this.resize?.stop()
 
 		this.$editor.off('focus', this.$onFocusChange)
 		this.$editor.off('blur', this.$onBlurChange)
 	},
 	methods: {
-		getWindowWidth() {
-			this.windowWidth = document.documentElement.clientWidth
-		},
-		redrawAfterTransition() {
-			// wait for transition to complete (100ms)
-			setTimeout(this.redrawMenuBar, 110)
-		},
-		redrawMenuBar() {
-			this.$nextTick(() => {
-				this.getWindowWidth()
-				this.forceRecompute++
-			})
+		onResize(entries) {
+			const entry = entries[0]
+			const { width } = entry.contentRect
+
+			// leave some buffer - this is necessary so the bar does not wrap during resizing
+			const spaceToFill = width - 4
+			const slots = Math.floor(spaceToFill / 44)
+
+			// Leave one slot empty for the three dot menu
+			this.iconsLimit = slots - 1
+			this.isReady = true
 		},
 		showHelp() {
 			this.displayHelp = true