chrome-devtools-frontend 1.0.1555430 → 1.0.1558690

package/front_end/panels/network/RequestCookiesView.ts

@@ -1,20 +1,19 @@
 // Copyright 2011 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 SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Icon} from '../../ui/kit/kit.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
-import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import requestCookiesViewStyles from './requestCookiesView.css.js';
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -74,74 +73,108 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestCookiesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ViewInput {
+  requestCookies: CookieTable.CookiesTable.CookiesTableData;
+  responseCookies: CookieTable.CookiesTable.CookiesTableData;
+  malformedResponseCookies: SDK.NetworkRequest.BlockedSetCookieWithReason[];
+  showFilteredOutCookies: boolean;
+  hasBlockedCookies: boolean;
+  gotCookies: boolean;
+  onShowFilteredOutCookiesChange: (checked: boolean) => void;
+  siteHasCookieInOtherPartition: boolean;
+}
+
+type ViewFunction = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
+  // clang-format off
+  render(
+    html`
+    <style>${requestCookiesViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div class="request-cookies-view">
+      ${input.gotCookies ? Lit.nothing : html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+          header: i18nString(UIStrings.thisRequestHasNoCookies)})}></devtools-widget>
+      `}
+
+      <div class=${input.requestCookies.cookies.length || input.hasBlockedCookies ? '' : 'hidden'}>
+        <span class="request-cookies-title" title=${i18nString(UIStrings.cookiesThatWereSentToTheServerIn)}>
+          ${i18nString(UIStrings.requestCookies)}
+        </span>
+        <devtools-checkbox
+          @change=${(e: Event) => input.onShowFilteredOutCookiesChange((e.target as HTMLInputElement).checked)}
+          .checked=${input.showFilteredOutCookies}>
+          ${i18nString(UIStrings.showFilteredOutRequestCookies)}
+        </devtools-checkbox>
+      </div>
+
+      <div class="cookies-panel-item ${!input.requestCookies.cookies.length && input.hasBlockedCookies ? '' : 'hidden'}">
+        ${i18nString(UIStrings.noRequestCookiesWereSent)}
+      </div>
+
+      ${input.requestCookies.cookies.length > 0 ? html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+          cookiesData: input.requestCookies,
+          inline: true
+        })} class="cookie-table cookies-panel-item"></devtools-widget>
+      ` : Lit.nothing}
+
+      <div class="cookies-panel-item site-has-cookies-in-other-partition ${input.siteHasCookieInOtherPartition ? '' : 'hidden'}">
+        ${uiI18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
+          PH1: UI.XLink.XLink.create(
+            'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore), undefined,
+            undefined, 'learn-more'),})}
+      </div>
+
+      <div class="request-cookies-title ${input.responseCookies.cookies.length ? '' : 'hidden'}"
+        title=${i18nString(UIStrings.cookiesThatWereReceivedFromThe)}>
+          ${i18nString(UIStrings.responseCookies)}
+      </div>
+
+      ${input.responseCookies.cookies.length ? html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+          cookiesData: input.responseCookies,
+          inline: true })} class="cookie-table cookies-panel-item"></devtools-widget>
+      ` : Lit.nothing}
+
+      <div class="request-cookies-title ${input.malformedResponseCookies.length ? '' : 'hidden'}" title=${i18nString(UIStrings.cookiesThatWereReceivedFromTheServer)}>
+        ${i18nString(UIStrings.malformedResponseCookies)}
+      </div>
+
+      <div class=${input.malformedResponseCookies.length ? '' : 'hidden'}>
+        ${input.malformedResponseCookies.map(malformedCookie => html`
+          <span class="cookie-line source-code" title=${getMalformedCookieTooltip(malformedCookie)}>
+            <devtools-icon class="cookie-warning-icon small" .name=${'cross-circle-filled'}></devtools-icon>
+            ${malformedCookie.cookieLine}
+          </span>
+        `)}
+      </div>
+    </div>
+  `,
+  target);
+  // clang-format on
+};
+
+function getMalformedCookieTooltip(malformedCookie: SDK.NetworkRequest.BlockedSetCookieWithReason): string {
+  if (malformedCookie.blockedReasons.includes(Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize)) {
+    return SDK.NetworkRequest.setCookieBlockedReasonToUiString(
+        Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize);
+  }
+  return SDK.NetworkRequest.setCookieBlockedReasonToUiString(Protocol.Network.SetCookieBlockedReason.SyntaxError);
+}
+
 export class RequestCookiesView extends UI.Widget.Widget {
   private request: SDK.NetworkRequest.NetworkRequest;
   private readonly showFilteredOutCookiesSetting: Common.Settings.Setting<boolean>;
-  private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
-  private readonly requestCookiesTitle: HTMLElement;
-  private readonly requestCookiesEmpty: HTMLElement;
-  private readonly requestCookiesTable: CookieTable.CookiesTable.CookiesTable;
-  private readonly responseCookiesTitle: HTMLElement;
-  private readonly responseCookiesTable: CookieTable.CookiesTable.CookiesTable;
-  private readonly siteHasCookieInOtherPartition: HTMLElement;
-  private readonly malformedResponseCookiesTitle: HTMLElement;
-  private readonly malformedResponseCookiesList: HTMLElement;
+  private readonly view: ViewFunction;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, view: ViewFunction = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('cookies').track({resize: true})}`});
-    this.registerRequiredCSS(requestCookiesViewStyles);
-
-    this.element.classList.add('request-cookies-view');
-
     this.request = request;
     this.showFilteredOutCookiesSetting = Common.Settings.Settings.instance().createSetting(
         'show-filtered-out-request-cookies', /* defaultValue */ false);
