@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
2 lines (1 loc) • 6.47 kB
JavaScript
import*as e from"../../core/common/common.js";import*as r from"../../core/i18n/i18n.js";import*as o from"../../models/formatter/formatter.js";import*as t from"../../models/persistence/persistence.js";import*as n from"../../ui/components/diff_view/diff_view.js";import*as s from"../../ui/components/icon_button/icon_button.js";import*as i from"../../ui/legacy/legacy.js";import*as c from"../snippets/snippets.js";const a={requestContentHeadersOverridden:"Both request content and headers are overridden",requestContentOverridden:"Request content is overridden",requestHeadersOverridden:"Request headers are overridden",thirdPartyPhaseout:"Cookies for this request are blocked either because of Chrome flags or browser configuration. Learn more in the Issues panel."},l=r.i18n.registerUIStrings("panels/utils/utils.ts",a),u=r.i18n.getLocalizedString.bind(void 0,l);class d{static isFailedNetworkRequest(e){if(!e)return!1;if(e.failed&&!e.statusCode)return!0;if(e.statusCode>=400)return!0;const r=e.signedExchangeInfo();return!(null===r||!Boolean(r.errors))||(!(!e.webBundleInfo()?.errorMessage&&!e.webBundleInnerRequestInfo()?.errorMessage)||!!e.corsErrorStatus())}static createIconElement(e,r){const o=document.createElement("div");o.title=r;const t=new URL(`../../Images/${e.iconName}.svg`,import.meta.url).toString();return o.style.setProperty("mask",`url('${t}') no-repeat center /99%`),o.style.setProperty("background-color",e.color),o}static getIconForNetworkRequest(r){let o,t=r.resourceType();if(d.isFailedNetworkRequest(r)){let n;return n=r.resourceType()===e.ResourceType.resourceTypes.Prefetch?{iconName:"warning-filled",color:"var(--icon-warning)"}:{iconName:"cross-circle-filled",color:"var(--icon-error)"},o=d.createIconElement(n,t.title()),o.classList.add("icon"),o}if(r.hasThirdPartyCookiePhaseoutIssue()){const e={iconName:"warning-filled",color:"var(--icon-warning)"};return o=this.createIconElement(e,u(a.thirdPartyPhaseout)),o.classList.add("icon"),o}const n=r.hasOverriddenHeaders(),s=r.hasOverriddenContent;if(n||s){const e={iconName:"document",color:"var(--icon-default)"};let r;r=u(n&&s?a.requestContentHeadersOverridden:s?a.requestContentOverridden:a.requestHeadersOverridden);const t=this.createIconElement(e,r);return t.classList.add("icon"),o=document.createElement("div"),o.classList.add("network-override-marker"),o.appendChild(t),o}const i=e.ResourceType.ResourceType.fromMimeType(r.mimeType);if(i!==t&&i!==e.ResourceType.resourceTypes.Other&&(t===e.ResourceType.resourceTypes.Fetch||i===e.ResourceType.resourceTypes.Image||t===e.ResourceType.resourceTypes.Other&&i===e.ResourceType.resourceTypes.Script)&&(t=i),t===e.ResourceType.resourceTypes.Image){const e=document.createElement("img");return e.classList.add("image-network-icon-preview"),e.alt=r.resourceType().title(),r.populateImageSource(e),o=document.createElement("div"),o.classList.add("image","icon"),o.appendChild(e),o}if(t!==e.ResourceType.resourceTypes.Manifest&&"application/json"===e.ResourceType.ResourceType.simplifyContentType(r.mimeType)){const e={iconName:"file-json",color:"var(--icon-file-script)"};return o=this.createIconElement(e,r.resourceType().title()),o.classList.add("icon"),o}const c=d.iconDataForResourceType(t);return o=this.createIconElement(c,r.resourceType().title()),o.classList.add("icon"),o}static iconDataForResourceType(r){return r.isDocument()?{iconName:"file-document",color:"var(--icon-file-document)"}:r.isImage()?{iconName:"file-image",color:"var(--icon-file-image)"}:r.isFont()?{iconName:"file-font",color:"var(--icon-file-font)"}:r.isScript()?{iconName:"file-script",color:"var(--icon-file-script)"}:r.isStyleSheet()?{iconName:"file-stylesheet",color:"var(--icon-file-styles)"}:r.name()===e.ResourceType.resourceTypes.Manifest.name()?{iconName:"file-manifest",color:"var(--icon-default)"}:r.name()===e.ResourceType.resourceTypes.Wasm.name()?{iconName:"file-wasm",color:"var(--icon-default)"}:r.name()===e.ResourceType.resourceTypes.WebSocket.name()?{iconName:"file-websocket",color:"var(--icon-default)"}:r.name()===e.ResourceType.resourceTypes.Media.name()?{iconName:"file-media",color:"var(--icon-file-media)"}:r.isWebbundle()?{iconName:"bundle",color:"var(--icon-default)"}:r.name()===e.ResourceType.resourceTypes.Fetch.name()||r.name()===e.ResourceType.resourceTypes.XHR.name()?{iconName:"file-fetch-xhr",color:"var(--icon-default)"}:{iconName:"file-generic",color:"var(--icon-default)"}}static getIconForSourceFile(e,r={}){const o=t.Persistence.PersistenceImpl.instance().binding(e),n=t.NetworkPersistenceManager.NetworkPersistenceManager.instance();let a="document",l=!1,u=!1;o?(c.ScriptSnippetFileSystem.isSnippetsUISourceCode(o.fileSystem)&&(a="snippet"),l=!0,u=n.project()===o.fileSystem.project()):n.isActiveHeaderOverrides(e)?(l=!0,u=!0):c.ScriptSnippetFileSystem.isSnippetsUISourceCode(e)&&(a="snippet");const d=new s.FileSourceIcon.FileSourceIcon(a);return d.data={contentType:e.contentType().name(),hasDotBadge:l,isDotPurple:u,width:r.width,height:r.height},o&&i.Tooltip.Tooltip.install(d,t.PersistenceUtils.PersistenceUtils.tooltipForUISourceCode(e)),d}static async formatCSSChangesFromDiff(e){const{originalLines:r,currentLines:o,rows:t}=n.DiffView.buildDiffRows(e),s=await m(r.join("\n")),i=await m(o.join("\n"));let c,a,l="",u=!1;for(const{currentLineNumber:e,originalLineNumber:n,type:d}of t){if("deletion"!==d&&"addition"!==d)continue;const t="deletion"===d,m=t?n-1:e-1,p=(t?r:o)[m].trim(),{declarationIDToStyleRule:f,styleRuleIDToStyleRule:y}=t?s:i;let g,T="";if(f.has(m)){g=f.get(m);const e=g.selector;e!==c&&e!==a&&(T+=`${e} {\n`),T+=" ",u=!0}else u&&(T="}\n\n",u=!1),y.has(m)&&(g=y.get(m));l+=T+(t?`/* ${p} */`:p)+"\n",t?c=g?.selector:a=g?.selector}return l.length>0&&(l+="}"),l}static highlightElement(e){e.scrollIntoViewIfNeeded(),e.animate([{offset:0,backgroundColor:"rgba(255, 255, 0, 0.2)"},{offset:.1,backgroundColor:"rgba(255, 255, 0, 0.7)"},{offset:1,backgroundColor:"transparent"}],{duration:2e3,easing:"cubic-bezier(0, 0, 0.2, 1)"})}}async function m(e){const r=await new Promise((r=>{const t=[];o.FormatterWorkerPool.formatterWorkerPool().parseCSS(e,((e,o)=>{t.push(...o),e&&r(t)}))})),t=new Map,n=new Map;for(const e of r)if("styleRange"in e){const r=e.selectorText.split("\n").pop()?.trim();if(!r)continue;const o={rule:e,selector:r};n.set(e.styleRange.startLine,o);for(const r of e.properties)t.set(r.range.startLine,o)}return{declarationIDToStyleRule:t,styleRuleIDToStyleRule:n}}export{d as PanelUtils};