chrome-devtools-frontend 1.0.1643855 → 1.0.1645245

package/front_end/panels/network/NetworkLogView.ts

@@ -505,6 +505,11 @@ const UIStrings = {
    * @description Context menu item in Network panel to assess security headers of a request via AI.
    */
   assessSecurityHeaders: 'Assess security headers',
+  /**
+   * @description A comment in a generated command indicating that the URL scheme is unsupported. The placeholder is the comment prefix (e.g. '//' or '#').
+   * @example {//} PH1
+   */
+  unsupportedUrlScheme: '{PH1} Unsupported URL scheme',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -557,6 +562,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly textFilterSetting: Common.Settings.Setting<string>;
   private networkRequestToNode: WeakMap<SDK.NetworkRequest.NetworkRequest, NetworkRequestNode>;
 
+  static #allowedSchemes = new Set(['http:', 'https:', 'ws:', 'wss:', 'data:']);
+
   constructor(
       filterBar: UI.FilterBar.FilterBar, progressBarContainer: Element,
       networkLogLargeRowsSetting: Common.Settings.Setting<boolean>) {
@@ -2319,6 +2326,18 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return requests.filter(request => !request.isBlobRequest());
   }
 
+  static #getValidClipboardUrl(url: string): Platform.DevToolsPath.UrlString|null {
+    try {
+      const parsedUrl = new URL(url);
+      if (!NetworkLogView.#allowedSchemes.has(parsedUrl.protocol)) {
+        return null;
+      }
+      return url as Platform.DevToolsPath.UrlString;
+    } catch {
+      return null;
+    }
+  }
+
   private async generateFetchCall(request: SDK.NetworkRequest.NetworkRequest, style: FetchStyle): Promise<string> {
     const ignoredHeaders = new Set<string>([
       // Internal headers
@@ -2355,7 +2374,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     const credentialHeaders = new Set<string>(['cookie', 'authorization']);
 
-    const url = JSON.stringify(request.url());
+    const validUrl = NetworkLogView.#getValidClipboardUrl(request.url());
+    if (!validUrl) {
+      return i18nString(UIStrings.unsupportedUrlScheme, {PH1: '//'});
+    }
+    const url = JSON.stringify(validUrl);
 
     const requestHeaders = request.requestHeaders();
     const headerData: Headers = requestHeaders.reduce((result, header) => {
@@ -2507,11 +2530,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     // (it may be different from the inspected page platform).
     const escapeString = platform === 'win' ? escapeStringWin : escapeStringPosix;
 
-    // The shell escaping above protects the *shell* parser, but not curl's own
-    // argv parser: if the (HAR-imported) URL begins with '-', curl will parse
-    // it as an option (e.g. "-K//host/share/file" -> --config UNC path).
-    // Passing the URL via --url forces curl to treat it as a URL operand.
-    command.push('--url ' + escapeString(request.url()).replace(/[[{}\]]/g, '\\$&'));
+    const validUrl = NetworkLogView.#getValidClipboardUrl(request.url());
+    if (!validUrl) {
+      return i18nString(UIStrings.unsupportedUrlScheme, {PH1: '#'});
+    }
+    command.push('--url ' + escapeString(validUrl).replace(/[[{}\]]/g, '\\$&'));
 
     let inferredMethod = 'GET';
     const data = [];
@@ -2617,7 +2640,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       return null;
     }
 
-    command.push('-Uri ' + escapeString(request.url()));
+    const validUrl = NetworkLogView.#getValidClipboardUrl(request.url());
+    if (!validUrl) {
+      return i18nString(UIStrings.unsupportedUrlScheme, {PH1: '#'});
+    }
+    command.push('-Uri ' + escapeString(validUrl));
 
     if (request.requestMethod !== 'GET') {
       command.push('-Method ' + escapeString(request.requestMethod));

package/front_end/panels/profiler/HeapProfileView.ts

@@ -628,7 +628,6 @@ export class NodeFormatter implements Formatter {
     const target = heapProfilerModel ? heapProfilerModel.target() : null;
     const options = {
       className: 'profile-node-file',
-      inlineFrameIndex: 0,
     };
     return this.profileView.linkifier().maybeLinkifyConsoleCallFrame(target, node.profileNode.callFrame, options);
   }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -1467,7 +1467,6 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
           String(allocationNode.scriptId) as Protocol.Runtime.ScriptId,
           allocationNode.scriptName as Platform.DevToolsPath.UrlString, allocationNode.line - 1, {
             columnNumber: allocationNode.column - 1,
-            inlineFrameIndex: 0,
             className: 'profile-node-file',
           });
       urlElement.style.maxWidth = '75%';

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1949,7 +1949,7 @@ export class HeapAllocationStackView extends UI.Widget.Widget {
         continue;
       }
       const target = this.heapProfilerModel ? this.heapProfilerModel.target() : null;
-      const options = {columnNumber: frame.column - 1, inlineFrameIndex: 0};
+      const options = {columnNumber: frame.column - 1};
       const urlElement = this.linkifier.linkifyScriptLocation(
           target, String(frame.scriptId) as Protocol.Runtime.ScriptId,
           frame.scriptName as Platform.DevToolsPath.UrlString, frame.line - 1, options);

package/front_end/panels/settings/components/SyncSection.ts

@@ -346,7 +346,7 @@ export class SyncSection extends UI.Widget.Widget {
     // TODO: investigate if /advance link is alive
     const warningLink =
         this.#syncInfo.isSyncActive ? 'chrome://settings/syncSetup/advanced' : 'chrome://settings/syncSetup';
-    UIHelpers.openInNewTab(warningLink);
+    UIHelpers.openInNewTab(warningLink, /* allowPrivileged=*/ true);
     event.consume();
   }
 

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -69,9 +69,10 @@ export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.SOFT_NAVIGATION_START]: 1,
   [Trace.Types.Events.Name.MARK_LOAD]: 2,
   [Trace.Types.Events.Name.MARK_FCP]: 3,
-  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 4,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 5,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 6,
+  [Trace.Types.Events.Name.MARK_SOFT_FCP]: 4,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 5,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 6,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 7,
 };
 
 // Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
@@ -676,7 +677,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
             event.name === Trace.Types.Events.Name.SOFT_NAVIGATION_START ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION ||
-            event.name === Trace.Types.Events.Name.MARK_FCP ||
+            event.name === Trace.Types.Events.Name.MARK_FCP || event.name === Trace.Types.Events.Name.MARK_SOFT_FCP ||
             event.name === Trace.Types.Events.Name.MARK_DOM_CONTENT ||
             event.name === Trace.Types.Events.Name.MARK_LOAD);
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2435,6 +2435,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   async loadingStarted(): Promise<void> {
     this.#changeView({mode: 'STATUS_PANE_OVERLAY'});
 
+    // If recording was stopped automatically (e.g. page reload or AI-triggered trace),
+    // we must transition to STOP_PENDING so that loadingComplete() knows the resulting
+    // trace is a fresh recording.
+    if (this.state === State.RECORDING) {
+      this.setState(State.STOP_PENDING);
+    }
+
     if (this.statusDialog) {
       this.statusDialog.remove();
     }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -668,7 +668,6 @@ export class TimelineUIUtils {
           const options = {
             tabStop: true,
             showColumnNumber: false,
-            inlineFrameIndex: 0,
           };
           details = LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options);
         }
@@ -763,7 +762,6 @@ export class TimelineUIUtils {
       lineNumber,
       columnNumber,
       showColumnNumber: true,
-      inlineFrameIndex: 0,
       className: 'timeline-details',
       tabStop: true,
       omitOrigin,
@@ -788,14 +786,13 @@ export class TimelineUIUtils {
     const options = {
       className: 'timeline-details',
       tabStop: true,
-      inlineFrameIndex: 0,
       showColumnNumber: true,
       columnNumber: frame.columnNumber,
       lineNumber: frame.lineNumber,
       maxLength,
     };
     if (isFreshOrEnhanced) {
-      return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true, inlineFrameIndex: 0});
+      return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true});
     }
     return LegacyComponents.Linkifier.Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, options);
   }
