import"../../../ui/legacy/legacy.js";import*as i18n from"../../../core/i18n/i18n.js";import*as Buttons from"../../../ui/components/buttons/buttons.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as PanelFeedback from"../../../ui/components/panel_feedback/panel_feedback.js";import*as PanelIntroductionSteps from"../../../ui/components/panel_introduction_steps/panel_introduction_steps.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import startViewStyles from"./startView.css.js";const UIStrings={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"},str_=i18n.i18n.registerUIStrings("panels/recorder/components/StartView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export const FEEDBACK_URL="https://goo.gle/recorder-feedback";const DOC_URL="https://developer.chrome.com/docs/devtools/recorder";export class CreateRecordingEvent extends Event{static eventName="createrecording";constructor(){super(CreateRecordingEvent.eventName)}}export class StartView extends HTMLElement{static litTagName=LitHtml.literal`devtools-start-view`;#e=this.attachShadow({mode:"open"});connectedCallback(){this.#e.adoptedStyleSheets=[startViewStyles],ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#n(){this.dispatchEvent(new CreateRecordingEvent)}#t=()=>{LitHtml.render(LitHtml.html`
        <div class="wrapper">
          <${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
            <span slot="title">${i18nString(UIStrings.header)}</span>
            <span slot="step-1">${i18nString(UIStrings.step1)}</span>
            <span slot="step-2">${i18nString(UIStrings.step2)}</span>
            <span slot="step-3">${i18nString(UIStrings.step3)}</span>
          </${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
          <div class="fit-content">
            <${Buttons.Button.Button.litTagName} .variant=${"primary"} @click=${this.#n}>
              ${i18nString(UIStrings.createRecording)}
            </${Buttons.Button.Button.litTagName}>
          </div>
          <${PanelFeedback.PanelFeedback.PanelFeedback.litTagName} .data=${{feedbackUrl:FEEDBACK_URL,quickStartUrl:DOC_URL,quickStartLinkText:i18nString(UIStrings.quickStart)}}>
          </${PanelFeedback.PanelFeedback.PanelFeedback.litTagName}>
          <div class="align-right">
            <${PanelFeedback.FeedbackButton.FeedbackButton.litTagName} .data=${{feedbackUrl:FEEDBACK_URL}}>
            </${PanelFeedback.FeedbackButton.FeedbackButton.litTagName}>
          </div>
        </div>
      `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-start-view",StartView);