chrome-devtools-frontend 1.0.1608868 → 1.0.1611099

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2179,7 +2179,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     PerfUI.LineLevelProfile.Performance.instance().initialize(cpuProfiles, primaryPageTarget);
 
     // Initialize EntityMapper
-    this.#entityMapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
+    this.#entityMapper = Trace.EntityMapper.EntityMapper.getOrCreate(parsedTrace);
 
     // Set up SourceMapsResolver to ensure we resolve any function names in
     // profile calls.
@@ -2189,9 +2189,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         SourceMapsResolver.SourceMappingsUpdated.eventName, this.#onSourceMapsNodeNamesResolvedBound);
     void this.#sourceMapsResolver.install();
 
-    // Initialize EntityMapper
-    this.#entityMapper = new Trace.EntityMapper.EntityMapper(parsedTrace);
-
     this.statusDialog?.updateProgressBar(i18nString(UIStrings.processed), 80);
     this.updateMiniMap();
     this.statusDialog?.updateProgressBar(i18nString(UIStrings.processed), 90);
@@ -3060,7 +3057,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     return trace;
   }
-
 }
 
 export const enum State {
@@ -3143,7 +3139,7 @@ export class BottomUpProfileRevealer implements Common.Revealer.Revealer<Utils.H
     TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
         revealable.bounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
     panel.select(null);
-    panel.getFlameChart().selectDetailsViewTab(Tab.BottomUp, null);
+    panel.getFlameChart().selectDetailsViewTab(Tab.BottomUp, revealable.node ?? null);
   }
 }
 

package/front_end/panels/timeline/utils/Helpers.ts

@@ -138,6 +138,6 @@ export class RevealableTimeRange {
 }
 
 export class RevealableBottomUpProfile {
-  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro) {
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicro, public node?: Trace.Extras.TraceTree.Node) {
   }
 }

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: f6aa8926592f9b5bd54bf4b6430d3abb4bc480f6
+Revision: 295046833fe5ffe7765e09abf4e9c15980d09e76
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/InspectorDrawerView.ts

@@ -2,7 +2,7 @@
 // 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 Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -14,11 +14,29 @@ import {ToolbarButton, type ToolbarMenuButton} from './Toolbar.js';
 import type {TabbedViewLocation} from './View.js';
 import {ViewManager} from './ViewManager.js';
 
