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

Debugger frontend for React Native based on Chrome DevTools

import*as t from"../helpers/helpers.js";import*as e from"../../lit/lit.js";import{render as o,html as i,nothing as s}from"../../lit/lit.js";import*as n from"../../../core/i18n/i18n.js";import*as a from"../../../core/platform/platform.js";import*as r from"../../../services/window_bounds/window_bounds.js";import*as l from"../render_coordinator/render_coordinator.js";import*as d from"../../visual_logging/visual_logging.js";import"../buttons/buttons.js";var h={cssText:`:host{white-space:normal}\n/*# sourceURL=${import.meta.resolve("./buttonDialog.css")} */\n`};const g=new CSSStyleSheet;g.replaceSync(h.cssText);class c extends HTMLElement{#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#i=null;#s=null;#n=null;connectedCallback(){this.#t.adoptedStyleSheets=[g]}set data(e){this.#n=e,t.ScheduledRender.scheduleRender(this,this.#e)}#a(){if(!this.#i)throw new Error("Dialog not found");this.#i.setDialogVisible(!0),t.ScheduledRender.scheduleRender(this,this.#e)}#r(e){if(!this.#i)throw new Error("Dialog not found");this.#i.setDialogVisible(!1),e&&e.stopImmediatePropagation(),t.ScheduledRender.scheduleRender(this,this.#e)}#o(){if(!this.#n)throw new Error("ButtonDialog.data is not set");if(!t.ScheduledRender.isScheduledRender(this))throw new Error("Button dialog render was not scheduled");o(i`
      <devtools-button
        @click=${this.#a}
        on-render=${t.Directives.nodeRenderedCallback((t=>{this.#s=t}))}
        .data=${{variant:this.#n.variant,iconName:this.#n.iconName,disabled:this.#n.disabled,title:this.#n.iconTitle,jslogContext:this.#n.jslogContext}}
      ></devtools-button>
      <devtools-dialog
        @clickoutsidedialog=${this.#r}
        .origin=${()=>{if(!this.#s)throw new Error("Button not found");return this.#s}}
        .position=${this.#n.position??"bottom"}
        .horizontalAlignment=${this.#n.horizontalAlignment??"right"}
        .closeOnESC=${this.#n.closeOnESC??!1}
        .closeOnScroll=${this.#n.closeOnScroll??!1}
        .closeButton=${this.#n.closeButton??!1}
        .dialogTitle=${this.#n.dialogTitle}
        .jslogContext=${this.#n.jslogContext??""}
        on-render=${t.Directives.nodeRenderedCallback((t=>{this.#i=t}))}
      >
        <slot></slot>
      </devtools-dialog>
      `,this.#t,{host:this}),this.#n.openOnRender&&(this.#a(),this.#n.openOnRender=!1)}}customElements.define("devtools-button-dialog",c);var p=Object.freeze({__proto__:null,ButtonDialog:c}),u={cssText:`:host{--override-transparent:rgb(0 0 0/0%);display:var(--dialog-display)}dialog::backdrop{background:var(--override-transparent)}dialog{background:transparent;border:none;top:var(--dialog-top);padding:var(--dialog-padding);left:var(--dialog-left);right:var(--dialog-right);margin:var(--dialog-margin);margin-left:var(--dialog-margin-left,0);margin-bottom:var(--dialog-margin-bottom);animation-name:slideIn;animation-duration:100ms;animation-timing-function:cubic-bezier(0,0,0.3,1);overflow:hidden;filter:drop-shadow(0 4px 8px rgb(0 0 0/15%)) drop-shadow(0 1px 3px rgb(0 0 0/30%))}dialog:focus,\ndialog:focus-visible{outline:none}#content{min-width:var(--content-min-width);background:var(--color-background-elevation-dark-only);border-radius:var(--sys-size-5);max-height:var(--dialog-max-height);max-width:var(--dialog-max-width);overflow:auto;outline:none}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);&:empty{padding:0;height:var(--sys-size-7)}.dialog-header-text{font:var(--sys-typescale-body2-medium);padding-top:var(--sys-size-3)}devtools-button{margin:3px}}.dialog-content{padding:0 var(--sys-size-8) var(--sys-size-7) var(--sys-size-8);overflow:hidden}@keyframes slideIn{from{transform:translateY(var(--dialog-offset-y));opacity:0%}to{opacity:100%}}\n/*# sourceURL=${import.meta.resolve("./dialog.css")} */\n`};const m=new CSSStyleSheet;m.replaceSync(u.cssText);const{html:v}=e,y={close:"Close"},b=n.i18n.registerUIStrings("ui/components/dialogs/Dialog.ts",y),w=n.i18n.getLocalizedString.bind(void 0,b),f="HTMLDialogElement"in globalThis,D=10,S=30,C="MODAL";class x extends HTMLElement{#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#l=this.#d.bind(this);#h=this.#g.bind(this);#c={origin:C,position:"bottom",horizontalAlignment:"center",getConnectorCustomXPosition:null,dialogShownCallback:null,windowBoundsService:r.WindowBoundsService.WindowBoundsServiceImpl.instance(),closeOnESC:!0,closeOnScroll:!0,closeButton:!1,dialogTitle:"",jslogContext:""};#i=null;#p=!1;#u=!1;#m=new DOMRect(0,0,0,0);#v=new DOMRect(0,0,0,0);#y=null;#b=null;#w=new MutationObserver(this.#l);#f=new ResizeObserver(this.#D.bind(this));#S=this.windowBoundsService.getDevToolsBoundingElement();#C=this.#x.bind(this);get origin(){return this.#c.origin}set origin(t){this.#c.origin=t,this.#P()}get position(){return this.#c.position}set position(t){this.#c.position=t,this.#P()}get horizontalAlignment(){return this.#c.horizontalAlignment}set horizontalAlignment(t){this.#c.horizontalAlignment=t,this.#P()}get windowBoundsService(){return this.#c.windowBoundsService}set windowBoundsService(t){this.#c.windowBoundsService=t,this.#S=this.windowBoundsService.getDevToolsBoundingElement(),this.#P()}get bestVerticalPosition(){return this.#y}get bestHorizontalAlignment(){return this.#b}get getConnectorCustomXPosition(){return this.#c.getConnectorCustomXPosition}set getConnectorCustomXPosition(t){this.#c.getConnectorCustomXPosition=t,this.#P()}get dialogShownCallback(){return this.#c.dialogShownCallback}get jslogContext(){return this.#c.jslogContext}set dialogShownCallback(t){this.#c.dialogShownCallback=t,this.#P()}set closeOnESC(t){this.#c.closeOnESC=t,this.#P()}set closeOnScroll(t){this.#c.closeOnScroll=t,this.#P()}set closeButton(t){this.#c.closeButton=t,this.#P()}set dialogTitle(t){this.#c.dialogTitle=t,this.#P()}set jslogContext(t){this.#c.jslogContext=t,this.#P()}#D(){this.#v=this.#E().getBoundingClientRect()}#P(){t.ScheduledRender.scheduleRender(this,this.#e)}connectedCallback(){this.#t.adoptedStyleSheets=[m],window.addEventListener("resize",this.#l),this.#w.observe(this.#S,{childList:!0,subtree:!0}),this.#S.addEventListener("wheel",this.#h),this.style.setProperty("--dialog-padding","0"),this.style.setProperty("--dialog-display",f?"block":"none"),this.style.setProperty("--override-dialog-content-border","10px solid transparent"),this.style.setProperty("--dialog-padding","3px 5px")}disconnectedCallback(){window.removeEventListener("resize",this.#l),this.#S.removeEventListener("wheel",this.#h),this.#w.disconnect(),this.#f.disconnect()}#E(){if(!this.#i){if(this.#i=this.#t.querySelector("dialog"),!this.#i)throw new Error("Dialog not found");this.#f.observe(this.#i)}return this.#i}getHitArea(){return this.#m}async setDialogVisible(t){t?await this.#a():this.#r()}async#B(t){if(t.stopPropagation(),t instanceof PointerEvent&&""===t.pointerType)return;const e=this.#A(t),o=this.#z(t);if(!e)if("pointermove"!==t.type)this.dispatchEvent(new E);else{if(o)return;this.dispatchEvent(new P)}}#A(t){const e=this.#v;let o="bottom"===this.bestVerticalPosition?20:-20;this.#c.origin===C&&(o=0);const i=t.pageX>=e.left&&t.pageX<=e.left+e.width,s=t.pageY>=e.top+o&&t.pageY<=e.top+e.height+o;return i&&s}#z(t){const e=this.#m,o=t.pageX>=e.left&&t.pageX<=e.left+e.width,i=t.pageY>=e.top&&t.pageY<=e.top+e.height;return o&&i}#k(t){if(!t||t===C)throw new Error("Dialog origin is null");const e=t instanceof Function?t():t;return e instanceof DOMPoint?{top:e.y,bottom:e.y,left:e.x,right:e.x}:e instanceof HTMLElement?e.getBoundingClientRect():e}#O(t,e){return e.right-t.left>t.right-e.left?"left":"right"}#R(t,e,o){return t.bottom+e>o.height&&t.top-e>o.top?"top":"bottom"}#T(){this.#c.origin&&(this.#p=!0,l.read((()=>{const t=this.#S.getBoundingClientRect(),e=t.width,o=t.height,i=t.left,s=t.top,n=t.right;if(this.#c.origin===C)return void l.write((()=>{this.style.setProperty("--dialog-top",`${s}px`),this.style.setProperty("--dialog-left",`${i}px`),this.style.setProperty("--dialog-margin","auto"),this.style.setProperty("--dialog-margin-left","auto"),this.style.setProperty("--dialog-margin-bottom","auto"),this.style.setProperty("--dialog-max-height",o-S+"px"),this.style.setProperty("--dialog-max-width",e-S+"px"),this.style.setProperty("--dialog-right",document.body.clientWidth-n+"px")}));const r=this.#c.origin,d=this.#k(r),{top:h,right:g,bottom:c,left:p}=d,u=(p+g)/2,m=g-p+D,v=document.body.clientWidth,y=this.#c.getConnectorCustomXPosition?this.#c.getConnectorCustomXPosition():u;l.write((()=>{this.style.setProperty("--dialog-top","0");const r=this.#E();r.style.visibility="hidden",this.#p&&!r.hasAttribute("open")&&(r.showModal(),this.setAttribute("open",""),this.#p=!1);const{width:l,height:b}=r.getBoundingClientRect();if(this.#b="auto"===this.#c.horizontalAlignment?this.#O(d,t):this.#c.horizontalAlignment,this.#y="auto"===this.#c.position?this.#R(d,b,t):this.#c.position,"auto"!==this.#b&&"auto"!==this.#y){switch(this.#m.height=c-h+D,this.#m.width=m,this.style.setProperty("--content-min-width",y-p+20+10+"px"),this.style.setProperty("--dialog-left","auto"),this.style.setProperty("--dialog-right","auto"),this.style.setProperty("--dialog-margin","0"),this.#b){case"left":{const t=Math.max(p,i),e=n-t-S;this.style.setProperty("--dialog-left",`${t}px`),this.#m.x=p,this.style.setProperty("--dialog-max-width",`${e}px`);break}case"right":{const t=v-g,e=v-n,o=Math.max(t,e),s=v-o-i-S;this.#m.x=v-o-m,this.style.setProperty("--dialog-right",`${o}px`),this.style.setProperty("--dialog-max-width",`${s}px`);break}case"center":{const t=Math.min(e-S,l);let o=Math.max(u-.5*t,i);o=Math.min(o,n-t),this.style.setProperty("--dialog-left",`${o}px`),this.#m.x=u-.5*m,this.style.setProperty("--dialog-max-width",e-S+"px");break}default:a.assertNever(this.#b,`Unknown alignment type: ${this.#b}`)}switch(this.#y){case"top":this.style.setProperty("--dialog-top","0"),this.style.setProperty("--dialog-margin","auto"),this.style.setProperty("--dialog-margin-bottom",innerHeight-h+"px"),this.#m.y=h-D,this.style.setProperty("--dialog-offset-y","20px"),this.style.setProperty("--dialog-max-height",o-(innerHeight-h)-S+"px");break;case"bottom":this.style.setProperty("--dialog-top",`${c}px`),this.#m.y=h,this.style.setProperty("--dialog-offset-y","-20px"),this.style.setProperty("--dialog-max-height",o-(c-s)-S+"px");break;default:a.assertNever(this.#y,`Unknown position type: ${this.#y}`)}r.close(),r.style.visibility=""}}))})))}async#a(){if(!f)return;if(this.#p||this.hasAttribute("open"))return;this.#p=!0,this.#T(),await l.done(),this.#p=!1;const t=this.#E();t.hasAttribute("open")||t.showModal(),this.#c.dialogShownCallback&&await this.#c.dialogShownCallback(),this.#D(),document.body.addEventListener("keydown",this.#C)}#g(t){!this.#A(t)&&this.#c.closeOnScroll&&this.#E().hasAttribute("open")&&(this.#r(),this.dispatchEvent(new B))}#x(t){this.#E().hasAttribute("open")&&this.#c.closeOnESC&&t.key===a.KeyboardUtilities.ESCAPE_KEY&&(t.stopPropagation(),t.preventDefault(),this.#r(),this.dispatchEvent(new B))}#$(t){t.stopPropagation(),t.preventDefault(),this.#E().hasAttribute("open")&&this.#c.closeOnESC&&this.dispatchEvent(new B)}#d(){this.#i?.hasAttribute("open")&&this.#S!==document.body&&(this.#r(),this.dispatchEvent(new B))}#r(){!this.#u&&this.#E().hasAttribute("open")&&(this.#u=!0,l.write((()=>{this.#m.width=0,this.removeAttribute("open"),this.#E().close(),this.#u=!1,document.body.removeEventListener("keydown",this.#C)})))}getDialogBounds(){return this.#v}#I(){return this.#c.dialogTitle||this.#c.closeButton?v`
        <span class="dialog-header-text">${this.#c.dialogTitle}</span>
        ${this.#c.closeButton?v`
          <devtools-button
            @click=${this.#r}
            .data=${{variant:"toolbar",iconName:"cross",title:w(y.close),size:"SMALL"}}
            jslog=${d.close().track({click:!0})}
          ></devtools-button>
        `:e.nothing}
    `:null}#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("Dialog render was not scheduled");f?(e.render(v`
      <dialog @click=${this.#B} @pointermove=${this.#B} @cancel=${this.#$}
              jslog=${d.dialog(this.#c.jslogContext).track({resize:!0,keydown:"Escape"}).parent("mapped")}>
        <div id="content">
          <div class="dialog-header">${this.#I()}</div>
          <div class='dialog-content'>
            <slot></slot>
          </div>
        </div>
      </dialog>
    `,this.#t,{host:this}),d.setMappedParent(this.#E(),this.parentElementOrShadowHost())):e.render(v`
        <slot></slot>
      `,this.#t,{host:this})}}customElements.define("devtools-dialog",x);class P extends Event{static eventName="pointerleftdialog";constructor(){super(P.eventName,{bubbles:!0,composed:!0})}}class E extends Event{static eventName="clickoutsidedialog";constructor(){super(E.eventName,{bubbles:!0,composed:!0})}}class B extends Event{static eventName="forceddialogclose";constructor(){super(B.eventName,{bubbles:!0,composed:!0})}}var A=Object.freeze({__proto__:null,CONNECTOR_HEIGHT:D,ClickOutsideDialogEvent:E,DIALOG_PADDING_FROM_WINDOW:S,DIALOG_SIDE_PADDING:5,DIALOG_VERTICAL_PADDING:3,Dialog:x,ForcedDialogClose:B,MODAL:C,PointerLeftDialogEvent:P}),z={cssText:`.keybinds-list{display:flex;flex-direction:column;margin:0;padding:0}.keybinds-list-item{display:grid;align-items:baseline;justify-content:space-between;grid-template-rows:1fr;grid-template-columns:1fr var(--sys-size-11) 1fr;border-bottom:var(--sys-size-1) solid var(--sys-color-divider);padding:var(--sys-size-4) 0;&:last-of-type{border-bottom:unset}.keybinds-list-title{grid-row:1/1}.shortcuts-for-actions{grid-area:auto/3/auto/span 1}}.keys-container{display:flex;gap:var(--sys-size-3)}.shortcuts-for-actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sys-size-3)}.nav-radio-buttons{display:flex;flex-direction:column;border-bottom:var(--sys-size-1) solid var(--sys-color-divider);padding-bottom:var(--sys-size-5);& label{display:flex;font:var(--sys-typescale-body3-regular);gap:var(--sys-size-2)}}.keybinds-key{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:var(--sys-size-4);min-width:var(--sys-size-11);height:var(--sys-size-11);font:var(--sys-typescale-body5-medium);white-space:nowrap;border-radius:var(--sys-shape-corner-small);background:var(--sys-color-tonal-container)}\n/*# sourceURL=${import.meta.resolve("./shortcutDialog.css")} */\n`};const k=new CSSStyleSheet;k.replaceSync(z.cssText);const O={showShortcutTitle:"Show shortcuts",dialogTitle:"Keyboard shortcuts"},R=n.i18n.registerUIStrings("ui/components/dialogs/ShortcutDialog.ts",O),T=n.i18n.getLocalizedString.bind(void 0,R);class $ extends HTMLElement{#t=this.attachShadow({mode:"open"});#e=this.#o.bind(this);#j=[];#_=!1;#L=null;connectedCallback(){this.#t.adoptedStyleSheets=[k]}set data(e){this.#j=e.shortcuts,e.open&&(this.#_=e.open),t.ScheduledRender.scheduleRender(this,this.#e)}prependElement(t){this.#L=t}#o(){if(!t.ScheduledRender.isScheduledRender(this))throw new Error("Shortcut dialog render was not scheduled");o(i`
      <devtools-button-dialog .data=${{openOnRender:this.#_,closeButton:!0,dialogTitle:T(O.dialogTitle),variant:"toolbar",iconName:"help",iconTitle:T(O.showShortcutTitle)}}>
        <ul class="keybinds-list">
          ${this.#L?i`${this.#L}`:s}
          ${this.#j.map((t=>i`
              <li class="keybinds-list-item">
                <div class="keybinds-list-title">${t.title}</div>
                <div class="shortcuts-for-actions">
                  ${t.bindings.map((t=>i`
                    <div class="keys-container">
                      ${t.map((t=>i`
                          <span class="keybinds-key">${t}</span>
                      `))}
                    </div>
                  `))}
                  </div>
              </li>`))}
        </ul>
      </devtools-button-dialog>
      `,this.#t,{host:this})}}customElements.define("devtools-shortcut-dialog",$);var I=Object.freeze({__proto__:null,ShortcutDialog:$});export{p as ButtonDialog,A as Dialog,I as ShortcutDialog};