@react-native/debugger-frontend 0.73.0

package/dist/third-party/front_end/panels/protocol_monitor/protocol_monitor.js

@@ -0,0 +1 @@
+import*as e from"../../core/common/common.js";import*as t from"../../core/host/host.js";import*as o from"../../core/i18n/i18n.js";import*as r from"../../core/platform/platform.js";import*as a from"../../core/protocol_client/protocol_client.js";import*as s from"../../core/sdk/sdk.js";import*as n from"../../models/bindings/bindings.js";import*as i from"../../models/text_utils/text_utils.js";import*as d from"../../ui/components/data_grid/data_grid.js";import*as l from"../../ui/components/icon_button/icon_button.js";import*as m from"../../ui/legacy/components/source_frame/source_frame.js";import*as c from"../../ui/legacy/legacy.js";import*as g from"../../ui/lit-html/lit-html.js";import*as h from"./components/components.js";const p=new CSSStyleSheet;p.replaceSync(".protocol-monitor{--override-data-grid-sent-message-row-background-color:rgb(240 246 255)}.-theme-with-dark-background .protocol-monitor,\n:host-context(.-theme-with-dark-background) .protocol-monitor{--override-data-grid-sent-message-row-background-color:rgb(43 46 56)}.protocol-monitor .protocol-monitor-toolbar{border-bottom:1px solid var(--color-details-hairline)}.protocol-monitor .protocol-monitor-bottom-toolbar{border-top:1px solid var(--color-details-hairline)}\n/*# sourceURL=protocolMonitor.css */\n");const u={method:"Method",type:"Type",request:"Request",response:"Response",timestamp:"Timestamp",elapsedTime:"Elapsed time",target:"Target",record:"Record",clearAll:"Clear all",filter:"Filter",documentation:"Documentation",sMs:"{PH1} ms",noMessageSelected:"No message selected",save:"Save",session:"Session",sendRawCDPCommand:"Send a raw `CDP` command",sendRawCDPCommandExplanation:"Format: `'Domain.commandName'` for a command without parameters, or `'{\"command\":\"Domain.commandName\", \"parameters\": {...}}'` as a JSON object for a command with parameters. `'cmd'`/`'method'` and `'args'`/`'params'`/`'arguments'` are also supported as alternative keys for the `JSON` object.",selectTarget:"Select a target",showCDPCommandEditor:"Show CDP command editor",hideCDPCommandEditor:"Hide  CDP command editor",CDPCommandEditorShown:"CDP command editor shown",CDPCommandEditorHidden:"CDP command editor hidden"},b=o.i18n.registerUIStrings("panels/protocol_monitor/ProtocolMonitor.ts",u),w=o.i18n.getLocalizedString.bind(void 0,b),I=e=>g.html`${w(u.sMs,{PH1:String(e)})}`;let v;class T extends c.Widget.VBox{started;startTime;requestTimeForId;dataGridRowForId;infoWidget;dataGridIntegrator;filterParser;suggestionBuilder;textFilterUI;messages=[];isRecording=!1;#e=new S;#t=new y(this.#e);#o;constructor(){super(!0),this.started=!1,this.startTime=0,this.dataGridRowForId=new Map,this.requestTimeForId=new Map;const e=new c.Toolbar.Toolbar("protocol-monitor-toolbar",this.contentElement);this.contentElement.classList.add("protocol-monitor");const o=new c.Toolbar.ToolbarToggle(w(u.record),"record-start","record-stop");o.addEventListener(c.Toolbar.ToolbarButton.Events.Click,(()=>{o.setToggled(!o.toggled()),this.setRecording(o.toggled())})),o.setToggleWithRedColor(!0),e.appendToolbarItem(o),o.setToggled(!0);const r=new c.Toolbar.ToolbarButton(w(u.clearAll),"clear");r.addEventListener(c.Toolbar.ToolbarButton.Events.Click,(()=>{this.messages=[],this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:[]}),this.infoWidget.render(null)})),e.appendToolbarItem(r);const a=new c.Toolbar.ToolbarButton(w(u.save),"download");a.addEventListener(c.Toolbar.ToolbarButton.Events.Click,(()=>{this.saveAsFile()})),e.appendToolbarItem(a);const s=new c.SplitWidget.SplitWidget(!0,!0,"protocol-monitor-panel-split",250),n=new c.SplitWidget.SplitWidget(!0,!1,"protocol-monitor-panel-split-container",400);n.show(this.contentElement),this.infoWidget=new C,this.#t.addEventListener(f.CommandSent,(e=>{this.#r(JSON.stringify(e.data))}));const l={paddingRowsCount:100,showScrollbar:!0,columns:[{id:"type",title:w(u.type),sortable:!0,widthWeighting:1,visible:!0,hideable:!0,styles:{"text-align":"center"}},{id:"method",title:w(u.method),sortable:!1,widthWeighting:5,visible:!0,hideable:!1},{id:"request",title:w(u.request),sortable:!1,widthWeighting:5,visible:!0,hideable:!0},{id:"response",title:w(u.response),sortable:!1,widthWeighting:5,visible:!0,hideable:!0},{id:"elapsedTime",title:w(u.elapsedTime),sortable:!0,widthWeighting:2,visible:!0,hideable:!0},{id:"timestamp",title:w(u.timestamp),sortable:!0,widthWeighting:5,visible:!1,hideable:!0},{id:"target",title:w(u.target),sortable:!0,widthWeighting:5,visible:!1,hideable:!0},{id:"session",title:w(u.session),sortable:!0,widthWeighting:5,visible:!1,hideable:!0}],rows:[],contextMenus:{bodyRow:(e,o,r)=>{const a=d.DataGridUtils.getRowEntryForColumnId(r,"method"),s=d.DataGridUtils.getRowEntryForColumnId(r,"type");e.defaultSection().appendItem(w(u.filter),(()=>{const e=d.DataGridUtils.getRowEntryForColumnId(r,"method");this.textFilterUI.setValue(`method:${e.value}`,!0)})),e.defaultSection().appendItem(w(u.documentation),(()=>{if(!a.value)return;const[e,o]=String(a.value).split("."),r="sent"===s.value?"method":"event";t.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(`https://chromedevtools.github.io/devtools-protocol/tot/${e}#${r}-${o}`)}))}}};this.dataGridIntegrator=new d.DataGridControllerIntegrator.DataGridControllerIntegrator(l),this.dataGridIntegrator.dataGrid.addEventListener("cellfocused",(e=>{const t=e.data.row,o={request:d.DataGridUtils.getRowEntryForColumnId(t,"request"),response:d.DataGridUtils.getRowEntryForColumnId(t,"response"),type:d.DataGridUtils.getRowEntryForColumnId(t,"type").title};this.infoWidget.render(o)})),this.dataGridIntegrator.dataGrid.addEventListener("newuserfiltertext",(e=>{this.textFilterUI.setValue(e.data.filterText,!0)})),s.setMainWidget(this.dataGridIntegrator),s.setSidebarWidget(this.infoWidget),n.setMainWidget(s),n.setSidebarWidget(this.#t),n.hideSidebar(),n.enableShowModeSaving();const m=["method","request","response","type","target","session"];this.filterParser=new i.TextUtils.FilterParser(m),this.suggestionBuilder=new c.FilterSuggestionBuilder.FilterSuggestionBuilder(m),this.textFilterUI=new c.Toolbar.ToolbarInput(w(u.filter),"",1,.2,"",this.suggestionBuilder.completions.bind(this.suggestionBuilder),!0),this.textFilterUI.addEventListener(c.Toolbar.ToolbarInput.Event.TextChanged,(e=>{const t=e.data,o=this.filterParser.parse(t);this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),filters:o})})),e.appendToolbarItem(this.textFilterUI);const g=new c.Toolbar.Toolbar("protocol-monitor-bottom-toolbar",this.contentElement);g.appendToolbarItem(n.createShowHideSidebarButton(w(u.showCDPCommandEditor),w(u.hideCDPCommandEditor),w(u.CDPCommandEditorShown),w(u.CDPCommandEditorHidden))),g.appendToolbarItem(this.#a()),g.appendToolbarItem(this.#s())}#a(){const e=w(u.sendRawCDPCommand),t=e,o=w(u.sendRawCDPCommandExplanation),r=new c.Toolbar.ToolbarInput(e,t,1,.2,o,this.#e.buildTextPromptCompletions,!1);return r.addEventListener(c.Toolbar.ToolbarInput.Event.EnterPressed,(()=>this.#r(r.value()))),r.addEventListener(c.Toolbar.ToolbarInput.Event.TextChanged,(()=>this.#n(r))),r}#s(){const e=new c.Toolbar.ToolbarComboBox((()=>{this.#o=e.selectedOption()?.value}),w(u.selectTarget));e.setMaxWidth(120);const t=s.TargetManager.TargetManager.instance(),o=()=>{e.removeOptions();for(const o of t.targets())e.createOption(`${o.name()} (${o.inspectedURL()})`,o.id())};return t.addEventListener(s.TargetManager.Events.AvailableTargetsChanged,o),o(),e}#r(e){const{command:t,parameters:o}=E(e),r=a.InspectorBackend.test,n=s.TargetManager.TargetManager.instance(),i=this.#o?n.targetById(this.#o):null,d=i?i.sessionId:"";r.sendRawMessage(t,o,(()=>{}),d),this.#e.addEntry(e)}#n(e){const t=e.valueWithoutSuggestion(),{command:o,parameters:r}=E(t);this.#t.setCommand(o,r)}static instance(e={forceNew:null}){const{forceNew:t}=e;return v&&!t||(v=new T),v}wasShown(){this.started||(this.registerCSSFiles([p]),this.started=!0,this.startTime=Date.now(),this.setRecording(!0))}setRecording(e){this.isRecording=e;const t=a.InspectorBackend.test;e?(t.onMessageSent=this.messageSent.bind(this),t.onMessageReceived=this.messageReceived.bind(this)):(t.onMessageSent=null,t.onMessageReceived=null)}targetToString(e){return e?e.decorateLabel(`${e.name()} ${e===s.TargetManager.TargetManager.instance().rootTarget()?"":e.id()}`):""}messageReceived(e,t){if(this.isRecording&&this.messages.push({...e,type:"recv",domain:"-"}),"id"in e&&e.id){const t=this.dataGridRowForId.get(e.id);if(!t)return;const o=this.dataGridIntegrator.data().rows.findIndex((e=>t===e)),r={...t,cells:t.cells.map((t=>{if("response"===t.columnId)return{...t,value:JSON.stringify(e.result||e.error)};if("elapsedTime"===t.columnId){const o=this.requestTimeForId.get(e.id);if(o)return{...t,value:Date.now()-o,renderer:I}}return t}))},a=[...this.dataGridIntegrator.data().rows];return a[o]=r,this.dataGridRowForId.delete(e.id),void this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:a})}const o=t,r=new l.Icon.Icon;r.data={iconName:"arrow-down",color:"var(--icon-request)",width:"20px",height:"20px"};const a={cells:[{columnId:"method",value:e.method,title:e.method},{columnId:"request",value:"",renderer:d.DataGridRenderers.codeBlockRenderer},{columnId:"response",value:JSON.stringify(e.params),renderer:d.DataGridRenderers.codeBlockRenderer},{columnId:"timestamp",value:Date.now()-this.startTime,renderer:I},{columnId:"elapsedTime",value:""},{columnId:"type",value:r,title:"received"},{columnId:"target",value:this.targetToString(o)},{columnId:"session",value:e.sessionId||""}],hidden:!1};this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:this.dataGridIntegrator.data().rows.concat([a])})}messageSent(e,t){this.isRecording&&this.messages.push({...e,type:"send"});const o=t,r=new l.Icon.Icon;r.data={iconName:"arrow-up-down",color:"var(--icon-request-response)",width:"20px",height:"20px"};const a={styles:{"--override-data-grid-row-background-color":"var(--override-data-grid-sent-message-row-background-color)"},cells:[{columnId:"method",value:e.method,title:e.method},{columnId:"request",value:JSON.stringify(e.params),renderer:d.DataGridRenderers.codeBlockRenderer},{columnId:"response",value:"(pending)",renderer:d.DataGridRenderers.codeBlockRenderer},{columnId:"timestamp",value:Date.now()-this.startTime,renderer:I},{columnId:"elapsedTime",value:"(pending)"},{columnId:"type",value:r,title:"sent"},{columnId:"target",value:this.targetToString(o)},{columnId:"session",value:e.sessionId||""}],hidden:!1};this.requestTimeForId.set(e.id,Date.now()),this.dataGridRowForId.set(e.id,a),this.dataGridIntegrator.update({...this.dataGridIntegrator.data(),rows:this.dataGridIntegrator.data().rows.concat([a])})}async saveAsFile(){const e=new Date,t="ProtocolMonitor-"+r.DateUtilities.toISO8601Compact(e)+".json",o=new n.FileUtils.FileOutputStream;await o.open(t)&&(o.write(JSON.stringify(this.messages,null,"  ")),o.close())}}class S{#i=200;#d=new Set;protocolMethods=this.buildProtocolCommands(a.InspectorBackend.inspectorBackend.agentPrototypes.values());constructor(e){void 0!==e&&(this.#i=e)}buildTextPromptCompletions=async(e,t,o)=>{if(!t&&!o&&e)return[];const r=[...this.#d].reverse();return r.push(...this.protocolMethods),r.filter((e=>e.startsWith(t))).map((e=>({text:e})))};buildProtocolCommands(e){const t=new Set;for(const o of e)for(const e of Object.keys(o.commandParameters))t.add(e);return t}addEntry(e){if(this.#d.has(e)&&this.#d.delete(e),this.#d.add(e),this.#d.size>this.#i){const e=this.#d.values().next().value;this.#d.delete(e)}}}class C extends c.Widget.VBox{tabbedPane;constructor(){super(),this.tabbedPane=new c.TabbedPane.TabbedPane,this.tabbedPane.appendTab("request",w(u.request),new c.Widget.Widget),this.tabbedPane.appendTab("response",w(u.response),new c.Widget.Widget),this.tabbedPane.show(this.contentElement),this.tabbedPane.selectTab("response"),this.render(null)}render(e){if(!e||!e.request||!e.response)return this.tabbedPane.changeTabView("request",new c.EmptyWidget.EmptyWidget(w(u.noMessageSelected))),void this.tabbedPane.changeTabView("response",new c.EmptyWidget.EmptyWidget(w(u.noMessageSelected)));const t=e&&e.type&&"sent"===e.type;this.tabbedPane.setTabEnabled("request",Boolean(t)),t||this.tabbedPane.selectTab("response");const o=JSON.parse(String(e.request.value)||"null");this.tabbedPane.changeTabView("request",m.JSONView.JSONView.createViewSync(o));const r="(pending)"===e.response.value?null:JSON.parse(String(e.response.value)||"null");this.tabbedPane.changeTabView("response",m.JSONView.JSONView.createViewSync(r))}}var f;!function(e){e.CommandSent="CommandSent"}(f||(f={}));class y extends(e.ObjectWrapper.eventMixin(c.Widget.VBox)){jsonEditor;constructor(e){super(),this.jsonEditor=new h.JSONEditor.JSONEditor,this.jsonEditor.protocolMethods=[...e.protocolMethods],this.element.append(this.jsonEditor),this.jsonEditor.addEventListener("keydown",(e=>{"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.dispatchEventToListeners(f.CommandSent,this.getCommand())}))}getCommand(){return{command:this.jsonEditor.getCommand(),parameters:this.jsonEditor.getParameters()}}setCommand(e,t){this.jsonEditor.parameters=t,this.jsonEditor.command=e}}function E(e){let t=null;try{t=JSON.parse(e)}catch(e){}return{command:t?t.command||t.method||t.cmd||"":e,parameters:t?.parameters||t?.params||t?.args||t?.arguments||{}}}var P=Object.freeze({__proto__:null,ProtocolMonitorImpl:T,CommandAutocompleteSuggestionProvider:S,InfoWidget:C,get Events(){return f},EditorWidget:y,parseCommandInput:E});export{P as ProtocolMonitor};

package/dist/third-party/front_end/panels/recorder/components/components.js

@@ -0,0 +1 @@
+import*as e from"../../../ui/lit-html/lit-html.js";import*as t from"../../../ui/legacy/legacy.js";import*as i from"../../../core/i18n/i18n.js";import*as r from"../../../ui/components/buttons/buttons.js";import*as o from"../../../ui/components/helpers/helpers.js";import*as s from"../../../ui/components/icon_button/icon_button.js";import*as n from"../../../ui/components/input/input.js";import*as a from"../models/models.js";import*as l from"../../../ui/components/code_highlighter/code_highlighter.js";import*as d from"../../../core/host/host.js";import*as c from"../../../core/platform/platform.js";import*as p from"../../../core/sdk/sdk.js";import*as h from"../../../third_party/codemirror.next/codemirror.next.js";import*as u from"../../../ui/components/text_editor/text_editor.js";import"../../../ui/components/dialogs/dialogs.js";import*as g from"../../../ui/components/menus/menus.js";import*as m from"../extensions/extensions.js";import*as v from"../../../ui/components/panel_feedback/panel_feedback.js";import*as b from"../../../ui/components/panel_introduction_steps/panel_introduction_steps.js";import*as f from"../controllers/controllers.js";import*as w from"../util/util.js";const y=new CSSStyleSheet;y.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(--color-red);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:var(--color-accent-red)}.icon:active{background:var(--color-red)}.control[disabled] .icon:hover{background:var(--color-red)}.label{font-size:12px;line-height:16px;text-align:center;letter-spacing:0.02em;color:var(--color-text-primary)}\n/*# sourceURL=controlButton.css */\n');var x=self&&self.__decorate||function(e,t,i,r){var o,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};const{html:S,Decorators:$,LitElement:k}=e,{customElement:E,property:T}=$;let R=class extends k{static styles=[y];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([T()],R.prototype,"label",void 0),x([T()],R.prototype,"shape",void 0),x([T()],R.prototype,"disabled",void 0),R=x([E("devtools-control-button")],R);var C=Object.freeze({__proto__:null,get ControlButton(){return R}});const N=new CSSStyleSheet;N.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(--color-text-primary);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(--color-text-secondary);margin-bottom:8px;display:inline-block;margin-top:32px}.footer{display:flex;justify-content:center;border-top:1px solid var(--color-details-hairline);padding:12px;background:var(--color-background)}.controls{display:flex}.error{margin:16px 0 0;padding:8px;background:var(--color-error-background);color:var(--color-error-text)}.row-label .link{position:relative;top:0.25em}.row-label .link:focus-visible{outline:var(--color-input-outline-active) 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(--color-input-outline-active) auto 1px}\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."},I=i.i18n.registerUIStrings("panels/recorder/components/CreateRecordingView.ts",M),B=i.i18n.getLocalizedString.bind(void 0,I);class A extends Event{static eventName="recordingstarted";name;selectorAttribute;selectorTypesToRecord;constructor(e,t,i){super(A.eventName,{}),this.name=e,this.selectorAttribute=i||void 0,this.selectorTypesToRecord=t}}class P extends Event{static eventName="recordingcancelled";constructor(){super(P.eventName)}}class z extends HTMLElement{static litTagName=e.literal`devtools-create-recording-view`;#t=this.attachShadow({mode:"open"});#i="";#r;#o;connectedCallback(){this.#t.adoptedStyleSheets=[N,n.textInputStyles,n.checkboxStyles],this.#s(),this.#t.querySelector("input")?.focus()}set data(e){this.#o=e.recorderSettings,this.#i=this.#o.defaultTitle}#n(e){this.#r&&(this.#r=void 0,this.#s());"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.#o)throw new Error("settings not set");if(!e.value.trim())return this.#r=new Error(B(M.recordingNameIsRequired)),void this.#s();const t=this.#t.querySelectorAll(".selector-type input[type=checkbox]"),i=[];for(const e of t){const t=e,r=t.value;t.checked&&i.push(r)}if(!i.includes(a.Schema.SelectorType.CSS)&&!i.includes(a.Schema.SelectorType.XPath)&&!i.includes(a.Schema.SelectorType.Pierce))return this.#r=new Error(B(M.includeNecessarySelectors)),void this.#s();for(const e of Object.values(a.Schema.SelectorType))this.#o.setSelectorByType(e,i.includes(e));const r=this.#t.querySelector("#selector-attribute").value.trim();this.#o.selectorAttribute=r,this.dispatchEvent(new A(e.value.trim(),i,r))}#a(){this.dispatchEvent(new P)}#l=()=>{this.#t.querySelector("#user-flow-name")?.select()};#s(){const t=new Map([[a.Schema.SelectorType.ARIA,B(M.selectorTypeARIA)],[a.Schema.SelectorType.CSS,B(M.selectorTypeCSS)],[a.Schema.SelectorType.Text,B(M.selectorTypeText)],[a.Schema.SelectorType.XPath,B(M.selectorTypeXPath)],[a.Schema.SelectorType.Pierce,B(M.selectorTypePierce)]]);e.render(e.html` <div class="wrapper"> <div class="header-wrapper"> <h1>${B(M.createRecording)}</h1> <${r.Button.Button.litTagName} title="${B(M.cancelRecording)}" .data="${{variant:"round",size:"SMALL",iconName:"cross"}}" @click="${this.#a}"></${r.Button.Button.litTagName}> </div> <label class="row-label" for="user-flow-name">${B(M.recordingName)}</label> <input value="${this.#i}" @focus="${this.#l}" @keydown="${this.#n}" class="devtools-text-input" id="user-flow-name"> <label class="row-label" for="selector-attribute"> <span>${B(M.selectorAttribute)}</span> <x-link class="link" href="https://g.co/devtools/recorder#selector"> <${s.Icon.Icon.litTagName} .data="${{iconName:"help",color:"var(--icon-default)",width:"16px",height:"16px"}}"> </${s.Icon.Icon.litTagName}> </x-link> </label> <input value="${this.#o?.selectorAttribute}" placeholder="data-testid" @keydown="${this.#n}" class="devtools-text-input" id="selector-attribute"> <label class="row-label"> <span>${B(M.selectorTypes)}</span> <x-link class="link" href="https://g.co/devtools/recorder#selector"> <${s.Icon.Icon.litTagName} .data="${{iconName:"help",color:"var(--icon-default)",width:"16px",height:"16px"}}"></${s.Icon.Icon.litTagName}> </x-link> </label> <div class="checkbox-container"> ${Object.values(a.Schema.SelectorType).map((i=>{const r=this.#o?.getSelectorByType(i);return e.html` <label class="checkbox-label selector-type"> <input @keydown="${this.#n}" .value="${i}" checked="${e.Directives.ifDefined(r||void 0)}" type="checkbox"> ${t.get(i)||i} </label> `}))} </div> ${this.#r&&e.html` <div class="error" role="alert"> ${this.#r.message} </div> `} </div> <div class="footer"> <div class="controls"> <devtools-control-button @click="${this.startRecording}" .label="${B(M.startRecording)}" .shape="${"circle"}" title="${a.Tooltip.getTooltipForActions(B(M.startRecording),"chrome_recorder.start-recording")}"></devtools-control-button> </div> </div> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-create-recording-view",z);var O=Object.freeze({__proto__:null,RecordingStartedEvent:A,RecordingCancelledEvent:P,CreateRecordingView:z});const L=new CSSStyleSheet;L.replaceSync(".token-variable{color:var(--color-token-variable)}.token-property{color:var(--color-token-property)}.token-type{color:var(--color-token-type)}.token-variable-special{color:var(--color-token-variable-special)}.token-definition{color:var(--color-token-definition)}.token-builtin{color:var(--color-token-builtin)}.token-number{color:var(--color-token-number)}.token-string{color:var(--color-token-string)}.token-string-special{color:var(--color-token-string-special)}.token-atom{color:var(--color-token-atom)}.token-keyword{color:var(--color-token-keyword)}.token-comment{color:var(--color-token-comment)}.token-meta{color:var(--color-token-meta)}.token-invalid{color:var(--color-error-text)}.token-tag{color:var(--color-token-tag)}.token-attribute{color:var(--color-token-attribute)}.token-attribute-value{color:var(--color-token-attribute-value)}.token-inserted{color:var(--color-token-inserted)}.token-deleted{color:var(--color-token-deleted)}.token-heading{color:var(--color-token-variable-special);font-weight:bold}.token-link{color:var(--color-token-variable-special);text-decoration:underline}.token-strikethrough{text-decoration:strike-through}.token-strong{font-weight:bold}.token-emphasis{font-style:italic}\n/*# sourceURL=codeHighlighter.css */\n");const D=new CSSStyleSheet;D.replaceSync('*{box-sizing:border-box;font-size:inherit;margin:0;padding:0}devtools-editable-content{background:transparent;border:none;color:var(--color-text-primary);cursor:text;display:inline-block;line-height:18px;min-height:18px;min-width:0.5em;outline:none;overflow-wrap:anywhere}devtools-editable-content:hover,\ndevtools-editable-content:focus{box-shadow:0 0 0 1px var(--color-details-hairline);border-radius:2px}devtools-editable-content[placeholder]:empty::before{content:attr(placeholder);color:var(--color-text-primary);opacity:50%}devtools-editable-content[placeholder]:empty:focus::before{content:""}devtools-suggestion-box{position:absolute;visibility:hidden;display:block}devtools-editable-content:focus ~ devtools-suggestion-box{visibility:visible}.suggestions{background-color:var(--color-background);box-shadow:var(--drop-shadow);min-height:1em;min-width:150px;overflow-x:hidden;overflow-y:auto;position:relative;z-index:100}.suggestions > li{padding:1px;border:1px solid transparent;white-space:nowrap;font-family:var(--source-code-font-family);font-size:var(--source-code-font-size);color:var(--color-text-primary)}.suggestions > li:hover{background-color:var(--item-hover-color)}.suggestions > li.selected{background-color:var(--color-primary);color:var(--color-background)}\n/*# sourceURL=recorderInput.css */\n');function F(e,t="Assertion failed!"){if(!e)throw new Error(t)}const j=e=>{for(const t of Reflect.ownKeys(e)){const i=e[t];(i&&"object"==typeof i||"function"==typeof i)&&j(i)}return Object.freeze(e)};class _{value;constructor(e){this.value=e}}class U{value;constructor(e){this.value=e}}const V=(e,t)=>{if(t instanceof U){F(Array.isArray(e),`Expected an array. Got ${typeof e}.`);const i=[...e],r=Object.keys(t.value).sort(((e,t)=>Number(t)-Number(e)));for(const e of r){const r=t.value[Number(e)];void 0===r?i.splice(Number(e),1):r instanceof _?i.splice(Number(e),0,r.value):i[Number(e)]=V(i[e],r)}return Object.freeze(i)}if("object"==typeof t&&!Array.isArray(t)){F(!Array.isArray(e),"Expected an object. Got an array.");const i={...e},r=Object.keys(t);for(const e of r){const r=t[e];void 0===r?delete i[e]:i[e]=V(i[e],r)}return Object.freeze(i)}return t};var q=self&&self.__decorate||function(e,t,i,r){var o,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};const{html:G,Decorators:K,Directives:H,LitElement:W}=e,{customElement:X,property:Y,state:J}=K,{classMap:Q}=H,Z={hasChanged:(e,t)=>JSON.stringify(e)!==JSON.stringify(t)};let ee=class extends HTMLElement{static get observedAttributes(){return["disabled","placeholder"]}set disabled(e){this.contentEditable=String(!e)}get disabled(){return"true"!==this.contentEditable}set value(e){this.innerText=e,this.#d()}get value(){return this.innerText}set mimeType(e){this.#c=e,this.#d()}get mimeType(){return this.#c}#c="";constructor(){super(),this.contentEditable="true",this.tabIndex=0,this.addEventListener("focus",(()=>{this.innerHTML=this.innerText})),this.addEventListener("blur",this.#d.bind(this))}#d(){this.#c&&l.CodeHighlighter.highlightNode(this,this.#c)}attributeChangedCallback(e,t,i){if("disabled"===e)this.disabled=null!==i}};ee=q([X("devtools-editable-content")],ee);class te extends Event{static eventName="suggest";constructor(e){super(te.eventName),this.suggestion=e}}class ie extends Event{static eventName="suggestioninit";listeners;constructor(e){super(ie.eventName),this.listeners=e}}let re=class extends W{static styles=[D];#p=[];constructor(){super(),this.options=[],this.expression="",this.cursor=0}#h=e=>{if(F(e instanceof KeyboardEvent,"Bound to the wrong event."),this.#p.length>0)switch(e.key){case"ArrowDown":e.stopPropagation(),e.preventDefault(),this.#u(1);break;case"ArrowUp":e.stopPropagation(),e.preventDefault(),this.#u(-1)}if("Enter"===e.key)this.#p[this.cursor]&&this.#g(this.#p[this.cursor]),e.preventDefault()};#u(e){var t,i;this.cursor=(t=this.cursor+e,i=this.#p.length,(t%i+i)%i)}#g(e){this.dispatchEvent(new te(e))}connectedCallback(){super.connectedCallback(),this.dispatchEvent(new ie([["keydown",this.#h]]))}willUpdate(e){e.has("options")&&(this.options=Object.freeze([...this.options].sort())),e.has("expression")&&(this.cursor=0,this.#p=this.options.filter((e=>e.startsWith(this.expression))))}render(){if(0!==this.#p.length)return G`<ul class="suggestions"> ${this.#p.map(((e,t)=>G`<li class="${Q({selected:t===this.cursor})}" @mousedown="${this.#g.bind(this,e)}"> ${e} `))} </ul>`}};q([Y(Z)],re.prototype,"options",void 0),q([Y()],re.prototype,"expression",void 0),q([J()],re.prototype,"cursor",void 0),re=q([X("devtools-suggestion-box")],re);let oe=class extends W{static shadowRootOptions={...W.shadowRootOptions,delegatesFocus:!0};static styles=[D,L];constructor(){super(),this.options=[],this.expression="",this.placeholder="",this.value="",this.disabled=!1,this.mimeType="",this.addEventListener("blur",this.#m)}#v;get#b(){if(this.#v)return this.#v;const e=this.renderRoot.querySelector("devtools-editable-content");if(!e)throw new Error("Attempted to query node before rendering.");return this.#v=e,e}#m=()=>{window.getSelection()?.removeAllRanges(),this.value=this.#b.value,this.expression=this.#b.value};#f=e=>{F(e.target instanceof Node);const t=document.createRange();t.selectNodeContents(e.target);const i=window.getSelection();i.removeAllRanges(),i.addRange(t)};#h=e=>{"Enter"===e.key&&e.preventDefault()};#w=e=>{this.expression=e.target.value};#y=e=>{for(const[t,i]of e.listeners)this.addEventListener(t,i)};#x=e=>{this.#b.value=e.suggestion,setTimeout(this.blur.bind(this),0)};willUpdate(e){e.has("value")&&(this.expression=this.value)}render(){return G`<devtools-editable-content ?disabled="${this.disabled}" .enterKeyHint="${"done"}" .value="${this.value}" .mimeType="${this.mimeType}" @focus="${this.#f}" @input="${this.#w}" @keydown="${this.#h}" autocapitalize="off" inputmode="text" placeholder="${this.placeholder}" spellcheck="false"></devtools-editable-content> <devtools-suggestion-box @suggestioninit="${this.#y}" @suggest="${this.#x}" .options="${this.options}" .expression="${this.expression}"></devtools-suggestion-box>`}};q([Y(Z)],oe.prototype,"options",void 0),q([J()],oe.prototype,"expression",void 0),q([Y()],oe.prototype,"placeholder",void 0),q([Y()],oe.prototype,"value",void 0),q([Y({type:Boolean})],oe.prototype,"disabled",void 0),q([Y()],oe.prototype,"mimeType",void 0),oe=q([X("devtools-recorder-input")],oe);var se=Object.freeze({__proto__:null,get RecorderInput(){return oe}});const ne=new CSSStyleSheet;ne.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(--color-text-primary);font-weight:normal}.icon,\n.icon devtools-icon{width:20px;height:20px}.table{margin-top:35px}.title{font-size:13px;color:var(--color-text-primary);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(--color-details-hairline)}.row:focus-within,\n.row:hover{background-color:var(--color-background-elevation-1)}.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%;--override-background-color:rgba(26 115 232/15%)}.actions button:hover,\n.actions button:focus-visible{background-color:var(--override-background-color)}.actions .divider{width:1px;height:17px;background-color:var(--color-details-hairline);margin:0 6px}\n/*# sourceURL=recordingListView.css */\n");const ae={savedRecordings:"Saved recordings",createRecording:"Create a new recording",playRecording:"Play recording",deleteRecording:"Delete recording",openRecording:"Open recording"},le=i.i18n.registerUIStrings("panels/recorder/components/RecordingListView.ts",ae),de=i.i18n.getLocalizedString.bind(void 0,le);class ce extends Event{static eventName="createrecording";constructor(){super(ce.eventName)}}class pe extends Event{storageName;static eventName="deleterecording";constructor(e){super(pe.eventName),this.storageName=e}}class he extends Event{storageName;static eventName="openrecording";constructor(e){super(he.eventName),this.storageName=e}}class ue extends Event{storageName;static eventName="playrecording";constructor(e){super(ue.eventName),this.storageName=e}}class ge extends HTMLElement{static litTagName=e.literal`devtools-recording-list-view`;#t=this.attachShadow({mode:"open"});#S={recordings:[],replayAllowed:!0};connectedCallback(){this.#t.adoptedStyleSheets=[ne],o.ScheduledRender.scheduleRender(this,this.#s)}set recordings(e){this.#S.recordings=e,o.ScheduledRender.scheduleRender(this,this.#s)}set replayAllowed(e){this.#S.replayAllowed=e,o.ScheduledRender.scheduleRender(this,this.#s)}#$(){this.dispatchEvent(new ce)}#k(e,t){t.stopPropagation(),this.dispatchEvent(new pe(e))}#E(e,t){t.stopPropagation(),this.dispatchEvent(new he(e))}#T(e,t){t.stopPropagation(),this.dispatchEvent(new ue(e))}#n(e,t){"Enter"===t.key&&this.#E(e,t)}#R(e){e.stopPropagation()}#s=()=>{e.render(e.html` <div class="wrapper"> <div class="header"> <h1>${de(ae.savedRecordings)}</h1> <${r.Button.Button.litTagName} .variant="${"primary"}" @click="${this.#$}" title="${a.Tooltip.getTooltipForActions(de(ae.createRecording),"chrome_recorder.create-recording")}"> ${de(ae.createRecording)} </${r.Button.Button.litTagName}> </div> <div class="table"> ${this.#S.recordings.map((t=>e.html` <div role="button" tabindex="0" aria-label="${de(ae.openRecording)}" class="row" @keydown="${this.#n.bind(this,t.storageName)}" @click="${this.#E.bind(this,t.storageName)}"> <div class="icon"> <${s.Icon.Icon.litTagName} .data="${{iconName:"flow",color:"var(--color-primary)"}}"> </${s.Icon.Icon.litTagName}> </div> <div class="title">${t.name}</div> <div class="actions"> ${this.#S.replayAllowed?e.html` <${r.Button.Button.litTagName} title="${de(ae.playRecording)}" .data="${{variant:"round",iconName:"play"}}" @click="${this.#T.bind(this,t.storageName)}" @keydown="${this.#R}"></${r.Button.Button.litTagName}> <div class="divider"></div>`:""} <${r.Button.Button.litTagName} class="delete-recording-button" title="${de(ae.deleteRecording)}" .data="${{variant:"round",iconName:"bin"}}" @click="${this.#k.bind(this,t.storageName)}" @keydown="${this.#R}"></${r.Button.Button.litTagName}> </div> </div> `))} </div> </div> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-recording-list-view",ge);var me=Object.freeze({__proto__:null,CreateRecordingEvent:ce,DeleteRecordingEvent:pe,OpenRecordingEvent:he,PlayRecordingEvent:ue,RecordingListView:ge});const ve=new CSSStyleSheet;ve.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(--color-background);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(--color-details-hairline);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(--color-details-hairline);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(--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(--color-text-secondary);max-width:100%;margin-bottom:16px}.header{align-items:center;border-bottom:1px solid var(--color-details-hairline);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(--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(--color-input-outline-error)}#title-input.disabled{color:var(--color-input-text-disabled)}.title-input-error-text{margin-top:4px;margin-left:19px;color:var(--color-error-text)}.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(--color-details-hairline);display:flex;flex-flow:row wrap;justify-content:space-between}.settings-title{font-size:14px;line-height:24px;letter-spacing:0.03em;color:var(--color-text-primary);display:flex;align-items:center;align-content:center;gap:5px}.settings{margin-top:4px;display:flex;font-size:12px;line-height:20px;letter-spacing:0.03em;color:var(--color-text-secondary)}.settings.expanded{gap:10px}.settings .separator{width:1px;height:20px;background-color:var(--color-details-hairline);margin:0 5px}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.is-recording .header-title::before{background:var(--color-red)}.footer{display:flex;justify-content:center;border-top:1px solid var(--color-details-hairline);padding:12px;background:var(--color-background);z-index:1}.controls{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.chevron{width:14px;height:14px;transform:rotate(-90deg)}.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;padding:3px;justify-content:space-between;gap:3px}.section-toolbar > devtools-select-menu{min-width:50px}.sections .section-toolbar{justify-content:flex-end}.section-toolbar > *{height:24px}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(--color-details-hairline)}.show-code{margin-right:14px;margin-top:8px}devtools-recorder-extension-view{flex:1}\n/*# sourceURL=recordingView.css */\n');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(--color-primary);stroke:#1a73e8;transform:translate(-1.92px,-3px)}.circle-icon{fill:var(--color-primary);stroke:var(--color-background);stroke-width:4px;r:5px;cx:8px;cy:8px}.is-start-of-group .circle-icon{r:7px;fill:var(--color-background);stroke:var(--color-primary);stroke-width:2px}.step.is-success .circle-icon{fill:var(--color-primary);stroke:var(--color-primary)}.step.is-current .circle-icon{stroke-dasharray:24 10;animation:rotate 1s linear infinite;fill:var(--color-background);stroke:var(--color-primary);stroke-width:2px}.error{margin:16px 0 0;padding:8px;background:var(--color-error-background);color:var(--color-error-text);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(--color-error-text);stroke:var(--color-error-text)}.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)}.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(--color-details-hairline);padding:3px 6px 6px;margin-left:-6px;border-radius:3px}devtools-recorder-step-editor:hover{border:1px solid var(--color-primary)}.summary{display:flex;flex-flow:row nowrap}.filler{flex-grow:1}.subtitle{font-weight:normal;color:var(--color-text-secondary);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;--override-select-menu-show-button-border-radius:0;--override-select-menu-show-button-outline:none;--override-select-menu-show-button-padding:0}.step-actions:hover,\n.step-actions:focus-within{background-color:var(--color-button-secondary-background-hovering)}.step-actions:active{background-color:var(--color-background-highlight)}.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(--color-background-elevation-1)}.is-selected .overlay{background:var(--color-button-secondary-background-hovering)}:host-context(.is-stopped) .overlay{background:var(--color-execution-line-background);outline:1px solid var(--color-execution-line-outline);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(--color-background-elevation-1)}.bar .line{fill:var(--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(--color-error-text)}:host-context(.is-error) .bar .background{fill:var(--color-error-background)}: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`;#C=!1;#N=!1;#M=!1;#I=!1;#B=!1;constructor(){super();this.attachShadow({mode:"open"}).adoptedStyleSheets=[fe]}set data(e){this.#M=e.isFirstSection,this.#I=e.isLastSection,this.#C=e.isEndOfGroup,this.#N=e.isStartOfGroup,this.#B=e.isSelected,this.#s()}connectedCallback(){this.#s()}#s(){const t={"timeline-section":!0,"is-end-of-group":this.#C,"is-start-of-group":this.#N,"is-first-section":this.#M,"is-last-section":this.#I,"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})}}o.CustomElements.defineComponent("devtools-timeline-section",we);var ye=Object.freeze({__proto__:null,TimelineSection:we});const xe={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"},Se=i.i18n.registerUIStrings("panels/recorder/components/StepView.ts",xe),$e=i.i18n.getLocalizedString.bind(void 0,Se);class ke extends Event{static eventName="captureselectors";data;constructor(e){super(ke.eventName,{bubbles:!0,composed:!0}),this.data=e}}class Ee extends Event{static eventName="stopselectorscapture";constructor(){super(Ee.eventName,{bubbles:!0,composed:!0})}}class Te extends Event{static eventName="copystep";step;constructor(e){super(Te.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 Ne extends Event{static eventName="removestep";step;constructor(e){super(Ne.eventName,{bubbles:!0,composed:!0}),this.step=e}}class Me extends Event{static eventName="addbreakpoint";index;constructor(e){super(Me.eventName,{bubbles:!0,composed:!0}),this.index=e}}class Ie extends Event{static eventName="removebreakpoint";index;constructor(e){super(Ie.eventName,{bubbles:!0,composed:!0}),this.index=e}}class Be extends HTMLElement{static litTagName=e.literal`devtools-step-view`;#t=this.attachShadow({mode:"open"});#A;#P;#z="default";#r;#O=!1;#C=!1;#N=!1;#L=0;#D=0;#M=!1;#I=!1;#F=!1;#j=!1;#_;#U=!1;#V=!1;#q=new IntersectionObserver((e=>{this.#V=e[0].isIntersecting}));#G=!1;#K=!0;#H;#W;#B=!1;#o;set data(e){const t=this.#z;this.#A=e.step,this.#P=e.section,this.#z=e.state,this.#r=e.error,this.#C=e.isEndOfGroup,this.#N=e.isStartOfGroup,this.#L=e.stepIndex,this.#D=e.sectionIndex,this.#M=e.isFirstSection,this.#I=e.isLastSection,this.#F=e.isRecording,this.#j=e.isPlaying,this.#G=e.hasBreakpoint,this.#K=e.removable,this.#H=e.builtInConverters,this.#W=e.extensionConverters,this.#B=e.isSelected,this.#o=e.recorderSettings,this.#s(),this.#z===t||"current"!==this.#z||this.#V||this.scrollIntoView()}get step(){return this.#A}get section(){return this.#P}connectedCallback(){this.#t.adoptedStyleSheets=[be],this.#q.observe(this),this.#s()}disconnectedCallback(){this.#q.unobserve(this)}#X(){this.#O=!this.#O,this.#s()}#Y(e){const t=e;"Enter"!==t.key&&" "!==t.key||(this.#X(),e.stopPropagation(),e.preventDefault())}#J(){if(this.#P)return this.#P.title?this.#P.title:e.html`<span class="fallback">(No Title)</span>`;if(!this.#A)throw new Error("Missing both step and section");switch(this.#A.type){case a.Schema.StepType.CustomStep:return $e(xe.customStepTitle);case a.Schema.StepType.SetViewport:return $e(xe.setViewportClickTitle);case a.Schema.StepType.Click:return $e(xe.clickStepTitle);case a.Schema.StepType.DoubleClick:return $e(xe.doubleClickStepTitle);case a.Schema.StepType.Hover:return $e(xe.hoverStepTitle);case a.Schema.StepType.EmulateNetworkConditions:return $e(xe.emulateNetworkConditionsStepTitle);case a.Schema.StepType.Change:return $e(xe.changeStepTitle);case a.Schema.StepType.Close:return $e(xe.closeStepTitle);case a.Schema.StepType.Scroll:return $e(xe.scrollStepTitle);case a.Schema.StepType.KeyUp:return $e(xe.keyUpStepTitle);case a.Schema.StepType.KeyDown:return $e(xe.keyDownStepTitle);case a.Schema.StepType.WaitForElement:return $e(xe.waitForElementStepTitle);case a.Schema.StepType.WaitForExpression:return $e(xe.waitForExpressionStepTitle);case a.Schema.StepType.Navigate:return $e(xe.navigateStepTitle)}}#Q(e){switch(e){case"button":return $e(xe.elementRoleButton);case"input":return $e(xe.elementRoleInput);default:return $e(xe.elementRoleFallback)}}#Z(){if(!this.#A||!("selectors"in this.#A))return"";const e=this.#A.selectors.flat().find((e=>e.startsWith("aria/")));if(!e)return"";const t=e.match(/^aria\/(.+?)(\[role="(.+)"\])?$/);return t?`${this.#Q(t[3])} "${t[1]}"`:""}#ee(){return this.#P?this.#P.url:""}#te(e){const t=this.#A||this.#P?.causingStep;if(!t)throw new Error("Expected step.");this.dispatchEvent(new Re(t,e.data))}#ie(e){switch(e.itemValue){case"add-step-before":{const e=this.#A||this.#P;if(!e)throw new Error("Expected step or section.");this.dispatchEvent(new Ce(e,"before"));break}case"add-step-after":{const e=this.#A||this.#P;if(!e)throw new Error("Expected step or section.");this.dispatchEvent(new Ce(e,"after"));break}case"remove-step":{const e=this.#P?.causingStep;if(!this.#A&&!e)throw new Error("Expected step.");this.dispatchEvent(new Ne(this.#A||e));break}case"add-breakpoint":if(!this.#A)throw new Error("Expected step");this.dispatchEvent(new Me(this.#L));break;case"remove-breakpoint":if(!this.#A)throw new Error("Expected step");this.dispatchEvent(new Ie(this.#L));break;default:{const t=e.itemValue;if(!t.startsWith("copy-step-as-"))throw new Error("Unknown step action.");const i=this.#A||this.#P?.causingStep;if(!i)throw new Error("Step not found.");const r=t.substring("copy-step-as-".length);this.#o&&(this.#o.preferredCopyFormat=r),this.dispatchEvent(new Te(structuredClone(i)))}}}#re(e){e.stopPropagation(),e.preventDefault(),this.#U=!this.#U,this.#s()}#oe(){this.#U=!1,this.#s()}#se(){this.#G?this.dispatchEvent(new Ie(this.#L)):this.dispatchEvent(new Me(this.#L)),this.#s()}#ne(){if(!this.#_)throw new Error("Missing actionsMenuButton");return this.#_}#ae=()=>{const e=[];if(this.#j||(this.#A&&e.push({id:"add-step-before",label:$e(xe.addStepBefore),group:"stepManagement",groupTitle:$e(xe.stepManagement)}),e.push({id:"add-step-after",label:$e(xe.addStepAfter),group:"stepManagement",groupTitle:$e(xe.stepManagement)}),this.#K&&e.push({id:"remove-step",group:"stepManagement",groupTitle:$e(xe.stepManagement),label:$e(xe.removeStep)})),this.#A&&!this.#F&&(this.#G?e.push({id:"remove-breakpoint",label:$e(xe.removeBreakpoint),group:"breakPointManagement",groupTitle:$e(xe.breakpoints)}):e.push({id:"add-breakpoint",label:$e(xe.addBreakpoint),group:"breakPointManagement",groupTitle:$e(xe.breakpoints)})),this.#A){for(const t of this.#H||[])e.push({id:"copy-step-as-"+t.getId(),label:t.getFormatName(),group:"copy",groupTitle:$e(xe.copyAs)});for(const t of this.#W||[])e.push({id:"copy-step-as-"+t.getId(),label:t.getFormatName(),group:"copy",groupTitle:$e(xe.copyAs)})}return e};#le(){const t=this.#ae(),i=new Map;for(const e of t){const t=i.get(e.group);t?t.push(e):i.set(e.group,[e])}const s=[];for(const[e,t]of i)s.push({group:e,groupTitle:t[0].groupTitle,actions:t});return e.html` <${r.Button.Button.litTagName} class="step-actions" title="${$e(xe.openStepActions)}" aria-label="${$e(xe.openStepActions)}" @click="${this.#re}" @keydown="${e=>{e.stopPropagation()}}" on-render="${o.Directives.nodeRenderedCallback((e=>{this.#_=e}))}" .data="${{variant:"toolbar",iconName:"dots-vertical",title:$e(xe.openStepActions)}}"></${r.Button.Button.litTagName}> <${g.Menu.Menu.litTagName} @menucloserequest="${this.#oe}" @menuitemselected="${this.#ie}" .origin="${this.#ne.bind(this)}" .showSelectedItem="${!1}" .showConnector="${!1}" .open="${this.#U}"> ${e.Directives.repeat(s,(e=>e.group),(t=>e.html` <${g.Menu.MenuGroup.litTagName} .name="${t.groupTitle}"> ${e.Directives.repeat(t.actions,(e=>e.id),(t=>e.html`<${g.Menu.MenuItem.litTagName} .value="${t.id}"> ${t.label} </${g.Menu.MenuItem.litTagName}> `))} </${g.Menu.MenuGroup.litTagName}> `))} </${g.Menu.Menu.litTagName}> `}#de=e=>{if(2!==e.button)return;const i=new t.ContextMenu.ContextMenu(e),r=this.#ae(),o=r.filter((e=>e.id.startsWith("copy-step-as-"))),s=r.filter((e=>!e.id.startsWith("copy-step-as-")));for(const e of s){i.section(e.group).appendItem(e.label,(()=>{this.#ie(new g.Menu.MenuItemSelectedEvent(e.id))}))}const n=o.find((e=>e.id==="copy-step-as-"+this.#o?.preferredCopyFormat));if(n&&i.section("copy").appendItem(n.label,(()=>{this.#ie(new g.Menu.MenuItemSelectedEvent(n.id))})),o.length){const e=i.section("copy").appendSubMenuItem($e(xe.copyAs));for(const t of o)t!==n&&e.section(t.group).appendItem(t.label,(()=>{this.#ie(new g.Menu.MenuItemSelectedEvent(t.id))}))}i.show()};#s(){if(!this.#A&&!this.#P)return;const t={step:!0,expanded:this.#O,"is-success":"success"===this.#z,"is-current":"current"===this.#z,"is-outstanding":"outstanding"===this.#z,"is-error":"error"===this.#z,"is-stopped":"stopped"===this.#z,"is-start-of-group":this.#N,"is-first-section":this.#M,"has-breakpoint":this.#G},i=Boolean(this.#A),r=this.#J(),o=this.#A?this.#Z():this.#ee();e.render(e.html` <${we.litTagName} .data="${{isFirstSection:this.#M,isLastSection:this.#I,isStartOfGroup:this.#N,isEndOfGroup:this.#C,isSelected:this.#B}}" @contextmenu="${this.#de}" data-step-index="${this.#L}" data-section-index="${this.#D}" class="${e.Directives.classMap(t)}"> <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="${this.#se.bind(this)}" class="breakpoint-icon" d="M2.5 5.5H17.7098L21.4241 12L17.7098 18.5H2.5V5.5Z"/> </svg> <div class="summary"> <div class="title-container ${i?"action":""}" @click="${i&&this.#X.bind(this)}" @keydown="${i&&this.#Y.bind(this)}" tabindex="0" aria-role="${i?"button":""}" aria-label="${i?"Show details for step":""}"> ${i?e.html`<${s.Icon.Icon.litTagName} class="chevron" .data="${{iconName:"triangle-down",color:"var(--color-text-primary)"}}"> </${s.Icon.Icon.litTagName}>`:""} <div class="title"> <div class="main-title" title="${r}">${r}</div> <div class="subtitle" title="${o}">${o}</div> </div> </div> <div class="filler"></div> ${this.#le()} </div> <div class="details"> ${this.#A&&e.html`<devtools-recorder-step-editor .step="${this.#A}" .disabled="${this.#j}" @stepedited="${this.#te}"> </devtools-recorder-step-editor>`} ${this.#P?.causingStep&&e.html`<devtools-recorder-step-editor .step="${this.#P.causingStep}" .isTypeEditable="${!1}" .disabled="${this.#j}" @stepedited="${this.#te}"> </devtools-recorder-step-editor>`} </div> ${this.#r&&e.html` <div class="error" role="alert"> ${this.#r.message} </div> `} </${we.litTagName}> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-step-view",Be);var Ae=Object.freeze({__proto__:null,CaptureSelectorsEvent:ke,StopSelectorsCaptureEvent:Ee,CopyStepEvent:Te,StepChanged:Re,AddStep:Ce,RemoveStep:Ne,AddBreakpointEvent:Me,RemoveBreakpointEvent:Ie,StepView:Be});const Pe=new CSSStyleSheet;Pe.replaceSync('.select-button{display:flex;--override-button-no-right-border-radius:1}.select-button devtools-button{position:relative}.select-menu-item-content-with-icon{display:flex;align-items:center}.select-menu-item-content-with-icon::before{content:"";position:relative;left:0;top:0;background-color:var(--color-text-primary);display:inline-block;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;width:24px;height:24px;margin-right:4px;mask-image:var(--item-mask-icon);-webkit-mask-image:var(--item-mask-icon)}devtools-select-menu{height:var(--override-select-menu-height,24px);border-radius:0 4px 4px 0;box-sizing:border-box;--override-select-menu-show-button-outline:var(--color-button-outline-focus);--override-select-menu-label-with-arrow-padding:0;--override-select-menu-border:none;--override-select-menu-show-button-padding:0 6px 0 0}devtools-select-menu.primary{border:none;border-left:1px solid var(--override-icon-and-text-color);--override-icon-and-text-color:var(--color-background);--override-select-menu-arrow-color:var(--override-icon-and-text-color);--override-divider-color:var(--override-icon-and-text-color);--override-select-menu-background-color:var(--color-primary);--override-select-menu-active-background-color:var(\n      --override-select-menu-background-color\n    )}devtools-select-menu.primary:hover{--override-select-menu-background-color:var(\n      --color-button-primary-background-hovering\n    )}devtools-select-menu[disabled].primary,\ndevtools-select-menu[disabled].primary:hover{--override-icon-and-text-color:var(--color-text-disabled);--override-select-menu-background-color:var(--color-background-elevation-1)}\n/*# sourceURL=selectButton.css */\n');class ze extends Event{value;static eventName="selectbuttonclick";constructor(e){super(ze.eventName,{bubbles:!0,composed:!0}),this.value=e}}class Oe extends HTMLElement{static litTagName=e.literal`devtools-select-button`;#t=this.attachShadow({mode:"open"});#S={disabled:!1,value:"",items:[],groups:[],variant:"primary"};connectedCallback(){this.#t.adoptedStyleSheets=[Pe],o.ScheduledRender.scheduleRender(this,this.#s)}get disabled(){return this.#S.disabled}set disabled(e){this.#S.disabled=e,o.ScheduledRender.scheduleRender(this,this.#s)}get items(){return this.#S.items}set items(e){this.#S.items=e,o.ScheduledRender.scheduleRender(this,this.#s)}set groups(e){this.#S.groups=e,o.ScheduledRender.scheduleRender(this,this.#s)}get value(){return this.#S.value}set value(e){this.#S.value=e,o.ScheduledRender.scheduleRender(this,this.#s)}get variant(){return this.#S.variant}set variant(e){this.#S.variant=e,o.ScheduledRender.scheduleRender(this,this.#s)}set action(e){this.#S.action=e,o.ScheduledRender.scheduleRender(this,this.#s)}#ce(e){e.stopPropagation(),this.dispatchEvent(new ze(this.#S.value))}#pe(e){this.dispatchEvent(new ze(e.itemValue)),o.ScheduledRender.scheduleRender(this,this.#s)}#he(t,i){return e.html` <${g.Menu.MenuItem.litTagName} .value="${t.value}" .selected="${t.value===i.value}"> ${t.label()} </${g.Menu.MenuItem.litTagName}> `}#ue(t,i){return e.html` <${g.Menu.MenuGroup.litTagName} .name="${t.name}"> ${t.items.map((e=>this.#he(e,i)))} </${g.Menu.MenuGroup.litTagName}> `}#ge(e){return this.#S.action?a.Tooltip.getTooltipForActions(e,this.#S.action):""}#s=()=>{const t=Boolean(this.#S.groups.length),i=t?this.#S.groups.flatMap((e=>e.items)):this.#S.items,o=i.find((e=>e.value===this.#S.value))||i[0];if(!o)return;const s={primary:"primary"===this.#S.variant,secondary:"secondary"===this.#S.variant},n="secondary"===this.#S.variant?"secondary":"primary",a=o.buttonLabel?o.buttonLabel():o.label();e.render(e.html` <div class="select-button" title="${this.#ge(a)||e.nothing}"> ${o?e.html` <${r.Button.Button.litTagName} .disabled="${this.#S.disabled}" .variant="${n}" .iconName="${o.buttonIconName}" @click="${this.#ce}"> ${a} </${r.Button.Button.litTagName}>`:""} <${g.SelectMenu.SelectMenu.litTagName} class="${e.Directives.classMap(s)}" @selectmenuselected="${this.#pe}" ?disabled="${this.#S.disabled}" .showArrow="${!0}" .sideButton="${!1}" .showSelectedItem="${!0}" .disabled="${this.#S.disabled}" .buttonTitle="${e.html``}" .position="${"bottom"}" .horizontalAlignment="${"right"}"> ${t?this.#S.groups.map((e=>this.#ue(e,o))):this.#S.items.map((e=>this.#he(e,o)))} </${g.SelectMenu.SelectMenu.litTagName}> </div>`,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-select-button",Oe);var Le=Object.freeze({__proto__:null,SelectButtonClickEvent:ze,SelectButton:Oe});const De={ReplayNormalButtonLabel:"Replay",ReplayNormalItemLabel:"Normal (Default)",ReplaySlowButtonLabel:"Slow replay",ReplaySlowItemLabel:"Slow",ReplayVerySlowButtonLabel:"Very slow replay",ReplayVerySlowItemLabel:"Very slow",ReplayExtremelySlowButtonLabel:"Extremely slow replay",ReplayExtremelySlowItemLabel:"Extremely slow",speedGroup:"Speed",extensionGroup:"Extensions"},Fe=[{value:"normal",buttonIconName:"play",buttonLabel:()=>Ue(De.ReplayNormalButtonLabel),label:()=>Ue(De.ReplayNormalItemLabel)},{value:"slow",buttonIconName:"play",buttonLabel:()=>Ue(De.ReplaySlowButtonLabel),label:()=>Ue(De.ReplaySlowItemLabel)},{value:"very_slow",buttonIconName:"play",buttonLabel:()=>Ue(De.ReplayVerySlowButtonLabel),label:()=>Ue(De.ReplayVerySlowItemLabel)},{value:"extremely_slow",buttonIconName:"play",buttonLabel:()=>Ue(De.ReplayExtremelySlowButtonLabel),label:()=>Ue(De.ReplayExtremelySlowItemLabel)}],je={normal:d.UserMetrics.RecordingReplaySpeed.Normal,slow:d.UserMetrics.RecordingReplaySpeed.Slow,very_slow:d.UserMetrics.RecordingReplaySpeed.VerySlow,extremely_slow:d.UserMetrics.RecordingReplaySpeed.ExtremelySlow},_e=i.i18n.registerUIStrings("panels/recorder/components/ReplayButton.ts",De),Ue=i.i18n.getLocalizedString.bind(void 0,_e);class Ve extends Event{speed;extension;static eventName="startreplay";constructor(e,t){super(Ve.eventName,{bubbles:!0,composed:!0}),this.speed=e,this.extension=t}}class qe extends HTMLElement{static litTagName=e.literal`devtools-replay-button`;#t=this.attachShadow({mode:"open"});#me=this.#s.bind(this);#S={disabled:!1};#ve;#be=[];set data(e){this.#ve=e.settings,this.#be=e.replayExtensions}get disabled(){return this.#S.disabled}set disabled(e){this.#S.disabled=e,o.ScheduledRender.scheduleRender(this,this.#me)}connectedCallback(){o.ScheduledRender.scheduleRender(this,this.#me)}#fe(e){if(e.stopPropagation(),e.value.startsWith("extension")){this.#ve&&(this.#ve.replayExtension=e.value);const t=Number(e.value.substring("extension".length));return this.dispatchEvent(new Ve("normal",this.#be[t])),void o.ScheduledRender.scheduleRender(this,this.#me)}const t=e.value;this.#ve&&(this.#ve.speed=t,this.#ve.replayExtension=""),d.userMetrics.recordingReplaySpeed(je[t]),this.dispatchEvent(new Ve(e.value)),o.ScheduledRender.scheduleRender(this,this.#me)}#s(){const t=[{name:Ue(De.speedGroup),items:Fe}];this.#be.length&&t.push({name:Ue(De.extensionGroup),items:this.#be.map(((e,t)=>({value:"extension"+t,buttonIconName:"play",buttonLabel:()=>e.getName(),label:()=>e.getName()})))}),e.render(e.html` <${Oe.litTagName} @selectbuttonclick="${this.#fe}" .variant="${"primary"}" .showItemDivider="${!1}" .disabled="${this.#S.disabled}" .action="${"chrome_recorder.replay-recording"}" .value="${this.#ve?.replayExtension||this.#ve?.speed}" .groups="${t}"> </${Oe.litTagName}>`,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-replay-button",qe);var Ge=Object.freeze({__proto__:null,StartReplayEvent:Ve,ReplayButton:qe});const Ke=new CSSStyleSheet;Ke.replaceSync('\n  :host {\n    --current-main-area-size: 50%;\n    --resizer-size: 3px;\n    --min-main-area-size: 200px;\n    --min-sidebar-size: 150px;\n    --main-area-size: calc(max(var(--current-main-area-size), var(--min-main-area-size)));\n\n    height: 100%;\n    width: 100%;\n    display: block;\n    overflow: auto;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    container: sidebar / size; /* stylelint-disable-line property-no-unknown */\n  }\n\n  .container {\n    --resizer-position: calc(min(var(--main-area-size), calc(100% - var(--min-sidebar-size))));\n    --min-container-size: calc(var(--min-sidebar-size) + var(--min-main-area-size) + var(--resizer-size));\n\n    display: flex;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    gap: var(--resizer-size);\n\n    min-width: var(--min-container-size);\n  }\n\n  #resizer {\n    background-color: var(--color-background-elevation-1);\n    position: absolute;\n    user-select: none;\n\n    /* horizontal */\n    width: var(--resizer-size);\n    cursor: col-resize;\n    left: var(--resizer-position);\n    bottom: 0;\n    top: 0;\n  }\n\n  slot {\n    overflow: auto;\n    display: block;\n  }\n\n  slot[name="main"] {\n\n    /* horizontal */\n    width: var(--resizer-position);\n    min-width: var(--min-main-area-size);\n  }\n\n  slot[name="sidebar"] {\n    flex: 1 0 0;\n\n    min-width: var(--min-sidebar-size);\n  }\n\n  @container sidebar (max-width: 600px) and (min-height: 600px) { /* stylelint-disable-line at-rule-no-unknown */\n    .container {\n      flex-direction: column;\n      min-height: var(--min-container-size);\n      min-width: auto;\n    }\n\n    #resizer {\n      width: auto;\n      height: var(--resizer-size);\n      cursor: row-resize;\n      top: var(--resizer-position);\n      left: 0;\n      right: 0;\n    }\n\n    slot[name="main"] {\n      width: auto;\n      min-width: auto;\n      height: var(--resizer-position);\n      min-height: var(--min-main-area-size);\n    }\n\n    slot[name="sidebar"] {\n      min-width: auto;\n      min-height: var(--min-sidebar-size);\n    }\n  }\n');class He extends HTMLElement{static litTagName=e.literal`devtools-split-view`;#t=this.attachShadow({mode:"open"});#we=[0,0];#ye=0;#xe=[0,0];#q;connectedCallback(){this.style.setProperty("--current-main-area-size","60%"),this.#t.adoptedStyleSheets=[Ke],this.#q=new ResizeObserver((e=>this.#Se(e[0].contentRect))),this.#q.observe(this),this.#s()}#Se=e=>{e.width<=600&&e.height>=600?this.#ye=1:this.#ye=0,this.style.setProperty("--current-main-area-size","60%")};#$e=e=>{const t=this.#t.querySelector("slot[name=main]");if(!t)throw new Error("Main slot not found");const i=t.getBoundingClientRect();this.#xe=[i.width,i.height],this.#we=[e.clientX,e.clientY],window.addEventListener("mousemove",this.#ke,!0),window.addEventListener("mouseup",this.#Ee,!0)};#Ee=()=>{window.removeEventListener("mousemove",this.#ke,!0),window.removeEventListener("mouseup",this.#Ee,!0)};#ke=e=>{const t=[e.clientX,e.clientY][this.#ye]-this.#we[this.#ye],i=this.getBoundingClientRect(),r=[i.width,i.height],o=100*(this.#xe[this.#ye]+t)/r[this.#ye];this.style.setProperty("--current-main-area-size",o+"%")};#s=()=>{e.render(e.html` <div class="wrapper"> <div class="container"> <slot name="main"></slot> <div id="resizer" @mousedown="${this.#$e}"></div> <slot name="sidebar"></slot> </div> </div> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-split-view",He);var We=Object.freeze({__proto__:null,SplitView:He});const Xe=new CSSStyleSheet;Xe.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(--color-details-hairline)}header > div{align-self:center}.icon{display:block;width:16px;height:16px}.title{display:flex;flex-direction:row;gap:6px;color:var(--color-text-secondary);align-items:center;font-weight:500}\n/*# sourceURL=extensionView.css */\n");const Ye={closeView:"Close",extension:"Content provided by a browser extension"},Je=i.i18n.registerUIStrings("panels/recorder/components/ExtensionView.ts",Ye),Qe=i.i18n.getLocalizedString.bind(void 0,Je);class Ze extends Event{static eventName="recorderextensionviewclosed";constructor(){super(Ze.eventName,{bubbles:!0,composed:!0})}}const et=new URL("../images/extension_icon.svg",import.meta.url).toString();class tt extends HTMLElement{static litTagName=e.literal`devtools-recorder-extension-view`;#t=this.attachShadow({mode:"open"});#Te;connectedCallback(){this.#t.adoptedStyleSheets=[Xe],this.#s()}disconnectedCallback(){this.#Te&&m.ExtensionManager.ExtensionManager.instance().getView(this.#Te.id).hide()}set descriptor(e){this.#Te=e,this.#s(),m.ExtensionManager.ExtensionManager.instance().getView(e.id).show()}#Re(){this.dispatchEvent(new Ze)}#s(){if(!this.#Te)return;const t=m.ExtensionManager.ExtensionManager.instance().getView(this.#Te.id).frame();e.render(e.html` <div class="extension-view"> <header> <div class="title"> <${s.Icon.Icon.litTagName} class="icon" title="${Qe(Ye.extension)}" .data="${{iconPath:et,color:"var(--color-text-secondary)"}}"> </${s.Icon.Icon.litTagName}> ${this.#Te.title} </div> <${r.Button.Button.litTagName} title="${Qe(Ye.closeView)}" .data="${{variant:"round",size:"TINY",iconName:"cross"}}" @click="${this.#Re}"></${r.Button.Button.litTagName}> </header> <main> ${t} <main> </main></main></div> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-recorder-extension-view",tt);const it={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"},rt=i.i18n.registerUIStrings("panels/recorder/components/RecordingView.ts",it),ot=i.i18n.getLocalizedString.bind(void 0,rt);class st extends Event{static eventName="recordingfinished";constructor(){super(st.eventName)}}class nt extends Event{static eventName="playrecording";data;constructor(e={targetPanel:"chrome_recorder",speed:"normal"}){super(nt.eventName),this.data=e}}class at extends Event{static eventName="abortreplay";constructor(){super(at.eventName)}}class lt extends Event{static eventName="recordingchanged";data;constructor(e,t){super(lt.eventName),this.data={currentStep:e,newStep:t}}}class dt extends Event{static eventName="addassertion";constructor(){super(dt.eventName)}}class ct extends Event{static eventName="recordingtitlechanged";title;constructor(e){super(ct.eventName,{}),this.title=e}}class pt extends Event{static eventName="networkconditionschanged";data;constructor(e){super(pt.eventName,{composed:!0,bubbles:!0}),this.data=e}}class ht extends Event{static eventName="timeoutchanged";data;constructor(e){super(ht.eventName,{composed:!0,bubbles:!0}),this.data=e}}const ut=[p.NetworkManager.NoThrottlingConditions,p.NetworkManager.OfflineConditions,p.NetworkManager.Slow3GConditions,p.NetworkManager.Fast3GConditions];class gt extends HTMLElement{static litTagName=e.literal`devtools-recording-view`;#t=this.attachShadow({mode:"open"});#Ce={isPlaying:!1,isPausedOnBreakpoint:!1};#Ne=null;#F=!1;#Me=!1;#Ie=!1;#Be;#Ae=[];#Pe;#ze=[];#ve;#o;#Oe;#Le=new Set;#De;#Fe=!1;#je=!0;#H=[];#W=[];#be;#_e=!1;#Ue="";#Ve="";#qe;#Ge;#Ke;#He=this.#We.bind(this);set data(e){this.#F=e.isRecording,this.#Ce=e.replayState,this.#Me=e.recordingTogglingInProgress,this.#Be=e.currentStep,this.#Ne=e.recording,this.#Ae=this.#Ne.steps,this.#ze=e.sections,this.#ve=e.settings,this.#o=e.recorderSettings,this.#Pe=e.currentError,this.#Oe=e.lastReplayResult,this.#je=e.replayAllowed,this.#Ie=!1,this.#Le=e.breakpointIndexes,this.#H=e.builtInConverters,this.#W=e.extensionConverters,this.#be=e.replayExtensions,this.#Ke=e.extensionDescriptor,this.#Ve=this.#o?.preferredCopyFormat??e.builtInConverters[0]?.getId(),this.#Xe(),this.#s()}connectedCallback(){this.#t.adoptedStyleSheets=[ve,n.textInputStyles],document.addEventListener("copy",this.#He),this.#s()}disconnectedCallback(){document.removeEventListener("copy",this.#He)}scrollToBottom(){const e=this.shadowRoot?.querySelector(".sections");e&&(e.scrollTop=e.scrollHeight)}#Ye(){this.dispatchEvent(new dt)}#Je(){this.dispatchEvent(new st)}#Qe(){this.dispatchEvent(new at)}#Ze(e){this.dispatchEvent(new nt({targetPanel:"chrome_recorder",speed:e.speed,extension:e.extension}))}#et(e){if(!this.#Be)return"default";if(e===this.#Be)return this.#Pe?"error":this.#Ce.isPlaying?this.#Ce.isPausedOnBreakpoint?"stopped":"current":"success";const t=this.#Ae.indexOf(this.#Be);if(-1===t)return"default";return this.#Ae.indexOf(e)<t?"success":"outstanding"}#tt(e){const t=this.#Be;if(!t)return"default";const i=this.#ze.find((e=>e.steps.includes(t)));if(!i&&this.#Pe)return"error";if(e===i)return"success";return this.#ze.indexOf(i)>=this.#ze.indexOf(e)?"success":"outstanding"}#it(t,i,r){const o=this.#Ae.indexOf(i);return e.html` <${Be.litTagName} @click="${this.#rt}" @mouseover="${this.#ot}" @copystep="${this.#st}" .data="${{step:i,state:this.#et(i),error:this.#Be===i?this.#Pe:void 0,isFirstSection:!1,isLastSection:r&&this.#Ae[this.#Ae.length-1]===i,isStartOfGroup:!1,isEndOfGroup:t.steps[t.steps.length-1]===i,stepIndex:o,hasBreakpoint:this.#Le.has(o),sectionIndex:-1,isRecording:this.#F,isPlaying:this.#Ce.isPlaying,removable:this.#Ae.length>1,builtInConverters:this.#H,extensionConverters:this.#W,isSelected:this.#De===i,recorderSettings:this.#o}}"></${Be.litTagName}> `}#ot=e=>{const t=e.target,i=t.step||t.section?.causingStep;i&&!this.#De&&this.#nt(i)};#rt(e){e.stopPropagation();const t=e.target,i=t.step||t.section?.causingStep||null;this.#De!==i&&(this.#De=i,this.#s(),i&&this.#nt(i,!0))}#at(){void 0!==this.#De&&(this.#De=void 0,this.#s())}#lt(e){"Enter"===e.key&&(e.preventDefault(),this.#dt(e))}#dt(e){e.stopPropagation(),this.#Fe=!this.#Fe,this.#s()}#ct(e){const t=ut.find((t=>t.i18nTitleKey===e.itemValue));this.dispatchEvent(new pt(t?.i18nTitleKey===p.NetworkManager.NoThrottlingConditions.i18nTitleKey?void 0:t))}#pt(e){const t=e.target;t.checkValidity()?this.dispatchEvent(new ht(Number(t.value))):t.reportValidity()}#ht=e=>{const t=e.target.innerText.trim();if(!t)return this.#Ie=!0,void this.#s();this.dispatchEvent(new ct(t))};#ut=e=>{switch(e.code){case"Escape":case"Enter":e.target.blur(),e.stopPropagation()}};#gt=()=>{const e=this.#t.getElementById("title-input");e.focus();const t=document.createRange();t.selectNodeContents(e),t.collapse(!1);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t)};#mt=e=>{const t=e.target;t.matches(".wrapping-label")&&t.querySelector("devtools-select-menu")?.click()};async#vt(e){let t=[...this.#H,...this.#W].find((e=>e.getId()===this.#o?.preferredCopyFormat));if(t||(t=this.#H[0]),!t)throw new Error("No default converter found");let i="";e?i=await t.stringifyStep(e):this.#Ne&&([i]=await t.stringify(this.#Ne)),d.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(i);const r=e?function(e){switch(e){case"puppeteer":return d.UserMetrics.RecordingCopiedToClipboard.CopiedStepWithPuppeteer;case"json":return d.UserMetrics.RecordingCopiedToClipboard.CopiedStepWithJSON;case"@puppeteer/replay":return d.UserMetrics.RecordingCopiedToClipboard.CopiedStepWithReplay;default:return d.UserMetrics.RecordingCopiedToClipboard.CopiedStepWithExtension}}(t.getId()):function(e){switch(e){case"puppeteer":return d.UserMetrics.RecordingCopiedToClipboard.CopiedRecordingWithPuppeteer;case"json":return d.UserMetrics.RecordingCopiedToClipboard.CopiedRecordingWithJSON;case"@puppeteer/replay":return d.UserMetrics.RecordingCopiedToClipboard.CopiedRecordingWithReplay;default:return d.UserMetrics.RecordingCopiedToClipboard.CopiedRecordingWithExtension}}(t.getId());d.userMetrics.recordingCopiedToClipboard(r)}#st(e){e.stopPropagation(),this.#vt(e.step)}async#We(e){e.target===document.body&&(e.preventDefault(),await this.#vt(this.#De),d.userMetrics.keyboardShortcutFired("chrome_recorder.copy-recording-or-step"))}#bt(){if(!this.#ve)return e.html``;const t=[];this.#ve.viewportSettings&&(t.push(e.html`<div>${this.#ve.viewportSettings.isMobile?ot(it.mobile):ot(it.desktop)}</div>`),t.push(e.html`<div class="separator"></div>`),t.push(e.html`<div>${this.#ve.viewportSettings.width}×${this.#ve.viewportSettings.height} px</div>`));const i=[];if(this.#Fe){const t=this.#ve.networkConditionsSettings?.i18nTitleKey||p.NetworkManager.NoThrottlingConditions.i18nTitleKey,r=ut.find((e=>e.i18nTitleKey===t));let o="";r&&(o=r.title instanceof Function?r.title():r.title),i.push(e.html`<div class="editable-setting"> <label class="wrapping-label" @click="${this.#mt}"> ${ot(it.network)} <${g.SelectMenu.SelectMenu.litTagName} @selectmenuselected="${this.#ct}" .disabled="${!this.#Ae.find((e=>"navigate"===e.type))}" .showDivider="${!0}" .showArrow="${!0}" .sideButton="${!1}" .showSelectedItem="${!0}" .showConnector="${!1}" .position="${"bottom"}" .buttonTitle="${o}"> ${ut.map((i=>e.html`<${g.Menu.MenuItem.litTagName} .value="${i.i18nTitleKey}" .selected="${t===i.i18nTitleKey}"> ${i.title instanceof Function?i.title():i.title} </${g.Menu.MenuItem.litTagName}>`))} </${g.SelectMenu.SelectMenu.litTagName}> </label> </div>`),i.push(e.html`<div class="editable-setting"> <label class="wrapping-label" title="${ot(it.timeoutExplanation)}"> ${ot(it.timeoutLabel)} <input @input="${this.#pt}" required min="${a.SchemaUtils.minTimeout}" max="${a.SchemaUtils.maxTimeout}" value="${this.#ve.timeout||a.RecordingPlayer.defaultTimeout}" class="devtools-text-input" type="number"> </label> </div>`)}else this.#ve.networkConditionsSettings?this.#ve.networkConditionsSettings.title?i.push(e.html`<div>${this.#ve.networkConditionsSettings.title}</div>`):i.push(e.html`<div> ${ot(it.download,{value:c.NumberUtilities.bytesToString(this.#ve.networkConditionsSettings.download)})}, ${ot(it.upload,{value:c.NumberUtilities.bytesToString(this.#ve.networkConditionsSettings.upload)})}, ${ot(it.latency,{value:this.#ve.networkConditionsSettings.latency})} </div>`):i.push(e.html`<div>${p.NetworkManager.NoThrottlingConditions.title instanceof Function?p.NetworkManager.NoThrottlingConditions.title():p.NetworkManager.NoThrottlingConditions.title}</div>`),i.push(e.html`<div class="separator"></div>`),i.push(e.html`<div>${ot(it.timeout,{value:this.#ve.timeout||a.RecordingPlayer.defaultTimeout})}</div>`);const r=!this.#F&&!this.#Ce.isPlaying,o={"settings-title":!0,expanded:this.#Fe},n={expanded:this.#Fe,settings:!0};return e.html` <div class="settings-row"> <div class="settings-container"> <div class="${e.Directives.classMap(o)}" @keydown="${r&&this.#lt}" @click="${r&&this.#dt}" tabindex="0" role="button" aria-label="${ot(it.editReplaySettings)}"> <span>${ot(it.replaySettings)}</span> ${r?e.html`<${s.Icon.Icon.litTagName} class="chevron" .data="${{iconName:"triangle-down",color:"var(--color-text-primary)"}}"> </${s.Icon.Icon.litTagName}>`:""} </div> <div class="${e.Directives.classMap(n)}"> ${i.length?i:e.html`<div>${ot(it.default)}</div>`} </div> </div> <div class="settings-container"> <div class="settings-title">${ot(it.environment)}</div> <div class="settings"> ${t.length?t:e.html`<div>${ot(it.default)}</div>`} </div> </div> </div> `}#ft(){const e=[...this.#H||[],...this.#W||[]].find((e=>e.getId()===this.#Ve));return e||this.#H[0]}#wt(){if(this.#Ke)return e.html` <${tt.litTagName} .descriptor="${this.#Ke}"> </${tt.litTagName}> `;const t=this.#ft()?.getFormatName();return this.#_e?e.html` <${He.litTagName}> <div slot="main"> ${this.#yt()} </div> <div slot="sidebar"> <div class="section-toolbar"> <${g.SelectMenu.SelectMenu.litTagName} @selectmenuselected="${this.#xt}" .showDivider="${!0}" .showArrow="${!0}" .sideButton="${!1}" .showSelectedItem="${!0}" .showConnector="${!1}" .position="${"bottom"}" .buttonTitle="${t}"> ${this.#H.map((t=>e.html`<${g.Menu.MenuItem.litTagName} .value="${t.getId()}" .selected="${this.#Ve===t.getId()}"> ${t.getFormatName()} </${g.Menu.MenuItem.litTagName}>`))} ${this.#W.map((t=>e.html`<${g.Menu.MenuItem.litTagName} .value="${t.getId()}" .selected="${this.#Ve===t.getId()}"> ${t.getFormatName()} </${g.Menu.MenuItem.litTagName}>`))} </${g.SelectMenu.SelectMenu.litTagName}> <${r.Button.Button.litTagName} title="${a.Tooltip.getTooltipForActions(ot(it.hideCode),"chrome_recorder.toggle-code-view")}" .data="${{variant:"round",size:"SMALL",iconName:"cross"}}" @click="${this.showCodeToggle}"></${r.Button.Button.litTagName}> </div> <div class="text-editor"> <${u.TextEditor.TextEditor.litTagName} .state="${this.#qe}"></${u.TextEditor.TextEditor.litTagName}> </div> </div> </${He.litTagName}> `:this.#yt()}#St(t){return t.screenshot?e.html` <img class="screenshot" src="${t.screenshot}" alt="${ot(it.screenshotForSection)}"> `:null}#$t(){return this.#Ce.isPlaying?e.html` <${r.Button.Button.litTagName} @click="${this.#Qe}" .iconName="${"pause"}" .variant="${"secondary"}"> ${ot(it.cancelReplay)} </${r.Button.Button.litTagName}>`:e.html`<${qe.litTagName} .data="${{settings:this.#o,replayExtensions:this.#be}}" .disabled="${this.#Ce.isPlaying}" @startreplay="${this.#Ze}"> </${qe.litTagName}>`}#kt(e){e.stopPropagation(),this.dispatchEvent(new nt({targetPanel:"timeline",speed:"normal"}))}showCodeToggle=()=>{this.#_e=!this.#_e,d.userMetrics.recordingCodeToggled(this.#_e?d.UserMetrics.RecordingCodeToggled.CodeShown:d.UserMetrics.RecordingCodeToggled.CodeHidden),this.#Xe()};#Xe=async()=>{if(!this.#Ne)return;const e=this.#ft();if(!e)return;const[t,i]=await e.stringify(this.#Ne);this.#Ue=t,this.#Ge=i,this.#Ge?.shift();const r=e.getMediaType(),o=r?await l.CodeHighlighter.languageFromMIME(r):null;this.#qe=h.EditorState.create({doc:this.#Ue,extensions:[u.Config.baseConfiguration(this.#Ue),h.EditorState.readOnly.of(!0),h.EditorView.lineWrapping,o||[]]}),this.#s(),this.dispatchEvent(new Event("code-generated"))};#nt=(e,t=!1)=>{if(!this.#Ge)return;const i=this.#Ae.indexOf(e);if(-1===i)return;const r=this.#t.querySelector("devtools-text-editor");if(!r)return;const o=r.editor;if(!o)return;const s=this.#Ge[2*i],n=this.#Ge[2*i+1];let a=r.createSelection({lineNumber:s+n,columnNumber:0},{lineNumber:s,columnNumber:0});const l=r.state.doc.lineAt(a.main.anchor);a=r.createSelection({lineNumber:s+n-1,columnNumber:l.length+1},{lineNumber:s,columnNumber:0}),o.dispatch({selection:a,effects:t?[h.EditorView.scrollIntoView(a.main,{y:"nearest"})]:void 0})};#xt=e=>{this.#Ve=e.itemValue,this.#o&&(this.#o.preferredCopyFormat=e.itemValue),this.#Xe()};#yt(){return e.html` <div class="sections"> ${this.#_e?"":e.html`<div class="section-toolbar"> <${r.Button.Button.litTagName} @click="${this.showCodeToggle}" class="show-code" .data="${{variant:"secondary",title:a.Tooltip.getTooltipForActions(ot(it.showCode),"chrome_recorder.toggle-code-view")}}"> ${ot(it.showCode)} </${r.Button.Button.litTagName}> </div>`} ${this.#ze.map(((t,i)=>e.html` <div class="section"> <div class="screenshot-wrapper"> ${this.#St(t)} </div> <div class="content"> <div class="steps"> <${Be.litTagName} @click="${this.#rt}" @mouseover="${this.#ot}" .data="${{section:t,state:this.#tt(t),isStartOfGroup:!0,isEndOfGroup:0===t.steps.length,isFirstSection:0===i,isLastSection:i===this.#ze.length-1&&0===t.steps.length,isSelected:this.#De===(t.causingStep||null),sectionIndex:i,isRecording:this.#F,isPlaying:this.#Ce.isPlaying,error:"error"===this.#tt(t)?this.#Pe:void 0,hasBreakpoint:!1,removable:this.#Ae.length>1&&t.causingStep}}"> </${Be.litTagName}> ${t.steps.map((e=>this.#it(t,e,i===this.#ze.length-1)))} ${!this.#Me&&this.#F&&i===this.#ze.length-1?e.html`<devtools-button class="step add-assertion-button" .data="${{variant:"secondary",title:ot(it.addAssertion)}}" @click="${this.#Ye}">${ot(it.addAssertion)}</devtools-button>`:void 0} ${this.#F&&i===this.#ze.length-1?e.html`<div class="step recording">${ot(it.recording)}</div>`:null} </div> </div> </div> `))} </div> `}#Et(){if(!this.#Ne)return"";const{title:t}=this.#Ne,i=!this.#Ce.isPlaying&&!this.#F;return e.html` <div class="header"> <div class="header-title-wrapper"> <div class="header-title"> <span @blur="${this.#ht}" @keydown="${this.#ut}" id="title-input" .contentEditable="${i?"true":"false"}" class="${e.Directives.classMap({"has-error":this.#Ie,disabled:!i})}" .innerText="${e.Directives.live(t)}"></span> <div class="title-button-bar"> <${r.Button.Button.litTagName} @click="${this.#gt}" .data="${{disabled:!i,variant:"toolbar",iconName:"edit",title:ot(it.editTitle)}}"></${r.Button.Button.litTagName}> </div> </div> ${this.#Ie?e.html`<div class="title-input-error-text"> ${ot(it.requiredTitleError)} </div>`:""} </div> ${!this.#F&&this.#je?e.html`<div class="actions"> <${r.Button.Button.litTagName} @click="${this.#kt}" .data="${{disabled:this.#Ce.isPlaying,variant:"secondary",iconName:"performance",title:ot(it.performancePanel)}}"> ${ot(it.performancePanel)} </${r.Button.Button.litTagName}> ${this.#$t()} </div>`:""} </div>`}#Tt(){if(!this.#F)return"";const t=this.#Me?ot(it.recordingIsBeingStopped):ot(it.endRecording);return e.html` <div class="footer"> <div class="controls"> <devtools-control-button @click="${this.#Je}" .disabled="${this.#Me}" .shape="${"square"}" .label="${t}" title="${a.Tooltip.getTooltipForActions(t,"chrome_recorder.start-recording")}"> </devtools-control-button> </div> </div> `}#s(){const t={wrapper:!0,"is-recording":this.#F,"is-playing":this.#Ce.isPlaying,"was-successful":"Success"===this.#Oe,"was-failure":"Failure"===this.#Oe};e.render(e.html` <div @click="${this.#at}" class="${e.Directives.classMap(t)}"> <div class="main"> ${this.#Et()} ${this.#Ke?e.html` <${tt.litTagName} .descriptor="${this.#Ke}"> </${tt.litTagName}> `:e.html` ${this.#bt()} ${this.#wt()} `} ${this.#Tt()} </div> </div> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-recording-view",gt);var mt=Object.freeze({__proto__:null,RecordingFinishedEvent:st,PlayRecordingEvent:nt,AbortReplayEvent:at,RecordingChangedEvent:lt,AddAssertionEvent:dt,RecordingTitleChangedEvent:ct,NetworkConditionsChanged:pt,TimeoutChanged:ht,RecordingView:gt});const vt=new CSSStyleSheet;vt.replaceSync("*{margin:0;padding:0;box-sizing:border-box;font-weight:normal;font-size:inherit}:host{flex:1;display:block;overflow:auto}.wrapper{padding:24px;background-color:var(--color-background);height:100%;display:flex;flex-direction:column}.fit-content{width:fit-content}.align-right{width:auto;display:flex;flex-direction:row;justify-content:flex-end}\n/*# sourceURL=startView.css */\n");const bt={header:"Measure performance across an entire user journey",step1:"Record a common user journey on your website or app",step2:"Replay the recording to check if the flow is working",step3:"Generate a detailed performance trace or export a Puppeteer script for testing",createRecording:"Create a new recording",quickStart:"Quick start: learn the new Recorder panel in DevTools"},ft=i.i18n.registerUIStrings("panels/recorder/components/StartView.ts",bt),wt=i.i18n.getLocalizedString.bind(void 0,ft),yt="https://goo.gle/recorder-feedback";class xt extends Event{static eventName="createrecording";constructor(){super(xt.eventName)}}class St extends HTMLElement{static litTagName=e.literal`devtools-start-view`;#t=this.attachShadow({mode:"open"});connectedCallback(){this.#t.adoptedStyleSheets=[vt],o.ScheduledRender.scheduleRender(this,this.#s)}#Rt(){this.dispatchEvent(new xt)}#s=()=>{e.render(e.html` <div class="wrapper"> <${b.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}> <span slot="title">${wt(bt.header)}</span> <span slot="step-1">${wt(bt.step1)}</span> <span slot="step-2">${wt(bt.step2)}</span> <span slot="step-3">${wt(bt.step3)}</span> </${b.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}> <div class="fit-content"> <${r.Button.Button.litTagName} .variant="${"primary"}" @click="${this.#Rt}"> ${wt(bt.createRecording)} </${r.Button.Button.litTagName}> </div> <${v.PanelFeedback.PanelFeedback.litTagName} .data="${{feedbackUrl:yt,quickStartUrl:"https://developer.chrome.com/docs/devtools/recorder",quickStartLinkText:wt(bt.quickStart)}}"> </${v.PanelFeedback.PanelFeedback.litTagName}> <div class="align-right"> <${v.FeedbackButton.FeedbackButton.litTagName} .data="${{feedbackUrl:yt}}"> </${v.FeedbackButton.FeedbackButton.litTagName}> </div> </div> `,this.#t,{host:this})}}o.CustomElements.defineComponent("devtools-start-view",St);var $t=Object.freeze({__proto__:null,FEEDBACK_URL:yt,CreateRecordingEvent:xt,StartView:St});const kt=new CSSStyleSheet;kt.replaceSync("*{box-sizing:border-box;padding:0;margin:0;font-size:inherit}:host{display:block}.row{display:flex;flex-direction:row;color:var(--color-syntax-1);font-family:var(--monospace-font-family);font-size:var(--monospace-font-size);align-items:center;line-height:18px;margin-top:3px}.row devtools-button{line-height:1;margin-left:0.5em}.separator{margin-right:0.5em;color:var(--color-text-primary)}.padded{margin-left:2em}.padded.double{margin-left:4em}.selector-picker{width:18px;height:18px}.inline-button{width:18px;height:18px;opacity:0%;visibility:hidden;transition:opacity 200ms;flex-shrink:0}.row:focus-within .inline-button,\n.row:hover .inline-button{opacity:100%;visibility:visible}.wrapped.row{flex-wrap:wrap}.gap.row{gap:5px}.gap.row devtools-button{margin-left:0}.regular-font{font-family:inherit;font-size:inherit}.no-margin{margin:0}.row-buttons{margin-top:3px}.error{margin:3px 0 6px;padding:8px 12px;background:var(--color-error-background);color:var(--color-error-text)}\n/*# sourceURL=stepEditor.css */\n");var Et=self&&self.__decorate||function(e,t,i,r){var o,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};const{html:Tt,Decorators:Rt,Directives:Ct,LitElement:Nt}=e,{customElement:Mt,property:It,state:Bt}=Rt,{live:At}=Ct,Pt=Object.freeze({string:e=>e.trim(),number:e=>{const t=parseFloat(e);return Number.isNaN(t)?0:t},boolean:e=>"true"===e.toLowerCase()}),zt=Object.freeze({selectors:"string",offsetX:"number",offsetY:"number",target:"string",frame:"number",assertedEvents:"string",value:"string",key:"string",operator:"string",count:"number",expression:"string",x:"number",y:"number",url:"string",type:"string",timeout:"number",duration:"number",button:"string",deviceType:"string",width:"number",height:"number",deviceScaleFactor:"number",isMobile:"boolean",hasTouch:"boolean",isLandscape:"boolean",download:"number",upload:"number",latency:"number",name:"string",parameters:"string",visible:"boolean",properties:"string",attributes:"string"}),Ot=j({selectors:[[".cls"]],offsetX:1,offsetY:1,target:"main",frame:[0],assertedEvents:[{type:"navigation",url:"https://example.com",title:"Title"}],value:"Value",key:"Enter",operator:">=",count:1,expression:"true",x:0,y:0,url:"https://example.com",timeout:5e3,duration:50,deviceType:"mouse",button:"primary",type:"click",width:800,height:600,deviceScaleFactor:1,isMobile:!1,hasTouch:!1,isLandscape:!0,download:1e3,upload:1e3,latency:25,name:"customParam",parameters:"{}",properties:"{}",attributes:[{name:"attribute",value:"value"}],visible:!0}),Lt=j({[a.Schema.StepType.Click]:{required:["selectors","offsetX","offsetY"],optional:["assertedEvents","button","deviceType","duration","frame","target","timeout"]},[a.Schema.StepType.DoubleClick]:{required:["offsetX","offsetY","selectors"],optional:["assertedEvents","button","deviceType","frame","target","timeout"]},[a.Schema.StepType.Hover]:{required:["selectors"],optional:["assertedEvents","frame","target","timeout"]},[a.Schema.StepType.Change]:{required:["selectors","value"],optional:["assertedEvents","frame","target","timeout"]},[a.Schema.StepType.KeyDown]:{required:["key"],optional:["assertedEvents","target","timeout"]},[a.Schema.StepType.KeyUp]:{required:["key"],optional:["assertedEvents","target","timeout"]},[a.Schema.StepType.Scroll]:{required:[],optional:["assertedEvents","frame","target","timeout","x","y"]},[a.Schema.StepType.Close]:{required:[],optional:["assertedEvents","target","timeout"]},[a.Schema.StepType.Navigate]:{required:["url"],optional:["assertedEvents","target","timeout"]},[a.Schema.StepType.WaitForElement]:{required:["selectors"],optional:["assertedEvents","attributes","count","frame","operator","properties","target","timeout","visible"]},[a.Schema.StepType.WaitForExpression]:{required:["expression"],optional:["assertedEvents","frame","target","timeout"]},[a.Schema.StepType.CustomStep]:{required:["name","parameters"],optional:["assertedEvents","target","timeout"]},[a.Schema.StepType.EmulateNetworkConditions]:{required:["download","latency","upload"],optional:["assertedEvents","target","timeout"]},[a.Schema.StepType.SetViewport]:{required:["deviceScaleFactor","hasTouch","height","isLandscape","isMobile","width"],optional:["assertedEvents","target","timeout"]}}),Dt={notSaved:"Not saved: {error}",addAttribute:"Add {attributeName}",deleteRow:"Delete row",selectorPicker:"Select an element in the page to update selectors",addFrameIndex:"Add frame index within the frame tree",removeFrameIndex:"Remove frame index",addSelectorPart:"Add a selector part",removeSelectorPart:"Remove a selector part",addSelector:"Add a selector",removeSelector:"Remove a selector",unknownActionType:"Unknown action type."},Ft=i.i18n.registerUIStrings("panels/recorder/components/StepEditor.ts",Dt),jt=i.i18n.getLocalizedString.bind(void 0,Ft);class _t extends Event{static eventName="stepedited";data;constructor(e){super(_t.eventName,{bubbles:!0,composed:!0}),this.data=e}}class Ut{static#Ct=new w.SharedObject.SharedObject((()=>a.RecordingPlayer.RecordingPlayer.connectPuppeteer()),(({browser:e})=>a.RecordingPlayer.RecordingPlayer.disconnectPuppeteer(e)));static async default(e){const t={type:e},i=Lt[t.type];let r=Promise.resolve();for(const e of i.required)r=Promise.all([r,(async()=>Object.assign(t,{[e]:await this.defaultByAttribute(t,e)}))()]);return await r,Object.freeze(t)}static async defaultByAttribute(e,t){return this.#Ct.run((e=>{switch(t){case"assertedEvents":return V(Ot.assertedEvents,new U({0:{url:e.page.url()||Ot.assertedEvents[0].url}}));case"url":return e.page.url()||Ot.url;case"height":return e.page.evaluate((()=>visualViewport.height))||Ot.height;case"width":return e.page.evaluate((()=>visualViewport.width))||Ot.width;default:return Ot[t]}}))}static fromStep(e){const t=structuredClone(e);for(const i of["parameters","properties"])i in e&&void 0!==e[i]&&(t[i]=JSON.stringify(e[i]));if("attributes"in e&&e.attributes){t.attributes=[];for(const[i,r]of Object.entries(e.attributes))t.attributes.push({name:i,value:r})}return"selectors"in e&&(t.selectors=e.selectors.map((e=>"string"==typeof e?[e]:[...e]))),j(t)}static toStep(e){const t=structuredClone(e);for(const i of["parameters","properties"]){const r=e[i];r&&Object.assign(t,{[i]:JSON.parse(r)})}if(e.attributes)if(0!==e.attributes.length){const i={};for(const{name:t,value:r}of e.attributes)Object.assign(i,{[t]:r});Object.assign(t,{attributes:i})}else"attributes"in t&&delete t.attributes;if(e.selectors){const i=e.selectors.filter((e=>e.length>0)).map((e=>1===e.length?e[0]:[...e]));0!==i.length?Object.assign(t,{selectors:i}):"selectors"in t&&delete t.selectors}return e.frame&&0===e.frame.length&&"frame"in t&&delete t.frame,i=a.SchemaUtils.parseStep(t),JSON.parse(JSON.stringify(i));var i}}let Vt=class extends Nt{static styles=[kt];#Nt=new f.SelectorPicker.SelectorPicker(this);constructor(){super(),this.disabled=!1}#e=e=>{e.preventDefault(),e.stopPropagation(),this.#Nt.toggle()};disconnectedCallback(){super.disconnectedCallback(),this.#Nt.stop()}render(){if(!this.disabled)return Tt`<devtools-button @click="${this.#e}" .title="${jt(Dt.selectorPicker)}" class="selector-picker" .size="${"SMALL"}" .iconName="${"select-element"}" .active="${this.#Nt.active}" .variant="${"secondary"}"></devtools-button>`}};Et([It()],Vt.prototype,"disabled",void 0),Vt=Et([Mt("devtools-recorder-selector-picker-button")],Vt);let qt=class extends Nt{static styles=[kt];#Mt=new Set;constructor(){super(),this.state={type:a.Schema.StepType.WaitForElement},this.isTypeEditable=!0,this.disabled=!1}createRenderRoot(){const e=super.createRenderRoot();return e.addEventListener("keydown",this.#h),e}set step(e){this.state=j(Ut.fromStep(e)),this.error=void 0}#It(e){try{this.dispatchEvent(new _t(Ut.toStep(e))),this.state=e}catch(e){this.error=e.message}}#Bt=e=>{e.preventDefault(),e.stopPropagation(),this.#It(V(this.state,{target:e.data.target,frame:e.data.frame,selectors:e.data.selectors.map((e=>"string"==typeof e?[e]:e)),offsetX:e.data.offsetX,offsetY:e.data.offsetY}))};#At=(e,t,i)=>r=>{r.preventDefault(),r.stopPropagation(),this.#It(V(this.state,e)),this.#Pt(t),i&&d.userMetrics.recordingEdited(i)};#h=e=>{if(F(e instanceof KeyboardEvent),e.target instanceof oe&&"Enter"===e.key){e.preventDefault(),e.stopPropagation();const t=this.renderRoot.querySelectorAll("devtools-recorder-input"),i=[...t].findIndex((t=>t===e.target));i>=0&&i+1<t.length?t[i+1].focus():e.target.blur()}};#zt=e=>t=>{if(F(t.target instanceof oe),t.target.disabled)return;const i=zt[e.attribute],r=Pt[i](t.target.value),o=e.from.bind(this)(r);o&&(this.#It(V(this.state,o)),e.metric&&d.userMetrics.recordingEdited(e.metric))};#Ot=async e=>{if(F(e.target instanceof oe),e.target.disabled)return;const t=e.target.value;t!==this.state.type&&(Object.values(a.Schema.StepType).includes(t)?(this.#It(await Ut.default(t)),d.userMetrics.recordingEdited(d.UserMetrics.RecordingEdited.TypeChanged)):this.error=jt(Dt.unknownActionType))};#Lt=async e=>{e.preventDefault(),e.stopPropagation();const t=e.target.dataset.attribute;this.#It(V(this.state,{[t]:await Ut.defaultByAttribute(this.state,t)})),this.#Pt(`[data-attribute=${t}].attribute devtools-recorder-input`)};#Dt(e){if(!this.disabled)return Tt` <devtools-button title="${e.title}" .size="${"SMALL"}" .iconName="${e.iconName}" .variant="${"secondary"}" class="inline-button ${e.class}" @click="${e.onClick}"></devtools-button> `}#Ft(e){if(this.disabled)return;return[...Lt[this.state.type].optional].includes(e)&&!this.disabled?Tt`<devtools-button .size="${"SMALL"}" .iconName="${"bin"}" .variant="${"secondary"}" .title="${jt(Dt.deleteRow)}" class="inline-button delete-row" data-attribute="${e}" @click="${t=>{t.preventDefault(),t.stopPropagation(),this.#It(V(this.state,{[e]:void 0}))}}"></devtools-button>`:void 0}#jt(e){return this.#Mt.add("type"),Tt`<div class="row attribute" data-attribute="type"> <div>type<span class="separator">:</span></div> <devtools-recorder-input .disabled="${!e||this.disabled}" .options="${Object.values(a.Schema.StepType)}" .placeholder="${Ot.type}" .value="${At(this.state.type)}" @blur="${this.#Ot}"></devtools-recorder-input> </div>`}#_t(e){this.#Mt.add(e);const t=this.state[e]?.toString();if(void 0!==t)return Tt`<div class="row attribute" data-attribute="${e}"> <div>${e}<span class="separator">:</span></div> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot[e].toString()}" .value="${At(t)}" .mimeType="${(()=>{switch(e){case"expression":return"text/javascript";case"properties":return"application/json";default:return""}})()}" @blur="${this.#zt({attribute:e,from(t){if(void 0!==this.state[e]){if("properties"===e)d.userMetrics.recordingAssertion(d.UserMetrics.RecordingAssertion.PropertyAssertionEdited);return{[e]:t}}},metric:d.UserMetrics.RecordingEdited.OtherEditing})}"></devtools-recorder-input> ${this.#Ft(e)} </div>`}#Ut(){if(this.#Mt.add("frame"),void 0!==this.state.frame)return Tt` <div class="attribute" data-attribute="frame"> <div class="row"> <div>frame<span class="separator">:</span></div> ${this.#Ft("frame")} </div> ${this.state.frame.map(((e,t,i)=>Tt` <div class="padded row"> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot.frame[0].toString()}" .value="${At(e.toString())}" data-path="${`frame.${t}`}" @blur="${this.#zt({attribute:"frame",from(e){if(void 0!==this.state.frame?.[t])return{frame:new U({[t]:e})}},metric:d.UserMetrics.RecordingEdited.OtherEditing})}"></devtools-recorder-input> ${this.#Dt({class:"add-frame",title:jt(Dt.addFrameIndex),iconName:"plus",onClick:this.#At({frame:new U({[t+1]:new _(Ot.frame[0])})},`devtools-recorder-input[data-path="frame.${t+1}"]`,d.UserMetrics.RecordingEdited.OtherEditing)})} ${this.#Dt({class:"remove-frame",title:jt(Dt.removeFrameIndex),iconName:"minus",onClick:this.#At({frame:new U({[t]:void 0})},`devtools-recorder-input[data-path="frame.${Math.min(t,i.length-2)}"]`,d.UserMetrics.RecordingEdited.OtherEditing)})} </div> `))} </div> `}#Vt(){if(this.#Mt.add("selectors"),void 0!==this.state.selectors)return Tt`<div class="attribute" data-attribute="selectors"> <div class="row"> <div>selectors<span class="separator">:</span></div> <devtools-recorder-selector-picker-button @selectorpicked="${this.#Bt}" .disabled="${this.disabled}"></devtools-recorder-selector-picker-button> ${this.#Ft("selectors")} </div> ${this.state.selectors.map(((e,t,i)=>Tt`<div class="padded row" data-selector-path="${t}"> <div>selector #${t+1}<span class="separator">:</span></div> ${this.#Dt({class:"add-selector",title:jt(Dt.addSelector),iconName:"plus",onClick:this.#At({selectors:new U({[t+1]:new _(structuredClone(Ot.selectors[0]))})},`devtools-recorder-input[data-path="selectors.${t+1}.0"]`,d.UserMetrics.RecordingEdited.SelectorAdded)})} ${this.#Dt({class:"remove-selector",title:jt(Dt.removeSelector),iconName:"minus",onClick:this.#At({selectors:new U({[t]:void 0})},`devtools-recorder-input[data-path="selectors.${Math.min(t,i.length-2)}.0"]`,d.UserMetrics.RecordingEdited.SelectorRemoved)})} </div> ${e.map(((e,i,r)=>Tt`<div class="double padded row" data-selector-path="${t}.${i}"> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot.selectors[0][0]}" .value="${At(e)}" data-path="${`selectors.${t}.${i}`}" @blur="${this.#zt({attribute:"selectors",from(e){if(void 0!==this.state.selectors?.[t]?.[i])return{selectors:new U({[t]:new U({[i]:e})})}},metric:d.UserMetrics.RecordingEdited.SelectorPartEdited})}"></devtools-recorder-input> ${this.#Dt({class:"add-selector-part",title:jt(Dt.addSelectorPart),iconName:"plus",onClick:this.#At({selectors:new U({[t]:new U({[i+1]:new _(Ot.selectors[0][0])})})},`devtools-recorder-input[data-path="selectors.${t}.${i+1}"]`,d.UserMetrics.RecordingEdited.SelectorPartAdded)})} ${this.#Dt({class:"remove-selector-part",title:jt(Dt.removeSelectorPart),iconName:"minus",onClick:this.#At({selectors:new U({[t]:new U({[i]:void 0})})},`devtools-recorder-input[data-path="selectors.${t}.${Math.min(i,r.length-2)}"]`,d.UserMetrics.RecordingEdited.SelectorPartRemoved)})} </div>`))}`))} </div>`}#qt(){if(this.#Mt.add("assertedEvents"),void 0!==this.state.assertedEvents)return Tt`<div class="attribute" data-attribute="assertedEvents"> <div class="row"> <div>asserted events<span class="separator">:</span></div> ${this.#Ft("assertedEvents")} </div> ${this.state.assertedEvents.map(((e,t)=>Tt` <div class="padded row"> <div>type<span class="separator">:</span></div> <div>${e.type}</div> </div> <div class="padded row"> <div>title<span class="separator">:</span></div> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot.assertedEvents[0].title}" .value="${At(e.title??"")}" @blur="${this.#zt({attribute:"assertedEvents",from(e){if(void 0!==this.state.assertedEvents?.[t]?.title)return{assertedEvents:new U({[t]:{title:e}})}},metric:d.UserMetrics.RecordingEdited.OtherEditing})}"></devtools-recorder-input> </div> <div class="padded row"> <div>url<span class="separator">:</span></div> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot.assertedEvents[0].url}" .value="${At(e.url??"")}" @blur="${this.#zt({attribute:"url",from(e){if(void 0!==this.state.assertedEvents?.[t]?.url)return{assertedEvents:new U({[t]:{url:e}})}},metric:d.UserMetrics.RecordingEdited.OtherEditing})}"></devtools-recorder-input> </div>`))} </div> `}#Gt(){if(this.#Mt.add("attributes"),void 0!==this.state.attributes)return Tt`<div class="attribute" data-attribute="attributes"> <div class="row"> <div>attributes<span class="separator">:</span></div> ${this.#Ft("attributes")} </div> ${this.state.attributes.map((({name:e,value:t},i,r)=>Tt`<div class="padded row"> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot.attributes[0].name}" .value="${At(e)}" data-path="${`attributes.${i}.name`}" @blur="${this.#zt({attribute:"attributes",from(e){if(void 0!==this.state.attributes?.[i]?.name)return d.userMetrics.recordingAssertion(d.UserMetrics.RecordingAssertion.AttributeAssertionEdited),{attributes:new U({[i]:{name:e}})}},metric:d.UserMetrics.RecordingEdited.OtherEditing})}"></devtools-recorder-input> <span class="separator">:</span> <devtools-recorder-input .disabled="${this.disabled}" .placeholder="${Ot.attributes[0].value}" .value="${At(t)}" data-path="${`attributes.${i}.value`}" @blur="${this.#zt({attribute:"attributes",from(e){if(void 0!==this.state.attributes?.[i]?.value)return d.userMetrics.recordingAssertion(d.UserMetrics.RecordingAssertion.AttributeAssertionEdited),{attributes:new U({[i]:{value:e}})}},metric:d.UserMetrics.RecordingEdited.OtherEditing})}"></devtools-recorder-input> ${this.#Dt({class:"add-attribute-assertion",title:jt(Dt.addSelectorPart),iconName:"plus",onClick:this.#At({attributes:new U({[i+1]:new _((()=>{{const e=new Set(r.map((({name:e})=>e))),t=Ot.attributes[0];let i=t.name,o=0;for(;e.has(i);)++o,i=`${t.name}-${o}`;return{...t,name:i}}})())})},`devtools-recorder-input[data-path="attributes.${i+1}.name"]`,d.UserMetrics.RecordingEdited.OtherEditing)})} ${this.#Dt({class:"remove-attribute-assertion",title:jt(Dt.removeSelectorPart),iconName:"minus",onClick:this.#At({attributes:new U({[i]:void 0})},`devtools-recorder-input[data-path="attributes.${Math.min(i,r.length-2)}.value"]`,d.UserMetrics.RecordingEdited.OtherEditing)})} </div>`))} </div>`}#Kt(){return[...Lt[this.state.type].optional].filter((e=>void 0===this.state[e])).map((e=>Tt`<devtools-button .variant="${"secondary"}" class="add-row" data-attribute="${e}" @click="${this.#Lt}"> ${jt(Dt.addAttribute,{attributeName:e})} </devtools-button>`))}#Pt=e=>{this.updateComplete.then((()=>{this.renderRoot.querySelector(e)?.focus()}))};render(){this.#Mt=new Set;return Tt` <div class="wrapper"> ${this.#jt(this.isTypeEditable)} ${this.#_t("target")} ${this.#Ut()} ${this.#Vt()} ${this.#_t("deviceType")} ${this.#_t("button")} ${this.#_t("url")} ${this.#_t("x")} ${this.#_t("y")} ${this.#_t("offsetX")} ${this.#_t("offsetY")} ${this.#_t("value")} ${this.#_t("key")} ${this.#_t("operator")} ${this.#_t("count")} ${this.#_t("expression")} ${this.#_t("duration")} ${this.#qt()} ${this.#_t("timeout")} ${this.#_t("width")} ${this.#_t("height")} ${this.#_t("deviceScaleFactor")} ${this.#_t("isMobile")} ${this.#_t("hasTouch")} ${this.#_t("isLandscape")} ${this.#_t("download")} ${this.#_t("upload")} ${this.#_t("latency")} ${this.#_t("name")} ${this.#_t("parameters")} ${this.#_t("visible")} ${this.#_t("properties")} ${this.#Gt()} ${this.error?Tt` <div class="error"> ${jt(Dt.notSaved,{error:this.error})} </div> `:void 0} ${this.disabled?void 0:Tt`<div class="row-buttons wrapped gap row regular-font no-margin"> ${this.#Kt()} </div>`} </div> `}};Et([Bt()],qt.prototype,"state",void 0),Et([Bt()],qt.prototype,"error",void 0),Et([It()],qt.prototype,"isTypeEditable",void 0),Et([It()],qt.prototype,"disabled",void 0),qt=Et([Mt("devtools-recorder-step-editor")],qt);var Gt=Object.freeze({__proto__:null,StepEditedEvent:_t,EditorState:Ut,get StepEditor(){return qt}});export{C as ControlButton,O as CreateRecordingView,se as RecorderInput,me as RecordingListView,mt as RecordingView,Ge as ReplayButton,Le as SelectButton,We as SplitView,$t as StartView,Gt as StepEditor,Ae as StepView,ye as TimelineSection};

