chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -1,7 +1,6 @@
 // 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.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
 
@@ -35,42 +34,149 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
 const {widgetConfig} = UI.Widget;
 
-export interface LinearMemoryValueInterpreterData {
-  value: ArrayBuffer;
-  valueTypes: Set<ValueType>;
+export interface ViewInput {
   endianness: Endianness;
-  valueTypeModes?: Map<ValueType, ValueTypeMode>;
+  buffer: ArrayBuffer;
+  valueTypes: Set<ValueType>;
+  valueTypeModes: Map<ValueType, ValueTypeMode>;
   memoryLength: number;
+  showSettings: boolean;
   onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void;
   onJumpToAddressClicked: (address: number) => void;
   onEndiannessChanged: (endianness: Endianness) => void;
   onValueTypeToggled: (type: ValueType, checked: boolean) => void;
+  onSettingsToggle: () => void;
 }
 
-export class LinearMemoryValueInterpreter extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
-  #onJumpToAddressClicked: (address: number) => void = () => {};
-  #onEndiannessChanged: (endianness: Endianness) => void = () => {};
-  #onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
+function renderEndiannessSetting(
+    onEndiannessChanged: (endianness: Endianness) => void, currentEndiannes: Endianness): Lit.TemplateResult {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+    return html`
+    <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
+      <select
+        jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
+        style="border: none;"
+        data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
+        ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
+            return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+                i18n.i18n.lockedString(endianness)}</option>`;
+        })}
+      </select>
+    </label>
+    `;
+  // clang-format on
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  render(html`
+    <style>${UI.inspectorCommonStyles}</style>
+    <style>${linearMemoryValueInterpreterStyles}</style>
+    <div class="value-interpreter">
+      <div class="settings-toolbar">
+        ${renderEndiannessSetting(input.onEndiannessChanged, input.endianness)}
+        <devtools-button data-settings="true" class="toolbar-button ${input.showSettings ? '' : 'disabled'}"
+            title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${input.onSettingsToggle}
+            jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({ click: true })}
+            .iconName=${'gear'}
+            .toggledIconName=${'gear-filled'}
+            .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+            .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+        ></devtools-button>
+      </div>
+      <span class="divider"></span>
+      <div>
+        ${input.showSettings ?
+      html`
+            <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
+              valueTypes: input.valueTypes, onToggle: input.onValueTypeToggled
+            })}>
+            </devtools-widget>` :
+      html`
+            <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
+              buffer: input.buffer,
+              valueTypes: input.valueTypes,
+              endianness: input.endianness,
+              valueTypeModes: input.valueTypeModes,
+              memoryLength: input.memoryLength,
+              onValueTypeModeChange: input.onValueTypeModeChange,
+              onJumpToAddressClicked: input.onJumpToAddressClicked,
+            })}>
+            </devtools-widget>`}
+      </div>
+    </div>
+  `,
+    target,
+  );
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+export class LinearMemoryValueInterpreter extends UI.Widget.Widget {
+  readonly #view: View;
   #endianness = Endianness.LITTLE;
   #buffer = new ArrayBuffer(0);
   #valueTypes = new Set<ValueType>();
   #valueTypeModeConfig = new Map<ValueType, ValueTypeMode>();
   #memoryLength = 0;
   #showSettings = false;
+  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
+  #onJumpToAddressClicked: (address: number) => void = () => {};
+  #onEndiannessChanged: (endianness: Endianness) => void = () => {};
+  #onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set buffer(value: ArrayBuffer) {
+    this.#buffer = value;
+    this.requestUpdate();
+  }
 
-  set data(data: LinearMemoryValueInterpreterData) {
-    this.#endianness = data.endianness;
-    this.#buffer = data.value;
-    this.#valueTypes = data.valueTypes;
-    this.#valueTypeModeConfig = data.valueTypeModes || new Map();
-    this.#memoryLength = data.memoryLength;
-    this.#onValueTypeModeChange = data.onValueTypeModeChange;
-    this.#onJumpToAddressClicked = data.onJumpToAddressClicked;
-    this.#onEndiannessChanged = data.onEndiannessChanged;
-    this.#onValueTypeToggled = data.onValueTypeToggled;
-    this.#render();
+  get buffer(): ArrayBuffer {
+    return this.#buffer;
+  }
+
+  set valueTypes(value: Set<ValueType>) {
+    this.#valueTypes = value;
+    this.requestUpdate();
+  }
+
+  get valueTypes(): Set<ValueType> {
+    return this.#valueTypes;
+  }
+
+  set valueTypeModes(value: Map<ValueType, ValueTypeMode>) {
+    this.#valueTypeModeConfig = value;
+    this.requestUpdate();
+  }
+
+  get valueTypeModes(): Map<ValueType, ValueTypeMode> {
+    return this.#valueTypeModeConfig;
+  }
+
+  set endianness(value: Endianness) {
+    this.#endianness = value;
+    this.requestUpdate();
+  }
+
+  get endianness(): Endianness {
+    return this.#endianness;
+  }
+
+  set memoryLength(value: number) {
+    this.#memoryLength = value;
+    this.requestUpdate();
+  }
+
+  get memoryLength(): number {
+    return this.#memoryLength;
   }
 
   get onValueTypeModeChange(): (type: ValueType, mode: ValueTypeMode) => void {
@@ -79,7 +185,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onValueTypeModeChange(value: (type: ValueType, mode: ValueTypeMode) => void) {
     this.#onValueTypeModeChange = value;
-    this.#render();
+    this.requestUpdate();
   }
 
   get onJumpToAddressClicked(): (address: number) => void {
@@ -88,7 +194,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onJumpToAddressClicked(value: (address: number) => void) {
     this.#onJumpToAddressClicked = value;
-    this.#render();
+    this.requestUpdate();
   }
 
   get onEndiannessChanged(): (endianness: Endianness) => void {
@@ -97,7 +203,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onEndiannessChanged(value: (endianness: Endianness) => void) {
     this.#onEndiannessChanged = value;
-    this.#render();
+    this.performUpdate();
   }
 
   get onValueTypeToggled(): (type: ValueType, checked: boolean) => void {
@@ -106,83 +212,28 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onValueTypeToggled(value: (type: ValueType, checked: boolean) => void) {
     this.#onValueTypeToggled = value;
-    this.#render();
-  }
-
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${UI.inspectorCommonStyles}</style>
-      <style>${linearMemoryValueInterpreterStyles}</style>
-      <div class="value-interpreter">
-        <div class="settings-toolbar">
-          ${this.#renderEndiannessSetting()}
-          <devtools-button data-settings="true" class="toolbar-button ${this.#showSettings ? '' : 'disabled'}"
-              title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.#onSettingsToggle}
-              jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({click: true})}
-              .iconName=${'gear'}
-              .toggledIconName=${'gear-filled'}
-              .toggleType=${Buttons.Button.ToggleType.PRIMARY}
-              .variant=${Buttons.Button.Variant.ICON_TOGGLE}
-          ></devtools-button>
-        </div>
-        <span class="divider"></span>
-        <div>
-          ${this.#showSettings ?
-            html`
-              <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
-                valueTypes: this.#valueTypes, onToggle: this.#onValueTypeToggled })}>
-              </devtools-widget>` :
-            html`
-              <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
-                  buffer: this.#buffer,
-                  valueTypes: this.#valueTypes,
-                  endianness: this.#endianness,
-                  valueTypeModes: this.#valueTypeModeConfig,
-                  memoryLength: this.#memoryLength,
-                  onValueTypeModeChange: this.#onValueTypeModeChange,
-                  onJumpToAddressClicked: this.#onJumpToAddressClicked,
-                })}>
-              </devtools-widget>`}
-        </div>
-      </div>
-    `,
-      this.#shadow, { host: this },
-    );
-    // clang-format on
+    this.performUpdate();
   }
 
