How to use getFragmentRootElements 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/******/ (function(modules) { // webpackBootstrap
2/******/ 	// The module cache
3/******/ 	var installedModules = {};
4/******/
5/******/ 	// The require function
6/******/ 	function __webpack_require__(moduleId) {
7/******/
8/******/ 		// Check if module is in cache
9/******/ 		if(installedModules[moduleId]) {
10/******/ 			return installedModules[moduleId].exports;
11/******/ 		}
12/******/ 		// Create a new module (and put it into the cache)
13/******/ 		var module = installedModules[moduleId] = {
14/******/ 			i: moduleId,
15/******/ 			l: false,
16/******/ 			exports: {}
17/******/ 		};
18/******/
19/******/ 		// Execute the module function
20/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21/******/
22/******/ 		// Flag the module as loaded
23/******/ 		module.l = true;
24/******/
25/******/ 		// Return the exports of the module
26/******/ 		return module.exports;
27/******/ 	}
28/******/
29/******/
30/******/ 	// expose the modules object (__webpack_modules__)
31/******/ 	__webpack_require__.m = modules;
32/******/
33/******/ 	// expose the module cache
34/******/ 	__webpack_require__.c = installedModules;
35/******/
36/******/ 	// define getter function for harmony exports
37/******/ 	__webpack_require__.d = function(exports, name, getter) {
38/******/ 		if(!__webpack_require__.o(exports, name)) {
39/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
40/******/ 		}
41/******/ 	};
42/******/
43/******/ 	// define __esModule on exports
44/******/ 	__webpack_require__.r = function(exports) {
45/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
46/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
47/******/ 		}
48/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
49/******/ 	};
50/******/
51/******/ 	// create a fake namespace object
52/******/ 	// mode & 1: value is a module id, require it
53/******/ 	// mode & 2: merge all properties of value into the ns
54/******/ 	// mode & 4: return value when already ns object
55/******/ 	// mode & 8|1: behave like require
56/******/ 	__webpack_require__.t = function(value, mode) {
57/******/ 		if(mode & 1) value = __webpack_require__(value);
58/******/ 		if(mode & 8) return value;
59/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
60/******/ 		var ns = Object.create(null);
61/******/ 		__webpack_require__.r(ns);
62/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
63/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
64/******/ 		return ns;
65/******/ 	};
66/******/
67/******/ 	// getDefaultExport function for compatibility with non-harmony modules
68/******/ 	__webpack_require__.n = function(module) {
69/******/ 		var getter = module && module.__esModule ?
70/******/ 			function getDefault() { return module['default']; } :
71/******/ 			function getModuleExports() { return module; };
72/******/ 		__webpack_require__.d(getter, 'a', getter);
73/******/ 		return getter;
74/******/ 	};
75/******/
76/******/ 	// Object.prototype.hasOwnProperty.call
77/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
78/******/
79/******/ 	// __webpack_public_path__
80/******/ 	__webpack_require__.p = "";
81/******/
82/******/
83/******/ 	// Load entry module and return exports
84/******/ 	return __webpack_require__(__webpack_require__.s = 269);
85/******/ })
86/************************************************************************/
87/******/ ({
88
89/***/ 1:
90/***/ (function(module, exports, __webpack_require__) {
91
92"use strict";
93
94var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
95    if (k2 === undefined) k2 = k;
96    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
97}) : (function(o, m, k, k2) {
98    if (k2 === undefined) k2 = k;
99    o[k2] = m[k];
100}));
101var __exportStar = (this && this.__exportStar) || function(m, exports) {
102    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
103};
104Object.defineProperty(exports, "__esModule", { value: true });
105__exportStar(__webpack_require__(19), exports);
106__exportStar(__webpack_require__(16), exports);
107__exportStar(__webpack_require__(57), exports);
108__exportStar(__webpack_require__(7), exports);
109__exportStar(__webpack_require__(4), exports);
110__exportStar(__webpack_require__(15), exports);
111__exportStar(__webpack_require__(20), exports);
112__exportStar(__webpack_require__(5), exports);
113//# sourceMappingURL=index.js.map
114
115/***/ }),
116
117/***/ 105:
118/***/ (function(module, exports, __webpack_require__) {
119
120"use strict";
121
122Object.defineProperty(exports, "__esModule", { value: true });
123exports.DevtoolsPluginApiInstance = exports.DevtoolsApi = void 0;
124const shared_utils_1 = __webpack_require__(1);
125const hooks_1 = __webpack_require__(106);
126let backendOn;
127let pluginOn;
128class DevtoolsApi {
129    constructor(bridge, ctx) {
130        this.bridge = bridge;
131        this.ctx = ctx;
132        if (!backendOn) {
133            backendOn = new hooks_1.DevtoolsHookable(ctx);
134        }
135        if (!pluginOn) {
136            pluginOn = new hooks_1.DevtoolsHookable(ctx);
137        }
138    }
139    get on() {
140        return backendOn;
141    }
142    async callHook(eventType, payload, ctx = this.ctx) {
143        payload = await backendOn.callHandlers(eventType, payload, ctx);
144        payload = await pluginOn.callHandlers(eventType, payload, ctx);
145        return payload;
146    }
147    async transformCall(callName, ...args) {
148        const payload = await this.callHook("transformCall" /* TRANSFORM_CALL */, {
149            callName,
150            inArgs: args,
151            outArgs: args.slice()
152        });
153        return payload.outArgs;
154    }
155    async getAppRecordName(app, id) {
156        const payload = await this.callHook("getAppRecordName" /* GET_APP_RECORD_NAME */, {
157            app,
158            name: null
159        });
160        if (payload.name) {
161            return payload.name;
162        }
163        else {
164            return `App ${id + 1}`;
165        }
166    }
167    async getAppRootInstance(app) {
168        const payload = await this.callHook("getAppRootInstance" /* GET_APP_ROOT_INSTANCE */, {
169            app,
170            root: null
171        });
172        return payload.root;
173    }
174    async registerApplication(app) {
175        await this.callHook("registerApplication" /* REGISTER_APPLICATION */, {
176            app
177        });
178    }
179    async walkComponentTree(instance, maxDepth = -1, filter = null) {
180        const payload = await this.callHook("walkComponentTree" /* WALK_COMPONENT_TREE */, {
181            componentInstance: instance,
182            componentTreeData: null,
183            maxDepth,
184            filter
185        });
186        return payload.componentTreeData;
187    }
188    async walkComponentParents(instance) {
189        const payload = await this.callHook("walkComponentParents" /* WALK_COMPONENT_PARENTS */, {
190            componentInstance: instance,
191            parentInstances: []
192        });
193        return payload.parentInstances;
194    }
195    async inspectComponent(instance) {
196        const payload = await this.callHook("inspectComponent" /* INSPECT_COMPONENT */, {
197            componentInstance: instance,
198            instanceData: null
199        });
200        return payload.instanceData;
201    }
202    async getComponentBounds(instance) {
203        const payload = await this.callHook("getComponentBounds" /* GET_COMPONENT_BOUNDS */, {
204            componentInstance: instance,
205            bounds: null
206        });
207        return payload.bounds;
208    }
209    async getComponentName(instance) {
210        const payload = await this.callHook("getComponentName" /* GET_COMPONENT_NAME */, {
211            componentInstance: instance,
212            name: null
213        });
214        return payload.name;
215    }
216    async getElementComponent(element) {
217        const payload = await this.callHook("getElementComponent" /* GET_ELEMENT_COMPONENT */, {
218            element,
219            componentInstance: null
220        });
221        return payload.componentInstance;
222    }
223    async getComponentRootElements(instance) {
224        const payload = await this.callHook("getComponentRootElements" /* GET_COMPONENT_ROOT_ELEMENTS */, {
225            componentInstance: instance,
226            rootElements: []
227        });
228        return payload.rootElements;
229    }
230    async editComponentState(instance, dotPath, state) {
231        const payload = await this.callHook("editComponentState" /* EDIT_COMPONENT_STATE */, {
232            componentInstance: instance,
233            path: dotPath.split('.'),
234            state
235        });
236        return payload.componentInstance;
237    }
238    async inspectTimelineEvent(eventData) {
239        const payload = await this.callHook("inspectTimelineEvent" /* INSPECT_TIMELINE_EVENT */, {
240            event: eventData.event,
241            layerId: eventData.layerId,
242            data: eventData.event.data,
243            all: eventData.all
244        });
245        return payload.data;
246    }
247    async getInspectorTree(inspectorId, app, filter) {
248        const payload = await this.callHook("getInspectorTree" /* GET_INSPECTOR_TREE */, {
249            inspectorId,
250            app,
251            filter,
252            rootNodes: []
253        });
254        return payload.rootNodes;
255    }
256    async getInspectorState(inspectorId, app, nodeId) {
257        const payload = await this.callHook("getInspectorState" /* GET_INSPECTOR_STATE */, {
258            inspectorId,
259            app,
260            nodeId,
261            state: null
262        });
263        return payload.state;
264    }
265    async editInspectorState(inspectorId, app, nodeId, dotPath, state) {
266        const defaultSetCallback = (obj, field, value) => {
267            if (state.remove || state.newKey) {
268                if (Array.isArray(obj)) {
269                    obj.splice(field, 1);
270                }
271                else {
272                    delete obj[field];
273                }
274            }
275            if (!state.remove) {
276                obj[state.newKey || field] = value;
277            }
278        };
279        await this.callHook("editInspectorState" /* EDIT_INSPECTOR_STATE */, {
280            inspectorId,
281            app,
282            nodeId,
283            path: dotPath.split('.'),
284            state,
285            set: (object, path, value, cb) => shared_utils_1.set(object, path, value, cb || defaultSetCallback)
286        });
287    }
288}
289exports.DevtoolsApi = DevtoolsApi;
290class DevtoolsPluginApiInstance {
291    constructor(plugin, ctx) {
292        this.bridge = ctx.bridge;
293        this.ctx = ctx;
294        this.plugin = plugin;
295        if (!pluginOn) {
296            pluginOn = new hooks_1.DevtoolsHookable(ctx);
297        }
298    }
299    get on() {
300        return pluginOn;
301    }
302    // Plugin API
303    async notifyComponentUpdate(instance = null) {
304        if (instance) {
305            this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED, ...await this.ctx.api.transformCall(shared_utils_1.HookEvents.COMPONENT_UPDATED, instance));
306        }
307        else {
308            this.ctx.hook.emit(shared_utils_1.HookEvents.COMPONENT_UPDATED);
309        }
310    }
311    addTimelineLayer(options) {
312        this.ctx.hook.emit(shared_utils_1.HookEvents.TIMELINE_LAYER_ADDED, options, this.plugin.descriptor.app);
313    }
314    addTimelineEvent(options) {
315        this.ctx.hook.emit(shared_utils_1.HookEvents.TIMELINE_EVENT_ADDED, options, this.plugin.descriptor.app);
316    }
317    addInspector(options) {
318        this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_ADD, options, this.plugin.descriptor.app);
319    }
320    sendInspectorTree(inspectorId) {
321        this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_TREE, inspectorId, this.plugin.descriptor.app);
322    }
323    sendInspectorState(inspectorId) {
324        this.ctx.hook.emit(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_STATE, inspectorId, this.plugin.descriptor.app);
325    }
326    getComponentBounds(instance) {
327        return this.ctx.api.getComponentBounds(instance);
328    }
329    getComponentName(instance) {
330        return this.ctx.api.getComponentName(instance);
331    }
332}
333exports.DevtoolsPluginApiInstance = DevtoolsPluginApiInstance;
334//# sourceMappingURL=api.js.map
335
336/***/ }),
337
338/***/ 106:
339/***/ (function(module, exports, __webpack_require__) {
340
341"use strict";
342
343Object.defineProperty(exports, "__esModule", { value: true });
344exports.DevtoolsHookable = void 0;
345class DevtoolsHookable {
346    constructor(ctx) {
347        this.handlers = {};
348        this.ctx = ctx;
349    }
350    hook(eventType, handler) {
351        const handlers = (this.handlers[eventType] = this.handlers[eventType] || []);
352        handlers.push({
353            handler,
354            plugin: this.ctx.currentPlugin
355        });
356    }
357    async callHandlers(eventType, payload, ctx) {
358        if (this.handlers[eventType]) {
359            const handlers = this.handlers[eventType];
360            for (let i = 0; i < handlers.length; i++) {
361                const { handler } = handlers[i];
362                await handler(payload, ctx);
363            }
364        }
365        return payload;
366    }
367    transformCall(handler) {
368        this.hook("transformCall" /* TRANSFORM_CALL */, handler);
369    }
370    getAppRecordName(handler) {
371        this.hook("getAppRecordName" /* GET_APP_RECORD_NAME */, handler);
372    }
373    getAppRootInstance(handler) {
374        this.hook("getAppRootInstance" /* GET_APP_ROOT_INSTANCE */, handler);
375    }
376    registerApplication(handler) {
377        this.hook("registerApplication" /* REGISTER_APPLICATION */, handler);
378    }
379    walkComponentTree(handler) {
380        this.hook("walkComponentTree" /* WALK_COMPONENT_TREE */, handler);
381    }
382    walkComponentParents(handler) {
383        this.hook("walkComponentParents" /* WALK_COMPONENT_PARENTS */, handler);
384    }
385    inspectComponent(handler) {
386        this.hook("inspectComponent" /* INSPECT_COMPONENT */, handler);
387    }
388    getComponentBounds(handler) {
389        this.hook("getComponentBounds" /* GET_COMPONENT_BOUNDS */, handler);
390    }
391    getComponentName(handler) {
392        this.hook("getComponentName" /* GET_COMPONENT_NAME */, handler);
393    }
394    getElementComponent(handler) {
395        this.hook("getElementComponent" /* GET_ELEMENT_COMPONENT */, handler);
396    }
397    getComponentRootElements(handler) {
398        this.hook("getComponentRootElements" /* GET_COMPONENT_ROOT_ELEMENTS */, handler);
399    }
400    editComponentState(handler) {
401        this.hook("editComponentState" /* EDIT_COMPONENT_STATE */, handler);
402    }
403    inspectTimelineEvent(handler) {
404        this.hook("inspectTimelineEvent" /* INSPECT_TIMELINE_EVENT */, handler);
405    }
406    getInspectorTree(handler) {
407        this.hook("getInspectorTree" /* GET_INSPECTOR_TREE */, handler);
408    }
409    getInspectorState(handler) {
410        this.hook("getInspectorState" /* GET_INSPECTOR_STATE */, handler);
411    }
412    editInspectorState(handler) {
413        this.hook("editInspectorState" /* EDIT_INSPECTOR_STATE */, handler);
414    }
415}
416exports.DevtoolsHookable = DevtoolsHookable;
417//# sourceMappingURL=hooks.js.map
418
419/***/ }),
420
421/***/ 107:
422/***/ (function(module, exports, __webpack_require__) {
423
424"use strict";
425
426Object.defineProperty(exports, "__esModule", { value: true });
427exports.hook = void 0;
428const shared_utils_1 = __webpack_require__(1);
429// hook should have been injected before this executes.
430exports.hook = shared_utils_1.target.__VUE_DEVTOOLS_GLOBAL_HOOK__;
431//# sourceMappingURL=global-hook.js.map
432
433/***/ }),
434
435/***/ 108:
436/***/ (function(module, exports, __webpack_require__) {
437
438"use strict";
439
440Object.defineProperty(exports, "__esModule", { value: true });
441exports.unHighlight = exports.highlight = void 0;
442const shared_utils_1 = __webpack_require__(1);
443const queue_1 = __webpack_require__(73);
444let overlay;
445let overlayContent;
446function createOverlay() {
447    if (overlay || !shared_utils_1.isBrowser)
448        return;
449    overlay = document.createElement('div');
450    overlay.style.backgroundColor = 'rgba(65, 184, 131, 0.35)';
451    overlay.style.position = 'fixed';
452    overlay.style.zIndex = '99999999999999';
453    overlay.style.pointerEvents = 'none';
454    overlay.style.display = 'flex';
455    overlay.style.alignItems = 'center';
456    overlay.style.justifyContent = 'center';
457    overlay.style.borderRadius = '3px';
458    overlayContent = document.createElement('div');
459    overlayContent.style.backgroundColor = 'rgba(65, 184, 131, 0.9)';
460    overlayContent.style.fontFamily = 'monospace';
461    overlayContent.style.fontSize = '11px';
462    overlayContent.style.padding = '2px 3px';
463    overlayContent.style.borderRadius = '3px';
464    overlayContent.style.color = 'white';
465    overlay.appendChild(overlayContent);
466}
467// Use a job queue to preserve highlight/unhighlight calls order
468// This prevents "sticky" highlights that are not removed because highlight is async
469const jobQueue = new queue_1.JobQueue();
470async function highlight(instance, ctx) {
471    await jobQueue.queue(async () => {
472        if (!instance)
473            return;
474        const bounds = await ctx.api.getComponentBounds(instance);
475        if (bounds) {
476            const name = (await ctx.api.getComponentName(instance)) || 'Anonymous';
477            createOverlay();
478            const pre = document.createElement('span');
479            pre.style.opacity = '0.6';
480            pre.innerText = '<';
481            const text = document.createTextNode(name);
482            const post = document.createElement('span');
483            post.style.opacity = '0.6';
484            post.innerText = '>';
485            showOverlay(bounds, [pre, text, post]);
486        }
487    });
488}
489exports.highlight = highlight;
490async function unHighlight() {
491    await jobQueue.queue(async () => {
492        if (overlay && overlay.parentNode) {
493            overlay.parentNode.removeChild(overlay);
494        }
495    });
496}
497exports.unHighlight = unHighlight;
498function showOverlay({ width = 0, height = 0, top = 0, left = 0 }, children = []) {
499    if (!shared_utils_1.isBrowser || !children.length)
500        return;
501    overlay.style.width = ~~width + 'px';
502    overlay.style.height = ~~height + 'px';
503    overlay.style.top = ~~top + 'px';
504    overlay.style.left = ~~left + 'px';
505    overlayContent.innerHTML = '';
506    children.forEach(child => overlayContent.appendChild(child));
507    document.body.appendChild(overlay);
508}
509//# sourceMappingURL=highlighter.js.map
510
511/***/ }),
512
513/***/ 109:
514/***/ (function(module, exports, __webpack_require__) {
515
516"use strict";
517
518Object.defineProperty(exports, "__esModule", { value: true });
519exports.getInstanceOrVnodeRect = exports.getRootElementsFromComponentInstance = exports.getComponentInstanceFromElement = void 0;
520const shared_utils_1 = __webpack_require__(1);
521const util_1 = __webpack_require__(26);
522function getComponentInstanceFromElement(element) {
523    return element.__vueParentComponent;
524}
525exports.getComponentInstanceFromElement = getComponentInstanceFromElement;
526function getRootElementsFromComponentInstance(instance) {
527    if (util_1.isFragment(instance)) {
528        return getFragmentRootElements(instance.subTree);
529    }
530    return [instance.subTree.el];
531}
532exports.getRootElementsFromComponentInstance = getRootElementsFromComponentInstance;
533function getFragmentRootElements(vnode) {
534    if (!vnode.children)
535        return [];
536    const list = [];
537    for (let i = 0, l = vnode.children.length; i < l; i++) {
538        const childVnode = vnode.children[i];
539        if (childVnode.component) {
540            list.push(...getRootElementsFromComponentInstance(childVnode.component));
541        }
542        else if (childVnode.el) {
543            list.push(childVnode.el);
544        }
545    }
546    return list;
547}
548/**
549 * Get the client rect for an instance.
550 *
551 * @param {Vue|Vnode} instance
552 * @return {Object}
553 */
554function getInstanceOrVnodeRect(instance) {
555    const el = instance.subTree.el;
556    if (!shared_utils_1.isBrowser) {
557        // @TODO: Find position from instance or a vnode (for functional components).
558        return;
559    }
560    if (!shared_utils_1.inDoc(el)) {
561        return;
562    }
563    if (util_1.isFragment(instance)) {
564        return getFragmentRect(instance.subTree);
565    }
566    else if (el.nodeType === 1) {
567        return el.getBoundingClientRect();
568    }
569}
570exports.getInstanceOrVnodeRect = getInstanceOrVnodeRect;
571function createRect() {
572    const rect = {
573        top: 0,
574        bottom: 0,
575        left: 0,
576        right: 0,
577        get width() { return rect.right - rect.left; },
578        get height() { return rect.bottom - rect.top; }
579    };
580    return rect;
581}
582function mergeRects(a, b) {
583    if (!a.top || b.top < a.top) {
584        a.top = b.top;
585    }
586    if (!a.bottom || b.bottom > a.bottom) {
587        a.bottom = b.bottom;
588    }
589    if (!a.left || b.left < a.left) {
590        a.left = b.left;
591    }
592    if (!a.right || b.right > a.right) {
593        a.right = b.right;
594    }
595}
596let range;
597/**
598 * Get the bounding rect for a text node using a Range.
599 *
600 * @param {Text} node
601 * @return {Rect}
602 */
603function getTextRect(node) {
604    if (!shared_utils_1.isBrowser)
605        return;
606    if (!range)
607        range = document.createRange();
608    range.selectNode(node);
609    return range.getBoundingClientRect();
610}
611function getFragmentRect(vnode) {
612    const rect = createRect();
613    if (!vnode.children)
614        return rect;
615    for (let i = 0, l = vnode.children.length; i < l; i++) {
616        const childVnode = vnode.children[i];
617        let childRect;
618        if (childVnode.component) {
619            childRect = getInstanceOrVnodeRect(childVnode.component);
620        }
621        else if (childVnode.el) {
622            const el = childVnode.el;
623            if (el.nodeType === 1 || el.getBoundingClientRect) {
624                childRect = el.getBoundingClientRect();
625            }
626            else if (el.nodeType === 3 && el.data.trim()) {
627                childRect = getTextRect(el);
628            }
629        }
630        if (childRect) {
631            mergeRects(rect, childRect);
632        }
633    }
634    return rect;
635}
636//# sourceMappingURL=el.js.map
637
638/***/ }),
639
640/***/ 121:
641/***/ (function(module, exports, __webpack_require__) {
642
643"use strict";
644
645var __importDefault = (this && this.__importDefault) || function (mod) {
646    return (mod && mod.__esModule) ? mod : { "default": mod };
647};
648Object.defineProperty(exports, "__esModule", { value: true });
649exports.initBackend = void 0;
650const app_backend_api_1 = __webpack_require__(24);
651const shared_utils_1 = __webpack_require__(1);
652const global_hook_1 = __webpack_require__(107);
653const subscriptions_1 = __webpack_require__(275);
654const highlighter_1 = __webpack_require__(108);
655const timeline_1 = __webpack_require__(276);
656const component_pick_1 = __importDefault(__webpack_require__(284));
657const component_1 = __webpack_require__(285);
658const plugin_1 = __webpack_require__(286);
659const app_1 = __webpack_require__(25);
660const inspector_1 = __webpack_require__(287);
661const timeline_screenshot_1 = __webpack_require__(288);
662let ctx;
663let connected = false;
664async function initBackend(bridge) {
665    connected = false;
666    ctx = app_backend_api_1.createBackendContext({
667        bridge,
668        hook: global_hook_1.hook
669    });
670    await shared_utils_1.initSharedData({
671        bridge,
672        persist: false
673    });
674    if (global_hook_1.hook.Vue) {
675        connect();
676        app_1.registerApp({
677            app: global_hook_1.hook.Vue,
678            types: {},
679            version: global_hook_1.hook.Vue.version
680        }, ctx);
681    }
682    else {
683        global_hook_1.hook.once(shared_utils_1.HookEvents.INIT, connect);
684    }
685    global_hook_1.hook.on(shared_utils_1.HookEvents.APP_ADD, async (app) => {
686        await app_1.registerApp(app, ctx);
687        // Will init connect
688        global_hook_1.hook.emit(shared_utils_1.HookEvents.INIT);
689    });
690    // In case we close and open devtools again
691    if (global_hook_1.hook.apps.length) {
692        global_hook_1.hook.apps.forEach(app => {
693            app_1.registerApp(app, ctx);
694            connect();
695        });
696    }
697}
698exports.initBackend = initBackend;
699async function connect() {
700    if (connected) {
701        return;
702    }
703    connected = true;
704    await app_1.waitForAppsRegistration();
705    console.log('%cconnect', 'color: blue;');
706    ctx.currentTab = shared_utils_1.BuiltinTabs.COMPONENTS;
707    // Subscriptions
708    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_SUBSCRIBE, ({ type, payload }) => {
709        subscriptions_1.subscribe(type, payload);
710    });
711    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_UNSUBSCRIBE, ({ type, payload }) => {
712        subscriptions_1.unsubscribe(type, payload);
713    });
714    // Tabs
715    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TAB_SWITCH, async (tab) => {
716        ctx.currentTab = tab;
717        await flushAll();
718    });
719    // Apps
720    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_APP_LIST, () => {
721        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_LIST, {
722            apps: ctx.appRecords.map(app_1.mapAppRecord)
723        });
724    });
725    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_APP_SELECT, async (id) => {
726        if (id == null)
727            return;
728        const record = ctx.appRecords.find(r => r.id === id);
729        if (!record) {
730            console.error(`App with id ${id} not found`);
731        }
732        else {
733            await app_1.selectApp(record, ctx);
734        }
735    });
736    // Components
737    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_TREE, ({ instanceId, filter }) => {
738        component_1.sendComponentTreeData(instanceId, filter, ctx);
739    });
740    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_SELECTED_DATA, (instanceId) => {
741        component_1.sendSelectedComponentData(instanceId, ctx);
742    });
743    global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_UPDATED, (app, uid) => {
744        const id = app ? component_1.getComponentId(app, uid, ctx) : ctx.currentInspectedComponentId;
745        if (id && subscriptions_1.isSubscribed(shared_utils_1.BridgeSubscriptions.SELECTED_COMPONENT_DATA, sub => sub.payload.instanceId === id)) {
746            component_1.sendSelectedComponentData(id, ctx);
747        }
748    });
749    global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_ADDED, (app, uid, parentUid, component) => {
750        const parentId = component_1.getComponentId(app, parentUid, ctx);
751        if (subscriptions_1.isSubscribed(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
752            // @TODO take into account current filter
753            component_1.sendComponentTreeData(parentId, null, ctx);
754        }
755        if (component) {
756            const id = component_1.getComponentId(app, uid, ctx);
757            if (component.__VUE_DEVTOOLS_UID__ == null) {
758                component.__VUE_DEVTOOLS_UID__ = id;
759            }
760            if (!ctx.currentAppRecord.instanceMap.has(id)) {
761                ctx.currentAppRecord.instanceMap.set(id, component);
762            }
763        }
764    });
765    global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_REMOVED, (app, uid, parentUid) => {
766        const parentId = component_1.getComponentId(app, parentUid, ctx);
767        if (subscriptions_1.isSubscribed(shared_utils_1.BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
768            // @TODO take into account current filter
769            component_1.sendComponentTreeData(parentId, null, ctx);
770        }
771        const id = component_1.getComponentId(app, uid, ctx);
772        if (subscriptions_1.isSubscribed(shared_utils_1.BridgeSubscriptions.SELECTED_COMPONENT_DATA, sub => sub.payload.instanceId === id)) {
773            component_1.sendEmptyComponentData(id, ctx);
774        }
775        ctx.currentAppRecord.instanceMap.delete(id);
776    });
777    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_EDIT_STATE, ({ instanceId, dotPath, value, newKey, remove }) => {
778        component_1.editComponentState(instanceId, dotPath, { value, newKey, remove }, ctx);
779    });
780    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_INSPECT_DOM, async ({ instanceId }) => {
781        const instance = component_1.getComponentInstance(instanceId, ctx);
782        if (instance) {
783            const [el] = await ctx.api.getComponentRootElements(instance);
784            if (el) {
785                // @ts-ignore
786                window.__VUE_DEVTOOLS_INSPECT_TARGET__ = el;
787                ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_INSPECT_DOM, null);
788            }
789        }
790    });
791    // Highlighter
792    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_MOUSE_OVER, instanceId => {
793        highlighter_1.highlight(ctx.currentAppRecord.instanceMap.get(instanceId), ctx);
794    });
795    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_MOUSE_OUT, () => {
796        highlighter_1.unHighlight();
797    });
798    // Component picker
799    const componentPicker = new component_pick_1.default(ctx);
800    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_PICK, () => {
801        componentPicker.startSelecting();
802    });
803    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_COMPONENT_PICK_CANCELED, () => {
804        componentPicker.stopSelecting();
805    });
806    // Timeline
807    timeline_1.setupTimeline(ctx);
808    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_LAYER_LIST, () => {
809        timeline_1.sendTimelineLayers(ctx);
810    });
811    global_hook_1.hook.on(shared_utils_1.HookEvents.TIMELINE_LAYER_ADDED, (options, app) => {
812        ctx.timelineLayers.push({
813            ...options,
814            app
815        });
816        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_LAYER_ADD, {});
817    });
818    global_hook_1.hook.on(shared_utils_1.HookEvents.TIMELINE_EVENT_ADDED, (options, app) => {
819        timeline_1.addTimelineEvent(options, app, ctx);
820    });
821    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_SHOW_SCREENSHOT, ({ screenshot }) => {
822        timeline_screenshot_1.showScreenshot(screenshot, ctx);
823    });
824    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_CLEAR, () => {
825        timeline_1.clearTimeline(ctx);
826    });
827    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_TIMELINE_EVENT_DATA, async ({ id }) => {
828        await timeline_1.sendTimelineEventData(id, ctx);
829    });
830    // Custom inspectors
831    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_LIST, () => {
832        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_LIST, {
833            inspectors: ctx.customInspectors.map(i => ({
834                id: i.id,
835                appId: app_1.getAppRecordId(i.app),
836                label: i.label,
837                icon: i.icon,
838                treeFilterPlaceholder: i.treeFilterPlaceholder,
839                stateFilterPlaceholder: i.stateFilterPlaceholder
840            }))
841        });
842    });
843    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_TREE, ({ inspectorId, appId, treeFilter }) => {
844        const inspector = inspector_1.getInspectorWithAppId(inspectorId, appId, ctx);
845        if (inspector) {
846            inspector.treeFilter = treeFilter;
847            inspector_1.sendInspectorTree(inspector, ctx);
848        }
849        else {
850            console.error(`Inspector ${inspectorId} not found`);
851        }
852    });
853    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_STATE, ({ inspectorId, appId, nodeId }) => {
854        const inspector = inspector_1.getInspectorWithAppId(inspectorId, appId, ctx);
855        if (inspector) {
856            inspector.selectedNodeId = nodeId;
857            inspector_1.sendInspectorState(inspector, ctx);
858        }
859        else {
860            console.error(`Inspector ${inspectorId} not found`);
861        }
862    });
863    global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_ADD, (options, app) => {
864        ctx.customInspectors.push({
865            ...options,
866            app,
867            treeFilter: '',
868            selectedNodeId: null
869        });
870        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_ADD, {});
871    });
872    global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_TREE, (inspectorId, app) => {
873        const inspector = inspector_1.getInspector(inspectorId, app, ctx);
874        if (inspector) {
875            inspector_1.sendInspectorTree(inspector, ctx);
876        }
877        else {
878            console.error(`Inspector ${inspectorId} not found`);
879        }
880    });
881    global_hook_1.hook.on(shared_utils_1.HookEvents.CUSTOM_INSPECTOR_SEND_STATE, (inspectorId, app) => {
882        const inspector = inspector_1.getInspector(inspectorId, app, ctx);
883        if (inspector) {
884            inspector_1.sendInspectorState(inspector, ctx);
885        }
886        else {
887            console.error(`Inspector ${inspectorId} not found`);
888        }
889    });
890    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_CUSTOM_INSPECTOR_EDIT_STATE, async ({ inspectorId, appId, nodeId, path, payload }) => {
891        const inspector = inspector_1.getInspectorWithAppId(inspectorId, appId, ctx);
892        if (inspector) {
893            await inspector_1.editInspectorState(inspector, nodeId, path, payload, ctx);
894            inspector.selectedNodeId = nodeId;
895            await inspector_1.sendInspectorState(inspector, ctx);
896        }
897        else {
898            console.error(`Inspector ${inspectorId} not found`);
899        }
900    });
901    // Plugins
902    plugin_1.addPreviouslyRegisteredPlugins(ctx);
903    plugin_1.addQueuedPlugins(ctx);
904    ctx.bridge.on(shared_utils_1.BridgeEvents.TO_BACK_DEVTOOLS_PLUGIN_LIST, () => {
905        plugin_1.sendPluginList(ctx);
906    });
907    global_hook_1.hook.on(shared_utils_1.HookEvents.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn) => {
908        plugin_1.addPlugin(pluginDescriptor, setupFn, ctx);
909    });
910    // @TODO
911    console.log('%cconnect done', 'color: green');
912}
913async function flushAll() {
914    // @TODO notify frontend
915}
916//# sourceMappingURL=index.js.map
917
918/***/ }),
919
920/***/ 15:
921/***/ (function(module, exports, __webpack_require__) {
922
923"use strict";
924
925Object.defineProperty(exports, "__esModule", { value: true });
926exports.clearStorage = exports.removeStorage = exports.setStorage = exports.getStorage = exports.initStorage = void 0;
927const env_1 = __webpack_require__(7);
928// If we can, we use the browser extension API to store data
929// it's async though, so we synchronize changes from an intermediate
930// storageData object
931const useStorage = typeof env_1.target.chrome !== 'undefined' && typeof env_1.target.chrome.storage !== 'undefined';
932let storageData = null;
933function initStorage() {
934    return new Promise((resolve) => {
935        if (useStorage) {
936            env_1.target.chrome.storage.local.get(null, result => {
937                storageData = result;
938                resolve();
939            });
940        }
941        else {
942            storageData = {};
943            resolve();
944        }
945    });
946}
947exports.initStorage = initStorage;
948function getStorage(key, defaultValue = null) {
949    checkStorage();
950    if (useStorage) {
951        return getDefaultValue(storageData[key], defaultValue);
952    }
953    else {
954        try {
955            return getDefaultValue(JSON.parse(localStorage.getItem(key)), defaultValue);
956        }
957        catch (e) { }
958    }
959}
960exports.getStorage = getStorage;
961function setStorage(key, val) {
962    checkStorage();
963    if (useStorage) {
964        storageData[key] = val;
965        env_1.target.chrome.storage.local.set({ [key]: val });
966    }
967    else {
968        try {
969            localStorage.setItem(key, JSON.stringify(val));
970        }
971        catch (e) { }
972    }
973}
974exports.setStorage = setStorage;
975function removeStorage(key) {
976    checkStorage();
977    if (useStorage) {
978        delete storageData[key];
979        env_1.target.chrome.storage.local.remove([key]);
980    }
981    else {
982        try {
983            localStorage.removeItem(key);
984        }
985        catch (e) { }
986    }
987}
988exports.removeStorage = removeStorage;
989function clearStorage() {
990    checkStorage();
991    if (useStorage) {
992        storageData = {};
993        env_1.target.chrome.storage.local.clear();
994    }
995    else {
996        try {
997            localStorage.clear();
998        }
999        catch (e) { }
1000    }
1001}
1002exports.clearStorage = clearStorage;
1003function checkStorage() {
1004    if (!storageData) {
1005        throw new Error('Storage wasn\'t initialized with \'init()\'');
1006    }
1007}
1008function getDefaultValue(value, defaultValue) {
1009    if (value == null) {
1010        return defaultValue;
1011    }
1012    return value;
1013}
1014//# sourceMappingURL=storage.js.map
1015
1016/***/ }),
1017
1018/***/ 16:
1019/***/ (function(module, exports, __webpack_require__) {
1020
1021"use strict";
1022
1023Object.defineProperty(exports, "__esModule", { value: true });
1024exports.Bridge = void 0;
1025const events_1 = __webpack_require__(56);
1026const BATCH_DURATION = 100;
1027class Bridge extends events_1.EventEmitter {
1028    constructor(wall) {
1029        super();
1030        this.setMaxListeners(Infinity);
1031        this.wall = wall;
1032        wall.listen(messages => {
1033            if (Array.isArray(messages)) {
1034                messages.forEach(message => this._emit(message));
1035            }
1036            else {
1037                this._emit(messages);
1038            }
1039        });
1040        this._batchingQueue = [];
1041        this._sendingQueue = [];
1042        this._receivingQueue = [];
1043        this._sending = false;
1044        this._time = null;
1045    }
1046    send(event, payload) {
1047        if (Array.isArray(payload)) {
1048            const lastIndex = payload.length - 1;
1049            payload.forEach((chunk, index) => {
1050                this._send({
1051                    event,
1052                    _chunk: chunk,
1053                    last: index === lastIndex
1054                });
1055            });
1056            this._flush();
1057        }
1058        else if (this._time === null) {
1059            this._send([{ event, payload }]);
1060            this._time = Date.now();
1061        }
1062        else {
1063            this._batchingQueue.push({
1064                event,
1065                payload
1066            });
1067            const now = Date.now();
1068            if (now - this._time > BATCH_DURATION) {
1069                this._flush();
1070            }
1071            else {
1072                this._timer = setTimeout(() => this._flush(), BATCH_DURATION);
1073            }
1074        }
1075    }
1076    /**
1077     * Log a message to the devtools background page.
1078     */
1079    log(message) {
1080        this.send('log', message);
1081    }
1082    _flush() {
1083        if (this._batchingQueue.length)
1084            this._send(this._batchingQueue);
1085        clearTimeout(this._timer);
1086        this._batchingQueue = [];
1087        this._time = null;
1088    }
1089    // @TODO types
1090    _emit(message) {
1091        if (typeof message === 'string') {
1092            this.emit(message);
1093        }
1094        else if (message._chunk) {
1095            this._receivingQueue.push(message._chunk);
1096            if (message.last) {
1097                this.emit(message.event, this._receivingQueue);
1098                this._receivingQueue = [];
1099            }
1100        }
1101        else if (message.event) {
1102            this.emit(message.event, message.payload);
1103        }
1104    }
1105    // @TODO types
1106    _send(messages) {
1107        this._sendingQueue.push(messages);
1108        this._nextSend();
1109    }
1110    _nextSend() {
1111        if (!this._sendingQueue.length || this._sending)
1112            return;
1113        this._sending = true;
1114        const messages = this._sendingQueue.shift();
1115        try {
1116            this.wall.send(messages);
1117        }
1118        catch (err) {
1119            if (err.message === 'Message length exceeded maximum allowed length.') {
1120                this._sendingQueue.splice(0, 0, messages.map(message => [message]));
1121            }
1122        }
1123        this._sending = false;
1124        requestAnimationFrame(() => this._nextSend());
1125    }
1126}
1127exports.Bridge = Bridge;
1128//# sourceMappingURL=bridge.js.map
1129
1130/***/ }),
1131
1132/***/ 19:
1133/***/ (function(module, exports, __webpack_require__) {
1134
1135"use strict";
1136
1137Object.defineProperty(exports, "__esModule", { value: true });
1138exports.getCatchedGetters = exports.getCustomStoreDetails = exports.getCustomRouterDetails = exports.getCustomInstanceDetails = exports.getInstanceMap = exports.backendInjections = void 0;
1139exports.backendInjections = {
1140    instanceMap: null,
1141    getCustomInstanceDetails: null
1142};
1143function getInstanceMap() {
1144    return exports.backendInjections.instanceMap;
1145}
1146exports.getInstanceMap = getInstanceMap;
1147function getCustomInstanceDetails(instance) {
1148    return exports.backendInjections.getCustomInstanceDetails(instance);
1149}
1150exports.getCustomInstanceDetails = getCustomInstanceDetails;
1151function getCustomRouterDetails(router) {
1152    return {
1153        _custom: {
1154            type: 'router',
1155            display: 'VueRouter',
1156            value: {
1157                options: router.options,
1158                currentRoute: router.currentRoute
1159            },
1160            fields: {
1161                abstract: true
1162            }
1163        }
1164    };
1165}
1166exports.getCustomRouterDetails = getCustomRouterDetails;
1167function getCustomStoreDetails(store) {
1168    return {
1169        _custom: {
1170            type: 'store',
1171            display: 'Store',
1172            value: {
1173                state: store.state,
1174                getters: getCatchedGetters(store)
1175            },
1176            fields: {
1177                abstract: true
1178            }
1179        }
1180    };
1181}
1182exports.getCustomStoreDetails = getCustomStoreDetails;
1183function getCatchedGetters(store) {
1184    const getters = {};
1185    const origGetters = store.getters || {};
1186    const keys = Object.keys(origGetters);
1187    for (let i = 0; i < keys.length; i++) {
1188        const key = keys[i];
1189        Object.defineProperty(getters, key, {
1190            enumerable: true,
1191            get: () => {
1192                try {
1193                    return origGetters[key];
1194                }
1195                catch (e) {
1196                    return e;
1197                }
1198            }
1199        });
1200    }
1201    return getters;
1202}
1203exports.getCatchedGetters = getCatchedGetters;
1204//# sourceMappingURL=backend.js.map
1205
1206/***/ }),
1207
1208/***/ 20:
1209/***/ (function(module, exports, __webpack_require__) {
1210
1211"use strict";
1212
1213Object.defineProperty(exports, "__esModule", { value: true });
1214exports.stringifyStrictCircularAutoChunks = exports.parseCircularAutoChunks = exports.stringifyCircularAutoChunks = void 0;
1215const MAX_SERIALIZED_SIZE = 512 * 1024; // 1MB
1216function encode(data, replacer, list, seen) {
1217    let stored, key, value, i, l;
1218    const seenIndex = seen.get(data);
1219    if (seenIndex != null) {
1220        return seenIndex;
1221    }
1222    const index = list.length;
1223    const proto = Object.prototype.toString.call(data);
1224    if (proto === '[object Object]') {
1225        stored = {};
1226        seen.set(data, index);
1227        list.push(stored);
1228        const keys = Object.keys(data);
1229        for (i = 0, l = keys.length; i < l; i++) {
1230            key = keys[i];
1231            value = data[key];
1232            if (replacer)
1233                value = replacer.call(data, key, value);
1234            stored[key] = encode(value, replacer, list, seen);
1235        }
1236    }
1237    else if (proto === '[object Array]') {
1238        stored = [];
1239        seen.set(data, index);
1240        list.push(stored);
1241        for (i = 0, l = data.length; i < l; i++) {
1242            value = data[i];
1243            if (replacer)
1244                value = replacer.call(data, i, value);
1245            stored[i] = encode(value, replacer, list, seen);
1246        }
1247    }
1248    else {
1249        list.push(data);
1250    }
1251    return index;
1252}
1253function decode(list, reviver) {
1254    let i = list.length;
1255    let j, k, data, key, value, proto;
1256    while (i--) {
1257        data = list[i];
1258        proto = Object.prototype.toString.call(data);
1259        if (proto === '[object Object]') {
1260            const keys = Object.keys(data);
1261            for (j = 0, k = keys.length; j < k; j++) {
1262                key = keys[j];
1263                value = list[data[key]];
1264                if (reviver)
1265                    value = reviver.call(data, key, value);
1266                data[key] = value;
1267            }
1268        }
1269        else if (proto === '[object Array]') {
1270            for (j = 0, k = data.length; j < k; j++) {
1271                value = list[data[j]];
1272                if (reviver)
1273                    value = reviver.call(data, j, value);
1274                data[j] = value;
1275            }
1276        }
1277    }
1278}
1279function stringifyCircularAutoChunks(data, replacer = null, space = null) {
1280    let result;
1281    try {
1282        result = arguments.length === 1
1283            ? JSON.stringify(data)
1284            // @ts-ignore
1285            : JSON.stringify(data, replacer, space);
1286    }
1287    catch (e) {
1288        result = stringifyStrictCircularAutoChunks(data, replacer, space);
1289    }
1290    if (result.length > MAX_SERIALIZED_SIZE) {
1291        const chunkCount = Math.ceil(result.length / MAX_SERIALIZED_SIZE);
1292        const chunks = [];
1293        for (let i = 0; i < chunkCount; i++) {
1294            chunks.push(result.slice(i * MAX_SERIALIZED_SIZE, (i + 1) * MAX_SERIALIZED_SIZE));
1295        }
1296        return chunks;
1297    }
1298    return result;
1299}
1300exports.stringifyCircularAutoChunks = stringifyCircularAutoChunks;
1301function parseCircularAutoChunks(data, reviver = null) {
1302    if (Array.isArray(data)) {
1303        data = data.join('');
1304    }
1305    const hasCircular = /^\s/.test(data);
1306    if (!hasCircular) {
1307        return arguments.length === 1
1308            ? JSON.parse(data)
1309            // @ts-ignore
1310            : JSON.parse(data, reviver);
1311    }
1312    else {
1313        const list = JSON.parse(data);
1314        decode(list, reviver);
1315        return list[0];
1316    }
1317}
1318exports.parseCircularAutoChunks = parseCircularAutoChunks;
1319function stringifyStrictCircularAutoChunks(data, replacer = null, space = null) {
1320    const list = [];
1321    encode(data, replacer, list, new Map());
1322    return space
1323        ? ' ' + JSON.stringify(list, null, space)
1324        : ' ' + JSON.stringify(list);
1325}
1326exports.stringifyStrictCircularAutoChunks = stringifyStrictCircularAutoChunks;
1327//# sourceMappingURL=transfer.js.map
1328
1329/***/ }),
1330
1331/***/ 24:
1332/***/ (function(module, exports, __webpack_require__) {
1333
1334"use strict";
1335
1336var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
1337    if (k2 === undefined) k2 = k;
1338    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
1339}) : (function(o, m, k, k2) {
1340    if (k2 === undefined) k2 = k;
1341    o[k2] = m[k];
1342}));
1343var __exportStar = (this && this.__exportStar) || function(m, exports) {
1344    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
1345};
1346Object.defineProperty(exports, "__esModule", { value: true });
1347__exportStar(__webpack_require__(105), exports);
1348__exportStar(__webpack_require__(270), exports);
1349__exportStar(__webpack_require__(271), exports);
1350__exportStar(__webpack_require__(272), exports);
1351__exportStar(__webpack_require__(273), exports);
1352__exportStar(__webpack_require__(106), exports);
1353__exportStar(__webpack_require__(274), exports);
1354//# sourceMappingURL=index.js.map
1355
1356/***/ }),
1357
1358/***/ 25:
1359/***/ (function(module, exports, __webpack_require__) {
1360
1361"use strict";
1362
1363Object.defineProperty(exports, "__esModule", { value: true });
1364exports.waitForAppsRegistration = exports.getAppRecord = exports.getAppRecordId = exports.mapAppRecord = exports.selectApp = exports.registerApp = void 0;
1365const shared_utils_1 = __webpack_require__(1);
1366const queue_1 = __webpack_require__(73);
1367const app_backend_vue1_1 = __webpack_require__(277);
1368const app_backend_vue2_1 = __webpack_require__(278);
1369const app_backend_vue3_1 = __webpack_require__(279);
1370const availableBackends = [
1371    app_backend_vue1_1.backend,
1372    app_backend_vue2_1.backend,
1373    app_backend_vue3_1.backend
1374];
1375const enabledBackends = new Set();
1376const jobs = new queue_1.JobQueue();
1377let recordId = 0;
1378async function registerApp(options, ctx) {
1379    return jobs.queue(() => registerAppJob(options, ctx));
1380}
1381exports.registerApp = registerApp;
1382async function registerAppJob(options, ctx) {
1383    // Dedupe
1384    if (ctx.appRecords.find(a => a.options === options)) {
1385        return;
1386    }
1387    let record;
1388    const baseFrameworkVersion = parseInt(options.version.substr(0, options.version.indexOf('.')));
1389    for (let i = 0; i < availableBackends.length; i++) {
1390        const backend = availableBackends[i];
1391        if (backend.frameworkVersion === baseFrameworkVersion) {
1392            // Enabled backend
1393            if (!enabledBackends.has(backend)) {
1394                console.log('Enabling backend for Vue', backend.frameworkVersion);
1395                backend.setup(ctx.api);
1396                enabledBackends.add(backend);
1397            }
1398            // Create app record
1399            const id = getAppRecordId(options.app);
1400            const name = await ctx.api.getAppRecordName(options.app, id);
1401            record = {
1402                id,
1403                name,
1404                options,
1405                backend,
1406                lastInspectedComponentId: null,
1407                instanceMap: new Map(),
1408                rootInstance: await ctx.api.getAppRootInstance(options.app),
1409                timelineEventMap: new Map()
1410            };
1411            options.app.__VUE_DEVTOOLS_APP_RECORD__ = record;
1412            const rootId = `${record.id}:root`;
1413            record.instanceMap.set(rootId, record.rootInstance);
1414            record.rootInstance.__VUE_DEVTOOLS_UID__ = rootId;
1415            await ctx.api.registerApplication(record);
1416            ctx.appRecords.push(record);
1417            ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_ADD, {
1418                appRecord: mapAppRecord(record)
1419            });
1420            // Auto select first app
1421            if (ctx.currentAppRecord == null) {
1422                await selectApp(record, ctx);
1423            }
1424            break;
1425        }
1426    }
1427}
1428async function selectApp(record, ctx) {
1429    ctx.currentAppRecord = record;
1430    ctx.currentInspectedComponentId = record.lastInspectedComponentId;
1431    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_APP_SELECTED, {
1432        id: record.id,
1433        lastInspectedComponentId: record.lastInspectedComponentId
1434    });
1435}
1436exports.selectApp = selectApp;
1437function mapAppRecord(record) {
1438    return {
1439        id: record.id,
1440        name: record.name,
1441        version: record.options.version
1442    };
1443}
1444exports.mapAppRecord = mapAppRecord;
1445function getAppRecordId(app) {
1446    if (app.__VUE_DEVTOOLS_APP_RECORD_ID__ != null) {
1447        return app.__VUE_DEVTOOLS_APP_RECORD_ID__;
1448    }
1449    const id = recordId++;
1450    app.__VUE_DEVTOOLS_APP_RECORD_ID__ = id;
1451    return id;
1452}
1453exports.getAppRecordId = getAppRecordId;
1454function getAppRecord(app, ctx) {
1455    return ctx.appRecords.find(ar => ar.options.app === app);
1456}
1457exports.getAppRecord = getAppRecord;
1458function waitForAppsRegistration() {
1459    return jobs.queue(async () => { });
1460}
1461exports.waitForAppsRegistration = waitForAppsRegistration;
1462//# sourceMappingURL=app.js.map
1463
1464/***/ }),
1465
1466/***/ 26:
1467/***/ (function(module, exports, __webpack_require__) {
1468
1469"use strict";
1470
1471Object.defineProperty(exports, "__esModule", { value: true });
1472exports.getRenderKey = exports.getUniqueComponentId = exports.getInstanceName = exports.isFragment = exports.getAppRecord = exports.isBeingDestroyed = void 0;
1473const shared_utils_1 = __webpack_require__(1);
1474const util_1 = __webpack_require__(281);
1475function isBeingDestroyed(instance) {
1476    return instance._isBeingDestroyed || instance.isUnmounted;
1477}
1478exports.isBeingDestroyed = isBeingDestroyed;
1479function getAppRecord(instance) {
1480    if (instance.root) {
1481        return instance.appContext.app.__VUE_DEVTOOLS_APP_RECORD__;
1482    }
1483}
1484exports.getAppRecord = getAppRecord;
1485function isFragment(instance) {
1486    const appRecord = getAppRecord(instance);
1487    if (appRecord) {
1488        return appRecord.options.types.Fragment === instance.subTree.type;
1489    }
1490}
1491exports.isFragment = isFragment;
1492/**
1493 * Get the appropriate display name for an instance.
1494 *
1495 * @param {Vue} instance
1496 * @return {String}
1497 */
1498function getInstanceName(instance) {
1499    const name = getComponentTypeName(instance.type || {});
1500    if (name)
1501        return name;
1502    return instance.root === instance
1503        ? 'Root'
1504        : 'Anonymous Component';
1505}
1506exports.getInstanceName = getInstanceName;
1507function getComponentTypeName(options) {
1508    const name = options.name || options._componentTag;
1509    if (name) {
1510        return name;
1511    }
1512    const file = options.__file; // injected by vue-loader
1513    if (file) {
1514        return shared_utils_1.classify(util_1.basename(file, '.vue'));
1515    }
1516}
1517/**
1518 * Returns a devtools unique id for instance.
1519 * @param {Vue} instance
1520 */
1521function getUniqueComponentId(instance, ctx) {
1522    const instanceId = instance === ctx.currentAppRecord.rootInstance ? 'root' : instance.uid;
1523    return `${ctx.currentAppRecord.id}:${instanceId}`;
1524}
1525exports.getUniqueComponentId = getUniqueComponentId;
1526function getRenderKey(value) {
1527    if (value == null)
1528        return;
1529    const type = typeof value;
1530    if (type === 'number') {
1531        return value;
1532    }
1533    else if (type === 'string') {
1534        return `'${value}'`;
1535    }
1536    else if (Array.isArray(value)) {
1537        return 'Array';
1538    }
1539    else {
1540        return 'Object';
1541    }
1542}
1543exports.getRenderKey = getRenderKey;
1544//# sourceMappingURL=util.js.map
1545
1546/***/ }),
1547
1548/***/ 269:
1549/***/ (function(module, __webpack_exports__, __webpack_require__) {
1550
1551"use strict";
1552__webpack_require__.r(__webpack_exports__);
1553/* harmony import */ var _back__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(121);
1554/* harmony import */ var _back__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_back__WEBPACK_IMPORTED_MODULE_0__);
1555/* harmony import */ var _utils_bridge__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
1556/* harmony import */ var _utils_bridge__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_utils_bridge__WEBPACK_IMPORTED_MODULE_1__);
1557// this is injected to the app page when the panel is activated.
1558
1559
1560
1561
1562window.addEventListener('message', handshake)
1563
1564function sendListening () {
1565  window.postMessage({
1566    source: 'vue-devtools-backend-injection',
1567    payload: 'listening'
1568  }, '*')
1569}
1570sendListening()
1571
1572function handshake (e) {
1573  if (e.data.source === 'vue-devtools-proxy' && e.data.payload === 'init') {
1574    window.removeEventListener('message', handshake)
1575
1576    var listeners = []
1577    var bridge = new _utils_bridge__WEBPACK_IMPORTED_MODULE_1__["Bridge"]({
1578      listen (fn) {
1579        var listener = evt => {
1580          if (evt.data.source === 'vue-devtools-proxy' && evt.data.payload) {
1581            fn(evt.data.payload)
1582          }
1583        }
1584        window.addEventListener('message', listener)
1585        listeners.push(listener)
1586      },
1587      send (data) {
1588        // if (process.env.NODE_ENV !== 'production') {
1589        //   console.log('[chrome] backend -> devtools', data)
1590        // }
1591        window.postMessage({
1592          source: 'vue-devtools-backend',
1593          payload: data
1594        }, '*')
1595      }
1596    })
1597
1598    bridge.on('shutdown', () => {
1599      listeners.forEach(l => {
1600        window.removeEventListener('message', l)
1601      })
1602      listeners = []
1603    })
1604
1605    Object(_back__WEBPACK_IMPORTED_MODULE_0__["initBackend"])(bridge)
1606  } else {
1607    sendListening()
1608  }
1609}
1610
1611
1612/***/ }),
1613
1614/***/ 27:
1615/***/ (function(module, exports) {
1616
1617// shim for using process in browser
1618var process = module.exports = {};
1619
1620// cached from whatever global is present so that test runners that stub it
1621// don't break things.  But we need to wrap it in a try catch in case it is
1622// wrapped in strict mode code which doesn't define any globals.  It's inside a
1623// function because try/catches deoptimize in certain engines.
1624
1625var cachedSetTimeout;
1626var cachedClearTimeout;
1627
1628function defaultSetTimout() {
1629    throw new Error('setTimeout has not been defined');
1630}
1631function defaultClearTimeout () {
1632    throw new Error('clearTimeout has not been defined');
1633}
1634(function () {
1635    try {
1636        if (typeof setTimeout === 'function') {
1637            cachedSetTimeout = setTimeout;
1638        } else {
1639            cachedSetTimeout = defaultSetTimout;
1640        }
1641    } catch (e) {
1642        cachedSetTimeout = defaultSetTimout;
1643    }
1644    try {
1645        if (typeof clearTimeout === 'function') {
1646            cachedClearTimeout = clearTimeout;
1647        } else {
1648            cachedClearTimeout = defaultClearTimeout;
1649        }
1650    } catch (e) {
1651        cachedClearTimeout = defaultClearTimeout;
1652    }
1653} ())
1654function runTimeout(fun) {
1655    if (cachedSetTimeout === setTimeout) {
1656        //normal enviroments in sane situations
1657        return setTimeout(fun, 0);
1658    }
1659    // if setTimeout wasn't available but was latter defined
1660    if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {
1661        cachedSetTimeout = setTimeout;
1662        return setTimeout(fun, 0);
1663    }
1664    try {
1665        // when when somebody has screwed with setTimeout but no I.E. maddness
1666        return cachedSetTimeout(fun, 0);
1667    } catch(e){
1668        try {
1669            // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally
1670            return cachedSetTimeout.call(null, fun, 0);
1671        } catch(e){
1672            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error
1673            return cachedSetTimeout.call(this, fun, 0);
1674        }
1675    }
1676
1677
1678}
1679function runClearTimeout(marker) {
1680    if (cachedClearTimeout === clearTimeout) {
1681        //normal enviroments in sane situations
1682        return clearTimeout(marker);
1683    }
1684    // if clearTimeout wasn't available but was latter defined
1685    if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {
1686        cachedClearTimeout = clearTimeout;
1687        return clearTimeout(marker);
1688    }
1689    try {
1690        // when when somebody has screwed with setTimeout but no I.E. maddness
1691        return cachedClearTimeout(marker);
1692    } catch (e){
1693        try {
1694            // When we are in I.E. but the script has been evaled so I.E. doesn't  trust the global object when called normally
1695            return cachedClearTimeout.call(null, marker);
1696        } catch (e){
1697            // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.
1698            // Some versions of I.E. have different rules for clearTimeout vs setTimeout
1699            return cachedClearTimeout.call(this, marker);
1700        }
1701    }
1702
1703
1704
1705}
1706var queue = [];
1707var draining = false;
1708var currentQueue;
1709var queueIndex = -1;
1710
1711function cleanUpNextTick() {
1712    if (!draining || !currentQueue) {
1713        return;
1714    }
1715    draining = false;
1716    if (currentQueue.length) {
1717        queue = currentQueue.concat(queue);
1718    } else {
1719        queueIndex = -1;
1720    }
1721    if (queue.length) {
1722        drainQueue();
1723    }
1724}
1725
1726function drainQueue() {
1727    if (draining) {
1728        return;
1729    }
1730    var timeout = runTimeout(cleanUpNextTick);
1731    draining = true;
1732
1733    var len = queue.length;
1734    while(len) {
1735        currentQueue = queue;
1736        queue = [];
1737        while (++queueIndex < len) {
1738            if (currentQueue) {
1739                currentQueue[queueIndex].run();
1740            }
1741        }
1742        queueIndex = -1;
1743        len = queue.length;
1744    }
1745    currentQueue = null;
1746    draining = false;
1747    runClearTimeout(timeout);
1748}
1749
1750process.nextTick = function (fun) {
1751    var args = new Array(arguments.length - 1);
1752    if (arguments.length > 1) {
1753        for (var i = 1; i < arguments.length; i++) {
1754            args[i - 1] = arguments[i];
1755        }
1756    }
1757    queue.push(new Item(fun, args));
1758    if (queue.length === 1 && !draining) {
1759        runTimeout(drainQueue);
1760    }
1761};
1762
1763// v8 likes predictible objects
1764function Item(fun, array) {
1765    this.fun = fun;
1766    this.array = array;
1767}
1768Item.prototype.run = function () {
1769    this.fun.apply(null, this.array);
1770};
1771process.title = 'browser';
1772process.browser = true;
1773process.env = {};
1774process.argv = [];
1775process.version = ''; // empty string to avoid regexp issues
1776process.versions = {};
1777
1778function noop() {}
1779
1780process.on = noop;
1781process.addListener = noop;
1782process.once = noop;
1783process.off = noop;
1784process.removeListener = noop;
1785process.removeAllListeners = noop;
1786process.emit = noop;
1787process.prependListener = noop;
1788process.prependOnceListener = noop;
1789
1790process.listeners = function (name) { return [] }
1791
1792process.binding = function (name) {
1793    throw new Error('process.binding is not supported');
1794};
1795
1796process.cwd = function () { return '/' };
1797process.chdir = function (dir) {
1798    throw new Error('process.chdir is not supported');
1799};
1800process.umask = function() { return 0; };
1801
1802
1803/***/ }),
1804
1805/***/ 270:
1806/***/ (function(module, exports, __webpack_require__) {
1807
1808"use strict";
1809
1810Object.defineProperty(exports, "__esModule", { value: true });
1811//# sourceMappingURL=app-record.js.map
1812
1813/***/ }),
1814
1815/***/ 271:
1816/***/ (function(module, exports, __webpack_require__) {
1817
1818"use strict";
1819
1820Object.defineProperty(exports, "__esModule", { value: true });
1821exports.BuiltinBackendFeature = void 0;
1822var BuiltinBackendFeature;
1823(function (BuiltinBackendFeature) {
1824    BuiltinBackendFeature["COMPONENTS"] = "components";
1825    BuiltinBackendFeature["EVENTS"] = "events";
1826    BuiltinBackendFeature["VUEX"] = "vuex";
1827})(BuiltinBackendFeature = exports.BuiltinBackendFeature || (exports.BuiltinBackendFeature = {}));
1828//# sourceMappingURL=backend.js.map
1829
1830/***/ }),
1831
1832/***/ 272:
1833/***/ (function(module, exports, __webpack_require__) {
1834
1835"use strict";
1836
1837Object.defineProperty(exports, "__esModule", { value: true });
1838exports.createBackendContext = void 0;
1839const api_1 = __webpack_require__(105);
1840function createBackendContext(options) {
1841    const ctx = {
1842        bridge: options.bridge,
1843        hook: options.hook,
1844        api: null,
1845        appRecords: [],
1846        currentTab: null,
1847        currentAppRecord: null,
1848        currentInspectedComponentId: null,
1849        plugins: [],
1850        currentPlugin: null,
1851        timelineLayers: [],
1852        customInspectors: []
1853    };
1854    ctx.api = new api_1.DevtoolsApi(options.bridge, ctx);
1855    return ctx;
1856}
1857exports.createBackendContext = createBackendContext;
1858//# sourceMappingURL=backend-context.js.map
1859
1860/***/ }),
1861
1862/***/ 273:
1863/***/ (function(module, exports, __webpack_require__) {
1864
1865"use strict";
1866
1867Object.defineProperty(exports, "__esModule", { value: true });
1868//# sourceMappingURL=global-hook.js.map
1869
1870/***/ }),
1871
1872/***/ 274:
1873/***/ (function(module, exports, __webpack_require__) {
1874
1875"use strict";
1876
1877Object.defineProperty(exports, "__esModule", { value: true });
1878//# sourceMappingURL=plugin.js.map
1879
1880/***/ }),
1881
1882/***/ 275:
1883/***/ (function(module, exports, __webpack_require__) {
1884
1885"use strict";
1886
1887Object.defineProperty(exports, "__esModule", { value: true });
1888exports.isSubscribed = exports.unsubscribe = exports.subscribe = void 0;
1889const activeSubs = new Map();
1890function getSubs(type) {
1891    let subs = activeSubs.get(type);
1892    if (!subs) {
1893        subs = [];
1894        activeSubs.set(type, subs);
1895    }
1896    return subs;
1897}
1898function subscribe(type, payload) {
1899    const rawPayload = JSON.stringify(payload);
1900    getSubs(type).push({
1901        payload,
1902        rawPayload
1903    });
1904}
1905exports.subscribe = subscribe;
1906function unsubscribe(type, payload) {
1907    const rawPayload = JSON.stringify(payload);
1908    const subs = getSubs(type);
1909    const index = subs.findIndex(sub => sub.rawPayload === rawPayload);
1910    if (index !== -1) {
1911        subs.splice(index, 1);
1912    }
1913}
1914exports.unsubscribe = unsubscribe;
1915function isSubscribed(type, predicate = () => true) {
1916    return getSubs(type).some(predicate);
1917}
1918exports.isSubscribed = isSubscribed;
1919//# sourceMappingURL=subscriptions.js.map
1920
1921/***/ }),
1922
1923/***/ 276:
1924/***/ (function(module, exports, __webpack_require__) {
1925
1926"use strict";
1927
1928Object.defineProperty(exports, "__esModule", { value: true });
1929exports.sendTimelineEventData = exports.clearTimeline = exports.addTimelineEvent = exports.sendTimelineLayers = exports.setupTimeline = void 0;
1930const shared_utils_1 = __webpack_require__(1);
1931const global_hook_1 = __webpack_require__(107);
1932const app_1 = __webpack_require__(25);
1933function setupTimeline(ctx) {
1934    setupBuiltinLayers(ctx);
1935}
1936exports.setupTimeline = setupTimeline;
1937function setupBuiltinLayers(ctx) {
1938    ;
1939    ['mousedown', 'mouseup', 'click', 'dblclick'].forEach(eventType => {
1940        // @ts-ignore
1941        window.addEventListener(eventType, (event) => {
1942            addTimelineEvent({
1943                layerId: 'mouse',
1944                event: {
1945                    time: Date.now(),
1946                    data: {
1947                        type: eventType,
1948                        x: event.clientX,
1949                        y: event.clientY
1950                    },
1951                    title: eventType
1952                }
1953            }, null, ctx);
1954        }, {
1955            capture: true,
1956            passive: true
1957        });
1958    });
1959    ['keyup', 'keydown', 'keypress'].forEach(eventType => {
1960        // @ts-ignore
1961        window.addEventListener(eventType, (event) => {
1962            addTimelineEvent({
1963                layerId: 'keyboard',
1964                event: {
1965                    time: Date.now(),
1966                    data: {
1967                        type: eventType,
1968                        key: event.key,
1969                        ctrlKey: event.ctrlKey,
1970                        shiftKey: event.shiftKey,
1971                        altKey: event.altKey,
1972                        metaKey: event.metaKey
1973                    },
1974                    title: event.key
1975                }
1976            }, null, ctx);
1977        }, {
1978            capture: true,
1979            passive: true
1980        });
1981    });
1982    global_hook_1.hook.on(shared_utils_1.HookEvents.COMPONENT_EMIT, async (app, instance, event, params) => {
1983        const appRecord = app_1.getAppRecord(app, ctx);
1984        const componentId = `${appRecord.id}:${instance.uid}`;
1985        const componentDisplay = (await ctx.api.getComponentName(instance)) || '<i>Unknown Component</i>';
1986        addTimelineEvent({
1987            layerId: 'component-event',
1988            event: {
1989                time: Date.now(),
1990                data: {
1991                    component: {
1992                        _custom: {
1993                            type: 'component-definition',
1994                            display: componentDisplay
1995                        }
1996                    },
1997                    event,
1998                    params
1999                },
2000                title: event,
2001                subtitle: `by ${componentDisplay}`,
2002                meta: {
2003                    componentId,
2004                    bounds: await ctx.api.getComponentBounds(instance)
2005                }
2006            }
2007        }, app, ctx);
2008    });
2009}
2010function sendTimelineLayers(ctx) {
2011    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_LAYER_LIST, {
2012        layers: ctx.timelineLayers.map(layer => {
2013            var _a;
2014            return ({
2015                id: layer.id,
2016                label: layer.label,
2017                color: layer.color,
2018                appId: (_a = app_1.getAppRecord(layer.app, ctx)) === null || _a === void 0 ? void 0 : _a.id
2019            });
2020        })
2021    });
2022}
2023exports.sendTimelineLayers = sendTimelineLayers;
2024let nextTimelineEventId = 0;
2025function addTimelineEvent(options, app, ctx) {
2026    const appId = app && app_1.getAppRecordId(app);
2027    const isAllApps = options.all || !app || appId == null;
2028    const id = nextTimelineEventId++;
2029    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_EVENT, {
2030        appId: isAllApps ? 'all' : appId,
2031        layerId: options.layerId,
2032        event: {
2033            id,
2034            time: options.event.time,
2035            logType: options.event.logType,
2036            groupId: options.event.groupId,
2037            title: options.event.title,
2038            subtitle: options.event.subtitle
2039        }
2040    });
2041    const eventData = {
2042        id,
2043        ...options
2044    };
2045    if (!isAllApps && app) {
2046        const appRecord = app_1.getAppRecord(app, ctx);
2047        registerTimelineEvent(eventData, appRecord, ctx);
2048    }
2049    else {
2050        ctx.appRecords.forEach(appRecord => registerTimelineEvent(eventData, appRecord, ctx));
2051    }
2052}
2053exports.addTimelineEvent = addTimelineEvent;
2054function registerTimelineEvent(options, appRecord, ctx) {
2055    appRecord.timelineEventMap.set(options.id, options);
2056}
2057function clearTimeline(ctx) {
2058    ctx.appRecords.forEach(appRecord => {
2059        appRecord.timelineEventMap.clear();
2060    });
2061}
2062exports.clearTimeline = clearTimeline;
2063async function sendTimelineEventData(id, ctx) {
2064    let data = null;
2065    const eventData = ctx.currentAppRecord.timelineEventMap.get(id);
2066    if (eventData) {
2067        data = await ctx.api.inspectTimelineEvent(eventData);
2068        data = shared_utils_1.stringify(data);
2069    }
2070    else {
2071        console.warn(`Event ${id} not found`);
2072    }
2073    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_TIMELINE_EVENT_DATA, {
2074        eventId: id,
2075        data
2076    });
2077}
2078exports.sendTimelineEventData = sendTimelineEventData;
2079//# sourceMappingURL=timeline.js.map
2080
2081/***/ }),
2082
2083/***/ 277:
2084/***/ (function(module, exports, __webpack_require__) {
2085
2086"use strict";
2087
2088Object.defineProperty(exports, "__esModule", { value: true });
2089exports.backend = void 0;
2090const app_backend_api_1 = __webpack_require__(24);
2091exports.backend = {
2092    frameworkVersion: 1,
2093    availableFeatures: [
2094        app_backend_api_1.BuiltinBackendFeature.COMPONENTS
2095    ],
2096    setup(api) {
2097        // @TODO
2098    }
2099};
2100//# sourceMappingURL=index.js.map
2101
2102/***/ }),
2103
2104/***/ 278:
2105/***/ (function(module, exports, __webpack_require__) {
2106
2107"use strict";
2108
2109Object.defineProperty(exports, "__esModule", { value: true });
2110exports.backend = void 0;
2111const app_backend_api_1 = __webpack_require__(24);
2112exports.backend = {
2113    frameworkVersion: 2,
2114    availableFeatures: [
2115        app_backend_api_1.BuiltinBackendFeature.COMPONENTS
2116    ],
2117    setup(api) {
2118        api.on.getAppRecordName(payload => {
2119            if (payload.app.name) {
2120                payload.name = payload.app.name;
2121            }
2122        });
2123        // @TODO
2124    }
2125};
2126//# sourceMappingURL=index.js.map
2127
2128/***/ }),
2129
2130/***/ 279:
2131/***/ (function(module, exports, __webpack_require__) {
2132
2133"use strict";
2134
2135Object.defineProperty(exports, "__esModule", { value: true });
2136exports.backend = void 0;
2137const app_backend_api_1 = __webpack_require__(24);
2138const tree_1 = __webpack_require__(280);
2139const data_1 = __webpack_require__(283);
2140const util_1 = __webpack_require__(26);
2141const el_1 = __webpack_require__(109);
2142const shared_utils_1 = __webpack_require__(1);
2143exports.backend = {
2144    frameworkVersion: 3,
2145    availableFeatures: [
2146        app_backend_api_1.BuiltinBackendFeature.COMPONENTS
2147    ],
2148    setup(api) {
2149        api.on.getAppRecordName(payload => {
2150            if (payload.app._component) {
2151                payload.name = payload.app._component.name;
2152            }
2153        });
2154        api.on.getAppRootInstance(payload => {
2155            var _a, _b, _c, _d;
2156            if ((_b = (_a = payload.app._container) === null || _a === void 0 ? void 0 : _a._vnode) === null || _b === void 0 ? void 0 : _b.component) {
2157                payload.root = (_d = (_c = payload.app._container) === null || _c === void 0 ? void 0 : _c._vnode) === null || _d === void 0 ? void 0 : _d.component;
2158            }
2159        });
2160        api.on.walkComponentTree((payload, ctx) => {
2161            const walker = new tree_1.ComponentWalker(payload.maxDepth, payload.filter, ctx);
2162            payload.componentTreeData = walker.getComponentTree(payload.componentInstance);
2163        });
2164        api.on.walkComponentParents((payload, ctx) => {
2165            const walker = new tree_1.ComponentWalker(0, null, ctx);
2166            payload.parentInstances = walker.getComponentParents(payload.componentInstance);
2167        });
2168        api.on.inspectComponent(async (payload, ctx) => {
2169            payload.instanceData = await data_1.getInstanceDetails(payload.componentInstance, ctx);
2170        });
2171        api.on.getComponentName(async (payload) => {
2172            payload.name = await util_1.getInstanceName(payload.componentInstance);
2173        });
2174        api.on.getComponentBounds(async (payload) => {
2175            payload.bounds = await el_1.getInstanceOrVnodeRect(payload.componentInstance);
2176        });
2177        api.on.getElementComponent(payload => {
2178            payload.componentInstance = el_1.getComponentInstanceFromElement(payload.element);
2179        });
2180        api.on.getComponentRootElements(payload => {
2181            payload.rootElements = el_1.getRootElementsFromComponentInstance(payload.componentInstance);
2182        });
2183        api.on.editComponentState((payload, ctx) => {
2184            data_1.editState(payload, ctx);
2185        });
2186        api.on.transformCall(payload => {
2187            if (payload.callName === shared_utils_1.HookEvents.COMPONENT_UPDATED) {
2188                const component = payload.inArgs[0];
2189                payload.outArgs = [
2190                    component.appContext.app,
2191                    component.uid,
2192                    component.parent ? component.parent.uid : undefined
2193                ];
2194            }
2195        });
2196        // @TODO
2197    }
2198};
2199//# sourceMappingURL=index.js.map
2200
2201/***/ }),
2202
2203/***/ 28:
2204/***/ (function(module, exports, __webpack_require__) {
2205
2206/* WEBPACK VAR INJECTION */(function(process) {// .dirname, .basename, and .extname methods are extracted from Node.js v8.11.1,
2207// backported and transplited with Babel, with backwards-compat fixes
2208
2209// Copyright Joyent, Inc. and other Node contributors.
2210//
2211// Permission is hereby granted, free of charge, to any person obtaining a
2212// copy of this software and associated documentation files (the
2213// "Software"), to deal in the Software without restriction, including
2214// without limitation the rights to use, copy, modify, merge, publish,
2215// distribute, sublicense, and/or sell copies of the Software, and to permit
2216// persons to whom the Software is furnished to do so, subject to the
2217// following conditions:
2218//
2219// The above copyright notice and this permission notice shall be included
2220// in all copies or substantial portions of the Software.
2221//
2222// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
2223// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
2224// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
2225// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
2226// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
2227// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
2228// USE OR OTHER DEALINGS IN THE SOFTWARE.
2229
2230// resolves . and .. elements in a path array with directory names there
2231// must be no slashes, empty elements, or device names (c:\) in the array
2232// (so also no leading and trailing slashes - it does not distinguish
2233// relative and absolute paths)
2234function normalizeArray(parts, allowAboveRoot) {
2235  // if the path tries to go above the root, `up` ends up > 0
2236  var up = 0;
2237  for (var i = parts.length - 1; i >= 0; i--) {
2238    var last = parts[i];
2239    if (last === '.') {
2240      parts.splice(i, 1);
2241    } else if (last === '..') {
2242      parts.splice(i, 1);
2243      up++;
2244    } else if (up) {
2245      parts.splice(i, 1);
2246      up--;
2247    }
2248  }
2249
2250  // if the path is allowed to go above the root, restore leading ..s
2251  if (allowAboveRoot) {
2252    for (; up--; up) {
2253      parts.unshift('..');
2254    }
2255  }
2256
2257  return parts;
2258}
2259
2260// path.resolve([from ...], to)
2261// posix version
2262exports.resolve = function() {
2263  var resolvedPath = '',
2264      resolvedAbsolute = false;
2265
2266  for (var i = arguments.length - 1; i >= -1 && !resolvedAbsolute; i--) {
2267    var path = (i >= 0) ? arguments[i] : process.cwd();
2268
2269    // Skip empty and invalid entries
2270    if (typeof path !== 'string') {
2271      throw new TypeError('Arguments to path.resolve must be strings');
2272    } else if (!path) {
2273      continue;
2274    }
2275
2276    resolvedPath = path + '/' + resolvedPath;
2277    resolvedAbsolute = path.charAt(0) === '/';
2278  }
2279
2280  // At this point the path should be resolved to a full absolute path, but
2281  // handle relative paths to be safe (might happen when process.cwd() fails)
2282
2283  // Normalize the path
2284  resolvedPath = normalizeArray(filter(resolvedPath.split('/'), function(p) {
2285    return !!p;
2286  }), !resolvedAbsolute).join('/');
2287
2288  return ((resolvedAbsolute ? '/' : '') + resolvedPath) || '.';
2289};
2290
2291// path.normalize(path)
2292// posix version
2293exports.normalize = function(path) {
2294  var isAbsolute = exports.isAbsolute(path),
2295      trailingSlash = substr(path, -1) === '/';
2296
2297  // Normalize the path
2298  path = normalizeArray(filter(path.split('/'), function(p) {
2299    return !!p;
2300  }), !isAbsolute).join('/');
2301
2302  if (!path && !isAbsolute) {
2303    path = '.';
2304  }
2305  if (path && trailingSlash) {
2306    path += '/';
2307  }
2308
2309  return (isAbsolute ? '/' : '') + path;
2310};
2311
2312// posix version
2313exports.isAbsolute = function(path) {
2314  return path.charAt(0) === '/';
2315};
2316
2317// posix version
2318exports.join = function() {
2319  var paths = Array.prototype.slice.call(arguments, 0);
2320  return exports.normalize(filter(paths, function(p, index) {
2321    if (typeof p !== 'string') {
2322      throw new TypeError('Arguments to path.join must be strings');
2323    }
2324    return p;
2325  }).join('/'));
2326};
2327
2328
2329// path.relative(from, to)
2330// posix version
2331exports.relative = function(from, to) {
2332  from = exports.resolve(from).substr(1);
2333  to = exports.resolve(to).substr(1);
2334
2335  function trim(arr) {
2336    var start = 0;
2337    for (; start < arr.length; start++) {
2338      if (arr[start] !== '') break;
2339    }
2340
2341    var end = arr.length - 1;
2342    for (; end >= 0; end--) {
2343      if (arr[end] !== '') break;
2344    }
2345
2346    if (start > end) return [];
2347    return arr.slice(start, end - start + 1);
2348  }
2349
2350  var fromParts = trim(from.split('/'));
2351  var toParts = trim(to.split('/'));
2352
2353  var length = Math.min(fromParts.length, toParts.length);
2354  var samePartsLength = length;
2355  for (var i = 0; i < length; i++) {
2356    if (fromParts[i] !== toParts[i]) {
2357      samePartsLength = i;
2358      break;
2359    }
2360  }
2361
2362  var outputParts = [];
2363  for (var i = samePartsLength; i < fromParts.length; i++) {
2364    outputParts.push('..');
2365  }
2366
2367  outputParts = outputParts.concat(toParts.slice(samePartsLength));
2368
2369  return outputParts.join('/');
2370};
2371
2372exports.sep = '/';
2373exports.delimiter = ':';
2374
2375exports.dirname = function (path) {
2376  if (typeof path !== 'string') path = path + '';
2377  if (path.length === 0) return '.';
2378  var code = path.charCodeAt(0);
2379  var hasRoot = code === 47 /*/*/;
2380  var end = -1;
2381  var matchedSlash = true;
2382  for (var i = path.length - 1; i >= 1; --i) {
2383    code = path.charCodeAt(i);
2384    if (code === 47 /*/*/) {
2385        if (!matchedSlash) {
2386          end = i;
2387          break;
2388        }
2389      } else {
2390      // We saw the first non-path separator
2391      matchedSlash = false;
2392    }
2393  }
2394
2395  if (end === -1) return hasRoot ? '/' : '.';
2396  if (hasRoot && end === 1) {
2397    // return '//';
2398    // Backwards-compat fix:
2399    return '/';
2400  }
2401  return path.slice(0, end);
2402};
2403
2404function basename(path) {
2405  if (typeof path !== 'string') path = path + '';
2406
2407  var start = 0;
2408  var end = -1;
2409  var matchedSlash = true;
2410  var i;
2411
2412  for (i = path.length - 1; i >= 0; --i) {
2413    if (path.charCodeAt(i) === 47 /*/*/) {
2414        // If we reached a path separator that was not part of a set of path
2415        // separators at the end of the string, stop now
2416        if (!matchedSlash) {
2417          start = i + 1;
2418          break;
2419        }
2420      } else if (end === -1) {
2421      // We saw the first non-path separator, mark this as the end of our
2422      // path component
2423      matchedSlash = false;
2424      end = i + 1;
2425    }
2426  }
2427
2428  if (end === -1) return '';
2429  return path.slice(start, end);
2430}
2431
2432// Uses a mixed approach for backwards-compatibility, as ext behavior changed
2433// in new Node.js versions, so only basename() above is backported here
2434exports.basename = function (path, ext) {
2435  var f = basename(path);
2436  if (ext && f.substr(-1 * ext.length) === ext) {
2437    f = f.substr(0, f.length - ext.length);
2438  }
2439  return f;
2440};
2441
2442exports.extname = function (path) {
2443  if (typeof path !== 'string') path = path + '';
2444  var startDot = -1;
2445  var startPart = 0;
2446  var end = -1;
2447  var matchedSlash = true;
2448  // Track the state of characters (if any) we see before our first dot and
2449  // after any path separator we find
2450  var preDotState = 0;
2451  for (var i = path.length - 1; i >= 0; --i) {
2452    var code = path.charCodeAt(i);
2453    if (code === 47 /*/*/) {
2454        // If we reached a path separator that was not part of a set of path
2455        // separators at the end of the string, stop now
2456        if (!matchedSlash) {
2457          startPart = i + 1;
2458          break;
2459        }
2460        continue;
2461      }
2462    if (end === -1) {
2463      // We saw the first non-path separator, mark this as the end of our
2464      // extension
2465      matchedSlash = false;
2466      end = i + 1;
2467    }
2468    if (code === 46 /*.*/) {
2469        // If this is our first dot, mark it as the start of our extension
2470        if (startDot === -1)
2471          startDot = i;
2472        else if (preDotState !== 1)
2473          preDotState = 1;
2474    } else if (startDot !== -1) {
2475      // We saw a non-dot and non-path separator before our dot, so we should
2476      // have a good chance at having a non-empty extension
2477      preDotState = -1;
2478    }
2479  }
2480
2481  if (startDot === -1 || end === -1 ||
2482      // We saw a non-dot character immediately before the dot
2483      preDotState === 0 ||
2484      // The (right-most) trimmed path component is exactly '..'
2485      preDotState === 1 && startDot === end - 1 && startDot === startPart + 1) {
2486    return '';
2487  }
2488  return path.slice(startDot, end);
2489};
2490
2491function filter (xs, f) {
2492    if (xs.filter) return xs.filter(f);
2493    var res = [];
2494    for (var i = 0; i < xs.length; i++) {
2495        if (f(xs[i], i, xs)) res.push(xs[i]);
2496    }
2497    return res;
2498}
2499
2500// String.prototype.substr - negative index don't work in IE8
2501var substr = 'ab'.substr(-1) === 'b'
2502    ? function (str, start, len) { return str.substr(start, len) }
2503    : function (str, start, len) {
2504        if (start < 0) start = str.length + start;
2505        return str.substr(start, len);
2506    }
2507;
2508
2509/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(27)))
2510
2511/***/ }),
2512
2513/***/ 280:
2514/***/ (function(module, exports, __webpack_require__) {
2515
2516"use strict";
2517
2518Object.defineProperty(exports, "__esModule", { value: true });
2519exports.ComponentWalker = void 0;
2520const util_1 = __webpack_require__(26);
2521const filter_1 = __webpack_require__(282);
2522const el_1 = __webpack_require__(109);
2523class ComponentWalker {
2524    constructor(maxDepth, filter, ctx) {
2525        this.ctx = ctx;
2526        this.maxDepth = maxDepth;
2527        this.componentFilter = new filter_1.ComponentFilter(filter);
2528    }
2529    getComponentTree(instance) {
2530        this.captureIds = new Map();
2531        return this.findQualifiedChildren(instance, 0);
2532    }
2533    getComponentParents(instance) {
2534        this.captureIds = new Map();
2535        const parents = [];
2536        this.captureId(instance);
2537        let parent = instance;
2538        while ((parent = parent.parent)) {
2539            this.captureId(parent);
2540            parents.push(parent);
2541        }
2542        return parents;
2543    }
2544    /**
2545     * Find qualified children from a single instance.
2546     * If the instance itself is qualified, just return itself.
2547     * This is ok because [].concat works in both cases.
2548     *
2549     * @param {Vue|Vnode} instance
2550     * @return {Vue|Array}
2551     */
2552    findQualifiedChildren(instance, depth) {
2553        if (this.componentFilter.isQualified(instance)) {
2554            return this.capture(instance, null, depth);
2555        }
2556        else if (instance.subTree) {
2557            // TODO functional components
2558            return this.findQualifiedChildrenFromList(this.getInternalInstanceChildren(instance.subTree), depth);
2559        }
2560        else {
2561            return [];
2562        }
2563    }
2564    /**
2565     * Iterate through an array of instances and flatten it into
2566     * an array of qualified instances. This is a depth-first
2567     * traversal - e.g. if an instance is not matched, we will
2568     * recursively go deeper until a qualified child is found.
2569     *
2570     * @param {Array} instances
2571     * @return {Array}
2572     */
2573    findQualifiedChildrenFromList(instances, depth) {
2574        instances = instances
2575            .filter(child => !util_1.isBeingDestroyed(child));
2576        return !this.componentFilter.filter
2577            ? instances.map((child, index, list) => this.capture(child, list, depth))
2578            : Array.prototype.concat.apply([], instances.map(i => this.findQualifiedChildren(i, depth)));
2579    }
2580    /**
2581     * Get children from a component instance.
2582     */
2583    getInternalInstanceChildren(subTree) {
2584        if (Array.isArray(subTree.children)) {
2585            const list = [];
2586            subTree.children.forEach(childSubTree => {
2587                if (childSubTree.component) {
2588                    list.push(childSubTree.component);
2589                }
2590                else {
2591                    list.push(...this.getInternalInstanceChildren(childSubTree));
2592                }
2593            });
2594            return list;
2595        }
2596        else if (subTree.component) {
2597            return [subTree.component];
2598        }
2599        return [];
2600    }
2601    captureId(instance) {
2602        // instance.uid is not reliable in devtools as there
2603        // may be 2 roots with same uid which causes unexpected
2604        // behaviour
2605        const id = instance.__VUE_DEVTOOLS_UID__ != null ? instance.__VUE_DEVTOOLS_UID__ : util_1.getUniqueComponentId(instance, this.ctx);
2606        instance.__VUE_DEVTOOLS_UID__ = id;
2607        // Dedupe
2608        if (this.captureIds.has(id)) {
2609            return;
2610        }
2611        else {
2612            this.captureIds.set(id, undefined);
2613        }
2614        this.mark(instance);
2615        return id;
2616    }
2617    /**
2618     * Capture the meta information of an instance. (recursive)
2619     *
2620     * @param {Vue} instance
2621     * @return {Object}
2622     */
2623    capture(instance, list, depth) {
2624        const id = this.captureId(instance);
2625        const name = util_1.getInstanceName(instance);
2626        const children = this.getInternalInstanceChildren(instance.subTree)
2627            .filter(child => !util_1.isBeingDestroyed(child));
2628        const ret = {
2629            uid: instance.uid,
2630            id,
2631            name,
2632            renderKey: util_1.getRenderKey(instance.vnode ? instance.vnode.key : null),
2633            inactive: !!instance.isDeactivated,
2634            hasChildren: !!children.length,
2635            children: [],
2636            isFragment: util_1.isFragment(instance),
2637            tags: []
2638        };
2639        // capture children
2640        if (depth < this.maxDepth) {
2641            ret.children = children
2642                .map((child, index, list) => this.capture(child, list, depth + 1))
2643                .filter(Boolean);
2644        }
2645        // record screen position to ensure correct ordering
2646        if ((!list || list.length > 1) && !instance._inactive) {
2647            const rect = el_1.getInstanceOrVnodeRect(instance);
2648            ret.positionTop = rect ? rect.positionTop : Infinity;
2649        }
2650        return ret;
2651    }
2652    /**
2653     * Mark an instance as captured and store it in the instance map.
2654     *
2655     * @param {Vue} instance
2656     */
2657    mark(instance) {
2658        const instanceMap = this.ctx.currentAppRecord.instanceMap;
2659        if (!instanceMap.has(instance.__VUE_DEVTOOLS_UID__)) {
2660            instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance);
2661        }
2662    }
2663}
2664exports.ComponentWalker = ComponentWalker;
2665//# sourceMappingURL=tree.js.map
2666
2667/***/ }),
2668
2669/***/ 281:
2670/***/ (function(module, exports, __webpack_require__) {
2671
2672"use strict";
2673
2674var __importDefault = (this && this.__importDefault) || function (mod) {
2675    return (mod && mod.__esModule) ? mod : { "default": mod };
2676};
2677Object.defineProperty(exports, "__esModule", { value: true });
2678exports.basename = exports.flatten = void 0;
2679const path_1 = __importDefault(__webpack_require__(28));
2680function flatten(items) {
2681    return items.reduce((acc, item) => {
2682        if (item instanceof Array)
2683            acc.push(...flatten(item));
2684        else if (item)
2685            acc.push(item);
2686        return acc;
2687    }, []);
2688}
2689exports.flatten = flatten;
2690// Use a custom basename functions instead of the shimed version
2691// because it doesn't work on Windows
2692function basename(filename, ext) {
2693    return path_1.default.basename(filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'), ext);
2694}
2695exports.basename = basename;
2696//# sourceMappingURL=util.js.map
2697
2698/***/ }),
2699
2700/***/ 282:
2701/***/ (function(module, exports, __webpack_require__) {
2702
2703"use strict";
2704
2705Object.defineProperty(exports, "__esModule", { value: true });
2706exports.ComponentFilter = void 0;
2707const shared_utils_1 = __webpack_require__(1);
2708const util_1 = __webpack_require__(26);
2709class ComponentFilter {
2710    constructor(filter) {
2711        this.filter = filter || '';
2712    }
2713    /**
2714     * Check if an instance is qualified.
2715     *
2716     * @param {Vue|Vnode} instance
2717     * @return {Boolean}
2718     */
2719    isQualified(instance) {
2720        const name = shared_utils_1.classify(instance.name || util_1.getInstanceName(instance)).toLowerCase();
2721        return name.indexOf(this.filter) > -1;
2722    }
2723}
2724exports.ComponentFilter = ComponentFilter;
2725//# sourceMappingURL=filter.js.map
2726
2727/***/ }),
2728
2729/***/ 283:
2730/***/ (function(module, exports, __webpack_require__) {
2731
2732"use strict";
2733
2734var __importDefault = (this && this.__importDefault) || function (mod) {
2735    return (mod && mod.__esModule) ? mod : { "default": mod };
2736};
2737Object.defineProperty(exports, "__esModule", { value: true });
2738exports.editState = exports.getInstanceDetails = void 0;
2739const util_1 = __webpack_require__(26);
2740const shared_utils_1 = __webpack_require__(1);
2741const shared_data_1 = __importDefault(__webpack_require__(4));
2742/**
2743 * Get the detailed information of an inspected instance.
2744 */
2745async function getInstanceDetails(instance, ctx) {
2746    var _a;
2747    console.log(instance);
2748    return {
2749        id: util_1.getUniqueComponentId(instance, ctx),
2750        name: util_1.getInstanceName(instance),
2751        file: (_a = instance.type) === null || _a === void 0 ? void 0 : _a.__file,
2752        state: await getInstanceState(instance)
2753    };
2754}
2755exports.getInstanceDetails = getInstanceDetails;
2756async function getInstanceState(instance) {
2757    return processProps(instance).concat(processState(instance), processSetupState(instance), processComputed(instance));
2758}
2759/**
2760 * Process the props of an instance.
2761 * Make sure return a plain object because window.postMessage()
2762 * will throw an Error if the passed object contains Functions.
2763 *
2764 * @param {Vue} instance
2765 * @return {Array}
2766 */
2767function processProps(instance) {
2768    const propsData = [];
2769    const propDefinitions = instance.type.props;
2770    for (let key in instance.props) {
2771        const propDefinition = propDefinitions ? propDefinitions[key] : null;
2772        key = shared_utils_1.camelize(key);
2773        propsData.push({
2774            type: 'props',
2775            key,
2776            value: instance.props[key],
2777            meta: propDefinition ? {
2778                type: propDefinition.type ? getPropType(propDefinition.type) : 'any',
2779                required: !!propDefinition.required,
2780                ...propDefinition.default != null ? {
2781                    default: propDefinition.default.toString()
2782                } : {}
2783            } : {
2784                type: 'invalid'
2785            },
2786            editable: shared_data_1.default.editableProps
2787        });
2788    }
2789    return propsData;
2790}
2791const fnTypeRE = /^(?:function|class) (\w+)/;
2792/**
2793 * Convert prop type constructor to string.
2794 */
2795function getPropType(type) {
2796    const match = type.toString().match(fnTypeRE);
2797    return typeof type === 'function'
2798        ? (match && match[1]) || 'any'
2799        : 'any';
2800}
2801/**
2802 * Process state, filtering out props and "clean" the result
2803 * with a JSON dance. This removes functions which can cause
2804 * errors during structured clone used by window.postMessage.
2805 *
2806 * @param {Vue} instance
2807 * @return {Array}
2808 */
2809function processState(instance) {
2810    const type = instance.type;
2811    const props = type.props;
2812    const getters = type.vuex &&
2813        type.vuex.getters;
2814    const computedDefs = type.computed;
2815    const data = {
2816        ...instance.data,
2817        ...instance.renderContext
2818    };
2819    return Object.keys(data)
2820        .filter(key => (!(props && key in props) &&
2821        !(getters && key in getters) &&
2822        !(computedDefs && key in computedDefs)))
2823        .map(key => ({
2824        key,
2825        value: data[key],
2826        editable: true
2827    }));
2828}
2829function processSetupState(instance) {
2830    const raw = instance.devtoolsRawSetupState || {};
2831    return Object.keys(instance.setupState)
2832        .map(key => ({
2833        key,
2834        type: 'setup',
2835        value: instance.setupState[key],
2836        ...getSetupStateExtra(raw[key])
2837    }));
2838}
2839function getSetupStateExtra(raw) {
2840    if (!raw)
2841        return {};
2842    const info = getSetupStateInfo(raw);
2843    const objectType = info.computed ? 'Computed' : info.ref ? 'Ref' : info.reactive ? 'Reactive' : null;
2844    return {
2845        ...objectType ? { objectType } : {},
2846        ...raw.effect ? { raw: raw.effect.raw.toString() } : {},
2847        editable: (info.ref || info.computed || info.reactive) && !info.readonly
2848    };
2849}
2850function isRef(raw) {
2851    return !!raw.__v_isRef;
2852}
2853function isComputed(raw) {
2854    return isRef(raw) && !!raw.effect;
2855}
2856function isReactive(raw) {
2857    return !!raw.__v_isReactive;
2858}
2859function isReadOnly(raw) {
2860    return !!raw.__v_isReadonly;
2861}
2862function getSetupStateInfo(raw) {
2863    return {
2864        ref: isRef(raw),
2865        computed: isComputed(raw),
2866        reactive: isReactive(raw),
2867        readonly: isReadOnly(raw)
2868    };
2869}
2870/**
2871 * Process the computed properties of an instance.
2872 *
2873 * @param {Vue} instance
2874 * @return {Array}
2875 */
2876function processComputed(instance) {
2877    const type = instance.type;
2878    const computed = [];
2879    const defs = type.computed || {};
2880    // use for...in here because if 'computed' is not defined
2881    // on component, computed properties will be placed in prototype
2882    // and Object.keys does not include
2883    // properties from object's prototype
2884    for (const key in defs) {
2885        const def = defs[key];
2886        const type = typeof def === 'function' && def.vuex
2887            ? 'vuex bindings'
2888            : 'computed';
2889        // use try ... catch here because some computed properties may
2890        // throw error during its evaluation
2891        let computedProp = null;
2892        try {
2893            computedProp = {
2894                type,
2895                key,
2896                value: instance.proxy[key]
2897            };
2898        }
2899        catch (e) {
2900            computedProp = {
2901                type,
2902                key,
2903                value: '(error during evaluation)'
2904            };
2905        }
2906        computed.push(computedProp);
2907    }
2908    return computed;
2909}
2910function editState({ componentInstance, path, state }, ctx) {
2911    let target;
2912    const targetPath = path.slice();
2913    if (Object.keys(componentInstance.data).includes(path[0])) {
2914        // Data
2915        target = componentInstance.data;
2916    }
2917    else if (Object.keys(componentInstance.props).includes(path[0])) {
2918        // Props
2919        target = componentInstance.props;
2920    }
2921    else if (Object.keys(componentInstance.devtoolsRawSetupState).includes(path[0])) {
2922        // Setup
2923        target = componentInstance.devtoolsRawSetupState;
2924        const currentValue = shared_utils_1.get(componentInstance.devtoolsRawSetupState, path);
2925        if (currentValue != null) {
2926            const info = getSetupStateInfo(currentValue);
2927            if (info.readonly)
2928                return;
2929            if (info.ref) {
2930                targetPath.splice(1, 0, 'value');
2931            }
2932        }
2933    }
2934    if (target && targetPath) {
2935        shared_utils_1.set(target, targetPath, 'value' in state ? state.value : undefined, (obj, field, value) => {
2936            if (state.remove || state.newKey) {
2937                if (Array.isArray(obj)) {
2938                    obj.splice(field, 1);
2939                }
2940                else {
2941                    delete obj[field];
2942                }
2943            }
2944            if (!state.remove) {
2945                obj[state.newKey || field] = value;
2946            }
2947        });
2948    }
2949}
2950exports.editState = editState;
2951//# sourceMappingURL=data.js.map
2952
2953/***/ }),
2954
2955/***/ 284:
2956/***/ (function(module, exports, __webpack_require__) {
2957
2958"use strict";
2959
2960Object.defineProperty(exports, "__esModule", { value: true });
2961const shared_utils_1 = __webpack_require__(1);
2962const highlighter_1 = __webpack_require__(108);
2963class ComponentPicker {
2964    constructor(ctx) {
2965        this.ctx = ctx;
2966        this.bindMethods();
2967    }
2968    /**
2969     * Adds event listeners for mouseover and mouseup
2970     */
2971    startSelecting() {
2972        if (!shared_utils_1.isBrowser)
2973            return;
2974        window.addEventListener('mouseover', this.elementMouseOver, true);
2975        window.addEventListener('click', this.elementClicked, true);
2976        window.addEventListener('mouseout', this.cancelEvent, true);
2977        window.addEventListener('mouseenter', this.cancelEvent, true);
2978        window.addEventListener('mouseleave', this.cancelEvent, true);
2979        window.addEventListener('mousedown', this.cancelEvent, true);
2980        window.addEventListener('mouseup', this.cancelEvent, true);
2981    }
2982    /**
2983     * Removes event listeners
2984     */
2985    stopSelecting() {
2986        if (!shared_utils_1.isBrowser)
2987            return;
2988        window.removeEventListener('mouseover', this.elementMouseOver, true);
2989        window.removeEventListener('click', this.elementClicked, true);
2990        window.removeEventListener('mouseout', this.cancelEvent, true);
2991        window.removeEventListener('mouseenter', this.cancelEvent, true);
2992        window.removeEventListener('mouseleave', this.cancelEvent, true);
2993        window.removeEventListener('mousedown', this.cancelEvent, true);
2994        window.removeEventListener('mouseup', this.cancelEvent, true);
2995        highlighter_1.unHighlight();
2996    }
2997    /**
2998     * Highlights a component on element mouse over
2999     */
3000    async elementMouseOver(e) {
3001        this.cancelEvent(e);
3002        const el = e.target;
3003        if (el) {
3004            this.selectedInstance = await this.ctx.api.getElementComponent(el);
3005        }
3006        highlighter_1.unHighlight();
3007        if (this.selectedInstance) {
3008            highlighter_1.highlight(this.selectedInstance, this.ctx);
3009        }
3010    }
3011    /**
3012     * Selects an instance in the component view
3013     */
3014    async elementClicked(e) {
3015        this.cancelEvent(e);
3016        if (this.selectedInstance) {
3017            const parentInstances = await this.ctx.api.walkComponentParents(this.selectedInstance);
3018            this.ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_PICK, { id: this.selectedInstance.__VUE_DEVTOOLS_UID__, parentIds: parentInstances.map(i => i.__VUE_DEVTOOLS_UID__) });
3019        }
3020        else {
3021            this.ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_PICK_CANCELED, null);
3022        }
3023        this.stopSelecting();
3024    }
3025    /**
3026     * Cancel a mouse event
3027     */
3028    cancelEvent(e) {
3029        e.stopImmediatePropagation();
3030        e.preventDefault();
3031    }
3032    /**
3033     * Bind class methods to the class scope to avoid rebind for event listeners
3034     */
3035    bindMethods() {
3036        this.startSelecting = this.startSelecting.bind(this);
3037        this.stopSelecting = this.stopSelecting.bind(this);
3038        this.elementMouseOver = this.elementMouseOver.bind(this);
3039        this.elementClicked = this.elementClicked.bind(this);
3040    }
3041}
3042exports.default = ComponentPicker;
3043//# sourceMappingURL=component-pick.js.map
3044
3045/***/ }),
3046
3047/***/ 285:
3048/***/ (function(module, exports, __webpack_require__) {
3049
3050"use strict";
3051
3052Object.defineProperty(exports, "__esModule", { value: true });
3053exports.getComponentInstance = exports.getComponentId = exports.editComponentState = exports.sendEmptyComponentData = exports.sendSelectedComponentData = exports.sendComponentTreeData = void 0;
3054const shared_utils_1 = __webpack_require__(1);
3055const app_1 = __webpack_require__(25);
3056async function sendComponentTreeData(instanceId, filter = '', ctx) {
3057    if (!instanceId)
3058        return;
3059    const instance = getComponentInstance(instanceId, ctx);
3060    if (!instance) {
3061        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_TREE, {
3062            instanceId,
3063            treeData: null,
3064            notFound: true
3065        });
3066    }
3067    else {
3068        if (filter)
3069            filter = filter.toLowerCase();
3070        const maxDepth = instance === ctx.currentAppRecord.rootInstance ? 2 : 1;
3071        const payload = {
3072            instanceId,
3073            treeData: shared_utils_1.stringify(await ctx.api.walkComponentTree(instance, maxDepth, filter))
3074        };
3075        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_TREE, payload);
3076    }
3077}
3078exports.sendComponentTreeData = sendComponentTreeData;
3079async function sendSelectedComponentData(instanceId, ctx) {
3080    if (!instanceId)
3081        return;
3082    const instance = getComponentInstance(instanceId, ctx);
3083    if (!instance) {
3084        sendEmptyComponentData(instanceId, ctx);
3085    }
3086    else {
3087        // Expose instance on window
3088        if (typeof window !== 'undefined') {
3089            window.$vm = instance;
3090        }
3091        ctx.currentInspectedComponentId = instanceId;
3092        ctx.currentAppRecord.lastInspectedComponentId = instanceId;
3093        const payload = {
3094            instanceId,
3095            data: shared_utils_1.stringify(await ctx.api.inspectComponent(instance))
3096        };
3097        ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_SELECTED_DATA, payload);
3098    }
3099}
3100exports.sendSelectedComponentData = sendSelectedComponentData;
3101function sendEmptyComponentData(instanceId, ctx) {
3102    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_COMPONENT_SELECTED_DATA, {
3103        instanceId,
3104        data: null
3105    });
3106}
3107exports.sendEmptyComponentData = sendEmptyComponentData;
3108async function editComponentState(instanceId, dotPath, state, ctx) {
3109    if (!instanceId)
3110        return;
3111    const instance = getComponentInstance(instanceId, ctx);
3112    if (instance) {
3113        if ('value' in state && state.value != null) {
3114            state.value = shared_utils_1.parse(state.value, true);
3115        }
3116        await ctx.api.editComponentState(instance, dotPath, state);
3117        await sendSelectedComponentData(instanceId, ctx);
3118    }
3119}
3120exports.editComponentState = editComponentState;
3121function getComponentId(app, uid, ctx) {
3122    const appRecord = app_1.getAppRecord(app, ctx);
3123    if (!appRecord)
3124        return null;
3125    return `${appRecord.id}:${uid === 0 ? 'root' : uid}`;
3126}
3127exports.getComponentId = getComponentId;
3128function getComponentInstance(instanceId, ctx) {
3129    if (instanceId === '_root') {
3130        instanceId = `${ctx.currentAppRecord.id}:root`;
3131    }
3132    const instance = ctx.currentAppRecord.instanceMap.get(instanceId);
3133    if (!instance) {
3134        console.warn(`Instance uid=${instanceId} not found`);
3135    }
3136    return instance;
3137}
3138exports.getComponentInstance = getComponentInstance;
3139//# sourceMappingURL=component.js.map
3140
3141/***/ }),
3142
3143/***/ 286:
3144/***/ (function(module, exports, __webpack_require__) {
3145
3146"use strict";
3147
3148Object.defineProperty(exports, "__esModule", { value: true });
3149exports.serializePlugin = exports.sendPluginList = exports.addPreviouslyRegisteredPlugins = exports.addQueuedPlugins = exports.addPlugin = void 0;
3150const app_backend_api_1 = __webpack_require__(24);
3151const shared_utils_1 = __webpack_require__(1);
3152const app_1 = __webpack_require__(25);
3153function addPlugin(pluginDescriptor, setupFn, ctx) {
3154    const plugin = {
3155        descriptor: pluginDescriptor,
3156        setupFn,
3157        error: null
3158    };
3159    ctx.currentPlugin = plugin;
3160    try {
3161        const api = new app_backend_api_1.DevtoolsPluginApiInstance(plugin, ctx);
3162        setupFn(api);
3163    }
3164    catch (e) {
3165        plugin.error = e;
3166        console.error(e);
3167    }
3168    ctx.currentPlugin = null;
3169    ctx.plugins.push(plugin);
3170    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_ADD, {
3171        plugin: serializePlugin(plugin)
3172    });
3173    const targetList = shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ = shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ || [];
3174    targetList.push({
3175        pluginDescriptor,
3176        setupFn
3177    });
3178}
3179exports.addPlugin = addPlugin;
3180async function addQueuedPlugins(ctx) {
3181    if (shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__ && Array.isArray(shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__)) {
3182        for (const k in shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__) {
3183            const plugin = shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__[k];
3184            addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx);
3185        }
3186        shared_utils_1.target.__VUE_DEVTOOLS_PLUGINS__ = null;
3187    }
3188}
3189exports.addQueuedPlugins = addQueuedPlugins;
3190async function addPreviouslyRegisteredPlugins(ctx) {
3191    if (shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__ && Array.isArray(shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__)) {
3192        for (const k in shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__) {
3193            const plugin = shared_utils_1.target.__VUE_DEVTOOLS_REGISTERED_PLUGINS__[k];
3194            addPlugin(plugin.pluginDescriptor, plugin.setupFn, ctx);
3195        }
3196    }
3197}
3198exports.addPreviouslyRegisteredPlugins = addPreviouslyRegisteredPlugins;
3199function sendPluginList(ctx) {
3200    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_DEVTOOLS_PLUGIN_LIST, {
3201        plugins: ctx.plugins.map(p => serializePlugin(p))
3202    });
3203}
3204exports.sendPluginList = sendPluginList;
3205function serializePlugin(plugin) {
3206    return {
3207        id: plugin.descriptor.id,
3208        label: plugin.descriptor.label,
3209        appId: app_1.getAppRecordId(plugin.descriptor.app)
3210    };
3211}
3212exports.serializePlugin = serializePlugin;
3213//# sourceMappingURL=plugin.js.map
3214
3215/***/ }),
3216
3217/***/ 287:
3218/***/ (function(module, exports, __webpack_require__) {
3219
3220"use strict";
3221
3222Object.defineProperty(exports, "__esModule", { value: true });
3223exports.editInspectorState = exports.sendInspectorState = exports.sendInspectorTree = exports.getInspectorWithAppId = exports.getInspector = void 0;
3224const shared_utils_1 = __webpack_require__(1);
3225const app_1 = __webpack_require__(25);
3226function getInspector(inspectorId, app, ctx) {
3227    return ctx.customInspectors.find(i => i.id === inspectorId && i.app === app);
3228}
3229exports.getInspector = getInspector;
3230function getInspectorWithAppId(inspectorId, appId, ctx) {
3231    return ctx.customInspectors.find(i => i.id === inspectorId && app_1.getAppRecordId(i.app) === appId);
3232}
3233exports.getInspectorWithAppId = getInspectorWithAppId;
3234async function sendInspectorTree(inspector, ctx) {
3235    const rootNodes = await ctx.api.getInspectorTree(inspector.id, inspector.app, inspector.treeFilter);
3236    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_TREE, {
3237        appId: app_1.getAppRecordId(inspector.app),
3238        inspectorId: inspector.id,
3239        rootNodes
3240    });
3241}
3242exports.sendInspectorTree = sendInspectorTree;
3243async function sendInspectorState(inspector, ctx) {
3244    const state = inspector.selectedNodeId ? await ctx.api.getInspectorState(inspector.id, inspector.app, inspector.selectedNodeId) : null;
3245    ctx.bridge.send(shared_utils_1.BridgeEvents.TO_FRONT_CUSTOM_INSPECTOR_STATE, {
3246        appId: app_1.getAppRecordId(inspector.app),
3247        inspectorId: inspector.id,
3248        state: shared_utils_1.stringify(state)
3249    });
3250}
3251exports.sendInspectorState = sendInspectorState;
3252async function editInspectorState(inspector, nodeId, dotPath, state, ctx) {
3253    await ctx.api.editInspectorState(inspector.id, inspector.app, nodeId, dotPath, {
3254        ...state,
3255        value: state.value != null ? shared_utils_1.parse(state.value, true) : state.value
3256    });
3257}
3258exports.editInspectorState = editInspectorState;
3259//# sourceMappingURL=inspector.js.map
3260
3261/***/ }),
3262
3263/***/ 288:
3264/***/ (function(module, exports, __webpack_require__) {
3265
3266"use strict";
3267
3268Object.defineProperty(exports, "__esModule", { value: true });
3269exports.showScreenshot = void 0;
3270const queue_1 = __webpack_require__(73);
3271const timeline_builtins_1 = __webpack_require__(289);
3272let overlay;
3273let image;
3274let container;
3275const jobQueue = new queue_1.JobQueue();
3276async function showScreenshot(screenshot, ctx) {
3277    await jobQueue.queue(async () => {
3278        if (screenshot) {
3279            if (!container) {
3280                createElements();
3281            }
3282            image.src = screenshot.image;
3283            clearContent();
3284            const events = screenshot.events.map(id => ctx.currentAppRecord.timelineEventMap.get(id)).filter(Boolean).map(eventData => ({
3285                layer: timeline_builtins_1.builtinLayers.concat(ctx.timelineLayers).find(layer => layer.id === eventData.layerId),
3286                event: {
3287                    ...eventData.event,
3288                    layerId: eventData.layerId,
3289                    renderMeta: {}
3290                }
3291            }));
3292            const renderContext = {
3293                screenshot,
3294                events: events.map(({ event }) => event),
3295                index: 0
3296            };
3297            for (let i = 0; i < events.length; i++) {
3298                const { layer, event } = events[i];
3299                if (layer.screenshotOverlayRender) {
3300                    renderContext.index = i;
3301                    try {
3302                        const result = await layer.screenshotOverlayRender(event, renderContext);
3303                        if (result !== false) {
3304                            if (typeof result === 'string') {
3305                                container.innerHTML += result;