chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

package/front_end/ui/legacy/components/settings_ui/SettingsUI.ts

@@ -0,0 +1,125 @@
+// Copyright 2014 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import * as Common from '../../../../core/common/common.js';
+import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
+import * as Settings from '../../../components/settings/settings.js';
+import * as VisualLogging from '../../../visual_logging/visual_logging.js';
+import * as UI from '../../legacy.js';
+
+const UIStrings = {
+  /**
+   * @description Note when a setting change will require the user to reload DevTools
+   */
+  srequiresReload: '*Requires reload',
+  /**
+   * @description Message to display if a setting change requires a reload of DevTools
+   */
+  oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/settings_ui/SettingsUI.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export function createSettingCheckbox(
+    name: Common.UIString.LocalizedString, setting: Common.Settings.Setting<boolean>,
+    tooltip?: string): UI.UIUtils.CheckboxLabel {
+  const label = UI.UIUtils.CheckboxLabel.create(name, undefined, undefined, setting.name);
+  label.name = name;
+  UI.UIUtils.bindCheckbox(label, setting);
+  if (tooltip) {
+    UI.Tooltip.Tooltip.install(label, tooltip);
+  }
+  return label;
+}
+
+const createSettingSelect = function(
+    name: string, options: Common.Settings.SimpleSettingOption[], requiresReload: boolean|null,
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement {
+  const container = document.createElement('div');
+  const settingSelectElement = container.createChild('p');
+  settingSelectElement.classList.add('settings-select');
+  const label = settingSelectElement.createChild('label');
+  const select = settingSelectElement.createChild('select');
+  label.textContent = name;
+  if (subtitle) {
+    container.classList.add('chrome-select-label');
+    label.createChild('p').textContent = subtitle;
+  }
+  select.setAttribute('jslog', `${VisualLogging.dropDown().track({change: true}).context(setting.name)}`);
+  UI.ARIAUtils.bindLabelToControl(label, select);
+
+  for (const option of options) {
+    if (option.text && typeof option.value === 'string') {
+      select.add(
+          UI.UIUtils.createOption(option.text, option.value, Platform.StringUtilities.toKebabCase(option.value)));
+    }
+  }
+
+  let reloadWarning: HTMLElement|(Element | null) = (null as Element | null);
+  if (requiresReload) {
+    reloadWarning = container.createChild('p', 'reload-warning hidden');
+    reloadWarning.textContent = i18nString(UIStrings.srequiresReload);
+    UI.ARIAUtils.markAsAlert(reloadWarning);
+  }
+
+  const {deprecation} = setting;
+  if (deprecation) {
+    const warning = new Settings.SettingDeprecationWarning.SettingDeprecationWarning();
+    warning.data = deprecation;
+    label.appendChild(warning);
+  }
+
+  setting.addChangeListener(settingChanged);
+  settingChanged();
+  select.addEventListener('change', selectChanged, false);
+  return container;
+
+  function settingChanged(): void {
+    const newValue = setting.get();
+    for (let i = 0; i < options.length; i++) {
+      if (options[i].value === newValue) {
+        select.selectedIndex = i;
+      }
+    }
+    select.disabled = setting.disabled();
+  }
+
+  function selectChanged(): void {
+    // Don't use event.target.value to avoid conversion of the value to string.
+    setting.set(options[select.selectedIndex].value);
+    if (reloadWarning) {
+      reloadWarning.classList.remove('hidden');
+      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+          i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+    }
+  }
+};
+
+export const createControlForSetting = function(
+    setting: Common.Settings.Setting<unknown>, subtitle?: string): HTMLElement|null {
+  const uiTitle = setting.title();
+  switch (setting.type()) {
+    case Common.Settings.SettingType.BOOLEAN: {
+      const component = new Settings.SettingCheckbox.SettingCheckbox();
+      component.data = {
+        setting: setting as Common.Settings.Setting<boolean>,
+      };
+      component.onchange = () => {
+        if (setting.reloadRequired()) {
+          UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+              i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+        }
+      };
+      return component;
+    }
+    case Common.Settings.SettingType.ENUM:
+      return createSettingSelect(uiTitle, setting.options(), setting.reloadRequired(), setting, subtitle);
+    default:
+      console.error('Invalid setting type: ' + setting.type());
+      return null;
+  }
+};

package/front_end/ui/legacy/components/settings_ui/settings_ui.ts

@@ -0,0 +1,8 @@
+
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as SettingsUI from './SettingsUI.js';
+
+export {SettingsUI};

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -919,7 +919,7 @@ export class LinkContextMenuProvider implements UI.ContextMenu.Provider<Node> {
 
 let linkHandlerSettingUIInstance: LinkHandlerSettingUI;
 
-export class LinkHandlerSettingUI implements UI.SettingsUI.SettingUI {
+export class LinkHandlerSettingUI {
   private element: HTMLSelectElement;
 
   private constructor() {
@@ -960,8 +960,14 @@ export class LinkHandlerSettingUI implements UI.SettingsUI.SettingUI {
     Linkifier.linkHandlerSetting().set(value);
   }
 
-  settingElement(): Element|null {
-    return UI.SettingsUI.createCustomSetting(i18nString(UIStrings.linkHandling), this.element);
+  settingElement(): Element {
+    const p = document.createElement('p');
+    p.classList.add('settings-select');
+    const label = p.createChild('label');
+    label.textContent = i18nString(UIStrings.linkHandling);
+    UI.ARIAUtils.bindLabelToControl(label, this.element);
+    p.appendChild(this.element);
+    return p;
   }
 }
 

package/front_end/ui/legacy/legacy.ts

@@ -33,7 +33,6 @@ import * as ReportView from './ReportView.js';
 import * as ResizerWidget from './ResizerWidget.js';
 import * as RootView from './RootView.js';
 import * as SearchableView from './SearchableView.js';
-import * as SettingsUI from './SettingsUI.js';
 import * as ShortcutRegistry from './ShortcutRegistry.js';
 import * as SoftContextMenu from './SoftContextMenu.js';
 import * as SoftDropDown from './SoftDropDown.js';
@@ -85,7 +84,6 @@ export {
   ResizerWidget,
   RootView,
   SearchableView,
-  SettingsUI,
   ShortcutRegistry,
   SoftContextMenu,
   SoftDropDown,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -681,6 +681,7 @@ export const knownContextValues = new Set([
   'ca',
   'cache-control',
   'cache-disabled',
+  'cache-disabled-documentation',
   'cache-disabled-true',
   'cache-storage',
   'cache-storage-data',
@@ -2647,6 +2648,7 @@ export const knownContextValues = new Set([
   'network.clear',
   'network.config',
   'network.enable-remote-file-loading',
+  'network.enable-remote-file-loading-documentation',
   'network.enable-request-blocking',
   'network.group-by-frame',
   'network.group-by-frame-false',
@@ -3839,7 +3841,7 @@ export const knownContextValues = new Set([
   'timeline.enable',
   'timeline.export-trace-options',
   'timeline.export-trace-options.annotations-checkbox',
-  'timeline.export-trace-options.script-content-checkbox',
+  'timeline.export-trace-options.resource-content-checkbox',
   'timeline.export-trace-options.should-compress-checkbox',
   'timeline.export-trace-options.source-maps-checkbox',
   'timeline.extension',
@@ -4128,6 +4130,7 @@ export const knownContextValues = new Set([
   'warning',
   'wasm',
   'wasm-auto-stepping',
+  'wasm-auto-stepping-documentation',
   'wasm-auto-stepping-false',
   'watch',
   'watch-test-expression',

package/mcp/mcp.ts

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * IMPORTANT! Make sure that any class that is exported here has related unit
+ * tests added to foundation_unittests. See front_end/core/i18n/BUILD.gn as an
+ * example.
+ */
 export * as I18n from '../front_end/core/i18n/i18n.js';
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export {

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1536371"
+  "version": "1.0.1537860"
 }

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatterBounds.snapshot.txt

@@ -1,4 +0,0 @@
-Title: PerformanceTraceFormatterBounds serializeBounds works
-Content:
-{min: 1, max: 2}
-=== end content

package/front_end/models/trace/lantern/testing/MetricTestUtils.ts

@@ -1,62 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-// Unsure why this lint is failing, given `lantern/metrics/SpeedIndex.test.ts` does the same
-// and is fine. Maybe `*.test.*` files are excluded from this rule?
-// eslint-disable-next-line @devtools/es-modules-import
-import * as TraceLoader from '../../../../testing/TraceLoader.js';
-import * as Trace from '../../trace.js';
-import * as Lantern from '../lantern.js';
-
-function toLanternTrace(traceEvents: readonly Trace.Types.Events.Event[]): Lantern.Types.Trace {
-  return {
-    traceEvents: traceEvents as unknown as Lantern.Types.TraceEvent[],
-  };
-}
-
-async function runTraceProcessor(context: Mocha.Suite|Mocha.Context, trace: Lantern.Types.Trace) {
-  TraceLoader.TraceLoader.setTestTimeout(context);
-
-  const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
-  await processor.parse(trace.traceEvents as Trace.Types.Events.Event[], {isCPUProfile: false, isFreshRecording: true});
-  if (!processor.data) {
-    throw new Error('No data');
-  }
-  return processor.data;
-}
-
-async function getComputationDataFromFixture(context: Mocha.Suite|Mocha.Context, {trace, settings, url}: {
-  trace: Lantern.Types.Trace,
-  settings?: Lantern.Types.Simulation.Settings,
-  url?: Lantern.Types.Simulation.URL,
-}) {
-  settings = settings ?? {} as Lantern.Types.Simulation.Settings;
-  if (!settings.throttlingMethod) {
-    settings.throttlingMethod = 'simulate';
-  }
-  const data = await runTraceProcessor(context, trace);
-  const requests = Trace.LanternComputationData.createNetworkRequests(trace, data);
-  const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
-  if (!networkAnalysis) {
-    throw new Error('no networkAnalysis');
-  }
-
-  const frameId = data.Meta.mainFrameId;
-  const navigationId = data.Meta.mainFrameNavigations[0].args.data?.navigationId;
-  if (!navigationId) {
-    throw new Error('no navigation id found');
-  }
-
-  return {
-    simulator: Lantern.Simulation.Simulator.createSimulator({...settings, networkAnalysis}),
-    graph: Trace.LanternComputationData.createGraph(requests, trace, data, url),
-    processedNavigation: Trace.LanternComputationData.createProcessedNavigation(data, frameId, navigationId),
-  };
-}
-
-export {
-  getComputationDataFromFixture,
-  runTraceProcessor as runTrace,
-  toLanternTrace,
-};

package/front_end/models/trace/lantern/testing/testing.ts

@@ -1,5 +0,0 @@
-// Copyright 2024 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-export * from './MetricTestUtils.js';

package/front_end/ui/components/docs/breadcrumbs_perf/initial-breadcrumb-perf.html

@@ -1,20 +0,0 @@
-<!--
-  Copyright 2020 The Chromium Authors
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Breadcrumb example</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./initial-breadcrumb-perf.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/breadcrumbs_perf/initial-breadcrumb-perf.ts

@@ -1,25 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Trace from '../../../../../front_end/models/trace/trace.js';
-import * as TimelineComponents from '../../../../../front_end/panels/timeline/components/components.js';
-
-const breadcrumbsUI = new TimelineComponents.BreadcrumbsUI.BreadcrumbsUI();
-document.getElementById('container')?.appendChild(breadcrumbsUI);
-
-const traceWindow: Trace.Types.Timing.TraceWindowMicro = {
-  min: Trace.Types.Timing.Micro(3),
-  max: Trace.Types.Timing.Micro(9),
-  range: Trace.Types.Timing.Micro(6),
-};
-
-const breadcrumb: Trace.Types.File.Breadcrumb = {
-  window: traceWindow,
-  child: null,
-};
-
-breadcrumbsUI.data = {
-  initialBreadcrumb: breadcrumb,
-  activeBreadcrumb: breadcrumb,
-};

package/front_end/ui/components/docs/breadcrumbs_perf/nested-breadcrumbs-perf.html

@@ -1,20 +0,0 @@
-<!--
-  Copyright 2020 The Chromium Authors
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Breadcrumb example</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./nested-breadcrumbs-perf.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/breadcrumbs_perf/nested-breadcrumbs-perf.ts

@@ -1,36 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Trace from '../../../../../front_end/models/trace/trace.js';
-import * as TimelineComponents from '../../../../../front_end/panels/timeline/components/components.js';
-
-const breadcrumbsUI = new TimelineComponents.BreadcrumbsUI.BreadcrumbsUI();
-document.getElementById('container')?.appendChild(breadcrumbsUI);
-
-const traceWindow2: Trace.Types.Timing.TraceWindowMicro = {
-  min: Trace.Types.Timing.Micro(4),
-  max: Trace.Types.Timing.Micro(8),
-  range: Trace.Types.Timing.Micro(4),
-};
-
-const traceWindow: Trace.Types.Timing.TraceWindowMicro = {
-  min: Trace.Types.Timing.Micro(3),
-  max: Trace.Types.Timing.Micro(9),
-  range: Trace.Types.Timing.Micro(6),
-};
-
-const breadcrumb2: Trace.Types.File.Breadcrumb = {
-  window: traceWindow2,
-  child: null,
-};
-
-const breadcrumb: Trace.Types.File.Breadcrumb = {
-  window: traceWindow,
-  child: breadcrumb2,
-};
-
-breadcrumbsUI.data = {
-  initialBreadcrumb: breadcrumb,
-  activeBreadcrumb: breadcrumb,
-};

package/front_end/ui/components/docs/button/basic.html

@@ -1,44 +0,0 @@
-<!--
-  Copyright 2021 The Chromium Authors
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Button example</title>
-    <style>
-      body {
-        overflow: auto  !important; /* stylelint-disable-line declaration-no-important */
-      }
-
-      div {
-        width: 500px;
-        padding: 25px;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <header>Buttons</header>
-    <div id="buttons"></div>
-    <header>Primary buttons</header>
-    <div id="primary-buttons"></div>
-    <header>Tonal buttons</header>
-    <div id="tonal-buttons"></div>
-    <header>Outlined buttons</header>
-    <div id="outlined-buttons"></div>
-    <header>Text buttons</header>
-    <div id="text-buttons"></div>
-    <header>Icon buttons</header>
-    <div id="icon-buttons"></div>
-    <header>Floating buttons</header>
-    <div id="floating-buttons"></div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/button/basic.ts

@@ -1,175 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as Buttons from '../../buttons/buttons.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-
-const BUTTONS_SECTION = '#buttons';
-const PRIMARY_SECTION = '#primary-buttons';
-const TONAL_SECTION = '#tonal-buttons';
-const OUTLINED_SECTION = '#outlined-buttons';
-const TEXT_SECTION = '#text-buttons';
-const ICON_SECTION = '#icon-buttons';
-const FLOATING_SECTION = '#floating-buttons';
-
-const DEFAULT_TEXT = 'Default';
-const WITH_ICON_TEXT = 'With icon';
-const MICRO_TEXT = 'Micro';
-
-function append(section: string, element: HTMLElement): void {
-  document.querySelector(section)?.appendChild(element);
-}
-
-// Buttons
-{
-  const primaryButton = new Buttons.Button.Button();
-  primaryButton.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-  };
-  primaryButton.innerText = 'Primary button';
-  append(BUTTONS_SECTION, primaryButton);
-
-  const tonalButton = new Buttons.Button.Button();
-  tonalButton.data = {
-    variant: Buttons.Button.Variant.TONAL,
-  };
-  tonalButton.innerText = 'Tonal button';
-  append(BUTTONS_SECTION, tonalButton);
-
-  const outlinedButton = new Buttons.Button.Button();
-  outlinedButton.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-  };
-  outlinedButton.innerText = 'Outlined button';
-  append(BUTTONS_SECTION, outlinedButton);
-
-  const textButton = new Buttons.Button.Button();
-  textButton.data = {
-    variant: Buttons.Button.Variant.TEXT,
-  };
-  textButton.innerText = 'Text button';
-  append(BUTTONS_SECTION, textButton);
-
-  const iconButton = new Buttons.Button.Button();
-  iconButton.data = {
-    variant: Buttons.Button.Variant.ICON,
-    iconName: 'gear',
-  };
-  append(BUTTONS_SECTION, iconButton);
-}
-
-// Primary buttons
-{
-  const primaryDefault = new Buttons.Button.Button();
-  primaryDefault.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-  };
-  primaryDefault.innerText = DEFAULT_TEXT;
-  append(PRIMARY_SECTION, primaryDefault);
-
-  const primaryWithIcon = new Buttons.Button.Button();
-  primaryWithIcon.innerText = WITH_ICON_TEXT;
-  primaryWithIcon.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-    iconName: 'plus',
-  };
-  append(PRIMARY_SECTION, primaryWithIcon);
-}
-
-// Tonal buttons
-{
-  const tonalDefault = new Buttons.Button.Button();
-  tonalDefault.data = {
-    variant: Buttons.Button.Variant.TONAL,
-  };
-  tonalDefault.innerText = DEFAULT_TEXT;
-  append(TONAL_SECTION, tonalDefault);
-
-  const tonalWithIcon = new Buttons.Button.Button();
-  tonalWithIcon.innerText = WITH_ICON_TEXT;
-
-  tonalWithIcon.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-    iconName: 'plus',
-  };
-  append(TONAL_SECTION, tonalWithIcon);
-}
-
-// Outlined buttons
-{
-  const outlinedDefault = new Buttons.Button.Button();
-  outlinedDefault.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-  };
-  outlinedDefault.innerText = DEFAULT_TEXT;
-  append(OUTLINED_SECTION, outlinedDefault);
-
-  const outlinedWithIcon = new Buttons.Button.Button();
-  outlinedWithIcon.innerText = WITH_ICON_TEXT;
-  outlinedWithIcon.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-    iconName: 'plus',
-  };
-  append(OUTLINED_SECTION, outlinedWithIcon);
-
-  const outlinedMicro = new Buttons.Button.Button();
-  outlinedMicro.innerText = MICRO_TEXT;
-  outlinedMicro.data = {
-    variant: Buttons.Button.Variant.OUTLINED,
-    size: Buttons.Button.Size.MICRO,
-  };
-  append(OUTLINED_SECTION, outlinedMicro);
-}
-
-// Text buttons
-{
-  const textDefault = new Buttons.Button.Button();
-  textDefault.innerText = DEFAULT_TEXT;
-  textDefault.data = {
-    variant: Buttons.Button.Variant.TEXT,
-  };
-  append(TEXT_SECTION, textDefault);
-
-  const textWithIcon = new Buttons.Button.Button();
-  textWithIcon.innerText = WITH_ICON_TEXT;
-
-  textWithIcon.data = {
-    variant: Buttons.Button.Variant.TEXT,
-    iconName: 'plus',
-  };
-  append(TEXT_SECTION, textWithIcon);
-}
-
-// Icon buttons
-{
-  const iconDefault = new Buttons.Button.Button();
-  iconDefault.data = {
-    variant: Buttons.Button.Variant.ICON,
-    iconName: 'gear',
-  };
-  append(ICON_SECTION, iconDefault);
-
-  const iconToggle = new Buttons.Button.Button();
-  iconToggle.data = {
-    variant: Buttons.Button.Variant.ICON_TOGGLE,
-    iconName: 'gear',
-    toggledIconName: 'gear',
-    toggled: true,
-    toggleType: Buttons.Button.ToggleType.PRIMARY,
-  };
-  const toggledWithLabel = document.createElement('span');
-  toggledWithLabel.textContent = '(Toggle)';
-  append(ICON_SECTION, iconToggle);
-  append(ICON_SECTION, toggledWithLabel);
-}
-
-// Floating buttons
-{
-  const floatingButton = Buttons.FloatingButton.create('smart-assistant', 'Ask AI!');
-  append(FLOATING_SECTION, floatingButton);
-}

package/front_end/ui/components/docs/radio_button/basic.html

@@ -1,23 +0,0 @@
-<!--
-  Copyright 2024 The Chromium Authors
-  Use of this source code is governed by a BSD-style license that can be
-  found in the LICENSE file.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Basic Radio Button example</title>
-  </head>
-  <body>
-
-    <div id="container">
-    </div>
-
-    <script type="module" src="./basic.js"></script>
-    <style>
-      fieldset { label { display: block; } }
-    </style>
-  </body>
-</html>