chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/front_end/panels/network/components/RequestHeaderSection.css

@@ -24,10 +24,12 @@
   }
 
   .call-to-action-body {
+    display: flex;
+    gap: var(--sys-size-4);
     padding: 6px 0;
-    margin-left: 9.5px;
+    margin-left: var(--sys-size-1);
     border-left: 2px solid var(--issue-color-yellow);
-    padding-left: 18px;
+    padding-left: 11px;
     line-height: 20px;
   }
 
@@ -56,7 +58,7 @@
   }
 
   .inline-icon {
-    vertical-align: middle;
+    margin-top: var(--sys-size-2);
   }
 
   @media (forced-colors: active) {

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

@@ -83,9 +83,8 @@ function renderProvisionalHeadersWarning(isRequestCached: boolean): Lit.LitTempl
   return html`
     <div class="call-to-action">
       <div class="call-to-action-body">
+        <devtools-icon class="inline-icon medium" name='warning-filled'></devtools-icon>
         <div class="explanation" title=${cautionTitle}>
-          <devtools-icon class="inline-icon medium" name='warning-filled'>
-          </devtools-icon>
           ${cautionText} <devtools-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</devtools-link>
         </div>
       </div>

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

@@ -128,7 +128,7 @@ div.raw-headers-row {
 }
 
 .inline-icon {
-  vertical-align: middle;
+  vertical-align: sub;
 }
 
 .header-grid-container {

package/front_end/panels/network/network.ts

@@ -31,6 +31,7 @@ import './NetworkPanel.js';
 
 import * as BinaryResourceView from './BinaryResourceView.js';
 import * as EventSourceMessagesView from './EventSourceMessagesView.js';
+import * as LinkPreloadGenerator from './LinkPreloadGenerator.js';
 import * as NetworkConfigView from './NetworkConfigView.js';
 import * as NetworkDataGridNode from './NetworkDataGridNode.js';
 import * as NetworkFrameGrouper from './NetworkFrameGrouper.js';
@@ -60,6 +61,7 @@ import * as SignedExchangeInfoView from './SignedExchangeInfoView.js';
 export {
   BinaryResourceView,
   EventSourceMessagesView,
+  LinkPreloadGenerator,
   NetworkConfigView,
   NetworkDataGridNode,
   NetworkFrameGrouper,

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -151,6 +151,32 @@ const UIStrings = {
    * objects retained by event handlers
    */
   objectsRetainedByEventHandlers: 'Objects retained by Event Handlers',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects attributed to a specific native context (roughly, a JavaScript
+   * realm such as a frame). PH1 is a name identifying the context
+   * (often a URL) which may be empty, PH2 is the id of the native context
+   * object, and PH3 is the context's attributed size.
+   * @example {https://example.com/ } PH1
+   * @example {1234} PH2
+   * @example {1.2 MB} PH3
+   */
+  objectsAttributedToNativeContextS: 'Native context {PH1}@{PH2} ({PH3})',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects which are shared between multiple native contexts (roughly,
+   * JavaScript realms such as frames). PH1 is their total size.
+   * @example {1.2 MB} PH1
+   */
+  objectsSharedBetweenNativeContextsS: 'Objects shared between native contexts ({PH1})',
+  /**
+   * @description An option which will filter the heap snapshot to show only
+   * objects which could not be attributed to any single native context
+   * (roughly, a JavaScript realm such as a frame). PH1 is their
+   * total size.
+   * @example {1.2 MB} PH1
+   */
+  objectsNotAttributedToNativeContextS: 'Objects not attributed to a native context ({PH1})',
   /**
    * @description Text for the summary view
    */
@@ -266,6 +292,19 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const moduleUIstr_ = i18n.i18n.registerUIStrings('panels/profiler/ModuleUIStrings.ts', ModuleUIStrings.UIStrings);
 const moduleI18nString = i18n.i18n.getLocalizedString.bind(undefined, moduleUIstr_);
+
+interface NamedFilter {
+  uiName: string;
+  filterName: string;
+}
+
+interface FilterOption {
+  uiName: string;
+  profileIndex: number;
+  filterName?: string;
+  disabled?: boolean;
+}
+
 export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayDelegate, UI.SearchableView.Searchable {
   searchResults: number[] = [];
   profile: HeapProfileHeader;
@@ -293,6 +332,8 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   readonly perspectiveSelect: UI.Toolbar.ToolbarComboBox;
   baseSelect: UI.Toolbar.ToolbarComboBox;
   readonly filterSelect: UI.Toolbar.ToolbarComboBox;
+  #filterOptions: FilterOption[] = [];
+  #nativeContextFilters: NamedFilter[] = [];
   readonly classNameFilter: UI.Toolbar.ToolbarInput;
   readonly selectedSizeText: UI.Toolbar.ToolbarText;
   readonly resetRetainersButton: UI.Toolbar.ToolbarButton;
@@ -556,6 +597,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     const heapSnapshotProxy = await this.profile.loadPromise;
 
     void this.retrieveStatistics(heapSnapshotProxy);
+    void this.updateNativeContextFilters(heapSnapshotProxy);
     if (this.dataGrid) {
       void this.dataGrid.setDataSource(heapSnapshotProxy, 0);
     }
@@ -611,6 +653,52 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     return statistics;
   }
 
+  async updateNativeContextFilters(heapSnapshotProxy: HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotProxy):
+      Promise<void> {
+    const sizes = await heapSnapshotProxy.getNativeContextSizes();
+    const filters: NamedFilter[] = [];
+
+    // List the individual native contexts first, sorted by attributed size
+    // (largest first), then the shared and unattributed buckets.
+    const nativeContexts = sizes.nativeContexts.toSorted((a, b) => b.attributedSize - a.attributedSize);
+    for (const nativeContext of nativeContexts) {
+      // Drop the "system / NativeContext" boilerplate (and any "Detached "
+      // marker) so the label shows just the distinguishing part of the name
+      // (e.g. the URL). The remaining name (if any) is followed by the native
+      // context object id, e.g. "Native context https://example.com @1234".
+      let name = nativeContext.nodeName;
+      if (name.startsWith('Detached ')) {
+        name = name.substring('Detached '.length);
+      }
+      if (name.startsWith('system / NativeContext / ')) {
+        name = name.substring('system / NativeContext / '.length);
+      } else if (name.startsWith('system / NativeContext')) {
+        name = name.substring('system / NativeContext'.length);
+      }
+      filters.push({
+        uiName: i18nString(UIStrings.objectsAttributedToNativeContextS, {
+          PH1: name ? `${name} ` : '',
+          PH2: nativeContext.nodeId,
+          PH3: i18n.ByteUtilities.bytesToString(nativeContext.attributedSize),
+        }),
+        filterName: `nativeContext_${nativeContext.nodeIndex}`,
+      });
+    }
+    filters.push({
+      uiName: i18nString(UIStrings.objectsSharedBetweenNativeContextsS,
+                         {PH1: i18n.ByteUtilities.bytesToString(sizes.sharedSize)}),
+      filterName: 'sharedNativeContext',
+    });
+    filters.push({
+      uiName: i18nString(UIStrings.objectsNotAttributedToNativeContextS,
+                         {PH1: i18n.ByteUtilities.bytesToString(sizes.noAttributionSize)}),
+      filterName: 'noNativeContext',
+    });
+
+    this.#nativeContextFilters = filters;
+    this.updateFilterOptions();
+  }
+
   onIdsRangeChanged(event: Common.EventTarget.EventTargetEvent<IdsRangeChangedEvent>): void {
     const {minId, maxId} = event.data;
     this.selectedSizeText.setText(
@@ -775,7 +863,7 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
     this.performSearch(this.currentSearch, false);
   }
 
-  static readonly ALWAYS_AVAILABLE_FILTERS: ReadonlyArray<{uiName: string, filterName: string}> = [
+  static readonly ALWAYS_AVAILABLE_FILTERS: readonly NamedFilter[] = [
     {uiName: i18nString(UIStrings.duplicatedStrings), filterName: 'duplicatedStrings'},
     {uiName: i18nString(UIStrings.objectsRetainedByDetachedDomNodes), filterName: 'objectsRetainedByDetachedDomNodes'},
     {uiName: i18nString(UIStrings.objectsRetainedByContexts), filterName: 'objectsRetainedByContexts'},
@@ -784,16 +872,9 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   ];
 
   changeFilter(): void {
-    let selectedIndex = this.filterSelect.selectedIndex();
-    let filterName = undefined;
-    const indexOfFirstAlwaysAvailableFilter =
-        this.filterSelect.size() - HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS.length;
-    if (selectedIndex >= indexOfFirstAlwaysAvailableFilter) {
-      filterName =
-          HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS[selectedIndex - indexOfFirstAlwaysAvailableFilter].filterName;
-      selectedIndex = 0;
-    }
-    const profileIndex = selectedIndex - 1;
+    const selectedOption = this.#filterOptions[this.filterSelect.selectedIndex()];
+    const profileIndex = selectedOption?.profileIndex ?? -1;
+    const filterName = selectedOption?.filterName;
     if (!this.dataGrid) {
       return;
     }
@@ -1024,10 +1105,20 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
   updateFilterOptions(): void {
     const list = this.profiles();
     const selectedIndex = this.filterSelect.selectedIndex();
-    const originalSize = this.filterSelect.size();
+    const selectedOption = this.#filterOptions[selectedIndex];
+    const filterOptions: FilterOption[] = [];
+    const createOption = (filterOption: FilterOption): HTMLOptionElement => {
+      filterOptions.push(filterOption);
+      const option = this.filterSelect.createOption(filterOption.uiName);
+      option.disabled = Boolean(filterOption.disabled);
+      return option;
+    };
+    const createSeparator = (): HTMLOptionElement => {
+      return createOption({uiName: '\u2014'.repeat(18), profileIndex: -1, disabled: true});
+    };
 
     this.filterSelect.removeOptions();
-    this.filterSelect.createOption(i18nString(UIStrings.allObjects));
+    createOption({uiName: i18nString(UIStrings.allObjects), profileIndex: -1});
     for (let i = 0; i < list.length; ++i) {
       let title;
       if (!i) {
@@ -1035,34 +1126,31 @@ export class HeapSnapshotView extends UI.View.SimpleView implements DataDisplayD
       } else {
         title = i18nString(UIStrings.objectsAllocatedBetweenSAndS, {PH1: list[i - 1].title, PH2: list[i].title});
       }
-      this.filterSelect.createOption(title);
+      createOption({uiName: title, profileIndex: i});
     }
 
-    // Create a dividing line using em dashes.
-    const dividerIndex = this.filterSelect.size();
-    const divider = this.filterSelect.createOption('\u2014'.repeat(18));
-    (divider).disabled = true;
+    createSeparator();
 
     for (const filter of HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS) {
-      this.filterSelect.createOption(filter.uiName);
+      createOption({uiName: filter.uiName, profileIndex: -1, filterName: filter.filterName});
     }
 
-    const newSize = this.filterSelect.size();
-
-    if (selectedIndex > -1) {
-      const distanceFromEnd = originalSize - selectedIndex;
-      if (distanceFromEnd <= HeapSnapshotView.ALWAYS_AVAILABLE_FILTERS.length) {
-        // If one of the always-available filters was selected, then select the
-        // same filter again even though its index may have changed.
-        this.filterSelect.setSelectedIndex(newSize - distanceFromEnd);
-      } else if (selectedIndex >= dividerIndex) {
-        // If the select list is now shorter than it was, such that we can't
-        // keep the index unchanged, set it to -1, which causes it to be blank.
-        this.filterSelect.setSelectedIndex(-1);
-      } else {
-        this.filterSelect.setSelectedIndex(selectedIndex);
+    if (this.#nativeContextFilters.length > 0) {
+      createSeparator();
+      for (const filter of this.#nativeContextFilters) {
+        createOption({uiName: filter.uiName, profileIndex: -1, filterName: filter.filterName});
       }
     }
+
+    this.#filterOptions = filterOptions;
+
+    if (selectedOption) {
+      const newSelectedIndex = this.#filterOptions.findIndex(option => {
+        return !option.disabled && option.profileIndex === selectedOption.profileIndex &&
+            option.filterName === selectedOption.filterName;
+      });
+      this.filterSelect.setSelectedIndex(newSelectedIndex);
+    }
   }
 
   updateControls(): void {

package/front_end/panels/profiler/ModuleUIStrings.ts

@@ -53,6 +53,10 @@ export const UIStrings = {
    * @description Text to indicate the status of a heap snapshot in the Performance Pane
    */
   buildingLocations: 'Building locations…',
+  /**
+   * @description Text to indicate the status of a heap snapshot in the Performance Pane
+   */
+  calculatingNativeContextAttribution: 'Calculating native context attribution…',
   /**
    * @description Text to indicate the status of a heap snapshot in the Performance Pane
    */

package/front_end/panels/security/SecurityPanel.ts

@@ -12,7 +12,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import lockIconStyles from './lockIcon.css.js';
@@ -510,26 +510,31 @@ export function getSecurityStateIconForOverview(
   return createIcon(iconName, className);
 }
 
-export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): Element {
+function renderHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): TemplateResult {
   const schemeSeparator = '://';
   const index = url.indexOf(schemeSeparator);
 
   // If the separator is not found, just display the text without highlighting.
   if (index === -1) {
-    const text = document.createElement('span');
-    text.textContent = url;
-    return text;
+    return html`<span>${url}</span>`;
   }
 
-  const highlightedUrl = document.createElement('span');
-  highlightedUrl.classList.add('highlighted-url');
   const scheme = url.substr(0, index);
   const content = url.substr(index + schemeSeparator.length);
-  highlightedUrl.createChild('span', 'url-scheme-' + securityState).textContent = scheme;
-  highlightedUrl.createChild('span', 'url-scheme-separator').textContent = schemeSeparator;
-  highlightedUrl.createChild('span').textContent = content;
 
-  return highlightedUrl;
+  return html`
+    <span class="highlighted-url">
+      <span class=${`url-scheme-${securityState}`}>${scheme}</span>
+      <span class="url-scheme-separator">${schemeSeparator}</span>
+      <span>${content}</span>
+    </span>`;
+}
+
+export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, securityState: string): Element {
+  const fragment = document.createDocumentFragment();
+  // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+  render(renderHighlightedUrl(url, securityState), fragment);
+  return fragment.firstElementChild as Element;
 }
 
 export interface ViewInput {
@@ -1315,11 +1320,14 @@ export class SecurityMainView extends UI.Widget.VBox {
 }
 
 export class SecurityOriginView extends UI.Widget.VBox {
-  private readonly originLockIcon: HTMLElement;
+  readonly #origin: Platform.DevToolsPath.UrlString;
+  readonly #originDisplay: HTMLElement;
+
   constructor(origin: Platform.DevToolsPath.UrlString, originState: OriginState) {
     super({jslog: `${VisualLogging.pane('security.origin-view')}`});
     this.registerRequiredCSS(originViewStyles, lockIconStyles);
     this.setMinimumSize(200, 100);
+    this.#origin = origin;
 
     this.element.classList.add('security-origin-view');
 
@@ -1328,13 +1336,8 @@ export class SecurityOriginView extends UI.Widget.VBox {
     titleDiv.textContent = i18nString(UIStrings.origin);
     UI.ARIAUtils.markAsHeading(titleDiv, 1);
 
-    const originDisplay = titleSection.createChild('div', 'origin-display');
-    this.originLockIcon = originDisplay.createChild('span');
-    const icon = getSecurityStateIconForDetailedView(
-        originState.securityState, `security-property security-property-${originState.securityState}`);
-    this.originLockIcon.appendChild(icon);
-
-    originDisplay.appendChild(createHighlightedUrl(origin, originState.securityState));
+    this.#originDisplay = titleSection.createChild('div', 'origin-display');
+    this.#renderOriginDisplay(originState.securityState);
 
     const originNetworkDiv = titleSection.createChild('div', 'view-network-button');
     const originNetworkButton = UI.UIUtils.createTextButton(i18nString(UIStrings.viewRequestsInNetworkPanel), event => {
@@ -1573,10 +1576,20 @@ export class SecurityOriginView extends UI.Widget.VBox {
   }
 
   setSecurityState(newSecurityState: Protocol.Security.SecurityState): void {
-    this.originLockIcon.removeChildren();
-    const icon = getSecurityStateIconForDetailedView(
-        newSecurityState, `security-property security-property-${newSecurityState}`);
-    this.originLockIcon.appendChild(icon);
+    this.#renderOriginDisplay(newSecurityState);
+  }
+
+  #renderOriginDisplay(securityState: Protocol.Security.SecurityState): void {
+    const icon =
+        getSecurityStateIconForDetailedView(securityState, `security-property security-property-${securityState}`);
+
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`
+      ${icon}
+      ${renderHighlightedUrl(this.#origin, securityState)}
+    `, this.#originDisplay);
+    // clang-format on
   }
 }
 

package/front_end/panels/settings/SettingsScreen.ts

@@ -11,14 +11,13 @@ 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, Link} 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, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
@@ -51,11 +50,6 @@ 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 to display if a setting change requires a reload of DevTools
    */
@@ -276,14 +270,14 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     );
 
     for (const sectionCategory of explicitSectionOrder) {
-      const settingsForSection = preRegisteredSettings.filter(
-          setting => setting.category === sectionCategory && GenericSettingsTab.isSettingVisible(setting));
+      const settingsForSection = preRegisteredSettings.filter(setting => setting.category === sectionCategory &&
+                                                                  GenericSettingsTab.isSettingVisible(setting));
       this.createSectionElement(sectionCategory, settingsForSection);
     }
 
-    const restoreAndReloadButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.restoreDefaultsAndReload), restoreAndReload,
-        {jslogContext: 'settings.restore-defaults-and-reload'});
+    const restoreAndReloadButton =
+        UI.UIUtils.createTextButton(i18nString(UIStrings.restoreDefaultsAndReload), restoreAndReload,
+                                    {jslogContext: 'settings.restore-defaults-and-reload'});
     this.containerElement.appendChild(restoreAndReloadButton);
 
     function restoreAndReload(): void {
@@ -335,8 +329,8 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     this.createStandardSectionElement(sectionName, settings, element);
   }
 
-  private createSectionElement(
-      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[]): void {
+  private createSectionElement(category: Common.Settings.SettingCategory,
+                               settings: Common.Settings.SettingRegistration[]): void {
     // Always create the EXTENSIONS section and append the link handling control.
     if (category === Common.Settings.SettingCategory.EXTENSIONS) {
       this.createExtensionSection(settings);
@@ -350,9 +344,8 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     }
   }
 
-  private createStandardSectionElement(
-      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[],
-      content?: Element): void {
+  private createStandardSectionElement(category: Common.Settings.SettingCategory,
+                                       settings: Common.Settings.SettingRegistration[], content?: Element): void {
     const uiSectionName = Common.Settings.getLocalizedSettingsCategory(category);
     const sectionElement = document.createElement('div');
     for (const settingRegistration of settings) {
@@ -399,15 +392,14 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
 
     const filterSection = this.containerElement.createChild('div');
     filterSection.classList.add('experiments-filter');
-    render(
-        html`
+    render(html`
         <devtools-toolbar>
           <devtools-toolbar-input autofocus type="filter" placeholder=${
-            i18nString(UIStrings.searchExperiments)} style="flex-grow:1" @change=${
-            this.#onFilterChanged.bind(this)}></devtools-toolbar-input>
+               i18nString(UIStrings.searchExperiments)} style="flex-grow:1" @change=${
+               this.#onFilterChanged.bind(this)}></devtools-toolbar-input>
         </devtools-toolbar>
     `,
-        filterSection);
+           filterSection);
     this.renderExperiments('');
   }
 
@@ -455,8 +447,8 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     return subsection;
   }
 
