feat(electron): display page title in window title

Author: Akryum

packages/app-backend-core/src/index.ts

@@ -658,4 +658,22 @@ function connectBridge () {
       settings,
     })
   })
+
+  ctx.bridge.send(BridgeEvents.TO_FRONT_TITLE, { title: document.title })
+  // Watch page title
+  if (typeof MutationObserver !== 'undefined') {
+    if (pageTitleObserver) {
+      pageTitleObserver.disconnect()
+    }
+    pageTitleObserver = new MutationObserver((mutations) => {
+      const title = mutations[0].target as HTMLTitleElement
+      ctx.bridge.send(BridgeEvents.TO_FRONT_TITLE, { title: title.innerText })
+    })
+    pageTitleObserver.observe(
+      document.querySelector('title'),
+      { subtree: true, characterData: true, childList: true },
+    )
+  }
 }
+
+let pageTitleObserver: MutationObserver

packages/app-frontend/src/app.ts

@@ -1,7 +1,7 @@
 import App from './features/App.vue'
 
 import Vue from 'vue'
-import { isChrome, initEnv, SharedData, initSharedData, destroySharedData } from '@vue-devtools/shared-utils'
+import { isChrome, initEnv, SharedData, initSharedData, destroySharedData, BridgeEvents } from '@vue-devtools/shared-utils'
 import { createRouter } from './router'
 import { getBridge, setBridge } from './features/bridge'
 import { setAppConnected, setAppInitializing } from './features/connection'
@@ -68,6 +68,10 @@ export function connectApp (app, shell) {
 
     initEnv(Vue)
 
+    bridge.on(BridgeEvents.TO_FRONT_TITLE, ({ title }: { title: string }) => {
+      document.title = `${title} - Vue devtools`
+    })
+
     await initSharedData({
       bridge,
       persist: true,

packages/shared-utils/src/consts.ts

@@ -20,6 +20,8 @@ export enum BridgeEvents {
   TO_BACK_LOG = 'b:log',
   /** Reconnected after background script is terminated (idle) */
   TO_FRONT_RECONNECTED = 'f:reconnected',
+  /** Change app title (electron) */
+  TO_FRONT_TITLE = 'f:title',
 
   // Apps
   /** App was registered */