| // Copyright 2023 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| 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 type * as PublicExtensions from '../../../models/extensions/extensions.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 = { |
| /** |
| * @description The button label that closes the panel that shows the extension content inside the Recorder panel. |
| */ |
| closeView: 'Close', |
| /** |
| * @description The label that indicates that the content shown is provided by a browser extension. |
| */ |
| extension: 'Content provided by a browser extension', |
| }; |
| const str_ = i18n.i18n.registerUIStrings( |
| 'panels/recorder/components/ExtensionView.ts', |
| UIStrings, |
| ); |
| const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); |
| |
| const closeIcon = new URL( |
| '../images/close_icon.svg', |
| import.meta.url, |
| ) |
| .toString(); |
| |
| declare global { |
| interface HTMLElementTagNameMap { |
| 'devtools-recorder-extension-view': ExtensionView; |
| } |
| interface HTMLElementEventMap { |
| recorderextensionviewclosed: ClosedEvent; |
| } |
| } |
| |
| export class ClosedEvent extends Event { |
| static readonly eventName = 'recorderextensionviewclosed'; |
| constructor() { |
| super(ClosedEvent.eventName, {bubbles: true, composed: true}); |
| } |
| } |
| |
| const extensionIcon = new URL( |
| '../images/extension_icon.svg', |
| import.meta.url, |
| ) |
| .toString(); |
| |
| export class ExtensionView extends HTMLElement { |
| static readonly litTagName = LitHtml.literal`devtools-recorder-extension-view`; |
| readonly #shadow = this.attachShadow({mode: 'open'}); |
| #descriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor; |
| |
| connectedCallback(): void { |
| this.#shadow.adoptedStyleSheets = [extensionViewStyles]; |
| this.#render(); |
| } |
| |
| disconnectedCallback(): void { |
| if (!this.#descriptor) { |
| return; |
| } |
| Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#descriptor.id).hide(); |
| } |
| |
| set descriptor( |
| descriptor: PublicExtensions.RecorderPluginManager.ViewDescriptor, |
| ) { |
| this.#descriptor = descriptor; |
| this.#render(); |
| Extensions.ExtensionManager.ExtensionManager.instance().getView(descriptor.id).show(); |
| } |
| |
| #closeView(): void { |
| this.dispatchEvent(new ClosedEvent()); |
| } |
| |
| #render(): void { |
| if (!this.#descriptor) { |
| return; |
| } |
| const iframe = Extensions.ExtensionManager.ExtensionManager.instance().getView(this.#descriptor.id).frame(); |
| // clang-format off |
| 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(--color-text-secondary)', |
| } as IconButton.Icon.IconData |
| }> |
| </${IconButton.Icon.Icon.litTagName}> |
| ${this.#descriptor.title} |
| </div> |
| <${Buttons.Button.Button.litTagName} |
| title=${i18nString(UIStrings.closeView)} |
| .data=${ |
| { |
| variant: Buttons.Button.Variant.ROUND, |
| size: Buttons.Button.Size.TINY, |
| iconUrl: closeIcon, |
| } as Buttons.Button.ButtonData |
| } |
| @click=${this.#closeView} |
| ></${Buttons.Button.Button.litTagName}> |
| </header> |
| <main> |
| ${iframe} |
| <main> |
| </div> |
| `, |
| this.#shadow, |
| { host: this }, |
| ); |
| // clang-format on |
| } |
| } |
| |
| ComponentHelpers.CustomElements.defineComponent( |
| 'devtools-recorder-extension-view', |
| ExtensionView, |
| ); |