@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
276 lines (275 loc) • 94.2 kB
JavaScript
import*as e from"../../../ui/lit-html/lit-html.js";import*as t from"../../../ui/legacy/legacy.js";import*as s from"../../../core/i18n/i18n.js";import*as i from"../../../ui/components/buttons/buttons.js";import*as r from"../../../ui/components/icon_button/icon_button.js";import*as o from"../../../ui/components/input/input.js";import*as n from"../../../ui/visual_logging/visual_logging.js";import*as a from"../models/models.js";import*as l from"../../../ui/components/helpers/helpers.js";import*as c from"../../../core/host/host.js";import*as d from"../../../core/platform/platform.js";import*as p from"../../../core/sdk/sdk.js";import*as u from"../../../third_party/codemirror.next/codemirror.next.js";import*as h from"../../../ui/components/code_highlighter/code_highlighter.js";import"../../../ui/components/dialogs/dialogs.js";import*as g from"../../../ui/components/menus/menus.js";import*as v from"../../../ui/components/split_view/split_view.js";import*as m from"../../../ui/components/text_editor/text_editor.js";import*as b from"../extensions/extensions.js";import*as f from"../../../ui/components/panel_feedback/panel_feedback.js";import*as w from"../../../ui/components/panel_introduction_steps/panel_introduction_steps.js";import*as y from"../../../ui/components/suggestion_input/suggestion_input.js";import*as S from"../controllers/controllers.js";import*as x from"../util/util.js";const $=new CSSStyleSheet;$.replaceSync('*{margin:0;padding:0;box-sizing:border-box;font-size:inherit}.control{background:none;border:none;display:flex;flex-direction:column;align-items:center}.control[disabled]{filter:grayscale(100%);cursor:auto}.icon{display:flex;width:40px;height:40px;border-radius:50%;background:var(--sys-color-error-bright);margin-bottom:8px;position:relative;transition:background 200ms;justify-content:center;align-content:center;align-items:center}.icon::before{--override-white:#fff;box-sizing:border-box;content:"";display:block;width:14px;height:14px;border:1px solid var(--override-white);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--override-white)}.icon.square::before{border-radius:0}.icon.circle::before{border-radius:50%}.icon:hover{background:color-mix(in sRGB,var(--sys-color-error-bright),var(--sys-color-state-hover-on-prominent) 10%)}.icon:active{background:color-mix(in sRGB,var(--sys-color-error-bright),var(--sys-color-state-ripple-neutral-on-prominent) 16%)}.control[disabled] .icon:hover{background:var(--sys-color-error)}.label{font-size:12px;line-height:16px;text-align:center;letter-spacing:0.02em;color:var(--sys-color-on-surface)}\n/*# sourceURL=controlButton.css */\n');var k=self&&self.__decorate||function(e,t,s,i){var r,o=arguments.length,n=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,s,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(o<3?r(n):o>3?r(t,s,n):r(t,s))||n);return o>3&&n&&Object.defineProperty(t,s,n),n};const{html:T,Decorators:E,LitElement:R}=e,{customElement:C,property:I}=E;let N=class extends R{static styles=[$];constructor(){super(),this.label="",this.shape="square",this.disabled=!1}#e=e=>{this.disabled&&(e.stopPropagation(),e.preventDefault())};render(){return T`
<button
@click=${this.#e}
.disabled=${this.disabled}
class="control"
>
<div class="icon ${this.shape}"></div>
<div class="label">${this.label}</div>
</button>
`}};k([I()],N.prototype,"label",void 0),k([I()],N.prototype,"shape",void 0),k([I()],N.prototype,"disabled",void 0),N=k([C("devtools-control-button")],N);var B=Object.freeze({__proto__:null,get ControlButton(){return N}});const j=new CSSStyleSheet;j.replaceSync('*{margin:0;padding:0;outline:none;box-sizing:border-box;font-size:inherit}.wrapper{padding:24px;flex:1}h1{font-size:18px;line-height:24px;letter-spacing:0.02em;color:var(--sys-color-on-surface);margin:0;font-weight:normal}.row-label{font-weight:500;font-size:11px;line-height:16px;letter-spacing:0.8px;text-transform:uppercase;color:var(--sys-color-secondary);margin-bottom:8px;margin-top:32px;display:flex;align-items:center;gap:3px}.footer{display:flex;justify-content:center;border-top:1px solid var(--sys-color-divider);padding:12px;background:var(--sys-color-cdt-base-container)}.controls{display:flex}.error{margin:16px 0 0;padding:8px;background:var(--sys-color-error-container);color:var(--sys-color-error)}.row-label .link:focus-visible{outline:var(--sys-color-state-focus-ring) auto 1px}.header-wrapper{display:flex;align-items:baseline;justify-content:space-between}.checkbox-label{display:inline-flex;align-items:center;overflow:hidden;text-overflow:ellipsis;gap:4px;line-height:1.1;padding:4px}.checkbox-container{display:flex;flex-flow:row wrap;gap:10px}input[type="checkbox"]:focus-visible{outline:var(--sys-color-state-focus-ring) auto 1px}devtools-icon[name="help"]{width:16px;height:16px}\n/*# sourceURL=createRecordingView.css */\n');const M={recordingName:"Recording name",startRecording:"Start recording",createRecording:"Create a new recording",recordingNameIsRequired:"Recording name is required",selectorAttribute:"Selector attribute",cancelRecording:"Cancel recording",selectorTypeCSS:"CSS",selectorTypePierce:"Pierce",selectorTypeARIA:"ARIA",selectorTypeText:"Text",selectorTypeXPath:"XPath",selectorTypes:"Selector types to record",includeNecessarySelectors:"You must choose CSS, Pierce, or XPath as one of your options. Only these selectors are guaranteed to be recorded since ARIA and text selectors may not be unique.",learnMore:"Learn more"},A=s.i18n.registerUIStrings("panels/recorder/components/CreateRecordingView.ts",M),P=s.i18n.getLocalizedString.bind(void 0,A);class L extends Event{static eventName="recordingstarted";name;selectorAttribute;selectorTypesToRecord;constructor(e,t,s){super(L.eventName,{}),this.name=e,this.selectorAttribute=s||void 0,this.selectorTypesToRecord=t}}class F extends Event{static eventName="recordingcancelled";constructor(){super(F.eventName)}}class O extends HTMLElement{static litTagName=e.literal`devtools-create-recording-view`;#t=this.attachShadow({mode:"open"});#s="";#i;#r;constructor(){super(),this.setAttribute("jslog",`${n.section("create-recording-view")}`)}connectedCallback(){this.#t.adoptedStyleSheets=[j,o.textInputStyles,o.checkboxStyles],this.#o(),this.#t.querySelector("input")?.focus()}set data(e){this.#r=e.recorderSettings,this.#s=this.#r.defaultTitle}#n(e){this.#i&&(this.#i=void 0,this.#o());"Enter"===e.key&&(this.startRecording(),e.stopPropagation(),e.preventDefault())}startRecording(){const e=this.#t.querySelector("#user-flow-name");if(!e)throw new Error("input#user-flow-name not found");if(!this.#r)throw new Error("settings not set");if(!e.value.trim())return this.#i=new Error(P(M.recordingNameIsRequired)),void this.#o();const t=this.#t.querySelectorAll(".selector-type input[type=checkbox]"),s=[];for(const e of t){const t=e,i=t.value;t.checked&&s.push(i)}if(!s.includes(a.Schema.SelectorType.CSS)&&!s.includes(a.Schema.SelectorType.XPath)&&!s.includes(a.Schema.SelectorType.Pierce))return this.#i=new Error(P(M.includeNecessarySelectors)),void this.#o();for(const e of Object.values(a.Schema.SelectorType))this.#r.setSelectorByType(e,s.includes(e));const i=this.#t.querySelector("#selector-attribute").value.trim();this.#r.selectorAttribute=i,this.dispatchEvent(new L(e.value.trim(),s,i))}#a(){this.dispatchEvent(new F)}#l=()=>{this.#t.querySelector("#user-flow-name")?.select()};#o(){const t=new Map([[a.Schema.SelectorType.ARIA,P(M.selectorTypeARIA)],[a.Schema.SelectorType.CSS,P(M.selectorTypeCSS)],[a.Schema.SelectorType.Text,P(M.selectorTypeText)],[a.Schema.SelectorType.XPath,P(M.selectorTypeXPath)],[a.Schema.SelectorType.Pierce,P(M.selectorTypePierce)]]);e.render(e.html`
<div class="wrapper">
<div class="header-wrapper">
<h1>${P(M.createRecording)}</h1>
<${i.Button.Button.litTagName}
title=${P(M.cancelRecording)}
jslog=${n.close().track({click:!0})}
.data=${{variant:"icon",size:"SMALL",iconName:"cross"}}
@click=${this.#a}
></${i.Button.Button.litTagName}>
</div>
<label class="row-label" for="user-flow-name">${P(M.recordingName)}</label>
<input
value=${this.#s}
@focus=${this.#l}
@keydown=${this.#n}
jslog=${n.textField("user-flow-name").track({change:!0})}
class="devtools-text-input"
id="user-flow-name"
/>
<label class="row-label" for="selector-attribute">
<span>${P(M.selectorAttribute)}</span>
<x-link
class="link" href="https://g.co/devtools/recorder#selector"
title=${P(M.learnMore)}
jslog=${n.link("recorder-selector-help").track({click:!0})}>
<${r.Icon.Icon.litTagName} name="help">
</${r.Icon.Icon.litTagName}>
</x-link>
</label>
<input
value=${this.#r?.selectorAttribute}
placeholder="data-testid"
@keydown=${this.#n}
jslog=${n.textField("selector-attribute").track({change:!0})}
class="devtools-text-input"
id="selector-attribute"
/>
<label class="row-label">
<span>${P(M.selectorTypes)}</span>
<x-link
class="link" href="https://g.co/devtools/recorder#selector"
title=${P(M.learnMore)}
jslog=${n.link("recorder-selector-help").track({click:!0})}>
<${r.Icon.Icon.litTagName} name="help">
</${r.Icon.Icon.litTagName}>
</x-link>
</label>
<div class="checkbox-container">
${Object.values(a.Schema.SelectorType).map((s=>{const i=this.#r?.getSelectorByType(s);return e.html`
<label class="checkbox-label selector-type">
<input
@keydown=${this.#n}
.value=${s}
jslog=${n.toggle().track({click:!0}).context(`selector-${s}`)}
checked=${e.Directives.ifDefined(i||void 0)}
type="checkbox"
/>
${t.get(s)||s}
</label>
`}))}
</div>
${this.#i&&e.html`
<div class="error" role="alert">
${this.#i.message}
</div>
`}
</div>
<div class="footer">
<div class="controls">
<devtools-control-button
@click=${this.startRecording}
.label=${P(M.startRecording)}
.shape=${"circle"}
jslog=${n.action("chrome-recorder.start-recording").track({click:!0})}
title=${a.Tooltip.getTooltipForActions(P(M.startRecording),"chrome-recorder.start-recording")}
></devtools-control-button>
</div>
</div>
`,this.#t,{host:this})}}customElements.define("devtools-create-recording-view",O);var D=Object.freeze({__proto__:null,RecordingStartedEvent:L,RecordingCancelledEvent:F,CreateRecordingView:O});const z=new CSSStyleSheet;z.replaceSync("*{margin:0;padding:0;box-sizing:border-box;font-size:inherit}*:focus,\n*:focus-visible{outline:none}.wrapper{padding:24px}.header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}h1{font-size:16px;line-height:19px;color:var(--sys-color-on-surface);font-weight:normal}.icon,\n.icon devtools-icon{width:20px;height:20px;color:var(--sys-color-primary)}.table{margin-top:35px}.title{font-size:13px;color:var(--sys-color-on-surface);margin-left:10px;flex:1;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.row{display:flex;align-items:center;padding-right:5px;height:28px;border-bottom:1px solid var(--sys-color-divider)}.row:focus-within,\n.row:hover{background-color:var(--sys-color-state-hover-on-subtle)}.row:last-child{border-bottom:none}.actions{display:flex;align-items:center}.actions button{border:none;background-color:transparent;width:24px;height:24px;border-radius:50%}.actions .divider{width:1px;height:17px;background-color:var(--sys-color-divider);margin:0 6px}\n/*# sourceURL=recordingListView.css */\n");const V={savedRecordings:"Saved recordings",createRecording:"Create a new recording",playRecording:"Play recording",deleteRecording:"Delete recording",openRecording:"Open recording"},_=s.i18n.registerUIStrings("panels/recorder/components/RecordingListView.ts",V),U=s.i18n.getLocalizedString.bind(void 0,_);class K extends Event{static eventName="createrecording";constructor(){super(K.eventName)}}class q extends Event{storageName;static eventName="deleterecording";constructor(e){super(q.eventName),this.storageName=e}}class G extends Event{storageName;static eventName="openrecording";constructor(e){super(G.eventName),this.storageName=e}}class H extends Event{storageName;static eventName="playrecording";constructor(e){super(H.eventName),this.storageName=e}}class W extends HTMLElement{static litTagName=e.literal`devtools-recording-list-view`;#t=this.attachShadow({mode:"open"});#c={recordings:[],replayAllowed:!0};constructor(){super()}connectedCallback(){this.#t.adoptedStyleSheets=[z],l.ScheduledRender.scheduleRender(this,this.#o)}set recordings(e){this.#c.recordings=e,l.ScheduledRender.scheduleRender(this,this.#o)}set replayAllowed(e){this.#c.replayAllowed=e,l.ScheduledRender.scheduleRender(this,this.#o)}#d(){this.dispatchEvent(new K)}#p(e,t){t.stopPropagation(),this.dispatchEvent(new q(e))}#u(e,t){t.stopPropagation(),this.dispatchEvent(new G(e))}#h(e,t){t.stopPropagation(),this.dispatchEvent(new H(e))}#n(e,t){"Enter"===t.key&&this.#u(e,t)}#g(e){e.stopPropagation()}#o=()=>{e.render(e.html`
<div class="wrapper">
<div class="header">
<h1>${U(V.savedRecordings)}</h1>
<${i.Button.Button.litTagName}
.variant=${"primary"}
@click=${this.#d}
title=${a.Tooltip.getTooltipForActions(U(V.createRecording),"chrome-recorder.create-recording")}
.jslogContext=${"create-recording"}
>
${U(V.createRecording)}
</${i.Button.Button.litTagName}>
</div>
<div class="table">
${this.#c.recordings.map((t=>e.html`
<div
role="button"
tabindex="0"
aria-label=${U(V.openRecording)}
class="row"
@keydown=${this.#n.bind(this,t.storageName)}
@click=${this.#u.bind(this,t.storageName)}
jslog=${n.item().track({click:!0}).context("recording")}>
<div class="icon">
<${r.Icon.Icon.litTagName} name="flow">
</${r.Icon.Icon.litTagName}>
</div>
<div class="title">${t.name}</div>
<div class="actions">
${this.#c.replayAllowed?e.html`
<${i.Button.Button.litTagName}
title=${U(V.playRecording)}
.data=${{variant:"icon",iconName:"play",jslogContext:"play-recording"}}
@click=${this.#h.bind(this,t.storageName)}
@keydown=${this.#g}
></${i.Button.Button.litTagName}>
<div class="divider"></div>`:""}
<${i.Button.Button.litTagName}
class="delete-recording-button"
title=${U(V.deleteRecording)}
.data=${{variant:"icon",iconName:"bin",jslogContext:"delete-recording"}}
@click=${this.#p.bind(this,t.storageName)}
@keydown=${this.#g}
></${i.Button.Button.litTagName}>
</div>
</div>
`))}
</div>
</div>
`,this.#t,{host:this})}}customElements.define("devtools-recording-list-view",W);var X=Object.freeze({__proto__:null,CreateRecordingEvent:K,DeleteRecordingEvent:q,OpenRecordingEvent:G,PlayRecordingEvent:H,RecordingListView:W});const Y=new CSSStyleSheet;Y.replaceSync("*{margin:0;padding:0;outline:none;box-sizing:border-box;font-size:inherit}.extension-view{display:flex;flex-direction:column;height:100%}main{flex:1}iframe{border:none;height:100%;width:100%}header{display:flex;padding:3px 8px;justify-content:space-between;border-bottom:1px solid var(--sys-color-divider)}header > div{align-self:center}.icon{display:block;width:16px;height:16px;color:var(--sys-color-secondary)}.title{display:flex;flex-direction:row;gap:6px;color:var(--sys-color-secondary);align-items:center;font-weight:500}\n/*# sourceURL=extensionView.css */\n");const J={closeView:"Close",extension:"Content provided by a browser extension"},Q=s.i18n.registerUIStrings("panels/recorder/components/ExtensionView.ts",J),Z=s.i18n.getLocalizedString.bind(void 0,Q);class ee extends Event{static eventName="recorderextensionviewclosed";constructor(){super(ee.eventName,{bubbles:!0,composed:!0})}}class te extends HTMLElement{static litTagName=e.literal`devtools-recorder-extension-view`;#t=this.attachShadow({mode:"open"});#v;constructor(){super(),this.setAttribute("jslog",`${n.section("extension-view")}`)}connectedCallback(){this.#t.adoptedStyleSheets=[Y],this.#o()}disconnectedCallback(){this.#v&&b.ExtensionManager.ExtensionManager.instance().getView(this.#v.id).hide()}set descriptor(e){this.#v=e,this.#o(),b.ExtensionManager.ExtensionManager.instance().getView(e.id).show()}#m(){this.dispatchEvent(new ee)}#o(){if(!this.#v)return;const t=b.ExtensionManager.ExtensionManager.instance().getView(this.#v.id).frame();e.render(e.html`
<div class="extension-view">
<header>
<div class="title">
<${r.Icon.Icon.litTagName}
class="icon"
title=${Z(J.extension)}
name="extension">
</${r.Icon.Icon.litTagName}>
${this.#v.title}
</div>
<${i.Button.Button.litTagName}
title=${Z(J.closeView)}
jslog=${n.close().track({click:!0})}
.data=${{variant:"icon",size:"SMALL",iconName:"cross"}}
@click=${this.#m}
></${i.Button.Button.litTagName}>
</header>
<main>
${t}
<main>
</div>
`,this.#t,{host:this})}}customElements.define("devtools-recorder-extension-view",te);const se=new CSSStyleSheet;se.replaceSync('*{padding:0;margin:0;box-sizing:border-box;font-size:inherit}.wrapper{display:flex;flex-direction:row;flex:1;height:100%}.main{overflow:hidden;display:flex;flex-direction:column;flex:1}.sections{flex:1;min-height:0;overflow:hidden auto;background-color:var(--sys-color-cdt-base-container);z-index:0;position:relative;container:sections/inline-size}.section{display:flex;padding:0 16px;gap:8px;position:relative}.section::after{content:"";border-bottom:1px solid var(--sys-color-divider);position:absolute;left:0;right:0;bottom:0;z-index:-1}.section:last-child{margin-bottom:70px}.section:last-child::after{content:none}.screenshot-wrapper{flex:0 0 80px;padding-top:32px;z-index:2}@container sections (max-width: 400px){.screenshot-wrapper{display:none}}.screenshot{object-fit:cover;object-position:top center;max-width:100%;width:200px;height:auto;border:1px solid var(--sys-color-divider);border-radius:1px}.content{flex:1;min-width:0}.steps{flex:1;position:relative;align-self:flex-start;overflow:visible}.step{position:relative;padding-left:40px;margin:16px 0}.step .action{font-size:13px;line-height:16px;letter-spacing:0.03em}.recording{color:var(--sys-color-primary);font-style:italic;margin-top:8px;margin-bottom:0}.add-assertion-button{margin-top:8px}.details{max-width:240px;display:flex;flex-direction:column;align-items:flex-end}.url{font-size:12px;line-height:16px;letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--sys-color-secondary);max-width:100%;margin-bottom:16px}.header{align-items:center;border-bottom:1px solid var(--sys-color-divider);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:16px}.header-title-wrapper{max-width:100%}.header-title{align-items:center;display:flex;flex:1;max-width:100%}.header-title::before{content:"";min-width:12px;height:12px;display:inline-block;background:var(--sys-color-primary);border-radius:50%;margin-right:7px}#title-input{box-sizing:content-box;font-family:inherit;font-size:18px;line-height:22px;letter-spacing:0.02em;padding:1px 4px;border:1px solid transparent;border-radius:1px;word-break:break-all}#title-input:hover{border-color:var(--input-outline)}#title-input.has-error{border-color:var(--sys-color-error)}#title-input.disabled{color:var(--sys-color-state-disabled)}.title-input-error-text{margin-top:4px;margin-left:19px;color:var(--sys-color-error)}.title-button-bar{padding-left:2px;display:flex}#title-input:focus + .title-button-bar{display:none}.settings-row{padding:16px 28px;border-bottom:1px solid var(--sys-color-divider);display:flex;flex-flow:row wrap;justify-content:space-between}.settings-title{font-size:14px;line-height:24px;letter-spacing:0.03em;color:var(--sys-color-on-surface);display:flex;align-items:center;align-content:center;gap:5px;width:fit-content}.settings{margin-top:4px;display:flex;font-size:12px;line-height:20px;letter-spacing:0.03em;color:var(--sys-color-on-surface-subtle)}.settings.expanded{gap:10px}.settings .separator{width:1px;height:20px;background-color:var(--sys-color-divider);margin:0 5px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.actions .separator{width:1px;height:24px;background-color:var(--sys-color-divider)}.is-recording .header-title::before{background:var(--sys-color-error-bright)}.footer{display:flex;justify-content:center;border-top:1px solid var(--sys-color-divider);padding:12px;background:var(--sys-color-cdt-base-container);z-index:1}.controls{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.chevron{width:14px;height:14px;transform:rotate(-90deg);color:var(--sys-color-on-surface)}.expanded .chevron{transform:rotate(0)}.editable-setting{display:flex;flex-direction:row;gap:12px;align-items:center}.editable-setting devtools-select-menu{height:32px}.editable-setting .devtools-text-input{width:fit-content}.wrapping-label{display:inline-flex;align-items:center;gap:12px}.text-editor{height:100%;overflow:auto}.section-toolbar{display:flex;align-items:center;padding:3px 5px;justify-content:space-between;gap:3px}.section-toolbar > devtools-select-menu{height:24px;min-width:50px}.sections .section-toolbar{justify-content:flex-end}devtools-split-view{flex:1 1 0%;min-height:0}[slot="sidebar"]{display:flex;flex-direction:column;overflow:auto;height:100%;width:100%}[slot="sidebar"] .section-toolbar{border-bottom:1px solid var(--sys-color-divider)}.show-code{margin-right:14px;margin-top:8px}devtools-recorder-extension-view{flex:1}\n/*# sourceURL=recordingView.css */\n');const ie=new CSSStyleSheet;ie.replaceSync(".select-button{display:flex;gap:12px}.select-button devtools-button{position:relative}.select-menu-item-content-with-icon{display:flex;align-items:center}\n/*# sourceURL=selectButton.css */\n");class re extends Event{value;static eventName="selectbuttonclick";constructor(e){super(re.eventName,{bubbles:!0,composed:!0}),this.value=e}}class oe extends Event{value;static eventName="selectmenuselected";constructor(e){super(oe.eventName,{bubbles:!0,composed:!0}),this.value=e}}class ne extends HTMLElement{static litTagName=e.literal`devtools-select-button`;#t=this.attachShadow({mode:"open"});#c={disabled:!1,value:"",items:[],buttonLabel:"",groups:[],variant:"primary"};connectedCallback(){this.#t.adoptedStyleSheets=[ie],l.ScheduledRender.scheduleRender(this,this.#o)}get disabled(){return this.#c.disabled}set disabled(e){this.#c.disabled=e,l.ScheduledRender.scheduleRender(this,this.#o)}get items(){return this.#c.items}set items(e){this.#c.items=e,l.ScheduledRender.scheduleRender(this,this.#o)}set buttonLabel(e){this.#c.buttonLabel=e}set groups(e){this.#c.groups=e,l.ScheduledRender.scheduleRender(this,this.#o)}get value(){return this.#c.value}set value(e){this.#c.value=e,l.ScheduledRender.scheduleRender(this,this.#o)}get variant(){return this.#c.variant}set variant(e){this.#c.variant=e,l.ScheduledRender.scheduleRender(this,this.#o)}set action(e){this.#c.action=e,l.ScheduledRender.scheduleRender(this,this.#o)}#b(e){e.stopPropagation(),this.dispatchEvent(new re(this.#c.value))}#f(e){this.dispatchEvent(new oe(e.itemValue)),l.ScheduledRender.scheduleRender(this,this.#o)}#w(t,s){return e.html`
<${g.Menu.MenuItem.litTagName} .value=${t.value} .selected=${t.value===s.value} jslog=${n.item(d.StringUtilities.toKebabCase(t.value)).track({click:!0})}>
${t.label()}
</${g.Menu.MenuItem.litTagName}>
`}#y(t,s){return e.html`
<${g.Menu.MenuGroup.litTagName} .name=${t.name}>
${t.items.map((e=>this.#w(e,s)))}
</${g.Menu.MenuGroup.litTagName}>
`}#S(e){return this.#c.action?a.Tooltip.getTooltipForActions(e,this.#c.action):""}#o=()=>{const t=Boolean(this.#c.groups.length),s=t?this.#c.groups.flatMap((e=>e.items)):this.#c.items,r=s.find((e=>e.value===this.#c.value))||s[0];if(!r)return;const o={primary:"primary"===this.#c.variant,secondary:"outlined"===this.#c.variant},n="outlined"===this.#c.variant?"outlined":"primary",a=r.buttonLabel?r.buttonLabel():r.label();e.render(e.html`
<div class="select-button" title=${this.#S(a)||e.nothing}>
<${g.SelectMenu.SelectMenu.litTagName}
class=${e.Directives.classMap(o)}
@selectmenuselected=${this.#f}
?disabled=${this.#c.disabled}
.showArrow=${!0}
.sideButton=${!1}
.showSelectedItem=${!0}
.disabled=${this.#c.disabled}
.buttonTitle=${e.html`${a}`}
.position=${"bottom"}
.horizontalAlignment=${"right"}
>
${t?this.#c.groups.map((e=>this.#y(e,r))):this.#c.items.map((e=>this.#w(e,r)))}
</${g.SelectMenu.SelectMenu.litTagName}>
${r?e.html`
<${i.Button.Button.litTagName}
.disabled=${this.#c.disabled}
.variant=${n}
.iconName=${r.buttonIconName}
@click=${this.#b}>
${this.#c.buttonLabel}
</${i.Button.Button.litTagName}>`:""}
</div>`,this.#t,{host:this})}}customElements.define("devtools-select-button",ne);var ae=Object.freeze({__proto__:null,SelectButtonClickEvent:re,SelectMenuSelectedEvent:oe,SelectButton:ne});const le={Replay:"Replay",ReplayNormalButtonLabel:"Normal speed",ReplayNormalItemLabel:"Normal (Default)",ReplaySlowButtonLabel:"Slow speed",ReplaySlowItemLabel:"Slow",ReplayVerySlowButtonLabel:"Very slow speed",ReplayVerySlowItemLabel:"Very slow",ReplayExtremelySlowButtonLabel:"Extremely slow speed",ReplayExtremelySlowItemLabel:"Extremely slow",speedGroup:"Speed",extensionGroup:"Extensions"},ce=[{value:"normal",buttonIconName:"play",buttonLabel:()=>ue(le.ReplayNormalButtonLabel),label:()=>ue(le.ReplayNormalItemLabel)},{value:"slow",buttonIconName:"play",buttonLabel:()=>ue(le.ReplaySlowButtonLabel),label:()=>ue(le.ReplaySlowItemLabel)},{value:"very_slow",buttonIconName:"play",buttonLabel:()=>ue(le.ReplayVerySlowButtonLabel),label:()=>ue(le.ReplayVerySlowItemLabel)},{value:"extremely_slow",buttonIconName:"play",buttonLabel:()=>ue(le.ReplayExtremelySlowButtonLabel),label:()=>ue(le.ReplayExtremelySlowItemLabel)}],de={normal:1,slow:2,very_slow:3,extremely_slow:4},pe=s.i18n.registerUIStrings("panels/recorder/components/ReplaySection.ts",le),ue=s.i18n.getLocalizedString.bind(void 0,pe);class he extends Event{speed;extension;static eventName="startreplay";constructor(e,t){super(he.eventName,{bubbles:!0,composed:!0}),this.speed=e,this.extension=t}}const ge="extension";class ve extends HTMLElement{static litTagName=e.literal`devtools-replay-section`;#t=this.attachShadow({mode:"open"});#x=this.#o.bind(this);#c={disabled:!1};#$;#k=[];set data(e){this.#$=e.settings,this.#k=e.replayExtensions}get disabled(){return this.#c.disabled}set disabled(e){this.#c.disabled=e,l.ScheduledRender.scheduleRender(this,this.#x)}connectedCallback(){l.ScheduledRender.scheduleRender(this,this.#x)}#T(e){const t=e.value;this.#$&&e.value&&(this.#$.speed=t,this.#$.replayExtension=""),c.userMetrics.recordingReplaySpeed(de[t]),l.ScheduledRender.scheduleRender(this,this.#x)}#E(e){if(e.stopPropagation(),e.value&&e.value.startsWith(ge)){this.#$&&(this.#$.replayExtension=e.value);const t=Number(e.value.substring(9));return this.dispatchEvent(new he("normal",this.#k[t])),void l.ScheduledRender.scheduleRender(this,this.#x)}this.dispatchEvent(new he(this.#$?this.#$.speed:"normal")),l.ScheduledRender.scheduleRender(this,this.#x)}#o(){const t=[{name:ue(le.speedGroup),items:ce}];this.#k.length&&t.push({name:ue(le.extensionGroup),items:this.#k.map(((e,t)=>({value:ge+t,buttonIconName:"play",buttonLabel:()=>e.getName(),label:()=>e.getName()})))}),e.render(e.html`
<${ne.litTagName}
@selectmenuselected=${this.#T}
@selectbuttonclick=${this.#E}
.variant=${"primary"}
.showItemDivider=${!1}
.disabled=${this.#c.disabled}
.action=${"chrome-recorder.replay-recording"}
.value=${this.#$?.replayExtension||this.#$?.speed}
.buttonLabel=${ue(le.Replay)}
.groups=${t}
jslog=${n.action("chrome-recorder.replay-recording").track({click:!0})}>
</${ne.litTagName}>`,this.#t,{host:this})}}customElements.define("devtools-replay-section",ve);var me=Object.freeze({__proto__:null,StartReplayEvent:he,ReplaySection:ve});const be=new CSSStyleSheet;be.replaceSync("*{margin:0;padding:0;box-sizing:border-box;font-size:inherit}.title-container{max-width:calc(100% - 18px);font-size:13px;line-height:16px;letter-spacing:0.03em;display:flex;flex-direction:row;gap:3px;outline-offset:3px}.action{display:flex;align-items:flex-start}.title{flex:1;min-width:0}.is-start-of-group .title{font-weight:bold}.error-icon{display:none}.breakpoint-icon{visibility:hidden;cursor:pointer;opacity:0%;fill:var(--sys-color-primary);stroke:#1a73e8;transform:translate(-1.92px,-3px)}.circle-icon{fill:var(--sys-color-primary);stroke:var(--sys-color-cdt-base-container);stroke-width:4px;r:5px;cx:8px;cy:8px}.is-start-of-group .circle-icon{r:7px;fill:var(--sys-color-cdt-base-container);stroke:var(--sys-color-primary);stroke-width:2px}.step.is-success .circle-icon{fill:var(--sys-color-primary);stroke:var(--sys-color-primary)}.step.is-current .circle-icon{stroke-dasharray:24 10;animation:rotate 1s linear infinite;fill:var(--sys-color-cdt-base-container);stroke:var(--sys-color-primary);stroke-width:2px}.error{margin:16px 0 0;padding:8px;background:var(--sys-color-error-container);color:var(--sys-color-error);position:relative}@keyframes rotate{0%{transform:translate(8px,8px) rotate(0) translate(-8px,-8px)}100%{transform:translate(8px,8px) rotate(360deg) translate(-8px,-8px)}}.step.is-error .circle-icon{fill:var(--sys-color-error);stroke:var(--sys-color-error)}.step.is-error .error-icon{display:block;transform:translate(4px,4px)}:host-context(.was-successful) .circle-icon{animation:flash-circle 2s}:host-context(.was-successful) .breakpoint-icon{animation:flash-breakpoint-icon 2s}@keyframes flash-circle{25%{fill:var(--override-color-recording-successful-text);stroke:var(--override-color-recording-successful-text)}75%{fill:var(--override-color-recording-successful-text);stroke:var(--override-color-recording-successful-text)}}@keyframes flash-breakpoint-icon{25%{fill:var(--override-color-recording-successful-text);stroke:var(--override-color-recording-successful-text)}75%{fill:var(--override-color-recording-successful-text);stroke:var(--override-color-recording-successful-text)}}.chevron{width:14px;height:14px;transition:200ms;position:absolute;top:18px;left:24px;transform:rotate(-90deg);color:var(--sys-color-on-surface)}.expanded .chevron{transform:rotate(0deg)}.is-start-of-group .chevron{top:34px}.details{display:none;margin-top:8px;position:relative}.expanded .details{display:block}.step-details{overflow:auto}devtools-recorder-step-editor{border:1px solid var(--sys-color-neutral-outline);padding:3px 6px 6px;margin-left:-6px;border-radius:3px}devtools-recorder-step-editor:hover{border:1px solid var(--sys-color-neutral-outline)}devtools-recorder-step-editor.is-selected{background-color:color-mix(in sRGB,var(--sys-color-tonal-container),var(--sys-color-cdt-base-container) 50%);border:1px solid var(--sys-color-tonal-outline)}.summary{display:flex;flex-flow:row nowrap}.filler{flex-grow:1}.subtitle{font-weight:normal;color:var(--sys-color-on-surface-subtle);word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-title{word-break:break-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-actions{border:none;border-radius:0;height:24px;--override-select-menu-show-button-border-radius:0;--override-select-menu-show-button-outline:none;--override-select-menu-show-button-padding:0}.step.has-breakpoint .circle-icon{visibility:hidden}.step:not(.is-start-of-group).has-breakpoint .breakpoint-icon{visibility:visible;opacity:100%}.step:not(.is-start-of-group):not(.has-breakpoint) .icon:hover .circle-icon{transition:opacity 0.2s;opacity:0%}.step:not(.is-start-of-group):not(.has-breakpoint) .icon:hover .error-icon{visibility:hidden}.step:not(.is-start-of-group):not(.has-breakpoint) .icon:hover .breakpoint-icon{transition:opacity 0.2s;visibility:visible;opacity:50%}\n/*# sourceURL=stepView.css */\n");const fe=new CSSStyleSheet;fe.replaceSync("*{margin:0;padding:0;box-sizing:border-box;font-size:inherit}.timeline-section{position:relative;padding:16px 0 16px 40px;margin-left:8px;--override-color-recording-successful-text:#36a854;--override-color-recording-successful-background:#e6f4ea}.overlay{position:absolute;width:100vw;height:100%;left:calc(-32px - 80px);top:0;z-index:-1;pointer-events:none}@container (max-width: 400px){.overlay{left:-32px}}:hover .overlay{background:var(--sys-color-state-hover-on-subtle)}.is-selected .overlay{background:var(--sys-color-tonal-container)}:host-context(.is-stopped) .overlay{background:var(--sys-color-state-ripple-primary);outline:1px solid var(--sys-color-state-focus-ring);z-index:4}.is-start-of-group{padding-top:28px}.is-end-of-group{padding-bottom:24px}.icon{position:absolute;left:4px;transform:translateX(-50%);z-index:2}.bar{position:absolute;left:4px;display:block;transform:translateX(-50%);top:18px;height:calc(100% + 8px);z-index:1}.bar .background{fill:var(--sys-color-state-hover-on-subtle)}.bar .line{fill:var(--sys-color-primary)}.is-first-section .bar{top:32px;height:calc(100% - 8px);display:none}.is-first-section:not(.is-last-section) .bar{display:block}.is-last-section .bar .line{display:none}.is-last-section .bar .background{display:none}:host-context(.is-error) .bar .line{fill:var(--sys-color-error)}:host-context(.is-error) .bar .background{fill:var(--sys-color-error-container)}:host-context(.was-successful) .bar .background{animation:flash-background 2s}:host-context(.was-successful) .bar .line{animation:flash-line 2s}@keyframes flash-background{25%{fill:var(--override-color-recording-successful-background)}75%{fill:var(--override-color-recording-successful-background)}}@keyframes flash-line{25%{fill:var(--override-color-recording-successful-text)}75%{fill:var(--override-color-recording-successful-text)}}\n/*# sourceURL=timelineSection.css */\n");class we extends HTMLElement{static litTagName=e.literal`devtools-timeline-section`;#R=!1;#C=!1;#I=!1;#N=!1;#B=!1;constructor(){super();this.attachShadow({mode:"open"}).adoptedStyleSheets=[fe]}set data(e){this.#I=e.isFirstSection,this.#N=e.isLastSection,this.#R=e.isEndOfGroup,this.#C=e.isStartOfGroup,this.#B=e.isSelected,this.#o()}connectedCallback(){this.#o()}#o(){const t={"timeline-section":!0,"is-end-of-group":this.#R,"is-start-of-group":this.#C,"is-first-section":this.#I,"is-last-section":this.#N,"is-selected":this.#B};e.render(e.html`
<div class=${e.Directives.classMap(t)}>
<div class="overlay"></div>
<div class="icon"><slot name="icon"></slot></div>
<svg width="24" height="100%" class="bar">
<rect class="line" x="7" y="0" width="2" height="100%" />
</svg>
<slot></slot>
</div>
`,this.shadowRoot,{host:this})}}customElements.define("devtools-timeline-section",we);var ye=Object.freeze({__proto__:null,TimelineSection:we});const Se={setViewportClickTitle:"Set viewport",customStepTitle:"Custom step",clickStepTitle:"Click",doubleClickStepTitle:"Double click",hoverStepTitle:"Hover",emulateNetworkConditionsStepTitle:"Emulate network conditions",changeStepTitle:"Change",closeStepTitle:"Close",scrollStepTitle:"Scroll",keyUpStepTitle:"Key up",navigateStepTitle:"Navigate",keyDownStepTitle:"Key down",waitForElementStepTitle:"Wait for element",waitForExpressionStepTitle:"Wait for expression",elementRoleButton:"Button",elementRoleInput:"Input",elementRoleFallback:"Element",addStepBefore:"Add step before",addStepAfter:"Add step after",removeStep:"Remove step",openStepActions:"Open step actions",addBreakpoint:"Add breakpoint",removeBreakpoint:"Remove breakpoint",copyAs:"Copy as",stepManagement:"Manage steps",breakpoints:"Breakpoints"},xe=s.i18n.registerUIStrings("panels/recorder/components/StepView.ts",Se),$e=s.i18n.getLocalizedString.bind(void 0,xe);class ke extends Event{static eventName="captureselectors";data;constructor(e){super(ke.eventName,{bubbles:!0,composed:!0}),this.data=e}}class Te extends Event{static eventName="stopselectorscapture";constructor(){super(Te.eventName,{bubbles:!0,composed:!0})}}class Ee extends Event{static eventName="copystep";step;constructor(e){super(Ee.eventName,{bubbles:!0,composed:!0}),this.step=e}}class Re extends Event{static eventName="stepchanged";currentStep;newStep;constructor(e,t){super(Re.eventName,{bubbles:!0,composed:!0}),this.currentStep=e,this.newStep=t}}class Ce extends Event{static eventName="addstep";position;stepOrSection;constructor(e,t){super(Ce.eventName,{bubbles:!0,composed:!0}),this.stepOrSection=e,this.position=t}}class Ie extends Event{static eventName="removestep";step;constructor(e){super(Ie.eventName,{bubbles:!0,composed:!0}),this.step=e}}class Ne extends Event{static eventName="addbreakpoint";index;constructor(e){super(Ne.eventName,{bubbles:!0,composed:!0}),this.index=e}}class Be extends Event{static eventName="removebreakpoint";index;constructor(e){super(Be.eventName,{bubbles:!0,composed:!0}),this.index=e}}const je="copy-step-as-";function Me(e){if(!e||!("selectors"in e))return"";const t=e.selectors.flat().find((e=>e.startsWith("aria/")));if(!t)return"";const s=t.match(/^aria\/(.+?)(\[role="(.+)"\])?$/);return s?`${function(e){switch(e){case"button":return $e(Se.elementRoleButton);case"input":return $e(Se.elementRoleInput);default:return $e(Se.elementRoleFallback)}}(s[3])} "${s[1]}"`:""}function Ae(t,s,o){if(!t.step&&!t.section)return;const l={step:!0,expanded:t.showDetails,"is-success":"success"===t.state,"is-current":"current"===t.state,"is-outstanding":"outstanding"===t.state,"is-error":"error"===t.state,"is-stopped":"stopped"===t.state,"is-start-of-group":t.isStartOfGroup,"is-first-section":t.isFirstSection,"has-breakpoint":t.hasBreakpoint},c=Boolean(t.step),d=function(t){if(t.section)return t.section.title?t.section.title:e.html`<span class="fallback">(No Title)</span>`;if(!t.step)throw new Error("Missing both step and section");switch(t.step.type){case a.Schema.StepType.CustomStep:return $e(Se.customStepTitle);case a.Schema.StepType.SetViewport:return $e(Se.setViewportClickTitle);case a.Schema.StepType.Click:return $e(Se.clickStepTitle);case a.Schema.StepType.DoubleClick:return $e(Se.doubleClickStepTitle);case a.Schema.StepType.Hover:return $e(Se.hoverStepTitle);case a.Schema.StepType.EmulateNetworkConditions:return $e(Se.emulateNetworkConditionsStepTitle);case a.Schema.StepType.Change:return $e(Se.changeStepTitle);case a.Schema.StepType.Close:return $e(Se.closeStepTitle);case a.Schema.StepType.Scroll:return $e(Se.scrollStepTitle);case a.Schema.StepType.KeyUp:return $e(Se.keyUpStepTitle);case a.Schema.StepType.KeyDown:return $e(Se.keyDownStepTitle);case a.Schema.StepType.WaitForElement:return $e(Se.waitForElementStepTitle);case a.Schema.StepType.WaitForExpression:return $e(Se.waitForExpressionStepTitle);case a.Schema.StepType.Navigate:return $e(Se.navigateStepTitle)}}({step:t.step,section:t.section}),p=t.step?Me():u?u.url:"";var u;e.render(e.html`
<${we.litTagName} .data=${{isFirstSection:t.isFirstSection,isLastSection:t.isLastSection,isStartOfGroup:t.isStartOfGroup,isEndOfGroup:t.isEndOfGroup,isSelected:t.isSelected}} @contextmenu=${t.onStepContextMenu} data-step-index=${t.stepIndex} data-section-index=${t.sectionIndex} class=${e.Directives.classMap(l)}>
<svg slot="icon" width="24" height="24" height="100%" class="icon">
<circle class="circle-icon"/>
<g class="error-icon">
<path d="M1.5 1.5L6.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.5 6.5L6.5 1.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<path @click=${t.onBreakpointClick} jslog=${n.action("breakpoint").track({click:!0})} class="breakpoint-icon" d="M2.5 5.5H17.7098L21.4241 12L17.7098 18.5H2.5V5.5Z"/>
</svg>
<div class="summary">
<div class="title-container ${c?"action":""}"
@click=${c&&t.toggleShowDetails}
@keydown=${c&&t.onToggleShowDetailsKeydown}
tabindex="0"
jslog=${n.sectionHeader().track({click:!0})}
aria-role=${c?"button":""}
aria-label=${c?"Show details for step":""}
>
${c?e.html`<${r.Icon.Icon.litTagName}
class="chevron"
jslog=${n.expand().track({click:!0})}
name="triangle-down">
</${r.Icon.Icon.litTagName}>`:""}
<div class="title">
<div class="main-title" title=${d}>${d}</div>
<div class="subtitle" title=${p}>${p}</div>
</div>
</div>
<div class="filler"></div>
${function(t){return e.html`
<${i.Button.Button.litTagName}
class="step-actions"
title=${$e(Se.openStepActions)}
aria-label=${$e(Se.openStepActions)}
@click=${t.onStepContextMenu}
@keydown=${e=>{e.stopPropagation()}}
jslog=${n.dropDown("step-actions").track({click:!0})}
.data=${{variant:"icon",iconName:"dots-vertical",title:$e(Se.openStepActions)}}
></${i.Button.Button.litTagName}>
`}(t)}
</div>
<div class="details">
${t.step&&e.html`<devtools-recorder-step-editor
class=${t.isSelected?"is-selected":""}
.step=${t.step}
.disabled=${t.isPlaying}
@stepedited=${t.stepEdited}>
</devtools-recorder-step-editor>`}
${t.section?.causingStep&&e.html`<devtools-recorder-step-editor
.step=${t.section.causingStep}
.isTypeEditable=${!1}
.disabled=${t.isPlaying}
@stepedited=${t.stepEdited}>
</devtools-recorder-step-editor>`}
</div>
${t.error&&e.html`
<div class="error" role="alert">
${t.error.message}
</div>
`}
</${we.litTagName}>
`,o)}class Pe extends HTMLElement{static litTagName=e.literal`devtools-step-view`;#t=this.attachShadow({mode:"open"});#j=new IntersectionObserver((e=>{this.#M.isVisible=e[0].isIntersecting}));#M={state:"default",showDetails:!1,isEndOfGroup:!1,isStartOfGroup:!1,stepIndex:0,sectionIndex:0,isFirstSection:!1,isLastSection:!1,isRecording:!1,isPlaying:!1,isVisible:!1,hasBreakpoint:!1,removable:!0,builtInConverters:[],extensionConverters:[],isSelected:!1,recorderSettings:void 0,actions:[],stepEdited:this.#A.bind(this),onBreakpointClick:this.#P.bind(this),handleStepAction:this.#L.bind(this),toggleShowDetails:this.#F.bind(this),onToggleShowDetailsKeydown:this.#O.bind(this),onStepContextMenu:this.#D.bind(this)};#z=Ae;constructor(e){super(),e&&(this.#z=e),this.setAttribute("jslog",`${n.section("step-view")}`)}set data(e){const t=this.#M.state;this.#M.step=e.step,this.#M.section=e.section,this.#M.state=e.state,this.#M.error=e.error,this.#M.isEndOfGroup=e.isEndOfGroup,this.#M.isStartOfGroup=e.isStartOfGroup,this.#M.stepIndex=e.stepIndex,this.#M.sectionIndex=e.sectionIndex,this.#M.isFirstSection=e.isFirstSection,this.#M.isLastSection=e.isLastSection,this.#M.isRecording=e.isRecording,this.#M.isPlaying=e.isPlaying,this.#M.hasBreakpoint=e.hasBreakpoint,this.#M.removable=e.removable,this.#M.builtInConverters=e.builtInConverters,this.#M.extensionConverters=e.extensionConverters,this.#M.isSelected=e.isSelected,this.#M.recorderSettings=e.recorderSettings,this.#M.actions=this.#V(),this.#o(),this.#M.state===t||"current"!==this.#M.state||this.#M.isVisible||this.scrollIntoView()}get step(){return this.#M.step}get section(){return this.#M.section}connectedCallback(){this.#t.adoptedStyleSheets=[be],this.#j.observe(this),this.#o()}disconnectedCallback(){this.#j.unobserve(this)}#F(){this.#M.showDetails=!this.#M.showDetails,this.#o()}#O(e){const t=e;"Enter"!==t.key&&" "!==t.key||(this.#F(),e.stopPropagation(),e.preventDefault())}#A(e){const t=this.#M.step||this.#M.section?.causingStep;if(!t)throw new Error("Expected step.");this.dispatchEvent(new Re(t,e.data))}#L(e){switch(e.itemValue){case"add-step-before":{const e=this.#M.step||this.#M.section;if(!e)throw new Error("Expected step or section.");this.dispatchEvent(new Ce(e,"before"));break}case"add-step-after":{const e=this.#M.step||this.#M.section;if(!e)throw new Error("Expected step or section.");this.dispatchEvent(new Ce(e,"after"));break}case"remove-step":{const e=this.#M.section?.causingStep;if(!this.#M.step&&!e)throw new Error("Expected step.");this.dispatchEvent(new Ie(this.#M.step||e));break}case"add-breakpoint":if(!this.#M.step)throw new Error("Expected step");this.dispatchEvent(new Ne(this.#M.stepIndex));break;case"remove-breakpoint":if(!this.#M.step)throw new Error("Expected step");this.dispatchEvent(new Be(this.#M.stepIndex));break;default:{const t=e.itemValue;if(!t.startsWith(je))throw new Error("Unknown step action.");const s=this.#M.step||this.#M.section?.causingStep;if(!s)throw new Error("Step not found.");const i=t.substring(13);this.#M.recorderSettings&&(this.#M.recorderSettings.preferredCopyFormat=i),this.dispatchEvent(new Ee(structuredClone(s)))}}}#P(){this.#M.hasBreakpoint?this.dispatchEvent(new Be(this.#M.stepIndex)):this.dispatchEvent(new Ne(this.#M.stepIndex)),this.#o()}#V=()=>{const e=[];if(this.#M.isPlaying||(this.#M.step&&e.push({id:"add-step-before",label:$e(Se.addStepBefore),group:"stepManagement",groupTitle:$e(Se.stepManagement)}),e.push({id:"add-step-after",label:$e(Se.addStepAfter),group:"stepManagement",groupTitle:$e(Se.stepManagement)}),this.#M.removable&&e.push({id:"remove-step",group:"stepManagement",groupTitle:$e(Se.stepManagement),label:$e(Se.removeStep)})),this.#M.step&&!this.#M.isRecording&&(this.#M.hasBreakpoint?e.push({id:"remove-breakpoint",label:$e(Se.removeBreakpoint),group:"breakPointManagement",groupTitle:$e(Se.breakpoints)}):e.push({id:"add-breakpoint",label:$e(Se.addBreakpoint),group:"breakPointManagement",groupTitle:$e(Se.breakpoints)})),this.#M.step){for(const t of this.#M.builtInConverters||[])e.push({id:je+d.StringUtilities.toKebabCase(t.getId()),label:t.getFormatName(),group:"copy",groupTitle:$e(Se.copyAs)});for(const t of this.#M.extensionConverters||[])e.push({id:je+d.StringUtilities.toKebabCase(t.getId()),label:t.getFormatName(),group:"copy",groupTitle:$e(Se.copyAs),jslogContext:je+"extension"})}return e};#D(e){const s=e.target instanceof i.Button.Button?e.target:void 0,r=new t.ContextMenu.ContextMenu(e,{x:s?.getBoundingClientRect().left,y:s?.getBoundingClientRect().bottom}),o=this.#V(),n=o.filter((e=>e.id.startsWith(je))),a=o.filter((e=>!e.id.startsWith(je)));for(const e of a){r.section(e.group).appendItem(e.label,(()=>{this.#L(new g.Menu.MenuItemSelectedEvent(e.id))}),{jslogContext:e.id})}const l=n.find((e=>e.id===je+this.#M.recorderSettings?.preferredCopyFormat));if(l&&r.section("copy").appendItem(l.label,(()=>{this.#L(new g.Menu.MenuItemSelectedEvent(l.id))}),{jslogContext:l.id}),n.length){const e=r.section("copy").appendSubMenuItem($e(Se.copyAs),!1,"copy");for(const t of n)t!==l&&e.section(t.group).appendItem(t.label,(()=>{this.#L(new g.Menu.MenuItemSelectedEvent(t.id))}),{jslogContext:t.id})}r.show()}#o(){this.#z(this.#M,{},this.#t)}}customElements.define("devtools-step-view",Pe);var Le=Object.freeze({__proto__:null,CaptureSelectorsEvent:ke,StopSelectorsCaptureEvent:Te,CopyStepEvent:Ee,StepChanged:Re,AddStep:Ce,RemoveStep:Ie,AddBreakpointEvent:Ne,RemoveBreakpointEvent:Be,StepView:Pe});const Fe={mobile:"Mobile",desktop:"Desktop",latency:"Latency: {value} ms",upload:"Upload: {value}",download:"Download: {value}",editReplaySettings:"Edit replay settings",replaySettings:"Replay settings",default:"Default",environment:"Environment",screenshotForSection:"Screenshot for this section",editTitle:"Edit title",requiredTitleError:"Title is required",recording:"Recording…",endRecording:"End recording",recordingIsBeingStopped:"Stopping recording…",timeout:"Timeout: {value} ms",network:"Network",timeoutLabel:"Timeout",timeoutExplanation:"The timeout setting (in milliseconds) applies to every action when replaying the recording. For example, if a DOM element identified by a CSS selec