@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
14 lines (13 loc) • 6.45 kB
JavaScript
import"../../../Images/Images.js";import*as t from"../../lit/lit.js";import{Directives as e,render as o,html as i}from"../../lit/lit.js";var s={cssText:`:host{flex-grow:0;flex-shrink:0;display:inline-block;width:20px;height:20px;color:var(--icon-default);vertical-align:sub;position:relative}:host([hidden]){display:none}:host([name="triangle-up"]),\n:host([name="triangle-down"]),\n:host([name="triangle-left"]),\n:host([name="triangle-right"]){width:14px;height:14px;vertical-align:baseline}span{display:block;width:100%;height:100%;background-color:currentcolor;mask:var(--icon-url,url("data:image/svg+xml,%3Csvg width='1' height='1' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E ")) center /contain no-repeat} (forced-colors: active){span{forced-color-adjust:none}}\n/*# sourceURL=${import.meta.resolve("./icon.css")} */\n`};class n extends HTMLElement{static observedAttributes=["name"];#t;#e;constructor(){super(),this.role="presentation";const t=document.createElement("style");t.textContent=s.cssText,this.#e=document.createElement("span"),this.#t=this.attachShadow({mode:"open"}),this.#t.append(t,this.#e)}get data(){return{color:this.style.color,width:this.style.width,height:this.style.height,iconName:this.name??""}}set data(t){const{color:e,width:o="20px",height:i="20px"}=t;if(this.style.color=e,this.style.width=o,this.style.height=i,"iconName"in t&&t.iconName)this.name=t.iconName;else{if(!("iconPath"in t)||!t.iconPath)throw new Error("Misconfigured `iconName` or `iconPath`.");this.name=t.iconPath}}get name(){return this.getAttribute("name")}set name(t){null===t?this.removeAttribute("name"):this.setAttribute("name",t)}attributeChangedCallback(t,e,o){if(e!==o&&"name"===t)if(null===o)this.#e.style.removeProperty("--icon-url");else{const t=URL.canParse(o)?`url(${o})`:`var(--image-file-${o})`;this.#e.style.setProperty("--icon-url",t)}}}customElements.define("devtools-icon",n);var c=Object.freeze({__proto__:null,Icon:n,create:(t,e)=>{const o=new n;return o.name=t,void 0!==e&&(o.className=e),o}}),a=`:host{white-space:normal;display:inline-block}.icon-button{border:none;margin-right:2px;margin-top:4px;display:inline-flex;align-items:center;color:inherit;font-size:inherit;font-family:inherit;background-color:inherit}.icon-button.with-click-handler{padding:0;margin:0;height:18px;border-radius:var(--sys-shape-corner-extra-small)}.icon-button.with-click-handler:hover{background-color:var(--sys-color-state-hover-on-subtle)}.icon-button:focus-visible{background-color:var(--sys-color-state-hover-on-subtle)}.compact .icon-button-title{display:none}.icon-button-title{margin-right:var(--sys-size-2);+ devtools-icon{margin-left:var(--sys-size-3)}}.status-icon{margin-right:var(--sys-size-1);margin-left:var(--sys-size-2)} (forced-colors: active){.icon-button{forced-color-adjust:none;background-color:ButtonFace}.icon-button:focus-visible,\n .icon-button.with-click-handler:hover{background-color:Highlight;color:HighlightText}}\n/*# sourceURL=${import.meta.resolve("./iconButton.css")} */\n`;const{html:r}=t;class l extends HTMLElement{#o=this.attachShadow({mode:"open"});#i=void 0;#s=[];#n=!1;#c="";#a="";#r;set data(t){this.#s=t.groups.map((t=>({...t}))),this.#i=t.clickHandler,this.#a=t.trailingText??"",this.#c=t.leadingText??"",this.#r=t.accessibleName,this.#n=Boolean(t.compact),this.#l()}get data(){return{groups:this.#s.map((t=>({...t}))),accessibleName:this.#r,clickHandler:this.#i,leadingText:this.#c,trailingText:this.#a,compact:this.#n}}#h(t){this.#i&&(t.preventDefault(),this.#i())}#l(){const e=t.Directives.classMap({"icon-button":!0,"with-click-handler":Boolean(this.#i),compact:this.#n}),o=this.#s.filter((t=>void 0!==t.text)).filter(((t,e)=>!this.#n||0===e));t.render(r`
<style>${a}</style>
<button class=${e} =${this.#h} aria-label=${t.Directives.ifDefined(this.#r)}>
${!this.#n&&this.#c?r`<span class="icon-button-title">${this.#c}</span>`:t.nothing}
${o.map((e=>r`
<devtools-icon class="status-icon"
.data=${{iconName:e.iconName,color:e.iconColor,width:e.iconWidth||"1.5ex",height:e.iconHeight||"1.5ex"}}>
</devtools-icon>
${this.#n?r`<!-- Force line-height for this element --><span>​</span>`:t.nothing}
<span class="icon-button-title">${e.text}</span>`))}
</button>
${!this.#n&&this.#a?r`<span class="icon-button-title">${this.#a}</span>`:t.nothing}
`,this.#o,{host:this})}}customElements.define("icon-button",l);var h=Object.freeze({__proto__:null,IconButton:l}),d=`:host{devtools-icon.document{color:var(--override-file-source-icon-color,var(--icon-default))}devtools-icon.script,\n devtools-icon.sm-script,\n devtools-icon.snippet{color:var(--override-file-source-icon-color,var(--icon-file-script))}devtools-icon.stylesheet,\n devtools-icon.sm-stylesheet{color:var(--override-file-source-icon-color,var(--icon-file-styles))}devtools-icon.image,\n devtools-icon.font{color:var(--override-file-source-icon-color,var(--icon-file-image))}devtools-icon.dot::before{content:var(--image-file-empty);width:7px;height:7px;border-radius:50%;outline:var(--sys-size-1) solid var(--icon-gap-focus-selected);top:12px;left:11px;position:absolute;z-index:1}devtools-icon.purple.dot::before{background-color:var(--sys-color-purple-bright)}devtools-icon.green.dot::before{background-color:var(--sys-color-green-bright)}}\n/*# sourceURL=${import.meta.resolve("./fileSourceIcon.css")} */\n`;const{classMap:p,styleMap:g}=e;class u extends HTMLElement{#o=this.attachShadow({mode:"open"});#d;#p;#g;#u;#m;#v;constructor(t){super(),this.#d=t}set data(t){this.#p=t.contentType,this.#g=t.hasDotBadge,this.#u=t.isDotPurple,this.#m=t.width,this.#v=t.height,void 0!==this.#m&&(this.style.width=`${this.#m}px`),void 0!==this.#v&&(this.style.height=`${this.#v}px`),this.#l()}get data(){return{contentType:this.#p,hasDotBadge:this.#g,isDotPurple:this.#u,width:this.#m,height:this.#v}}connectedCallback(){this.#l()}#l(){const t=p({dot:Boolean(this.#g),purple:Boolean(this.#g&&this.#u),green:Boolean(this.#g&&!this.#u),...this.#p?{[this.#p]:this.#p}:null}),e=g({width:this.#m?`${this.#m}px`:void 0,height:this.#v?`${this.#v}px`:void 0});o(i`<style>${d}</style><devtools-icon .name=${this.#d} class=${t} style=${e}></devtools-icon>`,this.#o,{host:this})}}customElements.define("devtools-file-source-icon",u);var m=Object.freeze({__proto__:null,FileSourceIcon:u});export{m as FileSourceIcon,c as Icon,h as IconButton};