chrome-devtools-frontend 1.0.1654411 → 1.0.1656897

package/front_end/panels/network/RequestInitiatorView.ts

@@ -2,7 +2,6 @@
 // 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 i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -10,7 +9,7 @@ import * as Logs from '../../models/logs/logs.js';
 import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import requestInitiatorViewStyles from './requestInitiatorView.css.js';
@@ -34,6 +33,20 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestInitiatorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const MAX_URL_LENGTH = 150;
+
+function trimUrl(url: string): string {
+  if (url.length <= MAX_URL_LENGTH) {
+    return url;
+  }
+  // To avoid performance issues with extremely long URLs (e.g. 2MB base64 data URLs),
+  // we do a fast O(1) slice instead of using the O(N) Platform.StringUtilities.trimMiddle
+  // utility which instantiates Intl.Segmenter and iterates over every grapheme.
+  const halfMaxLength = Math.floor(MAX_URL_LENGTH / 2);
+  return url.substring(0, halfMaxLength) + '…' + url.substring(url.length - halfMaxLength);
+}
+
 export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
   stackTrace: StackTrace.StackTrace.StackTrace|null;
@@ -87,11 +100,17 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
         const isCurrentRequest = (index === initiators.length - 1);
         const hasFurtherInitiatedNodes = index + 1 < initiators.length;
         const renderedChildren = isCurrentRequest ? renderInitiatedNodes(initiated, request, visited) : nothing;
+        const url = request.url();
+        // To avoid layout and rendering lag from extremely long URLs (like data: URLs),
+        // we only set the title/tooltip attribute if the URL is under 2000 characters.
+        const title = url.length < 2000 ? url : undefined;
 
         // clang-format off
         return html`
           <li role="treeitem" ?selected=${isCurrentRequest} aria-expanded="true" open>
-            <span style=${isCurrentRequest ? 'font-weight: bold' : ''}>${request.url()}</span>
+            <span style=${isCurrentRequest ? 'font-weight: bold' : ''} title=${Directives.ifDefined(title) as string}>
+              ${trimUrl(url)}
+            </span>
             ${hasFurtherInitiatedNodes || renderedChildren !== nothing ? html`
               <ul role="group">
                 ${renderInitiatorNodes(initiators, index + 1, initiated, visited)}
@@ -121,9 +140,15 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             visited.add(child);
           }
           const renderedChildren = shouldRecurse ? renderInitiatedNodes(initiated, child, visited) : nothing;
+          const url = child.url();
+          // To avoid layout and rendering lag from extremely long URLs (like data: URLs),
+          // we only set the title/tooltip attribute if the URL is under 2000 characters.
+          const title = url.length < 2000 ? url : undefined;
           return html`
         <li role="treeitem" aria-expanded="true" open>
-          <span>${child.url()}</span>
+          <span title=${Directives.ifDefined(title) as string}>
+            ${trimUrl(url)}
+          </span>
           ${renderedChildren !== nothing ? html`<ul role="group">${renderedChildren}</ul>` : nothing}
         </li>
       `;

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

@@ -17,9 +17,8 @@
   margin: var(--sys-size-3) 0;
 }
 
