chrome-devtools-frontend/front_end/ui/components/docs/panel_introduction_steps/basic.ts

Chrome DevTools UI

// Copyright 2022 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import '../../../components/panel_introduction_steps/panel_introduction_steps.js';

import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
import * as Lit from '../../../lit/lit.js';
import * as ComponentHelpers from '../../helpers/helpers.js';

const {html} = Lit;

await ComponentHelpers.ComponentServerSetup.setup();
await FrontendHelpers.initializeGlobalVars();

const container = document.getElementById('container');
if (container) {
  Lit.render(
      html`
<devtools-panel-introduction-steps>
<span slot="title">Get actionable insights on your website's performance</span>
<span slot="step-1">Record or import a trace into the Performance Insights panel</span>
<span slot="step-2">Get an overview of your page’s runtime performance</span>
<span slot="step-3">Identify improvements to your performance via a list of actionable insights</span>
</devtools-panel-introduction-steps>
                 `,
      container, {host: this});
}