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 LitHtml from"../../../ui/lit-html/lit-html.js";import*as Extensions from"../extensions/extensions.js";import*as IconButton from"../../../ui/components/icon_button/icon_button.js";import extensionViewStyles from"./extensionView.css.js";const UIStrings={closeView:"Close",extension:"Content provided by a browser extension"},str_=i18n.i18n.registerUIStrings("panels/recorder/components/ExtensionView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ClosedEvent extends Event{static eventName="recorderextensionviewclosed";constructor(){super(ClosedEvent.eventName,{bubbles:!0,composed:!0})}}const extensionIcon=new URL("../images/extension_icon.svg",import.meta.url).toString();export class ExtensionView extends HTMLElement{static litTagName=LitHtml.literal`devtools-recorder-extension-view`;#e=this.attachShadow({mode:"open"});#t;connectedCallback(){this.#e.adoptedStyleSheets=[extensionViewStyles],this.#n()}disconnectedCallback(){this.#t&&Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#t.id).hide()}set descriptor(e){this.#t=e,this.#n(),Extensions.ExtensionManager.ExtensionManager.instance().getView(e.id).show()}#s(){this.dispatchEvent(new ClosedEvent)}#n(){if(!this.#t)return;const e=Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#t.id).frame();LitHtml.render(LitHtml.html`
        <div class="extension-view">
          <header>
            <div class="title">
              <${IconButton.Icon.Icon.litTagName}
                class="icon"
                title=${i18nString(UIStrings.extension)}
                .data=${{iconPath:extensionIcon,color:"var(--sys-color-secondary)"}}>
              </${IconButton.Icon.Icon.litTagName}>
              ${this.#t.title}
            </div>
            <${Buttons.Button.Button.litTagName}
              title=${i18nString(UIStrings.closeView)}
              .data=${{variant:"round",size:"TINY",iconName:"cross"}}
              @click=${this.#s}
            ></${Buttons.Button.Button.litTagName}>
          </header>
          <main>
            ${e}
          <main>
      </div>
    `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-recorder-extension-view",ExtensionView);