+const VERTICAL_MINIMIZED_DRAWER_SIZE = 27;
+
 class DrawerTabbedPane extends TabbedPane {
   constructor() {
     super();
     this.registerRequiredCSS(drawerTabbedPaneStyles);
   }
+
+  setVerticalMinimized(isMinimized: boolean): void {
+    this.element.classList.toggle('drawer-minimized-vertical', isMinimized);
+    this.contentElement.classList.toggle('collapsed-vertical-drawer-container', isMinimized);
+    this.tabbedPaneContentElement().classList.toggle('hide-element', isMinimized);
+    this.headerElement().classList.toggle('collapsed-vertical-drawer-header', isMinimized);
+    this.headerContentsElement.classList.toggle('hide-element', isMinimized);
+    this.leftToolbar().classList.toggle('hide-element', isMinimized);
+    this.rightToolbar().classList.toggle('collapsed-vertical-drawer-right-toolbar', isMinimized);
+    this.rightToolbar().classList.toggle('collapsed-vertical-drawer-toolbar-content', isMinimized);
+  }
+
+  restoreAfterVerticalMinimized(): void {
+    this.clearMeasuredWidths();
+    this.headerResized();
+  }
 }
 
 const UIStrings = {
@@ -26,6 +44,14 @@ const UIStrings = {
    * @description Title of more tabs button in the drawer view.
    */
   moreTools: 'More Tools',
+  /**
+   * @description Text that appears when hover over the minimize button on the drawer view.
+   */
+  minimizeDrawer: 'Minimize drawer',
+  /**
+   * @description Text that appears when hover over the expand button on the drawer view.
+   */
+  expandDrawer: 'Expand drawer',
   /**
    * @description Text that appears when hover over the close button on the drawer view.
    */
@@ -44,9 +70,13 @@ interface InspectorDrawerViewOptions {
   revealDrawer: () => void;
   isVisible: () => boolean;
   drawerLabel: string;
+  onToggleMinimized: () => void;
   onHide: () => void;
   onToggleOrientation: () => void;
+  onExpandFromMinimized: () => void;
+  onMinimizeFromTabInteraction: () => void;
   onTabSelected: (tabId: string) => void;
+  isConsoleOpenInMainAndDrawer: (tabId: string) => boolean;
   tabDelegate: TabbedPaneTabDelegate;
   enableOrientationToggle: boolean;
   isVertical: boolean;
@@ -59,10 +89,17 @@ interface InspectorDrawerViewOptions {
   setInspectorMinimumSize: (width: number, height: number) => void;
 }
 
+interface InspectorDrawerPresentation {
+  isVertical: boolean;
+  isMinimized: boolean;
+  verticalExpandedMinimumWidth: number;
+}
+
 export class InspectorDrawerView {
   readonly tabbedLocation: TabbedViewLocation;
   readonly tabbedPane: DrawerTabbedPane;
   readonly #splitWidget: SplitWidget;
+  readonly #drawerMinimizedSetting: Common.Settings.Setting<boolean>;
   readonly #verticalExpandedMinimumWidth: number;
   readonly #minimumSizes: {
     inspectorWidthWhenVertical: number,
@@ -70,17 +107,28 @@ export class InspectorDrawerView {
     inspectorHeight: number,
   };
   readonly #setInspectorMinimumSize: (width: number, height: number) => void;
+  #drawerSizeBeforeMinimize = 0;
+  #wasVerticalAndMinimized = false;
   readonly #toggleOrientationButton: ToolbarButton;
+  readonly #minimizeExpandButton: ToolbarButton;
   readonly #closeDrawerButton: ToolbarButton;
   readonly #moreTabsButton: ToolbarMenuButton|null;
+  readonly #onExpandFromMinimized: () => void;
+  readonly #onMinimizeFromTabInteraction: () => void;
   readonly #onTabSelected: (tabId: string) => void;
+  readonly #isConsoleOpenInMainAndDrawer: (tabId: string) => boolean;
 
   constructor(options: InspectorDrawerViewOptions) {
     this.#splitWidget = options.splitWidget;
     this.#verticalExpandedMinimumWidth = options.verticalExpandedMinimumWidth;
     this.#minimumSizes = options.minimumSizes;
     this.#setInspectorMinimumSize = options.setInspectorMinimumSize;
+    this.#onExpandFromMinimized = options.onExpandFromMinimized;
+    this.#onMinimizeFromTabInteraction = options.onMinimizeFromTabInteraction;
     this.#onTabSelected = options.onTabSelected;
+    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, undefined, options.isVisible, () => new DrawerTabbedPane());
     this.#moreTabsButton = this.tabbedLocation.enableMoreTabsButton();
@@ -89,8 +137,15 @@ export class InspectorDrawerView {
     this.tabbedPane.element.classList.add('drawer-tabbed-pane');
     this.tabbedPane.element.setAttribute('jslog', `${VisualLogging.drawer()}`);
 
+    this.#minimizeExpandButton = new ToolbarButton(
+        i18nString(UIStrings.minimizeDrawer), options.isVertical ? 'right-panel-close' : 'bottom-panel-close');
+    this.#minimizeExpandButton.element.setAttribute(
+        'jslog', `${VisualLogging.toggle('minimize-drawer').track({click: true})}`);
+    this.#minimizeExpandButton.addEventListener(ToolbarButton.Events.CLICK, options.onToggleMinimized);
+
     this.#closeDrawerButton = new ToolbarButton(i18nString(UIStrings.closeDrawer), 'cross');
-    this.#closeDrawerButton.element.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
+    this.#closeDrawerButton.element.setAttribute(
+        'jslog', `${VisualLogging.close('close-drawer').track({click: true})}`);
     this.#closeDrawerButton.addEventListener(ToolbarButton.Events.CLICK, options.onHide);
 
     this.#toggleOrientationButton = new ToolbarButton(
@@ -102,7 +157,9 @@ export class InspectorDrawerView {
     if (options.enableOrientationToggle) {
       this.tabbedPane.rightToolbar().appendToolbarItem(this.#toggleOrientationButton);
     }
+    this.tabbedPane.rightToolbar().appendToolbarItem(this.#minimizeExpandButton);
     this.tabbedPane.rightToolbar().appendToolbarItem(this.#closeDrawerButton);
+    this.tabbedPane.addEventListener(TabbedPaneEvents.TabInvoked, this.#drawerTabInvoked, this);
     this.tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.#drawerTabSelected, this);
     this.tabbedPane.setTabDelegate(options.tabDelegate);
     const selectedDrawerTab = this.tabbedPane.selectedTabId;
@@ -120,7 +177,17 @@ export class InspectorDrawerView {
                                                    drag: true,
                                                    keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space',
                                                  })}`);
-    this.#updatePresentation();
+    this.#updatePresentation(false);
+  }
+
+  restoreMinimizedStateFromSettings(): void {
+    if (!this.#drawerMinimizedSetting.get()) {
+      return;
+    }
+
+    // The drawer starts hidden; show it first, then minimize.
+    this.#splitWidget.showBoth();
+    this.setMinimized(true);
   }
 
   setVertical(shouldBeVertical: boolean): void {
@@ -129,12 +196,14 @@ export class InspectorDrawerView {
     }
 
     const previousShowMode = this.#splitWidget.showMode();
+    const wasDrawerMinimized = this.isMinimized();
+
     this.#splitWidget.setVertical(shouldBeVertical);
-    this.#updatePresentation();
-    this.applyState(previousShowMode);
+    this.#updatePresentation(wasDrawerMinimized);
+    this.applyState(previousShowMode, wasDrawerMinimized);
   }
 
-  applyState(showMode: ShowMode): void {
+  applyState(showMode: ShowMode, minimized: boolean): void {
     if (this.#splitWidget.showMode() !== showMode) {
       switch (showMode) {
         case ShowMode.BOTH:
@@ -148,22 +217,63 @@ export class InspectorDrawerView {
           break;
       }
     }
-    this.#updatePresentation();
+
+    const shouldBeMinimized = showMode === ShowMode.BOTH && minimized;
+    if (showMode === ShowMode.BOTH) {
+      this.setMinimized(shouldBeMinimized);
+      return;
+    }
+
+    this.#splitWidget.setSidebarMinimized(false);
+    this.#splitWidget.setResizable(false);
+    this.#updatePresentation(false);
+    this.#drawerMinimizedSetting.set(false);
   }
 
   show(hasTargetDrawer: boolean): void {
+    const wasDrawerVisible = this.isVisibleForEvents();
     this.tabbedPane.setAutoSelectFirstItemOnShow(!hasTargetDrawer);
     this.#splitWidget.showBoth();
+    this.#dispatchPaneVisibilityChangedIfNeeded(wasDrawerVisible);
   }
 
   hide(): void {
-    this.#splitWidget.hideSidebar(true);
+    const wasDrawerVisible = this.isVisibleForEvents();
+    const wasMinimized = this.isMinimized();
+    this.#splitWidget.hideSidebar(!wasMinimized);
+    if (wasMinimized) {
+      this.#updatePresentation(false);
+      this.#splitWidget.setSidebarMinimized(false);
+      this.#splitWidget.setResizable(true);
+    }
+    this.#drawerMinimizedSetting.set(false);
+    this.#dispatchPaneVisibilityChangedIfNeeded(wasDrawerVisible);
+  }
+
+  setMinimized(minimized: boolean): void {
+    const wasDrawerVisible = this.isVisibleForEvents();
+    if (minimized && !this.isMinimized()) {
+      this.#drawerSizeBeforeMinimize = this.#splitWidget.sidebarSize();
+    }
+
+    this.#updatePresentation(minimized);
+    this.#splitWidget.setSidebarMinimized(minimized);
+    this.#dispatchPaneVisibilityChangedIfNeeded(wasDrawerVisible);
+    this.#splitWidget.setResizable(!minimized);
+    this.#drawerMinimizedSetting.set(minimized);
+    if (!minimized && this.#drawerSizeBeforeMinimize > 0) {
+      this.#splitWidget.setSidebarSize(this.#drawerSizeBeforeMinimize);
+    }
   }
 
   drawerVisible(): boolean {
     return this.tabbedPane.isShowing();
   }
 
+  isVisibleForEvents(): boolean {
+    return this.#splitWidget.sidebarIsShowing() && !this.isMinimized();
+  }
+
   drawerSize(): number {
     return this.#splitWidget.sidebarSize();
   }
@@ -176,31 +286,94 @@ export class InspectorDrawerView {
     return this.#splitWidget.totalSize();
   }
 
+  isMinimized(): boolean {
+    return this.#splitWidget.isSidebarMinimized();
+  }
+
   isVertical(): boolean {
     return this.#splitWidget.isVertical();
   }
 
-  updatePresentation(isVertical: boolean): void {
+  updatePresentation({isVertical, isMinimized, verticalExpandedMinimumWidth}: InspectorDrawerPresentation): void {
     this.#toggleOrientationButton.setGlyph(isVertical ? 'dock-bottom' : 'dock-right');
+    this.#updateMinimizeExpandButton(isVertical, isMinimized);
 
-    if (isVertical) {
-      this.tabbedPane.setMinimumSize(this.#verticalExpandedMinimumWidth, 27);
+    const isVerticalAndMinimized = isVertical && isMinimized;
+    if (isVerticalAndMinimized) {
+      this.tabbedPane.setMinimumSize(VERTICAL_MINIMIZED_DRAWER_SIZE, VERTICAL_MINIMIZED_DRAWER_SIZE);
+    } else if (isVertical) {
+      this.tabbedPane.setMinimumSize(verticalExpandedMinimumWidth, VERTICAL_MINIMIZED_DRAWER_SIZE);
     } else {
-      this.tabbedPane.setMinimumSize(0, 27);
+      this.tabbedPane.setMinimumSize(0, VERTICAL_MINIMIZED_DRAWER_SIZE);
+    }
+
+    this.tabbedPane.setVerticalMinimized(isVerticalAndMinimized);
+
+    if (this.#moreTabsButton) {
+      this.#moreTabsButton.setVisible(!isVerticalAndMinimized);
     }
+
+    if (!isVerticalAndMinimized && this.#wasVerticalAndMinimized) {
+      this.tabbedPane.restoreAfterVerticalMinimized();
+    }
+    this.#wasVerticalAndMinimized = isVerticalAndMinimized;
+  }
+
+  #updateMinimizeExpandButton(isVertical: boolean, isMinimized: boolean): void {
+    if (isMinimized) {
+      this.#minimizeExpandButton.setGlyph(isVertical ? 'right-panel-open' : 'bottom-panel-open');
+      this.#minimizeExpandButton.setTitle(i18nString(UIStrings.expandDrawer));
+      return;
+    }
+
+    this.#minimizeExpandButton.setGlyph(isVertical ? 'right-panel-close' : 'bottom-panel-close');
+    this.#minimizeExpandButton.setTitle(i18nString(UIStrings.minimizeDrawer));
   }
 
-  #updatePresentation(): void {
+  #updatePresentation(minimized: boolean): void {
     const drawerIsVertical = this.#splitWidget.isVertical();
     this.#setInspectorMinimumSize(
         drawerIsVertical ? this.#minimumSizes.inspectorWidthWhenVertical :
                            this.#minimumSizes.inspectorWidthWhenHorizontal,
         this.#minimumSizes.inspectorHeight);
-    this.updatePresentation(drawerIsVertical);
+    this.updatePresentation({
+      isVertical: drawerIsVertical,
+      isMinimized: minimized,
+      verticalExpandedMinimumWidth: this.#verticalExpandedMinimumWidth,
+    });
+  }
+
+  #dispatchPaneVisibilityChangedIfNeeded(wasDrawerVisible: boolean): void {
+    const isDrawerVisible = this.isVisibleForEvents();
+    if (wasDrawerVisible === isDrawerVisible) {
+      return;
+    }
+    this.tabbedPane.dispatchEventToListeners(TabbedPaneEvents.PaneVisibilityChanged, {isVisible: isDrawerVisible});
   }
 
   #drawerTabSelected(event: Common.EventTarget.EventTargetEvent<EventData>): void {
-    const {tabId} = event.data;
+    const {tabId, prevTabId, isUserGesture} = event.data;
     this.#onTabSelected(tabId);
+
+    if (this.#isConsoleOpenInMainAndDrawer(tabId)) {
+      return;
+    }
+
+    if (isUserGesture && prevTabId && prevTabId !== tabId && this.isMinimized()) {
+      this.#onExpandFromMinimized();
+    }
+  }
+
+  #drawerTabInvoked(event: Common.EventTarget.EventTargetEvent<EventData>): void {
+    const {tabId, isUserGesture} = event.data;
+    if (isUserGesture && this.#isConsoleOpenInMainAndDrawer(tabId)) {
+      if (!this.isMinimized()) {
+        this.#onMinimizeFromTabInteraction();
+      }
+      return;
+    }
+    if (isUserGesture && this.isMinimized()) {
+      this.#onExpandFromMinimized();
+    }
   }
 }

package/front_end/ui/legacy/InspectorView.ts

@@ -24,7 +24,7 @@ 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 {SplitWidget} from './SplitWidget.js';
+import {type ShowMode, SplitWidget} from './SplitWidget.js';
 import {type EventData, Events as TabbedPaneEvents, type TabbedPane, type TabbedPaneTabDelegate} from './TabbedPane.js';
 import {Tooltip} from './Tooltip.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
@@ -32,6 +32,14 @@ import {ViewManager} from './ViewManager.js';
 import {VBox, type Widget, WidgetFocusRestorer} from './Widget.js';
 
 const UIStrings = {
+  /**
+   * @description The aria label for the drawer minimized.
+   */
+  drawerMinimized: 'Drawer minimized',
+  /**
+   * @description The aria label for the drawer expanded.
+   */
+  drawerExpanded: 'Drawer expanded',
   /**
    * @description The ARIA label for the main tab bar that contains the DevTools panels
    */
@@ -111,10 +119,10 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let inspectorViewInstance: InspectorView|null = null;
 
 const MIN_MAIN_PANEL_WIDTH = 240;
-const MIN_VERTICAL_DRAWER_WIDTH = 200;
+const MIN_VERTICAL_DRAWER_WIDTH = 280;
 // Inspector need to have space for both main panel and the drawer + some slack for borders
 const MIN_INSPECTOR_WIDTH_HORIZONTAL_DRAWER = 250;
-const MIN_INSPECTOR_WIDTH_VERTICAL_DRAWER = 450;
+const MIN_INSPECTOR_WIDTH_VERTICAL_DRAWER = 530;
 const MIN_INSPECTOR_HEIGHT = 72;
 
 export enum DrawerOrientation {
@@ -135,6 +143,12 @@ export interface DrawerOrientationByDockMode {
   [DockMode.UNDOCKED]: DrawerOrientation;
 }
 
+interface ScrollState {
+  element: HTMLElement;
+  scrollTop: number;
+  scrollLeft: number;
+}
+
 export class InspectorView extends VBox implements ViewLocationResolver {
   private readonly drawerOrientationByDockSetting: Common.Settings.Setting<DrawerOrientationByDockMode>;
   private readonly drawerSplitWidget: SplitWidget;
@@ -148,12 +162,15 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   private readonly keyDownBound: (event: KeyboardEvent) => void;
   private currentPanelLocked?: boolean;
   private focusRestorer?: WidgetFocusRestorer|null;
+  #mainPanelAtDrawerFocus: string|null = null;
   private ownerSplitWidget?: SplitWidget;
   private reloadRequiredInfobar?: Infobar;
   #chromeRestartRequiredInfobar?: Infobar;
   #debuggedTabReloadRequiredInfobar?: Infobar;
   #selectOverrideFolderInfobar?: Infobar;
   #resizeObserver: ResizeObserver;
+  #drawerShowModeBeforeDockSideChange: ShowMode|null = null;
+  #drawerMinimizedBeforeDockSideChange: boolean|null = null;
 
   constructor() {
     super();
@@ -183,11 +200,15 @@ export class InspectorView extends VBox implements ViewLocationResolver {
         focus: false,
         hasTargetDrawer: true,
       }),
-      isVisible: () => this.drawerSplitWidget.sidebarIsShowing(),
+      isVisible: () => this.drawerSplitWidget.sidebarIsShowing() && !this.drawerSplitWidget.isSidebarMinimized(),
       drawerLabel: i18nString(UIStrings.drawer),
+      onToggleMinimized: this.toggleDrawerMinimized.bind(this),
       onHide: this.closeDrawer.bind(this),
       onToggleOrientation: this.toggleDrawerOrientation.bind(this),
+      onExpandFromMinimized: this.#expandDrawerFromInteraction.bind(this),
+      onMinimizeFromTabInteraction: this.minimizeDrawer.bind(this),
       onTabSelected: this.tabSelected.bind(this),
+      isConsoleOpenInMainAndDrawer: tabId => tabId === 'console-view' && this.tabbedPane.selectedTabId === 'console',
       tabDelegate: this.tabDelegate,
       enableOrientationToggle: Boolean(Root.Runtime.hostConfig.devToolsFlexibleLayout?.verticalDrawerEnabled),
       isVertical,
@@ -258,8 +279,14 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.attachInfobar(infobar);
     }
     this.#resizeObserver = new ResizeObserver(this.#observedResize.bind(this));
+    DockController.instance().addEventListener(
+        DockControllerEvents.BEFORE_DOCK_SIDE_CHANGED, this.#rememberDrawerStateBeforeDockSideChange, this);
     DockController.instance().addEventListener(
         DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
+    DockController.instance().addEventListener(
+        DockControllerEvents.AFTER_DOCK_SIDE_CHANGED, this.#restoreDrawerStateAfterDockSideChange, this);
+
+    this.#drawerView.restoreMinimizedStateFromSettings();
   }
 
   static instance(opts: {
@@ -328,6 +355,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.#drawerView.setVertical(shouldBeVertical);
   }
 
+  #applyDrawerState(showMode: ShowMode, minimized: boolean): void {
+    this.#drawerView.applyState(showMode, minimized);
+  }
+
   #observedResize(): void {
     const rect = this.element.getBoundingClientRect();
     this.element.style.setProperty('--devtools-window-left', `${rect.left}px`);
@@ -350,8 +381,24 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     super.willHide();
     this.#resizeObserver.unobserve(this.element);
     this.element.ownerDocument.removeEventListener('keydown', this.keyDownBound, false);
-    DockController.instance().removeEventListener(
-        DockControllerEvents.DOCK_SIDE_CHANGED, this.#applyDrawerOrientationForDockSide, this);
+  }
+
+  #rememberDrawerStateBeforeDockSideChange(): void {
+    this.#drawerShowModeBeforeDockSideChange = this.drawerSplitWidget.showMode();
+    this.#drawerMinimizedBeforeDockSideChange = this.isDrawerMinimized();
+  }
+
+  #restoreDrawerStateAfterDockSideChange(): void {
+    const showMode = this.#drawerShowModeBeforeDockSideChange;
+    const minimized = this.#drawerMinimizedBeforeDockSideChange;
+    this.#drawerShowModeBeforeDockSideChange = null;
+    this.#drawerMinimizedBeforeDockSideChange = null;
+
+    if (showMode === null || minimized === null) {
+      return;
+    }
+
+    this.#applyDrawerState(showMode, minimized);
   }
 
   resolveLocation(locationName: string): ViewLocation|null {
@@ -435,14 +482,26 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   showDrawer({focus, hasTargetDrawer}: {focus: boolean, hasTargetDrawer: boolean}): void {
-    if (this.#drawerView.drawerVisible()) {
+    // Both checks are needed: during an animated hide, drawerVisible()
+    // (tabbedPane.isShowing()) remains true until the animation completes and
+    // the widget is detached, but sidebarIsShowing() turns false synchronously.
+    if (this.#drawerView.drawerVisible() && this.drawerSplitWidget.sidebarIsShowing()) {
+      // Only expand a minimized drawer when the user explicitly requested
+      // focus (e.g. keyboard shortcut or direct action). Programmatic calls
+      // (like tab switches) should not auto-expand.
+      if (focus && this.isDrawerMinimized()) {
+        this.setDrawerMinimized(false);
+        ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerExpanded));
+      }
       return;
     }
     this.#drawerView.show(hasTargetDrawer);
     if (focus) {
       this.focusRestorer = new WidgetFocusRestorer(this.drawerTabbedPane);
+      this.#mainPanelAtDrawerFocus = this.tabbedPane.selectedTabId;
     } else {
       this.focusRestorer = null;
+      this.#mainPanelAtDrawerFocus = null;
     }
     this.#applyDrawerOrientationForDockSide();
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerShown));
@@ -452,15 +511,29 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return this.#drawerView.drawerVisible();
   }
 
+  minimizeDrawer(): void {
+    if (!this.#drawerView.drawerVisible()) {
+      return;
+    }
+    this.focusRestorer = null;
+    this.#mainPanelAtDrawerFocus = null;
+    this.setDrawerMinimized(true);
+    ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerMinimized));
+  }
+
   closeDrawer(): void {
     if (!this.#drawerView.drawerVisible()) {
       return;
     }
-    if (this.focusRestorer) {
+    // Preserve main panel scroll positions across the drawer layout change.
+    const scrollState = this.#captureMainPanelScrollState();
+    if (this.focusRestorer && this.#mainPanelAtDrawerFocus === this.tabbedPane.selectedTabId) {
       this.focusRestorer.restore();
     }
     this.focusRestorer = null;
+    this.#mainPanelAtDrawerFocus = null;
     this.#drawerView.hide();
+    this.#restoreMainPanelScrollState(scrollState);
     ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerHidden));
   }
 
@@ -494,8 +567,62 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   setDrawerMinimized(minimized: boolean): void {
-    this.drawerSplitWidget.setSidebarMinimized(minimized);
-    this.drawerSplitWidget.setResizable(!minimized);
+    // Preserve main panel scroll positions across the drawer layout change.
+    const scrollState = this.#captureMainPanelScrollState();
+    this.#drawerView.setMinimized(minimized);
+    this.#restoreMainPanelScrollState(scrollState);
+  }
+
+  // Showing, hiding, or minimizing the drawer causes SplitWidget to
+  // manipulate CSS classes and remove inline layout properties, triggering a
+  // flexbox reflow that resets scroll positions in the main panel. We capture
+  // them before the operation and restore them afterwards to preserve the
+  // user's scroll position.
+  #captureMainPanelScrollState(): ScrollState[] {
+    const selectedTabId = this.tabbedPane.selectedTabId;
+    if (!selectedTabId) {
+      return [];
+    }
+
+    let panel: Widget|null = null;
+    try {
+      panel = ViewManager.instance().materializedWidget(selectedTabId);
+    } catch {
+      return [];
+    }
+
+    if (!panel) {
+      return [];
+    }
+
+    const rootElement = panel.element as HTMLElement;
+    const scrollableElements: HTMLElement[] = [
+      rootElement,
+      ...rootElement.querySelectorAll<HTMLElement>('*'),
+    ];
+
+    return scrollableElements.filter(element => element.scrollTop !== 0 || element.scrollLeft !== 0)
+        .map(element => ({
+               element,
+               scrollTop: element.scrollTop,
+               scrollLeft: element.scrollLeft,
+             }));
+  }
+
+  #restoreMainPanelScrollState(scrollState: ScrollState[]): void {
+    if (!scrollState.length) {
+      return;
+    }
+
+    this.element.window().requestAnimationFrame(() => {
+      for (const {element, scrollTop, scrollLeft} of scrollState) {
+        if (!element.isConnected) {
+          continue;
+        }
+        element.scrollTop = scrollTop;
+        element.scrollLeft = scrollLeft;
+      }
+    });
   }
 
   drawerSize(): number {
@@ -511,13 +638,37 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   isDrawerMinimized(): boolean {
-    return this.drawerSplitWidget.isSidebarMinimized();
+    return this.#drawerView.isMinimized();
+  }
+
+  toggleDrawerMinimized(): void {
+    if (!this.#drawerView.drawerVisible()) {
+      // If the drawer is not visible at all, show and expand it.
+      this.showDrawer({focus: true, hasTargetDrawer: false});
+      return;
+    }
+    const minimized = this.isDrawerMinimized();
+    if (minimized && this.drawerTabbedPane.selectedTabId === 'console-view' &&
+        this.tabbedPane.selectedTabId === 'console') {
+      return;
+    }
+    this.setDrawerMinimized(!minimized);
+    if (!minimized) {
+      ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerMinimized));
+    } else {
+      ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerExpanded));
+    }
   }
 
   isDrawerOrientationVertical(): boolean {
     return this.#drawerView.isVertical();
   }
 
+  #expandDrawerFromInteraction(): void {
+    this.setDrawerMinimized(false);
+    ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerExpanded));
+  }
+
   private keyDown(event: KeyboardEvent): void {
     if (!KeyboardShortcut.eventHasCtrlEquivalentKey(event) || event.altKey || event.shiftKey) {
       return;