@react-native/debugger-frontend
Version:
Debugger frontend for React Native based on Chrome DevTools
173 lines (172 loc) • 111 kB
JavaScript
import*as e from"../../../ui/lit/lit.js";import*as t from"../../../ui/legacy/legacy.js";import"../../../ui/components/icon_button/icon_button.js";import*as o from"../../../core/i18n/i18n.js";import*as r from"../../../ui/components/buttons/buttons.js";import*as s from"../../../ui/components/input/input.js";import*as i from"../../../ui/visual_logging/visual_logging.js";import*as n from"../models/models.js";import*as a from"../../../ui/components/helpers/helpers.js";import*as l from"../extensions/extensions.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 v from"../../../ui/components/text_editor/text_editor.js";import*as g from"../../../ui/components/menus/menus.js";import*as b from"../../../ui/components/suggestion_input/suggestion_input.js";import*as m from"../controllers/controllers.js";import*as y from"../util/util.js";var f={cssText:`*{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;place-content:center 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=${import.meta.resolve("./controlButton.css")} */\n`},x=self&&self.__decorate||function(e,t,o,r){var s,i=arguments.length,n=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};const w=new CSSStyleSheet;w.replaceSync(f.cssText);const{html:S,Decorators:k,LitElement:$}=e,{customElement:E,property:C}=k;let R=class extends ${static styles=[w];constructor(){super(),this.label="",this.shape="square",this.disabled=!1}#e=e=>{this.disabled&&(e.stopPropagation(),e.preventDefault())};render(){return S`
<button
@click=${this.#e}
.disabled=${this.disabled}
class="control"
>
<div class="icon ${this.shape}"></div>
<div class="label">${this.label}</div>
</button>
`}};x([C()],R.prototype,"label",void 0),x([C()],R.prototype,"shape",void 0),x([C({type:Boolean})],R.prototype,"disabled",void 0),R=x([E("devtools-control-button")],R);var T=Object.freeze({__proto__:null,get ControlButton(){return R}}),I={cssText:`*{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=${import.meta.resolve("./createRecordingView.css")} */\n`};const N=new CSSStyleSheet;N.replaceSync(I.cssText);const{html:j,Directives:{ifDefined:A}}=e,z={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"},M=o.i18n.registerUIStrings("panels/recorder/components/CreateRecordingView.ts",z),B=o.i18n.getLocalizedString.bind(void 0,M);class P extends Event{static eventName="recordingstarted";name;selectorAttribute;selectorTypesToRecord;constructor(e,t,o){super(P.eventName,{}),this.name=e,this.selectorAttribute=o||void 0,this.selectorTypesToRecord=t}}class L extends Event{static eventName="recordingcancelled";constructor(){super(L.eventName)}}class O extends HTMLElement{#t=this.attachShadow({mode:"open"});#o="";#r;#s;constructor(){super(),this.setAttribute("jslog",`${i.section("create-recording-view")}`)}connectedCallback(){this.#t.adoptedStyleSheets=[N,s.textInputStyles,s.checkboxStyles],this.#i(),this.#t.querySelector("input")?.focus()}set data(e){this.#s=e.recorderSettings,this.#o=this.#s.defaultTitle}#n(e){this.#r&&(this.#r=void 0,this.#i());"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.#s)throw new Error("settings not set");if(!e.value.trim())return this.#r=new Error(B(z.recordingNameIsRequired)),void this.#i();const t=this.#t.querySelectorAll(".selector-type input[type=checkbox]"),o=[];for(const e of t){const t=e,r=t.value;t.checked&&o.push(r)}if(!o.includes(n.Schema.SelectorType.CSS)&&!o.includes(n.Schema.SelectorType.XPath)&&!o.includes(n.Schema.SelectorType.Pierce))return this.#r=new Error(B(z.includeNecessarySelectors)),void this.#i();for(const e of Object.values(n.Schema.SelectorType))this.#s.setSelectorByType(e,o.includes(e));const r=this.#t.querySelector("#selector-attribute").value.trim();this.#s.selectorAttribute=r,this.dispatchEvent(new P(e.value.trim(),o,r))}#a(){this.dispatchEvent(new L)}#l=()=>{this.#t.querySelector("#user-flow-name")?.select()};#i(){const t=new Map([[n.Schema.SelectorType.ARIA,B(z.selectorTypeARIA)],[n.Schema.SelectorType.CSS,B(z.selectorTypeCSS)],[n.Schema.SelectorType.Text,B(z.selectorTypeText)],[n.Schema.SelectorType.XPath,B(z.selectorTypeXPath)],[n.Schema.SelectorType.Pierce,B(z.selectorTypePierce)]]);e.render(j`
<div class="wrapper">
<div class="header-wrapper">
<h1>${B(z.createRecording)}</h1>
<devtools-button
title=${B(z.cancelRecording)}
jslog=${i.close().track({click:!0})}
.data=${{variant:"icon",size:"SMALL",iconName:"cross"}}
@click=${this.#a}
></devtools-button>
</div>
<label class="row-label" for="user-flow-name">${B(z.recordingName)}</label>
<input
value=${this.#o}
@focus=${this.#l}
@keydown=${this.#n}
jslog=${i.textField("user-flow-name").track({change:!0})}
class="devtools-text-input"
id="user-flow-name"
/>
<label class="row-label" for="selector-attribute">
<span>${B(z.selectorAttribute)}</span>
<x-link
class="link" href="https://g.co/devtools/recorder#selector"
title=${B(z.learnMore)}
jslog=${i.link("recorder-selector-help").track({click:!0})}>
<devtools-icon name="help">
</devtools-icon>
</x-link>
</label>
<input
value=${A(this.#s?.selectorAttribute)}
placeholder="data-testid"
@keydown=${this.#n}
jslog=${i.textField("selector-attribute").track({change:!0})}
class="devtools-text-input"
id="selector-attribute"
/>
<label class="row-label">
<span>${B(z.selectorTypes)}</span>
<x-link
class="link" href="https://g.co/devtools/recorder#selector"
title=${B(z.learnMore)}
jslog=${i.link("recorder-selector-help").track({click:!0})}>
<devtools-icon name="help">
</devtools-icon>
</x-link>
</label>
<div class="checkbox-container">
${Object.values(n.Schema.SelectorType).map((e=>{const o=this.#s?.getSelectorByType(e);return j`
<label class="checkbox-label selector-type">
<input
@keydown=${this.#n}
.value=${e}
jslog=${i.toggle().track({click:!0}).context(`selector-${e}`)}
?checked=${o}
type="checkbox"
/>
${t.get(e)||e}
</label>
`}))}
</div>
${this.#r&&j`
<div class="error" role="alert">
${this.#r.message}
</div>
`}
</div>
<div class="footer">
<div class="controls">
<devtools-control-button
@click=${this.startRecording}
.label=${B(z.startRecording)}
.shape=${"circle"}
jslog=${i.action("chrome-recorder.start-recording").track({click:!0})}
title=${n.Tooltip.getTooltipForActions(B(z.startRecording),"chrome-recorder.start-recording")}
></devtools-control-button>
</div>
</div>
`,this.#t,{host:this})}}customElements.define("devtools-create-recording-view",O);var F=Object.freeze({__proto__:null,CreateRecordingView:O,RecordingCancelledEvent:L,RecordingStartedEvent:P}),D={cssText:`*{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=${import.meta.resolve("./recordingListView.css")} */\n`};const V=new CSSStyleSheet;V.replaceSync(D.cssText);const{html:_}=e,K={savedRecordings:"Saved recordings",createRecording:"Create a new recording",playRecording:"Play recording",deleteRecording:"Delete recording",openRecording:"Open recording"},G=o.i18n.registerUIStrings("panels/recorder/components/RecordingListView.ts",K),U=o.i18n.getLocalizedString.bind(void 0,G);class H extends Event{static eventName="createrecording";constructor(){super(H.eventName)}}class q extends Event{storageName;static eventName="deleterecording";constructor(e){super(q.eventName),this.storageName=e}}class W extends Event{storageName;static eventName="openrecording";constructor(e){super(W.eventName),this.storageName=e}}let X=class e extends Event{storageName;static eventName="playrecording";constructor(t){super(e.eventName),this.storageName=t}};class Y extends HTMLElement{#t=this.attachShadow({mode:"open"});#c={recordings:[],replayAllowed:!0};constructor(){super()}connectedCallback(){this.#t.adoptedStyleSheets=[V],a.ScheduledRender.scheduleRender(this,this.#i)}set recordings(e){this.#c.recordings=e,a.ScheduledRender.scheduleRender(this,this.#i)}set replayAllowed(e){this.#c.replayAllowed=e,a.ScheduledRender.scheduleRender(this,this.#i)}#d(){this.dispatchEvent(new H)}#p(e,t){t.stopPropagation(),this.dispatchEvent(new q(e))}#u(e,t){t.stopPropagation(),this.dispatchEvent(new W(e))}#h(e,t){t.stopPropagation(),this.dispatchEvent(new X(e))}#n(e,t){"Enter"===t.key&&this.#u(e,t)}#v(e){e.stopPropagation()}#i=()=>{e.render(_`
<div class="wrapper">
<div class="header">
<h1>${U(K.savedRecordings)}</h1>
<devtools-button
.variant=${"primary"}
@click=${this.#d}
title=${n.Tooltip.getTooltipForActions(U(K.createRecording),"chrome-recorder.create-recording")}
.jslogContext=${"create-recording"}
>
${U(K.createRecording)}
</devtools-button>
</div>
<div class="table">
${this.#c.recordings.map((e=>_`
<div
role="button"
tabindex="0"
aria-label=${U(K.openRecording)}
class="row"
@keydown=${this.#n.bind(this,e.storageName)}
@click=${this.#u.bind(this,e.storageName)}
jslog=${i.item().track({click:!0}).context("recording")}>
<div class="icon">
<devtools-icon name="flow">
</devtools-icon>
</div>
<div class="title">${e.name}</div>
<div class="actions">
${this.#c.replayAllowed?_`
<devtools-button
title=${U(K.playRecording)}
.data=${{variant:"icon",iconName:"play",jslogContext:"play-recording"}}
@click=${this.#h.bind(this,e.storageName)}
@keydown=${this.#v}
></devtools-button>
<div class="divider"></div>`:""}
<devtools-button
class="delete-recording-button"
title=${U(K.deleteRecording)}
.data=${{variant:"icon",iconName:"bin",jslogContext:"delete-recording"}}
@click=${this.#p.bind(this,e.storageName)}
@keydown=${this.#v}
></devtools-button>
</div>
</div>
`))}
</div>
</div>
`,this.#t,{host:this})}}customElements.define("devtools-recording-list-view",Y);var J=Object.freeze({__proto__:null,CreateRecordingEvent:H,DeleteRecordingEvent:q,OpenRecordingEvent:W,PlayRecordingEvent:X,RecordingListView:Y}),Z={cssText:`*{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=${import.meta.resolve("./extensionView.css")} */\n`};const Q=new CSSStyleSheet;Q.replaceSync(Z.cssText);const{html:ee}=e,te={closeView:"Close",extension:"Content provided by a browser extension"},oe=o.i18n.registerUIStrings("panels/recorder/components/ExtensionView.ts",te),re=o.i18n.getLocalizedString.bind(void 0,oe);class se extends Event{static eventName="recorderextensionviewclosed";constructor(){super(se.eventName,{bubbles:!0,composed:!0})}}class ie extends HTMLElement{#t=this.attachShadow({mode:"open"});#g;constructor(){super(),this.setAttribute("jslog",`${i.section("extension-view")}`)}connectedCallback(){this.#t.adoptedStyleSheets=[Q],this.#i()}disconnectedCallback(){this.#g&&l.ExtensionManager.ExtensionManager.instance().getView(this.#g.id).hide()}set descriptor(e){this.#g=e,this.#i(),l.ExtensionManager.ExtensionManager.instance().getView(e.id).show()}#b(){this.dispatchEvent(new se)}#i(){if(!this.#g)return;const t=l.ExtensionManager.ExtensionManager.instance().getView(this.#g.id).frame();e.render(ee`
<div class="extension-view">
<header>
<div class="title">
<devtools-icon
class="icon"
title=${re(te.extension)}
name="extension">
</devtools-icon>
${this.#g.title}
</div>
<devtools-button
title=${re(te.closeView)}
jslog=${i.close().track({click:!0})}
.data=${{variant:"icon",size:"SMALL",iconName:"cross"}}
@click=${this.#b}
></devtools-button>
</header>
<main>
${t}
</main>
</div>
`,this.#t,{host:this})}}customElements.define("devtools-recorder-extension-view",ie);const{html:ne}=e,ae={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"},le=[{value:"normal",buttonIconName:"play",buttonLabel:()=>pe(ae.ReplayNormalButtonLabel),label:()=>pe(ae.ReplayNormalItemLabel)},{value:"slow",buttonIconName:"play",buttonLabel:()=>pe(ae.ReplaySlowButtonLabel),label:()=>pe(ae.ReplaySlowItemLabel)},{value:"very_slow",buttonIconName:"play",buttonLabel:()=>pe(ae.ReplayVerySlowButtonLabel),label:()=>pe(ae.ReplayVerySlowItemLabel)},{value:"extremely_slow",buttonIconName:"play",buttonLabel:()=>pe(ae.ReplayExtremelySlowButtonLabel),label:()=>pe(ae.ReplayExtremelySlowItemLabel)}],ce={normal:1,slow:2,very_slow:3,extremely_slow:4},de=o.i18n.registerUIStrings("panels/recorder/components/ReplaySection.ts",ae),pe=o.i18n.getLocalizedString.bind(void 0,de);class ue extends Event{speed;extension;static eventName="startreplay";constructor(e,t){super(ue.eventName,{bubbles:!0,composed:!0}),this.speed=e,this.extension=t}}const he="extension";class ve extends HTMLElement{#t=this.attachShadow({mode:"open"});#m=this.#i.bind(this);#c={disabled:!1};#y;#f=[];set data(e){this.#y=e.settings,this.#f=e.replayExtensions}get disabled(){return this.#c.disabled}set disabled(e){this.#c.disabled=e,a.ScheduledRender.scheduleRender(this,this.#m)}connectedCallback(){a.ScheduledRender.scheduleRender(this,this.#m)}#x(e){const t=e.value;this.#y&&e.value&&(this.#y.speed=t,this.#y.replayExtension=""),c.userMetrics.recordingReplaySpeed(ce[t]),a.ScheduledRender.scheduleRender(this,this.#m)}#w(e){if(e.stopPropagation(),e.value?.startsWith(he)){this.#y&&(this.#y.replayExtension=e.value);const t=Number(e.value.substring(9));return this.dispatchEvent(new ue("normal",this.#f[t])),void a.ScheduledRender.scheduleRender(this,this.#m)}this.dispatchEvent(new ue(this.#y?this.#y.speed:"normal")),a.ScheduledRender.scheduleRender(this,this.#m)}#i(){const t=[{name:pe(ae.speedGroup),items:le}];this.#f.length&&t.push({name:pe(ae.extensionGroup),items:this.#f.map(((e,t)=>({value:he+t,buttonIconName:"play",buttonLabel:()=>e.getName(),label:()=>e.getName()})))}),e.render(ne`
<devtools-select-button
@selectmenuselected=${this.#x}
@selectbuttonclick=${this.#w}
.variant=${"primary"}
.showItemDivider=${!1}
.disabled=${this.#c.disabled}
.action=${"chrome-recorder.replay-recording"}
.value=${this.#y?.replayExtension||this.#y?.speed||""}
.buttonLabel=${pe(ae.Replay)}
.groups=${t}
jslog=${i.action("chrome-recorder.replay-recording").track({click:!0})}
></devtools-select-button>`,this.#t,{host:this})}}customElements.define("devtools-replay-section",ve);var ge=Object.freeze({__proto__:null,ReplaySection:ve,StartReplayEvent:ue}),be={cssText:`*{box-sizing:border-box;min-width:0;min-height:0}:root{height:100%;overflow:hidden;interpolate-size:allow-keywords}body{height:100%;width:100%;position:relative;overflow:hidden;margin:0;cursor:default;font-family:var(--default-font-family);font-size:12px;tab-size:4;user-select:none;color:var(--sys-color-on-surface);background:var(--sys-color-cdt-base-container)}:focus{outline-width:0}.monospace{font-family:var(--monospace-font-family);font-size:var(\n --monospace-font-size\n )!important}.source-code{font-family:var(--source-code-font-family);font-size:var(\n --source-code-font-size\n )!important;white-space:pre-wrap;&:not(input)::selection{color:var(--sys-color-on-surface)}}.source-code.breakpoint{white-space:nowrap}.source-code .devtools-link.text-button{max-width:100%;overflow:hidden;text-overflow:ellipsis}img{-webkit-user-drag:none}iframe,\na img{border:none}.fill{position:absolute;inset:0}iframe.fill{width:100%;height:100%}.widget{position:relative;flex:auto;contain:style}.hbox{display:flex;flex-direction:row!important;position:relative}.vbox{display:flex;flex-direction:column!important;position:relative}.view-container > devtools-toolbar{border-bottom:1px solid var(--sys-color-divider)}.flex-auto{flex:auto}.flex-none{flex:none}.flex-centered{display:flex;align-items:center;justify-content:center}.overflow-auto{overflow:auto;background-color:var(--sys-color-cdt-base-container)}iframe.widget{position:absolute;width:100%;height:100%;inset:0}.hidden{display:none!important}.highlighted-search-result{border-radius:1px;background-color:var(--sys-color-yellow-container);outline:1px solid var(--sys-color-yellow-container)}.link{cursor:pointer;text-decoration:underline;color:var(--sys-color-primary);outline-offset:2px}button,\ninput,\nselect{font-family:inherit;font-size:inherit}select option,\nselect optgroup,\ninput{background-color:var(--sys-color-cdt-base-container)}input{color:inherit;&[type="checkbox"]{position:relative;outline:none;display:flex;align-items:center;justify-content:center;&:hover::after,\n &:active::before{content:"";height:24px;width:24px;border-radius:var(--sys-shape-corner-full);position:absolute}&:not(.-theme-preserve){accent-color:var(--sys-color-primary-bright);color:var(--sys-color-on-primary)}&:not(:disabled):hover::after{background-color:var(--sys-color-state-hover-on-subtle)}&:not(:disabled):active::before{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:not(:disabled):focus-visible::before{content:"";height:15px;width:15px;border-radius:5px;position:absolute;border:2px solid var(--sys-color-state-focus-ring)}&.small:hover::after,\n &.small:active::before{height:12px;width:12px;border-radius:2px}}}input::placeholder{--override-input-placeholder-color:rgb(0 0 0/54%);color:var(--override-input-placeholder-color)}.theme-with-dark-background input::placeholder,\n:host-context(.theme-with-dark-background) input::placeholder{--override-input-placeholder-color:rgb(230 230 230/54%)}.harmony-input:not([type]),\n.harmony-input[type="number"],\n.harmony-input[type="text"]{padding:3px 6px;height:24px;border:1px solid var(--sys-color-neutral-outline);border-radius:4px;&.error-input,\n &:invalid{border-color:var(--sys-color-error)}&:not(.error-input, :invalid):focus{border-color:var(--sys-color-state-focus-ring)}&:not(.error-input, :invalid):hover:not(:focus){background:var(--sys-color-state-hover-on-subtle)}}input[type="radio"]{height:17px;width:17px;min-width:17px;border-radius:8px;vertical-align:sub;margin:0 5px 5px 0;accent-color:var(--sys-color-primary-bright);color:var(--sys-color-on-primary);&:focus{box-shadow:var(--legacy-focus-ring-active-shadow)}}@media (forced-colors: active){input[type="radio"]{--gradient-start:ButtonFace;--gradient-end:ButtonFace;&:checked{--gradient-start:Highlight;--gradient-end:Highlight}}}input[type="range"]{appearance:none;margin:0;padding:0;height:10px;width:88px;outline:none;background:none}input[type="range"]::-webkit-slider-thumb,\n.-theme-preserve{appearance:none;margin:0;padding:0;border:0;width:12px;height:12px;margin-top:-5px;border-radius:50%;background-color:var(--sys-color-primary)}input[type="range"]::-webkit-slider-runnable-track{appearance:none;margin:0;padding:0;width:100%;height:2px;background-color:var(--sys-color-surface-variant)}input[type="range"]:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--sys-color-inverse-primary)}input[type="range"]:disabled::-webkit-slider-thumb{background-color:var(--sys-color-state-disabled)}@media (forced-colors: active){input[type="range"]{forced-color-adjust:none}}.highlighted-search-result.current-search-result{--override-current-search-result-background-color:rgb(255 127 0/80%);border-radius:1px;padding:1px;margin:-1px;background-color:var(--override-current-search-result-background-color)}.dimmed{opacity:60%}.editing{box-shadow:var(--drop-shadow);background-color:var(--sys-color-cdt-base-container);text-overflow:clip!important;padding-left:2px;margin-left:-2px;padding-right:2px;margin-right:-2px;margin-bottom:-1px;padding-bottom:1px;opacity:100%!important}.editing,\n.editing *{color:var(\n --sys-color-on-surface\n )!important;text-decoration:none!important}select{appearance:none;user-select:none;height:var(--sys-size-11);border:var(--sys-size-1) solid var(--sys-color-neutral-outline);border-radius:var(--sys-shape-corner-extra-small);color:var(--sys-color-on-surface);font:inherit;margin:0;outline:none;padding:0 var(--sys-size-9) 0 var(--sys-size-5);background-image:var(--combobox-dropdown-arrow);background-color:transparent;background-position:right center;background-repeat:no-repeat;&:disabled{opacity:100%;border-color:transparent;color:var(--sys-color-state-disabled);background-color:var(--sys-color-state-disabled-container);pointer-events:none}&:enabled{&:hover{background-color:var(--sys-color-state-hover-on-subtle)}&:active{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:hover:active{background:var(--combobox-dropdown-arrow),linear-gradient(var(--sys-color-state-hover-on-subtle),var(--sys-color-state-hover-on-subtle)),linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle),var(--sys-color-state-ripple-neutral-on-subtle));background-position:right center;background-repeat:no-repeat}&:focus{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring);outline-offset:-1px}}}@media (forced-colors: active) and (prefers-color-scheme: light){:root,\n .theme-with-dark-background,\n :host-context(.theme-with-dark-background){--combobox-dropdown-arrow:var(--image-file-arrow-drop-down-light)}}@media (forced-colors: active) and (prefers-color-scheme: dark){:root,\n .theme-with-dark-background,\n :host-context(.theme-with-dark-background){--combobox-dropdown-arrow:var(--image-file-arrow-drop-down-dark)}}.chrome-select-label{margin:0 var(--sys-size-10);flex:none;p p{margin-top:0;color:var(--sys-color-token-subtle)}.reload-warning{margin-left:var(--sys-size-5)}}.settings-select{margin:0}select optgroup,\nselect option{background-color:var(--sys-color-cdt-base-container);color:var(--sys-color-on-surface)}.gray-info-message{text-align:center;font-style:italic;padding:6px;color:var(--sys-color-token-subtle);white-space:nowrap}.empty-state{margin:var(--sys-size-5);display:flex;flex-grow:1;justify-content:center;align-items:center;flex-direction:column;text-align:center;min-height:fit-content;min-width:fit-content;> *{max-width:var(--sys-size-29)}.empty-state-header{font:var(--sys-typescale-headline5);margin-bottom:var(--sys-size-3)}.empty-state-description{font:var(--sys-typescale-body4-regular);color:var(--sys-color-on-surface-subtle);> x-link{white-space:nowrap;margin-left:var(--sys-size-3)}}> devtools-button{margin-top:var(--sys-size-7)}}dt-icon-label{flex:none}.full-widget-dimmed-banner a{color:inherit}.full-widget-dimmed-banner{color:var(--sys-color-token-subtle);background-color:var(--sys-color-cdt-base-container);display:flex;justify-content:center;align-items:center;text-align:center;padding:20px;position:absolute;inset:0;font-size:13px;overflow:auto;z-index:500}.dot::before{content:var(--image-file-empty);width:6px;height:6px;border-radius:50%;outline:1px solid var(--icon-gap-default);left:9px;position:absolute;top:9px;z-index:1}.green::before{background-color:var(--sys-color-green-bright)}.purple::before{background-color:var(--sys-color-purple-bright)}.expandable-inline-button{background-color:var(--sys-color-cdt-base-container);color:var(--sys-color-on-surface);cursor:pointer;border-radius:3px}.undisplayable-text,\n.expandable-inline-button{border:none;padding:1px 3px;margin:0 2px;font-size:11px;font-family:sans-serif;white-space:nowrap;display:inline-block}.undisplayable-text::after,\n.expandable-inline-button::after{content:attr(data-text)}.undisplayable-text{color:var(--sys-color-state-disabled);font-style:italic}.expandable-inline-button:hover,\n.expandable-inline-button:focus-visible{background-color:var(--sys-color-state-hover-on-subtle)}.expandable-inline-button:focus-visible{background-color:var(--sys-color-state-focus-highlight)}::selection{background-color:var(--sys-color-state-text-highlight);color:var(--sys-color-state-on-text-highlight)}button.link{border:none;background:none;padding:3px}button.link:focus-visible{outline:2px solid var(--sys-color-state-focus-ring);outline-offset:2px;border-radius:var(--sys-shape-corner-full)}.data-grid-data-grid-node button.link:focus-visible{border-radius:var(--sys-shape-corner-extra-small);padding:0;margin-top:3px}@media (forced-colors: active){.dimmed,\n select:disabled{opacity:100%}.harmony-input:not([type]),\n .harmony-input[type="number"],\n .harmony-input[type="text"]{border:1px solid ButtonText}.harmony-input:not([type]):focus,\n .harmony-input[type="number"]:focus,\n .harmony-input[type="text"]:focus{border:1px solid Highlight}}input.custom-search-input::-webkit-search-cancel-button{appearance:none;width:16px;height:15px;margin-right:0;opacity:70%;mask-image:var(--image-file-cross-circle-filled);mask-position:center;mask-repeat:no-repeat;mask-size:99%;background-color:var(--icon-default)}input.custom-search-input::-webkit-search-cancel-button:hover{opacity:99%}.spinner::before{display:block;width:var(--dimension,24px);height:var(--dimension,24px);border:var(--override-spinner-size,3px) solid var(--override-spinner-color,var(--sys-color-token-subtle));border-radius:12px;clip:rect(0,var(--clip-size,15px),var(--clip-size,15px),0);content:"";position:absolute;animation:spinner-animation 1s linear infinite;box-sizing:border-box}@keyframes spinner-animation{from{transform:rotate(0)}to{transform:rotate(360deg)}}.adorner-container{display:inline-flex;vertical-align:middle}.adorner-container.hidden{display:none}.adorner-container devtools-adorner{margin-left:3px}:host-context(.theme-with-dark-background) devtools-adorner{--override-adorner-border-color:var(--sys-color-tonal-outline);--override-adorner-active-background-color:var(\n --sys-color-state-riple-neutral-on-subtle\n )}.panel{display:flex;overflow:hidden;position:absolute;inset:0;z-index:0;background-color:var(--sys-color-cdt-base-container)}.panel-sidebar{overflow-x:hidden;background-color:var(--sys-color-cdt-base-container)}iframe.extension{flex:auto;width:100%;height:100%}iframe.panel.extension{display:block;height:100%}@media (forced-colors: active){:root{--legacy-accent-color:Highlight;--legacy-focus-ring-inactive-shadow-color:ButtonText}}devtools-toolbar{& > *{position:relative;display:flex;background-color:transparent;flex:none;align-items:center;justify-content:center;height:var(--toolbar-height);border:none;white-space:pre;overflow:hidden;max-width:100%;color:var(--icon-default);cursor:default;& .devtools-link{color:var(--icon-default)}}.status-buttons{padding:0 var(--sys-size-2);gap:var(--sys-size-2)}& > :not(select){padding:0}& > devtools-issue-counter{margin-top:-4px;padding:0 1px}devtools-adorner.fix-perf-icon{--override-adorner-text-color:transparent;--override-adorner-border-color:transparent;--override-adorner-background-color:transparent}devtools-issue-counter.main-toolbar{margin-left:1px;margin-right:1px}.toolbar-dropdown-arrow{pointer-events:none;flex:none;top:2px}.toolbar-button.dark-text .toolbar-dropdown-arrow{color:var(--sys-color-on-surface)}.toolbar-button{white-space:nowrap;overflow:hidden;min-width:28px;background:transparent;border-radius:0;&[aria-haspopup="true"][aria-expanded="true"]{pointer-events:none}}.toolbar-item-search{min-width:5.2em;max-width:300px;flex:1 1 auto;justify-content:start;overflow:revert}.toolbar-text{margin:0 5px;flex:none;color:var(--ui-text)}.toolbar-text:empty{margin:0}.toolbar-has-dropdown{justify-content:space-between;height:var(--sys-size-9);padding:0 var(--sys-size-2) 0 var(--sys-size-4);margin:0 var(--sys-size-2);gap:var(--sys-size-2);border-radius:var(--sys-shape-corner-extra-small);&:hover::after,\n &:active::before{content:"";height:100%;width:100%;border-radius:inherit;position:absolute;top:0;left:0}&:hover::after{background-color:var(--sys-color-state-hover-on-subtle)}&:active::before{background-color:var(--sys-color-state-ripple-neutral-on-subtle)}&:focus-visible{outline:var(--sys-size-2) solid var(--sys-color-state-focus-ring)}&[disabled]{pointer-events:none;background-color:var(--sys-color-state-disabled-container);color:var(--sys-color-state-disabled)}}.toolbar-has-dropdown-shrinkable{flex-shrink:1}.toolbar-has-dropdown .toolbar-text{margin:0;text-overflow:ellipsis;flex:auto;overflow:hidden;text-align:right}.toolbar-button:not(.toolbar-has-dropdown):focus-visible::before{position:absolute;inset:2px;background-color:var(--sys-color-state-focus-highlight);border-radius:2px;content:"";z-index:-1}.toolbar-glyph{flex:none}.toolbar-button:disabled{opacity:50%}.toolbar-button.copied-to-clipboard::after{content:attr(data-content);position:fixed;margin-top:calc(2 * var(--toolbar-height));padding:3px 5px;color:var(--sys-color-token-subtle);background:var(--sys-color-cdt-base-container);animation:2s fade-out;font-weight:normal;border:1px solid var(--sys-color-divider);border-radius:3px}.toolbar-button.toolbar-state-on .toolbar-glyph{color:var(--icon-toggled)}.toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after{content:"";position:absolute;bottom:2px;background-color:var(--sys-color-primary-bright);width:4.5px;height:4.5px;border:2px solid var(--override-toolbar-background-color,--sys-color-cdt-base-container);border-radius:50%;right:0}.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,\n .toolbar-button.toolbar-state-off.toolbar-default-with-red-color\n .toolbar-glyph{color:var(\n --icon-error\n )!important}.toolbar-button:not(\n .toolbar-has-glyph,\n .toolbar-has-dropdown,\n .largeicon-menu,\n .toolbar-button-secondary\n ){font-weight:bold}.toolbar-button.dark-text .toolbar-text{color:var(\n --sys-color-on-surface\n )!important}.toolbar-button.toolbar-state-on .toolbar-text{color:var(--sys-color-primary)}.toolbar-button.toolbar-state-on:enabled:active .toolbar-text{color:var(--sys-color-primary-bright)}.toolbar-button:enabled:hover:not(:active) .toolbar-glyph{color:var(--sys-color-on-surface)}.toolbar-button:enabled:hover:not(:active) .toolbar-text{color:var(--sys-color-on-surface)}.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-glyph{color:var(--sys-color-primary)}.toolbar-button.toolbar-state-on:enabled:hover:not(:active) .toolbar-text{color:var(--sys-color-primary)}& > dt-checkbox{padding:0 5px 0 0}& > select{height:var(--sys-size-9);min-width:var(--sys-size-14)}.toolbar-input{box-shadow:inset 0 0 0 2px transparent;box-sizing:border-box;width:120px;height:var(--sys-size-9);padding:0 var(--sys-size-2) 0 var(--sys-size-5);margin:1px 3px;border-radius:100px;min-width:35px;position:relative;&.focused{box-shadow:inset 0 0 0 2px var(--sys-color-state-focus-ring)}&:not(:has(devtools-button:hover), .disabled):hover{background-color:var(--sys-color-state-hover-on-subtle)}&::before{content:"";box-sizing:inherit;height:100%;width:100%;position:absolute;left:0;background:var(--sys-color-cdt-base);z-index:-1}& > devtools-icon{color:var(--sys-color-on-surface-subtle);width:var(--sys-size-8);height:var(--sys-size-8);margin-right:var(--sys-size-3)}&.disabled > devtools-icon{color:var(--sys-color-state-disabled)}}.toolbar-filter .toolbar-input-clear-button{margin-right:var(--sys-size-4)}.toolbar-input-empty .toolbar-input-clear-button{display:none}.toolbar-prompt-proxy{flex:1}.toolbar-input-prompt{flex:1;overflow:hidden;white-space:nowrap;cursor:text;color:var(--sys-color-on-surface)}.toolbar-divider{background-color:var(--sys-color-divider);width:1px;margin:5px 4px;height:16px}.toolbar-spacer{flex:auto}.toolbar-button.emulate-active{background-color:var(--sys-color-surface-variant)}&:not([floating]) > :last-child:not(:first-child, select){flex-shrink:1;justify-content:left}&:not([floating]) > .toolbar-button:last-child:not(:first-child, select){justify-content:left;margin-right:2px}& > .highlight::before{content:"";position:absolute;inset:2px;border-radius:2px;background:var(--sys-color-neutral-container);z-index:-1}& > .highlight:focus-visible{background:var(--sys-color-tonal-container);& > .title{color:var(--sys-color-on-tonal-container)}}devtools-icon.leading-issue-icon{margin:0 7px}@media (forced-colors: active){.toolbar-button:disabled{opacity:100%;color:Graytext}devtools-toolbar > *,\n .toolbar-text{color:ButtonText}.toolbar-button:disabled .toolbar-text{color:Graytext}devtools-toolbar > select:disabled{opacity:100%;color:Graytext}.toolbar-button.toolbar-state-on .toolbar-glyph{forced-color-adjust:none;color:Highlight}.toolbar-button.toolbar-state-on .toolbar-text{forced-color-adjust:none;color:Highlight}.toolbar-button:enabled:hover:not(:active) .toolbar-text,\n .toolbar-button:enabled:focus:not(:active) .toolbar-text{color:HighlightText}.toolbar-button:disabled devtools-icon{color:GrayText}.toolbar-button:disabled .toolbar-glyph{color:GrayText}.toolbar-button:enabled.hover:not(:active) .toolbar-glyph{forced-color-adjust:none;color:Highlight}.toolbar-button:enabled:hover .toolbar-glyph,\n .toolbar-button:enabled:focus .toolbar-glyph,\n .toolbar-button:enabled:hover:not(:active) .toolbar-glyph,\n .toolbar-button:enabled:hover devtools-icon,\n .toolbar-button:enabled:focus devtools-icon{color:HighlightText}.toolbar-input{forced-color-adjust:none;background:canvas;box-shadow:var(--legacy-focus-ring-inactive-shadow)}.toolbar-input.focused,\n .toolbar-input:not(.toolbar-input-empty){forced-color-adjust:none;background:canvas;box-shadow:var(--legacy-focus-ring-active-shadow)}.toolbar-input:hover{box-shadow:var(--legacy-focus-ring-active-shadow)}devtools-toolbar .devtools-link{color:linktext}.toolbar-has-dropdown{forced-color-adjust:none;background:ButtonFace;color:ButtonText}}}@keyframes fade-out{from{opacity:100%}to{opacity:0%}}.webkit-css-property{color:var(--webkit-css-property-color,var(--sys-color-token-property-special))}.webkit-html-comment{color:var(--sys-color-token-comment)}.webkit-html-tag{color:var(--sys-color-token-tag)}.webkit-html-tag-name,\n.webkit-html-close-tag-name{color:var(--sys-color-token-tag)}.webkit-html-pseudo-element{color:var(--sys-color-token-pseudo-element)}.webkit-html-js-node,\n.webkit-html-css-node{color:var(--text-primary);white-space:pre-wrap}.webkit-html-text-node{color:var(--text-primary);unicode-bidi:-webkit-isolate}.webkit-html-entity-value{background-color:rgb(0 0 0/15%);unicode-bidi:-webkit-isolate}.webkit-html-doctype{color:var(--text-secondary)}.webkit-html-attribute-name{color:var(--sys-color-token-attribute);unicode-bidi:-webkit-isolate}.webkit-html-attribute-value{color:var(--sys-color-token-attribute-value);unicode-bidi:-webkit-isolate;word-break:break-all}.devtools-link{color:var(--text-link);text-decoration:underline;outline-offset:2px;.elements-disclosure &{color:var(--text-link)}devtools-icon{vertical-align:baseline;color:var(--sys-color-primary)}:focus .selected & devtools-icon{color:var(--sys-color-tonal-container)}&:focus-visible{outline-width:unset}&.invalid-link{color:var(--text-disabled);text-decoration:none}&:not(.devtools-link-prevent-click, .invalid-link){cursor:pointer}@media (forced-colors: active){&:not(.devtools-link-prevent-click){forced-color-adjust:none;color:linktext}&:focus-visible{background:Highlight;color:HighlightText}}}\n/*# sourceURL=${import.meta.resolve("./inspectorCommon.css")} */\n`},me={cssText:`*{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;flex-wrap:wrap;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-text-input{width:fit-content;height:var(--sys-size-9)}.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='main']{overflow:hidden auto}[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=${import.meta.resolve("./recordingView.css")} */\n`};const ye=new CSSStyleSheet;ye.replaceSync(be.cssText);const fe=new CSSStyleSheet;fe.replaceSync(me.cssText);const{html:xe}=e,we={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 selector does not appear on the page within the specified timeout, the replay fails with an error.",cancelReplay:"Cancel replay",showCode:"Show code",hideCode:"Hide code",addAssertion:"Add assertion",performancePanel:"Performance panel"},Se=o.i18n.registerUIStrings("panels/recorder/components/RecordingView.ts",we),ke=o.i18n.getLocalizedString.bind(void 0,Se);class $e extends Event{static eventName="recordingfinished";constructor(){super($e.eventName)}}class Ee extends Event{static eventName="playrecording";data;constructor(e={targetPanel:"chrome-recorder",speed:"normal"}){super(Ee.eventName),this.data=e}}class Ce extends Event{static eventName="abortreplay";constructor(){super(Ce.eventName)}}class Re extends Event{static eventName="recordingchanged";data;constructor(e,t){super(Re.eventName),this.data={currentStep:e,newStep:t}}}class Te extends Event{static eventName="addassertion";constructor(){super(Te.eventName)}}class Ie extends Event{static eventName="recordingtitlechanged";title;constructor(e){super(Ie.eventName,{}),this.title=e}}class Ne extends Event{static eventName="networkconditionschanged";data;constructor(e){super(Ne.eventName,{composed:!0,bubbles:!0}),this.data=e}}class je extends Event{static eventName="timeoutchanged";data;constructor(e){super(je.eventName,{composed:!0,bubbles:!0}),this.data=e}}const Ae=[p.NetworkManager.NoThrottlingConditions,p.NetworkManager.OfflineConditions,p.NetworkManager.Slow3GConditions,p.NetworkManager.Slow4GConditions,p.NetworkManager.Fast4GConditions];class ze extends HTMLElement{#t=this.attachShadow({mode:"open"});#S={isPlaying:!1,isPausedOnBreakpoint:!1};#k=null;#$=!1;#E=!1;#C=!1;#R;#T=[];#I;#N=[];#y;#s;#j;#A=new Set;#z;#M=!1;#B=!0;#P=[];#L=[];#f;#O=!1;#F="";#D="";#V;#_;#K;#G=this.#U.bind(this);constructor(){super()}set data(e){this.#$=e.isRecording,this.#S=e.replayState,this.#E=e.recordingTogglingInProgress,this.#R=e.currentStep,this.#k=e.recording,this.#T=this.#k.steps,this.#N=e.sections,this.#y=e.settings,this.#s=e.recorderSettings,this.#I=e.currentError,this.#j=e.lastReplayResult,this.#B=e.replayAllowed,this.#C=!1,this.#A=e.breakpointIndexes,this.#P=e.builtInConverters,this.#L=e.extensionConverters,this.#f=e.replayExtensions,this.#K=e.extensionDescriptor,this.#D=this.#s?.preferredCopyFormat??e.builtInConverters[0]?.getId(),this.#H(),this.#i()}connectedCallback(){this.#t.adoptedStyleSheets=[ye,fe,s.textInputStyles],document.addEventListener("copy",this.#G),this.#i()}disconnectedCallback(){document.removeEventListener("copy",this.#G)}scrollToBottom(){const e=this.shadowRoot?.querySelector(".sections");e&&(e.scrollTop=e.scrollHeight)}#q(){this.dispatchEvent(new Te)}#W(){this.dispatchE