-.row.header-editable {
-  font-family: var(--monospace-font-family);
-  font-size: var(--monospace-font-size);
+.row:hover {
+  background-color: var(--sys-color-state-hover-on-subtle);
 }
 
 .header-name {
@@ -57,7 +56,8 @@
   display: flex;
   overflow-wrap: anywhere;
   margin-inline-end: 14px;
-  font: var(--sys-typescale-body4-regular);
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
 }
 
 .header-badge-text {
@@ -85,10 +85,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;
 }
 
@@ -117,7 +119,7 @@
 }
 
 .inline-icon {
-  vertical-align: middle;
+  margin-top: var(--sys-size-2);
 }
 
 .row-flex-icon {

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

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
-import '../../../ui/legacy/legacy.js';
 
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -14,6 +13,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.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';
 
@@ -23,6 +23,10 @@ import headerSectionRowStyles from './HeaderSectionRow.css.js';
 const {render, html} = Lit;
 
 const UIStrings = {
+  /**
+   * @description A context menu item to copy the value of a header.
+   */
+  copyValue: 'Copy value',
   /**
    * @description Comment used in decoded X-Client-Data HTTP header output in Headers View of the Network panel
    */
@@ -197,6 +201,7 @@ export class HeaderSectionRow extends HTMLElement {
         <div
           class=${headerValueClasses}
           @copy=${():void => Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue)}
+          @contextmenu=${this.#onContextMenu}
         >
           ${this.#renderHeaderValue()}
         </div>
@@ -483,6 +488,20 @@ export class HeaderSectionRow extends HTMLElement {
     }
     event.preventDefault();
   }
+
+  #onContextMenu(event: Event): void {
+    if (!this.#header) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyValue), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#header?.value || '');
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
+    });
+    void contextMenu.show();
+  }
 }
 
 customElements.define('devtools-header-section-row', HeaderSectionRow);

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/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();
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -316,6 +316,9 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let timelinePanelInstance: TimelinePanel|undefined;
 
+// Total time to wait for source maps to load before giving up so trace processing can proceed.
+const SOURCE_MAP_LOAD_TIMEOUT_MS = 5000;
+
 /**
  * Represents the states that the timeline panel can be in.
  * If you need to change the panel's view, use the {@link TimelinePanel.#changeView} method.
@@ -2649,12 +2652,19 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     };
 
     metadata.sourceMaps = [];
+    await this.#handleSourceMapPromise(parsedTrace, handleScript);
+  }
 
+  async #handleSourceMapPromise(parsedTrace: Trace.TraceModel.ParsedTrace,
+                                handleScript: (script: Trace.Handlers.ModelHandlers.Scripts.Script) => Promise<void>):
+      Promise<void> {
     const promises = [];
     for (const script of parsedTrace?.data.Scripts.scripts.values() ?? []) {
       promises.push(handleScript(script));
     }
-    await Promise.all(promises);
+
+    const timeout = new Promise<void>(resolve => setTimeout(resolve, SOURCE_MAP_LOAD_TIMEOUT_MS));
+    await Promise.race([Promise.allSettled(promises), timeout]);
   }
 
   #createSourceMapResolver(isFreshRecording: boolean, metadata: Trace.Types.File.MetaData|null):
@@ -2688,7 +2698,8 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       return await debuggerModel.sourceMapManager().sourceMapForClientPromise(script);
     }
 
-    return async function resolveSourceMap(params: Trace.Types.Configuration.ResolveSourceMapParams) {
+    async function resolveSourceMap(params: Trace.Types.Configuration.ResolveSourceMapParams):
+        Promise<SDK.SourceMap.SourceMap|null> {
       const {scriptId, scriptUrl, sourceUrl, sourceMapUrl, frame, cachedRawSourceMap} = params;
 
       if (cachedRawSourceMap) {
@@ -2745,7 +2756,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       const payload = await SDK.SourceMapManager.tryLoadSourceMap(
           TimelinePanel.instance().#resourceLoader, sourceMapUrl, initiator);
       return payload ? new SDK.SourceMap.SourceMap(sourceUrl, sourceMapUrl, payload) : null;
-    };
+    }
+
+    const timeout = new Promise<null>(resolve => setTimeout(() => resolve(null), SOURCE_MAP_LOAD_TIMEOUT_MS));
+    return function resolveSourceMapWithTimeout(params: Trace.Types.Configuration.ResolveSourceMapParams):
+        Promise<SDK.SourceMap.SourceMap|null> {
+          return Promise.race([resolveSourceMap(params), timeout]);
+        };
   }
 
   async #retainResourceContentsForEnhancedTrace(