-  private createExperimentCheckbox(experiment: Root.Runtime.Experiment|Root.Runtime.HostExperiment):
-      HTMLParagraphElement {
+  private createExperimentCheckbox(experiment: Root.Runtime.Experiment|
+                                   Root.Runtime.HostExperiment): HTMLParagraphElement {
     const checkbox =
         UI.UIUtils.CheckboxLabel.createWithStringLiteral(experiment.title, experiment.isEnabled(), experiment.name);
     checkbox.classList.add('experiment-label');
@@ -547,8 +539,8 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
 }
 export class Revealer implements
     Common.Revealer.Revealer<Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>> {
-  async reveal(object: Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>):
-      Promise<void> {
+  async reveal(object: Root.Runtime.Experiment|Root.Runtime.HostExperiment|
+               Common.Settings.Setting<unknown>): Promise<void> {
     const context = UI.Context.Context.instance();
     if (object instanceof Root.Runtime.Experiment || object instanceof Root.Runtime.HostExperiment) {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
@@ -599,80 +591,3 @@ 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', 'beyondStylingGemini', 'beyondStylingAntigravity', 'emulationCapabilities'])}
-             </div>
-           </devtools-card>
-         </div>
-       `, target);
-  // clang-format on
-};
-
-const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string> = {
-  aiAnnotations: 'AI auto-annotations',
-  beyondStylingGemini: 'Beyond Styling (Gemini CLI)',
-  beyondStylingAntigravity: 'Beyond Styling (Antigravity CLI)',
-  emulationCapabilities: 'Emulation Capabilities',
-};
-
-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.settingsChangedReloadDevTools));
-  }
-  // 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,14 +24,6 @@ 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
    */
@@ -162,22 +154,6 @@ 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/timeline/TimelineController.ts

@@ -11,6 +11,7 @@ import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 import * as LiveMetrics from '../../models/live-metrics/live-metrics.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as PanelCommon from '../../panels/common/common.js';
+import * as MobileThrottling from '../../panels/mobile_throttling/mobile_throttling.js';
 import * as Tracing from '../../services/tracing/tracing.js';
 
 import * as RecordingMetadata from './RecordingMetadata.js';
@@ -355,9 +356,9 @@ export class TimelineController implements Tracing.TracingManager.TracingManager
     // temporarily disable throttling whilst the final trace event collection
     // takes place. Once it is done, we re-enable it (this is the existing
     // behaviour within DevTools; the throttling settling is sticky + global).
-    const throttlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
+    const throttlingManager = MobileThrottling.ThrottlingManager.throttlingManager();
     const optionDuringRecording = throttlingManager.cpuThrottlingOption();
-    throttlingManager.setCPUThrottlingOption(SDK.CPUThrottlingManager.NoThrottlingOption);
+    throttlingManager.setCPUThrottlingOption(PanelCommon.CPUThrottlingOption.NoThrottlingOption);
 
     this.client.loadingStarted();