How to use getRootElementsFromComponentInstance method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

backend.js

Source: backend.js Github

copy
1/******/ (() => { // webpackBootstrap
2/******/ 	var __webpack_modules__ = ({
3
4/***/ 72039:
5/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
6
7"use strict";
8// ESM COMPAT FLAG
9__webpack_require__.r(__webpack_exports__);
10
11// EXPORTS
12__webpack_require__.d(__webpack_exports__, {
13  "setupDevtoolsPlugin": () => (/* binding */ setupDevtoolsPlugin)
14});
15
16;// CONCATENATED MODULE: ../api/lib/esm/env.js
17function getDevtoolsGlobalHook() {
18  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
19}
20function getTarget() {
21  // @ts-ignore
22  return typeof navigator !== 'undefined' && typeof window !== 'undefined' ? window : typeof __webpack_require__.g !== 'undefined' ? __webpack_require__.g : {};
23}
24const isProxyAvailable = typeof Proxy === 'function';
25;// CONCATENATED MODULE: ../api/lib/esm/const.js
26const HOOK_SETUP = 'devtools-plugin:setup';
27const HOOK_PLUGIN_SETTINGS_SET = 'plugin:settings:set';
28;// CONCATENATED MODULE: ../api/lib/esm/proxy.js
29
30class ApiProxy {
31  target;
32  targetQueue;
33  proxiedTarget;
34  onQueue;
35  proxiedOn;
36  plugin;
37  hook;
38  fallbacks;
39
40  constructor(plugin, hook) {
41    this.target = null;
42    this.targetQueue = [];
43    this.onQueue = [];
44    this.plugin = plugin;
45    this.hook = hook;
46    const defaultSettings = {};
47
48    if (plugin.settings) {
49      for (const id in plugin.settings) {
50        const item = plugin.settings[id];
51        defaultSettings[id] = item.defaultValue;
52      }
53    }
54
55    const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
56    let currentSettings = Object.assign({}, defaultSettings);
57
58    try {
59      const raw = localStorage.getItem(localSettingsSaveId);
60      const data = JSON.parse(raw);
61      Object.assign(currentSettings, data);
62    } catch (e) {// noop
63    }
64
65    this.fallbacks = {
66      getSettings() {
67        return currentSettings;
68      },
69
70      setSettings(value) {
71        try {
72          localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
73        } catch (e) {// noop
74        }
75
76        currentSettings = value;
77      }
78
79    };
80
81    if (hook) {
82      hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
83        if (pluginId === this.plugin.id) {
84          this.fallbacks.setSettings(value);
85        }
86      });
87    }
88
89    this.proxiedOn = new Proxy({}, {
90      get: (_target, prop) => {
91        if (this.target) {
92          return this.target.on[prop];
93        } else {
94          return (...args) => {
95            this.onQueue.push({
96              method: prop,
97              args
98            });
99          };
100        }
101      }
102    });
103    this.proxiedTarget = new Proxy({}, {
104      get: (_target, prop) => {
105        if (this.target) {
106          return this.target[prop];
107        } else if (prop === 'on') {
108          return this.proxiedOn;
109        } else if (Object.keys(this.fallbacks).includes(prop)) {
110          return (...args) => {
111            this.targetQueue.push({
112              method: prop,
113              args,
114              resolve: () => {}
115            });
116            return this.fallbacks[prop](...args);
117          };
118        } else {
119          return (...args) => {
120            return new Promise(resolve => {
121              this.targetQueue.push({
122                method: prop,
123                args,
124                resolve
125              });
126            });
127          };
128        }
129      }
130    });
131  }
132
133  async setRealTarget(target) {
134    this.target = target;
135
136    for (const item of this.onQueue) {
137      this.target.on[item.method](...item.args);
138    }
139
140    for (const item of this.targetQueue) {
141      item.resolve(await this.target[item.method](...item.args));
142    }
143  }
144
145}
146;// CONCATENATED MODULE: ../api/lib/esm/index.js
147
148
149
150
151
152function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
153  const target = getTarget();
154  const hook = getDevtoolsGlobalHook();
155  const enableProxy = isProxyAvailable && pluginDescriptor.enableEarlyProxy;
156
157  if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
158    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
159  } else {
160    const proxy = enableProxy ? new ApiProxy(pluginDescriptor, hook) : null;
161    const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
162    list.push({
163      pluginDescriptor,
164      setupFn,
165      proxy
166    });
167    if (proxy) setupFn(proxy.proxiedTarget);
168  }
169}
170
171/***/ }),
172
173/***/ 32423:
174/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
175
176"use strict";
177
178
179Object.defineProperty(exports, "__esModule", ({
180  value: true
181}));
182exports.DevtoolsPluginApiInstance = exports.DevtoolsApi = void 0;
183
184const shared_utils_1 = __webpack_require__(27146);
185
186const hooks_1 = __webpack_require__(29618);
187
188const pluginOn = [];
189
190class DevtoolsApi {
191  constructor(backend, ctx) {
192    this.stateEditor = new shared_utils_1.StateEditor();
193    this.backend = backend;
194    this.ctx = ctx;
195    this.bridge = ctx.bridge;
196    this.on = new hooks_1.DevtoolsHookable(ctx);
197  }
198
199  async callHook(eventType, payload, ctx = this.ctx) {
200    payload = await this.on.callHandlers(eventType, payload, ctx);
201
202    for (const on of pluginOn) {
203      payload = await on.callHandlers(eventType, payload, ctx);
204    }
205
206    return payload;
207  }
208
209  async transformCall(callName, ...args) {
210    const payload = await this.callHook("transformCall"
211    /* TRANSFORM_CALL */
212    , {
213      callName,
214      inArgs: args,
215      outArgs: args.slice()
216    });
217    return payload.outArgs;
218  }
219
220  async getAppRecordName(app, defaultName) {
221    const payload = await this.callHook("getAppRecordName"
222    /* GET_APP_RECORD_NAME */
223    , {
224      app,
225      name: null
226    });
227
228    if (payload.name) {
229      return payload.name;
230    } else {
231      return `App ${defaultName}`;
232    }
233  }
234
235  async getAppRootInstance(app) {
236    const payload = await this.callHook("getAppRootInstance"
237    /* GET_APP_ROOT_INSTANCE */
238    , {
239      app,
240      root: null
241    });
242    return payload.root;
243  }
244
245  async registerApplication(app) {
246    await this.callHook("registerApplication"
247    /* REGISTER_APPLICATION */
248    , {
249      app
250    });
251  }
252
253  async walkComponentTree(instance, maxDepth = -1, filter = null) {
254    const payload = await this.callHook("walkComponentTree"
255    /* WALK_COMPONENT_TREE */
256    , {
257      componentInstance: instance,
258      componentTreeData: null,
259      maxDepth,
260      filter
261    });
262    return payload.componentTreeData;
263  }
264
265  async visitComponentTree(instance, treeNode, filter = null, app) {
266    const payload = await this.callHook("visitComponentTree"
267    /* VISIT_COMPONENT_TREE */
268    , {
269      app,
270      componentInstance: instance,
271      treeNode,
272      filter
273    });
274    return payload.treeNode;
275  }
276
277  async walkComponentParents(instance) {
278    const payload = await this.callHook("walkComponentParents"
279    /* WALK_COMPONENT_PARENTS */
280    , {
281      componentInstance: instance,
282      parentInstances: []
283    });
284    return payload.parentInstances;
285  }
286
287  async inspectComponent(instance, app) {
288    const payload = await this.callHook("inspectComponent"
289    /* INSPECT_COMPONENT */
290    , {
291      app,
292      componentInstance: instance,
293      instanceData: null
294    });
295    return payload.instanceData;
296  }
297
298  async getComponentBounds(instance) {
299    const payload = await this.callHook("getComponentBounds"
300    /* GET_COMPONENT_BOUNDS */
301    , {
302      componentInstance: instance,
303      bounds: null
304    });
305    return payload.bounds;
306  }
307
308  async getComponentName(instance) {
309    const payload = await this.callHook("getComponentName"
310    /* GET_COMPONENT_NAME */
311    , {
312      componentInstance: instance,
313      name: null
314    });
315    return payload.name;
316  }
317
318  async getComponentInstances(app) {
319    const payload = await this.callHook("getComponentInstances"
320    /* GET_COMPONENT_INSTANCES */
321    , {
322      app,
323      componentInstances: []
324    });
325    return payload.componentInstances;
326  }
327
328  async getElementComponent(element) {
329    const payload = await this.callHook("getElementComponent"
330    /* GET_ELEMENT_COMPONENT */
331    , {
332      element,
333      componentInstance: null
334    });
335    return payload.componentInstance;
336  }
337
338  async getComponentRootElements(instance) {
339    const payload = await this.callHook("getComponentRootElements"
340    /* GET_COMPONENT_ROOT_ELEMENTS */
341    , {
342      componentInstance: instance,
343      rootElements: []
344    });
345    return payload.rootElements;
346  }
347
348  async editComponentState(instance, dotPath, type, state, app) {
349    const arrayPath = dotPath.split('.');
350    const payload = await this.callHook("editComponentState"
351    /* EDIT_COMPONENT_STATE */
352    , {
353      app,
354      componentInstance: instance,
355      path: arrayPath,
356      type,
357      state,
358      set: (object, path = arrayPath, value = state.value, cb) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state))
359    });
360    return payload.componentInstance;
361  }
362
363  async getComponentDevtoolsOptions(instance) {
364    const payload = await this.callHook("getAppDevtoolsOptions"
365    /* GET_COMPONENT_DEVTOOLS_OPTIONS */
366    , {
367      componentInstance: instance,
368      options: null
369    });
370    return payload.options || {};
371  }
372
373  async getComponentRenderCode(instance) {
374    const payload = await this.callHook("getComponentRenderCode"
375    /* GET_COMPONENT_RENDER_CODE */
376    , {
377      componentInstance: instance,
378      code: null
379    });
380    return {
381      code: payload.code
382    };
383  }
384
385  async inspectTimelineEvent(eventData, app) {
386    const payload = await this.callHook("inspectTimelineEvent"
387    /* INSPECT_TIMELINE_EVENT */
388    , {
389      event: eventData.event,
390      layerId: eventData.layerId,
391      app,
392      data: eventData.event.data,
393      all: eventData.all
394    });
395    return payload.data;
396  }
397
398  async clearTimeline() {
399    await this.callHook("timelineCleared"
400    /* TIMELINE_CLEARED */
401    , {});
402  }
403
404  async getInspectorTree(inspectorId, app, filter) {
405    const payload = await this.callHook("getInspectorTree"
406    /* GET_INSPECTOR_TREE */
407    , {
408      inspectorId,
409      app,
410      filter,
411      rootNodes: []
412    });
413    return payload.rootNodes;
414  }
415
416  async getInspectorState(inspectorId, app, nodeId) {
417    const payload = await this.callHook("getInspectorState"
418    /* GET_INSPECTOR_STATE */
419    , {
420      inspectorId,
421      app,
422      nodeId,
423      state: null
424    });
425    return payload.state;
426  }
427
428  async editInspectorState(inspectorId, app, nodeId, dotPath, type, state) {
429    const arrayPath = dotPath.split('.');
430    await this.callHook("editInspectorState"
431    /* EDIT_INSPECTOR_STATE */
432    , {
433      inspectorId,
434      app,
435      nodeId,
436      path: arrayPath,
437      type,
438      state,
439      set: (object, path = arrayPath, value = state.value, cb) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state))
440    });
441  }
442
443}
444
445exports.DevtoolsApi = DevtoolsApi;
446
447class DevtoolsPluginApiInstance {
448  constructor(plugin, appRecord, ctx) {
449    this.bridge = ctx.bridge;
450    this.ctx = ctx;
451    this.plugin = plugin;
452    this.appRecord = appRecord;
453    this.backendApi = appRecord.backend.api;
454    this.defaultSettings = (0, shared_utils_1.getPluginDefaultSettings)(plugin.descriptor.settings);
455    this.on = new hooks_1.DevtoolsHookable(ctx, plugin);
456    pluginOn.push(this.on);
457  } // Plugin API
458
459
460  async notifyComponentUpdate(instance = null) {
461    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.COMPONENTS)) return;
462
463    if (instance) {
464      this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED, ...(await this.backendApi.transformCall(shared_utils_1.HookEvents.COMPONENT_UPDATED, instance)));
465    } else {
466      this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED);
467    }
468  }
469
470  addTimelineLayer(options) {
471    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.TIMELINE)) return false;
472    this.ctx.hook.emit(shared_utils_1.HookEvents.TIMELINE_LAYER_ADDED, options, this.plugin);
473    return true;
474  }
475
476  addTimelineEvent(options) {
477    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.TIMELINE)) return false;
478    this.ctx.hook.emit(shared_utils_1.HookEvents.TIMELINE_EVENT_ADDED, options, this.plugin);
479    return true;
480  }
481
482  addInspector(options) {
483    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.CUSTOM_INSPECTOR)) return false;
484    this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_ADD, options, this.plugin);
485    return true;
486  }
487
488  sendInspectorTree(inspectorId) {
489    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.CUSTOM_INSPECTOR)) return false;
490    this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_TREE, inspectorId, this.plugin);
491    return true;
492  }
493
494  sendInspectorState(inspectorId) {
495    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.CUSTOM_INSPECTOR)) return false;
496    this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_STATE, inspectorId, this.plugin);
497    return true;
498  }
499
500  selectInspectorNode(inspectorId, nodeId) {
501    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.CUSTOM_INSPECTOR)) return false;
502    this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SELECT_NODE, inspectorId, nodeId, this.plugin);
503    return true;
504  }
505
506  getComponentBounds(instance) {
507    return this.backendApi.getComponentBounds(instance);
508  }
509
510  getComponentName(instance) {
511    return this.backendApi.getComponentName(instance);
512  }
513
514  getComponentInstances(app) {
515    return this.backendApi.getComponentInstances(app);
516  }
517
518  highlightElement(instance) {
519    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.COMPONENTS)) return false;
520    this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_HIGHLIGHT, instance.__VUE_DEVTOOLS_UID__, this.plugin);
521    return true;
522  }
523
524  unhighlightElement() {
525    if (!this.enabled || !this.hasPermission(shared_utils_1.PluginPermission.COMPONENTS)) return false;
526    this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UNHIGHLIGHT, this.plugin);
527    return true;
528  }
529
530  getSettings(pluginId) {
531    return (0, shared_utils_1.getPluginSettings)(pluginId !== null && pluginId !== void 0 ? pluginId : this.plugin.descriptor.id, this.defaultSettings);
532  }
533
534  setSettings(value, pluginId) {
535    (0, shared_utils_1.setPluginSettings)(pluginId !== null && pluginId !== void 0 ? pluginId : this.plugin.descriptor.id, value);
536  }
537
538  get enabled() {
539    return (0, shared_utils_1.hasPluginPermission)(this.plugin.descriptor.id, shared_utils_1.PluginPermission.ENABLED);
540  }
541
542  hasPermission(permission) {
543    return (0, shared_utils_1.hasPluginPermission)(this.plugin.descriptor.id, permission);
544  }
545
546}
547
548exports.DevtoolsPluginApiInstance = DevtoolsPluginApiInstance;
549
550/***/ }),
551
552/***/ 62393:
553/***/ ((__unused_webpack_module, exports) => {
554
555"use strict";
556
557
558Object.defineProperty(exports, "__esModule", ({
559  value: true
560}));
561
562/***/ }),
563
564/***/ 64930:
565/***/ ((__unused_webpack_module, exports) => {
566
567"use strict";
568
569
570Object.defineProperty(exports, "__esModule", ({
571  value: true
572}));
573exports.createBackendContext = void 0;
574
575function createBackendContext(options) {
576  return {
577    bridge: options.bridge,
578    hook: options.hook,
579    backends: [],
580    appRecords: [],
581    currentTab: null,
582    currentAppRecord: null,
583    currentInspectedComponentId: null,
584    plugins: [],
585    currentPlugin: null,
586    timelineLayers: [],
587    nextTimelineEventId: 0,
588    timelineEventMap: new Map(),
589    perfUniqueGroupId: 0,
590    customInspectors: [],
591    timelineMarkers: []
592  };
593}
594
595exports.createBackendContext = createBackendContext;
596
597/***/ }),
598
599/***/ 30346:
600/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
601
602"use strict";
603
604
605Object.defineProperty(exports, "__esModule", ({
606  value: true
607}));
608exports.createBackend = exports.defineBackend = exports.BuiltinBackendFeature = void 0;
609
610const api_1 = __webpack_require__(32423);
611
612var BuiltinBackendFeature;
613
614(function (BuiltinBackendFeature) {
615  /**
616   * @deprecated
617   */
618  BuiltinBackendFeature["FLUSH"] = "flush";
619})(BuiltinBackendFeature = exports.BuiltinBackendFeature || (exports.BuiltinBackendFeature = {}));
620
621function defineBackend(options) {
622  return options;
623}
624
625exports.defineBackend = defineBackend;
626
627function createBackend(options, ctx) {
628  const backend = {
629    options,
630    api: null
631  };
632  backend.api = new api_1.DevtoolsApi(backend, ctx);
633  options.setup(backend.api);
634  return backend;
635}
636
637exports.createBackend = createBackend;
638
639/***/ }),
640
641/***/ 2107:
642/***/ ((__unused_webpack_module, exports) => {
643
644"use strict";
645
646/* eslint-disable @typescript-eslint/ban-types */
647
648Object.defineProperty(exports, "__esModule", ({
649  value: true
650}));
651
652/***/ }),
653
654/***/ 29618:
655/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
656
657"use strict";
658
659
660Object.defineProperty(exports, "__esModule", ({
661  value: true
662}));
663exports.DevtoolsHookable = void 0;
664
665const shared_utils_1 = __webpack_require__(27146);
666
667class DevtoolsHookable {
668  constructor(ctx, plugin = null) {
669    this.handlers = {};
670    this.ctx = ctx;
671    this.plugin = plugin;
672  }
673
674  hook(eventType, handler, pluginPermision = null) {
675    const handlers = this.handlers[eventType] = this.handlers[eventType] || [];
676
677    if (this.plugin) {
678      const originalHandler = handler;
679
680      handler = (...args) => {
681        // Plugin permission
682        if (!(0, shared_utils_1.hasPluginPermission)(this.plugin.descriptor.id, shared_utils_1.PluginPermission.ENABLED) || pluginPermision && !(0, shared_utils_1.hasPluginPermission)(this.plugin.descriptor.id, pluginPermision)) return; // App scope
683
684        if (!this.plugin.descriptor.disableAppScope && this.ctx.currentAppRecord.options.app !== this.plugin.descriptor.app) return; // Plugin scope
685
686        if (!this.plugin.descriptor.disablePluginScope && args[0].pluginId != null && args[0].pluginId !== this.plugin.descriptor.id) return;
687        return originalHandler(...args);
688      };
689    }
690
691    handlers.push({
692      handler,
693      plugin: this.ctx.currentPlugin
694    });
695  }
696
697  async callHandlers(eventType, payload, ctx) {
698    if (this.handlers[eventType]) {
699      const handlers = this.handlers[eventType];
700
701      for (let i = 0; i < handlers.length; i++) {
702        const {
703          handler,
704          plugin
705        } = handlers[i];
706
707        try {
708          await handler(payload, ctx);
709        } catch (e) {
710          console.error(`An error occurred in hook ${eventType}${plugin ? ` registered by plugin ${plugin.descriptor.id}` : ''}`);
711          console.error(e);
712        }
713      }
714    }
715
716    return payload;
717  }
718
719  transformCall(handler) {
720    this.hook("transformCall"
721    /* TRANSFORM_CALL */
722    , handler);
723  }
724
725  getAppRecordName(handler) {
726    this.hook("getAppRecordName"
727    /* GET_APP_RECORD_NAME */
728    , handler);
729  }
730
731  getAppRootInstance(handler) {
732    this.hook("getAppRootInstance"
733    /* GET_APP_ROOT_INSTANCE */
734    , handler);
735  }
736
737  registerApplication(handler) {
738    this.hook("registerApplication"
739    /* REGISTER_APPLICATION */
740    , handler);
741  }
742
743  walkComponentTree(handler) {
744    this.hook("walkComponentTree"
745    /* WALK_COMPONENT_TREE */
746    , handler, shared_utils_1.PluginPermission.COMPONENTS);
747  }
748
749  visitComponentTree(handler) {
750    this.hook("visitComponentTree"
751    /* VISIT_COMPONENT_TREE */
752    , handler, shared_utils_1.PluginPermission.COMPONENTS);
753  }
754
755  walkComponentParents(handler) {
756    this.hook("walkComponentParents"
757    /* WALK_COMPONENT_PARENTS */
758    , handler, shared_utils_1.PluginPermission.COMPONENTS);
759  }
760
761  inspectComponent(handler) {
762    this.hook("inspectComponent"
763    /* INSPECT_COMPONENT */
764    , handler, shared_utils_1.PluginPermission.COMPONENTS);
765  }
766
767  getComponentBounds(handler) {
768    this.hook("getComponentBounds"
769    /* GET_COMPONENT_BOUNDS */
770    , handler, shared_utils_1.PluginPermission.COMPONENTS);
771  }
772
773  getComponentName(handler) {
774    this.hook("getComponentName"
775    /* GET_COMPONENT_NAME */
776    , handler, shared_utils_1.PluginPermission.COMPONENTS);
777  }
778
779  getComponentInstances(handler) {
780    this.hook("getComponentInstances"
781    /* GET_COMPONENT_INSTANCES */
782    , handler, shared_utils_1.PluginPermission.COMPONENTS);
783  }
784
785  getElementComponent(handler) {
786    this.hook("getElementComponent"
787    /* GET_ELEMENT_COMPONENT */
788    , handler, shared_utils_1.PluginPermission.COMPONENTS);
789  }
790
791  getComponentRootElements(handler) {
792    this.hook("getComponentRootElements"
793    /* GET_COMPONENT_ROOT_ELEMENTS */
794    , handler, shared_utils_1.PluginPermission.COMPONENTS);
795  }
796
797  editComponentState(handler) {
798    this.hook("editComponentState"
799    /* EDIT_COMPONENT_STATE */
800    , handler, shared_utils_1.PluginPermission.COMPONENTS);
801  }
802
803  getComponentDevtoolsOptions(handler) {
804    this.hook("getAppDevtoolsOptions"
805    /* GET_COMPONENT_DEVTOOLS_OPTIONS */
806    , handler, shared_utils_1.PluginPermission.COMPONENTS);
807  }
808
809  getComponentRenderCode(handler) {
810    this.hook("getComponentRenderCode"
811    /* GET_COMPONENT_RENDER_CODE */
812    , handler, shared_utils_1.PluginPermission.COMPONENTS);
813  }
814
815  inspectTimelineEvent(handler) {
816    this.hook("inspectTimelineEvent"
817    /* INSPECT_TIMELINE_EVENT */
818    , handler, shared_utils_1.PluginPermission.TIMELINE);
819  }
820
821  timelineCleared(handler) {
822    this.hook("timelineCleared"
823    /* TIMELINE_CLEARED */
824    , handler, shared_utils_1.PluginPermission.TIMELINE);
825  }
826
827  getInspectorTree(handler) {
828    this.hook("getInspectorTree"
829    /* GET_INSPECTOR_TREE */
830    , handler, shared_utils_1.PluginPermission.CUSTOM_INSPECTOR);
831  }
832
833  getInspectorState(handler) {
834    this.hook("getInspectorState"
835    /* GET_INSPECTOR_STATE */
836    , handler, shared_utils_1.PluginPermission.CUSTOM_INSPECTOR);
837  }
838
839  editInspectorState(handler) {
840    this.hook("editInspectorState"
841    /* EDIT_INSPECTOR_STATE */
842    , handler, shared_utils_1.PluginPermission.CUSTOM_INSPECTOR);
843  }
844
845  setPluginSettings(handler) {
846    this.hook("setPluginSettings"
847    /* SET_PLUGIN_SETTINGS */
848    , handler);
849  }
850
851}
852
853exports.DevtoolsHookable = DevtoolsHookable;
854
855/***/ }),
856
857/***/ 64803:
858/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
859
860"use strict";
861
862
863var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
864  if (k2 === undefined) k2 = k;
865  Object.defineProperty(o, k2, {
866    enumerable: true,
867    get: function () {
868      return m[k];
869    }
870  });
871} : function (o, m, k, k2) {
872  if (k2 === undefined) k2 = k;
873  o[k2] = m[k];
874});
875
876var __exportStar = this && this.__exportStar || function (m, exports) {
877  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
878};
879
880Object.defineProperty(exports, "__esModule", ({
881  value: true
882}));
883
884__exportStar(__webpack_require__(32423), exports);
885
886__exportStar(__webpack_require__(62393), exports);
887
888__exportStar(__webpack_require__(30346), exports);
889
890__exportStar(__webpack_require__(64930), exports);
891
892__exportStar(__webpack_require__(2107), exports);
893
894__exportStar(__webpack_require__(29618), exports);
895
896__exportStar(__webpack_require__(445), exports);
897
898/***/ }),
899
900/***/ 445:
901/***/ ((__unused_webpack_module, exports) => {
902
903"use strict";
904
905
906Object.defineProperty(exports, "__esModule", ({
907  value: true
908}));
909
910/***/ }),
911
912/***/ 79132:
913/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
914
915"use strict";
916
917
918var __importDefault = this && this.__importDefault || function (mod) {
919  return mod && mod.__esModule ? mod : {
920    "default": mod
921  };
922};
923
924Object.defineProperty(exports, "__esModule", ({
925  value: true
926}));
927exports._legacy_getAndRegisterApps = exports.removeApp = exports.sendApps = exports.waitForAppsRegistration = exports.getAppRecord = exports.getAppRecordId = exports.mapAppRecord = exports.selectApp = exports.registerApp = void 0;
928
929const shared_utils_1 = __webpack_require__(27146);
930
931const speakingurl_1 = __importDefault(__webpack_require__(97500));
932
933const queue_1 = __webpack_require__(49107);
934
935const scan_1 = __webpack_require__(18426);
936
937const timeline_1 = __webpack_require__(41515);
938
939const backend_1 = __webpack_require__(36873);
940
941const jobs = new queue_1.JobQueue();
942let recordId = 0;
943const appRecordPromises = new Map();
944
945async function registerApp(options, ctx) {
946  return jobs.queue(() => registerAppJob(options, ctx));
947}
948
949exports.registerApp = registerApp;
950
951async function registerAppJob(options, ctx) {
952  // Dedupe
953  if (ctx.appRecords.find(a => a.options === options)) {
954    return;
955  } // Find correct backend
956
957
958  const baseFrameworkVersion = parseInt(options.version.substr(0, options.version.indexOf('.')));
959
960  for (let i = 0; i < backend_1.availableBackends.length; i++) {
961    const backendOptions = backend_1.availableBackends[i];
962
963    if (backendOptions.frameworkVersion === baseFrameworkVersion) {
964      // Enable backend if it's not enabled
965      const backend = (0, backend_1.getBackend)(backendOptions, ctx);
966      await createAppRecord(options, backend, ctx);
967      break;
968    }
969  }
970}
971
972async function createAppRecord(options, backend, ctx) {
973  var _a;
974
975  const rootInstance = await backend.api.getAppRootInstance(options.app);
976
977  if (rootInstance) {
978    if ((await backend.api.getComponentDevtoolsOptions(rootInstance)).hide) {
979      return;
980    }
981
982    recordId++;
983    const name = await backend.api.getAppRecordName(options.app, recordId.toString());
984    const id = getAppRecordId(options.app, (0, speakingurl_1.default)(name));
985    const [el] = await backend.api.getComponentRootElements(rootInstance);
986    const record = {
987      id,
988      name,
989      options,
990      backend,
991      lastInspectedComponentId: null,
992      instanceMap: new Map(),
993      rootInstance,
994      perfGroupIds: new Map(),
995      iframe: document !== el.ownerDocument ? el.ownerDocument.location.pathname : null,
996      meta: (_a = options.meta) !== null && _a !== void 0 ? _a : {}
997    };
998    options.app.__VUE_DEVTOOLS_APP_RECORD__ = record;
999    const rootId = `${record.id}:root`;
1000    record.instanceMap.set(rootId, record.rootInstance);
1001    record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId; // Timeline
1002
1003    (0, timeline_1.addBuiltinLayers)(record, ctx);
1004    ctx.appRecords.push(record);
1005
1006    if (backend.options.setupApp) {
1007      backend.options.setupApp(backend.api, record);
1008    }
1009
1010    await backend.api.registerApplication(options.app);
1011    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_ADD, {
1012      appRecord: mapAppRecord(record)
1013    });
1014
1015    if (appRecordPromises.has(options.app)) {
1016      for (const r of appRecordPromises.get(options.app)) {
1017        await r(record);
1018      }
1019    } // Auto select first app
1020
1021
1022    if (ctx.currentAppRecord == null) {
1023      await selectApp(record, ctx);
1024    }
1025  } else {
1026    console.warn('[Vue devtools] No root instance found for app, it might have been unmounted', options.app);
1027  }
1028}
1029
1030async function selectApp(record, ctx) {
1031  ctx.currentAppRecord = record;
1032  ctx.currentInspectedComponentId = record.lastInspectedComponentId;
1033  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_SELECTED, {
1034    id: record.id,
1035    lastInspectedComponentId: record.lastInspectedComponentId
1036  });
1037}
1038
1039exports.selectApp = selectApp;
1040
1041function mapAppRecord(record) {
1042  return {
1043    id: record.id,
1044    name: record.name,
1045    version: record.options.version,
1046    iframe: record.iframe
1047  };
1048}
1049
1050exports.mapAppRecord = mapAppRecord;
1051const appIds = new Set();
1052
1053function getAppRecordId(app, defaultId) {
1054  if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null) {
1055    return app.__VUE_DEVTOOLS_APP_RECORD_ID__;
1056  }
1057
1058  let id = defaultId !== null && defaultId !== void 0 ? defaultId : (recordId++).toString();
1059
1060  if (defaultId && appIds.has(id)) {
1061    let count = 1;
1062
1063    while (appIds.has(`${defaultId}:${count}`)) {
1064      count++;
1065    }
1066
1067    id = `${defaultId}_${count}`;
1068  }
1069
1070  appIds.add(id);
1071  app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id;
1072  return id;
1073}
1074
1075exports.getAppRecordId = getAppRecordId;
1076
1077async function getAppRecord(app, ctx) {
1078  const record = ctx.appRecords.find(ar => ar.options.app === app);
1079
1080  if (record) {
1081    return record;
1082  }
1083
1084  return new Promise((resolve, reject) => {
1085    let resolvers = appRecordPromises.get(app);
1086    let timedOut = false;
1087
1088    if (!resolvers) {
1089      resolvers = [];
1090      appRecordPromises.set(app, resolvers);
1091    }
1092
1093    const fn = record => {
1094      if (!timedOut) {
1095        clearTimeout(timer);
1096        resolve(record);
1097      }
1098    };
1099
1100    resolvers.push(fn);
1101    const timer = setTimeout(() => {
1102      timedOut = true;
1103      const index = resolvers.indexOf(fn);
1104      if (index !== -1) resolvers.splice(index, 1);
1105
1106      if (shared_utils_1.SharedData.debugInfo) {
1107        // eslint-disable-next-line no-console
1108        console.log('Timed out waiting for app record', app);
1109      }
1110
1111      reject(new Error(`Timed out getting app record for app`));
1112    }, 60000);
1113  });
1114}
1115
1116exports.getAppRecord = getAppRecord;
1117
1118function waitForAppsRegistration() {
1119  return jobs.queue(async () => {});
1120}
1121
1122exports.waitForAppsRegistration = waitForAppsRegistration;
1123
1124async function sendApps(ctx) {
1125  const appRecords = [];
1126
1127  for (const appRecord of ctx.appRecords) {
1128    appRecords.push(appRecord);
1129  }
1130
1131  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_LIST, {
1132    apps: appRecords.map(mapAppRecord)
1133  });
1134}
1135
1136exports.sendApps = sendApps;
1137
1138async function removeApp(app, ctx) {
1139  try {
1140    const appRecord = await getAppRecord(app, ctx);
1141
1142    if (appRecord) {
1143      appIds.delete(appRecord.id);
1144      const index = ctx.appRecords.indexOf(appRecord);
1145      if (index !== -1) ctx.appRecords.splice(index, 1);
1146      (0, timeline_1.removeLayersForApp)(app, ctx);
1147      ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_REMOVE, {
1148        id: appRecord.id
1149      });
1150    }
1151  } catch (e) {
1152    if (shared_utils_1.SharedData.debugInfo) {
1153      console.error(e);
1154    }
1155  }
1156}
1157
1158exports.removeApp = removeApp; // eslint-disable-next-line camelcase
1159
1160async function _legacy_getAndRegisterApps(Vue, ctx) {
1161  const apps = (0, scan_1.scan)();
1162  apps.forEach(app => {
1163    registerApp({
1164      app,
1165      types: {},
1166      version: Vue.version,
1167      meta: {
1168        Vue
1169      }
1170    }, ctx);
1171  });
1172}
1173
1174exports._legacy_getAndRegisterApps = _legacy_getAndRegisterApps;
1175
1176/***/ }),
1177
1178/***/ 36873:
1179/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1180
1181"use strict";
1182
1183
1184Object.defineProperty(exports, "__esModule", ({
1185  value: true
1186}));
1187exports.getBackend = exports.availableBackends = void 0;
1188
1189const app_backend_api_1 = __webpack_require__(64803);
1190
1191const app_backend_vue1_1 = __webpack_require__(70062);
1192
1193const app_backend_vue2_1 = __webpack_require__(88690);
1194
1195const app_backend_vue3_1 = __webpack_require__(64964);
1196
1197const perf_1 = __webpack_require__(75552);
1198
1199exports.availableBackends = [app_backend_vue1_1.backend, app_backend_vue2_1.backend, app_backend_vue3_1.backend];
1200const enabledBackends = new Map();
1201
1202function getBackend(backendOptions, ctx) {
1203  let backend;
1204
1205  if (!enabledBackends.has(backendOptions)) {
1206    // Create backend
1207    backend = (0, app_backend_api_1.createBackend)(backendOptions, ctx);
1208    (0, perf_1.handleAddPerformanceTag)(backend, ctx);
1209    enabledBackends.set(backendOptions, backend);
1210    ctx.backends.push(backend);
1211  } else {
1212    backend = enabledBackends.get(backendOptions);
1213  }
1214
1215  return backend;
1216}
1217
1218exports.getBackend = getBackend;
1219
1220/***/ }),
1221
1222/***/ 76794:
1223/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1224
1225"use strict";
1226
1227
1228Object.defineProperty(exports, "__esModule", ({
1229  value: true
1230}));
1231
1232const shared_utils_1 = __webpack_require__(27146);
1233
1234const highlighter_1 = __webpack_require__(44877);
1235
1236class ComponentPicker {
1237  constructor(ctx) {
1238    this.ctx = ctx;
1239    this.bindMethods();
1240  }
1241  /**
1242   * Adds event listeners for mouseover and mouseup
1243   */
1244
1245
1246  startSelecting() {
1247    if (!shared_utils_1.isBrowser) return;
1248    window.addEventListener('mouseover', this.elementMouseOver, true);
1249    window.addEventListener('click', this.elementClicked, true);
1250    window.addEventListener('mouseout', this.cancelEvent, true);
1251    window.addEventListener('mouseenter', this.cancelEvent, true);
1252    window.addEventListener('mouseleave', this.cancelEvent, true);
1253    window.addEventListener('mousedown', this.cancelEvent, true);
1254    window.addEventListener('mouseup', this.cancelEvent, true);
1255  }
1256  /**
1257   * Removes event listeners
1258   */
1259
1260
1261  stopSelecting() {
1262    if (!shared_utils_1.isBrowser) return;
1263    window.removeEventListener('mouseover', this.elementMouseOver, true);
1264    window.removeEventListener('click', this.elementClicked, true);
1265    window.removeEventListener('mouseout', this.cancelEvent, true);
1266    window.removeEventListener('mouseenter', this.cancelEvent, true);
1267    window.removeEventListener('mouseleave', this.cancelEvent, true);
1268    window.removeEventListener('mousedown', this.cancelEvent, true);
1269    window.removeEventListener('mouseup', this.cancelEvent, true);
1270    (0, highlighter_1.unHighlight)();
1271  }
1272  /**
1273   * Highlights a component on element mouse over
1274   */
1275
1276
1277  async elementMouseOver(e) {
1278    this.cancelEvent(e);
1279    const el = e.target;
1280
1281    if (el) {
1282      await this.selectElementComponent(el);
1283    }
1284
1285    (0, highlighter_1.unHighlight)();
1286
1287    if (this.selectedInstance) {
1288      (0, highlighter_1.highlight)(this.selectedInstance, this.selectedBackend, this.ctx);
1289    }
1290  }
1291
1292  async selectElementComponent(el) {
1293    for (const backend of this.ctx.backends) {
1294      const instance = await backend.api.getElementComponent(el);
1295
1296      if (instance) {
1297        this.selectedInstance = instance;
1298        this.selectedBackend = backend;
1299        return;
1300      }
1301    }
1302
1303    this.selectedInstance = null;
1304    this.selectedBackend = null;
1305  }
1306  /**
1307   * Selects an instance in the component view
1308   */
1309
1310
1311  async elementClicked(e) {
1312    this.cancelEvent(e);
1313
1314    if (this.selectedInstance && this.selectedBackend) {
1315      const parentInstances = await this.selectedBackend.api.walkComponentParents(this.selectedInstance);
1316      this.ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_PICK, {
1317        id: this.selectedInstance.__VUE_DEVTOOLS_UID__,
1318        parentIds: parentInstances.map(i => i.__VUE_DEVTOOLS_UID__)
1319      });
1320    } else {
1321      this.ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_PICK_CANCELED, null);
1322    }
1323
1324    this.stopSelecting();
1325  }
1326  /**
1327   * Cancel a mouse event
1328   */
1329
1330
1331  cancelEvent(e) {
1332    e.stopImmediatePropagation();
1333    e.preventDefault();
1334  }
1335  /**
1336   * Bind class methods to the class scope to avoid rebind for event listeners
1337   */
1338
1339
1340  bindMethods() {
1341    this.startSelecting = this.startSelecting.bind(this);
1342    this.stopSelecting = this.stopSelecting.bind(this);
1343    this.elementMouseOver = this.elementMouseOver.bind(this);
1344    this.elementClicked = this.elementClicked.bind(this);
1345  }
1346
1347}
1348
1349exports["default"] = ComponentPicker;
1350
1351/***/ }),
1352
1353/***/ 63304:
1354/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1355
1356"use strict";
1357
1358
1359Object.defineProperty(exports, "__esModule", ({
1360  value: true
1361}));
1362exports.getComponentInstance = exports.getComponentId = exports.editComponentState = exports.sendEmptyComponentData = exports.markSelectedInstance = exports.sendSelectedComponentData = exports.sendComponentTreeData = void 0;
1363
1364const shared_utils_1 = __webpack_require__(27146);
1365
1366const app_backend_api_1 = __webpack_require__(64803);
1367
1368const app_1 = __webpack_require__(79132);
1369
1370const MAX_$VM = 10;
1371const $vmQueue = [];
1372
1373async function sendComponentTreeData(appRecord, instanceId, filter = '', maxDepth = null, ctx) {
1374  if (!instanceId || appRecord !== ctx.currentAppRecord) return; // Flush will send all components in the tree
1375  // So we skip individiual tree updates
1376
1377  if (instanceId !== '_root' && ctx.currentAppRecord.backend.options.features.includes(app_backend_api_1.BuiltinBackendFeature.FLUSH)) {
1378    return;
1379  }
1380
1381  const instance = getComponentInstance(appRecord, instanceId, ctx);
1382
1383  if (!instance) {
1384    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_TREE, {
1385      instanceId,
1386      treeData: null,
1387      notFound: true
1388    });
1389  } else {
1390    if (filter) filter = filter.toLowerCase();
1391
1392    if (maxDepth == null) {
1393      maxDepth = instance === ctx.currentAppRecord.rootInstance ? 2 : 1;
1394    }
1395
1396    const data = await appRecord.backend.api.walkComponentTree(instance, maxDepth, filter);
1397    const payload = {
1398      instanceId,
1399      treeData: (0, shared_utils_1.stringify)(data)
1400    };
1401    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_TREE, payload);
1402  }
1403}
1404
1405exports.sendComponentTreeData = sendComponentTreeData;
1406
1407async function sendSelectedComponentData(appRecord, instanceId, ctx) {
1408  if (!instanceId || appRecord !== ctx.currentAppRecord) return;
1409  const instance = getComponentInstance(appRecord, instanceId, ctx);
1410
1411  if (!instance) {
1412    sendEmptyComponentData(instanceId, ctx);
1413  } else {
1414    // Expose instance on window
1415    if (typeof window !== 'undefined') {
1416      const win = window;
1417      win.$vm = instance; // $vm0, $vm1, $vm2, ...
1418
1419      if ($vmQueue[0] !== instance) {
1420        if ($vmQueue.length >= MAX_$VM) {
1421          $vmQueue.pop();
1422        }
1423
1424        for (let i = $vmQueue.length; i > 0; i--) {
1425          win[`$vm${i}`] = $vmQueue[i] = $vmQueue[i - 1];
1426        }
1427
1428        win.$vm0 = $vmQueue[0] = instance;
1429      }
1430    }
1431
1432    if (shared_utils_1.SharedData.debugInfo) {
1433      // eslint-disable-next-line no-console
1434      console.log('[DEBUG] inspect', instance);
1435    }
1436
1437    const parentInstances = await appRecord.backend.api.walkComponentParents(instance);
1438    const payload = {
1439      instanceId,
1440      data: (0, shared_utils_1.stringify)(await appRecord.backend.api.inspectComponent(instance, ctx.currentAppRecord.options.app)),
1441      parentIds: parentInstances.map(i => i.__VUE_DEVTOOLS_UID__)
1442    };
1443    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_SELECTED_DATA, payload);
1444    markSelectedInstance(instanceId, ctx);
1445  }
1446}
1447
1448exports.sendSelectedComponentData = sendSelectedComponentData;
1449
1450function markSelectedInstance(instanceId, ctx) {
1451  ctx.currentInspectedComponentId = instanceId;
1452  ctx.currentAppRecord.lastInspectedComponentId = instanceId;
1453}
1454
1455exports.markSelectedInstance = markSelectedInstance;
1456
1457function sendEmptyComponentData(instanceId, ctx) {
1458  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_SELECTED_DATA, {
1459    instanceId,
1460    data: null
1461  });
1462}
1463
1464exports.sendEmptyComponentData = sendEmptyComponentData;
1465
1466async function editComponentState(instanceId, dotPath, type, state, ctx) {
1467  if (!instanceId) return;
1468  const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx);
1469
1470  if (instance) {
1471    if ('value' in state && state.value != null) {
1472      state.value = (0, shared_utils_1.parse)(state.value, true);
1473    }
1474
1475    await ctx.currentAppRecord.backend.api.editComponentState(instance, dotPath, type, state, ctx.currentAppRecord.options.app);
1476    await sendSelectedComponentData(ctx.currentAppRecord, instanceId, ctx);
1477  }
1478}
1479
1480exports.editComponentState = editComponentState;
1481
1482async function getComponentId(app, uid, instance, ctx) {
1483  try {
1484    if (instance.__VUE_DEVTOOLS_UID__) return instance.__VUE_DEVTOOLS_UID__;
1485    const appRecord = await (0, app_1.getAppRecord)(app, ctx);
1486    if (!appRecord) return null;
1487    const isRoot = appRecord.rootInstance === instance;
1488    return `${appRecord.id}:${isRoot ? 'root' : uid}`;
1489  } catch (e) {
1490    if (shared_utils_1.SharedData.debugInfo) {
1491      console.error(e);
1492    }
1493
1494    return null;
1495  }
1496}
1497
1498exports.getComponentId = getComponentId;
1499
1500function getComponentInstance(appRecord, instanceId, ctx) {
1501  if (instanceId === '_root') {
1502    instanceId = `${appRecord.id}:root`;
1503  }
1504
1505  const instance = appRecord.instanceMap.get(instanceId);
1506
1507  if (!instance && shared_utils_1.SharedData.debugInfo) {
1508    console.warn(`Instance uid=${instanceId} not found`);
1509  }
1510
1511  return instance;
1512}
1513
1514exports.getComponentInstance = getComponentInstance;
1515
1516/***/ }),
1517
1518/***/ 13179:
1519/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1520
1521"use strict";
1522
1523
1524Object.defineProperty(exports, "__esModule", ({
1525  value: true
1526}));
1527exports.hook = void 0;
1528
1529const shared_utils_1 = __webpack_require__(27146); // hook should have been injected before this executes.
1530
1531
1532exports.hook = shared_utils_1.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
1533
1534/***/ }),
1535
1536/***/ 44877:
1537/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
1538
1539"use strict";
1540
1541
1542Object.defineProperty(exports, "__esModule", ({
1543  value: true
1544}));
1545exports.unHighlight = exports.highlight = void 0;
1546
1547const shared_utils_1 = __webpack_require__(27146);
1548
1549const queue_1 = __webpack_require__(49107);
1550
1551let overlay;
1552let overlayContent;
1553let currentInstance;
1554
1555function createOverlay() {
1556  if (overlay || !shared_utils_1.isBrowser) return;
1557  overlay = document.createElement('div');
1558  overlay.style.backgroundColor = 'rgba(65, 184, 131, 0.35)';
1559  overlay.style.position = 'fixed';
1560  overlay.style.zIndex = '99999999999998';
1561  overlay.style.pointerEvents = 'none';
1562  overlay.style.borderRadius = '3px';
1563  overlayContent = document.createElement('div');
1564  overlayContent.style.position = 'fixed';
1565  overlayContent.style.zIndex = '99999999999999';
1566  overlayContent.style.pointerEvents = 'none';
1567  overlayContent.style.backgroundColor = 'white';
1568  overlayContent.style.fontFamily = 'monospace';
1569  overlayContent.style.fontSize = '11px';
1570  overlayContent.style.padding = '4px 8px';
1571  overlayContent.style.borderRadius = '3px';
1572  overlayContent.style.color = '#333';
1573  overlayContent.style.textAlign = 'center';
1574  overlayContent.style.border = 'rgba(65, 184, 131, 0.5) 1px solid';
1575  overlayContent.style.backgroundClip = 'padding-box';
1576} // Use a job queue to preserve highlight/unhighlight calls order
1577// This prevents "sticky" highlights that are not removed because highlight is async
1578
1579
1580const jobQueue = new queue_1.JobQueue();
1581
1582async function highlight(instance, backend, ctx) {
1583  await jobQueue.queue(async () => {
1584    if (!instance) return;
1585    const bounds = await backend.api.getComponentBounds(instance);
1586
1587    if (bounds) {
1588      createOverlay(); // Name
1589
1590      const name = (await backend.api.getComponentName(instance)) || 'Anonymous';
1591      const pre = document.createElement('span');
1592      pre.style.opacity = '0.6';
1593      pre.innerText = '<';
1594      const text = document.createElement('span');
1595      text.style.fontWeight = 'bold';
1596      text.style.color = '#09ab56';
1597      text.innerText = name;
1598      const post = document.createElement('span');
1599      post.style.opacity = '0.6';
1600      post.innerText = '>'; // Size
1601
1602      const size = document.createElement('span');
1603      size.style.opacity = '0.5';
1604      size.style.marginLeft = '6px';
1605      size.appendChild(document.createTextNode((Math.round(bounds.width * 100) / 100).toString()));
1606      const multiply = document.createElement('span');
1607      multiply.style.marginLeft = multiply.style.marginRight = '2px';
1608      multiply.innerText = '×';
1609      size.appendChild(multiply);
1610      size.appendChild(document.createTextNode((Math.round(bounds.height * 100) / 100).toString()));
1611      currentInstance = instance;
1612      await showOverlay(bounds, [pre, text, post, size]);
1613    }
1614
1615    startUpdateTimer(backend, ctx);
1616  });
1617}
1618
1619exports.highlight = highlight;
1620
1621async function unHighlight() {
1622  await jobQueue.queue(async () => {
1623    var _a, _b;
1624
1625    (_a = overlay === null || overlay === void 0 ? void 0 : overlay.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(overlay);
1626    (_b = overlayContent === null || overlayContent === void 0 ? void 0 : overlayContent.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(overlayContent);
1627    currentInstance = null;
1628    stopUpdateTimer();
1629  });
1630}
1631
1632exports.unHighlight = unHighlight;
1633
1634function showOverlay(bounds, children = null) {
1635  if (!shared_utils_1.isBrowser || !children.length) return;
1636  positionOverlay(bounds);
1637  document.body.appendChild(overlay);
1638  overlayContent.innerHTML = '';
1639  children.forEach(child => overlayContent.appendChild(child));
1640  document.body.appendChild(overlayContent);
1641  positionOverlayContent(bounds);
1642}
1643
1644function positionOverlay({
1645  width = 0,
1646  height = 0,
1647  top = 0,
1648  left = 0
1649}) {
1650  overlay.style.width = Math.round(width) + 'px';
1651  overlay.style.height = Math.round(height) + 'px';
1652  overlay.style.left = Math.round(left) + 'px';
1653  overlay.style.top = Math.round(top) + 'px';
1654}
1655
1656function positionOverlayContent({
1657  height = 0,
1658  top = 0,
1659  left = 0
1660}) {
1661  // Content position (prevents overflow)
1662  const contentWidth = overlayContent.offsetWidth;
1663  const contentHeight = overlayContent.offsetHeight;
1664  let contentLeft = left;
1665
1666  if (contentLeft < 0) {
1667    contentLeft = 0;
1668  } else if (contentLeft + contentWidth > window.innerWidth) {
1669    contentLeft = window.innerWidth - contentWidth;
1670  }
1671
1672  let contentTop = top - contentHeight - 2;
1673
1674  if (contentTop < 0) {
1675    contentTop = top + height + 2;
1676  }
1677
1678  if (contentTop < 0) {
1679    contentTop = 0;
1680  } else if (contentTop + contentHeight > window.innerHeight) {
1681    contentTop = window.innerHeight - contentHeight;
1682  }
1683
1684  overlayContent.style.left = ~~contentLeft + 'px';
1685  overlayContent.style.top = ~~contentTop + 'px';
1686}
1687
1688async function updateOverlay(backend, ctx) {
1689  if (currentInstance) {
1690    const bounds = await backend.api.getComponentBounds(currentInstance);
1691
1692    if (bounds) {
1693      const sizeEl = overlayContent.children.item(3);
1694      const widthEl = sizeEl.childNodes[0];
1695      widthEl.textContent = (Math.round(bounds.width * 100) / 100).toString();
1696      const heightEl = sizeEl.childNodes[2];
1697      heightEl.textContent = (Math.round(bounds.height * 100) / 100).toString();
1698      positionOverlay(bounds);
1699      positionOverlayContent(bounds);
1700    }
1701  }
1702}
1703
1704let updateTimer;
1705
1706function startUpdateTimer(backend, ctx) {
1707  stopUpdateTimer();
1708  updateTimer = setInterval(() => {
1709    jobQueue.queue(async () => {
1710      await updateOverlay(backend, ctx);
1711    });
1712  }, 1000 / 30); // 30fps
1713}
1714
1715function stopUpdateTimer() {
1716  clearInterval(updateTimer);
1717}
1718
1719/***/ }),
1720
1721/***/ 6895:
1722/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1723
1724"use strict";
1725
1726
1727var __importDefault = this && this.__importDefault || function (mod) {
1728  return mod && mod.__esModule ? mod : {
1729    "default": mod
1730  };
1731};
1732
1733var _a, _b;
1734
1735Object.defineProperty(exports, "__esModule", ({
1736  value: true
1737}));
1738exports.initBackend = void 0;
1739
1740const app_backend_api_1 = __webpack_require__(64803);
1741
1742const shared_utils_1 = __webpack_require__(27146);
1743
1744const debounce_1 = __importDefault(__webpack_require__(54073));
1745
1746const global_hook_1 = __webpack_require__(13179);
1747
1748const subscriptions_1 = __webpack_require__(19815);
1749
1750const highlighter_1 = __webpack_require__(44877);
1751
1752const timeline_1 = __webpack_require__(41515);
1753
1754const component_pick_1 = __importDefault(__webpack_require__(76794));
1755
1756const component_1 = __webpack_require__(63304);
1757
1758const plugin_1 = __webpack_require__(42989);
1759
1760const app_1 = __webpack_require__(79132);
1761
1762const inspector_1 = __webpack_require__(96048);
1763
1764const timeline_screenshot_1 = __webpack_require__(11354);
1765
1766const perf_1 = __webpack_require__(75552);
1767
1768const page_config_1 = __webpack_require__(26639);
1769
1770const timeline_marker_1 = __webpack_require__(72063);
1771
1772let ctx = (_a = shared_utils_1.target.__vdevtools_ctx) !== null && _a !== void 0 ? _a : null;
1773let connected = (_b = shared_utils_1.target.__vdevtools_connected) !== null && _b !== void 0 ? _b : false;
1774
1775async function initBackend(bridge) {
1776  await (0, shared_utils_1.initSharedData)({
1777    bridge,
1778    persist: false
1779  });
1780  (0, page_config_1.initOnPageConfig)();
1781
1782  if (!connected) {
1783    // connected = false
1784    ctx = shared_utils_1.target.__vdevtools_ctx = (0, app_backend_api_1.createBackendContext)({
1785      bridge,
1786      hook: global_hook_1.hook
1787    });
1788
1789    if (global_hook_1.hook.Vue) {
1790      connect();
1791      (0, app_1._legacy_getAndRegisterApps)(global_hook_1.hook.Vue, ctx);
1792    } else {
1793      global_hook_1.hook.once(shared_utils_1.HookEvents.INIT, Vue => {
1794        (0, app_1._legacy_getAndRegisterApps)(Vue, ctx);
1795      });
1796    }
1797
1798    global_hook_1.hook.on(shared_utils_1.HookEvents.APP_ADD, async app => {
1799      await (0, app_1.registerApp)(app, ctx); // Will init connect
1800
1801      global_hook_1.hook.emit(shared_utils_1.HookEvents.INIT);
1802    }); // Add apps that already sent init
1803
1804    if (global_hook_1.hook.apps.length) {
1805      global_hook_1.hook.apps.forEach(app => {
1806        (0, app_1.registerApp)(app, ctx);
1807        connect();
1808      });
1809    }
1810  } else {
1811    ctx.bridge = bridge;
1812    connectBridge();
1813  }
1814}
1815
1816exports.initBackend = initBackend;
1817
1818async function connect() {
1819  if (connected) {
1820    return;
1821  }
1822
1823  connected = shared_utils_1.target.__vdevtools_connected = true;
1824  await (0, app_1.waitForAppsRegistration)();
1825  connectBridge();
1826  ctx.currentTab = shared_utils_1.BuiltinTabs.COMPONENTS; // Apps
1827
1828  global_hook_1.hook.on(shared_utils_1.HookEvents.APP_UNMOUNT, app => {
1829    (0, app_1.removeApp)(app, ctx);
1830  }); // Components
1831
1832  global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_UPDATED, async (app, uid, parentUid, component) => {
1833    try {
1834      let id;
1835      let appRecord;
1836
1837      if (app && uid != null) {
1838        id = await (0, component_1.getComponentId)(app, uid, component, ctx);
1839        appRecord = await (0, app_1.getAppRecord)(app, ctx);
1840      } else {
1841        id = ctx.currentInspectedComponentId;
1842        appRecord = ctx.currentAppRecord;
1843      } // Update component inspector
1844
1845
1846      if (id && (0, subscriptions_1.isSubscribed)(shared_utils_1.BridgeSubscriptions.SELECTED_COMPONENT_DATA, sub => sub.payload.instanceId === id)) {
1847        (0, component_1.sendSelectedComponentData)(appRecord, id, ctx);
1848      } // Update tree (tags)
1849
1850
1851      if ((0, subscriptions_1.isSubscribed)(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === id)) {
1852        (0, component_1.sendComponentTreeData)(appRecord, id, appRecord.componentFilter, 0, ctx);
1853      }
1854    } catch (e) {
1855      if (shared_utils_1.SharedData.debugInfo) {
1856        console.error(e);
1857      }
1858    }
1859  });
1860  global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
1861    try {
1862      const id = await (0, component_1.getComponentId)(app, uid, component, ctx);
1863      const appRecord = await (0, app_1.getAppRecord)(app, ctx);
1864
1865      if (component) {
1866        if (component.__VUE_DEVTOOLS_UID__ == null) {
1867          component.__VUE_DEVTOOLS_UID__ = id;
1868        }
1869
1870        if (!appRecord.instanceMap.has(id)) {
1871          appRecord.instanceMap.set(id, component);
1872        }
1873      }
1874
1875      if (parentUid != null) {
1876        const parentInstances = await appRecord.backend.api.walkComponentParents(component);
1877
1878        if (parentInstances.length) {
1879          // Check two parents level to update `hasChildren
1880          for (let i = 0; i < 2 && i < parentInstances.length; i++) {
1881            const parentId = await (0, component_1.getComponentId)(app, parentUid, parentInstances[i], ctx);
1882
1883            if ((0, subscriptions_1.isSubscribed)(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
1884              requestAnimationFrame(() => {
1885                (0, component_1.sendComponentTreeData)(appRecord, parentId, appRecord.componentFilter, null, ctx);
1886              });
1887            }
1888          }
1889        }
1890      }
1891
1892      if (ctx.currentInspectedComponentId === id) {
1893        (0, component_1.sendSelectedComponentData)(appRecord, id, ctx);
1894      }
1895    } catch (e) {
1896      if (shared_utils_1.SharedData.debugInfo) {
1897        console.error(e);
1898      }
1899    }
1900  });
1901  global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_REMOVED, async (app, uid, parentUid, component) => {
1902    try {
1903      const appRecord = await (0, app_1.getAppRecord)(app, ctx);
1904
1905      if (parentUid != null) {
1906        const parentInstances = await appRecord.backend.api.walkComponentParents(component);
1907
1908        if (parentInstances.length) {
1909          const parentId = await (0, component_1.getComponentId)(app, parentUid, parentInstances[0], ctx);
1910
1911          if ((0, subscriptions_1.isSubscribed)(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
1912            requestAnimationFrame(async () => {
1913              try {
1914                (0, component_1.sendComponentTreeData)(await (0, app_1.getAppRecord)(app, ctx), parentId, appRecord.componentFilter, null, ctx);
1915              } catch (e) {
1916                if (shared_utils_1.SharedData.debugInfo) {
1917                  console.error(e);
1918                }
1919              }
1920            });
1921          }
1922        }
1923      }
1924
1925      const id = await (0, component_1.getComponentId)(app, uid, component, ctx);
1926
1927      if ((0, subscriptions_1.isSubscribed)(shared_utils_1.BridgeSubscriptions.SELECTED_COMPONENT_DATA, sub => sub.payload.instanceId === id)) {
1928        (0, component_1.sendEmptyComponentData)(id, ctx);
1929      }
1930
1931      appRecord.instanceMap.delete(id);
1932    } catch (e) {
1933      if (shared_utils_1.SharedData.debugInfo) {
1934        console.error(e);
1935      }
1936    }
1937  }); // Component perf
1938
1939  global_hook_1.hook.on(shared_utils_1.HookEvents.PERFORMANCE_START, (app, uid, vm, type, time) => {
1940    (0, perf_1.performanceMarkStart)(app, uid, vm, type, time, ctx);
1941  });
1942  global_hook_1.hook.on(shared_utils_1.HookEvents.PERFORMANCE_END, (app, uid, vm, type, time) => {
1943    (0, perf_1.performanceMarkEnd)(app, uid, vm, type, time, ctx);
1944  }); // Highlighter
1945
1946  global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_HIGHLIGHT, instanceId => {
1947    (0, highlighter_1.highlight)(ctx.currentAppRecord.instanceMap.get(instanceId), ctx.currentAppRecord.backend, ctx);
1948  });
1949  global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_UNHIGHLIGHT, () => {
1950    (0, highlighter_1.unHighlight)();
1951  }); // Timeline
1952
1953  (0, timeline_1.setupTimeline)(ctx);
1954  global_hook_1.hook.on(shared_utils_1.HookEvents.TIMELINE_LAYER_ADDED, async (options, plugin) => {
1955    const appRecord = await (0, app_1.getAppRecord)(plugin.descriptor.app, ctx);
1956    ctx.timelineLayers.push({ ...options,
1957      appRecord,
1958      plugin,
1959      events: []
1960    });
1961    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_LAYER_ADD, {});
1962  });
1963  global_hook_1.hook.on(shared_utils_1.HookEvents.TIMELINE_EVENT_ADDED, async (options, plugin) => {
1964    await (0, timeline_1.addTimelineEvent)(options, plugin.descriptor.app, ctx);
1965  }); // Custom inspectors
1966
1967  global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_ADD, async (options, plugin) => {
1968    const appRecord = await (0, app_1.getAppRecord)(plugin.descriptor.app, ctx);
1969    ctx.customInspectors.push({ ...options,
1970      appRecord,
1971      plugin,
1972      treeFilter: '',
1973      selectedNodeId: null
1974    });
1975    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_ADD, {});
1976  });
1977  global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_TREE, (inspectorId, plugin) => {
1978    const inspector = (0, inspector_1.getInspector)(inspectorId, plugin.descriptor.app, ctx);
1979
1980    if (inspector) {
1981      (0, inspector_1.sendInspectorTree)(inspector, ctx);
1982    } else if (shared_utils_1.SharedData.debugInfo) {
1983      console.warn(`Inspector ${inspectorId} not found`);
1984    }
1985  });
1986  global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_STATE, (inspectorId, plugin) => {
1987    const inspector = (0, inspector_1.getInspector)(inspectorId, plugin.descriptor.app, ctx);
1988
1989    if (inspector) {
1990      (0, inspector_1.sendInspectorState)(inspector, ctx);
1991    } else if (shared_utils_1.SharedData.debugInfo) {
1992      console.warn(`Inspector ${inspectorId} not found`);
1993    }
1994  });
1995  global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SELECT_NODE, async (inspectorId, nodeId, plugin) => {
1996    const inspector = (0, inspector_1.getInspector)(inspectorId, plugin.descriptor.app, ctx);
1997
1998    if (inspector) {
1999      await (0, inspector_1.selectInspectorNode)(inspector, nodeId, ctx);
2000    } else if (shared_utils_1.SharedData.debugInfo) {
2001      console.warn(`Inspector ${inspectorId} not found`);
2002    }
2003  }); // Plugins
2004
2005  (0, plugin_1.addPreviouslyRegisteredPlugins)(ctx);
2006  (0, plugin_1.addQueuedPlugins)(ctx);
2007  global_hook_1.hook.on(shared_utils_1.HookEvents.SETUP_DEVTOOLS_PLUGIN, async (pluginDescriptor, setupFn) => {
2008    await (0, plugin_1.addPlugin)({
2009      pluginDescriptor,
2010      setupFn
2011    }, ctx);
2012  });
2013  shared_utils_1.target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ = true; // Legacy flush
2014
2015  const handleFlush = (0, debounce_1.default)(() => {
2016    var _a;
2017
2018    if ((_a = ctx.currentAppRecord) === null || _a === void 0 ? void 0 : _a.backend.options.features.includes(app_backend_api_1.BuiltinBackendFeature.FLUSH)) {
2019      (0, component_1.sendComponentTreeData)(ctx.currentAppRecord, '_root', ctx.currentAppRecord.componentFilter, null, ctx);
2020
2021      if (ctx.currentInspectedComponentId) {
2022        (0, component_1.sendSelectedComponentData)(ctx.currentAppRecord, ctx.currentInspectedComponentId, ctx);
2023      }
2024    }
2025  }, 500);
2026  global_hook_1.hook.off(shared_utils_1.HookEvents.FLUSH);
2027  global_hook_1.hook.on(shared_utils_1.HookEvents.FLUSH, handleFlush); // Connect done
2028
2029  (0, timeline_marker_1.addTimelineMarker)({
2030    id: 'vue-devtools-init-backend',
2031    time: Date.now(),
2032    label: 'Vue Devtools connected',
2033    color: 0x41B883,
2034    all: true
2035  }, ctx);
2036}
2037
2038function connectBridge() {
2039  // Subscriptions
2040  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_SUBSCRIBE, ({
2041    type,
2042    payload
2043  }) => {
2044    (0, subscriptions_1.subscribe)(type, payload);
2045  });
2046  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_UNSUBSCRIBE, ({
2047    type,
2048    payload
2049  }) => {
2050    (0, subscriptions_1.unsubscribe)(type, payload);
2051  }); // Tabs
2052
2053  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TAB_SWITCH, async tab => {
2054    ctx.currentTab = tab;
2055    await (0, highlighter_1.unHighlight)();
2056  }); // Apps
2057
2058  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_APP_LIST, () => {
2059    (0, app_1.sendApps)(ctx);
2060  });
2061  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_APP_SELECT, async id => {
2062    if (id == null) return;
2063    const record = ctx.appRecords.find(r => r.id === id);
2064
2065    if (record) {
2066      await (0, app_1.selectApp)(record, ctx);
2067    } else if (shared_utils_1.SharedData.debugInfo) {
2068      console.warn(`App with id ${id} not found`);
2069    }
2070  }); // Components
2071
2072  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_TREE, ({
2073    instanceId,
2074    filter
2075  }) => {
2076    ctx.currentAppRecord.componentFilter = filter;
2077    (0, component_1.sendComponentTreeData)(ctx.currentAppRecord, instanceId, filter, null, ctx);
2078    (0, subscriptions_1.subscribe)(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, {
2079      instanceId
2080    });
2081  });
2082  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_SELECTED_DATA, instanceId => {
2083    (0, component_1.sendSelectedComponentData)(ctx.currentAppRecord, instanceId, ctx);
2084  });
2085  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_EDIT_STATE, ({
2086    instanceId,
2087    dotPath,
2088    type,
2089    value,
2090    newKey,
2091    remove
2092  }) => {
2093    (0, component_1.editComponentState)(instanceId, dotPath, type, {
2094      value,
2095      newKey,
2096      remove
2097    }, ctx);
2098  });
2099  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_INSPECT_DOM, async ({
2100    instanceId
2101  }) => {
2102    const instance = (0, component_1.getComponentInstance)(ctx.currentAppRecord, instanceId, ctx);
2103
2104    if (instance) {
2105      const [el] = await ctx.currentAppRecord.backend.api.getComponentRootElements(instance);
2106
2107      if (el) {
2108        // @ts-ignore
2109        window.__VUE_DEVTOOLS_INSPECT_TARGET__ = el;
2110        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_INSPECT_DOM, null);
2111      }
2112    }
2113  });
2114  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_SCROLL_TO, async ({
2115    instanceId
2116  }) => {
2117    const instance = (0, component_1.getComponentInstance)(ctx.currentAppRecord, instanceId, ctx);
2118
2119    if (instance) {
2120      const [el] = await ctx.currentAppRecord.backend.api.getComponentRootElements(instance);
2121
2122      if (el) {
2123        if (typeof el.scrollIntoView === 'function') {
2124          el.scrollIntoView({
2125            behavior: 'smooth',
2126            block: 'center',
2127            inline: 'center'
2128          });
2129        } else {
2130          // Handle nodes that don't implement scrollIntoView
2131          const bounds = await ctx.currentAppRecord.backend.api.getComponentBounds(instance);
2132          const scrollTarget = document.createElement('div');
2133          scrollTarget.style.position = 'absolute';
2134          scrollTarget.style.width = `${bounds.width}px`;
2135          scrollTarget.style.height = `${bounds.height}px`;
2136          scrollTarget.style.top = `${bounds.top}px`;
2137          scrollTarget.style.left = `${bounds.left}px`;
2138          document.body.appendChild(scrollTarget);
2139          scrollTarget.scrollIntoView({
2140            behavior: 'smooth',
2141            block: 'center',
2142            inline: 'center'
2143          });
2144          setTimeout(() => {
2145            document.body.removeChild(scrollTarget);
2146          }, 2000);
2147        }
2148
2149        (0, highlighter_1.highlight)(instance, ctx.currentAppRecord.backend, ctx);
2150        setTimeout(() => {
2151          (0, highlighter_1.unHighlight)();
2152        }, 2000);
2153      }
2154    }
2155  });
2156  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_RENDER_CODE, async ({
2157    instanceId
2158  }) => {
2159    const instance = (0, component_1.getComponentInstance)(ctx.currentAppRecord, instanceId, ctx);
2160
2161    if (instance) {
2162      const {
2163        code
2164      } = await ctx.currentAppRecord.backend.api.getComponentRenderCode(instance);
2165      ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_RENDER_CODE, {
2166        instanceId,
2167        code
2168      });
2169    }
2170  });
2171  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_STATE_ACTION, async ({
2172    value,
2173    actionIndex
2174  }) => {
2175    const rawAction = value._custom.actions[actionIndex];
2176    const action = (0, shared_utils_1.revive)(rawAction === null || rawAction === void 0 ? void 0 : rawAction.action);
2177
2178    if (action) {
2179      try {
2180        await action();
2181      } catch (e) {
2182        console.error(e);
2183      }
2184    } else {
2185      console.warn(`Couldn't revive action ${actionIndex} from`, value);
2186    }
2187  }); // Highlighter
2188
2189  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_MOUSE_OVER, instanceId => {
2190    (0, highlighter_1.highlight)(ctx.currentAppRecord.instanceMap.get(instanceId), ctx.currentAppRecord.backend, ctx);
2191  });
2192  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_MOUSE_OUT, () => {
2193    (0, highlighter_1.unHighlight)();
2194  }); // Component picker
2195
2196  const componentPicker = new component_pick_1.default(ctx);
2197  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_PICK, () => {
2198    componentPicker.startSelecting();
2199  });
2200  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_PICK_CANCELED, () => {
2201    componentPicker.stopSelecting();
2202  }); // Timeline
2203
2204  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_LAYER_LIST, () => {
2205    (0, timeline_1.sendTimelineLayers)(ctx);
2206  });
2207  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_SHOW_SCREENSHOT, ({
2208    screenshot
2209  }) => {
2210    (0, timeline_screenshot_1.showScreenshot)(screenshot, ctx);
2211  });
2212  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_CLEAR, async () => {
2213    await (0, timeline_1.clearTimeline)(ctx);
2214  });
2215  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_EVENT_DATA, async ({
2216    id
2217  }) => {
2218    await (0, timeline_1.sendTimelineEventData)(id, ctx);
2219  });
2220  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_LAYER_LOAD_EVENTS, ({
2221    appId,
2222    layerId
2223  }) => {
2224    (0, timeline_1.sendTimelineLayerEvents)(appId, layerId, ctx);
2225  });
2226  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_LOAD_MARKERS, async () => {
2227    await (0, timeline_marker_1.sendTimelineMarkers)(ctx);
2228  }); // Custom inspectors
2229
2230  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_LIST, () => {
2231    (0, inspector_1.sendCustomInspectors)(ctx);
2232  });
2233  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_TREE, async ({
2234    inspectorId,
2235    appId,
2236    treeFilter
2237  }) => {
2238    const inspector = await (0, inspector_1.getInspectorWithAppId)(inspectorId, appId, ctx);
2239
2240    if (inspector) {
2241      inspector.treeFilter = treeFilter;
2242      (0, inspector_1.sendInspectorTree)(inspector, ctx);
2243    } else if (shared_utils_1.SharedData.debugInfo) {
2244      console.warn(`Inspector ${inspectorId} not found`);
2245    }
2246  });
2247  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_STATE, async ({
2248    inspectorId,
2249    appId,
2250    nodeId
2251  }) => {
2252    const inspector = await (0, inspector_1.getInspectorWithAppId)(inspectorId, appId, ctx);
2253
2254    if (inspector) {
2255      inspector.selectedNodeId = nodeId;
2256      (0, inspector_1.sendInspectorState)(inspector, ctx);
2257    } else if (shared_utils_1.SharedData.debugInfo) {
2258      console.warn(`Inspector ${inspectorId} not found`);
2259    }
2260  });
2261  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_EDIT_STATE, async ({
2262    inspectorId,
2263    appId,
2264    nodeId,
2265    path,
2266    type,
2267    payload
2268  }) => {
2269    const inspector = await (0, inspector_1.getInspectorWithAppId)(inspectorId, appId, ctx);
2270
2271    if (inspector) {
2272      await (0, inspector_1.editInspectorState)(inspector, nodeId, path, type, payload, ctx);
2273      inspector.selectedNodeId = nodeId;
2274      await (0, inspector_1.sendInspectorState)(inspector, ctx);
2275    } else if (shared_utils_1.SharedData.debugInfo) {
2276      console.warn(`Inspector ${inspectorId} not found`);
2277    }
2278  });
2279  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_ACTION, async ({
2280    inspectorId,
2281    appId,
2282    actionIndex
2283  }) => {
2284    const inspector = await (0, inspector_1.getInspectorWithAppId)(inspectorId, appId, ctx);
2285
2286    if (inspector) {
2287      const action = inspector.actions[actionIndex];
2288
2289      try {
2290        await action.action();
2291      } catch (e) {
2292        if (shared_utils_1.SharedData.debugInfo) {
2293          console.error(e);
2294        }
2295      }
2296    } else if (shared_utils_1.SharedData.debugInfo) {
2297      console.warn(`Inspector ${inspectorId} not found`);
2298    }
2299  }); // Misc
2300
2301  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_LOG, payload => {
2302    let value = payload.value;
2303
2304    if (payload.serialized) {
2305      value = (0, shared_utils_1.parse)(value, payload.revive);
2306    } else if (payload.revive) {
2307      value = (0, shared_utils_1.revive)(value);
2308    } // eslint-disable-next-line no-console
2309
2310
2311    console[payload.level](value);
2312  }); // Plugins
2313
2314  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_DEVTOOLS_PLUGIN_LIST, async () => {
2315    await (0, plugin_1.sendPluginList)(ctx);
2316  });
2317  ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_DEVTOOLS_PLUGIN_SETTING_UPDATED, ({
2318    pluginId,
2319    key,
2320    newValue,
2321    oldValue
2322  }) => {
2323    const settings = (0, shared_utils_1.getPluginSettings)(pluginId);
2324    ctx.hook.emit(shared_utils_1.HookEvents.PLUGIN_SETTINGS_SET, pluginId, settings);
2325    ctx.currentAppRecord.backend.api.callHook("setPluginSettings"
2326    /* SET_PLUGIN_SETTINGS */
2327    , {
2328      app: ctx.currentAppRecord.options.app,
2329      pluginId,
2330      key,
2331      newValue,
2332      oldValue,
2333      settings
2334    });
2335  });
2336}
2337
2338/***/ }),
2339
2340/***/ 96048:
2341/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2342
2343"use strict";
2344
2345
2346Object.defineProperty(exports, "__esModule", ({
2347  value: true
2348}));
2349exports.selectInspectorNode = exports.sendCustomInspectors = exports.editInspectorState = exports.sendInspectorState = exports.sendInspectorTree = exports.getInspectorWithAppId = exports.getInspector = void 0;
2350
2351const shared_utils_1 = __webpack_require__(27146);
2352
2353function getInspector(inspectorId, app, ctx) {
2354  return ctx.customInspectors.find(i => i.id === inspectorId && i.appRecord.options.app === app);
2355}
2356
2357exports.getInspector = getInspector;
2358
2359async function getInspectorWithAppId(inspectorId, appId, ctx) {
2360  for (const i of ctx.customInspectors) {
2361    if (i.id === inspectorId && i.appRecord.id === appId) {
2362      return i;
2363    }
2364  }
2365
2366  return null;
2367}
2368
2369exports.getInspectorWithAppId = getInspectorWithAppId;
2370
2371async function sendInspectorTree(inspector, ctx) {
2372  const rootNodes = await inspector.appRecord.backend.api.getInspectorTree(inspector.id, inspector.appRecord.options.app, inspector.treeFilter);
2373  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_TREE, {
2374    appId: inspector.appRecord.id,
2375    inspectorId: inspector.id,
2376    rootNodes
2377  });
2378}
2379
2380exports.sendInspectorTree = sendInspectorTree;
2381
2382async function sendInspectorState(inspector, ctx) {
2383  const state = inspector.selectedNodeId ? await inspector.appRecord.backend.api.getInspectorState(inspector.id, inspector.appRecord.options.app, inspector.selectedNodeId) : null;
2384  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_STATE, {
2385    appId: inspector.appRecord.id,
2386    inspectorId: inspector.id,
2387    state: (0, shared_utils_1.stringify)(state)
2388  });
2389}
2390
2391exports.sendInspectorState = sendInspectorState;
2392
2393async function editInspectorState(inspector, nodeId, dotPath, type, state, ctx) {
2394  await inspector.appRecord.backend.api.editInspectorState(inspector.id, inspector.appRecord.options.app, nodeId, dotPath, type, { ...state,
2395    value: state.value != null ? (0, shared_utils_1.parse)(state.value, true) : state.value
2396  });
2397}
2398
2399exports.editInspectorState = editInspectorState;
2400
2401async function sendCustomInspectors(ctx) {
2402  var _a;
2403
2404  const inspectors = [];
2405
2406  for (const i of ctx.customInspectors) {
2407    inspectors.push({
2408      id: i.id,
2409      appId: i.appRecord.id,
2410      pluginId: i.plugin.descriptor.id,
2411      label: i.label,
2412      icon: i.icon,
2413      treeFilterPlaceholder: i.treeFilterPlaceholder,
2414      stateFilterPlaceholder: i.stateFilterPlaceholder,
2415      noSelectionText: i.noSelectionText,
2416      actions: (_a = i.actions) === null || _a === void 0 ? void 0 : _a.map(a => ({
2417        icon: a.icon,
2418        tooltip: a.tooltip
2419      }))
2420    });
2421  }
2422
2423  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_LIST, {
2424    inspectors
2425  });
2426}
2427
2428exports.sendCustomInspectors = sendCustomInspectors;
2429
2430async function selectInspectorNode(inspector, nodeId, ctx) {
2431  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_SELECT_NODE, {
2432    appId: inspector.appRecord.id,
2433    inspectorId: inspector.id,
2434    nodeId
2435  });
2436}
2437
2438exports.selectInspectorNode = selectInspectorNode;
2439
2440/***/ }),
2441
2442/***/ 18426:
2443/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2444
2445"use strict";
2446
2447
2448Object.defineProperty(exports, "__esModule", ({
2449  value: true
2450}));
2451exports.scan = void 0;
2452
2453const shared_utils_1 = __webpack_require__(27146);
2454
2455const rootInstances = [];
2456/**
2457 * Scan the page for root level Vue instances.
2458 */
2459
2460function scan() {
2461  rootInstances.length = 0;
2462  let inFragment = false;
2463  let currentFragment = null; // eslint-disable-next-line no-inner-declarations
2464
2465  function processInstance(instance) {
2466    if (instance) {
2467      if (rootInstances.indexOf(instance.$root) === -1) {
2468        instance = instance.$root;
2469      }
2470
2471      if (instance._isFragment) {
2472        inFragment = true;
2473        currentFragment = instance;
2474      } // respect Vue.config.devtools option
2475
2476
2477      let baseVue = instance.constructor;
2478
2479      while (baseVue.super) {
2480        baseVue = baseVue.super;
2481      }
2482
2483      if (baseVue.config && baseVue.config.devtools) {
2484        rootInstances.push(instance);
2485      }
2486
2487      return true;
2488    }
2489  }
2490
2491  if (shared_utils_1.isBrowser) {
2492    const walkDocument = document => {
2493      walk(document, function (node) {
2494        if (inFragment) {
2495          if (node === currentFragment._fragmentEnd) {
2496            inFragment = false;
2497            currentFragment = null;
2498          }
2499
2500          return true;
2501        }
2502
2503        const instance = node.__vue__;
2504        return processInstance(instance);
2505      });
2506    };
2507
2508    walkDocument(document);
2509    const iframes = document.querySelectorAll('iframe');
2510
2511    for (const iframe of iframes) {
2512      try {
2513        walkDocument(iframe.contentDocument);
2514      } catch (e) {// Ignore
2515      }
2516    }
2517  } else {
2518    if (Array.isArray(shared_utils_1.target.__VUE_ROOT_INSTANCES__)) {
2519      shared_utils_1.target.__VUE_ROOT_INSTANCES__.map(processInstance);
2520    }
2521  }
2522
2523  return rootInstances;
2524}
2525
2526exports.scan = scan;
2527/**
2528 * DOM walk helper
2529 *
2530 * @param {NodeList} nodes
2531 * @param {Function} fn
2532 */
2533
2534function walk(node, fn) {
2535  if (node.childNodes) {
2536    for (let i = 0, l = node.childNodes.length; i < l; i++) {
2537      const child = node.childNodes[i];
2538      const stop = fn(child);
2539
2540      if (!stop) {
2541        walk(child, fn);
2542      }
2543    }
2544  } // also walk shadow DOM
2545
2546
2547  if (node.shadowRoot) {
2548    walk(node.shadowRoot, fn);
2549  }
2550}
2551
2552/***/ }),
2553
2554/***/ 26639:
2555/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2556
2557"use strict";
2558
2559
2560Object.defineProperty(exports, "__esModule", ({
2561  value: true
2562}));
2563exports.initOnPageConfig = exports.getPageConfig = void 0;
2564
2565const shared_utils_1 = __webpack_require__(27146);
2566
2567let config = {};
2568
2569function getPageConfig() {
2570  return config;
2571}
2572
2573exports.getPageConfig = getPageConfig;
2574
2575function initOnPageConfig() {
2576  // User project devtools config
2577  if (Object.hasOwnProperty.call(shared_utils_1.target, 'VUE_DEVTOOLS_CONFIG')) {
2578    config = shared_utils_1.SharedData.pageConfig = shared_utils_1.target.VUE_DEVTOOLS_CONFIG; // Open in editor
2579
2580    if (Object.hasOwnProperty.call(config, 'openInEditorHost')) {
2581      shared_utils_1.SharedData.openInEditorHost = config.openInEditorHost;
2582    }
2583  }
2584}
2585
2586exports.initOnPageConfig = initOnPageConfig;
2587
2588/***/ }),
2589
2590/***/ 75552:
2591/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2592
2593"use strict";
2594
2595
2596Object.defineProperty(exports, "__esModule", ({
2597  value: true
2598}));
2599exports.handleAddPerformanceTag = exports.performanceMarkEnd = exports.performanceMarkStart = void 0;
2600
2601const shared_utils_1 = __webpack_require__(27146);
2602
2603const timeline_1 = __webpack_require__(41515);
2604
2605const app_1 = __webpack_require__(79132);
2606
2607const component_1 = __webpack_require__(63304);
2608
2609const subscriptions_1 = __webpack_require__(19815);
2610
2611async function performanceMarkStart(app, uid, instance, type, time, ctx) {
2612  try {
2613    if (!shared_utils_1.SharedData.performanceMonitoringEnabled) return;
2614    const appRecord = await (0, app_1.getAppRecord)(app, ctx);
2615    const componentName = await appRecord.backend.api.getComponentName(instance);
2616    const groupId = ctx.perfUniqueGroupId++;
2617    const groupKey = `${uid}-${type}`;
2618    appRecord.perfGroupIds.set(groupKey, {
2619      groupId,
2620      time
2621    });
2622    await (0, timeline_1.addTimelineEvent)({
2623      layerId: 'performance',
2624      event: {
2625        time,
2626        data: {
2627          component: componentName,
2628          type,
2629          measure: 'start'
2630        },
2631        title: componentName,
2632        subtitle: type,
2633        groupId
2634      }
2635    }, app, ctx);
2636  } catch (e) {
2637    if (shared_utils_1.SharedData.debugInfo) {
2638      console.error(e);
2639    }
2640  }
2641}
2642
2643exports.performanceMarkStart = performanceMarkStart;
2644
2645async function performanceMarkEnd(app, uid, instance, type, time, ctx) {
2646  try {
2647    if (!shared_utils_1.SharedData.performanceMonitoringEnabled) return;
2648    const appRecord = await (0, app_1.getAppRecord)(app, ctx);
2649    const componentName = await appRecord.backend.api.getComponentName(instance);
2650    const groupKey = `${uid}-${type}`;
2651    const {
2652      groupId,
2653      time: startTime
2654    } = appRecord.perfGroupIds.get(groupKey);
2655    const duration = time - startTime;
2656    await (0, timeline_1.addTimelineEvent)({
2657      layerId: 'performance',
2658      event: {
2659        time,
2660        data: {
2661          component: componentName,
2662          type,
2663          measure: 'end',
2664          duration: {
2665            _custom: {
2666              type: 'Duration',
2667              value: duration,
2668              display: `${duration} ms`
2669            }
2670          }
2671        },
2672        title: componentName,
2673        subtitle: type,
2674        groupId
2675      }
2676    }, app, ctx); // Mark on component
2677
2678    const tooSlow = duration > 10;
2679
2680    if (tooSlow || instance.__VUE_DEVTOOLS_SLOW__) {
2681      let change = false;
2682
2683      if (tooSlow && !instance.__VUE_DEVTOOLS_SLOW__) {
2684        instance.__VUE_DEVTOOLS_SLOW__ = {
2685          duration: null,
2686          measures: {}
2687        };
2688      }
2689
2690      const data = instance.__VUE_DEVTOOLS_SLOW__;
2691
2692      if (tooSlow && (data.duration == null || data.duration < duration)) {
2693        data.duration = duration;
2694        change = true;
2695      }
2696
2697      if (data.measures[type] == null || data.measures[type] < duration) {
2698        data.measures[type] = duration;
2699        change = true;
2700      }
2701
2702      if (change) {
2703        // Update component tree
2704        const id = await (0, component_1.getComponentId)(app, uid, instance, ctx);
2705
2706        if ((0, subscriptions_1.isSubscribed)(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === id)) {
2707          requestAnimationFrame(() => {
2708            (0, component_1.sendComponentTreeData)(appRecord, id, ctx.currentAppRecord.componentFilter, null, ctx);
2709          });
2710        }
2711      }
2712    }
2713  } catch (e) {
2714    if (shared_utils_1.SharedData.debugInfo) {
2715      console.error(e);
2716    }
2717  }
2718}
2719
2720exports.performanceMarkEnd = performanceMarkEnd;
2721
2722function handleAddPerformanceTag(backend, ctx) {
2723  backend.api.on.visitComponentTree(payload => {
2724    if (payload.componentInstance.__VUE_DEVTOOLS_SLOW__) {
2725      const {
2726        duration,
2727        measures
2728      } = payload.componentInstance.__VUE_DEVTOOLS_SLOW__;
2729      let tooltip = '<div class="grid grid-cols-2 gap-2 font-mono text-xs">';
2730
2731      for (const type in measures) {
2732        const d = measures[type];
2733        tooltip += `<div>${type}</div><div class="text-right text-black rounded px-1 ${d > 30 ? 'bg-red-400' : d > 10 ? 'bg-yellow-400' : 'bg-green-400'}">${d} ms</div>`;
2734      }
2735
2736      tooltip += '</div>';
2737      payload.treeNode.tags.push({
2738        backgroundColor: duration > 30 ? 0xF87171 : 0xFBBF24,
2739        textColor: 0x000000,
2740        label: `${duration} ms`,
2741        tooltip
2742      });
2743    }
2744  });
2745}
2746
2747exports.handleAddPerformanceTag = handleAddPerformanceTag;
2748
2749/***/ }),
2750
2751/***/ 42989:
2752/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2753
2754"use strict";
2755
2756
2757Object.defineProperty(exports, "__esModule", ({
2758  value: true
2759}));
2760exports.serializePlugin = exports.sendPluginList = exports.addPreviouslyRegisteredPlugins = exports.addQueuedPlugins = exports.addPlugin = void 0;
2761
2762const app_backend_api_1 = __webpack_require__(64803);
2763
2764const shared_utils_1 = __webpack_require__(27146);
2765
2766const app_1 = __webpack_require__(79132);
2767
2768async function addPlugin(pluginQueueItem, ctx) {
2769  const {
2770    pluginDescriptor,
2771    setupFn
2772  } = pluginQueueItem;
2773  const plugin = {
2774    descriptor: pluginDescriptor,
2775    setupFn,
2776    error: null
2777  };
2778  ctx.currentPlugin = plugin;
2779
2780  try {
2781    const appRecord = await (0, app_1.getAppRecord)(plugin.descriptor.app, ctx);
2782    const api = new app_backend_api_1.DevtoolsPluginApiInstance(plugin, appRecord, ctx);
2783
2784    if (pluginQueueItem.proxy) {
2785      await pluginQueueItem.proxy.setRealTarget(api);
2786    } else {
2787      setupFn(api);
2788    }
2789  } catch (e) {
2790    plugin.error = e;
2791    console.error(e);
2792  }
2793
2794  ctx.currentPlugin = null;
2795  ctx.plugins.push(plugin);
2796  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_ADD, {
2797    plugin: await serializePlugin(plugin)
2798  });
2799  const targetList = shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ = shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ || [];
2800  targetList.push({
2801    pluginDescriptor,
2802    setupFn
2803  });
2804}
2805
2806exports.addPlugin = addPlugin;
2807
2808async function addQueuedPlugins(ctx) {
2809  if (shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__ && Array.isArray(shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__)) {
2810    for (const queueItem of shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__) {
2811      await addPlugin(queueItem, ctx);
2812    }
2813
2814    shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__ = null;
2815  }
2816}
2817
2818exports.addQueuedPlugins = addQueuedPlugins;
2819
2820async function addPreviouslyRegisteredPlugins(ctx) {
2821  if (shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ && Array.isArray(shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__)) {
2822    for (const queueItem of shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__) {
2823      await addPlugin(queueItem, ctx);
2824    }
2825  }
2826}
2827
2828exports.addPreviouslyRegisteredPlugins = addPreviouslyRegisteredPlugins;
2829
2830async function sendPluginList(ctx) {
2831  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_LIST, {
2832    plugins: await Promise.all(ctx.plugins.map(p => serializePlugin(p)))
2833  });
2834}
2835
2836exports.sendPluginList = sendPluginList;
2837
2838async function serializePlugin(plugin) {
2839  return {
2840    id: plugin.descriptor.id,
2841    label: plugin.descriptor.label,
2842    appId: (0, app_1.getAppRecordId)(plugin.descriptor.app),
2843    packageName: plugin.descriptor.packageName,
2844    homepage: plugin.descriptor.homepage,
2845    logo: plugin.descriptor.logo,
2846    componentStateTypes: plugin.descriptor.componentStateTypes,
2847    settingsSchema: plugin.descriptor.settings
2848  };
2849}
2850
2851exports.serializePlugin = serializePlugin;
2852
2853/***/ }),
2854
2855/***/ 78096:
2856/***/ ((__unused_webpack_module, exports) => {
2857
2858"use strict";
2859
2860
2861Object.defineProperty(exports, "__esModule", ({
2862  value: true
2863}));
2864exports.builtinLayers = void 0;
2865exports.builtinLayers = [{
2866  id: 'mouse',
2867  label: 'Mouse',
2868  color: 0xA451AF,
2869
2870  screenshotOverlayRender(event, {
2871    events
2872  }) {
2873    const samePositionEvent = events.find(e => e !== event && e.renderMeta.textEl && e.data.x === event.data.x && e.data.y === event.data.y);
2874
2875    if (samePositionEvent) {
2876      const text = document.createElement('div');
2877      text.innerText = event.data.type;
2878      samePositionEvent.renderMeta.textEl.appendChild(text);
2879      return false;
2880    }
2881
2882    const div = document.createElement('div');
2883    div.style.position = 'absolute';
2884    div.style.left = `${event.data.x - 4}px`;
2885    div.style.top = `${event.data.y - 4}px`;
2886    div.style.width = '8px';
2887    div.style.height = '8px';
2888    div.style.borderRadius = '100%';
2889    div.style.backgroundColor = 'rgba(164, 81, 175, 0.5)';
2890    const text = document.createElement('div');
2891    text.innerText = event.data.type;
2892    text.style.color = '#541e5b';
2893    text.style.fontFamily = 'monospace';
2894    text.style.fontSize = '9px';
2895    text.style.position = 'absolute';
2896    text.style.left = '10px';
2897    text.style.top = '10px';
2898    text.style.padding = '1px';
2899    text.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
2900    text.style.borderRadius = '3px';
2901    div.appendChild(text);
2902    event.renderMeta.textEl = text;
2903    return div;
2904  }
2905
2906}, {
2907  id: 'keyboard',
2908  label: 'Keyboard',
2909  color: 0x8151AF
2910}, {
2911  id: 'component-event',
2912  label: 'Component events',
2913  color: 0x41B883,
2914  screenshotOverlayRender: (event, {
2915    events
2916  }) => {
2917    if (!event.meta.bounds || events.some(e => e !== event && e.layerId === event.layerId && e.renderMeta.drawn && (e.meta.componentId === event.meta.componentId || e.meta.bounds.left === event.meta.bounds.left && e.meta.bounds.top === event.meta.bounds.top && e.meta.bounds.width === event.meta.bounds.width && e.meta.bounds.height === event.meta.bounds.height))) {
2918      return false;
2919    }
2920
2921    const div = document.createElement('div');
2922    div.style.position = 'absolute';
2923    div.style.left = `${event.meta.bounds.left - 4}px`;
2924    div.style.top = `${event.meta.bounds.top - 4}px`;
2925    div.style.width = `${event.meta.bounds.width}px`;
2926    div.style.height = `${event.meta.bounds.height}px`;
2927    div.style.borderRadius = '8px';
2928    div.style.borderStyle = 'solid';
2929    div.style.borderWidth = '4px';
2930    div.style.borderColor = 'rgba(65, 184, 131, 0.5)';
2931    div.style.textAlign = 'center';
2932    div.style.display = 'flex';
2933    div.style.alignItems = 'center';
2934    div.style.justifyContent = 'center';
2935    div.style.overflow = 'hidden';
2936    const text = document.createElement('div');
2937    text.style.color = '#267753';
2938    text.style.fontFamily = 'monospace';
2939    text.style.fontSize = '9px';
2940    text.style.padding = '1px';
2941    text.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
2942    text.style.borderRadius = '3px';
2943    text.innerText = event.data.event;
2944    div.appendChild(text);
2945    event.renderMeta.drawn = true;
2946    return div;
2947  }
2948}, {
2949  id: 'performance',
2950  label: 'Performance',
2951  color: 0x41b86a,
2952  groupsOnly: true,
2953  skipScreenshots: true,
2954  ignoreNoDurationGroups: true
2955}];
2956
2957/***/ }),
2958
2959/***/ 72063:
2960/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
2961
2962"use strict";
2963
2964
2965Object.defineProperty(exports, "__esModule", ({
2966  value: true
2967}));
2968exports.sendTimelineMarkers = exports.addTimelineMarker = void 0;
2969
2970const shared_utils_1 = __webpack_require__(27146);
2971
2972async function addTimelineMarker(options, ctx) {
2973  var _a;
2974
2975  if (!ctx.currentAppRecord) {
2976    options.all = true;
2977  }
2978
2979  const marker = { ...options,
2980    appRecord: options.all ? null : ctx.currentAppRecord
2981  };
2982  ctx.timelineMarkers.push(marker);
2983  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_MARKER, {
2984    marker: await serializeMarker(marker),
2985    appId: (_a = ctx.currentAppRecord) === null || _a === void 0 ? void 0 : _a.id
2986  });
2987}
2988
2989exports.addTimelineMarker = addTimelineMarker;
2990
2991async function sendTimelineMarkers(ctx) {
2992  const markers = ctx.timelineMarkers.filter(marker => marker.all || marker.appRecord === ctx.currentAppRecord);
2993  const result = [];
2994
2995  for (const marker of markers) {
2996    result.push(await serializeMarker(marker));
2997  }
2998
2999  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_LOAD_MARKERS, {
3000    markers: result,
3001    appId: ctx.currentAppRecord.id
3002  });
3003}
3004
3005exports.sendTimelineMarkers = sendTimelineMarkers;
3006
3007async function serializeMarker(marker) {
3008  var _a;
3009
3010  return {
3011    id: marker.id,
3012    appId: (_a = marker.appRecord) === null || _a === void 0 ? void 0 : _a.id,
3013    all: marker.all,
3014    time: marker.time,
3015    label: marker.label,
3016    color: marker.color
3017  };
3018}
3019
3020/***/ }),
3021
3022/***/ 11354:
3023/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
3024
3025"use strict";
3026
3027
3028Object.defineProperty(exports, "__esModule", ({
3029  value: true
3030}));
3031exports.showScreenshot = void 0;
3032
3033const shared_utils_1 = __webpack_require__(27146);
3034
3035const queue_1 = __webpack_require__(49107);
3036
3037const timeline_builtins_1 = __webpack_require__(78096);
3038
3039let overlay;
3040let image;
3041let container;
3042const jobQueue = new queue_1.JobQueue();
3043
3044async function showScreenshot(screenshot, ctx) {
3045  await jobQueue.queue(async () => {
3046    if (screenshot) {
3047      if (!container) {
3048        createElements();
3049      }
3050
3051      image.src = screenshot.image;
3052      image.style.visibility = screenshot.image ? 'visible' : 'hidden';
3053      clearContent();
3054      const events = screenshot.events.map(id => ctx.timelineEventMap.get(id)).filter(Boolean).map(eventData => ({
3055        layer: timeline_builtins_1.builtinLayers.concat(ctx.timelineLayers).find(layer => layer.id === eventData.layerId),
3056        event: { ...eventData.event,
3057          layerId: eventData.layerId,
3058          renderMeta: {}
3059        }
3060      }));
3061      const renderContext = {
3062        screenshot,
3063        events: events.map(({
3064          event
3065        }) => event),
3066        index: 0
3067      };
3068
3069      for (let i = 0; i < events.length; i++) {
3070        const {
3071          layer,
3072          event
3073        } = events[i];
3074
3075        if (layer.screenshotOverlayRender) {
3076          renderContext.index = i;
3077
3078          try {
3079            const result = await layer.screenshotOverlayRender(event, renderContext);
3080
3081            if (result !== false) {
3082              if (typeof result === 'string') {
3083                container.innerHTML += result;
3084              } else {
3085                container.appendChild(result);
3086              }
3087            }
3088          } catch (e) {
3089            if (shared_utils_1.SharedData.debugInfo) {
3090              console.error(e);
3091            }
3092          }
3093        }
3094      }
3095
3096      showElement();
3097    } else {
3098      hideElement();
3099    }
3100  });
3101}
3102
3103exports.showScreenshot = showScreenshot;
3104
3105function createElements() {
3106  overlay = document.createElement('div');
3107  overlay.style.position = 'fixed';
3108  overlay.style.zIndex = '9999999999999';
3109  overlay.style.pointerEvents = 'none';
3110  overlay.style.left = '0';
3111  overlay.style.top = '0';
3112  overlay.style.width = '100vw';
3113  overlay.style.height = '100vh';
3114  overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
3115  overlay.style.overflow = 'hidden';
3116  const imageBox = document.createElement('div');
3117  imageBox.style.position = 'relative';
3118  overlay.appendChild(imageBox);
3119  image = document.createElement('img');
3120  imageBox.appendChild(image);
3121  container = document.createElement('div');
3122  container.style.position = 'absolute';
3123  container.style.left = '0';
3124  container.style.top = '0';
3125  imageBox.appendChild(container);
3126  const style = document.createElement('style');
3127  style.innerHTML = '.__vuedevtools_no-scroll { overflow: hidden; }';
3128  document.head.appendChild(style);
3129}
3130
3131function showElement() {
3132  if (!overlay.parentNode) {
3133    document.body.appendChild(overlay);
3134    document.body.classList.add('__vuedevtools_no-scroll');
3135  }
3136}
3137
3138function hideElement() {
3139  if (overlay && overlay.parentNode) {
3140    overlay.parentNode.removeChild(overlay);
3141    document.body.classList.remove('__vuedevtools_no-scroll');
3142    clearContent();
3143  }
3144}
3145
3146function clearContent() {
3147  while (container.firstChild) {
3148    container.removeChild(container.lastChild);
3149  }
3150}
3151
3152/***/ }),
3153
3154/***/ 41515:
3155/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
3156
3157"use strict";
3158
3159
3160Object.defineProperty(exports, "__esModule", ({
3161  value: true
3162}));
3163exports.sendTimelineLayerEvents = exports.removeLayersForApp = exports.sendTimelineEventData = exports.clearTimeline = exports.addTimelineEvent = exports.sendTimelineLayers = exports.addBuiltinLayers = exports.setupTimeline = void 0;
3164
3165const shared_utils_1 = __webpack_require__(27146);
3166
3167const global_hook_1 = __webpack_require__(13179);
3168
3169const app_1 = __webpack_require__(79132);
3170
3171const timeline_builtins_1 = __webpack_require__(78096);
3172
3173function setupTimeline(ctx) {
3174  setupBuiltinLayers(ctx);
3175}
3176
3177exports.setupTimeline = setupTimeline;
3178
3179function addBuiltinLayers(appRecord, ctx) {
3180  for (const layerDef of timeline_builtins_1.builtinLayers) {
3181    ctx.timelineLayers.push({ ...layerDef,
3182      appRecord,
3183      plugin: null,
3184      events: []
3185    });
3186  }
3187}
3188
3189exports.addBuiltinLayers = addBuiltinLayers;
3190
3191function setupBuiltinLayers(ctx) {
3192  ['mousedown', 'mouseup', 'click', 'dblclick'].forEach(eventType => {
3193    // @ts-ignore
3194    window.addEventListener(eventType, async event => {
3195      await addTimelineEvent({
3196        layerId: 'mouse',
3197        event: {
3198          time: Date.now(),
3199          data: {
3200            type: eventType,
3201            x: event.clientX,
3202            y: event.clientY
3203          },
3204          title: eventType
3205        }
3206      }, null, ctx);
3207    }, {
3208      capture: true,
3209      passive: true
3210    });
3211  });
3212  ['keyup', 'keydown', 'keypress'].forEach(eventType => {
3213    // @ts-ignore
3214    window.addEventListener(eventType, async event => {
3215      await addTimelineEvent({
3216        layerId: 'keyboard',
3217        event: {
3218          time: Date.now(),
3219          data: {
3220            type: eventType,
3221            key: event.key,
3222            ctrlKey: event.ctrlKey,
3223            shiftKey: event.shiftKey,
3224            altKey: event.altKey,
3225            metaKey: event.metaKey
3226          },
3227          title: event.key
3228        }
3229      }, null, ctx);
3230    }, {
3231      capture: true,
3232      passive: true
3233    });
3234  });
3235  global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_EMIT, async (app, instance, event, params) => {
3236    try {
3237      if (!shared_utils_1.SharedData.componentEventsEnabled) return;
3238      const appRecord = await (0, app_1.getAppRecord)(app, ctx);
3239      const componentId = `${appRecord.id}:${instance.uid}`;
3240      const componentDisplay = (await appRecord.backend.api.getComponentName(instance)) || '<i>Unknown Component</i>';
3241      await addTimelineEvent({
3242        layerId: 'component-event',
3243        event: {
3244          time: Date.now(),
3245          data: {
3246            component: {
3247              _custom: {
3248                type: 'component-definition',
3249                display: componentDisplay
3250              }
3251            },
3252            event,
3253            params
3254          },
3255          title: event,
3256          subtitle: `by ${componentDisplay}`,
3257          meta: {
3258            componentId,
3259            bounds: await appRecord.backend.api.getComponentBounds(instance)
3260          }
3261        }
3262      }, app, ctx);
3263    } catch (e) {
3264      if (shared_utils_1.SharedData.debugInfo) {
3265        console.error(e);
3266      }
3267    }
3268  });
3269}
3270
3271async function sendTimelineLayers(ctx) {
3272  var _a, _b;
3273
3274  const layers = [];
3275
3276  for (const layer of ctx.timelineLayers) {
3277    try {
3278      layers.push({
3279        id: layer.id,
3280        label: layer.label,
3281        color: layer.color,
3282        appId: (_a = layer.appRecord) === null || _a === void 0 ? void 0 : _a.id,
3283        pluginId: (_b = layer.plugin) === null || _b === void 0 ? void 0 : _b.descriptor.id,
3284        groupsOnly: layer.groupsOnly,
3285        skipScreenshots: layer.skipScreenshots,
3286        ignoreNoDurationGroups: layer.ignoreNoDurationGroups
3287      });
3288    } catch (e) {
3289      if (shared_utils_1.SharedData.debugInfo) {
3290        console.error(e);
3291      }
3292    }
3293  }
3294
3295  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_LAYER_LIST, {
3296    layers
3297  });
3298}
3299
3300exports.sendTimelineLayers = sendTimelineLayers;
3301
3302async function addTimelineEvent(options, app, ctx) {
3303  const appId = app ? (0, app_1.getAppRecordId)(app) : null;
3304  const isAllApps = options.all || !app || appId == null;
3305  const id = ctx.nextTimelineEventId++;
3306  const eventData = {
3307    id,
3308    ...options,
3309    all: isAllApps
3310  };
3311  ctx.timelineEventMap.set(eventData.id, eventData);
3312  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_EVENT, {
3313    appId: eventData.all ? 'all' : appId,
3314    layerId: eventData.layerId,
3315    event: mapTimelineEvent(eventData)
3316  });
3317  const layer = ctx.timelineLayers.find(l => {
3318    var _a;
3319
3320    return (isAllApps || ((_a = l.appRecord) === null || _a === void 0 ? void 0 : _a.options.app) === app) && l.id === options.layerId;
3321  });
3322
3323  if (layer) {
3324    layer.events.push(eventData);
3325  } else if (shared_utils_1.SharedData.debugInfo) {
3326    console.warn(`Timeline layer ${options.layerId} not found`);
3327  }
3328}
3329
3330exports.addTimelineEvent = addTimelineEvent;
3331
3332function mapTimelineEvent(eventData) {
3333  return {
3334    id: eventData.id,
3335    time: eventData.event.time,
3336    logType: eventData.event.logType,
3337    groupId: eventData.event.groupId,
3338    title: eventData.event.title,
3339    subtitle: eventData.event.subtitle
3340  };
3341}
3342
3343async function clearTimeline(ctx) {
3344  ctx.timelineEventMap.clear();
3345
3346  for (const layer of ctx.timelineLayers) {
3347    layer.events = [];
3348  }
3349
3350  for (const backend of ctx.backends) {
3351    await backend.api.clearTimeline();
3352  }
3353}
3354
3355exports.clearTimeline = clearTimeline;
3356
3357async function sendTimelineEventData(id, ctx) {
3358  let data = null;
3359  const eventData = ctx.timelineEventMap.get(id);
3360
3361  if (eventData) {
3362    data = await ctx.currentAppRecord.backend.api.inspectTimelineEvent(eventData, ctx.currentAppRecord.options.app);
3363    data = (0, shared_utils_1.stringify)(data);
3364  } else if (shared_utils_1.SharedData.debugInfo) {
3365    console.warn(`Event ${id} not found`, ctx.timelineEventMap.keys());
3366  }
3367
3368  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_EVENT_DATA, {
3369    eventId: id,
3370    data
3371  });
3372}
3373
3374exports.sendTimelineEventData = sendTimelineEventData;
3375
3376function removeLayersForApp(app, ctx) {
3377  const layers = ctx.timelineLayers.filter(l => {
3378    var _a;
3379
3380    return ((_a = l.appRecord) === null || _a === void 0 ? void 0 : _a.options.app) === app;
3381  });
3382
3383  for (const layer of layers) {
3384    const index = ctx.timelineLayers.indexOf(layer);
3385    if (index !== -1) ctx.timelineLayers.splice(index, 1);
3386
3387    for (const e of layer.events) {
3388      ctx.timelineEventMap.delete(e.id);
3389    }
3390  }
3391}
3392
3393exports.removeLayersForApp = removeLayersForApp;
3394
3395function sendTimelineLayerEvents(appId, layerId, ctx) {
3396  var _a;
3397
3398  const app = (_a = ctx.appRecords.find(ar => ar.id === appId)) === null || _a === void 0 ? void 0 : _a.options.app;
3399  if (!app) return;
3400  const layer = ctx.timelineLayers.find(l => {
3401    var _a;
3402
3403    return ((_a = l.appRecord) === null || _a === void 0 ? void 0 : _a.options.app) === app && l.id === layerId;
3404  });
3405  if (!layer) return;
3406  ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_LAYER_LOAD_EVENTS, {
3407    appId,
3408    layerId,
3409    events: layer.events.map(e => mapTimelineEvent(e))
3410  });
3411}
3412
3413exports.sendTimelineLayerEvents = sendTimelineLayerEvents;
3414
3415/***/ }),
3416
3417/***/ 49107:
3418/***/ ((__unused_webpack_module, exports) => {
3419
3420"use strict";
3421
3422
3423Object.defineProperty(exports, "__esModule", ({
3424  value: true
3425}));
3426exports.JobQueue = void 0;
3427
3428class JobQueue {
3429  constructor() {
3430    this.jobs = [];
3431  }
3432
3433  queue(job) {
3434    return new Promise(resolve => {
3435      const onDone = () => {
3436        this.currentJob = null;
3437        const nextJob = this.jobs.shift();
3438
3439        if (nextJob) {
3440          nextJob();
3441        }
3442
3443        resolve();
3444      };
3445
3446      const run = () => {
3447        this.currentJob = job;
3448        return job().then(onDone);
3449      };
3450
3451      if (this.currentJob) {
3452        this.jobs.push(() => run());
3453      } else {
3454        run();
3455      }
3456    });
3457  }
3458
3459}
3460
3461exports.JobQueue = JobQueue;
3462
3463/***/ }),
3464
3465/***/ 19815:
3466/***/ ((__unused_webpack_module, exports) => {
3467
3468"use strict";
3469
3470
3471Object.defineProperty(exports, "__esModule", ({
3472  value: true
3473}));
3474exports.isSubscribed = exports.unsubscribe = exports.subscribe = void 0;
3475const activeSubs = new Map();
3476
3477function getSubs(type) {
3478  let subs = activeSubs.get(type);
3479
3480  if (!subs) {
3481    subs = [];
3482    activeSubs.set(type, subs);
3483  }
3484
3485  return subs;
3486}
3487
3488function subscribe(type, payload) {
3489  const rawPayload = getRawPayload(payload);
3490  getSubs(type).push({
3491    payload,
3492    rawPayload
3493  });
3494}
3495
3496exports.subscribe = subscribe;
3497
3498function unsubscribe(type, payload) {
3499  const rawPayload = getRawPayload(payload);
3500  const subs = getSubs(type);
3501  let index;
3502
3503  while ((index = subs.findIndex(sub => sub.rawPayload === rawPayload)) !== -1) {
3504    subs.splice(index, 1);
3505  }
3506}
3507
3508exports.unsubscribe = unsubscribe;
3509
3510function getRawPayload(payload) {
3511  const data = Object.keys(payload).sort().reduce((acc, key) => {
3512    acc[key] = payload[key];
3513    return acc;
3514  }, {});
3515  return JSON.stringify(data);
3516}
3517
3518function isSubscribed(type, predicate = () => true) {
3519  return getSubs(type).some(predicate);
3520}
3521
3522exports.isSubscribed = isSubscribed;
3523
3524/***/ }),
3525
3526/***/ 70062:
3527/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
3528
3529"use strict";
3530
3531
3532Object.defineProperty(exports, "__esModule", ({
3533  value: true
3534}));
3535exports.backend = void 0;
3536
3537const app_backend_api_1 = __webpack_require__(64803);
3538
3539exports.backend = (0, app_backend_api_1.defineBackend)({
3540  frameworkVersion: 1,
3541  features: [],
3542
3543  setup(api) {// @TODO
3544  }
3545
3546});
3547
3548/***/ }),
3549
3550/***/ 4465:
3551/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
3552
3553"use strict";
3554
3555
3556Object.defineProperty(exports, "__esModule", ({
3557  value: true
3558}));
3559exports.editState = exports.findInstanceOrVnode = exports.getInstanceName = exports.reduceStateList = exports.getCustomInstanceDetails = exports.getInstanceDetails = void 0;
3560
3561const shared_utils_1 = __webpack_require__(27146);
3562
3563const tree_1 = __webpack_require__(18059);
3564/**
3565 * Get the detailed information of an inspected instance.
3566 */
3567
3568
3569function getInstanceDetails(instance) {
3570  var _a, _b;
3571
3572  if (instance.__VUE_DEVTOOLS_FUNCTIONAL_LEGACY__) {
3573    const vnode = findInstanceOrVnode(instance.__VUE_DEVTOOLS_UID__);
3574    if (!vnode) return null;
3575    const fakeInstance = {
3576      $options: vnode.fnOptions,
3577      ...((_a = vnode.devtoolsMeta) === null || _a === void 0 ? void 0 : _a.renderContext.props)
3578    };
3579
3580    if (!fakeInsta