feat(components): update flashing, closes #862

Author: Akryum

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

@@ -0,0 +1,35 @@
+import { DevtoolsBackend } from '@vue-devtools/app-backend-api'
+import { ComponentInstance } from '@vue/devtools-api'
+
+export async function flashComponent (instance: ComponentInstance, backend: DevtoolsBackend) {
+  const bounds = await backend.api.getComponentBounds(instance)
+  if (bounds) {
+    let overlay: HTMLDivElement = instance.__VUE_DEVTOOLS_FLASH
+    if (!overlay) {
+      overlay = document.createElement('div')
+      instance.__VUE_DEVTOOLS_FLASH = overlay
+      overlay.style.border = '2px rgba(65, 184, 131, 0.7) solid'
+      overlay.style.position = 'fixed'
+      overlay.style.zIndex = '99999999999998'
+      overlay.style.pointerEvents = 'none'
+      overlay.style.borderRadius = '3px'
+      overlay.style.boxSizing = 'border-box'
+      document.body.appendChild(overlay)
+    }
+    overlay.style.opacity = '1'
+    overlay.style.transition = null
+    overlay.style.width = Math.round(bounds.width) + 'px'
+    overlay.style.height = Math.round(bounds.height) + 'px'
+    overlay.style.left = Math.round(bounds.left) + 'px'
+    overlay.style.top = Math.round(bounds.top) + 'px'
+    requestAnimationFrame(() => {
+      overlay.style.transition = 'opacity 1s'
+      overlay.style.opacity = '0'
+    })
+    clearTimeout((overlay as any)._timer)
+    ;(overlay as any)._timer = setTimeout(() => {
+      document.body.removeChild(overlay)
+      instance.__VUE_DEVTOOLS_FLASH = null
+    }, 1000)
+  }
+}

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

@@ -43,6 +43,7 @@ import { showScreenshot } from './timeline-screenshot'
 import { performanceMarkEnd, performanceMarkStart } from './perf'
 import { initOnPageConfig } from './page-config'
 import { sendTimelineMarkers, addTimelineMarker } from './timeline-marker'
+import { flashComponent } from './flash.js'
 
 let ctx: BackendContext = target.__vdevtools_ctx ?? null
 let connected = target.__vdevtools_connected ?? false
@@ -136,6 +137,10 @@ async function connect () {
       if (SharedData.trackUpdates) {
         sendComponentUpdateTracking(id, ctx)
       }
+
+      if (SharedData.flashUpdates) {
+        flashComponent(component, appRecord.backend)
+      }
     } catch (e) {
       if (SharedData.debugInfo) {
         console.error(e)
@@ -183,6 +188,10 @@ async function connect () {
         sendComponentUpdateTracking(id, ctx)
       }
 
+      if (SharedData.flashUpdates) {
+        flashComponent(component, appRecord.backend)
+      }
+
       await refreshComponentTreeSearch(ctx)
     } catch (e) {
       if (SharedData.debugInfo) {

packages/app-backend-vue2/src/components/update-tracking.ts

@@ -1,6 +1,7 @@
 import { DevtoolsApi } from '@vue-devtools/app-backend-api'
 import { SharedData } from '@vue-devtools/shared-utils'
 import { sendComponentUpdateTracking } from '@vue-devtools/app-backend-core/lib/component'
+import { flashComponent } from '@vue-devtools/app-backend-core/lib/flash'
 import throttle from 'lodash/throttle'
 import { getUniqueId } from './util.js'
 
@@ -31,6 +32,10 @@ export function applyTrackingUpdateHook (api: DevtoolsApi, vm) {
         sendComponentUpdateTracking(getUniqueId(parent), api.ctx)
       }
     }
+
+    if (SharedData.flashUpdates) {
+      flashComponent(this, api.backend)
+    }
   }, 100)
   for (const hook of COMPONENT_HOOKS) {
     const currentValue = vm.$options[hook]

packages/app-frontend/src/features/components/ComponentsInspector.vue

@@ -155,6 +155,19 @@ export default defineComponent({
         </div>
       </div>
 
+      <div class="space-y-1 px-3 py-2 text-sm">
+        <VueSwitch v-model="$shared.flashUpdates">
+          Highlight updates
+        </VueSwitch>
+        <div class="flex items-center space-x-1 text-xs opacity-50">
+          <VueIcon
+            icon="warning"
+            class="w-4 h-4 flex-none"
+          />
+          <span>Don't enable if you are sensible to flashing</span>
+        </div>
+      </div>
+
       <div class="border-t border-gray-200 dark:border-gray-800 my-1" />
     </portal>
 

packages/shared-utils/src/shared-data.ts

@@ -29,6 +29,7 @@ const internalSharedData = {
   pageConfig: {} as any,
   legacyApps: false,
   trackUpdates: true,
+  flashUpdates: false,
   debugInfo: false,
 }
 
@@ -54,6 +55,7 @@ const persisted = [
   'performanceMonitoringEnabled',
   'componentEventsEnabled',
   'trackUpdates',
+  'flashUpdates',
   'debugInfo',
 ]