@react-native/debugger-frontend/dist/third-party/front_end/entrypoints/inspector_main/inspector_main.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../core/common/common.js";import*as t from"../../core/host/host.js";import*as a from"../../core/i18n/i18n.js";import*as s from"../../ui/legacy/legacy.js";import*as n from"../../ui/visual_logging/visual_logging.js";import*as r from"../../core/root/root.js";import*as o from"../../core/sdk/sdk.js";import*as i from"../../panels/mobile_throttling/mobile_throttling.js";import*as d from"../../panels/security/security.js";import*as l from"../../ui/legacy/components/utils/utils.js";import*as c from"../../core/platform/platform.js";import*as g from"../../models/bindings/bindings.js";var h={cssText:`:host{padding:12px}dt-checkbox{margin:0 0 10px;flex:none}.panel-section-separator{height:1px;margin-bottom:10px;background:var(--sys-color-divider);flex:none}.panel-section-separator:last-child{background:transparent}.chrome-select-label{margin-bottom:16px}\n/*# sourceURL=${import.meta.resolve("./renderingOptions.css")} */\n`};const u={paintFlashing:"Paint flashing",highlightsAreasOfThePageGreen:"Highlights areas of the page (green) that need to be repainted. May not be suitable for people prone to photosensitive epilepsy.",layoutShiftRegions:"Layout shift regions",highlightsAreasOfThePageBlueThat:"Highlights areas of the page (blue) that were shifted. May not be suitable for people prone to photosensitive epilepsy.",layerBorders:"Layer borders",showsLayerBordersOrangeoliveAnd:"Shows layer borders (orange/olive) and tiles (cyan).",frameRenderingStats:"Frame Rendering Stats",plotsFrameThroughputDropped:"Plots frame throughput, dropped frames distribution, and GPU memory.",scrollingPerformanceIssues:"Scrolling performance issues",highlightsElementsTealThatCan:"Highlights elements (teal) that can slow down scrolling, including touch & wheel event handlers and other main-thread scrolling situations.",highlightAdFrames:"Highlight ad frames",highlightsFramesRedDetectedToBe:"Highlights frames (red) detected to be ads.",disableLocalFonts:"Disable local fonts",disablesLocalSourcesInFontface:"Disables `local()` sources in `@font-face` rules. Requires a page reload to apply.",emulateAFocusedPage:"Emulate a focused page",emulatesAFocusedPage:"Keep page focused. Commonly used for debugging disappearing elements.",emulateAutoDarkMode:"Enable automatic dark mode",emulatesAutoDarkMode:"Enables automatic dark mode and sets `prefers-color-scheme` to `dark`.",forcesMediaTypeForTestingPrint:"Forces media type for testing print and screen styles",forcesCssPreferscolorschemeMedia:"Forces CSS `prefers-color-scheme` media feature",forcesCssPrefersreducedmotion:"Forces CSS `prefers-reduced-motion` media feature",forcesCssPreferscontrastMedia:"Forces CSS `prefers-contrast` media feature",forcesCssPrefersreduceddataMedia:"Forces CSS `prefers-reduced-data` media feature",forcesCssPrefersreducedtransparencyMedia:"Forces CSS `prefers-reduced-transparency` media feature",forcesCssColorgamutMediaFeature:"Forces CSS `color-gamut` media feature",forcesVisionDeficiencyEmulation:"Forces vision deficiency emulation",disableAvifImageFormat:"Disable `AVIF` image format",requiresAPageReloadToApplyAnd:"Requires a page reload to apply and disables caching for image requests.",disableWebpImageFormat:"Disable `WebP` image format",forcesCssForcedColors:"Forces CSS forced-colors media feature"},m=a.i18n.registerUIStrings("entrypoints/inspector_main/RenderingOptions.ts",u),p=a.i18n.getLocalizedString.bind(void 0,m);class f extends s.Widget.VBox{constructor(){super(!0),this.registerRequiredCSS(h),this.element.setAttribute("jslog",`${n.panel("rendering").track({resize:!0})}`),this.#e(p(u.paintFlashing),p(u.highlightsAreasOfThePageGreen),e.Settings.Settings.instance().moduleSetting("show-paint-rects")),this.#e(p(u.layoutShiftRegions),p(u.highlightsAreasOfThePageBlueThat),e.Settings.Settings.instance().moduleSetting("show-layout-shift-regions")),this.#e(p(u.layerBorders),p(u.showsLayerBordersOrangeoliveAnd),e.Settings.Settings.instance().moduleSetting("show-debug-borders")),this.#e(p(u.frameRenderingStats),p(u.plotsFrameThroughputDropped),e.Settings.Settings.instance().moduleSetting("show-fps-counter")),this.#e(p(u.scrollingPerformanceIssues),p(u.highlightsElementsTealThatCan),e.Settings.Settings.instance().moduleSetting("show-scroll-bottleneck-rects")),this.#e(p(u.highlightAdFrames),p(u.highlightsFramesRedDetectedToBe),e.Settings.Settings.instance().moduleSetting("show-ad-highlights")),this.#e(p(u.disableLocalFonts),p(u.disablesLocalSourcesInFontface),e.Settings.Settings.instance().moduleSetting("local-fonts-disabled")),this.#e(p(u.emulateAFocusedPage),p(u.emulatesAFocusedPage),e.Settings.Settings.instance().moduleSetting("emulate-page-focus"),{toggle:t.UserMetrics.Action.ToggleEmulateFocusedPageFromRenderingTab}),this.#e(p(u.emulateAutoDarkMode),p(u.emulatesAutoDarkMode),e.Settings.Settings.instance().moduleSetting("emulate-auto-dark-mode")),this.contentElement.createChild("div").classList.add("panel-section-separator"),this.#t(p(u.forcesCssPreferscolorschemeMedia),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-color-scheme")),this.#t(p(u.forcesMediaTypeForTestingPrint),e.Settings.Settings.instance().moduleSetting("emulated-css-media")),this.#t(p(u.forcesCssForcedColors),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-forced-colors")),window.matchMedia("not all and (prefers-contrast), (prefers-contrast)").matches&&this.#t(p(u.forcesCssPreferscontrastMedia),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-contrast")),this.#t(p(u.forcesCssPrefersreducedmotion),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-reduced-motion")),window.matchMedia("not all and (prefers-reduced-data), (prefers-reduced-data)").matches&&this.#t(p(u.forcesCssPrefersreduceddataMedia),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-reduced-data")),window.matchMedia("not all and (prefers-reduced-transparency), (prefers-reduced-transparency)").matches&&this.#t(p(u.forcesCssPrefersreducedtransparencyMedia),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-reduced-transparency")),this.#t(p(u.forcesCssColorgamutMediaFeature),e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-color-gamut")),this.contentElement.createChild("div").classList.add("panel-section-separator"),this.#t(p(u.forcesVisionDeficiencyEmulation),e.Settings.Settings.instance().moduleSetting("emulated-vision-deficiency")),this.contentElement.createChild("div").classList.add("panel-section-separator"),this.#e(p(u.disableAvifImageFormat),p(u.requiresAPageReloadToApplyAnd),e.Settings.Settings.instance().moduleSetting("avif-format-disabled")),this.#e(p(u.disableWebpImageFormat),p(u.requiresAPageReloadToApplyAnd),e.Settings.Settings.instance().moduleSetting("webp-format-disabled")),this.contentElement.createChild("div").classList.add("panel-section-separator")}#e(e,t,a,n){const r=s.UIUtils.CheckboxLabel.create(e,!1,t,a.name);return s.SettingsUI.bindCheckbox(r.checkboxElement,a,n),this.contentElement.appendChild(r),r}#t(e,t){const a=s.SettingsUI.createControlForSetting(t,e);a&&this.contentElement.appendChild(a)}}var S=Object.freeze({__proto__:null,ReloadActionDelegate:class{handleAction(t,a){const s=e.Settings.Settings.instance().moduleSetting("emulated-css-media-feature-prefers-color-scheme");if("rendering.toggle-prefers-color-scheme"===a){const e=["","light","dark"],t=e.findIndex((e=>e===s.get()||""));return s.set(e[(t+1)%3]),!0}return!1}},RenderingOptionsView:f}),b={cssText:`.node-icon{width:28px;height:26px;background-image:var(--image-file-nodeIcon);background-size:17px 17px;background-repeat:no-repeat;background-position:center;opacity:80%;cursor:auto}.node-icon:hover{opacity:100%}.node-icon.inactive{filter:grayscale(100%)}\n/*# sourceURL=${import.meta.resolve("./nodeIcon.css")} */\n`};const T={main:"Main",tab:"Tab",javascriptIsDisabled:"JavaScript is disabled",openDedicatedTools:"Open dedicated DevTools for `Node.js`"},C=a.i18n.registerUIStrings("entrypoints/inspector_main/InspectorMain.ts",T),y=a.i18n.getLocalizedString.bind(void 0,C);let v,I;class w{static instance(e={forceNew:null}){const{forceNew:t}=e;return v&&!t||(v=new w),v}async run(){let a=!0;if(await o.Connections.initMainConnection((async()=>{const e=r.Runtime.Runtime.queryParam("v8only")?o.Target.Type.NODE:"tab"===r.Runtime.Runtime.queryParam("targetType")?o.Target.Type.TAB:o.Target.Type.FRAME,t=e===o.Target.Type.FRAME&&"sources"===r.Runtime.Runtime.queryParam("panel"),s=e===o.Target.Type.FRAME?y(T.main):y(T.tab),n=o.TargetManager.TargetManager.instance().createTarget("main",s,e,null,void 0,t);if(await new Promise((e=>{const t=o.TargetManager.TargetManager.instance();t.observeTargets({targetAdded:a=>{a===t.primaryPageTarget()&&(a.setName(y(T.main)),e(a))},targetRemoved:e=>{}})})),a){if(a=!1,t){const e=n.model(o.DebuggerModel.DebuggerModel);e&&(e.isReadyToPause()||await e.once(o.DebuggerModel.Events.DebuggerIsReadyToPause),e.pause())}e!==o.Target.Type.TAB&&n.runtimeAgent().invoke_runIfWaitingForDebugger()}}),l.TargetDetachedDialog.TargetDetachedDialog.connectionLost),new A,new M,new i.NetworkPanelIndicator.NetworkPanelIndicator,t.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(t.InspectorFrontendHostAPI.Events.ReloadInspectedPage,(({data:e})=>{o.ResourceTreeModel.ResourceTreeModel.reloadAllPages(e)})),!r.Runtime.hostConfig.devToolsPrivacyUI?.enabled||!0===r.Runtime.hostConfig.thirdPartyCookieControls?.managedBlockThirdPartyCookies)return;const s=r.Runtime.hostConfig.thirdPartyCookieControls,n=e.Settings.Settings.instance().createSetting("cookie-control-override-enabled",void 0),c=e.Settings.Settings.instance().createSetting("grace-period-mitigation-disabled",void 0),g=e.Settings.Settings.instance().createSetting("heuristic-mitigation-disabled",void 0);if(void 0!==n.get()){if(s?.thirdPartyCookieRestrictionEnabled!==n.get())return void d.CookieControlsView.showInfobar();if(n.get()){if(s?.thirdPartyCookieMetadataEnabled===c.get())return void d.CookieControlsView.showInfobar();if(s?.thirdPartyCookieHeuristicsEnabled===g.get())return void d.CookieControlsView.showInfobar()}}}}e.Runnable.registerEarlyInitializationRunnable(w.instance);class F{#a;#s;constructor(){const e=document.createElement("div"),a=s.UIUtils.createShadowRootWithCoreStyles(e,{cssFile:b});this.#a=a.createChild("div","node-icon"),e.addEventListener("click",(()=>t.InspectorFrontendHost.InspectorFrontendHostInstance.openNodeFrontend()),!1),this.#s=new s.Toolbar.ToolbarItem(e),this.#s.setTitle(y(T.openDedicatedTools)),o.TargetManager.TargetManager.instance().addEventListener("AvailableTargetsChanged",(e=>this.#n(e.data))),this.#s.setVisible(!1),this.#n([])}static instance(e={forceNew:null}){const{forceNew:t}=e;return I&&!t||(I=new F),I}#n(e){const t=Boolean(e.find((e=>"node"===e.type&&!e.attached)));this.#a.classList.toggle("inactive",!t),t&&this.#s.setVisible(!0)}item(){return this.#s}}class A{constructor(){function t(){const t=[];e.Settings.Settings.instance().moduleSetting("java-script-disabled").get()&&t.push(y(T.javascriptIsDisabled)),s.InspectorView.InspectorView.instance().setPanelWarnings("sources",t)}e.Settings.Settings.instance().moduleSetting("java-script-disabled").addChangeListener(t),t()}}class M{#r;#o;#i;constructor(){this.#r=e.Settings.Settings.instance().moduleSetting("auto-attach-to-created-pages"),this.#r.addChangeListener(this.#d,this),this.#d(),this.#o=e.Settings.Settings.instance().moduleSetting("network.ad-blocking-enabled"),this.#o.addChangeListener(this.#n,this),this.#i=e.Settings.Settings.instance().moduleSetting("emulate-page-focus"),this.#i.addChangeListener(this.#n,this),o.TargetManager.TargetManager.instance().observeTargets(this)}#l(e){e.type()===o.Target.Type.FRAME&&e.parentTarget()?.type()!==o.Target.Type.FRAME&&(e.pageAgent().invoke_setAdBlockingEnabled({enabled:this.#o.get()}),e.emulationAgent().invoke_setFocusEmulationEnabled({enabled:this.#i.get()}))}#d(){t.InspectorFrontendHost.InspectorFrontendHostInstance.setOpenNewWindowForPopups(this.#r.get())}#n(){for(const e of o.TargetManager.TargetManager.instance().targets())this.#l(e)}targetAdded(e){this.#l(e)}targetRemoved(e){}}o.ChildTargetManager.ChildTargetManager.install();var P=Object.freeze({__proto__:null,BackendSettingsSync:M,FocusDebuggeeActionDelegate:class{handleAction(e,t){const a=o.TargetManager.TargetManager.instance().primaryPageTarget();return!!a&&(a.pageAgent().invoke_bringToFront(),!0)}},InspectorMainImpl:w,NodeIndicator:F,ReloadActionDelegate:class{handleAction(e,t){if(r.Runtime.experiments.isEnabled("react-native-specific-ui"))switch(t){case"inspector-main.reload":case"inspector-main.hard-reload":{const e=o.TargetManager.TargetManager.instance().primaryPageTarget();return!!e&&(e.pageAgent().invoke_reload({ignoreCache:!0}),!0)}}switch(t){case"inspector-main.reload":return o.ResourceTreeModel.ResourceTreeModel.reloadAllPages(!1),!0;case"inspector-main.hard-reload":return o.ResourceTreeModel.ResourceTreeModel.reloadAllPages(!0),!0}return!1}},SourcesPanelIndicator:A}),k={cssText:`:host{padding:2px 1px 2px 2px;white-space:nowrap;display:flex;flex-direction:column;height:36px;justify-content:center;overflow-y:auto}.title{overflow:hidden;padding-left:8px;text-overflow:ellipsis;flex-grow:0}.subtitle{color:var(--sys-color-token-subtle);margin-right:3px;overflow:hidden;padding-left:8px;text-overflow:ellipsis;flex-grow:0}:host(.highlighted) .subtitle{color:inherit}\n/*# sourceURL=${import.meta.resolve("./outermostTargetSelector.css")} */\n`};const x={targetNotSelected:"Page: Not selected",targetS:"Page: {PH1}"},R=a.i18n.registerUIStrings("entrypoints/inspector_main/OutermostTargetSelector.ts",x),E=a.i18n.getLocalizedString.bind(void 0,R);let D;class L{listItems=new s.ListModel.ListModel;#c;#g;constructor(){this.#c=new s.SoftDropDown.SoftDropDown(this.listItems,this),this.#c.setRowHeight(36),this.#g=new s.Toolbar.ToolbarItem(this.#c.element),this.#g.setTitle(E(x.targetNotSelected)),this.listItems.addEventListener("ItemsReplaced",(()=>this.#g.setEnabled(Boolean(this.listItems.length)))),this.#g.element.classList.add("toolbar-has-dropdown");const e=o.TargetManager.TargetManager.instance();e.addModelListener(o.ChildTargetManager.ChildTargetManager,"TargetInfoChanged",this.#h,this),e.addEventListener("NameChanged",this.#u,this),e.observeTargets(this),s.Context.Context.instance().addFlavorChangeListener(o.Target.Target,this.#m,this)}static instance(e={forceNew:null}){const{forceNew:t}=e;return D&&!t||(D=new L),D}item(){return this.#g}highlightedItemChanged(e,t,a,s){a&&a.classList.remove("highlighted"),s&&s.classList.add("highlighted")}titleFor(e){return e.name()}targetAdded(e){e.outermostTarget()===e&&(this.listItems.insertWithComparator(e,this.#p()),this.#g.setVisible(this.listItems.length>1),e===s.Context.Context.instance().flavor(o.Target.Target)&&this.#c.selectItem(e))}targetRemoved(e){const t=this.listItems.indexOf(e);-1!==t&&(this.listItems.remove(t),this.#g.setVisible(this.listItems.length>1))}#p(){return(e,t)=>{const a=e.targetInfo(),s=t.targetInfo();return a&&s?!a.subtype?.length&&s.subtype?.length?-1:a.subtype?.length&&!s.subtype?.length?1:a.url.localeCompare(s.url):0}}#h(e){const t=o.TargetManager.TargetManager.instance().targetById(e.data.targetId);t&&t.outermostTarget()===t&&(this.targetRemoved(t),this.targetAdded(t))}#u(e){const t=e.data;t&&t.outermostTarget()===t&&(this.targetRemoved(t),this.targetAdded(t))}#m({data:e}){this.#c.selectItem(e?.outermostTarget()||null)}createElementForItem(e){const t=document.createElement("div");t.classList.add("target");const a=s.UIUtils.createShadowRootWithCoreStyles(t,{cssFile:k}),n=a.createChild("div","title");s.UIUtils.createTextChild(n,c.StringUtilities.trimEndWithMaxLength(this.titleFor(e),100));const r=a.createChild("div","subtitle");return s.UIUtils.createTextChild(r,this.#f(e)),t}#f(e){const t=e.targetInfo();return e===o.TargetManager.TargetManager.instance().primaryPageTarget()&&t?g.ResourceUtils.displayNameForURL(t.url):e.targetInfo()?.subtype||""}isItemSelectable(e){return!0}itemSelected(e){const t=e?E(x.targetS,{PH1:this.titleFor(e)}):E(x.targetNotSelected);this.#g.setTitle(t),e&&e!==s.Context.Context.instance().flavor(o.Target.Target)?.outermostTarget()&&s.Context.Context.instance().setFlavor(o.Target.Target,e)}}var U=Object.freeze({__proto__:null,OutermostTargetSelector:L});export{P as InspectorMain,U as OutermostTargetSelector,S as RenderingOptions};