-  #renderEndiannessSetting(): Lit.TemplateResult {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-    <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
-      <select
-        jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
-        style="border: none;"
-        data-endianness="true" @change=${(e: Event) => this.#onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
-        ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
-            return html`<option value=${endianness} .selected=${this.#endianness === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
-                i18n.i18n.lockedString(endianness)}</option>`;
-        })}
-      </select>
-    </label>
-    `;
-    // clang-format on
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      endianness: this.#endianness,
+      buffer: this.#buffer,
+      valueTypes: this.#valueTypes,
+      valueTypeModes: this.#valueTypeModeConfig,
+      memoryLength: this.#memoryLength,
+      showSettings: this.#showSettings,
+      onValueTypeModeChange: this.#onValueTypeModeChange,
+      onJumpToAddressClicked: this.#onJumpToAddressClicked,
+      onEndiannessChanged: this.#onEndiannessChanged,
+      onValueTypeToggled: this.#onValueTypeToggled,
+      onSettingsToggle: this.#onSettingsToggle.bind(this),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #onSettingsToggle(): void {
     this.#showSettings = !this.#showSettings;
-    this.#render();
-  }
-}
-
-customElements.define('devtools-linear-memory-inspector-interpreter', LinearMemoryValueInterpreter);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-linear-memory-inspector-interpreter': LinearMemoryValueInterpreter;
+    this.requestUpdate();
   }
 }

package/front_end/panels/linear_memory_inspector/components/LinearMemoryViewer.ts

@@ -47,7 +47,7 @@ const BYTE_GROUP_SIZE = 4;
 export class LinearMemoryViewer extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
-  readonly #resizeObserver = new ResizeObserver(() => this.#resize());
+  readonly #resizeObserver = new ResizeObserver(() => requestAnimationFrame(this.#resize.bind(this)));
   #isObservingResize = false;
 
   #memory = new Uint8Array();

package/front_end/panels/linear_memory_inspector/components/linearMemoryValueInterpreter.css

@@ -4,44 +4,46 @@
  * found in the LICENSE file.
  */
 
-:host {
-  flex: auto;
-  display: flex;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    flex: auto;
+    display: flex;
+  }
 
-.value-interpreter {
-  border: 1px solid var(--sys-color-divider);
-  background-color: var(--sys-color-cdt-base-container);
-  overflow: hidden;
-  width: 400px;
-}
+  .value-interpreter {
+    border: 1px solid var(--sys-color-divider);
+    background-color: var(--sys-color-cdt-base-container);
+    overflow: hidden;
+    width: 400px;
+  }
 
-.settings-toolbar {
-  min-height: 26px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding-left: var(--sys-size-3);
-  padding-right: var(--sys-size-3);
-  align-items: center;
-}
+  .settings-toolbar {
+    min-height: 26px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding-left: var(--sys-size-3);
+    padding-right: var(--sys-size-3);
+    align-items: center;
+  }
 
-.settings-toolbar-button {
-  padding: 0;
-  width: 20px;
-  height: 20px;
-  border: none;
-  outline: none;
-  background-color: transparent;
-}
+  .settings-toolbar-button {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+  }
 
-.settings-toolbar-button.active devtools-icon {
-  color: var(--icon-toggled);
-}
+  .settings-toolbar-button.active devtools-icon {
+    color: var(--icon-toggled);
+  }
 
-.divider {
-  display: block;
-  height: 1px;
-  margin-bottom: 12px;
-  background-color: var(--sys-color-divider);
+  .divider {
+    display: block;
+    height: 1px;
+    margin-bottom: 12px;
+    background-color: var(--sys-color-divider);
+  }
 }

package/front_end/panels/network/NetworkItemView.ts

@@ -8,10 +8,10 @@ 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 SDK from '../../core/sdk/sdk.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';

package/front_end/panels/network/NetworkLogView.ts

@@ -42,6 +42,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -51,7 +52,6 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';

package/front_end/panels/network/NetworkPanel.ts

@@ -40,6 +40,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -47,7 +48,6 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';

package/front_end/panels/recorder/RecorderController.ts

@@ -30,7 +30,6 @@ import * as Actions from './recorder-actions/recorder-actions.js';
 import recorderControllerStyles from './recorderController.css.js';
 import * as Events from './RecorderEvents.js';
 
-// TODO(crbug.com/391381439): Fully migrate off of Constructable Stylesheets.
 const {html, Decorators, Directives: {ref}, LitElement} = Lit;
 const {customElement, state} = Decorators;
 

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -171,6 +171,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.showLastSelectedElement();
   }
 
+  // Used in web tests
+  elementsByOrigin(): Map<string, OriginTreeElement> {
+    return this.#elementsByOrigin;
+  }
+
   showLastSelectedElement(): void {
     if (this.#cookieControlsTreeElement &&
         this.#securitySidebarLastItemSetting.get() === this.#cookieControlsTreeElement.elemId) {

package/front_end/panels/settings/SettingsScreen.ts

@@ -11,13 +11,14 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as GreenDev from '../../models/greendev/greendev.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
 import {type Card, createIcon} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
@@ -51,6 +52,11 @@ const UIStrings = {
    * @description Message shown in the experiments panel to warn users about any possible unstable features.
    */
   theseExperimentsCouldBeUnstable: 'Warning: These experiments could be unstable or unreliable.',
+  /**
+   * @description Message shown in the GreenDev prototypes panel to warn users about any possible unstable features.
+   */
+  greenDevUnstable:
+      'Warning: All these features are prototype and very unstable. They exist for user testing and are not designed to be relied on.',
   /**
    * @description Message text content in Settings Screen of the Settings
    */
@@ -603,3 +609,129 @@ export interface ShowSettingsScreenOptions {
   name?: string;
   focusTabHeader?: boolean;
 }
+
+export class GreenDevSettingsTab extends UI.Widget.VBox implements SettingsTab {
+  #view: View;
+
+  constructor(view = GREENDEV_VIEW) {
+    super({jslog: `${VisualLogging.pane('greendev-prototypes')}`});
+    this.element.id = 'greendev-prototypes-tab-content';
+
+    this.#view = view;
+
+    this.requestUpdate();
+  }
+
+  highlightObject(_object: Object): void {
+  }
+
+  override performUpdate(): Promise<void>|void {
+    const settings = GreenDev.Prototypes.instance().settings();
+    this.#view({settings}, {}, this.element);
+  }
+}
+
+interface GreenDevViewInput {
+  settings: GreenDev.GreenDevSettings;
+}
+
+type View = (input: GreenDevViewInput, output: object, target: HTMLElement) => void;
+const GREENDEV_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+         <div class="settings-card-container">
+           <devtools-card .heading=${'GreenDev prototypes'}>
+             <div class="experiments-warning-subsection">
+              <devtools-icon .name=${'warning'}></devtools-icon>
+              <span>${i18nString(UIStrings.greenDevUnstable)}</span>
+             </div>
+             <div class="settings-experiments-block">
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty'])}
+             </div>
+           </devtools-card>
+
+           <devtools-card .heading=${'GreenDev widgets'}>
+             <div class="experiments-warning-subsection">
+              <devtools-icon .name=${'warning'}></devtools-icon>
+              <span>${i18nString(UIStrings.greenDevUnstable)}</span>
+             </div>
+             <div class="settings-experiments-block greendev-widgets">
+               ${renderWidgetOptions(input.settings)}
+             </div>
+           </devtools-card>
+         </div>
+       `, target);
+  // clang-format on
+};
+
+const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string> = {
+  inDevToolsFloaty: 'In DevTools context picker',
+  aiAnnotations: 'AI auto-annotations',
+  inlineWidgets: 'Inline widgets in AI Assistance',
+  artifactViewer: 'Widgets in the Artifact viewer'
+};
+
+function renderWidgetOptions(settings: GreenDev.GreenDevSettings): TemplateResult {
+  function onChange(nowActiveRadio: 'inlineWidgets'|'artifactViewer'|'none') {
+    return () => {
+      switch (nowActiveRadio) {
+        case 'inlineWidgets': {
+          settings.artifactViewer.set(false);
+          settings.inlineWidgets.set(true);
+          break;
+        }
+        case 'artifactViewer': {
+          settings.artifactViewer.set(true);
+          settings.inlineWidgets.set(false);
+          break;
+        }
+        case 'none': {
+          settings.artifactViewer.set(false);
+          settings.inlineWidgets.set(false);
+        }
+      }
+
+      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+          i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+    };
+  }
+  // clang-format off
+  return html`
+    <p class="settings-experiment">
+      <label><input type="radio" name="widgets-choice" @change=${onChange('inlineWidgets')}>${GREENDEV_PROTOTYPE_NAMES['inlineWidgets']}</label>
+    </p>
+    <p class="settings-experiment">
+      <label><input type="radio" name="widgets-choice" @change=${onChange('artifactViewer')}>${GREENDEV_PROTOTYPE_NAMES['artifactViewer']}</label>
+    </p>
+    <p class="settings-experiment">
+      <label><input type="radio" name="widgets-choice" @change=${onChange('none')}>None</label>
+    </p>
+  `;
+  // clang-format on
+}
+
+function renderPrototypeCheckboxes(
+    settings: GreenDev.GreenDevSettings,
+    keys: Array<keyof GreenDev.GreenDevSettings>,
+    ): TemplateResult {
+  const {bindToSetting} = UI.UIUtils;
+
+  function showChangeWarning(): void {
+    UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
+        i18nString(UIStrings.oneOrMoreSettingsHaveChanged));
+  }
+  // clang-format off
+  const checkboxes = Object.keys(settings).map(name => {
+    const settingName = name as keyof GreenDev.GreenDevSettings;
+    if(!keys.includes(settingName)) {
+      return nothing;
+    }
+    const setting = settings[settingName];
+    const title = GREENDEV_PROTOTYPE_NAMES[settingName];
+    return html`<p class="settings-experiment">
+      <devtools-checkbox @change=${showChangeWarning} title=${title} ${bindToSetting(setting)}>${title}</devtools-checkbox>
+    </p>`;
+  });
+  return html`${checkboxes}`;
+  // clang-format on
+}

