Update debugger-frontend from b453d8bd...bf5ec69 (#44675)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44675

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57782487

fbshipit-source-id: 449180c0fcbb8ef043716bc954f149aec6b2a263
This commit is contained in:
Alex Hunt
2024-05-26 10:05:58 -07:00
committed by Facebook GitHub Bot
parent 840c31c3a4
commit e363eeb53e
10 changed files with 60 additions and 31 deletions
+2 -2
View File
@@ -1,5 +1,5 @@
@generated SignedSource<<bd3fa1b63675a880f9768722433b0513>>
Git revision: b453d8bdf336e7730efc4565a27bebafac36afbb
@generated SignedSource<<e2d379d34de573e6494f775e2810cb60>>
Git revision: bf5ec692e1e8aca4b59ed154b9b03f44ddc6496e
Built with --nohooks: false
Is local checkout: false
Remote URL: https://github.com/facebookexperimental/rn-chrome-devtools-frontend
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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 s from"../../third_party/react-devtools/react-devtools.js";import*as n from"../../models/react_native/react_native.js";class o extends i.SDKModel.SDKModel{static FUSEBOX_BINDING_NAMESPACE="react-devtools";rdtModel;constructor(e){super(e);const t=e.model(n.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel);if(!t)throw new Error("Failed to construct ReactDevToolsModel: ReactDevToolsBindingsModel was null");this.rdtModel=t,t.addEventListener("Initialized",this.initialize,this)}initialize(){const e=this.rdtModel;if(!e)throw new Error("Failed to initialize ReactDevToolsModel: ReactDevToolsBindingsModel was null");e.subscribeToDomainMessages(o.FUSEBOX_BINDING_NAMESPACE,(e=>this.onMessage(e))),e.initializeDomain(o.FUSEBOX_BINDING_NAMESPACE).then((()=>this.onInitialization()))}onInitialization(){this.dispatchEventToListeners("Initialized")}async sendMessage(e){const t=this.rdtModel;if(!t)throw new Error("Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null");await t.sendMessage(o.FUSEBOX_BINDING_NAMESPACE,e)}onMessage(e){this.dispatchEventToListeners("MessageReceived",e)}}i.SDKModel.SDKModel.register(o,{capabilities:4,autostart:!1});var a=Object.freeze({__proto__:null,ReactDevToolsModel:o});const r={title:"React DevTools"},d=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsView.ts",r),l=e.i18n.getLocalizedString.bind(void 0,d),c="main";class h extends t.View.SimpleView{wall;bridge;store;listeners=new Set;constructor(){super(l(r.title)),this.wall={listen:e=>(this.listeners.add(e),()=>{this.listeners.delete(e)}),send:(e,t)=>this.sendMessage(e,t)},this.bridge=s.createBridge(this.wall),this.store=s.createStore(this.bridge),window.addEventListener("beforeunload",(()=>this.bridge.shutdown())),i.TargetManager.TargetManager.instance().addModelListener(o,"MessageReceived",this.onMessage,this),i.TargetManager.TargetManager.instance().addModelListener(o,"Initialized",this.initialize,this),i.TargetManager.TargetManager.instance().addModelListener(i.RuntimeModel.RuntimeModel,i.RuntimeModel.Events.ExecutionContextDestroyed,this.onExecutionContextDestroyed,this),i.TargetManager.TargetManager.instance().addModelListener(i.RuntimeModel.RuntimeModel,i.RuntimeModel.Events.ExecutionContextCreated,this.onExecutionContextCreated,this),this.renderLoader()}renderLoader(){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)}clearLoader(){this.contentElement.removeChildren()}initialize(){this.clearLoader();const e=window.matchMedia("(prefers-color-scheme: dark)").matches;s.initialize(this.contentElement,{bridge:this.bridge,store:this.store,theme:e?"dark":"light"})}wasShown(){super.wasShown(),this.registerCSSFiles([s.CSS])}onMessage(e){if(e.data)for(const t of this.listeners)t(e.data)}sendMessage(e,t){for(const s of i.TargetManager.TargetManager.instance().models(o,{scoped:!0}))s.sendMessage({event:e,payload:t})}onExecutionContextDestroyed(e){e.data.name===c&&(this.contentElement.removeChildren(),this.bridge.shutdown(),this.listeners.clear(),this.renderLoader())}onExecutionContextCreated(e){e.data.name===c&&(this.bridge=s.createBridge(this.wall),this.store=s.createStore(this.bridge),this.initialize())}}var g=Object.freeze({__proto__:null,ReactDevToolsViewImpl:h});export{a as ReactDevToolsModel,g as ReactDevToolsView};
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 s from"../../third_party/react-devtools/react-devtools.js";import*as o from"../../core/common/common.js";import*as n from"../../models/workspace/workspace.js";import*as r from"../../models/react_native/react_native.js";import*as a from"../../models/bindings/bindings.js";import*as d from"../../models/logs/logs.js";class l extends i.SDKModel.SDKModel{static FUSEBOX_BINDING_NAMESPACE="react-devtools";rdtModel;constructor(e){super(e);const t=e.model(r.ReactDevToolsBindingsModel.ReactDevToolsBindingsModel);if(!t)throw new Error("Failed to construct ReactDevToolsModel: ReactDevToolsBindingsModel was null");this.rdtModel=t,t.addEventListener("Initialized",this.initialize,this)}initialize(){const e=this.rdtModel;if(!e)throw new Error("Failed to initialize ReactDevToolsModel: ReactDevToolsBindingsModel was null");e.subscribeToDomainMessages(l.FUSEBOX_BINDING_NAMESPACE,(e=>this.onMessage(e))),e.initializeDomain(l.FUSEBOX_BINDING_NAMESPACE).then((()=>this.onInitialization()))}onInitialization(){this.dispatchEventToListeners("Initialized")}async sendMessage(e){const t=this.rdtModel;if(!t)throw new Error("Failed to send message from ReactDevToolsModel: ReactDevToolsBindingsModel was null");await t.sendMessage(l.FUSEBOX_BINDING_NAMESPACE,e)}onMessage(e){this.dispatchEventToListeners("MessageReceived",e)}}i.SDKModel.SDKModel.register(l,{capabilities:4,autostart:!1});var c=Object.freeze({__proto__:null,ReactDevToolsModel:l});const g={title:"React DevTools"},h=e.i18n.registerUIStrings("panels/react_devtools/ReactDevToolsView.ts",g),m=e.i18n.getLocalizedString.bind(void 0,h),M="main";function u(e,t){const{sourceURL:i,line:s,column:r}=t||e;!async function(e,t,i){const s=n.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(e);if(s){const e=await a.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().normalizeUILocation(s.uiLocation(t,i));return void o.Revealer.reveal(e)}const r=a.ResourceUtils.resourceForURL(e);if(r)return void o.Revealer.reveal(r);const l=d.NetworkLog.NetworkLog.instance().requestForURL(e);if(!l)throw new Error("Could not find resource for "+e);o.Revealer.reveal(l)}(i,s-1,r-1)}class v extends t.View.SimpleView{wall;bridge;store;listeners=new Set;constructor(){super(m(g.title)),this.wall={listen:e=>(this.listeners.add(e),()=>{this.listeners.delete(e)}),send:(e,t)=>this.sendMessage(e,t)},this.bridge=s.createBridge(this.wall),this.store=s.createStore(this.bridge),window.addEventListener("beforeunload",(()=>this.bridge.shutdown())),i.TargetManager.TargetManager.instance().addModelListener(l,"MessageReceived",this.onMessage,this),i.TargetManager.TargetManager.instance().addModelListener(l,"Initialized",this.initialize,this),i.TargetManager.TargetManager.instance().addModelListener(i.RuntimeModel.RuntimeModel,i.RuntimeModel.Events.ExecutionContextDestroyed,this.onExecutionContextDestroyed,this),i.TargetManager.TargetManager.instance().addModelListener(i.RuntimeModel.RuntimeModel,i.RuntimeModel.Events.ExecutionContextCreated,this.onExecutionContextCreated,this),this.renderLoader()}renderLoader(){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)}clearLoader(){this.contentElement.removeChildren()}initialize(){this.clearLoader();const e=window.matchMedia("(prefers-color-scheme: dark)").matches;s.initialize(this.contentElement,{bridge:this.bridge,store:this.store,theme:e?"dark":"light",canViewElementSourceFunction:()=>!0,viewElementSourceFunction:u})}wasShown(){super.wasShown(),this.registerCSSFiles([s.CSS])}onMessage(e){if(e.data)for(const t of this.listeners)t(e.data)}sendMessage(e,t){for(const s of i.TargetManager.TargetManager.instance().models(l,{scoped:!0}))s.sendMessage({event:e,payload:t})}onExecutionContextDestroyed(e){e.data.name===M&&(this.contentElement.removeChildren(),this.bridge.shutdown(),this.listeners.clear(),this.renderLoader())}onExecutionContextCreated(e){e.data.name===M&&(this.bridge=s.createBridge(this.wall),this.store=s.createStore(this.bridge),this.initialize())}}var p=Object.freeze({__proto__:null,ReactDevToolsViewImpl:v});export{c as ReactDevToolsModel,p as ReactDevToolsView};
@@ -1 +1 @@
import*as e from"../../core/i18n/i18n.js";import"../../core/root/root.js";import*as n from"../../ui/legacy/legacy.js";const o={rnWelcome:"⚛️ Welcome",showRnWelcome:"Show React Native Welcome panel",debuggerBrandName:"React Native JS Inspector"},r=e.i18n.registerUIStrings("panels/rn_welcome/rn_welcome-legacy-meta.ts",o),a=e.i18n.getLazilyComputedLocalizedString.bind(void 0,r);let i;n.ViewManager.registerViewExtension({location:"panel",id:"rn-welcome",title:a(o.rnWelcome),commandPrompt:a(o.showRnWelcome),order:-10,persistence:"permanent",loadView:async()=>(await async function(){return i||(i=await import("./rn_welcome.js")),i}()).RNWelcome.RNWelcomeImpl.instance({debuggerBrandName:a(o.debuggerBrandName)}),experiment:"react-native-specific-ui"});
import*as e from"../../core/i18n/i18n.js";import"../../core/root/root.js";import*as n from"../../ui/legacy/legacy.js";const o={rnWelcome:"⚛️ Welcome",showRnWelcome:"Show React Native Welcome panel",debuggerBrandName:"React Native JS Inspector (Legacy)"},r=e.i18n.registerUIStrings("panels/rn_welcome/rn_welcome-legacy-meta.ts",o),a=e.i18n.getLazilyComputedLocalizedString.bind(void 0,r);let i;n.ViewManager.registerViewExtension({location:"panel",id:"rn-welcome",title:a(o.rnWelcome),commandPrompt:a(o.showRnWelcome),order:-10,persistence:"permanent",loadView:async()=>(await async function(){return i||(i=await import("./rn_welcome.js")),i}()).RNWelcome.RNWelcomeImpl.instance({debuggerBrandName:a(o.debuggerBrandName)}),experiment:"react-native-specific-ui"});
@@ -1 +1 @@
import*as e from"../../core/i18n/i18n.js";import*as n from"../../core/root/root.js";import*as o from"../../ui/legacy/legacy.js";const a={rnWelcome:"Welcome",showRnWelcome:"Show React Native Welcome panel",debuggerBrandName:"React Native DevTools",debuggerBrandNameInternal:"React Native DevTools (Fusebox ⚡)"},r=e.i18n.registerUIStrings("panels/rn_welcome/rn_welcome-meta.ts",a),t=e.i18n.getLazilyComputedLocalizedString.bind(void 0,r);let i;o.ViewManager.registerViewExtension({location:"panel",id:"rn-welcome",title:t(a.rnWelcome),commandPrompt:t(a.showRnWelcome),order:-10,persistence:"permanent",loadView:async()=>(await async function(){return i||(i=await import("./rn_welcome.js")),i}()).RNWelcome.RNWelcomeImpl.instance({debuggerBrandName:t(Boolean(n.Runtime.Runtime.queryParam(n.Runtime.ConditionName.REACT_NATIVE_USE_INTERNAL_BRANDING))?a.debuggerBrandNameInternal:a.debuggerBrandName)}),experiment:"react-native-specific-ui"});
import*as e from"../../core/i18n/i18n.js";import*as n from"../../core/root/root.js";import*as a from"../../ui/legacy/legacy.js";const o={rnWelcome:"Welcome",showRnWelcome:"Show React Native Welcome panel",debuggerBrandName:"React Native DevTools",debuggerBrandNameInternal:"React Native DevTools (Fusebox ⚡)"},r=e.i18n.registerUIStrings("panels/rn_welcome/rn_welcome-meta.ts",o),t=e.i18n.getLazilyComputedLocalizedString.bind(void 0,r);let i;a.ViewManager.registerViewExtension({location:"panel",id:"rn-welcome",title:t(o.rnWelcome),commandPrompt:t(o.showRnWelcome),order:-10,persistence:"permanent",loadView:async()=>(await async function(){return i||(i=await import("./rn_welcome.js")),i}()).RNWelcome.RNWelcomeImpl.instance({debuggerBrandName:t(Boolean(n.Runtime.Runtime.queryParam(n.Runtime.ConditionName.REACT_NATIVE_USE_INTERNAL_BRANDING))?o.debuggerBrandNameInternal:o.debuggerBrandName),showBetaLabel:!0}),experiment:"react-native-specific-ui"});
@@ -1,24 +1,53 @@
import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/i18n/i18n.js";import*as o from"../../ui/lit-html/lit-html.js";const i=new CSSStyleSheet;i.replaceSync('.rn-welcome-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:16px;text-align:center;background-color:var(--color-background-elevation-0)}.rn-welcome-header{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;color:var(--color-text-primary)}.rn-welcome-title-accessory{margin-left:12px;padding:4px 8px;border-radius:4px;background-color:var(--color-purple-bright);font-size:12px;color:var(--color-on-primary)}.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)}\n/*# sourceURL=rnWelcome.css */\n');const r={techPreviewLabel:"Technology Preview",welcomeMessage:"Welcome to debugging in React Native",docsLabel:"Debugging docs",whatsNewLabel:"What's new"},{render:n,html:l}=o,s=t.i18n.registerUIStrings("panels/rn_welcome/RNWelcome.ts",r),c=t.i18n.getLocalizedString.bind(void 0,s);let a;class d extends e.Widget.VBox{options;static instance(e){return a||(a=new d(e)),a}constructor(e){super(!0,!0),this.options=e}wasShown(){super.wasShown(),this.registerCSSFiles([i]),this.render(),e.InspectorView.InspectorView.instance().showDrawer({focus:!0,hasTargetDrawer:!1})}render(){const{debuggerBrandName:e}=this.options,t=new URL("../../Images/react_native/welcomeIcon.png",import.meta.url).toString();n(l`
import*as e from"../../ui/legacy/legacy.js";import*as o from"../../core/host/host.js";import*as t from"../../core/i18n/i18n.js";import*as i from"../../ui/lit-html/lit-html.js";const n=new CSSStyleSheet;n.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:24px 60px}}.rn-welcome-hero{display:flex;flex-direction:column;flex-shrink:0;align-items:center;padding:16px;text-align:center}@media (min-width: 1000px){.rn-welcome-hero{width:55%}}.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-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-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;margin:0}}.rn-welcome-h2{font-size:16px;font-weight:normal;color:var(--color-text-primary)}.rn-welcome-docsfeed-item{display:flex;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 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 s={techPreviewLabel:"Beta",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"},{render:l,html:r}=i,a=t.i18n.registerUIStrings("panels/rn_welcome/RNWelcome.ts",s),c=t.i18n.getLocalizedString.bind(void 0,a);let d;class g extends e.Widget.VBox{options;static instance(e){return d||(d=new g(e)),d}constructor(e){super(!0,!0),this.options=e}wasShown(){super.wasShown(),this.registerCSSFiles([n]),this.render(),e.InspectorView.InspectorView.instance().showDrawer({focus:!0,hasTargetDrawer:!1})}_handleLinkPress(e){o.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(e)}render(){const{debuggerBrandName:e,showBetaLabel:o=!1}=this.options,t=new URL("../../Images/react_native/welcomeIcon.png",import.meta.url).toString();l(r`
<div class="rn-welcome-panel">
<div class="rn-welcome-header">
<img class="rn-welcome-icon" src=${t} role="presentation" />
<div class="rn-welcome-title">
${e()}
<header class="rn-welcome-hero">
<div class="rn-welcome-heading">
<img class="rn-welcome-icon" src="${t}" role="presentation" />
<h1 class="rn-welcome-title">
${e()}
</h1>
${o?r`
<div class="rn-welcome-title-accessory">
${c(s.techPreviewLabel)}
</div>
`:null}
</div>
<div class="rn-welcome-title-accessory">
${c(r.techPreviewLabel)}
<div class="rn-welcome-tagline">
${c(s.welcomeMessage)}
</div>
</div>
<div class="rn-welcome-tagline">
${c(r.welcomeMessage)}
</div>
<div class="rn-welcome-links">
<x-link class="devtools-link" href="https://reactnative.dev/docs/debugging">
${c(r.docsLabel)}
</x-link>
<x-link class="devtools-link" href="https://reactnative.dev/blog">
${c(r.whatsNewLabel)}
</x-link>
</div>
<div class="rn-welcome-links">
<x-link class="devtools-link" href="https://reactnative.dev/docs/debugging">
${c(s.docsLabel)}
</x-link>
<x-link class="devtools-link" href="https://reactnative.dev/blog">
${c(s.whatsNewLabel)}
</x-link>
</div>
</header>
<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="${c(s.docsDebuggingBasics)}">
<div class="rn-welcome-image" style="background-image: url('https://reactnative.dev/assets/images/debugging-dev-menu-2453a57e031a9da86b2ed42f16ffe82a.jpg')"></div>
<div>
<p class="devtools-link">${c(s.docsDebuggingBasics)}</p>
<p>${c(s.docsDebuggingBasicsDetail)}</p>
</div>
</button>
<button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging/react-devtools")} title="${c(s.docsReactDevTools)}">
<div class="rn-welcome-image" style="background-image: url('https://reactnative.dev/assets/images/debugging-react-devtools-detail-914f08a97163dd51ebe732fd8ae4ea3c.jpg')"></div>
<div>
<p class="devtools-link">${c(s.docsReactDevTools)}</p>
<p>${c(s.docsReactDevToolsDetail)}</p>
</div>
</button>
<!-- TODO(huntie): Re-enable this item when docs are complete, replacing React DevTools guide -->
<!-- <button class="rn-welcome-docsfeed-item" type="button" role="link" @click=${this._handleLinkPress.bind(this,"https://reactnative.dev/docs/debugging")} title="${c(s.docsRNDevTools)}">
<div class="rn-welcome-image" style="background-image: url('https://reactnative.dev/assets/images/debugging-react-devtools-detail-914f08a97163dd51ebe732fd8ae4ea3c.jpg')"></div>
<div>
<p class="devtools-link">${c(s.docsRNDevTools)}</p>
<p>${c(s.docsRNDevToolsDetail)}</p>
</div>
</button> -->
</section>
</div>
`,this.contentElement,{host:this})}}var m=Object.freeze({__proto__:null,RNWelcomeImpl:d});export{m as RNWelcome};
`,this.contentElement,{host:this})}}var m=Object.freeze({__proto__:null,RNWelcomeImpl:g});export{m as RNWelcome};
File diff suppressed because one or more lines are too long