@react-native/debugger-frontend 0.76.0-rc.0 → 0.77.0-nightly-20240911-a05f9c677

package/dist/third-party/front_end/models/react_native/react_native.js

@@ -1 +1 @@
-import*as e from"../../core/sdk/sdk.js";const t="main",i="__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__";class n extends e.SDKModel.SDKModel{domainToListeners=new Map;messagingBindingName=null;enabled=!1;fuseboxDispatcherIsInitialized=!1;domainToMessageQueue=new Map;bindingCalled(e){if(null===this.messagingBindingName||e.data.name!==this.messagingBindingName)return;const t=e.data.payload;let i=null;try{i=JSON.parse(t)}catch(e){throw new Error("Failed to parse bindingCalled event payload",{cause:e})}if(i){const e=i.domain;if(this.fuseboxDispatcherIsInitialized){if(!this.isDomainMessagesQueueEmpty(e))throw new Error(`Attempted to send a message to domain ${e} while queue is not empty`);this.dispatchMessageToDomainEventListeners(e,i.message)}else this.queueMessageForDomain(e,i.message)}}queueMessageForDomain(e,t){let i=this.domainToMessageQueue.get(e);i||(i=[],this.domainToMessageQueue.set(e,i)),i.push(t)}flushOutDomainMessagesQueues(){for(const[e,t]of this.domainToMessageQueue.entries())if(0!==t.length){for(const i of t)this.dispatchMessageToDomainEventListeners(e,i);t.splice(0,t.length)}}isDomainMessagesQueueEmpty(e){const t=this.domainToMessageQueue.get(e);return void 0===t||0===t.length}subscribeToDomainMessages(e,t){let i=this.domainToListeners.get(e);i||(i=new Set,this.domainToListeners.set(e,i)),i.add(t)}unsubscribeFromDomainMessages(e,t){const i=this.domainToListeners.get(e);i&&i.delete(t)}dispatchMessageToDomainEventListeners(e,t){const i=this.domainToListeners.get(e);if(!i)return;const n=[];for(const e of i)try{e(t)}catch(e){n.push(e)}if(n.length>0)throw new AggregateError(n,`Error occurred in ReactDevToolsBindingsModel while calling event listeners for domain ${e}`)}async initializeDomain(t){const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error(`Failed to initialize domain ${t} for ReactDevToolsBindingsModel: runtime model is not available`);await n.agent.invoke_evaluate({expression:`void ${i}.initializeDomain('${t}')`})}async sendMessage(t,n){const o=this.target().model(e.RuntimeModel.RuntimeModel);if(!o)throw new Error(`Failed to send message from ReactDevToolsBindingsModel for domain ${t}: runtime model is not available`);const s=JSON.stringify(n);await o.agent.invoke_evaluate({expression:`${i}.sendMessage('${t}', '${s}')`})}async enable(){if(this.enabled)throw new Error("ReactDevToolsBindingsModel is already enabled");const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to enable ReactDevToolsBindingsModel: runtime model is not available");await this.waitForFuseboxDispatcherToBeInitialized().then((()=>t.agent.invoke_evaluate({expression:`${i}.BINDING_NAME`}))).then((e=>{if(e.exceptionDetails)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: "+e.exceptionDetails.text);if(null===e.result.value||void 0===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is "+String(e.result.value));if(""===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is an empty string");return e.result.value})).then((i=>(this.messagingBindingName=i,t.addEventListener(e.RuntimeModel.Events.BindingCalled,this.bindingCalled,this),t.agent.invoke_addBinding({name:i})))).then((e=>{const t=e.getError();if(t)throw new Error("Failed to add binding for ReactDevToolsBindingsModel: "+t);this.enabled=!0,this.initializeExecutionContextListeners()}))}isEnabled(){return this.enabled}initializeExecutionContextListeners(){const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to initialize execution context listeners for ReactDevToolsBindingsModel: runtime model is not available");t.addEventListener(e.RuntimeModel.Events.ExecutionContextCreated,this.onExecutionContextCreated,this),t.addEventListener(e.RuntimeModel.Events.ExecutionContextDestroyed,this.onExecutionContextDestroyed,this)}onExecutionContextCreated({data:e}){e.name===t&&this.waitForFuseboxDispatcherToBeInitialized().then((()=>{this.dispatchEventToListeners("BackendExecutionContextCreated"),this.flushOutDomainMessagesQueues()})).catch((e=>this.dispatchEventToListeners("BackendExecutionContextUnavailable",e.message)))}onExecutionContextDestroyed({data:e}){e.name===t&&(this.fuseboxDispatcherIsInitialized=!1,this.dispatchEventToListeners("BackendExecutionContextDestroyed"))}async waitForFuseboxDispatcherToBeInitialized(t=1){if(t>=20)throw new Error("Failed to wait for initialization: it took too long");const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error("Failed to wait for React DevTools dispatcher initialization: runtime model is not available");await n.agent.invoke_evaluate({expression:`globalThis.${i} != undefined`,returnByValue:!0}).then((e=>{if(e.exceptionDetails)throw new Error("Failed to wait for React DevTools dispatcher initialization: "+e.exceptionDetails.text);if(!1===e.result.value)return new Promise((e=>setTimeout(e,250))).then((()=>this.waitForFuseboxDispatcherToBeInitialized(t+1)));this.fuseboxDispatcherIsInitialized=!0}))}}e.SDKModel.SDKModel.register(n,{capabilities:4,autostart:!1});var o=Object.freeze({__proto__:null,ReactDevToolsBindingsModel:n});export{o as ReactDevToolsBindingsModel};
+import*as e from"../../core/sdk/sdk.js";const t="main",i="__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__";class n extends e.SDKModel.SDKModel{domainToListeners=new Map;messagingBindingName=null;enabled=!1;fuseboxDispatcherIsInitialized=!1;domainToMessageQueue=new Map;bindingCalled(e){if(null===this.messagingBindingName||e.data.name!==this.messagingBindingName)return;const t=e.data.payload;let i=null;try{i=JSON.parse(t)}catch(e){throw new Error("Failed to parse bindingCalled event payload",{cause:e})}if(i){const e=i.domain;if(this.fuseboxDispatcherIsInitialized){if(!this.isDomainMessagesQueueEmpty(e))throw new Error(`Attempted to send a message to domain ${e} while queue is not empty`);this.dispatchMessageToDomainEventListeners(e,i.message)}else this.queueMessageForDomain(e,i.message)}}queueMessageForDomain(e,t){let i=this.domainToMessageQueue.get(e);i||(i=[],this.domainToMessageQueue.set(e,i)),i.push(t)}flushOutDomainMessagesQueues(){for(const[e,t]of this.domainToMessageQueue.entries())if(0!==t.length){for(const i of t)this.dispatchMessageToDomainEventListeners(e,i);t.splice(0,t.length)}}isDomainMessagesQueueEmpty(e){const t=this.domainToMessageQueue.get(e);return void 0===t||0===t.length}subscribeToDomainMessages(e,t){let i=this.domainToListeners.get(e);i||(i=new Set,this.domainToListeners.set(e,i)),i.add(t)}unsubscribeFromDomainMessages(e,t){const i=this.domainToListeners.get(e);i&&i.delete(t)}dispatchMessageToDomainEventListeners(e,t){const i=this.domainToListeners.get(e);if(!i)return;const n=[];for(const e of i)try{e(t)}catch(e){n.push(e)}if(n.length>0)throw new AggregateError(n,`Error occurred in ReactDevToolsBindingsModel while calling event listeners for domain ${e}`)}async initializeDomain(t){const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error(`Failed to initialize domain ${t} for ReactDevToolsBindingsModel: runtime model is not available`);await n.agent.invoke_evaluate({expression:`void ${i}.initializeDomain('${t}')`})}async sendMessage(t,n){if(!this.fuseboxDispatcherIsInitialized)return;const o=this.target().model(e.RuntimeModel.RuntimeModel);if(!o)throw new Error(`Failed to send message from ReactDevToolsBindingsModel for domain ${t}: runtime model is not available`);const s=JSON.stringify(n),a=`${i}.sendMessage('${t}', '${s}')`;await o.agent.invoke_evaluate({expression:`void setTimeout(() => ${a}, 0)`})}async enable(){if(this.enabled)throw new Error("ReactDevToolsBindingsModel is already enabled");const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to enable ReactDevToolsBindingsModel: runtime model is not available");await this.waitForFuseboxDispatcherToBeInitialized().then((()=>t.agent.invoke_evaluate({expression:`${i}.BINDING_NAME`}))).then((e=>{if(e.exceptionDetails)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: "+e.exceptionDetails.text);if(null===e.result.value||void 0===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is "+String(e.result.value));if(""===e.result.value)throw new Error("Failed to get binding name for ReactDevToolsBindingsModel on a global: returned value is an empty string");return e.result.value})).then((i=>(this.messagingBindingName=i,t.addEventListener(e.RuntimeModel.Events.BindingCalled,this.bindingCalled,this),t.agent.invoke_addBinding({name:i})))).then((e=>{const t=e.getError();if(t)throw new Error("Failed to add binding for ReactDevToolsBindingsModel: "+t);this.enabled=!0,this.initializeExecutionContextListeners()}))}isEnabled(){return this.enabled}initializeExecutionContextListeners(){const t=this.target().model(e.RuntimeModel.RuntimeModel);if(!t)throw new Error("Failed to initialize execution context listeners for ReactDevToolsBindingsModel: runtime model is not available");t.addEventListener(e.RuntimeModel.Events.ExecutionContextCreated,this.onExecutionContextCreated,this),t.addEventListener(e.RuntimeModel.Events.ExecutionContextDestroyed,this.onExecutionContextDestroyed,this)}onExecutionContextCreated({data:e}){e.name===t&&this.waitForFuseboxDispatcherToBeInitialized().then((()=>{this.dispatchEventToListeners("BackendExecutionContextCreated"),this.flushOutDomainMessagesQueues()})).catch((e=>this.dispatchEventToListeners("BackendExecutionContextUnavailable",e.message)))}onExecutionContextDestroyed({data:e}){e.name===t&&(this.fuseboxDispatcherIsInitialized=!1,this.dispatchEventToListeners("BackendExecutionContextDestroyed"))}async waitForFuseboxDispatcherToBeInitialized(t=1){if(t>=20)throw new Error("Failed to wait for initialization: it took too long");const n=this.target().model(e.RuntimeModel.RuntimeModel);if(!n)throw new Error("Failed to wait for React DevTools dispatcher initialization: runtime model is not available");await n.agent.invoke_evaluate({expression:`globalThis.${i} != undefined`,returnByValue:!0}).then((e=>{if(e.exceptionDetails)throw new Error("Failed to wait for React DevTools dispatcher initialization: "+e.exceptionDetails.text);if(!1===e.result.value)return new Promise((e=>setTimeout(e,250))).then((()=>this.waitForFuseboxDispatcherToBeInitialized(t+1)));this.fuseboxDispatcherIsInitialized=!0}))}}e.SDKModel.SDKModel.register(n,{capabilities:4,autostart:!1});var o=Object.freeze({__proto__:null,ReactDevToolsBindingsModel:n});export{o as ReactDevToolsBindingsModel};

package/dist/third-party/front_end/panels/react_devtools/react_devtools.js

@@ -1 +1 @@
-import*as e from"../../core/i18n/i18n.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../third_party/react-devtools/react-devtools.js";import*as s from"../../core/common/common.js";import*as o from"../../models/workspace/workspace.js";import*as r from"../../models/bindings/bindings.js";import*as a from"../../models/logs/logs.js";import*as l from"../../core/host/host.js";import*as d from"../../models/react_native/react_native.js";class c extends i.SDKModel.SDKModel{static FUSEBOX_BINDING_NAMESPACE="react-devtools";#e;#t;#i=new Set;#n=!1;#s=!1;#o;#r;constructor(e){super(e),this.#e={listen:e=>(this.#i.add(e),()=>{this.#i.delete(e)}),send:(e,t)=>{this.#a({event:e,payload:t})}},this.#o=n.createBridge(this.#e),this.#r=n.createStore(this.#o);const t=e.model(d.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel);if(null==t)throw new Error("Failed to construct ReactDevToolsModel: ReactDevToolsBindingsModel was null");this.#t=t,t.addEventListener("BackendExecutionContextCreated",this.#l,this),t.addEventListener("BackendExecutionContextUnavailable",this.#d,this),t.addEventListener("BackendExecutionContextDestroyed",this.#c,this),window.addEventListener("beforeunload",(()=>this.#o?.shutdown()))}async ensureInitialized(){if(!this.#n){this.#n=!0;try{const e=this.#t;await e.enable(),e.subscribeToDomainMessages(c.FUSEBOX_BINDING_NAMESPACE,(e=>this.#h(e))),await e.initializeDomain(c.FUSEBOX_BINDING_NAMESPACE),this.#s=!0,this.dispatchEventToListeners("InitializationCompleted")}catch(e){this.dispatchEventToListeners("InitializationFailed",e.message)}}}isInitialized(){return this.#s}getBridgeOrThrow(){if(null==this.#o)throw new Error("Failed to get bridge from ReactDevToolsModel: bridge was null");return this.#o}getStoreOrThrow(){if(null==this.#r)throw new Error("Failed to get store from ReactDevToolsModel: store was null");return this.#r}#h(e){if(e)for(const t of this.#i)t(e)}async#a(e){const t=this.#t;if(!t)throw new Error("Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null");return t.sendMessage(c.FUSEBOX_BINDING_NAMESPACE,e)}#l(){const e=this.#t;if(!e)throw new Error("ReactDevToolsModel failed to handle BackendExecutionContextCreated event: ReactDevToolsBindingsModel was null");this.#o=n.createBridge(this.#e),this.#r=n.createStore(this.#o),e.isEnabled()?this.dispatchEventToListeners("InitializationCompleted"):this.ensureInitialized()}#d({data:e}){this.dispatchEventToListeners("InitializationFailed",e)}#c(){this.#o?.shutdown(),this.#o=null,this.#r=null,this.#i.clear(),this.dispatchEventToListeners("Destroyed")}}i.SDKModel.SDKModel.register(c,{capabilities:4,autostart:!1});var h=Object.freeze({__proto__:null,ReactDevToolsModel:c});const m={sendFeedback:"[FB-only] Send feedback"},u=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsViewBase.ts",m),g=e.i18n.getLocalizedString.bind(void 0,u);function p(e,t){const{sourceURL:i,line:n,column:l}=t||e;!async function(e,t,i){const n=o.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(e);if(n){const e=await r.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().normalizeUILocation(n.uiLocation(t,i));return void s.Revealer.reveal(e)}const l=r.ResourceUtils.resourceForURL(e);if(l)return void s.Revealer.reveal(l);const d=a.NetworkLog.NetworkLog.instance().requestForURL(e);if(!d)throw new Error("Could not find resource for "+e);s.Revealer.reveal(d)}(i,n-1,l-1)}class v extends t.View.SimpleView{#m;#u=null;constructor(e,t){super(t),this.#m=e,this.#g()}wasShown(){super.wasShown(),this.registerCSSFiles([n.CSS]),null==this.#u&&i.TargetManager.TargetManager.instance().observeModels(c,this)}modelAdded(e){this.#u=e,e.isInitialized()&&this.#p(),e.addEventListener("InitializationCompleted",this.#v,this),e.addEventListener("InitializationFailed",this.#w,this),e.addEventListener("Destroyed",this.#E,this),e.ensureInitialized()}modelRemoved(e){e.removeEventListener("InitializationCompleted",this.#v,this),e.removeEventListener("InitializationFailed",this.#w,this),e.removeEventListener("Destroyed",this.#E,this)}#v(){this.#p()}#w({data:e}){this.#b(e)}#E(){this.#g()}#p(){this.#f();const e=this.#u,t=window.matchMedia("(prefers-color-scheme: dark)").matches;("components"===this.#m?n.initializeComponents:n.initializeProfiler)(this.contentElement,{bridge:e.getBridgeOrThrow(),store:e.getStoreOrThrow(),theme:t?"dark":"light",canViewElementSourceFunction:()=>!0,viewElementSourceFunction:p})}#g(){this.#f();const e=document.createElement("div");e.setAttribute("style","display: flex; flex: 1; justify-content: center; align-items: center");const t=document.createElement("span");t.classList.add("spinner"),e.appendChild(t),this.contentElement.appendChild(e)}#b(e){this.#f();const i=document.createElement("div");i.setAttribute("style","display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center");const n=document.createElement("div");n.setAttribute("style","font-size: 3rem"),n.innerHTML="❗";const s=document.createElement("p");if(s.setAttribute("style","user-select: all"),s.innerHTML=e,i.appendChild(n),i.appendChild(s),this.contentElement.appendChild(i),globalThis.FB_ONLY__reactNativeFeedbackLink){const e=globalThis.FB_ONLY__reactNativeFeedbackLink,n=t.UIUtils.createTextButton(g(m.sendFeedback),(()=>{l.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}),{className:"primary-button",jslogContext:"sendFeedback"});i.appendChild(n)}}#f(){this.contentElement.removeChildren()}}const w={title:"⚛️ Components (React DevTools)"},E=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsComponentsView.ts",w),b=e.i18n.getLocalizedString.bind(void 0,E);var f=Object.freeze({__proto__:null,ReactDevToolsComponentsViewImpl:class extends v{constructor(){super("components",b(w.title))}}});const C={title:"⚛️ Profiler (React DevTools)"},D=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsProfilerView.ts",C),T=e.i18n.getLocalizedString.bind(void 0,D);var I=Object.freeze({__proto__:null,ReactDevToolsProfilerViewImpl:class extends v{constructor(){super("profiler",T(C.title))}}});export{f as ReactDevToolsComponentsView,h as ReactDevToolsModel,I as ReactDevToolsProfilerView};
+import*as e from"../../core/i18n/i18n.js";import*as t from"../../ui/legacy/legacy.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../third_party/react-devtools/react-devtools.js";import*as o from"../../core/common/common.js";import*as s from"../../models/workspace/workspace.js";import*as r from"../../models/bindings/bindings.js";import*as a from"../../models/logs/logs.js";import*as l from"../../core/host/host.js";import*as d from"../../models/react_native/react_native.js";class c extends i.SDKModel.SDKModel{static FUSEBOX_BINDING_NAMESPACE="react-devtools";#e;#t;#i=new Set;#n=!1;#o=!1;#s=null;#r=null;constructor(e){super(e),this.#e={listen:e=>(this.#i.add(e),()=>{this.#i.delete(e)}),send:(e,t)=>{this.#a({event:e,payload:t})}};const t=e.model(d.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel);if(null===t)throw new Error("Failed to construct ReactDevToolsModel: ReactDevToolsBindingsModel was null");this.#t=t,t.addEventListener("BackendExecutionContextCreated",this.#l,this),t.addEventListener("BackendExecutionContextUnavailable",this.#d,this),t.addEventListener("BackendExecutionContextDestroyed",this.#c,this),window.addEventListener("beforeunload",(()=>this.#s?.shutdown()))}ensureInitialized(){this.#n||(this.#n=!0,this.#h())}async#h(){try{const e=this.#t;await e.enable(),e.subscribeToDomainMessages(c.FUSEBOX_BINDING_NAMESPACE,(e=>this.#m(e))),await e.initializeDomain(c.FUSEBOX_BINDING_NAMESPACE),this.#o=!0,this.#u()}catch(e){this.dispatchEventToListeners("InitializationFailed",e.message)}}isInitialized(){return this.#o}getBridgeOrThrow(){if(null===this.#s)throw new Error("Failed to get bridge from ReactDevToolsModel: bridge was null");return this.#s}getStoreOrThrow(){if(null===this.#r)throw new Error("Failed to get store from ReactDevToolsModel: store was null");return this.#r}#m(e){if(e)for(const t of this.#i)t(e)}async#a(e){const t=this.#t;if(!t)throw new Error("Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null");return t.sendMessage(c.FUSEBOX_BINDING_NAMESPACE,e)}#l(){const e=this.#t;if(!e)throw new Error("ReactDevToolsModel failed to handle BackendExecutionContextCreated event: ReactDevToolsBindingsModel was null");e.isEnabled()?this.#u():this.ensureInitialized()}#u(){this.#s=n.createBridge(this.#e),this.#r=n.createStore(this.#s),this.dispatchEventToListeners("InitializationCompleted")}#d({data:e}){this.dispatchEventToListeners("InitializationFailed",e)}#c(){this.#s?.shutdown(),this.#s=null,this.#r=null,this.#i.clear(),this.dispatchEventToListeners("Destroyed")}}i.SDKModel.SDKModel.register(c,{capabilities:4,autostart:!1});var h=Object.freeze({__proto__:null,ReactDevToolsModel:c});const m={sendFeedback:"[FB-only] Send feedback"},u=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsViewBase.ts",m),g=e.i18n.getLocalizedString.bind(void 0,u);function p(e,t){const{sourceURL:i,line:n,column:l}=t||e;!async function(e,t,i){const n=s.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(e);if(n){const e=await r.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().normalizeUILocation(n.uiLocation(t,i));return void o.Revealer.reveal(e)}const l=r.ResourceUtils.resourceForURL(e);if(l)return void o.Revealer.reveal(l);const d=a.NetworkLog.NetworkLog.instance().requestForURL(e);if(!d)throw new Error("Could not find resource for "+e);o.Revealer.reveal(d)}(i,n-1,l-1)}class v extends t.View.SimpleView{#g;#p=null;constructor(e,t){super(t),this.#g=e,this.#v(),i.TargetManager.TargetManager.instance().observeModels(c,this)}wasShown(){super.wasShown(),this.registerCSSFiles([n.CSS])}modelAdded(e){this.#p=e,e.addEventListener("InitializationCompleted",this.#w,this),e.addEventListener("InitializationFailed",this.#E,this),e.addEventListener("Destroyed",this.#f,this),e.isInitialized()?this.#b():e.ensureInitialized()}modelRemoved(e){e.removeEventListener("InitializationCompleted",this.#w,this),e.removeEventListener("InitializationFailed",this.#E,this),e.removeEventListener("Destroyed",this.#f,this)}#w(){this.#b()}#E({data:e}){this.#D(e)}#f(){this.#v()}#b(){this.#C();const e=this.#p;if(null===e)throw new Error("Attempted to render React DevTools panel, but the model was null");const t=window.matchMedia("(prefers-color-scheme: dark)").matches;("components"===this.#g?n.initializeComponents:n.initializeProfiler)(this.contentElement,{bridge:e.getBridgeOrThrow(),store:e.getStoreOrThrow(),theme:t?"dark":"light",canViewElementSourceFunction:()=>!0,viewElementSourceFunction:p})}#v(){this.#C();const e=document.createElement("div");e.setAttribute("style","display: flex; flex: 1; justify-content: center; align-items: center");const t=document.createElement("span");t.classList.add("spinner"),e.appendChild(t),this.contentElement.appendChild(e)}#D(e){this.#C();const i=document.createElement("div");i.setAttribute("style","display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center");const n=document.createElement("div");n.setAttribute("style","font-size: 3rem"),n.innerHTML="❗";const o=document.createElement("p");if(o.setAttribute("style","user-select: all"),o.innerHTML=e,i.appendChild(n),i.appendChild(o),this.contentElement.appendChild(i),globalThis.FB_ONLY__reactNativeFeedbackLink){const e=globalThis.FB_ONLY__reactNativeFeedbackLink,n=t.UIUtils.createTextButton(g(m.sendFeedback),(()=>{l.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}),{className:"primary-button",jslogContext:"sendFeedback"});i.appendChild(n)}}#C(){this.contentElement.removeChildren()}}const w={title:"⚛️ Components (React DevTools)"},E=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsComponentsView.ts",w),f=e.i18n.getLocalizedString.bind(void 0,E);var b=Object.freeze({__proto__:null,ReactDevToolsComponentsViewImpl:class extends v{constructor(){super("components",f(w.title))}}});const D={title:"⚛️ Profiler (React DevTools)"},C=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsProfilerView.ts",D),I=e.i18n.getLocalizedString.bind(void 0,C);var z=Object.freeze({__proto__:null,ReactDevToolsProfilerViewImpl:class extends v{constructor(){super("profiler",I(D.title))}}});export{b as ReactDevToolsComponentsView,h as ReactDevToolsModel,z as ReactDevToolsProfilerView};

package/dist/third-party/front_end/panels/rn_welcome/rn_welcome.js

@@ -1,60 +1,60 @@
-import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/host/host.js";import*as o from"../../core/i18n/i18n.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../ui/lit-html/lit-html.js";const a=new CSSStyleSheet;a.replaceSync('.rn-welcome-panel{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;justify-content:center;padding:36px;background-color:var(--color-background-elevation-0);min-height:100%}@media (min-width: 1000px){.rn-welcome-panel{flex-direction:row;align-items:center;justify-content:stretch;height:100%;padding:0}}.rn-welcome-hero{display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;align-items:center;justify-content:center;padding:16px;text-align:center}@media (min-width: 1000px){.rn-welcome-hero{margin-left:24px}}.rn-welcome-heading{display:flex;align-items:center;margin-bottom:16px}.rn-welcome-icon{width:30px;height:30px;border-radius:4px;margin-right:12px}.rn-welcome-title{font-size:20px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-title-accessory{margin-left:12px;padding:4px 8px;border-radius:4px;background-color:var(--color-green);font-size:12px;color:var(--color-on-primary)}.rn-welcome-title-accessory-purple{background-color:var(--color-purple-bright)}.rn-welcome-tagline{margin-bottom:24px;font-size:1rem;line-height:1.3;color:var(--color-text-secondary)}.rn-welcome-links{display:flex;align-items:center}.rn-welcome-links > .devtools-link{position:relative;margin:0 16px;font-size:14px}.rn-welcome-links > .devtools-link:not(:last-child)::after{content:"";position:absolute;right:-16px;height:16px;border-right:1px solid var(--color-details-hairline)}.rn-welcome-version{position:fixed;top:8px;right:8px;margin-top:24px;padding:4px 12px;border-radius:6px;background-color:var(--color-background-hover-overlay);color:var(--color-text-secondary);font-size:11px}.rn-welcome-docsfeed{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;max-width:700px;margin:0 auto;padding:24px}@media (min-width: 1000px){.rn-welcome-docsfeed{flex-shrink:1;width:45%;max-height:100%;margin:0;padding:20px 24px;padding-right:80px;overflow:auto}}.rn-welcome-h2{flex-shrink:0;font-size:16px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-docsfeed-item{display:flex;flex-shrink:0;align-items:center;margin-bottom:8px;padding:8px;padding-right:16px;border:1px solid var(--color-details-hairline);border-radius:4px;background-color:var(--color-background);text-align:left;font-size:14px;cursor:pointer}.rn-welcome-docsfeed-item:hover{background-color:var(--color-background-elevation-0)}.rn-welcome-docsfeed-item:focus{outline:solid var(--color-button-outline-focus)}.rn-welcome-docsfeed-item p{margin:0;margin-bottom:4px;text-decoration:none}.rn-welcome-docsfeed-item :not(.devtools-link){color:var(--color-text-secondary)}.rn-welcome-image{aspect-ratio:calc(16 / 9);height:64px;margin-right:16px;border-radius:2px;background-color:var(--color-gray-100);background-position:center;background-size:cover}\n/*# sourceURL=rnWelcome.css */\n');const r={betaLabel:"Beta",techPreviewLabel:"Tech Preview",welcomeMessage:"Welcome to debugging in React Native",docsLabel:"Debugging docs",whatsNewLabel:"What's new",docsDebuggingBasics:"Debugging Basics",docsDebuggingBasicsDetail:"Overview of debugging tools in React Native",docsReactDevTools:"React DevTools",docsReactDevToolsDetail:"Debug React components with React DevTools",docsRNDevTools:"React Native DevTools",docsRNDevToolsDetail:"Explore features available in React Native DevTools",docsNativeDebugging:"Native Debugging",docsNativeDebuggingDetail:"Find out more about native debugging tools"},{render:s,html:l}=n,c=o.i18n.registerUIStrings("panels/rn_welcome/RNWelcome.ts",r),d=o.i18n.getLocalizedString.bind(void 0,c);let g;class p extends e.Widget.VBox{options;#e;static instance(e){return g||(g=new p(e)),g}constructor(e){super(!0,!0),this.options=e,i.TargetManager.TargetManager.instance().observeModels(i.ReactNativeApplicationModel.ReactNativeApplicationModel,this)}wasShown(){super.wasShown(),this.registerCSSFiles([a]),this.render(),e.InspectorView.InspectorView.instance().showDrawer({focus:!0,hasTargetDrawer:!1})}modelAdded(e){e.ensureEnabled(),e.addEventListener("MetadataUpdated",this.#t,this),this.#e=e.metadataCached?.reactNativeVersion}modelRemoved(e){e.removeEventListener("MetadataUpdated",this.#t,this)}#t(e){this.#e=e.data.reactNativeVersion,this.isShowing()&&this.render()}_handleLinkPress(e){t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}render(){const{debuggerBrandName:e,showBetaLabel:t=!1,showTechPreviewLabel:o=!1,showDocs:i=!1}=this.options,n=new URL("../../Images/react_native/welcomeIcon.png",import.meta.url).toString(),a=new URL("../../Images/react_native/learn-debugging-basics.jpg",import.meta.url).toString(),c=new URL("../../Images/react_native/learn-react-devtools.jpg",import.meta.url).toString(),g=new URL("../../Images/react_native/learn-native-debugging.jpg",import.meta.url).toString();s(l`
+import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/host/host.js";import*as o from"../../core/i18n/i18n.js";import*as i from"../../core/sdk/sdk.js";import*as n from"../../ui/lit-html/lit-html.js";const r=new CSSStyleSheet;r.replaceSync('.rn-welcome-panel{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;justify-content:center;padding:36px;background-color:var(--color-background-elevation-0);min-height:100%}@media (min-width: 1000px){.rn-welcome-panel{flex-direction:row;align-items:center;justify-content:stretch;height:100%;padding:0}}.rn-welcome-hero{display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;align-items:center;justify-content:center;padding:16px;text-align:center}@media (min-width: 1000px){.rn-welcome-hero{margin-left:24px}}.rn-welcome-heading{display:flex;align-items:center;margin-bottom:16px}.rn-welcome-icon{width:30px;height:30px;border-radius:4px;margin-right:12px}.rn-welcome-title{font-size:20px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-title-accessory{margin-left:12px;padding:4px 8px;border-radius:4px;background-color:var(--color-green);font-size:12px;color:var(--color-on-primary)}.rn-welcome-title-accessory-purple{background-color:var(--color-purple-bright)}.rn-welcome-tagline{margin-bottom:24px;font-size:1rem;line-height:1.3;color:var(--color-text-secondary)}.rn-welcome-links{display:flex;align-items:center}.rn-welcome-links > .devtools-link{position:relative;margin:0 16px;font-size:14px}.rn-welcome-links > .devtools-link:not(:last-child)::after{content:"";position:absolute;right:-16px;height:16px;border-right:1px solid var(--color-details-hairline)}.rn-welcome-version{position:fixed;top:8px;right:8px;margin-top:24px;padding:4px 12px;border-radius:6px;background-color:var(--color-background-hover-overlay);color:var(--color-text-secondary);font-size:11px}.rn-welcome-docsfeed{display:flex;flex-direction:column;flex-shrink:0;align-items:stretch;max-width:700px;margin:0 auto;padding:24px}@media (min-width: 1000px){.rn-welcome-docsfeed{flex-shrink:1;width:45%;max-height:100%;margin:0;padding:20px 24px;padding-right:80px;overflow:auto}}.rn-welcome-h2{flex-shrink:0;font-size:16px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-docsfeed-item{display:flex;flex-shrink:0;align-items:center;margin-bottom:8px;padding:8px;padding-right:16px;border:1px solid var(--color-details-hairline);border-radius:4px;background-color:var(--color-background);text-align:left;font-size:14px;cursor:pointer}.rn-welcome-docsfeed-item:hover{background-color:var(--color-background-elevation-0)}.rn-welcome-docsfeed-item:focus{outline:solid var(--color-button-outline-focus)}.rn-welcome-docsfeed-item p{margin:0;margin-bottom:4px;text-decoration:none}.rn-welcome-docsfeed-item :not(.devtools-link){color:var(--color-text-secondary)}.rn-welcome-image{aspect-ratio:calc(16 / 9);height:64px;margin-right:16px;border-radius:2px;background-color:var(--color-gray-100);background-position:center;background-size:cover}\n/*# sourceURL=rnWelcome.css */\n');const a={betaLabel:"Beta",techPreviewLabel:"Tech Preview",welcomeMessage:"Welcome to debugging in React Native",docsLabel:"Debugging docs",whatsNewLabel:"What's new",docsDebuggingBasics:"Debugging Basics",docsDebuggingBasicsDetail:"Overview of debugging tools in React Native",docsReactDevTools:"React DevTools",docsReactDevToolsDetail:"Debug React components with React DevTools",docsNativeDebugging:"Native Debugging",docsNativeDebuggingDetail:"Find out more about native debugging tools"},{render:s,html:l}=n,c=o.i18n.registerUIStrings("panels/rn_welcome/RNWelcome.ts",a),d=o.i18n.getLocalizedString.bind(void 0,c);let g;class p extends e.Widget.VBox{options;#e;static instance(e){return g||(g=new p(e)),g}constructor(e){super(!0,!0),this.options=e,i.TargetManager.TargetManager.instance().observeModels(i.ReactNativeApplicationModel.ReactNativeApplicationModel,this)}wasShown(){super.wasShown(),this.registerCSSFiles([r]),this.render(),e.InspectorView.InspectorView.instance().showDrawer({focus:!0,hasTargetDrawer:!1})}modelAdded(e){e.ensureEnabled(),e.addEventListener("MetadataUpdated",this.#t,this),this.#e=e.metadataCached?.reactNativeVersion}modelRemoved(e){e.removeEventListener("MetadataUpdated",this.#t,this)}#t(e){this.#e=e.data.reactNativeVersion,this.isShowing()&&this.render()}#o(e){t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}render(){const{debuggerBrandName:e,showBetaLabel:t=!1,showTechPreviewLabel:o=!1,showDocs:i=!1}=this.options,n=new URL("../../Images/react_native/welcomeIcon.png",import.meta.url).toString(),r=new URL("../../Images/react_native/learn-debugging-basics.jpg",import.meta.url).toString(),c=new URL("../../Images/react_native/learn-react-devtools.jpg",import.meta.url).toString(),g=new URL("../../Images/react_native/learn-native-debugging.jpg",import.meta.url).toString();s(l`
       <div class="rn-welcome-panel">
         <header class="rn-welcome-hero">
           <div class="rn-welcome-heading">
-            <img class="rn-welcome-icon" src="${n}" role="presentation" />
+            <img class="rn-welcome-icon" src=${n} role="presentation" />
             <h1 class="rn-welcome-title">
               ${e()}
             </h1>
             ${t?l`
               <div class="rn-welcome-title-accessory">
-                ${d(r.betaLabel)}
+                ${d(a.betaLabel)}
               </div>
             `:null}
             ${o?l`
               <div class="rn-welcome-title-accessory rn-welcome-title-accessory-purple">
-                ${d(r.techPreviewLabel)}
+                ${d(a.techPreviewLabel)}
               </div>
             `:null}
           </div>
           <div class="rn-welcome-tagline">
-            ${d(r.welcomeMessage)}
+            ${d(a.welcomeMessage)}
           </div>
           <div class="rn-welcome-links">
             <x-link class="devtools-link" href="https://reactnative.dev/docs/debugging">
-              ${d(r.docsLabel)}
+              ${d(a.docsLabel)}
             </x-link>
             <x-link class="devtools-link" href="https://reactnative.dev/blog">
-              ${d(r.whatsNewLabel)}
+              ${d(a.whatsNewLabel)}
             </x-link>
           </div>
-          ${null!=this.#e?l`
+          ${null!==this.#e&&void 0!==this.#e?l`
               <p class="rn-welcome-version">React Native: <code>${this.#e}</code></p>
             `:null}
         </header>
         ${i?l`
           <section class="rn-welcome-docsfeed">
             <h2 class="rn-welcome-h2">Learn</h2>
-            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging")} title="${d(r.docsDebuggingBasics)}">
-              <div class="rn-welcome-image" style="background-image: url('${a}')"></div>
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#o.bind(this,"https://reactnative.dev/docs/debugging")} title=${d(a.docsDebuggingBasics)}>
+              <div class="rn-welcome-image" style="background-image: url('${r}')"></div>
               <div>
-                <p class="devtools-link">${d(r.docsDebuggingBasics)}</p>
-                <p>${d(r.docsDebuggingBasicsDetail)}</p>
+                <p class="devtools-link">${d(a.docsDebuggingBasics)}</p>
+                <p>${d(a.docsDebuggingBasicsDetail)}</p>
               </div>
             </button>
             <!-- TODO(huntie): Replace this item when React Native DevTools docs are complete -->
-            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging/react-devtools")} title="${d(r.docsReactDevTools)}">
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#o.bind(this,"https://reactnative.dev/docs/debugging/react-devtools")} title=${d(a.docsReactDevTools)}>
               <div class="rn-welcome-image" style="background-image: url('${c}')"></div>
               <div>
-                <p class="devtools-link">${d(r.docsReactDevTools)}</p>
-                <p>${d(r.docsReactDevToolsDetail)}</p>
+                <p class="devtools-link">${d(a.docsReactDevTools)}</p>
+                <p>${d(a.docsReactDevToolsDetail)}</p>
               </div>
             </button>
-            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging/debugging-native-code")} title="${d(r.docsNativeDebugging)}">
+            <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this.#o.bind(this,"https://reactnative.dev/docs/debugging/debugging-native-code")} title=${d(a.docsNativeDebugging)}>
               <div class="rn-welcome-image" style="background-image: url('${g}')"></div>
               <div>
-                <p class="devtools-link">${d(r.docsNativeDebugging)}</p>
-                <p>${d(r.docsNativeDebuggingDetail)}</p>
+                <p class="devtools-link">${d(a.docsNativeDebugging)}</p>
+                <p>${d(a.docsNativeDebuggingDetail)}</p>
               </div>
             </button>
           </section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native/debugger-frontend",
-  "version": "0.76.0-rc.0",
+  "version": "0.77.0-nightly-20240911-a05f9c677",
   "description": "Debugger frontend for React Native based on Chrome DevTools",
   "keywords": [
     "react-native",