package/front_end/panels/settings/settings-meta.ts

@@ -24,6 +24,14 @@ const UIStrings = {
    * @description Text in Settings Screen of the Settings
    */
   experiments: 'Experiments',
+  /**
+   * @description Text in Settings Screen of the Settings
+   */
+  greenDevProtoTypes: 'GreenDev',
+  /**
+   * @description Command for showing the GreenDev tab in the Settings Screen
+   */
+  showGreenDev: 'Show GreenDev',
   /**
    * @description Title of Ignore list settings
    */
@@ -154,6 +162,22 @@ UI.ViewManager.registerViewExtension({
   iconName: 'clear-list',
 });
 
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.SETTINGS_VIEW,
+  id: 'greendev-prototypes',
+  title: i18nLazyString(UIStrings.greenDevProtoTypes),
+  commandPrompt: i18nLazyString(UIStrings.showGreenDev),
+  order: 101,
+  async loadView() {
+    const Settings = await loadSettingsModule();
+    return new Settings.SettingsScreen.GreenDevSettingsTab();
+  },
+  iconName: 'experiment',
+  condition: config => {
+    return Boolean(config?.devToolsGreenDevUi?.enabled);
+  },
+});
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.SETTINGS_VIEW,
   id: 'keybinds',

package/front_end/panels/settings/settingsScreen.css

@@ -195,3 +195,7 @@ devtools-button.link-icon {
     color: HighlightText;
   }
 }
+
+.greendev-widgets input[type="radio"] {
+  margin: 6px;
+}