-
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoCookies), '');
-    this.emptyWidget.show(this.element);
-
-    this.requestCookiesTitle = this.element.createChild('div');
-    const titleText = this.requestCookiesTitle.createChild('span', 'request-cookies-title');
-    titleText.textContent = i18nString(UIStrings.requestCookies);
-    UI.Tooltip.Tooltip.install(titleText, i18nString(UIStrings.cookiesThatWereSentToTheServerIn));
-
-    const requestCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.showFilteredOutRequestCookies), this.showFilteredOutCookiesSetting);
-    requestCookiesCheckbox.addEventListener('change', () => {
-      this.refreshRequestCookiesView();
-    });
-    this.requestCookiesTitle.appendChild(requestCookiesCheckbox);
-
-    this.requestCookiesEmpty = this.element.createChild('div', 'cookies-panel-item');
-    this.requestCookiesEmpty.textContent = i18nString(UIStrings.noRequestCookiesWereSent);
-
-    this.requestCookiesTable = new CookieTable.CookiesTable.CookiesTable(/* renderInline */ true);
-    this.requestCookiesTable.contentElement.classList.add('cookie-table', 'cookies-panel-item');
-    this.requestCookiesTable.show(this.element);
-
-    this.siteHasCookieInOtherPartition =
-        this.element.createChild('div', 'cookies-panel-item site-has-cookies-in-other-partition');
-    this.siteHasCookieInOtherPartition.appendChild(
-        uiI18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
-          PH1: UI.XLink.XLink.create(
-              'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore), undefined,
-              undefined, 'learn-more'),
-        }));
-
-    this.responseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
-    this.responseCookiesTitle.textContent = i18nString(UIStrings.responseCookies);
-    this.responseCookiesTitle.title = i18nString(UIStrings.cookiesThatWereReceivedFromThe);
-
-    this.responseCookiesTable = new CookieTable.CookiesTable.CookiesTable(/* renderInline */ true);
-    this.responseCookiesTable.contentElement.classList.add('cookie-table', 'cookies-panel-item');
-    this.responseCookiesTable.show(this.element);
-
-    this.malformedResponseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
-    this.malformedResponseCookiesTitle.textContent = i18nString(UIStrings.malformedResponseCookies);
-    UI.Tooltip.Tooltip.install(
-        this.malformedResponseCookiesTitle, i18nString(UIStrings.cookiesThatWereReceivedFromTheServer));
-
-    this.malformedResponseCookiesList = this.element.createChild('div');
+    this.view = view;
   }
 
   private getRequestCookies(): {
@@ -230,99 +263,50 @@ export class RequestCookiesView extends UI.Widget.Widget {
     return {responseCookies, responseCookieToBlockedReasons, responseCookieToExemptionReason, malformedResponseCookies};
   }
 
-  private refreshRequestCookiesView(): void {
+  override performUpdate(): void {
     if (!this.isShowing()) {
       return;
     }
-
-    const gotCookies = this.request.hasRequestCookies() || this.request.responseCookies.length;
-    if (gotCookies) {
-      this.emptyWidget.hideWidget();
-    } else {
-      this.emptyWidget.showWidget();
-    }
-
     const {requestCookies, requestCookieToBlockedReasons, requestCookieToExemptionReason} = this.getRequestCookies();
     const {responseCookies, responseCookieToBlockedReasons, responseCookieToExemptionReason, malformedResponseCookies} =
         this.getResponseCookies();
 
-    if (requestCookies.length) {
-      this.requestCookiesTitle.classList.remove('hidden');
-      this.requestCookiesEmpty.classList.add('hidden');
-      this.requestCookiesTable.showWidget();
-      this.requestCookiesTable.setCookies(
-          requestCookies, requestCookieToBlockedReasons, requestCookieToExemptionReason);
-
-    } else if (this.request.blockedRequestCookies().length) {
-      this.requestCookiesTitle.classList.remove('hidden');
-      this.requestCookiesEmpty.classList.remove('hidden');
-      this.requestCookiesTable.hideWidget();
-
-    } else {
-      this.requestCookiesTitle.classList.add('hidden');
-      this.requestCookiesEmpty.classList.add('hidden');
-      this.requestCookiesTable.hideWidget();
-    }
-
-    if (responseCookies.length) {
-      this.responseCookiesTitle.classList.remove('hidden');
-      this.responseCookiesTable.showWidget();
-      this.responseCookiesTable.setCookies(
-          responseCookies, responseCookieToBlockedReasons, responseCookieToExemptionReason);
-    } else {
-      this.responseCookiesTitle.classList.add('hidden');
-      this.responseCookiesTable.hideWidget();
-    }
-
-    if (malformedResponseCookies.length) {
-      this.malformedResponseCookiesTitle.classList.remove('hidden');
-      this.malformedResponseCookiesList.classList.remove('hidden');
-
-      this.malformedResponseCookiesList.removeChildren();
-      for (const malformedCookie of malformedResponseCookies) {
-        const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
-        const icon = new Icon();
-        icon.name = 'cross-circle-filled';
-        icon.classList.add('cookie-warning-icon', 'small');
-        listItem.appendChild(icon);
-        UI.UIUtils.createTextChild(listItem, malformedCookie.cookieLine);
-
-        if (malformedCookie.blockedReasons.includes(
-                Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize)) {
-          listItem.title = SDK.NetworkRequest.setCookieBlockedReasonToUiString(
-              Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize);
-        } else {
-          listItem.title =
-              SDK.NetworkRequest.setCookieBlockedReasonToUiString(Protocol.Network.SetCookieBlockedReason.SyntaxError);
-        }
-      }
-    } else {
-      this.malformedResponseCookiesTitle.classList.add('hidden');
-      this.malformedResponseCookiesList.classList.add('hidden');
-    }
-
-    if (this.request.siteHasCookieInOtherPartition()) {
-      this.siteHasCookieInOtherPartition.classList.remove('hidden');
-    } else {
-      this.siteHasCookieInOtherPartition.classList.add('hidden');
-    }
+    const input: ViewInput = {
+      gotCookies: this.request.hasRequestCookies() || this.request.responseCookies.length > 0,
+      requestCookies: {
+        cookies: requestCookies,
+        cookieToBlockedReasons: requestCookieToBlockedReasons,
+        cookieToExemptionReason: requestCookieToExemptionReason,
+      },
+      responseCookies: {
+        cookies: responseCookies,
+        cookieToBlockedReasons: responseCookieToBlockedReasons,
+        cookieToExemptionReason: responseCookieToExemptionReason,
+      },
+      malformedResponseCookies,
+      showFilteredOutCookies: this.showFilteredOutCookiesSetting.get(),
+      onShowFilteredOutCookiesChange: (checked: boolean) => {
+        this.showFilteredOutCookiesSetting.set(checked);
+        this.requestUpdate();
+      },
+      siteHasCookieInOtherPartition: this.request.siteHasCookieInOtherPartition(),
+      hasBlockedCookies: this.request.blockedRequestCookies().length > 0,
+    };
+
+    this.view(input, undefined, this.contentElement);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.request.addEventListener(
-        SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
-    this.request.addEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
+    this.request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestUpdate, this);
+    this.request.addEventListener(SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.requestUpdate, this);
 
-    this.refreshRequestCookiesView();
+    this.requestUpdate();
   }
 
   override willHide(): void {
     super.willHide();
-    this.request.removeEventListener(
-        SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
-    this.request.removeEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
+    this.request.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestUpdate, this);
+    this.request.removeEventListener(SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.requestUpdate, this);
   }
 }

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -86,11 +86,11 @@ const UIStrings = {
   /**
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
-  responseHeaders: 'Response Headers',
+  responseHeaders: 'Response headers',
   /**
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
-  earlyHintsHeaders: 'Early Hints Headers',
+  earlyHintsHeaders: 'Early hints headers',
   /**
    * @description Title text for a link to the Sources panel to the file containing the header override definitions
    */

package/front_end/panels/network/requestCookiesView.css

@@ -4,27 +4,29 @@
  * found in the LICENSE file.
  */
 
-.request-cookies-view {
-  overflow: auto;
-  padding: 12px;
-  height: 100%;
-  background-color: var(--sys-color-cdt-base-container);
-}
+@scope to (devtools-widget > *) {
+  .request-cookies-view {
+    overflow: auto;
+    padding: 12px;
+    height: 100%;
+    background-color: var(--sys-color-cdt-base-container);
+  }
 
-.request-cookies-view .request-cookies-title {
-  font-size: 12px;
-  font-weight: bold;
-  margin-right: 30px;
-  color: var(--sys-color-on-surface);
-}
+  .request-cookies-view .request-cookies-title {
+    font-size: 12px;
+    font-weight: bold;
+    margin-right: 30px;
+    color: var(--sys-color-on-surface);
+  }
 
-.request-cookies-view .cookie-line {
-  margin-top: 6px;
-  display: flex;
-}
+  .request-cookies-view .cookie-line {
+    margin-top: 6px;
+    display: flex;
+  }
 
-.request-cookies-view .cookies-panel-item {
-  margin-top: 6px;
-  margin-bottom: 16px;
-  flex: none;
+  .request-cookies-view .cookies-panel-item {
+    margin-top: 6px;
+    margin-bottom: 16px;
+    flex: none;
+  }
 }

package/front_end/panels/recorder/components/RecordingView.ts

@@ -910,7 +910,7 @@ export class RecordingView extends UI.Widget.Widget {
   }
 
   #isTitleInvalid = false;
-  #selectedStep?: Models.Schema.Step|null;
+  #selectedStep: Models.Schema.Step|null = null;
   #replaySettingsExpanded = false;
   #showCodeView = false;
   #code = '';
@@ -1090,10 +1090,10 @@ export class RecordingView extends UI.Widget.Widget {
   }
 
   #onWrapperClick(): void {
-    if (this.#selectedStep === undefined) {
+    if (!this.#selectedStep) {
       return;
     }
-    this.#selectedStep = undefined;
+    this.#selectedStep = null;
     this.performUpdate();
   }
 

package/front_end/panels/recorder/components/StepView.ts

@@ -412,7 +412,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         }
         data-step-index=${input.stepIndex}
         data-section-index=${input.sectionIndex}
-        @click=${() => {
+        @click=${(event: Event) => {
+          event.stopPropagation();
           const stepOrSection = input.step || input.section;
           if (stepOrSection) {
             input.onStepClick(stepOrSection);

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/keybindsSettingsTab.css

@@ -147,6 +147,10 @@ button.text-button {
   grid-column: 3 / -1;
 }
 
+.keybinds-delete-button {
+  flex-shrink: 0;
+}
+
 .docs-link.devtools-link {
   align-self: flex-start;
   min-height: 2em;

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;
+}

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -111,6 +111,8 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
   private muteActivateItem?: boolean;
   private lastDebuggerModel: SDK.DebuggerModel.DebuggerModel|null = null;
 
+  #details: SDK.DebuggerModel.DebuggerPausedDetails|null = null;
+
   private constructor() {
     super({
       jslog: `${VisualLogging.section('sources.callstack')}`,
@@ -196,10 +198,13 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     return callstackSidebarPaneInstance;
   }
 
-  flavorChanged(_object: Object|null): void {
+  flavorChanged(details: SDK.DebuggerModel.DebuggerPausedDetails|null): void {
     this.showIgnoreListed = false;
     this.ignoreListCheckboxElement.checked = false;
     this.maxAsyncStackChainDepth = defaultMaxAsyncStackChainDepth;
+    this.#details = details;
+    this.setSourceMapSubscription(details?.debuggerModel ?? null);
+
     this.requestUpdate();
   }
 
@@ -230,8 +235,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
     this.callFrameWarningsElement.classList.add('hidden');
 
-    const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
-    this.setSourceMapSubscription(details?.debuggerModel ?? null);
+    const details = this.#details;
     if (!details) {
       this.notPausedMessageElement.classList.remove('hidden');
       this.ignoreListMessageElement.classList.add('hidden');