// Copyright 2019 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import '../../ui/components/panel_feedback/panel_feedback.js'; import '../../ui/components/panel_introduction_steps/panel_introduction_steps.js'; import * as i18n from '../../core/i18n/i18n.js'; import type * as Platform from '../../core/platform/platform.js'; import * as Buttons from '../../ui/components/buttons/buttons.js'; import * as UI from '../../ui/legacy/legacy.js'; import {html, render} from '../../ui/lit/lit.js'; import cssOverviewStartViewStyles from './cssOverviewStartView.css.js'; const UIStrings = { /** * @description Label for the capture button in the CSS overview panel */ captureOverview: 'Capture overview', /** * @description Header for the summary of CSS overview */ identifyCSSImprovements: 'Identify potential CSS improvements', /** * @description First point of the summarized features of CSS overview */ capturePageCSSOverview: 'Capture an overview of your page’s CSS', /** * @description Second point of the summarized features of CSS overview */ identifyCSSImprovementsWithExampleIssues: 'Identify potential CSS improvements (e.g. low contrast issues, unused declarations, color or font mismatches)', /** * @description Third point of the summarized features of CSS overview */ locateAffectedElements: 'Locate the affected elements in the Elements panel', /** * @description Title of the link to the quick start video and documentation to CSS overview panel */ quickStartWithCSSOverview: 'Quick start: get started with the new CSS overview panel', } as const; const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewStartView.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback' as Platform.DevToolsPath.UrlString; const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview' as Platform.DevToolsPath.UrlString; interface ViewInput { onStartCapture: () => void; } type View = (input: ViewInput, output: object, target: HTMLElement) => void; const DEFAULT_VIEW: View = (input, output, target) => { // Disabled until https://crbug.com/1079231 is fixed. // clang-format off render(html`

${i18nString(UIStrings.identifyCSSImprovements)} ${i18nString(UIStrings.capturePageCSSOverview)} ${i18nString(UIStrings.identifyCSSImprovementsWithExampleIssues)} ${i18nString(UIStrings.locateAffectedElements)}

${i18nString(UIStrings.captureOverview)}

`, target); // clang-format on }; export class CSSOverviewStartView extends UI.Widget.Widget { #view: View; onStartCapture = (): void => {}; constructor(element?: HTMLElement, view = DEFAULT_VIEW) { super(element, {useShadowDom: true, delegatesFocus: true}); this.#view = view; this.performUpdate(); } override performUpdate(): void { this.#view({onStartCapture: this.onStartCapture}, {}, this.contentElement); } }