UNPKG

chrome-devtools-frontend

Version:
74 lines (63 loc) 2.54 kB
// Copyright 2022 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 * as ComponentHelpers from '../../../ui/components/helpers/helpers.js'; import * as LitHtml from '../../../ui/lit-html/lit-html.js'; import * as i18n from '../../../core/i18n/i18n.js'; import cssHintDetailsViewStyles from './cssHintDetailsView.css.js'; const UIStrings = { /** *@description Text for button that redirects to CSS property documentation. */ learnMore: 'Learn More', }; const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDetailsView.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); const {render, html, Directives} = LitHtml; interface Hint { getMessage(): string; getPossibleFixMessage(): string|null; getLearnMoreLink(): string|undefined; } export class CSSHintDetailsView extends HTMLElement { static readonly litTagName = LitHtml.literal`devtools-css-hint-details-view`; readonly #shadow = this.attachShadow({mode: 'open'}); readonly #authoringHint: Hint; constructor(authoringHint: Hint) { super(); this.#authoringHint = authoringHint; this.#shadow.adoptedStyleSheets = [cssHintDetailsViewStyles]; this.#render(); } #render(): void { const link = this.#authoringHint.getLearnMoreLink(); // clang-format off render(html` <div class="hint-popup-wrapper"> <div class="hint-popup-reason"> ${Directives.unsafeHTML(this.#authoringHint.getMessage())} </div> ${this.#authoringHint.getPossibleFixMessage() ? html` <div class="hint-popup-possible-fix"> ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())} ${link ? html` <x-link id="learn-more" href=${link} class="clickable underlined unbreakable-text"}> ${i18nString(UIStrings.learnMore)} </x-link> `: ''} </div> ` : ''} </div> `, this.#shadow, { host: this, }); // clang-format on } } ComponentHelpers.CustomElements.defineComponent('devtools-css-hint-details-view', CSSHintDetailsView); declare global { // eslint-disable-next-line @typescript-eslint/no-unused-vars interface HTMLElementTagNameMap { 'devtools-css-hint-details-view': CSSHintDetailsView; } }