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

Chrome DevTools UI

// 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 * as ComponentHelpers from '../../../../../front_end/ui/components/helpers/helpers.js';
import * as LitHtml from '../../../../../front_end/ui/lit-html/lit-html.js';
import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
import * as RecorderComponents from '../../../../panels/recorder/components/components.js';

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

const container = document.getElementById('container');
const throttlingIconUrl = new URL('../../../../panels/recorder/images/throttling_icon.svg', import.meta.url).toString();
const playIconUrl = new URL('../../../../images/play_icon.svg', import.meta.url).toString();

const items = [
  {
    value: 'performance',
    label: (): string => 'Performance panel',
    buttonIconUrl: throttlingIconUrl,
  },
  {
    value: 'performance_insights',
    label: (): string => 'Performance insights panel',
    buttonIconUrl: throttlingIconUrl,
  },
];

const replayItems = [
  {
    value: 'normal',
    buttonIconUrl: playIconUrl,
    buttonLabel: (): string => 'Replay',
    label: (): string => 'Normal (Default)',
  },
  {value: 'slow', buttonIconUrl: playIconUrl, buttonLabel: (): string => 'Slow replay', label: (): string => 'Slow'},
  {
    value: 'very_slow',
    buttonIconUrl: playIconUrl,
    buttonLabel: (): string => 'Very slow replay',
    label: (): string => 'Very slow',
  },
  {
    value: 'extremely_slow',
    buttonIconUrl: playIconUrl,
    buttonLabel: (): string => 'Extremely slow replay',
    label: (): string => 'Extremely slow',
  },
];

function litRender(template: LitHtml.TemplateResult): void {
  const div = document.createElement('div');
  div.style.width = '400px';
  div.style.display = 'flex';
  div.style.margin = '10px';
  div.style.flexDirection = 'row-reverse';
  container?.appendChild(div);
  LitHtml.render(template, div);  // eslint-disable-line
}

litRender(LitHtml.html`
    <${RecorderComponents.SelectButton.SelectButton.litTagName} .items=${items} .value=${items[0].value}></${
    RecorderComponents.SelectButton.SelectButton.litTagName}>`);
litRender(LitHtml.html`
    <${RecorderComponents.SelectButton.SelectButton.litTagName} .disabled=${true} .items=${items} .value=${
    items[0].value}></${RecorderComponents.SelectButton.SelectButton.litTagName}>`);
litRender(LitHtml.html`
    <${RecorderComponents.SelectButton.SelectButton.litTagName}
    .variant=${RecorderComponents.SelectButton.Variant.SECONDARY}
    .items=${replayItems}
    .value=${replayItems[0].value}></${RecorderComponents.SelectButton.SelectButton.litTagName}>`);
litRender(LitHtml.html`
    <${RecorderComponents.SelectButton.SelectButton.litTagName}
    .disabled=${true}
    .variant=${RecorderComponents.SelectButton.Variant.SECONDARY}
    .items=${replayItems}
    .value=${replayItems[2].value}></${RecorderComponents.SelectButton.SelectButton.litTagName}>`);