@react-native/debugger-frontend/dist/third-party/front_end/ui/components/issue_counter/issue_counter.js

Debugger frontend for React Native based on Chrome DevTools

import"../icon_button/icon_button.js";import*as e from"../../../core/common/common.js";import*as s from"../../../core/i18n/i18n.js";import*as t from"../../../models/issues_manager/issues_manager.js";import*as i from"../../lit/lit.js";import{render as o,html as r}from"../../lit/lit.js";import*as n from"../render_coordinator/render_coordinator.js";import*as a from"../../visual_logging/visual_logging.js";var l=`:host{white-space:normal;display:inline-block}\n/*# sourceURL=${import.meta.resolve("./issueCounter.css")} */\n`;const c={pageErrors:"{issueCount, plural, =1 {# page error} other {# page errors}}",breakingChanges:"{issueCount, plural, =1 {# breaking change} other {# breaking changes}}",possibleImprovements:"{issueCount, plural, =1 {# possible improvement} other {# possible improvements}}"},u=s.i18n.registerUIStrings("ui/components/issue_counter/IssueCounter.ts",c),h=s.i18n.getLocalizedString.bind(void 0,u);function d(e){switch(e){case"PageError":return{iconName:"issue-cross-filled",color:"var(--icon-error)",width:"20px",height:"20px"};case"BreakingChange":return{iconName:"issue-exclamation-filled",color:"var(--icon-warning)",width:"20px",height:"20px"};case"Improvement":return{iconName:"issue-text-filled",color:"var(--icon-info)",width:"20px",height:"20px"}}}function m({iconName:e,color:s,width:t,height:i},o){return o?{iconName:e,iconColor:s,iconWidth:o,iconHeight:o}:{iconName:e,iconColor:s,iconWidth:t,iconHeight:i}}const p=function(){let e;return{format(...t){if(!e){const t={type:"unit",style:"short"};e=new Intl.ListFormat(s.DevToolsLocale.DevToolsLocale.instance().locale,t)}return e.format(...t)}}}();class g extends HTMLElement{#e=this.attachShadow({mode:"open"});#s=void 0;#t=void 0;#i="";#o;#r=[0,0,0];#n="OmitEmpty";#a=void 0;#l=void 0;#c;#u=!1;scheduleUpdate(){this.#o?this.#o.schedule((async()=>this.#h())):this.#h()}set data(s){this.#s=s.clickHandler,this.#i=s.leadingText??"",this.#t=s.tooltipCallback,this.#n=s.displayMode??"OmitEmpty",this.#l=s.accessibleName,this.#c=s.throttlerTimeout,this.#u=Boolean(s.compact),this.#a!==s.issuesManager&&(this.#a?.removeEventListener("IssuesCountUpdated",this.scheduleUpdate,this),this.#a=s.issuesManager,this.#a.addEventListener("IssuesCountUpdated",this.scheduleUpdate,this)),0!==s.throttlerTimeout?this.#o=new e.Throttler.Throttler(s.throttlerTimeout??100):this.#o=void 0,this.scheduleUpdate()}get data(){return{clickHandler:this.#s,leadingText:this.#i,tooltipCallback:this.#t,displayMode:this.#n,accessibleName:this.#l,throttlerTimeout:this.#c,compact:this.#u,issuesManager:this.#a}}#h(){if(!this.#a)return;this.#r=[this.#a.numberOfIssues("PageError"),this.#a.numberOfIssues("BreakingChange"),this.#a.numberOfIssues("Improvement")];const e=["PageError","BreakingChange","Improvement"][this.#r.findIndex((e=>e>0))??2],s=(s,t)=>{switch(this.#n){case"OmitEmpty":return t>0?`${t}`:void 0;case"ShowAlways":return`${t}`;case"OnlyMostImportant":return s===e?`${t}`:void 0}},t="2ex",i={groups:[{...m(d("PageError"),t),text:s("PageError",this.#r[0])},{...m(d("BreakingChange"),t),text:s("BreakingChange",this.#r[1])},{...m(d("Improvement"),t),text:s("Improvement",this.#r[2])}],clickHandler:this.#s,leadingText:this.#i,accessibleName:this.#l,compact:this.#u};o(r`
        <style>${l}</style>
        <icon-button .data=${i} .accessibleName=${this.#l}></icon-button>
        `,this.#e,{host:this}),this.#t?.()}}customElements.define("devtools-issue-counter",g);var v=Object.freeze({__proto__:null,IssueCounter:g,getIssueCountsEnumeration:function(e,s=!0){const t=[e.numberOfIssues("PageError"),e.numberOfIssues("BreakingChange"),e.numberOfIssues("Improvement")],i=[h(c.pageErrors,{issueCount:t[0]}),h(c.breakingChanges,{issueCount:t[1]}),h(c.possibleImprovements,{issueCount:t[2]})];return p.format(i.filter(((e,i)=>!s||t[i]>0)))},getIssueKindIconData:d}),I={cssText:`:host{display:inline-block;white-space:nowrap;color:inherit;font-size:inherit;font-family:inherit}:host([hidden]){display:none}button{border:none;background:transparent;margin:0;padding:0;&.link{cursor:pointer;& > span{color:var(--sys-color-primary)}}}devtools-icon{width:16px;height:16px;vertical-align:middle;&[name="issue-cross-filled"]{color:var(--icon-error)}&[name="issue-exclamation-filled"]{color:var(--icon-warning)}&[name="issue-text-filled"]{color:var(--icon-info)}}@media (forced-colors: active){devtools-icon{color:ButtonText}}\n/*# sourceURL=${import.meta.resolve("./issueLinkIcon.css")} */\n`};const k=new CSSStyleSheet;k.replaceSync(I.cssText);const{html:b}=i,f={clickToShowIssue:"Click to show issue in the issues tab",clickToShowIssueWithTitle:"Click to open the issue tab and show issue: {title}",issueUnavailable:"Issue unavailable at this time"},w=s.i18n.registerUIStrings("ui/components/issue_counter/IssueLinkIcon.ts",f),C=s.i18n.getLocalizedString.bind(void 0,w);class T extends HTMLElement{#e=this.attachShadow({mode:"open"});#d;#m=null;#p;#g;#v;#I=e.Revealer.reveal;set data(e){if(this.#d=e.issue,this.#p=e.issueId,this.#g=e.issueResolver,!this.#d){if(!this.#p)throw new Error("Either `issue` or `issueId` must be provided");if(!this.#g)throw new Error("An `IssueResolver` must be provided if an `issueId` is provided.")}this.#v=e.additionalOnClickAction,e.revealOverride&&(this.#I=e.revealOverride),this.#k(),this.#h()}async#k(){if(!this.#d&&this.#p)try{this.#d=await(this.#g?.waitFor(this.#p))}catch{this.#d=null}const e=this.#d?.getDescription();if(e){const s=await t.MarkdownIssueDescription.getIssueTitleFromMarkdownDescription(e);s&&(this.#m=s)}await this.#h()}connectedCallback(){this.#e.adoptedStyleSheets=[k]}get data(){return{issue:this.#d,issueId:this.#p,issueResolver:this.#g,additionalOnClickAction:this.#v,revealOverride:this.#I!==e.Revealer.reveal?this.#I:void 0}}handleClick(e){0===e.button&&(this.#d&&this.#I(this.#d),this.#v?.(),e.consume())}#b(){return this.#m?C(f.clickToShowIssueWithTitle,{title:this.#m}):this.#d?C(f.clickToShowIssue):C(f.issueUnavailable)}#f(){if(!this.#d)return"issue-questionmark-filled";const{iconName:e}=d(this.#d.getKind());return e}#h(){return n.write((()=>{i.render(b`
      <button class=${i.Directives.classMap({link:Boolean(this.#d)})}
              title=${this.#b()}
              jslog=${a.link("issue").track({click:!0})}
              @click=${this.handleClick}>
        <devtools-icon name=${this.#f()}></devtools-icon>
      </button>`,this.#e,{host:this})}))}}customElements.define("devtools-issue-link-icon",T);var x=Object.freeze({__proto__:null,IssueLinkIcon:T,extractShortPath:e=>(/[^/]+$/.exec(e)||/[^/]+\/$/.exec(e)||[""])[0]});export{v as IssueCounter,x as IssueLinkIcon};