package/dist/third-party/front_end/panels/recorder/controllers/controllers.js

@@ -0,0 +1 @@
+import*as e from"../../../core/common/common.js";import*as t from"../../../core/platform/platform.js";import*as i from"../../../core/sdk/sdk.js";import*as r from"../models/models.js";import*as a from"../util/util.js";class n extends Event{static eventName="selectorpicked";data;constructor(e){super(n.eventName,{bubbles:!0,composed:!0}),this.data=e}}class s extends Event{static eventName="requestselectorattribute";send;constructor(e){super(s.eventName,{bubbles:!0,composed:!0}),this.send=e}}class o{static get#e(){return i.TargetManager.TargetManager.instance()}#t;#i;#r=new e.Mutex.Mutex;active=!1;constructor(e){this.#t=e}start=()=>this.#r.run((async()=>{this.active||(this.active=!0,this.#i=await new Promise(((e,t)=>{const i=setTimeout(t,1e3);this.#t.dispatchEvent(new s((t=>{clearTimeout(i),e(t)})))})),o.#e.observeTargets(this),this.#t.requestUpdate())}));stop=()=>this.#r.run((async()=>{this.active&&(this.active=!1,o.#e.unobserveTargets(this),o.#e.targets().map(this.targetRemoved.bind(this)),this.#i=void 0,this.#t.requestUpdate())}));toggle=()=>this.active?this.stop():this.start();#a=new Map;targetAdded(t){if(t.type()!==i.Target.Type.Frame)return;let r=this.#a.get(t);r||(r=new e.Mutex.Mutex,this.#a.set(t,r)),r.run((async()=>{await this.#n(t),await this.#s(t)}))}targetRemoved(e){const t=this.#a.get(e);t&&t.run((async()=>{try{await this.#o(e),await this.#c(e)}catch{}}))}#d=e=>{if("captureSelectors"!==e.data.name)return;const t=e.data.executionContextId,a=i.TargetManager.TargetManager.instance().targets(),s=r.SDKUtils.findTargetByExecutionContext(a,t),o=r.SDKUtils.findFrameIdByExecutionContext(a,t);if(!s||!o)throw new Error(`No execution context found for the binding call + ${JSON.stringify(e.data)}`);const c=s.model(i.ResourceTreeModel.ResourceTreeModel);if(!c)throw new Error(`ResourceTreeModel instance is missing for the target: ${s.id()}`);const d=c.frameForId(o);if(!d)throw new Error("Frame is not found");this.#t.dispatchEvent(new n({...JSON.parse(e.data.payload),...r.SDKUtils.getTargetFrameContext(s,d)})),this.stop()};#l=new Map;async#s(e){const t=`${await a.InjectedScript.get()};DevToolsRecorder.startSelectorPicker({getAccessibleName, getAccessibleRole}, ${JSON.stringify(this.#i?this.#i:void 0)}, ${a.isDebugBuild})`,[{identifier:i}]=await Promise.all([e.pageAgent().invoke_addScriptToEvaluateOnNewDocument({source:t,worldName:a.DEVTOOLS_RECORDER_WORLD_NAME,includeCommandLineAPI:!0}),r.SDKUtils.evaluateInAllFrames(a.DEVTOOLS_RECORDER_WORLD_NAME,e,t)]);this.#l.set(e,i)}async#o(e){const i=this.#l.get(e);t.assertNotNullOrUndefined(i),this.#l.delete(e),await e.pageAgent().invoke_removeScriptToEvaluateOnNewDocument({identifier:i});await r.SDKUtils.evaluateInAllFrames(a.DEVTOOLS_RECORDER_WORLD_NAME,e,"DevToolsRecorder.stopSelectorPicker()")}async#n(e){const r=e.model(i.RuntimeModel.RuntimeModel);t.assertNotNullOrUndefined(r),r.addEventListener(i.RuntimeModel.Events.BindingCalled,this.#d),await r.addBinding({name:"captureSelectors",executionContextName:a.DEVTOOLS_RECORDER_WORLD_NAME})}async#c(e){await e.runtimeAgent().invoke_removeBinding({name:"captureSelectors"});const r=e.model(i.RuntimeModel.RuntimeModel);t.assertNotNullOrUndefined(r),r.removeEventListener(i.RuntimeModel.Events.BindingCalled,this.#d)}}var c=Object.freeze({__proto__:null,SelectorPickedEvent:n,RequestSelectorAttributeEvent:s,SelectorPicker:o});export{c as SelectorPicker};

package/dist/third-party/front_end/panels/recorder/converters/converters.js

@@ -0,0 +1 @@
+import"../models/models.js";var e,t,n,a=Object.freeze({__proto__:null});!function(e){e.CSS="css",e.ARIA="aria",e.Text="text",e.XPath="xpath",e.Pierce="pierce"}(e=e||(e={})),function(e){e.Change="change",e.Click="click",e.Close="close",e.CustomStep="customStep",e.DoubleClick="doubleClick",e.EmulateNetworkConditions="emulateNetworkConditions",e.Hover="hover",e.KeyDown="keyDown",e.KeyUp="keyUp",e.Navigate="navigate",e.Scroll="scroll",e.SetViewport="setViewport",e.WaitForElement="waitForElement",e.WaitForExpression="waitForExpression"}(t=t||(t={})),(n=n||(n={})).Navigation="navigation";Object.freeze({__proto__:null,get SelectorType(){return e},get StepType(){return t},get AssertedEventType(){return n}});function i(e){throw new Error(`Unknown step type: ${e.type}`)}const r=new Set(["textarea","text","url","tel","search","password","number","email"]),o=(new Set(["mouse","pen","touch"]),new Map([["primary","left"],["auxiliary","middle"],["secondary","right"],["back","back"],["forward","forward"]]));class s{async beforeAllSteps(e,t){}async afterAllSteps(e,t){}async beforeEachStep(e,t,n){}async stringifyStep(e,t,n){}async afterEachStep(e,t,n){}}class l extends s{async beforeAllSteps(e,t){const n={...t,steps:void 0},a=JSON.stringify(n,null,e.getIndent()).split("\n");a.pop(),a[a.length-1]+=",",a.push(e.getIndent()+'"steps": ['),e.appendLine(a.join("\n")).startBlock().startBlock()}async afterAllSteps(e){e.endBlock().endBlock().appendLine(e.getIndent()+"]").appendLine("}")}async stringifyStep(e,t,n){const a=JSON.stringify(t,null,e.getIndent());if(!n)return void e.appendLine(a);const i=n.steps.lastIndexOf(t)===n.steps.length-1?"":",";e.appendLine(a+i)}}function p(e,t,n,a){if("a"===n&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?a:"a"===n?a.call(e):a?a.value:t.get(e)}function c(e,t,n,a,i){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?i.call(e,n):i?i.value=n:t.set(e,n),n}var u,d,f;class w{constructor(e){u.set(this,void 0),d.set(this,0),f.set(this,[]),c(this,u,e,"f")}appendLine(e){const t=e.split("\n").map((e=>e?p(this,u,"f").repeat(p(this,d,"f"))+e.trimEnd():""));return p(this,f,"f").push(...t),this}startBlock(){var e;return c(this,d,(e=p(this,d,"f"),++e),"f"),this}endBlock(){var e;return c(this,d,(e=p(this,d,"f"),--e),"f"),this}toString(){return p(this,f,"f").join("\n")+"\n"}getIndent(){return p(this,u,"f")}getSize(){return p(this,f,"f").length}}function m(e,t){const n=[];return h(e,n,1,t),n.join("")}function h(e,t=[],n=1,a="  "){switch(typeof e){case"bigint":case"symbol":case"function":case"undefined":throw new Error("Invalid JSON");case"number":case"boolean":t.push(String(e));break;case"string":t.push(v(e));break;case"object":if(null===e)t.push("null");else if(Array.isArray(e)){t.push("[\n");for(let i=0;i<e.length;i++)t.push(a.repeat(n)),h(e[i],t,n+1,a),i!==e.length-1&&t.push(","),t.push("\n");t.push(a.repeat(n-1)+"]")}else{t.push("{\n");const i=Object.keys(e);for(let r=0;r<i.length;r++){const o=i[r],s=e[o];void 0!==s&&(t.push(a.repeat(n)),t.push(o),t.push(": "),h(s,t,n+1,a),r!==i.length-1&&t.push(","),t.push("\n"))}t.push(a.repeat(n-1)+"}")}break;default:throw new Error("Unknown object type")}return t}u=new WeakMap,d=new WeakMap,f=new WeakMap;const g=(e,t)=>e.toString(16).toUpperCase().padStart(t,"0"),y=new Map([["\b","\\b"],["\f","\\f"],["\n","\\n"],["\r","\\r"],["\t","\\t"],["\v","\\v"],["'","\\'"],["\\","\\\\"],["\x3c!--","\\x3C!--"],["<script","\\x3Cscript"],["</script","\\x3C/script"]]),v=e=>{const t=/(\\|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu,n=(e,t,n,a)=>n?y.has(n)?y.get(n):"\\x"+g(n.charCodeAt(0),2):a?"\\u"+g(a.charCodeAt(0),4):t?y.get(t)||"":e;let a="",i="";return e.includes("'")?e.includes('"')?e.includes("`")||e.includes("${")?(i="'",a=e.replace(/(\\|'|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu,n)):(i="`",a=e.replace(t,n)):(i='"',a=e.replace(t,n)):(i="'",a=e.replace(t,n)),`${i}${a}${i}`};var L,b,S,E,x,k,F,$,I,C,T,A,j,P,_,N,M,V,O;class B extends s{constructor(){super(...arguments),L.add(this)}async beforeAllSteps(e,t){e.appendLine("const puppeteer = require('puppeteer'); // v13.0.0 or later"),e.appendLine(""),e.appendLine("(async () => {").startBlock(),e.appendLine("const browser = await puppeteer.launch();"),e.appendLine("const page = await browser.newPage();"),e.appendLine(`const timeout = ${t.timeout||W};`),e.appendLine("page.setDefaultTimeout(timeout);"),e.appendLine("")}async afterAllSteps(e,t){e.appendLine(""),e.appendLine("await browser.close();"),e.appendLine("");for(const t of R.split("\n"))e.appendLine(t);e.endBlock().appendLine("})().catch(err => {").startBlock(),e.appendLine("console.error(err);"),e.appendLine("process.exit(1);"),e.endBlock().appendLine("});")}async stringifyStep(e,t,a){if(e.appendLine("{").startBlock(),void 0!==t.timeout&&e.appendLine(`const timeout = ${t.timeout};`),p(this,L,"m",E).call(this,e,t),t.assertedEvents){e.appendLine("const promises = [];");for(const a of t.assertedEvents){if(a.type!==n.Navigation)throw new Error(`Event type ${a.type} is not supported`);e.appendLine(`promises.push(${"frame"in t&&t.frame?"frame":"targetPage"}.waitForNavigation());`)}}p(this,L,"m",N).call(this,e,t),t.assertedEvents&&e.appendLine("await Promise.all(promises);"),e.endBlock().appendLine("}")}}L=new WeakSet,b=function(e,t){"main"===t?e.appendLine("const targetPage = page;"):(e.appendLine(`const target = await browser.waitForTarget(t => t.url() === ${m(t,e.getIndent())}, { timeout });`),e.appendLine("const targetPage = await target.page();"),e.appendLine("targetPage.setDefaultTimeout(timeout);"))},S=function(e,t){e.appendLine("let frame = targetPage.mainFrame();");for(const n of t)e.appendLine(`frame = frame.childFrames()[${n}];`)},E=function(e,t){p(this,L,"m",b).call(this,e,t.target||"main"),t.frame&&p(this,L,"m",S).call(this,e,t.frame)},x=function(e,t){e.appendLine(`await scrollIntoViewIfNeeded(${m(t.selectors,e.getIndent())}, ${t.frame?"frame":"targetPage"}, timeout);`),e.appendLine(`const element = await waitForSelectors(${m(t.selectors,e.getIndent())}, ${t.frame?"frame":"targetPage"}, { timeout, visible: true });`)},k=function(e,t){p(this,L,"m",x).call(this,e,t),e.appendLine("await element.click({"),t.duration&&e.appendLine(`  delay: ${t.duration},`),t.button&&e.appendLine(`  button: '${o.get(t.button)}',`),e.appendLine("  offset: {"),e.appendLine(`    x: ${t.offsetX},`),e.appendLine(`    y: ${t.offsetY},`),e.appendLine("  },"),e.appendLine("});")},F=function(e,t){p(this,L,"m",x).call(this,e,t),e.appendLine("await element.click({"),t.button&&e.appendLine(`  button: '${o.get(t.button)}',`),e.appendLine("  offset: {"),e.appendLine(`    x: ${t.offsetX},`),e.appendLine(`    y: ${t.offsetY},`),e.appendLine("  },"),e.appendLine("});"),e.appendLine("await element.click({"),e.appendLine("  clickCount: 2,"),t.duration&&e.appendLine(`  delay: ${t.duration},`),t.button&&e.appendLine(`  button: '${o.get(t.button)}',`),e.appendLine("  offset: {"),e.appendLine(`    x: ${t.offsetX},`),e.appendLine(`    y: ${t.offsetY},`),e.appendLine("  },"),e.appendLine("});")},$=function(e,t){p(this,L,"m",x).call(this,e,t),e.appendLine("await element.hover();")},I=function(e,t){p(this,L,"m",x).call(this,e,t),e.appendLine("const inputType = await element.evaluate(el => el.type);"),e.appendLine("if (inputType === 'select-one') {"),e.appendLine(`  await changeSelectElement(element, ${m(t.value,e.getIndent())})`),e.appendLine(`} else if (${m(Array.from(r),e.getIndent())}.includes(inputType)) {`),e.appendLine(`  await typeIntoElement(element, ${m(t.value,e.getIndent())});`),e.appendLine("} else {"),e.appendLine(`  await changeElementValue(element, ${m(t.value,e.getIndent())});`),e.appendLine("}")},C=function(e,t){e.appendLine("await targetPage.emulateNetworkConditions({"),e.appendLine(`  offline: ${!t.download&&!t.upload},`),e.appendLine(`  downloadThroughput: ${t.download},`),e.appendLine(`  uploadThroughput: ${t.upload},`),e.appendLine(`  latency: ${t.latency},`),e.appendLine("});")},T=function(e,t){e.appendLine(`await targetPage.keyboard.down(${m(t.key,e.getIndent())});`)},A=function(e,t){e.appendLine(`await targetPage.keyboard.up(${m(t.key,e.getIndent())});`)},j=function(e,t){e.appendLine("await targetPage.close()")},P=function(e,t){e.appendLine(`await targetPage.setViewport(${m({width:t.width,height:t.height},e.getIndent())})`)},_=function(e,t){"selectors"in t?(p(this,L,"m",x).call(this,e,t),e.appendLine(`await element.evaluate((el, x, y) => { el.scrollTop = y; el.scrollLeft = x; }, ${t.x}, ${t.y});`)):e.appendLine(`await targetPage.evaluate((x, y) => { window.scroll(x, y); }, ${t.x}, ${t.y})`)},N=function(e,n){switch(n.type){case t.Click:return p(this,L,"m",k).call(this,e,n);case t.DoubleClick:return p(this,L,"m",F).call(this,e,n);case t.Hover:return p(this,L,"m",$).call(this,e,n);case t.Change:return p(this,L,"m",I).call(this,e,n);case t.EmulateNetworkConditions:return p(this,L,"m",C).call(this,e,n);case t.KeyDown:return p(this,L,"m",T).call(this,e,n);case t.KeyUp:return p(this,L,"m",A).call(this,e,n);case t.Close:return p(this,L,"m",j).call(this,e,n);case t.SetViewport:return p(this,L,"m",P).call(this,e,n);case t.Scroll:return p(this,L,"m",_).call(this,e,n);case t.Navigate:return p(this,L,"m",M).call(this,e,n);case t.WaitForElement:return p(this,L,"m",O).call(this,e,n);case t.WaitForExpression:return p(this,L,"m",V).call(this,e,n);case t.CustomStep:return;default:return i(n)}},M=function(e,t){e.appendLine(`await targetPage.goto(${m(t.url,e.getIndent())});`)},V=function(e,t){e.appendLine(`await ${t.frame?"frame":"targetPage"}.waitForFunction(${m(t.expression,e.getIndent())}, { timeout });`)},O=function(e,t){e.appendLine(`await waitForElement(${m(t,e.getIndent())}, ${t.frame?"frame":"targetPage"}, timeout);`)};const W=5e3,R="async function waitForSelectors(selectors, frame, options) {\n  for (const selector of selectors) {\n    try {\n      return await waitForSelector(selector, frame, options);\n    } catch (err) {\n      console.error(err);\n    }\n  }\n  throw new Error('Could not find element for selectors: ' + JSON.stringify(selectors));\n}\n\nasync function scrollIntoViewIfNeeded(selectors, frame, timeout) {\n  const element = await waitForSelectors(selectors, frame, { visible: false, timeout });\n  if (!element) {\n    throw new Error(\n      'The element could not be found.'\n    );\n  }\n  await waitForConnected(element, timeout);\n  const isInViewport = await element.isIntersectingViewport({threshold: 0});\n  if (isInViewport) {\n    return;\n  }\n  await element.evaluate(element => {\n    element.scrollIntoView({\n      block: 'center',\n      inline: 'center',\n      behavior: 'auto',\n    });\n  });\n  await waitForInViewport(element, timeout);\n}\n\nasync function waitForConnected(element, timeout) {\n  await waitForFunction(async () => {\n    return await element.getProperty('isConnected');\n  }, timeout);\n}\n\nasync function waitForInViewport(element, timeout) {\n  await waitForFunction(async () => {\n    return await element.isIntersectingViewport({threshold: 0});\n  }, timeout);\n}\n\nasync function waitForSelector(selector, frame, options) {\n  if (!Array.isArray(selector)) {\n    selector = [selector];\n  }\n  if (!selector.length) {\n    throw new Error('Empty selector provided to waitForSelector');\n  }\n  let element = null;\n  for (let i = 0; i < selector.length; i++) {\n    const part = selector[i];\n    if (element) {\n      element = await element.waitForSelector(part, options);\n    } else {\n      element = await frame.waitForSelector(part, options);\n    }\n    if (!element) {\n      throw new Error('Could not find element: ' + selector.join('>>'));\n    }\n    if (i < selector.length - 1) {\n      element = (await element.evaluateHandle(el => el.shadowRoot ? el.shadowRoot : el)).asElement();\n    }\n  }\n  if (!element) {\n    throw new Error('Could not find element: ' + selector.join('|'));\n  }\n  return element;\n}\n\nasync function waitForElement(step, frame, timeout) {\n  const {\n    count = 1,\n    operator = '>=',\n    visible = true,\n    properties,\n    attributes,\n  } = step;\n  const compFn = {\n    '==': (a, b) => a === b,\n    '>=': (a, b) => a >= b,\n    '<=': (a, b) => a <= b,\n  }[operator];\n  await waitForFunction(async () => {\n    const elements = await querySelectorsAll(step.selectors, frame);\n    let result = compFn(elements.length, count);\n    const elementsHandle = await frame.evaluateHandle((...elements) => {\n      return elements;\n    }, ...elements);\n    await Promise.all(elements.map((element) => element.dispose()));\n    if (result && (properties || attributes)) {\n      result = await elementsHandle.evaluate(\n        (elements, properties, attributes) => {\n          for (const element of elements) {\n            if (attributes) {\n              for (const [name, value] of Object.entries(attributes)) {\n                if (element.getAttribute(name) !== value) {\n                  return false;\n                }\n              }\n            }\n            if (properties) {\n              if (!isDeepMatch(properties, element)) {\n                return false;\n              }\n            }\n          }\n          return true;\n\n          function isDeepMatch(a, b) {\n            if (a === b) {\n              return true;\n            }\n            if ((a && !b) || (!a && b)) {\n              return false;\n            }\n            if (!(a instanceof Object) || !(b instanceof Object)) {\n              return false;\n            }\n            for (const [key, value] of Object.entries(a)) {\n              if (!isDeepMatch(value, b[key])) {\n                return false;\n              }\n            }\n            return true;\n          }\n        },\n        properties,\n        attributes\n      );\n    }\n    await elementsHandle.dispose();\n    return result === visible;\n  }, timeout);\n}\n\nasync function querySelectorsAll(selectors, frame) {\n  for (const selector of selectors) {\n    const result = await querySelectorAll(selector, frame);\n    if (result.length) {\n      return result;\n    }\n  }\n  return [];\n}\n\nasync function querySelectorAll(selector, frame) {\n  if (!Array.isArray(selector)) {\n    selector = [selector];\n  }\n  if (!selector.length) {\n    throw new Error('Empty selector provided to querySelectorAll');\n  }\n  let elements = [];\n  for (let i = 0; i < selector.length; i++) {\n    const part = selector[i];\n    if (i === 0) {\n      elements = await frame.$$(part);\n    } else {\n      const tmpElements = elements;\n      elements = [];\n      for (const el of tmpElements) {\n        elements.push(...(await el.$$(part)));\n      }\n    }\n    if (elements.length === 0) {\n      return [];\n    }\n    if (i < selector.length - 1) {\n      const tmpElements = [];\n      for (const el of elements) {\n        const newEl = (await el.evaluateHandle(el => el.shadowRoot ? el.shadowRoot : el)).asElement();\n        if (newEl) {\n          tmpElements.push(newEl);\n        }\n      }\n      elements = tmpElements;\n    }\n  }\n  return elements;\n}\n\nasync function waitForFunction(fn, timeout) {\n  let isActive = true;\n  const timeoutId = setTimeout(() => {\n    isActive = false;\n  }, timeout);\n  while (isActive) {\n    const result = await fn();\n    if (result) {\n      clearTimeout(timeoutId);\n      return;\n    }\n    await new Promise(resolve => setTimeout(resolve, 100));\n  }\n  throw new Error('Timed out');\n}\n\nasync function changeSelectElement(element, value) {\n  await element.select(value);\n  await element.evaluateHandle((e) => {\n    e.blur();\n    e.focus();\n  });\n}\n\nasync function changeElementValue(element, value) {\n  await element.focus();\n  await element.evaluate((input, value) => {\n    input.value = value;\n    input.dispatchEvent(new Event('input', { bubbles: true }));\n    input.dispatchEvent(new Event('change', { bubbles: true }));\n  }, value);\n}\n\nasync function typeIntoElement(element, value) {\n  const textToType = await element.evaluate((input, newValue) => {\n    if (\n      newValue.length <= input.value.length ||\n      !newValue.startsWith(input.value)\n    ) {\n      input.value = '';\n      return newValue;\n    }\n    const originalValue = input.value;\n    input.value = '';\n    input.value = originalValue;\n    return newValue.substring(originalValue.length);\n  }, value);\n  await element.type(textToType);\n}",z="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",D=z.split("").reduce(((e,t,n)=>(e.set(t,n),e)),new Map);function H(e){if(e<0)throw new Error("Only postive integers and zero are supported");if(e>2147483647)throw new Error("Only integers between 0 and 2147483647 are supported");const t=[];do{let n=31&e;(e>>>=5)>0&&(n|=32),t.push(z[n])}while(0!==e);return t.join("")}function q(e){const t=[],n=e.split("");let a=0,i=0;for(const e of n){const n=D.get(e);a|=(31&n)<<i,i+=5,32&n||(t.push(a),a=0,i=0)}return t}async function J(e,t){var n,a,i,r,o,s,l;t||(t={});const p=null!==(n=t.extension)&&void 0!==n?n:new B,c=null!==(a=t.writer)&&void 0!==a?a:new w(null!==(i=t.indentation)&&void 0!==i?i:"  ");await(null===(r=p.beforeAllSteps)||void 0===r?void 0:r.call(p,c,e));const u=[1];for(const t of e.steps){const n=c.getSize();await(null===(o=p.beforeEachStep)||void 0===o?void 0:o.call(p,c,t,e)),await p.stringifyStep(c,t,e),await(null===(s=p.afterEachStep)||void 0===s?void 0:s.call(p,c,t,e));const a=c.getSize();u.push(n,a-n)}return await(null===(l=p.afterAllSteps)||void 0===l?void 0:l.call(p,c,e)),c.appendLine("//# recorderSourceMap="+function(e){const t=[];for(const n of e)t.push(H(n));return t.join("")}(u)),c.toString()}async function U(e,t){var n,a,i,r;t||(t={});let o=t.extension;o||(o=new B),t.indentation||(t.indentation="  ");const s=null!==(n=t.writer)&&void 0!==n?n:new w(null!==(a=t.indentation)&&void 0!==a?a:"  ");return await(null===(i=o.beforeEachStep)||void 0===i?void 0:i.call(o,s,e)),await o.stringifyStep(s,e),await(null===(r=o.afterEachStep)||void 0===r?void 0:r.call(o,s,e)),s.toString()}function X(e){return e.trim().startsWith("//# recorderSourceMap=")}function K(e){const t=e.split("\n");for(let e=t.length-1;e>=0;e--){const n=t[e];if(X(n))return q(n.trim().substring("//# recorderSourceMap=".length))}}function Y(e){return e.split("\n").filter((e=>!X(e))).join("\n")}new WeakSet;var G;new WeakMap,new WeakMap,new WeakMap;class Q extends s{async beforeAllSteps(e){e.appendLine("import url from 'url';"),e.appendLine("import { createRunner } from '@puppeteer/replay';"),e.appendLine(""),e.appendLine("export async function run(extension) {").startBlock(),e.appendLine("const runner = await createRunner(extension);"),e.appendLine(""),e.appendLine("await runner.runBeforeAllSteps();"),e.appendLine("")}async afterAllSteps(e){e.appendLine(""),e.appendLine("await runner.runAfterAllSteps();").endBlock().appendLine("}"),e.appendLine(""),e.appendLine("if (process && import.meta.url === url.pathToFileURL(process.argv[1]).href) {").startBlock().appendLine("run()").endBlock().appendLine("}")}async stringifyStep(e,t){e.appendLine(`await runner.runStep(${m(t,e.getIndent())});`)}}function Z(e){var a;return Boolean(e.type===t.Navigate||(null===(a=e.assertedEvents)||void 0===a?void 0:a.some((e=>e.type===n.Navigation))))}function ee(e){for(const n of e.steps)if(n.type===t.SetViewport)return n.isMobile;return!1}class te extends B{constructor(){super(...arguments),G.set(this,!1)}async beforeAllSteps(e,t){e.appendLine("const fs = require('fs');"),await super.beforeAllSteps(e,t),e.appendLine("const lhApi = await import('lighthouse'); // v10.0.0 or later"),e.appendLine(`const flags = ${m({screenEmulation:{disabled:!0}},e.getIndent())}`),ee(t)?e.appendLine("const config = undefined;"):e.appendLine("const config = lhApi.desktopConfig;"),e.appendLine(`const lhFlow = await lhApi.startFlow(page, {name: ${m(t.title,e.getIndent())}, config, flags});`)}async stringifyStep(e,n,a){if(n.type===t.SetViewport)return void await super.stringifyStep(e,n,a);const i=Z(n);i?(p(this,G,"f")&&(e.appendLine("await lhFlow.endTimespan();"),c(this,G,!1,"f")),e.appendLine("await lhFlow.startNavigation();")):p(this,G,"f")||(e.appendLine("await lhFlow.startTimespan();"),c(this,G,!0,"f")),await super.stringifyStep(e,n,a),i&&e.appendLine("await lhFlow.endNavigation();")}async afterAllSteps(e,t){p(this,G,"f")&&e.appendLine("await lhFlow.endTimespan();"),e.appendLine("const lhFlowReport = await lhFlow.generateReport();"),e.appendLine("fs.writeFileSync(__dirname + '/flow.report.html', lhFlowReport)"),await super.afterAllSteps(e,t)}}G=new WeakMap;new WeakMap,new WeakMap,new WeakMap;var ne=Object.freeze({__proto__:null,EXTENSION_PREFIX:"extension_",ExtensionConverter:class{#e;#t;constructor(e,t){this.#e=e,this.#t=t}getId(){return"extension_"+this.#e}getFormatName(){return this.#t.getName()}getMediaType(){return this.#t.getMediaType()}getFilename(e){const t=this.#n(this.#t.getMediaType());return`${e.title}${t}`}async stringify(e){const t=await this.#t.stringify(e),n=K(t);return[Y(t),n]}async stringifyStep(e){return await this.#t.stringifyStep(e)}#n(e){switch(e){case"application/json":return".json";case"application/javascript":case"text/javascript":return".js";case"application/typescript":case"text/typescript":return".ts";default:return""}}}});var ae=Object.freeze({__proto__:null,JSONConverter:class{#a;constructor(e){this.#a=e}getId(){return"json"}getFormatName(){return"JSON"}getFilename(e){return`${e.title}.json`}async stringify(e){const t=await J(e,{extension:new l,indentation:this.#a}),n=K(t);return[Y(t),n]}async stringifyStep(e){return await U(e,{extension:new l,indentation:this.#a})}getMediaType(){return"application/json"}}});var ie=Object.freeze({__proto__:null,LighthouseConverter:class{#a;constructor(e){this.#a=e}getId(){return"lighthouse"}getFormatName(){return"Puppeteer (including Lighthouse analysis)"}getFilename(e){return`${e.title}.js`}async stringify(e){const t=await J(e,{extension:new te,indentation:this.#a}),n=K(t);return[Y(t),n]}async stringifyStep(e){return await U(e,{indentation:this.#a})}getMediaType(){return"text/javascript"}}});var re=Object.freeze({__proto__:null,PuppeteerConverter:class{#a;constructor(e){this.#a=e}getId(){return"puppeteer"}getFormatName(){return"Puppeteer"}getFilename(e){return`${e.title}.js`}async stringify(e){const t=await J(e,{indentation:this.#a}),n=K(t);return[Y(t),n]}async stringifyStep(e){return await U(e,{indentation:this.#a})}getMediaType(){return"text/javascript"}}});var oe=Object.freeze({__proto__:null,PuppeteerReplayConverter:class{#a;constructor(e){this.#a=e}getId(){return"@puppeteer/replay"}getFormatName(){return"@puppeteer/replay"}getFilename(e){return`${e.title}.js`}async stringify(e){const t=await J(e,{extension:new Q,indentation:this.#a}),n=K(t);return[Y(t),n]}async stringifyStep(e){return await U(e,{extension:new Q})}getMediaType(){return"text/javascript"}}});export{a as Converter,ne as ExtensionConverter,ae as JSONConverter,ie as LighthouseConverter,re as PuppeteerConverter,oe as PuppeteerReplayConverter};

package/dist/third-party/front_end/panels/recorder/extensions/extensions.js

@@ -0,0 +1 @@
+import*as e from"../../../core/common/common.js";import*as n from"../../../models/extensions/extensions.js";let i=null;class t extends e.ObjectWrapper.ObjectWrapper{static instance(){return i||(i=new t),i}#e=new Map;constructor(){super(),this.attach()}attach(){const e=n.RecorderPluginManager.RecorderPluginManager.instance();e.addEventListener(n.RecorderPluginManager.Events.PluginAdded,this.#n),e.addEventListener(n.RecorderPluginManager.Events.PluginRemoved,this.#n),e.addEventListener(n.RecorderPluginManager.Events.ViewRegistered,this.#i);for(const n of e.views())this.#i({data:n})}detach(){const e=n.RecorderPluginManager.RecorderPluginManager.instance();e.removeEventListener(n.RecorderPluginManager.Events.PluginAdded,this.#n),e.removeEventListener(n.RecorderPluginManager.Events.PluginRemoved,this.#n),e.removeEventListener(n.RecorderPluginManager.Events.ViewRegistered,this.#i),this.#e.clear()}extensions(){return n.RecorderPluginManager.RecorderPluginManager.instance().plugins()}getView(e){const n=this.#e.get(e);if(!n)throw new Error("View not found");return n}#n=()=>{this.dispatchEventToListeners(r.ExtensionsUpdated,this.extensions())};#i=e=>{const n=e.data;this.#e.has(n.id)||this.#e.set(n.id,new s(n))}}class s{#t;#s;#r=!1;#a=!1;constructor(e){this.#t=e,this.#s=document.createElement("iframe"),this.#s.src=e.pagePath,this.#s.onload=this.#o}#o=()=>{this.#a=!0,this.#r&&this.#t.onShown()};show(){this.#r||(this.#r=!0,this.#a&&this.#t.onShown())}hide(){this.#r&&(this.#r=!1,this.#a=!1,this.#t.onHidden())}frame(){return this.#s}}var r;!function(e){e.ExtensionsUpdated="extensionsUpdated"}(r||(r={}));var a=Object.freeze({__proto__:null,ExtensionManager:t,get Events(){return r}});export{a as ExtensionManager};

package/dist/third-party/front_end/panels/recorder/injected/injected.generated.js

@@ -0,0 +1 @@
+!function(){"use strict";const e=()=>{};class t{#e;#t;#n;constructor(t){"silent"===t?(this.#e=e,this.#t=e,this.#n=e):(this.#e=console.log,this.#t=console.time,this.#n=console.timeEnd)}log(...e){this.#e(...e)}timed(e,t){this.#t(e);const n=t();return this.#n(e),n}}class n{#o=new WeakMap;#s=1;getOrInsert=e=>{const t=this.#o.get(e);return void 0!==t?t:(this.#o.set(e,this.#s),this.#s++,this.#s-1)}}class o{#i;constructor(e){this.#i=e}#r=(e,t)=>{const n=[];let o=document;for(const s of e){let e=this.#c(o,s.name);if(e)n.push(s.name),o=e;else if(t&&(e=this.#l(o,s.role),e))n.push(`[role="${s.role}"]`),o=e;else{if(e=this.#a(o,s.name,s.role),!e)return;n.push(`${s.name}[role="${s.role}"]`),o=e}}return n};#c=(e,t)=>{if(!t)return null;const n=this.#h(e,t);return 1!==n.length?null:n[0]};#l=(e,t)=>{if(!t)return null;const n=this.#h(e,void 0,t);return 1!==n.length?null:n[0]};#a=(e,t,n)=>{if(!n||!t)return null;const o=this.#h(e,t,n);return 1!==o.length?null:o[0]};#h=(e,t,n)=>{const o=[];if(!t&&!n)throw new Error("Both role and name are empty");const s=Boolean(t),i=Boolean(n),r=e=>{const c=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);do{const e=c.currentNode;e.shadowRoot&&r(e.shadowRoot),e instanceof ShadowRoot||s&&this.#i.getAccessibleName(e)!==t||i&&this.#i.getAccessibleRole(e)!==n||o.push(e)}while(c.nextNode())};return r(e instanceof Document?document.documentElement:e),o};compute=e=>{let t,n=e;const o=[];for(;n;){const s=this.#i.getAccessibleRole(n),i=this.#i.getAccessibleName(n);if(s||i){if(o.unshift({name:i,role:s}),t=this.#r(o,n!==e),t)break;n!==e&&o.shift()}else if(n===e)break;n=n.parentNode,n instanceof ShadowRoot&&(n=n.host)}return t}}class s{value;optimized;constructor(e,t){this.value=e,this.optimized=t||!1}toString(){return this.value}}const i=e=>`#${CSS.escape(e)}`,r=(e,t)=>`[${e}='${CSS.escape(t)}']`,c=([e,t],n)=>{n.self??=e=>e;let o,s,i=n.inc(e);do{for(o=n.valueOf(e),s=!0;i!==t;)if(e=n.self(i),i=n.inc(e),!n.gte(o,i)){s=!1;break}}while(!s);return o};class l{#d=[[]];#u;#f=0;constructor(e=[]){this.#u=e}inc(e){return e.parentNode??e.getRootNode()}valueOf(e){const t=((e,t=[])=>{if(!(e instanceof Element))return;for(const n of t){const t=e.getAttribute(n);if(t)return new s(r(n,t),!0)}if((e=>Boolean(e.id)&&1===e.getRootNode().querySelectorAll(i(e.id)).length)(e))return new s(i(e.id),!0);const n=e.tagName.toLowerCase();switch(e.tagName){case"BODY":case"HEAD":case"HTML":return new s(n,!0)}const o=e.parentNode;if(!o)return new s(n,!0);const c=o.children;if(((e,t)=>{for(const n of t)if(n!==e&&n.tagName===e.tagName)return!1;return!0})(e,c))return new s(n,!0);if(e instanceof HTMLInputElement&&((e,t)=>{for(const n of t)if(n!==e&&n instanceof HTMLInputElement&&n.type===e.type)return!1;return!0})(e,c))return new s(((e,t)=>`${e}${r("type",t)}`)(n,e.type),!0);const l=((e,t)=>{const n=new Set(e.classList);for(const o of t)if(o!==e){for(const e of o.classList)n.delete(e);if(0===n.size)break}if(n.size>0)return n.values().next().value})(e,c);return void 0!==l?new s(((e,t)=>`${e}.${CSS.escape(t)}`)(n,l),!0):new s(((e,t)=>`${e}:nth-of-type(${t+1})`)(n,((e,t)=>{let n=0;for(const o of t){if(o===e)return n;o.tagName===e.tagName&&++n}throw new Error("Node not found in children")})(e,c)),!1)})(e,this.#u);if(!t)throw new Error("Node is not an element");return this.#f>1?this.#d.unshift([t]):this.#d[0].unshift(t),this.#f=0,this.#d.map((e=>e.join(" > "))).join(" ")}gte(e,t){return++this.#f,1===t.querySelectorAll(e).length}}class a{#w=[[]];#u;#f=0;constructor(e=[]){this.#u=e}inc(e){return e.getRootNode()}self(e){return e instanceof ShadowRoot?e.host:e}valueOf(e){const t=c([e,e.getRootNode()],new l(this.#u));return this.#f>1?this.#w.unshift([t]):this.#w[0].unshift(t),this.#f=0,this.#w}gte(e,t){return++this.#f,1===((e,t)=>{const n=[],o=e=>{const s=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);do{const i=s.currentNode;i.shadowRoot&&o(i.shadowRoot),i instanceof ShadowRoot||i!==e&&i.matches(t)&&n.push(i)}while(s.nextNode())};return e instanceof Document&&(e=e.documentElement),o(e),n})(t,e[0][0]).length}}const h=new Set(["checkbox","image","radio"]),d=new Set(["SCRIPT","STYLE"]),u=new WeakMap,f=e=>{for(;e;)u.delete(e),e=e instanceof ShadowRoot?e.host:e.parentNode},w=new WeakSet,m=new MutationObserver((e=>{for(const t of e)f(t.target)})),g=e=>{var t,n;let o=u.get(e);if(o)return o;if(o={full:"",immediate:[]},!(e=>{var t;return!d.has(e.nodeName)&&!(null===(t=document.head)||void 0===t?void 0:t.contains(e))})(e))return o;let s="";if((i=e)instanceof HTMLSelectElement||i instanceof HTMLTextAreaElement||i instanceof HTMLInputElement&&!h.has(i.type))o.full=e.value,o.immediate.push(e.value),e.addEventListener("input",(e=>{f(e.target)}),{once:!0,capture:!0});else{for(let i=e.firstChild;i;i=i.nextSibling)i.nodeType!==Node.TEXT_NODE?(s&&o.immediate.push(s),s="",i.nodeType===Node.ELEMENT_NODE&&(o.full+=g(i).full)):(o.full+=null!==(t=i.nodeValue)&&void 0!==t?t:"",s+=null!==(n=i.nodeValue)&&void 0!==n?n:"");s&&o.immediate.push(s),e instanceof Element&&e.shadowRoot&&(o.full+=g(e.shadowRoot).full),w.has(e)||(m.observe(e,{childList:!0,characterData:!0}),w.add(e))}var i;return u.set(e,o),o},p=(e,t)=>{let n=[];for(const o of e.childNodes)if(o instanceof Element){let e;e=o.shadowRoot?p(o.shadowRoot,t):p(o,t),n=n.concat(e)}return n.length>0?n:e instanceof Element&&g(e).full.includes(t)?[e]:[]},E=(e,t=1/0)=>{const n=[];for(const o of e){if(t<=0)break;n.push(o),--t}return n},S=(e,t)=>`//*[@${e}=${JSON.stringify(t)}]`,N=(e,t,n=[])=>{let o;switch(e.nodeType){case Node.ELEMENT_NODE:if(!(e instanceof Element))return;if(t)for(const t of n)if(o=e.getAttribute(t)??"",o)return new s(S(t,o),!0);if(e.id)return new s(S("id",e.id),!0);o=e.localName;break;case Node.ATTRIBUTE_NODE:o="@"+e.nodeName;break;case Node.TEXT_NODE:case Node.CDATA_SECTION_NODE:o="text()";break;case Node.PROCESSING_INSTRUCTION_NODE:o="processing-instruction()";break;case Node.COMMENT_NODE:o="comment()";break;case Node.DOCUMENT_NODE:default:o=""}const i=T(e);return i>0&&(o+=`[${i}]`),new s(o,e.nodeType===Node.DOCUMENT_NODE)},T=e=>{function t(e,t){return e===t||(e instanceof Element&&t instanceof Element?e.localName===t.localName:e.nodeType===t.nodeType||(e.nodeType===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:e.nodeType)===(t.nodeType===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:t.nodeType))}const n=e.parentNode?e.parentNode.children:null;if(!n)return 0;let o;for(let s=0;s<n.length;++s)if(t(e,n[s])&&n[s]!==e){o=!0;break}if(!o)return 0;let s=1;for(let o=0;o<n.length;++o)if(t(e,n[o])){if(n[o]===e)return s;++s}throw new Error("This is impossible; a child must be the child of the parent")},v=(e,t)=>{if(void 0!==e)return"string"==typeof e?`${t}/${e}`:e.map((e=>`${t}/${e}`))};class y{#m=["data-testid","data-test","data-qa","data-cy","data-test-id","data-qa-id","data-testing"];#i;#g;#p=new n;#E;constructor(e,t,n="",o){this.#i=e,this.#g=t;let s=["aria","css","xpath","pierce","text"];n&&(this.#m.unshift(n),s=["css","xpath","pierce","aria","text"]),this.#E=s.filter((e=>!o||o.includes(e))).map((e=>{switch(e){case"css":return this.getCSSSelector.bind(this);case"xpath":return this.getXPathSelector.bind(this);case"pierce":return this.getPierceSelector.bind(this);case"aria":return this.getARIASelector.bind(this);case"text":return this.getTextSelector.bind(this);default:throw new Error("Unknown selector type: "+e)}}))}getSelectors(e){const t=[];for(const n of this.#E){const o=n(e);o&&t.push(o)}return t}getCSSSelector(e){return this.#g.timed(`getCSSSelector: ${this.#p.getOrInsert(e)} ${e.nodeName}`,(()=>((e,t)=>{const n=[];try{let o;for(;e instanceof Element;)o=e.getRootNode(),n.unshift(c([e,o],new l(t))),e=o instanceof ShadowRoot?o.host:o}catch{return}return n})(e,this.#m)))}getTextSelector(e){return this.#g.timed(`getTextSelector: ${this.#p.getOrInsert(e)} ${e.nodeName}`,(()=>v((e=>{const t=g(e).full.trim();if(!t)return;if(t.length<=12){const n=E(p(document,t),2);if(1!==n.length||n[0]!==e)return;return[t]}if(t.length>64)return;let n=12,o=t.length;for(;n<=o;){const s=n+(o-n>>2),i=E(p(document,t.slice(0,s)),2);1!==i.length||i[0]!==e?n=s+1:o=s-1}if(o===t.length)return;const s=o+1,i=t.slice(s,s+64);return[t.slice(0,s+i.search(/ |$/))]})(e),"text")))}getXPathSelector(e){return this.#g.timed(`getXPathSelector: ${this.#p.getOrInsert(e)} ${e.nodeName}`,(()=>v(((e,t,n)=>{if(e.nodeType===Node.DOCUMENT_NODE)return"/";const o=[],s=[];let i=e;for(;i!==document&&i;){const e=N(i,true,n);if(!e)return;s.unshift(e),i=e.optimized?i.getRootNode():i.parentNode,i instanceof ShadowRoot&&(o.unshift((s[0].optimized?"":"/")+s.join("/")),s.splice(0,s.length),i=i.host)}return s.length&&o.unshift((s[0].optimized?"":"/")+s.join("/")),!o.length||o.length>1?void 0:o})(e,0,this.#m),"xpath")))}getPierceSelector(e){return this.#g.timed(`getPierceSelector: ${this.#p.getOrInsert(e)} ${e.nodeName}`,(()=>v(((e,t)=>{try{const n=new a(t);return c([e,document],n).flat()}catch{return}})(e,this.#m),"pierce")))}getARIASelector(e){return this.#g.timed(`getARIASelector: ${this.#p.getOrInsert(e)} ${e.nodeName}`,(()=>v(((e,t)=>new o(t).compute(e))(e,this.#i),"aria")))}}const k=e=>{e.preventDefault(),e.stopImmediatePropagation()},b=(e,t)=>{const n=t.getBoundingClientRect();return{offsetX:e.clientX-n.x,offsetY:e.clientY-n.y}},R=e=>{for(const t of e.composedPath()){if(!(t instanceof Element))continue;const e=t.getBoundingClientRect();if(0!==e.width&&0!==e.height)return t}throw new Error(`No target is found in event of type ${e.type}`)},O=e=>Object.values(e).filter((e=>Boolean(e))).length.toString();class L{static defaultSetupOptions=Object.freeze({debug:!1,allowUntrustedEvents:!1,selectorTypesToRecord:["aria","css","text","xpath","pierce"]});#S;#N=e=>e.isTrusted;#T=[];#g;constructor(e,n=L.defaultSetupOptions){this.#g=new t(n.debug?"debug":"silent"),this.#g.log("creating a RecordingClient"),this.#S=new y(e,this.#g,n.selectorAttribute,n.selectorTypesToRecord),n.allowUntrustedEvents&&(this.#N=()=>!0),this.#T=n.stopShortcuts??[]}start=()=>{this.#g.log("Setting up recording listeners"),window.addEventListener("keydown",this.#v,!0),window.addEventListener("beforeinput",this.#y,!0),window.addEventListener("input",this.#k,!0),window.addEventListener("keyup",this.#b,!0),window.addEventListener("pointerdown",this.#R,!0),window.addEventListener("click",this.#O,!0),window.addEventListener("auxclick",this.#O,!0),window.addEventListener("beforeunload",this.#L,!0)};stop=()=>{this.#g.log("Tearing down client listeners"),window.removeEventListener("keydown",this.#v,!0),window.removeEventListener("beforeinput",this.#y,!0),window.removeEventListener("input",this.#k,!0),window.removeEventListener("keyup",this.#b,!0),window.removeEventListener("pointerdown",this.#R,!0),window.removeEventListener("click",this.#O,!0),window.removeEventListener("auxclick",this.#O,!0),window.removeEventListener("beforeunload",this.#L,!0)};getSelectors=e=>this.#S.getSelectors(e);getCSSSelector=e=>this.#S.getCSSSelector(e);getTextSelector=e=>this.#S.getTextSelector(e);queryCSSSelectorAllForTesting=e=>(e=>{if("string"==typeof e)e=[e];else if(0===e.length)return[];let t=[[document.documentElement]];do{const n=e.shift(),o=[];for(const e of t)for(const t of e){const e=(t.shadowRoot??t).querySelectorAll(n);e.length>0&&o.push(e)}t=o}while(e.length>0&&t.length>0);return t.flatMap((e=>[...e]))})(e);#C=e=>{for(const t of this.#T??[])if(e.shiftKey===t.shift&&e.ctrlKey===t.ctrl&&e.metaKey===t.meta&&e.keyCode===t.keyCode)return this.stop(),k(e),window.stopShortcut(O(t)),!0;return!1};#$={element:document.documentElement,selectors:[]};#D=e=>{const t=e.composedPath()[0];!function(e){if(!e)throw new Error("Assertion failed!")}(t instanceof Element),this.#$.element!==t&&(this.#$={element:t,selectors:this.getSelectors(t)})};#v=e=>{this.#N(e)&&(this.#C(e)||(this.#D(e),this.#_({type:"keyDown",key:e.key})))};#y=e=>{this.#N(e)&&this.#D(e)};#k=e=>{if(!this.#N(e))return;if(this.#D(e),(e=>{if(e instanceof HTMLInputElement)switch(e.type){case"checkbox":case"radio":return!0}return!1})(this.#$.element))return;const{element:t,selectors:n}=this.#$;this.#_({type:"change",selectors:n,value:"value"in t?t.value:t.textContent})};#b=e=>{this.#N(e)&&this.#_({type:"keyUp",key:e.key})};#x={element:document.documentElement,selectors:[]};#A=e=>{const t=R(e);this.#x.element!==t&&(this.#x={element:t,selectors:this.#S.getSelectors(t)})};#M=0;#R=e=>{this.#N(e)&&(this.#M=e.timeStamp,this.#A(e))};#O=e=>{if(!this.#N(e))return;this.#A(e);const t=((e,t)=>{let n;if(e instanceof PointerEvent)switch(e.pointerType){case"mouse":break;case"pen":case"touch":n=e.pointerType;break;default:return}const{offsetX:o,offsetY:s}=b(e,t);if(!(o<0||s<0))return{button:["auxiliary","secondary","back","forward"][e.button-1],deviceType:n,offsetX:o,offsetY:s}})(e,this.#x.element);if(!t)return;const n=e.timeStamp-this.#M;this.#_({type:2===e.detail?"doubleClick":"click",selectors:this.#x.selectors,duration:n>350?n:void 0,...t})};#L=e=>{this.#g.log("Unloading..."),this.#N(e)&&this.#_({type:"beforeUnload"})};#_=e=>{const t=JSON.stringify(e);this.#g.log(`Adding step: ${t}`),window.addStep(t)}}class C{#g;#S;constructor(e,n="",o=!0){this.#g=new t(o?"debug":"silent"),this.#g.log("Creating a SelectorPicker"),this.#S=new y(e,this.#g,n)}#I=e=>{k(e);const t=R(e);window.captureSelectors(JSON.stringify({selectors:this.#S.getSelectors(t),...b(e,t)}))};start=()=>{this.#g.log("Setting up selector listeners"),window.addEventListener("click",this.#I,!0),window.addEventListener("mousedown",k,!0),window.addEventListener("mouseup",k,!0)};stop=()=>{this.#g.log("Tearing down selector listeners"),window.removeEventListener("click",this.#I,!0),window.removeEventListener("mousedown",k,!0),window.removeEventListener("mouseup",k,!0)}}window.DevToolsRecorder||(window.DevToolsRecorder=new class{#P;startRecording(e,t){if(this.#P)throw new Error("Recording client already started.");if(this.#B)throw new Error("Selector picker is active.");this.#P=new L(e,t),this.#P.start()}stopRecording(){if(!this.#P)throw new Error("Recording client was not started.");this.#P.stop(),this.#P=void 0}get recordingClientForTesting(){if(!this.#P)throw new Error("Recording client was not started.");return this.#P}#B;startSelectorPicker(e,t,n){if(this.#B)throw new Error("Selector picker already started.");this.#P&&this.#P.stop(),this.#B=new C(e,t,n),this.#B.start()}stopSelectorPicker(){if(!this.#B)throw new Error("Selector picker was not started.");this.#B.stop(),this.#B=void 0,this.#P&&this.#P.start()}})}();

package/dist/third-party/front_end/panels/recorder/injected/injected.js

@@ -0,0 +1 @@
+const e=()=>{};class t{#e;#t;#n;constructor(t){if("silent"===t)this.#e=e,this.#t=e,this.#n=e;else this.#e=console.log,this.#t=console.time,this.#n=console.timeEnd}log(...e){this.#e(...e)}timed(e,t){this.#t(e);const n=t();return this.#n(e),n}}class n{#o=new WeakMap;#r=1;getOrInsert=e=>{const t=this.#o.get(e);return void 0!==t?t:(this.#o.set(e,this.#r),this.#r++,this.#r-1)}}class o{#i;constructor(e){this.#i=e}#s=(e,t)=>{const n=[];let o=document;for(const r of e){let e=this.#c(o,r.name);if(e)n.push(r.name),o=e;else if(t&&(e=this.#l(o,r.role),e))n.push(`[role="${r.role}"]`),o=e;else{if(e=this.#a(o,r.name,r.role),!e)return;n.push(`${r.name}[role="${r.role}"]`),o=e}}return n};#c=(e,t)=>{if(!t)return null;const n=this.#d(e,t);return 1!==n.length?null:n[0]};#l=(e,t)=>{if(!t)return null;const n=this.#d(e,void 0,t);return 1!==n.length?null:n[0]};#a=(e,t,n)=>{if(!n||!t)return null;const o=this.#d(e,t,n);return 1!==o.length?null:o[0]};#d=(e,t,n)=>{const o=[];if(!t&&!n)throw new Error("Both role and name are empty");const r=Boolean(t),i=Boolean(n),s=e=>{const c=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);do{const e=c.currentNode;e.shadowRoot&&s(e.shadowRoot),e instanceof ShadowRoot||(r&&this.#i.getAccessibleName(e)!==t||i&&this.#i.getAccessibleRole(e)!==n||o.push(e))}while(c.nextNode())};return s(e instanceof Document?document.documentElement:e),o};compute=e=>{let t,n=e;const o=[];for(;n;){const r=this.#i.getAccessibleRole(n),i=this.#i.getAccessibleName(n);if(r||i){if(o.unshift({name:i,role:r}),t=this.#s(o,n!==e),t)break;n!==e&&o.shift()}else if(n===e)break;n=n.parentNode,n instanceof ShadowRoot&&(n=n.host)}return t}}class r{value;optimized;constructor(e,t){this.value=e,this.optimized=t||!1}toString(){return this.value}}const i=e=>`#${CSS.escape(e)}`,s=(e,t)=>`[${e}='${CSS.escape(t)}']`,c=(e,t=[])=>{if(!(e instanceof Element))return;for(const n of t){const t=e.getAttribute(n);if(t)return new r(s(n,t),!0)}if((e=>Boolean(e.id)&&1===e.getRootNode().querySelectorAll(i(e.id)).length)(e))return new r(i(e.id),!0);const n=e.tagName.toLowerCase();switch(e.tagName){case"BODY":case"HEAD":case"HTML":return new r(n,!0)}const o=e.parentNode;if(!o)return new r(n,!0);const c=o.children;if(((e,t)=>{for(const n of t)if(n!==e&&n.tagName===e.tagName)return!1;return!0})(e,c))return new r(n,!0);if(e instanceof HTMLInputElement&&((e,t)=>{for(const n of t)if(n!==e&&n instanceof HTMLInputElement&&n.type===e.type)return!1;return!0})(e,c))return new r(((e,t)=>`${e}${s("type",t)}`)(n,e.type),!0);const l=((e,t)=>{const n=new Set(e.classList);for(const o of t)if(o!==e){for(const e of o.classList)n.delete(e);if(0===n.size)break}if(n.size>0)return n.values().next().value})(e,c);return void 0!==l?new r(((e,t)=>`${e}.${CSS.escape(t)}`)(n,l),!0):new r(((e,t)=>`${e}:nth-of-type(${t+1})`)(n,((e,t)=>{let n=0;for(const o of t){if(o===e)return n;o.tagName===e.tagName&&++n}throw new Error("Node not found in children")})(e,c)),!1)},l=([e,t],n)=>{n.self??=e=>e;let o,r,i=n.inc(e);do{for(o=n.valueOf(e),r=!0;i!==t;)if(e=n.self(i),i=n.inc(e),!n.gte(o,i)){r=!1;break}}while(!r);return o};class a{#u=[[]];#h;#f=0;constructor(e=[]){this.#h=e}inc(e){return e.parentNode??e.getRootNode()}valueOf(e){const t=c(e,this.#h);if(!t)throw new Error("Node is not an element");return this.#f>1?this.#u.unshift([t]):this.#u[0].unshift(t),this.#f=0,this.#u.map((e=>e.join(" > "))).join(" ")}gte(e,t){return++this.#f,1===t.querySelectorAll(e).length}}const d=(e,t)=>{const n=[],o=e=>{const r=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);do{const i=r.currentNode;i.shadowRoot&&o(i.shadowRoot),i instanceof ShadowRoot||i!==e&&i.matches(t)&&n.push(i)}while(r.nextNode())};return e instanceof Document&&(e=e.documentElement),o(e),n};class u{#g=[[]];#h;#f=0;constructor(e=[]){this.#h=e}inc(e){return e.getRootNode()}self(e){return e instanceof ShadowRoot?e.host:e}valueOf(e){const t=l([e,e.getRootNode()],new a(this.#h));return this.#f>1?this.#g.unshift([t]):this.#g[0].unshift(t),this.#f=0,this.#g}gte(e,t){return++this.#f,1===d(t,e[0][0]).length}}const h=new Set(["checkbox","image","radio"]),f=new Set(["SCRIPT","STYLE"]),g=e=>{var t;return!f.has(e.nodeName)&&!(null===(t=document.head)||void 0===t?void 0:t.contains(e))},p=new WeakMap,m=e=>{for(;e;)p.delete(e),e=e instanceof ShadowRoot?e.host:e.parentNode},w=new WeakSet,E=new MutationObserver((e=>{for(const t of e)m(t.target)})),T=e=>{var t,n;let o=p.get(e);if(o)return o;if(o={full:"",immediate:[]},!g(e))return o;let r="";if((i=e)instanceof HTMLSelectElement||i instanceof HTMLTextAreaElement||i instanceof HTMLInputElement&&!h.has(i.type))o.full=e.value,o.immediate.push(e.value),e.addEventListener("input",(e=>{m(e.target)}),{once:!0,capture:!0});else{for(let i=e.firstChild;i;i=i.nextSibling)i.nodeType!==Node.TEXT_NODE?(r&&o.immediate.push(r),r="",i.nodeType===Node.ELEMENT_NODE&&(o.full+=T(i).full)):(o.full+=null!==(t=i.nodeValue)&&void 0!==t?t:"",r+=null!==(n=i.nodeValue)&&void 0!==n?n:"");r&&o.immediate.push(r),e instanceof Element&&e.shadowRoot&&(o.full+=T(e.shadowRoot).full),w.has(e)||(E.observe(e,{childList:!0,characterData:!0}),w.add(e))}var i;return p.set(e,o),o},S=(e,t)=>{let n=[];for(const o of e.childNodes)if(o instanceof Element){let e;e=o.shadowRoot?S(o.shadowRoot,t):S(o,t),n=n.concat(e)}if(n.length>0)return n;if(e instanceof Element){if(T(e).full.includes(t))return[e]}return[]},y=(e,t=1/0)=>{const n=[];for(const o of e){if(t<=0)break;n.push(o),--t}return n},N=(e,t)=>`//*[@${e}=${JSON.stringify(t)}]`,v=(e,t,n=[])=>{let o;switch(e.nodeType){case Node.ELEMENT_NODE:if(!(e instanceof Element))return;if(t)for(const t of n)if(o=e.getAttribute(t)??"",o)return new r(N(t,o),!0);if(e.id)return new r(N("id",e.id),!0);o=e.localName;break;case Node.ATTRIBUTE_NODE:o="@"+e.nodeName;break;case Node.TEXT_NODE:case Node.CDATA_SECTION_NODE:o="text()";break;case Node.PROCESSING_INSTRUCTION_NODE:o="processing-instruction()";break;case Node.COMMENT_NODE:o="comment()";break;case Node.DOCUMENT_NODE:default:o=""}const i=b(e);return i>0&&(o+=`[${i}]`),new r(o,e.nodeType===Node.DOCUMENT_NODE)},b=e=>{function t(e,t){if(e===t)return!0;if(e instanceof Element&&t instanceof Element)return e.localName===t.localName;if(e.nodeType===t.nodeType)return!0;return(e.nodeType===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:e.nodeType)===(t.nodeType===Node.CDATA_SECTION_NODE?Node.TEXT_NODE:t.nodeType)}const n=e.parentNode?e.parentNode.children:null;if(!n)return 0;let o;for(let r=0;r<n.length;++r)if(t(e,n[r])&&n[r]!==e){o=!0;break}if(!o)return 0;let r=1;for(let o=0;o<n.length;++o)if(t(e,n[o])){if(n[o]===e)return r;++r}throw new Error("This is impossible; a child must be the child of the parent")},k=(e,t)=>{if(void 0!==e)return"string"==typeof e?`${t}/${e}`:e.map((e=>`${t}/${e}`))};class C{#p=["data-testid","data-test","data-qa","data-cy","data-test-id","data-qa-id","data-testing"];#i;#m;#w=new n;#E;constructor(e,t,n="",o){this.#i=e,this.#m=t;let r=["aria","css","xpath","pierce","text"];n&&(this.#p.unshift(n),r=["css","xpath","pierce","aria","text"]),this.#E=r.filter((e=>!o||o.includes(e))).map((e=>{switch(e){case"css":return this.getCSSSelector.bind(this);case"xpath":return this.getXPathSelector.bind(this);case"pierce":return this.getPierceSelector.bind(this);case"aria":return this.getARIASelector.bind(this);case"text":return this.getTextSelector.bind(this);default:throw new Error("Unknown selector type: "+e)}}))}getSelectors(e){const t=[];for(const n of this.#E){const o=n(e);o&&t.push(o)}return t}getCSSSelector(e){return this.#m.timed(`getCSSSelector: ${this.#w.getOrInsert(e)} ${e.nodeName}`,(()=>((e,t)=>{const n=[];try{let o;for(;e instanceof Element;)o=e.getRootNode(),n.unshift(l([e,o],new a(t))),e=o instanceof ShadowRoot?o.host:o}catch{return}return n})(e,this.#p)))}getTextSelector(e){return this.#m.timed(`getTextSelector: ${this.#w.getOrInsert(e)} ${e.nodeName}`,(()=>k((e=>{const t=T(e).full.trim();if(!t)return;if(t.length<=12){const n=y(S(document,t),2);if(1!==n.length||n[0]!==e)return;return[t]}if(t.length>64)return;let n=12,o=t.length;for(;n<=o;){const r=n+(o-n>>2),i=y(S(document,t.slice(0,r)),2);1!==i.length||i[0]!==e?n=r+1:o=r-1}if(o===t.length)return;const r=o+1,i=t.slice(r,r+64);return[t.slice(0,r+i.search(/ |$/))]})(e),"text")))}getXPathSelector(e){return this.#m.timed(`getXPathSelector: ${this.#w.getOrInsert(e)} ${e.nodeName}`,(()=>k(((e,t,n)=>{if(e.nodeType===Node.DOCUMENT_NODE)return"/";const o=[],r=[];let i=e;for(;i!==document&&i;){const e=v(i,t,n);if(!e)return;r.unshift(e),i=e.optimized?i.getRootNode():i.parentNode,i instanceof ShadowRoot&&(o.unshift((r[0].optimized?"":"/")+r.join("/")),r.splice(0,r.length),i=i.host)}return r.length&&o.unshift((r[0].optimized?"":"/")+r.join("/")),!o.length||o.length>1?void 0:o})(e,!0,this.#p),"xpath")))}getPierceSelector(e){return this.#m.timed(`getPierceSelector: ${this.#w.getOrInsert(e)} ${e.nodeName}`,(()=>k(((e,t)=>{try{const n=new u(t);return l([e,document],n).flat()}catch{return}})(e,this.#p),"pierce")))}getARIASelector(e){return this.#m.timed(`getARIASelector: ${this.#w.getOrInsert(e)} ${e.nodeName}`,(()=>k(((e,t)=>new o(t).compute(e))(e,this.#i),"aria")))}}const I=e=>{e.preventDefault(),e.stopImmediatePropagation()},O=(e,t)=>{const n=t.getBoundingClientRect();return{offsetX:e.clientX-n.x,offsetY:e.clientY-n.y}},A=e=>{for(const t of e.composedPath()){if(!(t instanceof Element))continue;const e=t.getBoundingClientRect();if(0!==e.width&&0!==e.height)return t}throw new Error(`No target is found in event of type ${e.type}`)},R=e=>Object.values(e).filter((e=>Boolean(e))).length.toString();class D{static defaultSetupOptions=Object.freeze({debug:!1,allowUntrustedEvents:!1,selectorTypesToRecord:["aria","css","text","xpath","pierce"]});#T;#S=e=>e.isTrusted;#y=[];#m;constructor(e,n=D.defaultSetupOptions){this.#m=new t(n.debug?"debug":"silent"),this.#m.log("creating a RecordingClient"),this.#T=new C(e,this.#m,n.selectorAttribute,n.selectorTypesToRecord),n.allowUntrustedEvents&&(this.#S=()=>!0),this.#y=n.stopShortcuts??[]}start=()=>{this.#m.log("Setting up recording listeners"),window.addEventListener("keydown",this.#N,!0),window.addEventListener("beforeinput",this.#v,!0),window.addEventListener("input",this.#b,!0),window.addEventListener("keyup",this.#k,!0),window.addEventListener("pointerdown",this.#C,!0),window.addEventListener("click",this.#I,!0),window.addEventListener("auxclick",this.#I,!0),window.addEventListener("beforeunload",this.#O,!0)};stop=()=>{this.#m.log("Tearing down client listeners"),window.removeEventListener("keydown",this.#N,!0),window.removeEventListener("beforeinput",this.#v,!0),window.removeEventListener("input",this.#b,!0),window.removeEventListener("keyup",this.#k,!0),window.removeEventListener("pointerdown",this.#C,!0),window.removeEventListener("click",this.#I,!0),window.removeEventListener("auxclick",this.#I,!0),window.removeEventListener("beforeunload",this.#O,!0)};getSelectors=e=>this.#T.getSelectors(e);getCSSSelector=e=>this.#T.getCSSSelector(e);getTextSelector=e=>this.#T.getTextSelector(e);queryCSSSelectorAllForTesting=e=>(e=>{if("string"==typeof e)e=[e];else if(0===e.length)return[];let t=[[document.documentElement]];do{const n=e.shift(),o=[];for(const e of t)for(const t of e){const e=(t.shadowRoot??t).querySelectorAll(n);e.length>0&&o.push(e)}t=o}while(e.length>0&&t.length>0);return t.flatMap((e=>[...e]))})(e);#A=e=>{for(const t of this.#y??[])if(e.shiftKey===t.shift&&e.ctrlKey===t.ctrl&&e.metaKey===t.meta&&e.keyCode===t.keyCode)return this.stop(),I(e),window.stopShortcut(R(t)),!0;return!1};#R={element:document.documentElement,selectors:[]};#D=e=>{const t=e.composedPath()[0];!function(e){if(!e)throw new Error("Assertion failed!")}(t instanceof Element),this.#R.element!==t&&(this.#R={element:t,selectors:this.getSelectors(t)})};#N=e=>{this.#S(e)&&(this.#A(e)||(this.#D(e),this.#L({type:"keyDown",key:e.key})))};#v=e=>{this.#S(e)&&this.#D(e)};#b=e=>{if(!this.#S(e))return;if(this.#D(e),(e=>{if(e instanceof HTMLInputElement)switch(e.type){case"checkbox":case"radio":return!0}return!1})(this.#R.element))return;const{element:t,selectors:n}=this.#R;this.#L({type:"change",selectors:n,value:"value"in t?t.value:t.textContent})};#k=e=>{this.#S(e)&&this.#L({type:"keyUp",key:e.key})};#P={element:document.documentElement,selectors:[]};#x=e=>{const t=A(e);this.#P.element!==t&&(this.#P={element:t,selectors:this.#T.getSelectors(t)})};#$=0;#C=e=>{this.#S(e)&&(this.#$=e.timeStamp,this.#x(e))};#I=e=>{if(!this.#S(e))return;this.#x(e);const t=((e,t)=>{let n;if(e instanceof PointerEvent)switch(e.pointerType){case"mouse":break;case"pen":case"touch":n=e.pointerType;break;default:return}const{offsetX:o,offsetY:r}=O(e,t);if(!(o<0||r<0))return{button:["auxiliary","secondary","back","forward"][e.button-1],deviceType:n,offsetX:o,offsetY:r}})(e,this.#P.element);if(!t)return;const n=e.timeStamp-this.#$;this.#L({type:2===e.detail?"doubleClick":"click",selectors:this.#P.selectors,duration:n>350?n:void 0,...t})};#O=e=>{this.#m.log("Unloading..."),this.#S(e)&&this.#L({type:"beforeUnload"})};#L=e=>{const t=JSON.stringify(e);this.#m.log(`Adding step: ${t}`),window.addStep(t)}}class L{#m;#T;constructor(e,n="",o=!0){this.#m=new t(o?"debug":"silent"),this.#m.log("Creating a SelectorPicker"),this.#T=new C(e,this.#m,n)}#B=e=>{I(e);const t=A(e);window.captureSelectors(JSON.stringify({selectors:this.#T.getSelectors(t),...O(e,t)}))};start=()=>{this.#m.log("Setting up selector listeners"),window.addEventListener("click",this.#B,!0),window.addEventListener("mousedown",I,!0),window.addEventListener("mouseup",I,!0)};stop=()=>{this.#m.log("Tearing down selector listeners"),window.removeEventListener("click",this.#B,!0),window.removeEventListener("mousedown",I,!0),window.removeEventListener("mouseup",I,!0)}}class P{#_;startRecording(e,t){if(this.#_)throw new Error("Recording client already started.");if(this.#M)throw new Error("Selector picker is active.");this.#_=new D(e,t),this.#_.start()}stopRecording(){if(!this.#_)throw new Error("Recording client was not started.");this.#_.stop(),this.#_=void 0}get recordingClientForTesting(){if(!this.#_)throw new Error("Recording client was not started.");return this.#_}#M;startSelectorPicker(e,t,n){if(this.#M)throw new Error("Selector picker already started.");this.#_&&this.#_.stop(),this.#M=new L(e,t,n),this.#M.start()}stopSelectorPicker(){if(!this.#M)throw new Error("Selector picker was not started.");this.#M.stop(),this.#M=void 0,this.#_&&this.#_.start()}}window.DevToolsRecorder||(window.DevToolsRecorder=new P);

package/dist/third-party/front_end/panels/recorder/models/models.js

@@ -0,0 +1 @@
+import*as e from"../../../core/common/common.js";import*as t from"../../../core/i18n/i18n.js";import*as r from"../../../ui/legacy/legacy.js";import*as n from"../../../core/sdk/sdk.js";import*as i from"../../../services/puppeteer/puppeteer.js";import*as a from"../../../core/platform/platform.js";import*as o from"../util/util.js";var s,c,l,d=Object.freeze({__proto__:null});!function(e){e.CSS="css",e.ARIA="aria",e.Text="text",e.XPath="xpath",e.Pierce="pierce"}(s=s||(s={})),function(e){e.Change="change",e.Click="click",e.Close="close",e.CustomStep="customStep",e.DoubleClick="doubleClick",e.EmulateNetworkConditions="emulateNetworkConditions",e.Hover="hover",e.KeyDown="keyDown",e.KeyUp="keyUp",e.Navigate="navigate",e.Scroll="scroll",e.SetViewport="setViewport",e.WaitForElement="waitForElement",e.WaitForExpression="waitForExpression"}(c=c||(c={})),(l=l||(l={})).Navigation="navigation";Object.freeze({__proto__:null,get SelectorType(){return s},get StepType(){return c},get AssertedEventType(){return l}});function u(e){throw new Error(`Unknown step type: ${e.type}`)}const p=new Set(["textarea","text","url","tel","search","password","number","email"]),g=new Set(["mouse","pen","touch"]),h=new Map([["primary","left"],["auxiliary","middle"],["secondary","right"],["back","back"],["forward","forward"]]);function f(e,t){return!!Object.prototype.hasOwnProperty.call(e,t)&&void 0!==e[t]}function w(e){return"object"==typeof e&&null!==e}function m(e){return"string"==typeof e}function y(e){return"number"==typeof e}function v(e){return Array.isArray(e)}function b(e){if(f(e,"target")&&m(e.target))return e.target}function S(e){if(f(e,"frame")){if(v(t=e.frame)&&t.every((e=>Number.isInteger(e))))return e.frame;throw new Error("Step `frame` is not an integer array")}var t}function E(e,t){if(f(e,t)){const r=e[t];if(y(r))return r}throw new Error(`Step.${t} is not a number`)}function T(e,t){if(f(e,t)){const r=e[t];if("boolean"==typeof r)return r}throw new Error(`Step.${t} is not a boolean`)}function k(e,t){if(f(e,t))return E(e,t)}function C(e,t){if(f(e,t))return N(e,t)}function M(e,t){if(f(e,t))return T(e,t)}function N(e,t){if(f(e,t)){const r=e[t];if(m(r))return r}throw new Error(`Step.${t} is not a string`)}function x(e){if(!f(e,"selectors"))throw new Error("Step does not have required selectors");if(!v(e.selectors))throw new Error("Step selectors are not an array");if(0===e.selectors.length)throw new Error("Step does not have required selectors");return e.selectors.map((e=>{if(!m(e)&&!v(e))throw new Error("Selector is not an array or string");return v(e)?e.map((e=>{if(!m(e))throw new Error("Selector element is not a string");return e})):e}))}function L(e){if(f(e,"selectors"))return x(e)}function R(e){if(!w(e))throw new Error("Asserted event is not an object");if(!f(e,"type"))throw new Error("Asserted event is missing type");if(e.type===l.Navigation)return{type:l.Navigation,url:C(e,"url"),title:C(e,"title")};throw new Error("Unknown assertedEvent type")}function F(e){if(v(e))return e.map(R)}function A(e,t){if(f(t,"timeout")&&y(t.timeout)&&!W(t.timeout))throw new Error(j);return{type:e,assertedEvents:f(t,"assertedEvents")?F(t.assertedEvents):void 0,timeout:f(t,"timeout")&&y(t.timeout)?t.timeout:void 0}}function P(e,t){return{...A(e,t),target:b(t)}}function _(e,t){return{...P(e,t),frame:S(t)}}function I(e,t){return{..._(e,t),selectors:x(t)}}function O(e){const t={offsetX:E(e,"offsetX"),offsetY:E(e,"offsetY"),duration:k(e,"duration")},r=C(e,"deviceType");if(r){if("string"!=typeof(n=r)||!g.has(n))throw new Error(`'deviceType' for click steps must be one of the following: ${[...g].join(", ")}`);t.deviceType=r}var n;const i=C(e,"button");if(i){if(!function(e){return"string"==typeof e&&h.has(e)}(i))throw new Error(`'button' for click steps must be one of the following: ${[...h.keys()].join(", ")}`);t.button=i}return t}function $(e,t){if(!w(e))throw new Error(t?`Step ${t} is not an object`:"Step is not an object");if(!f(e,"type"))throw new Error(t?`Step ${t} does not have a type`:"Step does not have a type");if(!m(e.type))throw new Error(t?`Type of the step ${t} is not a string`:"Type of the step is not a string");switch(e.type){case c.Click:return function(e){return{...I(c.Click,e),...O(e),type:c.Click}}(e);case c.DoubleClick:return function(e){return{...I(c.DoubleClick,e),...O(e),type:c.DoubleClick}}(e);case c.Hover:return function(e){return{...I(c.Hover,e),type:c.Hover}}(e);case c.Change:return function(e){return{...I(c.Change,e),type:c.Change,value:N(e,"value")}}(e);case c.KeyDown:return function(e){return{...P(c.KeyDown,e),type:c.KeyDown,key:N(e,"key")}}(e);case c.KeyUp:return function(e){return{...P(c.KeyUp,e),type:c.KeyUp,key:N(e,"key")}}(e);case c.EmulateNetworkConditions:return function(e){return{...P(c.EmulateNetworkConditions,e),type:c.EmulateNetworkConditions,download:E(e,"download"),upload:E(e,"upload"),latency:E(e,"latency")}}(e);case c.Close:return function(e){return{...P(c.Close,e),type:c.Close}}(e);case c.SetViewport:return function(e){return{...P(c.SetViewport,e),type:c.SetViewport,width:E(e,"width"),height:E(e,"height"),deviceScaleFactor:E(e,"deviceScaleFactor"),isMobile:T(e,"isMobile"),hasTouch:T(e,"hasTouch"),isLandscape:T(e,"isLandscape")}}(e);case c.Scroll:return function(e){return{..._(c.Scroll,e),type:c.Scroll,x:k(e,"x"),y:k(e,"y"),selectors:L(e)}}(e);case c.Navigate:return function(e){return{...P(c.Navigate,e),type:c.Navigate,target:b(e),url:N(e,"url")}}(e);case c.CustomStep:return function(e){if(!f(e,"name"))throw new Error("customStep is missing name");if(!m(e.name))throw new Error("customStep's name is not a string");return{..._(c.CustomStep,e),type:c.CustomStep,name:e.name,parameters:f(e,"parameters")?e.parameters:void 0}}(e);case c.WaitForElement:return function(e){const t=C(e,"operator");if(t&&">="!==t&&"=="!==t&&"<="!==t)throw new Error("WaitForElement step's operator is not one of '>=','==','<='");if(f(e,"attributes")&&(!w(e.attributes)||Object.values(e.attributes).some((e=>"string"!=typeof e))))throw new Error("WaitForElement step's attribute is not a dictionary of strings");if(f(e,"properties")&&!w(e.properties))throw new Error("WaitForElement step's attribute is not an object");return{...I(c.WaitForElement,e),type:c.WaitForElement,operator:t,count:k(e,"count"),visible:M(e,"visible"),attributes:f(e,"attributes")?e.attributes:void 0,properties:f(e,"properties")?e.properties:void 0}}(e);case c.WaitForExpression:return function(e){if(!f(e,"expression"))throw new Error("waitForExpression step is missing `expression`");return{..._(c.WaitForExpression,e),type:c.WaitForExpression,expression:N(e,"expression")}}(e);default:throw new Error(`Step type ${e.type} is not supported`)}}function D(e){const t=[];if(!v(e))throw new Error("Recording `steps` is not an array");for(const[r,n]of e.entries())t.push($(n,r));return t}const j="Timeout is not between 1 and 30000 milliseconds";function W(e){return e>=1&&e<=3e4}function U(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function B(e,t,r,n,i){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!i)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?i.call(e,r):i?i.value=r:t.set(e,r),r}function K(e,t){const r=[];return V(e,r,1,t),r.join("")}function V(e,t=[],r=1,n="  "){switch(typeof e){case"bigint":case"symbol":case"function":case"undefined":throw new Error("Invalid JSON");case"number":case"boolean":t.push(String(e));break;case"string":t.push(J(e));break;case"object":if(null===e)t.push("null");else if(Array.isArray(e)){t.push("[\n");for(let i=0;i<e.length;i++)t.push(n.repeat(r)),V(e[i],t,r+1,n),i!==e.length-1&&t.push(","),t.push("\n");t.push(n.repeat(r-1)+"]")}else{t.push("{\n");const i=Object.keys(e);for(let a=0;a<i.length;a++){const o=i[a],s=e[o];void 0!==s&&(t.push(n.repeat(r)),t.push(o),t.push(": "),V(s,t,r+1,n),a!==i.length-1&&t.push(","),t.push("\n"))}t.push(n.repeat(r-1)+"}")}break;default:throw new Error("Unknown object type")}return t}new WeakMap,new WeakMap,new WeakMap;const z=(e,t)=>e.toString(16).toUpperCase().padStart(t,"0"),H=new Map([["\b","\\b"],["\f","\\f"],["\n","\\n"],["\r","\\r"],["\t","\\t"],["\v","\\v"],["'","\\'"],["\\","\\\\"],["\x3c!--","\\x3C!--"],["<script","\\x3Cscript"],["</script","\\x3C/script"]]),J=e=>{const t=/(\\|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu,r=(e,t,r,n)=>r?H.has(r)?H.get(r):"\\x"+z(r.charCodeAt(0),2):n?"\\u"+z(n.charCodeAt(0),4):t?H.get(t)||"":e;let n="",i="";return e.includes("'")?e.includes('"')?e.includes("`")||e.includes("${")?(i="'",n=e.replace(/(\\|'|<(?:!--|\/?script))|(\p{Control})|(\p{Surrogate})/gu,r)):(i="`",n=e.replace(t,r)):(i='"',n=e.replace(t,r)):(i="'",n=e.replace(t,r)),`${i}${n}${i}`};var X,Y,G,q,Q,Z,ee,te,re,ne,ie,ae,oe,se,ce,le,de;X=new WeakSet,Y=function(e,t){"main"===t?e.appendLine("const targetPage = page;"):(e.appendLine(`const target = await browser.waitForTarget(t => t.url() === ${K(t,e.getIndent())}, { timeout });`),e.appendLine("const targetPage = await target.page();"),e.appendLine("targetPage.setDefaultTimeout(timeout);"))},G=function(e,t){e.appendLine("let frame = targetPage.mainFrame();");for(const r of t)e.appendLine(`frame = frame.childFrames()[${r}];`)},q=function(e,t){e.appendLine(`await scrollIntoViewIfNeeded(${K(t.selectors,e.getIndent())}, ${t.frame?"frame":"targetPage"}, timeout);`),e.appendLine(`const element = await waitForSelectors(${K(t.selectors,e.getIndent())}, ${t.frame?"frame":"targetPage"}, { timeout, visible: true });`)},Q=function(e,t){U(this,X,"m",q).call(this,e,t),e.appendLine("await element.click({"),t.duration&&e.appendLine(`  delay: ${t.duration},`),t.button&&e.appendLine(`  button: '${h.get(t.button)}',`),e.appendLine("  offset: {"),e.appendLine(`    x: ${t.offsetX},`),e.appendLine(`    y: ${t.offsetY},`),e.appendLine("  },"),e.appendLine("});")},Z=function(e,t){U(this,X,"m",q).call(this,e,t),e.appendLine("await element.click({"),t.button&&e.appendLine(`  button: '${h.get(t.button)}',`),e.appendLine("  offset: {"),e.appendLine(`    x: ${t.offsetX},`),e.appendLine(`    y: ${t.offsetY},`),e.appendLine("  },"),e.appendLine("});"),e.appendLine("await element.click({"),e.appendLine("  clickCount: 2,"),t.duration&&e.appendLine(`  delay: ${t.duration},`),t.button&&e.appendLine(`  button: '${h.get(t.button)}',`),e.appendLine("  offset: {"),e.appendLine(`    x: ${t.offsetX},`),e.appendLine(`    y: ${t.offsetY},`),e.appendLine("  },"),e.appendLine("});")},ee=function(e,t){U(this,X,"m",q).call(this,e,t),e.appendLine("await element.hover();")},te=function(e,t){U(this,X,"m",q).call(this,e,t),e.appendLine("const inputType = await element.evaluate(el => el.type);"),e.appendLine("if (inputType === 'select-one') {"),e.appendLine(`  await changeSelectElement(element, ${K(t.value,e.getIndent())})`),e.appendLine(`} else if (${K(Array.from(p),e.getIndent())}.includes(inputType)) {`),e.appendLine(`  await typeIntoElement(element, ${K(t.value,e.getIndent())});`),e.appendLine("} else {"),e.appendLine(`  await changeElementValue(element, ${K(t.value,e.getIndent())});`),e.appendLine("}")},re=function(e,t){e.appendLine("await targetPage.emulateNetworkConditions({"),e.appendLine(`  offline: ${!t.download&&!t.upload},`),e.appendLine(`  downloadThroughput: ${t.download},`),e.appendLine(`  uploadThroughput: ${t.upload},`),e.appendLine(`  latency: ${t.latency},`),e.appendLine("});")},ne=function(e,t){e.appendLine(`await targetPage.keyboard.down(${K(t.key,e.getIndent())});`)},ie=function(e,t){e.appendLine(`await targetPage.keyboard.up(${K(t.key,e.getIndent())});`)},ae=function(e,t){e.appendLine("await targetPage.close()")},oe=function(e,t){e.appendLine(`await targetPage.setViewport(${K({width:t.width,height:t.height},e.getIndent())})`)},se=function(e,t){"selectors"in t?(U(this,X,"m",q).call(this,e,t),e.appendLine(`await element.evaluate((el, x, y) => { el.scrollTop = y; el.scrollLeft = x; }, ${t.x}, ${t.y});`)):e.appendLine(`await targetPage.evaluate((x, y) => { window.scroll(x, y); }, ${t.x}, ${t.y})`)},ce=function(e,t){e.appendLine(`await targetPage.goto(${K(t.url,e.getIndent())});`)},le=function(e,t){e.appendLine(`await ${t.frame?"frame":"targetPage"}.waitForFunction(${K(t.expression,e.getIndent())}, { timeout });`)},de=function(e,t){e.appendLine(`await waitForElement(${K(t,e.getIndent())}, ${t.frame?"frame":"targetPage"}, timeout);`)};const ue="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";ue.split("").reduce(((e,t,r)=>(e.set(t,r),e)),new Map);class pe{async beforeAllSteps(e){}async afterAllSteps(e){}async beforeEachStep(e,t){}async runStep(e,t){}async afterEachStep(e,t){}}var ge,he,fe;const we={"==":(e,t)=>e===t,">=":(e,t)=>e>=t,"<=":(e,t)=>e<=t};class me extends pe{constructor(e,t,r){super(),ge.add(this),this.browser=e,this.page=t,this.timeout=(null==r?void 0:r.timeout)||5e3}async runStep(e,t){const r=U(this,ge,"m",fe).call(this,e,t),n=this.page,i=this.browser,a=await async function(e,t,r,n){if(!r.target||"main"===r.target)return t;const i=await e.waitForTarget((e=>e.url()===r.target),{timeout:n}),a=await i.page();return a?(a.setDefaultTimeout(n),a):null}(i,n,e,r);let o=null;if(!a&&e.target){const t=n.frames();for(const r of t)if(r.isOOPFrame()&&r.url()===e.target){o=r;break}o||(o=await n.waitForFrame(e.target,{timeout:r}))}const s=o||a;if(!s)throw new Error("Target is not found for step: "+JSON.stringify(e));await U(this,ge,"m",he).call(this,s);const c=await async function(e,t){let r="mainFrame"in e?e.mainFrame():e;if("frame"in t&&t.frame)for(const e of t.frame)r=r.childFrames()[e];return r}(s,e);await this.runStepInFrame(e,n,s,c,r)}async runStepInFrame(e,t,r,n,i){const a=!0;let o=null;const s=()=>{o=async function(e,t,r){const n=[];if(t.assertedEvents)for(const i of t.assertedEvents){if(i.type!==l.Navigation)throw new Error(`Event type ${i.type} is not supported`);n.push(e.waitForNavigation({timeout:r}))}await Promise.all(n)}(n,e,i)};switch(e.type){case c.DoubleClick:{await ve(e.selectors,n,i);const t=await be(e.selectors,n,{timeout:i,visible:a});if(!t)throw new Error("Could not find element: "+e.selectors[0]);s(),await t.click({button:e.button&&h.get(e.button),offset:{x:e.offsetX,y:e.offsetY}}),await t.click({clickCount:2,button:e.button&&h.get(e.button),delay:e.duration,offset:{x:e.offsetX,y:e.offsetY}}),await t.dispose()}break;case c.Click:{await ve(e.selectors,n,i);const t=await be(e.selectors,n,{timeout:i,visible:a});if(!t)throw new Error("Could not find element: "+e.selectors[0]);s(),await t.click({delay:e.duration,button:e.button&&h.get(e.button),offset:{x:e.offsetX,y:e.offsetY}}),await t.dispose()}break;case c.Hover:{await ve(e.selectors,n,i);const t=await be(e.selectors,n,{timeout:i,visible:a});if(!t)throw new Error("Could not find element: "+e.selectors[0]);s(),await t.hover(),await t.dispose()}break;case c.EmulateNetworkConditions:s(),await t.emulateNetworkConditions(e);break;case c.KeyDown:s(),await t.keyboard.down(e.key),await t.waitForTimeout(100);break;case c.KeyUp:s(),await t.keyboard.up(e.key),await t.waitForTimeout(100);break;case c.Close:"close"in r&&(s(),await r.close());break;case c.Change:{await ve(e.selectors,n,i);const t=await be(e.selectors,n,{timeout:i,visible:a});if(!t)throw new Error("Could not find element: "+e.selectors[0]);const r=await t.evaluate((e=>e.type));s(),"select-one"===r?await this.changeSelectElement(e,t):p.has(r)?await this.typeIntoElement(e,t):await this.changeElementValue(e,t),await t.dispose()}break;case c.SetViewport:"setViewport"in r&&(s(),await r.setViewport(e));break;case c.Scroll:if("selectors"in e){await ve(e.selectors,n,i);const t=await be(e.selectors,n,{timeout:i,visible:a});s(),await t.evaluate(((e,t,r)=>{e.scrollTop=r,e.scrollLeft=t}),e.x||0,e.y||0),await t.dispose()}else s(),await n.evaluate(((e,t)=>{window.scroll(e,t)}),e.x||0,e.y||0);break;case c.Navigate:s(),await n.goto(e.url);break;case c.WaitForElement:try{s(),await async function(e,t,r){const{count:n=1,operator:i=">=",visible:a=!0,properties:o,attributes:s}=e,c=we[i];await Te((async()=>{const r=await async function(e,t){for(const r of e){const e=await Ee(r,t);if(e.length)return e}return[]}(e.selectors,t);let i=c(r.length,n);const l=await t.evaluateHandle(((...e)=>e),...r);return await Promise.all(r.map((e=>e.dispose()))),i&&(o||s)&&(i=await l.evaluate(((e,t,r)=>{if(r)for(const t of e)for(const[e,n]of Object.entries(r))if(t.getAttribute(e)!==n)return!1;if(t)for(const r of e)if(!n(t,r))return!1;return!0;function n(e,t){if(e===t)return!0;if(e&&!t||!e&&t)return!1;if(!(e instanceof Object&&t instanceof Object))return!1;for(const[r,i]of Object.entries(e))if(!n(i,t[r]))return!1;return!0}}),o,s)),await l.dispose(),i===a}),r)}(e,n,i)}catch(e){throw"Timed out"===e.message?new Error("waitForElement timed out. The element(s) could not be found."):e}break;case c.WaitForExpression:s(),await n.waitForFunction(e.expression,{timeout:i});break;case c.CustomStep:break;default:u(e)}await o}async typeIntoElement(e,t){const r=await t.evaluate(((e,t)=>{if(t.length<=e.value.length||!t.startsWith(e.value))return e.value="",t;const r=e.value;return e.value="",e.value=r,t.substring(r.length)}),e.value);await t.type(r)}async changeElementValue(e,t){await t.focus(),await t.evaluate(((e,t)=>{e.value=t,e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))}),e.value)}async changeSelectElement(e,t){await t.select(e.value),await t.evaluateHandle((e=>{e.blur(),e.focus()}))}}ge=new WeakSet,he=async function(e){try{await e._client().send("Emulation.setAutomationOverride",{enabled:!0})}catch{}},fe=function(e,t){return e.timeout||(null==t?void 0:t.timeout)||this.timeout};class ye extends me{async afterAllSteps(){await this.browser.close()}}async function ve(e,t,r){const n=await be(e,t,{visible:!1,timeout:r});if(!n)throw new Error("The element could not be found.");await async function(e,t){await Te((async()=>await e.evaluate((e=>e.isConnected))),t)}(n,r);const i=await(async e=>await e.evaluate((e=>e instanceof SVGElement))?e:null)(n),a=i?await async function(e){return await e.evaluateHandle((e=>{var t;return null!==(t=e.ownerSVGElement)&&void 0!==t?t:e}))}(i):n;a&&await a.isIntersectingViewport({threshold:0})||(await async function(e){await e.evaluate((e=>{e.scrollIntoView({block:"center",inline:"center",behavior:"auto"})}))}(n),a&&await async function(e,t){await Te((async()=>await e.isIntersectingViewport({threshold:0})),t)}(a,r),await a.dispose(),a!==n&&await n.dispose())}async function be(e,t,r){for(const n of e)try{return await Se(n,t,r)}catch(e){console.error("error in waitForSelectors",e)}throw new Error("Could not find element for selectors: "+JSON.stringify(e))}async function Se(e,t,r){if(Array.isArray(e)||(e=[e]),!e.length)throw new Error("Empty selector provided to `waitForSelector`");let n=1===e.length,i=await t.waitForSelector(e[0],{...r,visible:n&&r.visible});for(const t of e.slice(1,e.length)){if(!i)throw new Error("Could not find element: "+e.join(">>"));const a=await i.evaluateHandle((e=>e.shadowRoot?e.shadowRoot:e));i.dispose(),n=e[e.length-1]===t,i=await a.waitForSelector(t,{...r,visible:n&&r.visible}),a.dispose()}if(!i)throw new Error("Could not find element: "+e.join(">>"));return i}async function Ee(e,t){if(Array.isArray(e)||(e=[e]),!e.length)throw new Error("Empty selector provided to querySelectorAll");let r=await t.$$(e[0]);if(!r.length)return[];for(const t of e.slice(1,e.length))if(r=(await Promise.all(r.map((async e=>{const r=await e.evaluateHandle((e=>e.shadowRoot?e.shadowRoot:e)),n=await r.$$(t);return r.dispose(),e.dispose(),n})))).flat(),!r.length)return[];return r}async function Te(e,t){let r=!0;const n=setTimeout((()=>{r=!1}),t);for(;r;){if(await e())return void clearTimeout(n);await new Promise((e=>setTimeout(e,100)))}throw new Error("Timed out")}var ke,Ce,Me;async function Ne(e,t,r){var n,i;await(null===(n=e.beforeEachStep)||void 0===n?void 0:n.call(e,t,r)),await e.runStep(t,r),await(null===(i=e.afterEachStep)||void 0===i?void 0:i.call(e,t,r))}class xe{constructor(e){ke.set(this,void 0),Ce.set(this,void 0),Me.set(this,!1),B(this,Ce,e,"f")}abort(){B(this,Me,!0,"f")}set flow(e){B(this,ke,e,"f")}async runBeforeAllSteps(e){var t,r;await(null===(r=(t=U(this,Ce,"f")).beforeAllSteps)||void 0===r?void 0:r.call(t,e))}async runAfterAllSteps(e){var t,r;await(null===(r=(t=U(this,Ce,"f")).afterAllSteps)||void 0===r?void 0:r.call(t,e))}async runStep(e){await Ne(U(this,Ce,"f"),e)}async run(){var e,t,r,n,i,a;if(!U(this,ke,"f"))throw new Error("Set the flow on the runner instance before calling `run`.");const o=U(this,ke,"f");if(B(this,Me,!1,"f"),await(null===(t=(e=U(this,Ce,"f")).beforeAllSteps)||void 0===t?void 0:t.call(e,o)),U(this,Me,"f"))return!1;for(const e of o.steps){if(U(this,Me,"f"))return await(null===(n=(r=U(this,Ce,"f")).afterAllSteps)||void 0===n?void 0:n.call(r,o)),!1;await Ne(U(this,Ce,"f"),e,o)}return await(null===(a=(i=U(this,Ce,"f")).afterAllSteps)||void 0===a?void 0:a.call(i,o)),!0}}ke=new WeakMap,Ce=new WeakMap,Me=new WeakMap;new WeakMap;new WeakMap,new WeakMap,new WeakMap;var Le=Object.freeze({__proto__:null,get AssertedEventType(){return l},get StepType(){return c},get SelectorType(){return s}});const Re={defaultRecordingName:"Recording {DATE} at {TIME}"},Fe=t.i18n.registerUIStrings("panels/recorder/models/RecorderSettings.ts",Re),Ae=t.i18n.getLocalizedString.bind(void 0,Fe);var Pe=Object.freeze({__proto__:null,RecorderSettings:class{#e=e.Settings.Settings.instance().createSetting("recorderSelectorAttribute","");#t=e.Settings.Settings.instance().createSetting("recorderPanelReplaySpeed","normal");#r=e.Settings.Settings.instance().createSetting("recorderPanelReplayExtension","");#n=new Map;#i=e.Settings.Settings.instance().createSetting("recorder_preferred_copy_format","json");constructor(){for(const t of Object.values(s))this.#n.set(t,e.Settings.Settings.instance().createSetting(`recorder${t}SelectorEnabled`,!0))}get selectorAttribute(){return this.#e.get()}set selectorAttribute(e){this.#e.set(e)}get speed(){return this.#t.get()}set speed(e){this.#t.set(e)}get replayExtension(){return this.#r.get()}set replayExtension(e){this.#r.set(e)}get defaultTitle(){const e=new Date;return Ae(Re.defaultRecordingName,{DATE:e.toLocaleDateString(),TIME:e.toLocaleTimeString()})}get defaultSelectors(){return Object.values(s).filter((e=>this.getSelectorByType(e)))}getSelectorByType(e){return this.#n.get(e)?.get()}setSelectorByType(e,t){this.#n.get(e)?.set(t)}get preferredCopyFormat(){return this.#i.get()}set preferredCopyFormat(e){this.#i.set(e)}}});var _e=Object.freeze({__proto__:null,RecorderShortcutHelper:class{#a;#o=null;#s;constructor(e=200){this.#s=e,this.#a=new AbortController}#c(){this.#a.abort(),this.#o&&clearTimeout(this.#o),this.#a=new AbortController}#l(e){this.#c(),e()}handleShortcut(e){this.#c(),document.addEventListener("keyup",(t=>{r.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(t)&&this.#l(e)}),{signal:this.#a.signal}),this.#o=setTimeout((()=>this.#l(e)),this.#s)}}});const Ie={normal:0,slow:500,very_slow:1e3,extremely_slow:2e3};function Oe(e,t){return!t.url.startsWith("chrome-extension://")&&(!(!t.url.startsWith("devtools://")||t.targetId!==e)||("page"===t.type||"iframe"===t.type)&&(t.targetId===e||t.openerId===e||"iframe"===t.type))}function $e(e){return e.url.startsWith("devtools://")||"page"===e.type||"background_page"===e.type||"webview"===e.type}class De extends e.ObjectWrapper.ObjectWrapper{#d;#u;userFlow;speed;timeout;breakpointIndexes;steppingOver=!1;aborted=!1;abortPromise;#p;#g;constructor(e,{speed:t,breakpointIndexes:r=new Set}){super(),this.userFlow=e,this.speed=t,this.timeout=e.timeout||5e3,this.breakpointIndexes=r,this.#d=new Promise((e=>{this.#u=e})),this.abortPromise=new Promise((e=>{this.#p=e}))}#h(){this.#u?.(),this.#d=new Promise((e=>{this.#u=e}))}static async connectPuppeteer(){const e=n.TargetManager.TargetManager.instance().primaryPageTarget();if(!e)throw new Error("Could not find main target");const t=e.model(n.ChildTargetManager.ChildTargetManager);if(!t)throw new Error("Could not get childTargetManager");const r=e.model(n.ResourceTreeModel.ResourceTreeModel);if(!r)throw new Error("Could not get resource tree model");const a=r.mainFrame;if(!a)throw new Error("Could not find main frame");const o=(await t.createParallelConnection((()=>{}))).connection,s=await t.getParentTargetId(),{page:c,browser:l,puppeteerConnection:d}=await i.PuppeteerConnection.PuppeteerConnectionHelper.connectPuppeteerToConnection({connection:o,mainFrameId:a.id,targetInfos:t.targetInfos(),targetFilterCallback:Oe.bind(null,s),isPageTargetCallback:$e});if(!c)throw new Error("could not find main page!");return l.on("targetdiscovered",(e=>{"page"===e.type&&e.targetId!==s&&e.openerId===s&&d._createSession(e,!0)})),{page:c,browser:l}}static async disconnectPuppeteer(e){try{const t=await e.pages();for(const e of t){const t=e._client();await t.send("Network.disable"),await t.send("Page.disable"),await t.send("Log.disable"),await t.send("Performance.disable"),await t.send("Runtime.disable"),await t.send("Emulation.clearDeviceMetricsOverride"),await t.send("Emulation.setAutomationOverride",{enabled:!1});for(const t of e.frames()){const e=t._client();await e.send("Network.disable"),await e.send("Page.disable"),await e.send("Log.disable"),await e.send("Performance.disable"),await e.send("Runtime.disable"),await e.send("Emulation.setAutomationOverride",{enabled:!1})}}e.disconnect()}catch(e){console.error("Error disconnecting Puppeteer",e.message)}}async stop(){await Promise.race([this.#d,this.abortPromise])}abort(){this.aborted=!0,this.#p?.(),this.#g?.abort()}disposeForTesting(){this.#u?.(),this.#p?.()}continue(){this.steppingOver=!1,this.#h()}stepOver(){this.steppingOver=!0,this.#h()}updateBreakpointIndexes(e){this.breakpointIndexes=e}async play(){const e=n.TargetManager.TargetManager.instance().primaryPageTarget();e&&await e.pageAgent().invoke_setPrerenderingAllowed({isAllowed:!1});const{page:t,browser:r}=await De.connectPuppeteer();this.aborted=!1;const i=this;const a=new class extends me{#t;constructor(e,t,{timeout:r,speed:n}){super(e,t,{timeout:r}),this.#t=n}async beforeEachStep(e,t){let r=()=>{};const n=new Promise((e=>{r=e}));i.dispatchEventToListeners("Step",{step:e,resolve:r}),await n;const a=t.steps.indexOf(e),o=i.steppingOver||i.breakpointIndexes.has(a),s="setViewport"!==e.type&&"navigate"!==e.type&&!i.aborted;o?(i.dispatchEventToListeners("Stop"),await i.stop(),i.dispatchEventToListeners("Continue")):s&&await Promise.race([new Promise((e=>setTimeout(e,Ie[this.#t]))),i.abortPromise])}async runStep(e,r){if(!t?.url().startsWith("devtools://")||"setViewport"!==e.type&&"navigate"!==e.type)return await super.runStep(e,r)}}(r,t,{timeout:this.timeout,speed:this.speed});let o;this.#g=await async function(e,t){const r=e instanceof pe?e:t,n=e instanceof pe?void 0:e,i=new xe(null!=r?r:await async function(){const{default:e}=await import("puppeteer"),t=await e.launch({headless:!0}),r=await t.newPage();return new ye(t,r)}());return n&&(i.flow=n),i}(this.userFlow,a);try{await this.#g.run()}catch(e){o=e,console.error("Replay error",e.message)}finally{const e=n.TargetManager.TargetManager.instance().primaryPageTarget();e&&await e.pageAgent().invoke_setPrerenderingAllowed({isAllowed:!0}),await De.disconnectPuppeteer(r)}this.aborted?this.dispatchEventToListeners("Abort"):o?this.dispatchEventToListeners("Error",o):this.dispatchEventToListeners("Done")}}var je=Object.freeze({__proto__:null,defaultTimeout:5e3,shouldAttachToTarget:Oe,RecordingPlayer:De});function We(e){return{type:c.SetViewport,width:e.clientWidth,height:e.clientHeight,deviceScaleFactor:1,isMobile:!1,hasTouch:!1,isLandscape:!1}}function Ue(e){return{type:c.EmulateNetworkConditions,...e}}function Be(e,t){return"selectors"in e&&"selectors"in t?JSON.stringify(e.selectors)===JSON.stringify(t.selectors):!("selectors"in e)&&!("selectors"in t)}const Ke=function(e){if(!w(e))throw new Error("Recording is not an object");if(!f(e,"title"))throw new Error("Recording is missing `title`");if(!m(e.title))throw new Error("Recording `title` is not a string");if(f(e,"timeout")&&!y(e.timeout))throw new Error("Recording `timeout` is not a number");if(!f(e,"steps"))throw new Error("Recording is missing `steps`");if(f(e,"timeout")&&y(e.timeout)&&!W(e.timeout))throw new Error(j);return t={title:e.title,timeout:f(e,"timeout")&&y(e.timeout)?e.timeout:void 0,selectorAttribute:f(e,"selectorAttribute")&&m(e.selectorAttribute)?e.selectorAttribute:void 0,steps:D(e.steps)},JSON.parse(JSON.stringify(t));var t},Ve=$;var ze=Object.freeze({__proto__:null,createViewportStep:We,createEmulateNetworkConditionsStep:Ue,areSelectorsEqual:Be,minTimeout:1,maxTimeout:3e4,parse:Ke,parseStep:Ve});function He(e){return n.TargetManager.TargetManager.instance().primaryPageTarget()===e||"main"===e.id()?"main":e.inspectedURL()}function Je(e,t){const r=[];for(;t;){const e=t.sameTargetParentFrame();if(!e)break;const n=e.childFrames.indexOf(t);r.unshift(n),t=e}return{target:He(e),frame:r}}async function Xe(e,t,r){const i=t.model(n.RuntimeModel.RuntimeModel).executionContexts(),a=t.model(n.ResourceTreeModel.ResourceTreeModel);for(const n of a.frames()){if(!i.find((e=>e.frameId===n.id)))continue;const{executionContextId:a}=await t.pageAgent().invoke_createIsolatedWorld({frameId:n.id,worldName:e});await t.runtimeAgent().invoke_evaluate({expression:r,includeCommandLineAPI:!0,contextId:a})}}var Ye=Object.freeze({__proto__:null,getTargetName:He,getTargetFrameContext:Je,evaluateInAllFrames:Xe,findTargetByExecutionContext:function(e,t){for(const r of e){const e=r.model(n.RuntimeModel.RuntimeModel);if(e)for(const n of e.executionContexts())if(n.id===t)return r}},findFrameIdByExecutionContext:function(e,t){for(const r of e){const e=r.model(n.RuntimeModel.RuntimeModel);if(e)for(const r of e.executionContexts())if(r.id===t&&void 0!==r.frameId)return r.frameId}},isFrameTargetInfo:e=>"page"===e.type||"iframe"===e.type});const Ge=a.StringUtilities.formatAsJSLiteral,qe=new Set(["typed","address_bar","auto_bookmark","auto_subframe","generated","auto_toplevel","reload","keyword","keyword_generated"]),Qe=Object.freeze({addStep:"addStep",stopShortcut:"stopShortcut"});class Ze extends e.ObjectWrapper.ObjectWrapper{#f;#w;#m;#y;#v;#b=new Map;#S=new Map;#E=new Map;#T=new Map;#k=new Map;#C=new Map;#M=new e.Mutex.Mutex;#N;#x=new Map;#L=!1;#R=[];constructor(e,t){super(),this.#f=e,this.#w=e.pageAgent(),this.#m=e.targetAgent(),this.#y=n.NetworkManager.MultitargetNetworkManager.instance();const r=e.model(n.ResourceTreeModel.ResourceTreeModel);if(!r)throw new Error("ResourceTreeModel is missing for the target: "+e.id());this.#v=r,this.#f=e,this.#N={title:t.title,selectorAttribute:t.selectorAttribute,steps:[]},this.#R=t.selectorTypesToRecord}cloneUserFlow(){return structuredClone(this.#N)}overwriteUserFlow(e){this.#N=structuredClone(e)}async start(){if(this.#L)throw new Error("The session has started");this.#L=!0,await this.#w.invoke_setPrerenderingAllowed({isAllowed:!1}),this.#y.addEventListener(n.NetworkManager.MultitargetNetworkManager.Events.ConditionsChanged,this.#F,this),await this.#A(),await this.#w.invoke_bringToFront(),await this.#P(this.#f)}async stop(){await this.#w.invoke_setPrerenderingAllowed({isAllowed:!0}),await this.#_(),this.#M.acquire(),await Promise.all([...this.#b.values()].map(this.#I)),this.#y.removeEventListener(n.NetworkManager.MultitargetNetworkManager.Events.ConditionsChanged,this.#F,this)}async#A(){const e=this.#v.mainFrame;if(!e)throw new Error("Could not find mainFrame.");this.#y.networkConditions()!==n.NetworkManager.NoThrottlingConditions&&this.#F();const{cssLayoutViewport:t}=await this.#f.pageAgent().invoke_getLayoutMetrics();this.#O(We(t));const r=await this.#v.navigationHistory();if(r){const e=r.entries[r.currentIndex];this.#S.set(this.#f.id(),e.id),this.#E.set(this.#f.id(),r.entries.map((e=>e.id))),this.#N.steps.push({type:c.Navigate,url:e.url,assertedEvents:[{type:l.Navigation,url:e.url,title:e.title}]})}else this.#N.steps.push({type:c.Navigate,url:e.url,assertedEvents:[{type:l.Navigation,url:e.url,title:await this.#$(this.#f)}]});this.#_()}async#$(e){return(await e.runtimeAgent().invoke_evaluate({expression:"document.title"})).result?.value||""}#F(){const e=this.#y.networkConditions();this.#O(Ue(e))}#D;#j=[];#_(){return this.#D&&clearTimeout(this.#D),this.#D=setTimeout((()=>{this.dispatchEventToListeners("recordingupdated",structuredClone(this.#N)),this.#D=void 0;for(const e of this.#j)e();this.#j.length=0}),100),new Promise((e=>{this.#j.push(e)}))}get#W(){return this.#N.steps.slice(-1)[0]}#U=new Set;#O(e){switch(e.type){case"doubleClick":for(let t=this.#N.steps.length-1;t>0;t--){const r=this.#N.steps[t];if("click"===r.type){e.selectors=r.selectors,this.#N.steps.splice(t,1);break}}break;case"change":{const t=this.#W;if(!t)break;switch(t.type){case"change":if(!Be(e,t))break;return this.#N.steps[this.#N.steps.length-1]=e,void this.#_();case"keyDown":return this.#U.add(t.key),this.#N.steps.pop(),void this.#O(e)}break}case"keyDown":if(this.#U.has(e.key))return;break;case"keyUp":if(this.#U.has(e.key))return void this.#U.delete(e.key)}this.#N.steps.push(e),this.#_()}#B(e,t){const r=this.#N.steps[this.#N.steps.length-1];if(r&&!r.assertedEvents?.find((e=>e.type===l.Navigation))){const n=e.target||"main",i=(e.frame||[]).join(","),a=r.target||"main",o=(("frame"in r?r.frame:[])||[]).join(",");n===a&&i===o&&(r.assertedEvents=[{type:l.Navigation}],this.#x.set(t.id(),r),this.#_())}}#K(e,t){const r=this.#x.get(e.id());if(!r)return;const n=r;if(!n.assertedEvents)return;const i=n.assertedEvents.find((e=>e.type===l.Navigation));i&&!i.url&&(i.url=t.url,i.title=t.title,this.#_())}#V(e){const t=Number(e.data.payload);for(let e=0;e<t-1;e++)this.#N.steps.pop();this.dispatchEventToListeners("recordingstopped",structuredClone(this.#N))}#z(e,t){switch(t.data.name){case Qe.stopShortcut:return void this.#V(t);case Qe.addStep:return void this.#H(e,t);default:return}}#H(e,t){const r=t.data.executionContextId;let i;const a=e.model(n.RuntimeModel.RuntimeModel);if(a)for(const e of a.executionContexts())if(e.id===r){i=e.frameId;break}if(!i)throw new Error("No execution context found for the binding call + "+JSON.stringify(t.data));const o=JSON.parse(t.data.payload),s=e.model(n.ResourceTreeModel.ResourceTreeModel).frameForId(i);if(!s)throw new Error("Could not find frame.");const c=Je(e,s);if("beforeUnload"!==o.type)switch(o.type){case"change":this.#O({type:"change",value:o.value,selectors:o.selectors,frame:c.frame.length?c.frame:void 0,target:c.target});break;case"doubleClick":this.#O({type:"doubleClick",target:c.target,selectors:o.selectors,offsetY:o.offsetY,offsetX:o.offsetX,frame:c.frame.length?c.frame:void 0,deviceType:o.deviceType,button:o.button});break;case"click":this.#O({type:"click",target:c.target,selectors:o.selectors,offsetY:o.offsetY,offsetX:o.offsetX,frame:c.frame.length?c.frame:void 0,duration:o.duration,deviceType:o.deviceType,button:o.button});break;case"keyUp":this.#O({type:"keyUp",key:o.key,frame:c.frame.length?c.frame:void 0,target:c.target});break;case"keyDown":this.#O({type:"keyDown",frame:c.frame.length?c.frame:void 0,target:c.target,key:o.key});break;default:throw new Error("Unhandled client event")}else this.#B(c,e)}#J(){return(e=>{const t=[];for(const n of e)for(const e of n){const n={meta:!1,ctrl:!1,shift:!1,alt:!1,keyCode:-1},{keyCode:i,modifiers:a}=r.KeyboardShortcut.KeyboardShortcut.keyCodeAndModifiersFromKey(e);n.keyCode=i;const o=r.KeyboardShortcut.Modifiers;n.ctrl=Boolean(a&o.Ctrl),n.meta=Boolean(a&o.Meta),n.shift=Boolean(a&o.Shift),n.shift=Boolean(a&o.Alt),-1!==n.keyCode&&t.push(n)}return t})(r.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction("chrome_recorder.start-recording").map((e=>e.descriptors.map((e=>e.key)))))}static get#X(){try{return e.Settings.Settings.instance().settingForTest("untrustedRecorderEvents"),!0}catch{}return!1}#P=async e=>{if(e.type()!==n.Target.Type.Frame)return;this.#b.set(e.id(),e);const t=e.model(n.AccessibilityModel.AccessibilityModel);a.assertNotNullOrUndefined(t),await t.resumeModel(),await this.#Y(e),await this.#G(e);const r=e.model(n.ChildTargetManager.ChildTargetManager);a.assertNotNullOrUndefined(r),this.#C.set(e,[r.addEventListener(n.ChildTargetManager.Events.TargetCreated,this.#q.bind(this,e)),r.addEventListener(n.ChildTargetManager.Events.TargetDestroyed,this.#Q.bind(this,e)),r.addEventListener(n.ChildTargetManager.Events.TargetInfoChanged,this.#Z.bind(this,e))]),await Promise.all(r.childTargets().map(this.#P))};#I=async t=>{const r=this.#C.get(t);r&&e.EventTarget.removeEventListeners(r),await this.#ee(t),await this.#te(t)};async#Y(e){const t=e.model(n.RuntimeModel.RuntimeModel);a.assertNotNullOrUndefined(t),this.#k.set(e,[t.addEventListener(n.RuntimeModel.Events.BindingCalled,this.#z.bind(this,e))]),await Promise.all(Object.values(Qe).map((e=>t.addBinding({name:e,executionContextName:o.DEVTOOLS_RECORDER_WORLD_NAME}))))}async#te(t){await Promise.all(Object.values(Qe).map((e=>t.runtimeAgent().invoke_removeBinding({name:e}))));const r=this.#k.get(t);r&&e.EventTarget.removeEventListeners(r)}async#G(e){const t=`\n      ${await o.InjectedScript.get()};DevToolsRecorder.startRecording({getAccessibleName, getAccessibleRole}, {\n        debug: ${o.isDebugBuild},\n        allowUntrustedEvents: ${Ze.#X},\n        selectorTypesToRecord: ${JSON.stringify(this.#R)},\n        selectorAttribute: ${this.#N.selectorAttribute?Ge(this.#N.selectorAttribute):void 0},\n        stopShortcuts: ${JSON.stringify(this.#J())},\n      });\n    `,[{identifier:r}]=await Promise.all([e.pageAgent().invoke_addScriptToEvaluateOnNewDocument({source:t,worldName:o.DEVTOOLS_RECORDER_WORLD_NAME,includeCommandLineAPI:!0}),Xe(o.DEVTOOLS_RECORDER_WORLD_NAME,e,t)]);this.#T.set(e.id(),r)}async#ee(e){const t=this.#T.get(e.id());t&&(await e.pageAgent().invoke_removeScriptToEvaluateOnNewDocument({identifier:t}),await(async(e,t,r)=>{await Promise.all(t.map((t=>Xe(e,t,r))))})(o.DEVTOOLS_RECORDER_WORLD_NAME,[...this.#b.values()],"DevToolsRecorder.stopRecording()"))}#q(e,t){this.#re({type:"targetCreated",event:t,target:e})}#Q(e,t){const r=this.#b.get(t.data);r&&this.#re({type:"targetClosed",event:t,target:r})}#Z(e,t){const r=this.#b.get(t.data.targetId)||e;this.#re({type:"targetInfoChanged",event:t,target:r})}#re(e){return this.#M.run((async()=>{try{switch(o.isDebugBuild&&console.time(`Processing ${JSON.stringify(e)}`),e.type){case"targetClosed":await this.#ne(e);break;case"targetCreated":await this.#ie(e);break;case"targetInfoChanged":await this.#ae(e)}o.isDebugBuild&&console.timeEnd(`Processing ${JSON.stringify(e)}`)}catch(e){console.error("Error happened while processing recording events: ",e.message,e.stack)}}))}async#ie(e){if("page"!==e.event.data.type&&"iframe"!==e.event.data.type)return;await this.#m.invoke_attachToTarget({targetId:e.event.data.targetId,flatten:!0});const t=n.TargetManager.TargetManager.instance().targets().find((t=>t.id()===e.event.data.targetId));if(!t)throw new Error("Could not find target.");await this.#P(t),window.dispatchEvent(new Event("recorderAttachedToTarget"))}async#ne(e){const t=this.#x.get(e.target.id());t&&(delete t.assertedEvents,this.#x.delete(e.target.id()))}async#oe(e,t){const r=await e.navigationHistory();if(!r)return!1;const n=r.entries[r.currentIndex];if(this.#S.get(t.id())===n.id)return!0;this.#S.set(t.id(),n.id);const i=this.#E.get(t.id())||[];if(this.#E.set(t.id(),r.entries.map((e=>e.id))),qe.has(n.transitionType)||i.includes(n.id)){const e=this.#x.get(t.id());e&&(delete e.assertedEvents,this.#x.delete(t.id())),this.#O({type:c.Navigate,url:n.url,assertedEvents:[{type:l.Navigation,url:n.url,title:n.title}]})}else this.#K(t,{type:l.Navigation,url:n.url,title:n.title});return!0}async#ae(e){if("page"!==e.event.data.type&&"iframe"!==e.event.data.type)return;const t=e.target,r=t.model(n.ResourceTreeModel.ResourceTreeModel);if(!r)throw new Error("ResourceTreeModel is missing in handleNavigation");if("iframe"===e.event.data.type)this.#K(t,{type:l.Navigation,url:e.event.data.url,title:await this.#$(t)});else if("page"===e.event.data.type){if(await this.#oe(r,t))return;await this.#se(r,500),this.#K(t,{type:l.Navigation,url:e.event.data.url,title:await this.#$(t)})}}async#se(e,t){let r=()=>Promise.resolve();const i=new Promise((e=>{r=e})),a=()=>{e.removeEventListener(n.ResourceTreeModel.Events.DOMContentLoaded,a),r()};e.addEventListener(n.ResourceTreeModel.Events.DOMContentLoaded,a),await Promise.any([i,new Promise((r=>setTimeout((()=>{e.removeEventListener(n.ResourceTreeModel.Events.DOMContentLoaded,a),r()}),t)))])}}var et=Object.freeze({__proto__:null,RecordingSession:Ze}),tt=Object.freeze({__proto__:null});let rt=null;class nt{next(){return crypto.randomUUID()}}class it{#ce;#M=new e.Mutex.Mutex;#le=new nt;constructor(){this.#ce=e.Settings.Settings.instance().createSetting("recorder_recordings_ng",[])}clearForTest(){this.#ce.set([]),this.#le=new nt}setIdGeneratorForTest(e){this.#le=e}async saveRecording(e){const t=await this.#M.acquire();try{const r=await this.#ce.forceGet(),n={storageName:this.#le.next(),flow:e};return r.push(n),this.#ce.set(r),n}finally{t()}}async updateRecording(e,t){const r=await this.#M.acquire();try{const n=await this.#ce.forceGet(),i=n.find((t=>t.storageName===e));if(!i)throw new Error("No recording is found during updateRecording");return i.flow=t,this.#ce.set(n),i}finally{r()}}async deleteRecording(e){const t=await this.#M.acquire();try{const r=await this.#ce.forceGet();this.#ce.set(r.filter((t=>t.storageName!==e)))}finally{t()}}getRecording(e){return this.#ce.get().find((t=>t.storageName===e))}getRecordings(){return this.#ce.get()}static instance(){return rt||(rt=new it),rt}}var at=Object.freeze({__proto__:null,RecordingStorage:it});let ot=null;class st{#de;#ue;#pe;constructor(t=52428800){this.#de=e.Settings.Settings.instance().createSetting("recorder_screenshots",[]),this.#ue=this.#ge(),this.#pe=t}clear(){this.#de.set([]),this.#ue=new Map}getScreenshotForSection(e,t){const r=this.#ue.get(this.#he(e,t));return r?(this.#fe(r),r.data):null}storeScreenshotForSection(e,t,r){const n={recordingName:e,index:t,data:r};this.#ue.set(this.#he(e,t),n),this.#fe(n)}deleteScreenshotsForRecording(e){for(const[t,r]of this.#ue)r.recordingName===e&&this.#ue.delete(t);this.#fe()}#he(e,t){return`${e}:${t}`}#ge(){const e=new Map,t=this.#de.get();for(const r of t)e.set(this.#he(r.recordingName,r.index),r);return e}#fe(e){if(e){const t=this.#he(e.recordingName,e.index);this.#ue.delete(t),this.#ue.set(t,e)}const t=[];let r=0;for(const[e,n]of Array.from(this.#ue.entries()).reverse())r<this.#pe?(r+=n.data.length,t.push(n)):this.#ue.delete(e);this.#de.set(t.reverse())}static instance(e={forceNew:null,maxStorageSize:52428800}){const{forceNew:t,maxStorageSize:r}=e;return ot&&!t||(ot=new st(r)),ot}}var ct=Object.freeze({__proto__:null,ScreenshotStorage:st});async function lt(e){const t=new Image,r=new Promise((e=>{t.onload=e}));t.src=e,await r;const n=document.createElement("canvas"),i=n.getContext("2d");if(!i)throw new Error("Could not create context.");const a=t.width/t.height;n.width=160,n.height=Math.min(240,160/a);const o=await createImageBitmap(t,{resizeWidth:160,resizeQuality:"high"});return i.drawImage(o,0,0),n.toDataURL("image/png")}var dt=Object.freeze({__proto__:null,resizeScreenshot:lt,takeScreenshot:async function(){const e=await async function(){const e=n.TargetManager.TargetManager.instance().primaryPageTarget();if(!e)throw new Error("Could not find main target");const{data:t}=await e.pageAgent().invoke_captureScreenshot({});return"data:image/png;base64,"+t}();return await lt(e)}});function ut(e){const t=e.assertedEvents?.find((e=>"navigation"===e.type));return"navigate"===e.type?{title:t?.title||"",url:e.url,steps:[],causingStep:e}:t?{title:t.title||"",url:t.url||"",steps:[]}:null}var pt=Object.freeze({__proto__:null,buildSections:function(e){let t=null;const r=[];for(const n of e){if(t)t.steps.push(n);else{if("navigate"===n.type){t=ut(n);continue}t={title:"Current page",url:"",steps:[n]}}const e=ut(n);e&&(t&&r.push(t),t=e)}return!t||r.length&&!t.steps.length||r.push(t),r}});var gt=Object.freeze({__proto__:null,getTooltipForActions:function(e,t){let n=e;const i=r.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction(t);for(const e of i)n+=` - ${e.title()}`;return n}});export{d as ConverterIds,Pe as RecorderSettings,_e as RecorderShortcutHelper,je as RecordingPlayer,et as RecordingSession,tt as RecordingSettings,at as RecordingStorage,Ye as SDKUtils,Le as Schema,ze as SchemaUtils,ct as ScreenshotStorage,dt as ScreenshotUtils,pt as Section,gt as Tooltip};

package/dist/third-party/front_end/panels/recorder/recorder-actions.js

@@ -0,0 +1 @@
+