@@ -809,17 +806,21 @@ export class TimelineUIUtils {
         name = 'Largest Contentful Paint';
         break;
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
-        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations';
         name = 'Soft Largest Contentful Paint';
         break;
       case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
-        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations';
         name = 'Soft Navigations';
         break;
       case Trace.Types.Events.Name.MARK_FCP:
         link = 'https://web.dev/first-contentful-paint/';
         name = 'First Contentful Paint';
         break;
+      case Trace.Types.Events.Name.MARK_SOFT_FCP:
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations';
+        name = 'Soft First Contentful Paint';
+        break;
       default:
         break;
     }
@@ -963,7 +964,7 @@ export class TimelineUIUtils {
 
     // Add timestamp to user timings, including custom extensibility markers
     if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming) ||
-        Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
+        Trace.Types.Extensions.isSyntheticExtensionEntry(event) || Trace.Types.Events.isSoftNavigationStart(event)) {
       const adjustedEventTimeStamp = timeStampForEventAdjustedForClosestNavigationIfPossible(
           event,
           parsedTrace,
@@ -1228,7 +1229,6 @@ export class TimelineUIUtils {
           const options = {
             tabStop: true,
             showColumnNumber: false,
-            inlineFrameIndex: 0,
           };
           contentHelper.appendElementRow(
               i18nString(UIStrings.imageUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
@@ -1242,7 +1242,6 @@ export class TimelineUIUtils {
           const options = {
             tabStop: true,
             showColumnNumber: false,
-            inlineFrameIndex: 0,
           };
           contentHelper.appendElementRow(
               i18nString(UIStrings.stylesheetUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
@@ -1444,6 +1443,7 @@ export class TimelineUIUtils {
 
       case Trace.Types.Events.Name.MARK_FIRST_PAINT:
       case Trace.Types.Events.Name.MARK_FCP:
+      case Trace.Types.Events.Name.MARK_SOFT_FCP:
       case Trace.Types.Events.Name.MARK_LOAD:
       case Trace.Types.Events.Name.MARK_DOM_CONTENT: {
         const adjustedEventTimeStamp = timeStampForEventAdjustedForClosestNavigationIfPossible(
@@ -2074,7 +2074,7 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
-        color = 'var(--sys-color-blue)';
+        color = 'var(--color-text-primary)';
         tall = true;
         break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
@@ -2094,6 +2094,7 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FCP:
+      case Trace.Types.Events.Name.MARK_SOFT_FCP:
         color = 'var(--sys-color-green-bright)';
         tall = true;
         break;
@@ -2299,7 +2300,6 @@ export class TimelineDetailsContentHelper {
       tabStop: true,
       columnNumber: startColumn,
       showColumnNumber: true,
-      inlineFrameIndex: 0,
       text,
       omitOrigin,
     };
@@ -2316,8 +2316,7 @@ export class TimelineDetailsContentHelper {
       return;
     }
     const locationContent = document.createElement('span');
-    const link = this.#linkifier.maybeLinkifyScriptLocation(
-        this.target, null, url, startLine, {tabStop: true, inlineFrameIndex: 0});
+    const link = this.#linkifier.maybeLinkifyScriptLocation(this.target, null, url, startLine, {tabStop: true});
     if (!link) {
       return;
     }
@@ -2407,7 +2406,7 @@ export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event:
     return true;
   }
 
-  if (Trace.Types.Events.isFirstContentfulPaint(event) || Trace.Types.Events.isFirstPaint(event)) {
+  if (Trace.Types.Events.isAnyFirstContentfulPaint(event) || Trace.Types.Events.isFirstPaint(event)) {
     return event.args.frame === parsedTrace.data.Meta.mainFrameId;
   }
 

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -37,12 +37,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  */
 export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.NAVIGATION_START]: 0,
-  [Trace.Types.Events.Name.MARK_LOAD]: 1,
-  [Trace.Types.Events.Name.MARK_FCP]: 2,
+  [Trace.Types.Events.Name.SOFT_NAVIGATION_START]: 1,
   [Trace.Types.Events.Name.MARK_FIRST_PAINT]: 2,
-  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 5,
+  [Trace.Types.Events.Name.MARK_FCP]: 3,
+  [Trace.Types.Events.Name.MARK_SOFT_FCP]: 4,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 5,
+  [Trace.Types.Events.Name.MARK_LOAD]: 6,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 7,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 8,
 };
 
 export class TimingsTrackAppender implements TrackAppender {

package/front_end/panels/timeline/components/LayoutShiftDetails.ts

@@ -436,7 +436,6 @@ function linkifyURL(url: Platform.DevToolsPath.UrlString): HTMLElement {
   return LegacyComponents.Linkifier.Linkifier.linkifyURL(url, {
     tabStop: true,
     showColumnNumber: false,
-    inlineFrameIndex: 0,
     maxLength: MAX_URL_LENGTH,
   });
 }

package/front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -267,7 +267,6 @@ function renderURL(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.Tem
   const options: LegacyComponents.Linkifier.LinkifyURLOptions = {
     tabStop: true,
     showColumnNumber: false,
-    inlineFrameIndex: 0,
     maxLength: MAX_URL_LENGTH,
   };
   const linkifiedURL = LegacyComponents.Linkifier.Linkifier.linkifyURL(
@@ -439,7 +438,6 @@ function renderInitiatedBy(
   const options: LegacyComponents.Linkifier.LinkifyOptions = {
     tabStop: true,
     showColumnNumber: true,
-    inlineFrameIndex: 0,
   };
   // If we have a stack trace, that is the most reliable way to get the initiator data and display a link to the source.
   if (hasStackTrace) {

package/front_end/panels/timeline/components/insights/ForcedReflow.ts

@@ -53,7 +53,6 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
         callFrame.lineNumber, {
           columnNumber: callFrame.columnNumber,
           showColumnNumber: true,
-          inlineFrameIndex: 0,
           tabStop: true,
         });
 

package/front_end/panels/timeline/components/insights/NodeLink.ts

@@ -39,7 +39,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     const options = {
       tabStop: true,
       showColumnNumber: false,
-      inlineFrameIndex: 0,
       maxLength: MAX_URL_LENGTH,
     };
     const linkEl = LegacyComponents.Linkifier.Linkifier.linkifyURL(fallbackUrl, options);

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1627,6 +1627,8 @@ export class Overlays extends EventTarget {
       markers: HTMLElement, marker: HTMLElement): void {
     if (Trace.Types.Events.isSoftNavigationStart(event)) {
       name = 'Soft Nav';
+    } else if (Trace.Types.Events.isSoftFirstContentfulPaint(event)) {
+      name = 'Soft FCP';
     } else if (Trace.Types.Events.isSoftLargestContentfulPaintCandidate(event)) {
       name = 'Soft LCP';
     }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: e1605f15bac37245745e5fb8327995ededbe2337
+Revision: db882e11eb73564831cdf0a63b661a81332df665
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/helpers/OpenInNewTab.ts

@@ -57,15 +57,15 @@ import * as SDK from '../../core/sdk/sdk.js';
  * @throws TypeError if `url` is not a valid URL.
  * @see https://en.wikipedia.org/wiki/UTM_parameters
  */
-export function openInNewTab(url: URL|string): void {
+export function openInNewTab(url: URL|string, allowPrivileged?: boolean): void {
   url = new URL(url);
   if (Common.ParsedURL.schemeIs(url, 'javascript:')) {
     return;
   }
 
   // Navigating to a chrome:// link via a normal anchor doesn't work, so we "navigate"
-  // there using CDP.
-  if (Common.ParsedURL.schemeIs(url, 'chrome:')) {
+  // there using CDP if explicitly requested.
+  if (allowPrivileged && Common.ParsedURL.schemeIs(url, 'chrome:')) {
     const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
     if (rootTarget === null) {
       return;

package/front_end/ui/kit/link/Link.ts

@@ -60,7 +60,7 @@ export class Link extends HTMLElement {
       return;
     }
 
-    UIHelpers.openInNewTab(href);
+    UIHelpers.openInNewTab(href, this.allowPrivileged);
 
     event.consume();
   }
@@ -73,6 +73,18 @@ export class Link extends HTMLElement {
     this.setAttribute('href', href);
   }
 
+  get allowPrivileged(): boolean {
+    return this.hasAttribute('allow-privileged');
+  }
+
+  set allowPrivileged(allowPrivileged: boolean) {
+    if (allowPrivileged) {
+      this.setAttribute('allow-privileged', '');
+    } else {
+      this.removeAttribute('allow-privileged');
+    }
+  }
+
   get jslogContext(): string|null {
     return this.getAttribute('jslogcontext');
   }
@@ -98,7 +110,7 @@ export class Link extends HTMLElement {
       oldValue: string|null,
       newValue: string|null,
       ): void {
-    if (oldValue !== newValue) {
+    if (oldValue === newValue) {
       return;
     }
     if (name === 'jslogcontext') {
@@ -145,9 +157,11 @@ export class Link extends HTMLElement {
       className?: string,
       jsLogContext?: string,
       tabindex = 0,
+      allowPrivileged = false,
       ): Link {
     const link = new Link();
     link.href = url as Platform.DevToolsPath.UrlString;
+    link.allowPrivileged = allowPrivileged;
     linkText = linkText ?? url;
     link.textContent = Platform.StringUtilities.trimMiddle(linkText, 150);
 

package/front_end/ui/legacy/InspectorDrawerView.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
@@ -129,11 +130,19 @@ export class InspectorDrawerView {
     this.#isConsoleOpenInMainAndDrawer = options.isConsoleOpenInMainAndDrawer;
     this.#drawerMinimizedSetting =
         Common.Settings.Settings.instance().createLocalSetting('inspector.drawer-minimized', false);
-    this.tabbedLocation = ViewManager.instance().createTabbedLocation(
-        options.revealDrawer, 'drawer-view', true, true,
-        {isLocationVisible: options.isVisible, tabbedPaneFactory: () => new DrawerTabbedPane()});
-    this.#moreTabsButton = this.tabbedLocation.enableMoreTabsButton();
-    this.#moreTabsButton.setTitle(i18nString(UIStrings.moreTools));
+    this.tabbedLocation = ViewManager.instance().createTabbedLocation(options.revealDrawer, 'drawer-view', true, true, {
+      isLocationVisible: options.isVisible,
+      tabbedPaneFactory: () => new DrawerTabbedPane(),
+      plusButton: {title: i18nString(UIStrings.moreTools), jslogContext: 'plus-button-drawer'},
+    });
+    // When the plus button is disabled we keep the legacy left-toolbar
+    // three-dot menu so users can still reach hidden / addable tools.
+    if (Root.Runtime.hostConfig.devToolsPlusButton?.enabled) {
+      this.#moreTabsButton = null;
+    } else {
+      this.#moreTabsButton = this.tabbedLocation.enableMoreTabsButton();
+      this.#moreTabsButton.setTitle(i18nString(UIStrings.moreTools));
+    }
     this.tabbedPane = this.tabbedLocation.tabbedPane() as DrawerTabbedPane;
     this.tabbedPane.element.classList.add('drawer-tabbed-pane');
     this.tabbedPane.element.setAttribute('jslog', `${VisualLogging.drawer()}`);

package/front_end/ui/legacy/InspectorView.ts

@@ -228,7 +228,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.tabbedLocation = ViewManager.instance().createTabbedLocation(
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront.bind(
             Host.InspectorFrontendHost.InspectorFrontendHostInstance),
-        'panel', true, true, {defaultTab: Root.Runtime.Runtime.queryParam('panel')});
+        'panel', true, true, {
+          defaultTab: Root.Runtime.Runtime.queryParam('panel'),
+          plusButton: {jslogContext: 'plus-button-panel'},
+        });
 
     this.tabbedPane = this.tabbedLocation.tabbedPane();
     this.tabbedPane.setMinimumSize(MIN_MAIN_PANEL_WIDTH, 0);

package/front_end/ui/legacy/PlusButton.ts

@@ -108,8 +108,13 @@ export class PlusButtonPresenter {
     for (const view of views()) {
       // Skip views that already have a tab. Hidden tabs are already listed
       // in the overflow section above, and visible tabs are accessible
-      // directly in the tab strip.
+      // directly in the tab strip. Track their id and title so the
+      // cross-location loop below cannot offer a same-titled duplicate
+      // (e.g. drawer "Console" while the panel "Console" is already
+      // visible — they have different view ids).
       if (tabbedPane.hasTab(view.viewId())) {
+        seenIds.add(view.viewId());
+        seenTitles.add(view.title());
         continue;
       }
       // Transient views are not user-addable.

package/front_end/ui/legacy/Widget.ts

@@ -483,6 +483,12 @@ export type WidgetOptions<ContentTypeT extends HTMLElement|DocumentFragment = HT
                                         classes?: never,
                                       });
 
+const enum UpdateState {
+  NORMAL = 'NORMAL',            // Standard state: update can be aborted for efficiency.
+  INTERRUPTED = 'INTERRUPTED',  // An update was physically running and got aborted; replacement must be shielded.
+  SHIELDED = 'SHIELDED',        // Current update is a replacement for an interrupted one and cannot be aborted.
+}
+
 export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElement> {
   readonly element: HTMLElement;
   #contentElement: ContentTypeT;
@@ -501,6 +507,7 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
   #externallyManaged?: boolean;
   #updateComplete = UPDATE_COMPLETE;
   #updateController?: AbortController;
+  #updateState = UpdateState.NORMAL;
 
   /**
    * Constructs a new `Widget` with the given `options`.
@@ -1165,12 +1172,17 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
   }
 
   addUpdateController(controller: AbortController): void {
+    const wasInterrupted = this.#updateState === UpdateState.INTERRUPTED;
     this.#updateController?.abort();
     this.#updateController = controller;
+    // Transition to SHIELDED if we are replacing a starved update, otherwise reset to NORMAL.
+    this.#updateState = wasInterrupted ? UpdateState.SHIELDED : UpdateState.NORMAL;
   }
 
   cancelUpdateController(): void {
     this.#updateController?.abort();
+    this.#updateController = undefined;
+    this.#updateState = UpdateState.NORMAL;
   }
 
   /**
@@ -1180,7 +1192,13 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
    * frame.
    */
   requestUpdate(): void {
-    this.#updateController?.abort();
+    // If the state is SHIELDED, we skip the abort call entirely to break the starvation loop.
+    if (this.#updateState !== UpdateState.SHIELDED) {
+      if (currentlyProcessed.has(this)) {
+        this.#updateState = UpdateState.INTERRUPTED;
+      }
+      this.#updateController?.abort();
+    }
     this.#updateComplete = enqueueWidgetUpdate(this);
   }