chrome-devtools-frontend 1.0.1604514 → 1.0.1605219

package/front_end/panels/timeline/thirdPartyTreeView.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 
-devtools-performance-third-party-tree-view {
+:host {
   .background-bar-container {
     /* Dont need the bars in 3p table */
     display: none;
@@ -85,7 +85,7 @@ devtools-performance-third-party-tree-view {
     border-left: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
-  &[max-rows] .widget.vbox.timeline-tree-view {
+  .has-max-rows {
     /* 21px for header + max-rows * 22px rows */
     max-height: calc(21px + (var(--max-rows) * 22px));
     padding: var(--sys-size-3);

package/front_end/ui/components/buttons/button.css

@@ -185,8 +185,8 @@ button {
     padding-left: var(--sys-size-4);
 
     devtools-icon {
-      width: var(--sys-size-9);
-      height: var(--sys-size-9);
+      width: var(--sys-size-8);
+      height: var(--sys-size-8);
       margin-right: var(--sys-size-2);
     }
   }

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -56,17 +56,6 @@ export interface AiCodeCompletionConfig {
   onRequestTriggered: () => void;
   onResponseReceived: () => void;
   panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
-  getCompletionHint?: () => string | null;
-  getCurrentText?: () => string;
-  setAiAutoCompletion?: (args: {
-    text: string,
-    from: number,
-    startTime: number,
-    onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
-    clearCachedRequest: () => void,
-    rpcGlobalId?: Host.AidaClient.RpcGlobalId,
-    sampleId?: number,
-  }|null) => void;
 }
 
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;

package/front_end/ui/legacy/InspectorDrawerView.ts

@@ -0,0 +1,206 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as VisualLogging from '../visual_logging/visual_logging.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
+import drawerTabbedPaneStyles from './inspectorDrawerTabbedPane.css.js';
+import {ShowMode, type SplitWidget} from './SplitWidget.js';
+import {type EventData, Events as TabbedPaneEvents, TabbedPane, type TabbedPaneTabDelegate} from './TabbedPane.js';
+import {ToolbarButton, type ToolbarMenuButton} from './Toolbar.js';
+import type {TabbedViewLocation} from './View.js';
+import {ViewManager} from './ViewManager.js';
+
+class DrawerTabbedPane extends TabbedPane {
+  constructor() {
+    super();
+    this.registerRequiredCSS(drawerTabbedPaneStyles);
+  }
+}
+
+const UIStrings = {
+  /**
+   * @description Title of more tabs button in the drawer view.
+   */
+  moreTools: 'More Tools',
+  /**
+   * @description Text that appears when hover over the close button on the drawer view.
+   */
+  closeDrawer: 'Close drawer',
+  /**
+   * @description Text that appears when hover the toggle orientation button.
+   */
+  toggleDrawerOrientation: 'Toggle drawer orientation',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorDrawerView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface InspectorDrawerViewOptions {
+  splitWidget: SplitWidget;
+  revealDrawer: () => void;
+  isVisible: () => boolean;
+  drawerLabel: string;
+  onHide: () => void;
+  onToggleOrientation: () => void;
+  onTabSelected: (tabId: string) => void;
+  tabDelegate: TabbedPaneTabDelegate;
+  enableOrientationToggle: boolean;
+  isVertical: boolean;
+  verticalExpandedMinimumWidth: number;
+  minimumSizes: {
+    inspectorWidthWhenVertical: number,
+    inspectorWidthWhenHorizontal: number,
+    inspectorHeight: number,
+  };
+  setInspectorMinimumSize: (width: number, height: number) => void;
+}
+
+export class InspectorDrawerView {
+  readonly tabbedLocation: TabbedViewLocation;
+  readonly tabbedPane: DrawerTabbedPane;
+  readonly #splitWidget: SplitWidget;
+  readonly #verticalExpandedMinimumWidth: number;
+  readonly #minimumSizes: {
+    inspectorWidthWhenVertical: number,
+    inspectorWidthWhenHorizontal: number,
+    inspectorHeight: number,
+  };
+  readonly #setInspectorMinimumSize: (width: number, height: number) => void;
+  readonly #toggleOrientationButton: ToolbarButton;
+  readonly #closeDrawerButton: ToolbarButton;
+  readonly #moreTabsButton: ToolbarMenuButton|null;
+  readonly #onTabSelected: (tabId: string) => void;
+
+  constructor(options: InspectorDrawerViewOptions) {
+    this.#splitWidget = options.splitWidget;
+    this.#verticalExpandedMinimumWidth = options.verticalExpandedMinimumWidth;
+    this.#minimumSizes = options.minimumSizes;
+    this.#setInspectorMinimumSize = options.setInspectorMinimumSize;
+    this.#onTabSelected = options.onTabSelected;
+    this.tabbedLocation = ViewManager.instance().createTabbedLocation(
+        options.revealDrawer, 'drawer-view', true, true, undefined, options.isVisible, () => new DrawerTabbedPane());
+    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()}`);
+
+    this.#closeDrawerButton = new ToolbarButton(i18nString(UIStrings.closeDrawer), 'cross');
+    this.#closeDrawerButton.element.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
+    this.#closeDrawerButton.addEventListener(ToolbarButton.Events.CLICK, options.onHide);
+
+    this.#toggleOrientationButton = new ToolbarButton(
+        i18nString(UIStrings.toggleDrawerOrientation), options.isVertical ? 'dock-bottom' : 'dock-right');
+    this.#toggleOrientationButton.element.setAttribute(
+        'jslog', `${VisualLogging.toggle('toggle-drawer-orientation').track({click: true})}`);
+    this.#toggleOrientationButton.addEventListener(ToolbarButton.Events.CLICK, options.onToggleOrientation);
+
+    if (options.enableOrientationToggle) {
+      this.tabbedPane.rightToolbar().appendToolbarItem(this.#toggleOrientationButton);
+    }
+    this.tabbedPane.rightToolbar().appendToolbarItem(this.#closeDrawerButton);
+    this.tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.#drawerTabSelected, this);
+    this.tabbedPane.setTabDelegate(options.tabDelegate);
+    const selectedDrawerTab = this.tabbedPane.selectedTabId;
+    if (this.#splitWidget.showMode() !== ShowMode.ONLY_MAIN && selectedDrawerTab) {
+      this.#onTabSelected(selectedDrawerTab);
+    }
+
+    const drawerElement = this.tabbedPane.element;
+    ARIAUtils.markAsComplementary(drawerElement);
+    ARIAUtils.setLabel(drawerElement, options.drawerLabel);
+    this.#splitWidget.installResizer(this.tabbedPane.headerElement());
+    this.#splitWidget.setSidebarWidget(this.tabbedPane);
+
+    this.tabbedPane.headerElement().setAttribute('jslog', `${VisualLogging.toolbar('drawer').track({
+                                                   drag: true,
+                                                   keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space',
+                                                 })}`);
+    this.#updatePresentation();
+  }
+
+  setVertical(shouldBeVertical: boolean): void {
+    if (shouldBeVertical === this.#splitWidget.isVertical()) {
+      return;
+    }
+
+    const previousShowMode = this.#splitWidget.showMode();
+    this.#splitWidget.setVertical(shouldBeVertical);
+    this.#updatePresentation();
+    this.applyState(previousShowMode);
+  }
+
+  applyState(showMode: ShowMode): void {
+    if (this.#splitWidget.showMode() !== showMode) {
+      switch (showMode) {
+        case ShowMode.BOTH:
+          this.#splitWidget.showBoth();
+          break;
+        case ShowMode.ONLY_MAIN:
+          this.#splitWidget.hideSidebar();
+          break;
+        case ShowMode.ONLY_SIDEBAR:
+          this.#splitWidget.hideMain();
+          break;
+      }
+    }
+    this.#updatePresentation();
+  }
+
+  show(hasTargetDrawer: boolean): void {
+    this.tabbedPane.setAutoSelectFirstItemOnShow(!hasTargetDrawer);
+    this.#splitWidget.showBoth();
+  }
+
+  hide(): void {
+    this.#splitWidget.hideSidebar(true);
+  }
+
+  drawerVisible(): boolean {
+    return this.tabbedPane.isShowing();
+  }
+
+  drawerSize(): number {
+    return this.#splitWidget.sidebarSize();
+  }
+
+  setDrawerSize(size: number): void {
+    this.#splitWidget.setSidebarSize(size);
+  }
+
+  totalSize(): number {
+    return this.#splitWidget.totalSize();
+  }
+
+  isVertical(): boolean {
+    return this.#splitWidget.isVertical();
+  }
+
+  updatePresentation(isVertical: boolean): void {
+    this.#toggleOrientationButton.setGlyph(isVertical ? 'dock-bottom' : 'dock-right');
+
+    if (isVertical) {
+      this.tabbedPane.setMinimumSize(this.#verticalExpandedMinimumWidth, 27);
+    } else {
+      this.tabbedPane.setMinimumSize(0, 27);
+    }
+  }
+
+  #updatePresentation(): void {
+    const drawerIsVertical = this.#splitWidget.isVertical();
+    this.#setInspectorMinimumSize(
+        drawerIsVertical ? this.#minimumSizes.inspectorWidthWhenVertical :
+                           this.#minimumSizes.inspectorWidthWhenHorizontal,
+        this.#minimumSizes.inspectorHeight);
+    this.updatePresentation(drawerIsVertical);
+  }
+
+  #drawerTabSelected(event: Common.EventTarget.EventTargetEvent<EventData>): void {
+    const {tabId} = event.data;
+    this.#onTabSelected(tabId);
+  }
+}

package/front_end/ui/legacy/InspectorView.ts

@@ -21,25 +21,17 @@ import {Dialog} from './Dialog.js';
 import {DockController, DockState, Events as DockControllerEvents} from './DockController.js';
 import {GlassPane} from './GlassPane.js';
 import {Infobar, Type as InfobarType} from './Infobar.js';
+import {InspectorDrawerView} from './InspectorDrawerView.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
 import type {Panel} from './Panel.js';
-import {ShowMode, SplitWidget} from './SplitWidget.js';
+import {SplitWidget} from './SplitWidget.js';
 import {type EventData, Events as TabbedPaneEvents, type TabbedPane, type TabbedPaneTabDelegate} from './TabbedPane.js';
-import {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
 import {ViewManager} from './ViewManager.js';
 import {VBox, type Widget, WidgetFocusRestorer} from './Widget.js';
 
 const UIStrings = {
-  /**
-   * @description Title of more tabs button in inspector view
-   */
-  moreTools: 'More Tools',
-  /**
-   * @description Text that appears when hovor over the close button on the drawer view
-   */
-  closeDrawer: 'Close drawer',
   /**
    * @description The ARIA label for the main tab bar that contains the DevTools panels
    */
@@ -113,10 +105,6 @@ const UIStrings = {
    * @description Label for a button which opens a file picker.
    */
   selectFolder: 'Select folder',
-  /**
-   * @description Text that appears when hover the toggle orientation button
-   */
-  toggleDrawerOrientation: 'Toggle drawer orientation',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/InspectorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -150,6 +138,7 @@ export interface DrawerOrientationByDockMode {
 export class InspectorView extends VBox implements ViewLocationResolver {
   private readonly drawerOrientationByDockSetting: Common.Settings.Setting<DrawerOrientationByDockMode>;
   private readonly drawerSplitWidget: SplitWidget;
+  readonly #drawerView: InspectorDrawerView;
   private readonly tabDelegate: InspectorViewTabDelegate;
   private readonly drawerTabbedLocation: TabbedViewLocation;
   private drawerTabbedPane: TabbedPane;
@@ -165,7 +154,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   #debuggedTabReloadRequiredInfobar?: Infobar;
   #selectOverrideFolderInfobar?: Infobar;
   #resizeObserver: ResizeObserver;
-  #toggleOrientationButton: ToolbarButton;
 
   constructor() {
     super();
@@ -189,51 +177,30 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.tabDelegate = new InspectorViewTabDelegate();
 
     // Create drawer tabbed pane.
-    this.drawerTabbedLocation = ViewManager.instance().createTabbedLocation(
-        this.showDrawer.bind(this, {
-          focus: false,
-          hasTargetDrawer: true,
-        }),
-        'drawer-view', true, true);
-    const moreTabsButton = this.drawerTabbedLocation.enableMoreTabsButton();
-    moreTabsButton.setTitle(i18nString(UIStrings.moreTools));
-    this.drawerTabbedPane = this.drawerTabbedLocation.tabbedPane();
-    this.setDrawerRelatedMinimumSizes();
-    this.drawerTabbedPane.element.classList.add('drawer-tabbed-pane');
-    this.drawerTabbedPane.element.setAttribute('jslog', `${VisualLogging.drawer()}`);
-    const closeDrawerButton = new ToolbarButton(i18nString(UIStrings.closeDrawer), 'cross');
-    closeDrawerButton.element.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
-    closeDrawerButton.addEventListener(ToolbarButton.Events.CLICK, this.closeDrawer, this);
-    this.#toggleOrientationButton = new ToolbarButton(
-        i18nString(UIStrings.toggleDrawerOrientation),
-        this.drawerSplitWidget.isVertical() ? 'dock-bottom' : 'dock-right');
-    this.#toggleOrientationButton.element.setAttribute(
-        'jslog', `${VisualLogging.toggle('toggle-drawer-orientation').track({click: true})}`);
-    this.#toggleOrientationButton.addEventListener(
-        ToolbarButton.Events.CLICK, () => this.toggleDrawerOrientation(), this);
-    this.drawerTabbedPane.addEventListener(
-        TabbedPaneEvents.TabSelected,
-        (event: Common.EventTarget.EventTargetEvent<EventData>) => this.tabSelected(event.data.tabId), this);
-    const selectedDrawerTab = this.drawerTabbedPane.selectedTabId;
-    if (this.drawerSplitWidget.showMode() !== ShowMode.ONLY_MAIN && selectedDrawerTab) {
-      Host.userMetrics.panelShown(selectedDrawerTab, true);
-    }
-    this.drawerTabbedPane.setTabDelegate(this.tabDelegate);
-
-    const drawerElement = this.drawerTabbedPane.element;
-    ARIAUtils.markAsComplementary(drawerElement);
-    ARIAUtils.setLabel(drawerElement, i18nString(UIStrings.drawer));
-
-    this.drawerSplitWidget.installResizer(this.drawerTabbedPane.headerElement());
-    this.drawerSplitWidget.setSidebarWidget(this.drawerTabbedPane);
-    if (Root.Runtime.hostConfig.devToolsFlexibleLayout?.verticalDrawerEnabled) {
-      this.drawerTabbedPane.rightToolbar().appendToolbarItem(this.#toggleOrientationButton);
-    }
-    this.drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
-    this.drawerTabbedPane.headerElement().setAttribute('jslog', `${VisualLogging.toolbar('drawer').track({
-                                                         drag: true,
-                                                         keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space',
-                                                       })}`);
+    this.#drawerView = new InspectorDrawerView({
+      splitWidget: this.drawerSplitWidget,
+      revealDrawer: this.showDrawer.bind(this, {
+        focus: false,
+        hasTargetDrawer: true,
+      }),
+      isVisible: () => this.drawerSplitWidget.sidebarIsShowing(),
+      drawerLabel: i18nString(UIStrings.drawer),
+      onHide: this.closeDrawer.bind(this),
+      onToggleOrientation: this.toggleDrawerOrientation.bind(this),
+      onTabSelected: this.tabSelected.bind(this),
+      tabDelegate: this.tabDelegate,
+      enableOrientationToggle: Boolean(Root.Runtime.hostConfig.devToolsFlexibleLayout?.verticalDrawerEnabled),
+      isVertical,
+      verticalExpandedMinimumWidth: MIN_VERTICAL_DRAWER_WIDTH,
+      minimumSizes: {
+        inspectorWidthWhenVertical: MIN_INSPECTOR_WIDTH_VERTICAL_DRAWER,
+        inspectorWidthWhenHorizontal: MIN_INSPECTOR_WIDTH_HORIZONTAL_DRAWER,
+        inspectorHeight: MIN_INSPECTOR_HEIGHT,
+      },
+      setInspectorMinimumSize: this.setMinimumSize.bind(this),
+    });
+    this.drawerTabbedLocation = this.#drawerView.tabbedLocation;
+    this.drawerTabbedPane = this.#drawerView.tabbedPane;
 
     // Create main area tabbed pane.
     this.tabbedLocation = ViewManager.instance().createTabbedLocation(
@@ -291,6 +258,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.attachInfobar(infobar);
     }
     this.#resizeObserver = new ResizeObserver(this.#observedResize.bind(this));
+    DockController.instance().addEventListener(
+        DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
   }
 
   static instance(opts: {
@@ -351,14 +320,12 @@ export class InspectorView extends VBox implements ViewLocationResolver {
 
   #applyDrawerOrientation(orientation: Omit<DrawerOrientation, DrawerOrientation.UNSET>): void {
     const shouldBeVertical = orientation === DrawerOrientation.VERTICAL;
-    const isVertical = this.drawerSplitWidget.isVertical();
+    const isVertical = this.#drawerView.isVertical();
     if (shouldBeVertical === isVertical) {
       return;
     }
 
-    this.#toggleOrientationButton.setGlyph(shouldBeVertical ? 'dock-bottom' : 'dock-right');
-    this.drawerSplitWidget.setVertical(shouldBeVertical);
-    this.setDrawerRelatedMinimumSizes();
+    this.#drawerView.setVertical(shouldBeVertical);
   }
 
   #observedResize(): void {
@@ -376,8 +343,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.#resizeObserver.observe(this.element);
     this.#observedResize();
     this.element.ownerDocument.addEventListener('keydown', this.keyDownBound, false);
-    DockController.instance().addEventListener(
-        DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
     this.#applyDrawerOrientationForDockSide();
   }
 
@@ -470,12 +435,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   showDrawer({focus, hasTargetDrawer}: {focus: boolean, hasTargetDrawer: boolean}): void {
-    if (this.drawerTabbedPane.isShowing()) {
+    if (this.#drawerView.drawerVisible()) {
       return;
     }
-    // Only auto-select the first drawer (console) when no drawer is chosen specifically.
-    this.drawerTabbedPane.setAutoSelectFirstItemOnShow(!hasTargetDrawer);
-    this.drawerSplitWidget.showBoth();
+    this.#drawerView.show(hasTargetDrawer);
     if (focus) {
       this.focusRestorer = new WidgetFocusRestorer(this.drawerTabbedPane);
     } else {
@@ -486,18 +449,18 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   drawerVisible(): boolean {
-    return this.drawerTabbedPane.isShowing();
+    return this.#drawerView.drawerVisible();
   }
 
   closeDrawer(): void {
-    if (!this.drawerTabbedPane.isShowing()) {
+    if (!this.#drawerView.drawerVisible()) {
       return;
     }
     if (this.focusRestorer) {
       this.focusRestorer.restore();
     }
-    this.drawerSplitWidget.hideSidebar(true);
-
+    this.focusRestorer = null;
+    this.#drawerView.hide();
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerHidden));
   }
 
@@ -530,34 +493,21 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return orientationSetting[dockMode] !== DrawerOrientation.UNSET;
   }
 
-  setDrawerRelatedMinimumSizes(): void {
-    const drawerIsVertical = this.drawerSplitWidget.isVertical();
-    if (drawerIsVertical) {
-      // Set minimum size when the drawer is vertical to ensure the buttons will always be
-      // visible during resizing.
-      this.drawerTabbedPane.setMinimumSize(MIN_VERTICAL_DRAWER_WIDTH, 27);
-      this.setMinimumSize(MIN_INSPECTOR_WIDTH_VERTICAL_DRAWER, MIN_INSPECTOR_HEIGHT);
-    } else {
-      this.drawerTabbedPane.setMinimumSize(0, 27);
-      this.setMinimumSize(MIN_INSPECTOR_WIDTH_HORIZONTAL_DRAWER, MIN_INSPECTOR_HEIGHT);
-    }
-  }
-
   setDrawerMinimized(minimized: boolean): void {
     this.drawerSplitWidget.setSidebarMinimized(minimized);
     this.drawerSplitWidget.setResizable(!minimized);
   }
 
   drawerSize(): number {
-    return this.drawerSplitWidget.sidebarSize();
+    return this.#drawerView.drawerSize();
   }
 
   setDrawerSize(size: number): void {
-    this.drawerSplitWidget.setSidebarSize(size);
+    this.#drawerView.setDrawerSize(size);
   }
 
   totalSize(): number {
-    return this.drawerSplitWidget.totalSize();
+    return this.#drawerView.totalSize();
   }
 
   isDrawerMinimized(): boolean {
@@ -565,7 +515,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   isDrawerOrientationVertical(): boolean {
-    return this.drawerSplitWidget.isVertical();
+    return this.#drawerView.isVertical();
   }
 
   private keyDown(event: KeyboardEvent): void {

package/front_end/ui/legacy/ViewManager.ts

@@ -51,6 +51,8 @@ export const defaultOptionsForTabs = {
   freestyler: true,
 };
 
+type TabbedPaneFactory = () => TabbedPane;
+
 export class PreRegisteredView implements View {
   private readonly viewRegistration: ViewRegistration;
   private readonly universe?: Foundation.Universe.Universe;
@@ -389,8 +391,11 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   createTabbedLocation(
       revealCallback: (() => void), location: string, restoreSelection?: boolean, allowReorder?: boolean,
-      defaultTab?: string|null): TabbedViewLocation {
-    return new TabbedLocation(this, revealCallback, location, restoreSelection, allowReorder, defaultTab);
+      defaultTab?: string|null, isLocationVisible?: (() => boolean),
+      tabbedPaneFactory?: TabbedPaneFactory): TabbedViewLocation {
+    return new TabbedLocation(
+        this, revealCallback, location, restoreSelection, allowReorder, defaultTab, isLocationVisible,
+        tabbedPaneFactory);
   }
 
   createStackLocation(revealCallback?: (() => void), location?: string, jslogContext?: string): ViewLocation {
@@ -645,12 +650,14 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   private readonly tabOrderSetting: Common.Settings.Setting<TabOrderSetting>;
   private readonly lastSelectedTabSetting?: Common.Settings.Setting<string>;
   private readonly defaultTab: string|null|undefined;
+  private readonly isLocationVisible: (() => boolean)|undefined;
   private readonly views = new Map<string, View>();
 
   constructor(
       manager: ViewManager, revealCallback: (() => void), location: string, restoreSelection?: boolean,
-      allowReorder?: boolean, defaultTab?: string|null) {
-    const tabbedPane = new TabbedPane();
+      allowReorder?: boolean, defaultTab?: string|null, isLocationVisible?: (() => boolean),
+      tabbedPaneFactory?: TabbedPaneFactory) {
+    const tabbedPane = tabbedPaneFactory ? tabbedPaneFactory() : new TabbedPane();
     if (allowReorder) {
       tabbedPane.setAllowTabReorder(true);
     }
@@ -675,6 +682,7 @@ class TabbedLocation extends Location implements TabbedViewLocation {
       this.lastSelectedTabSetting = Common.Settings.Settings.instance().createSetting(location + '-selected-tab', '');
     }
     this.defaultTab = defaultTab;
+    this.isLocationVisible = isLocationVisible;
 
     if (location) {
       this.appendApplicableItems(location);
@@ -853,7 +861,8 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   }
 
   override isViewVisible(view: View): boolean {
-    return this.#tabbedPane.isShowing() && this.#tabbedPane?.selectedTabId === view.viewId();
+    const locationVisible = this.isLocationVisible ? this.isLocationVisible() : this.#tabbedPane.isShowing();
+    return locationVisible && this.#tabbedPane.selectedTabId === view.viewId();
   }
 
   private tabbedPaneVisibilityChanged(event: Common.EventTarget.EventTargetEvent<{isVisible: boolean}>): void {

package/front_end/ui/legacy/inspectorDrawerTabbedPane.css

@@ -0,0 +1,5 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -793,6 +793,7 @@ export const knownContextValues = new Set([
   'close',
   'close-all',
   'close-dev-tools',
+  'close-drawer',
   'close-others',
   'close-search',
   'close-tabs-to-the-right',
@@ -1568,7 +1569,6 @@ export const knownContextValues = new Set([
   'exclude-folder-confirmation',
   'expand',
   'expand-recursively',
-  'experimental-cookie-features',
   'experimental-item',
   'experiments',
   'experiments-filter',
@@ -4317,6 +4317,7 @@ export const knownContextValues = new Set([
   'web+coffee',
   'web+pwinter',
   'web-audio',
+  'web-mcp',
   'web-socket-frames',
   'web-socket-messages',
   'web-workers',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1604514"
+  "version": "1.0.1605219"
 }