Refactor InspectorView: extract drawer logic into InspectorDrawerView

This is a preparatory CL that extracts the existing drawer logic into
the new InspectorDrawerView.ts without adding any new functionality.
This is a pure refactoring.

Original CL for the minimized drawer:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7566246

Bug: 483762280
Change-Id: I808e1235776ad7b1bc826f00361ba461087b7cbb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7685970
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Guangyue Xu <guangyue.xu@microsoft.com>
Reviewed-by: Piotr Paulski <piotrpaulski@chromium.org>

Author: guangyuexu

config/gni/devtools_grd_files.gni

@@ -2598,6 +2598,7 @@ grd_files_unbundled_sources = [
   "front_end/ui/legacy/GlassPane.js",
   "front_end/ui/legacy/Infobar.js",
   "front_end/ui/legacy/InplaceEditor.js",
+  "front_end/ui/legacy/InspectorDrawerView.js",
   "front_end/ui/legacy/InspectorView.js",
   "front_end/ui/legacy/KeyboardShortcut.js",
   "front_end/ui/legacy/LinkContextMenuProvider.js",
@@ -2742,6 +2743,7 @@ grd_files_unbundled_sources = [
   "front_end/ui/legacy/glassPane.css.js",
   "front_end/ui/legacy/infobar.css.js",
   "front_end/ui/legacy/inspectorCommon.css.js",
+  "front_end/ui/legacy/inspectorDrawerTabbedPane.css.js",
   "front_end/ui/legacy/listWidget.css.js",
   "front_end/ui/legacy/popover.css.js",
   "front_end/ui/legacy/progressIndicator.css.js",

front_end/ui/legacy/BUILD.gn

@@ -20,6 +20,7 @@ generate_css("css_files") {
     "glassPane.css",
     "infobar.css",
     "inspectorCommon.css",
+    "inspectorDrawerTabbedPane.css",
     "listWidget.css",
     "popover.css",
     "progressIndicator.css",
@@ -65,6 +66,7 @@ devtools_ui_module("ui") {
     "GlassPane.ts",
     "Infobar.ts",
     "InplaceEditor.ts",
+    "InspectorDrawerView.ts",
     "InspectorView.ts",
     "KeyboardShortcut.ts",
     "LinkContextMenuProvider.ts",
@@ -184,6 +186,7 @@ devtools_ui_module("unittests") {
     "DockController.test.ts",
     "FilterBar.test.ts",
     "Infobar.test.ts",
+    "InspectorDrawerView.test.ts",
     "InspectorView.test.ts",
     "KeyboardShortcut.test.ts",
     "ListModel.test.ts",

front_end/ui/legacy/InspectorDrawerView.test.ts

@@ -0,0 +1,304 @@
+// 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 * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../testing/ExpectStubCall.js';
+import {setupSettingsHooks} from '../../testing/SettingsHelpers.js';
+
+import * as LegacyUI from './legacy.js';
+
+const InspectorView = LegacyUI.InspectorView.InspectorView;
+const Settings = Common.Settings.Settings;
+const DrawerOrientation = LegacyUI.InspectorView.DrawerOrientation;
+const {DockState} = LegacyUI.DockController;
+const {DockMode} = LegacyUI.InspectorView;
+const DRAWER_ORIENTATION_SETTING_NAME = 'inspector.drawer-orientation-by-dock-mode';
+
+function getDrawerOrientationSettingByDock(dockMode: LegacyUI.InspectorView.DockMode):
+    LegacyUI.InspectorView.DrawerOrientation {
+  const setting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
+  return (setting.get() as LegacyUI.InspectorView.DrawerOrientationByDockMode)[dockMode];
+}
+
+describeWithEnvironment('InspectorDrawerView', () => {
+  setupSettingsHooks();
+
+  function createInspectorViewWithDockState(dockState: LegacyUI.DockController.DockState): {
+    inspectorView: LegacyUI.InspectorView.InspectorView,
+    dockController: LegacyUI.DockController.DockController,
+  } {
+    const dockController = LegacyUI.DockController.DockController.instance({forceNew: true, canDock: true});
+    dockController.setDockSide(dockState);
+
+    const inspectorView = InspectorView.instance({forceNew: true});
+    inspectorView.markAsRoot();
+    renderElementIntoDOM(inspectorView);
+
+    return {inspectorView, dockController};
+  }
+
+  beforeEach(() => {
+    // `setIsDocked` resolves async and leaves elements in the body after the test is finished.
+    sinon.stub(Host.InspectorFrontendHost.InspectorFrontendHostInstance, 'setIsDocked');
+  });
+
+  describe('drawer orientation', () => {
+    describe('toggleDrawerOrientation', () => {
+      it('drawer orientation and setting updates after each toggle for current dock mode', () => {
+        const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+        inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+
+        assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), DrawerOrientation.UNSET);
+        inspectorView.toggleDrawerOrientation();
+
+        assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), DrawerOrientation.HORIZONTAL);
+        assert.isFalse(inspectorView.isDrawerOrientationVertical());
+
+        inspectorView.toggleDrawerOrientation();
+        assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), DrawerOrientation.VERTICAL);
+        assert.isTrue(inspectorView.isDrawerOrientationVertical());
+      });
+
+      for (const settingValue of [DrawerOrientation.UNSET, DrawerOrientation.VERTICAL, DrawerOrientation.HORIZONTAL]) {
+        it(`drawer orientation stays ${settingValue} when toggled while drawer is hidden`, () => {
+          const dockSpecificValue = {
+            [DockMode.BOTTOM]: settingValue,
+            [DockMode.SIDE]: DrawerOrientation.UNSET,
+            [DockMode.UNDOCKED]: DrawerOrientation.UNSET,
+          };
+          const setting = Settings.instance().createSetting(DRAWER_ORIENTATION_SETTING_NAME, dockSpecificValue);
+          const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+          assert.isFalse(inspectorView.drawerVisible());
+          assert.deepEqual(setting.get(), dockSpecificValue);
+          const drawerOrientation = inspectorView.isDrawerOrientationVertical();
+
+          inspectorView.toggleDrawerOrientation();
+          assert.deepEqual(setting.get(), dockSpecificValue, 'setting value should not change');
+          assert.strictEqual(
+              inspectorView.isDrawerOrientationVertical(), drawerOrientation, 'drawer orientation should not change');
+
+          inspectorView.toggleDrawerOrientation({force: DrawerOrientation.HORIZONTAL});
+          assert.deepEqual(setting.get(), dockSpecificValue, 'setting value should not change when forced horizontal');
+          assert.strictEqual(
+              inspectorView.isDrawerOrientationVertical(), drawerOrientation,
+              'drawer orientation should not change when forced horizontal');
+
+          inspectorView.toggleDrawerOrientation({force: DrawerOrientation.VERTICAL});
+          assert.deepEqual(setting.get(), dockSpecificValue, 'setting value should not change when forced vertical');
+          assert.strictEqual(
+              inspectorView.isDrawerOrientationVertical(), drawerOrientation,
+              'drawer orientation should not change when forced vertical');
+        });
+      }
+
+      for (const settingValue of [DrawerOrientation.VERTICAL, DrawerOrientation.HORIZONTAL]) {
+        it(`drawer starts ${settingValue} if setting is ${settingValue}`, () => {
+          const dockSpecificValue = {
+            [DockMode.BOTTOM]: settingValue,
+            [DockMode.SIDE]: DrawerOrientation.UNSET,
+            [DockMode.UNDOCKED]: DrawerOrientation.UNSET,
+          };
+          Settings.instance().createSetting(DRAWER_ORIENTATION_SETTING_NAME, dockSpecificValue);
+          const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+          assert.strictEqual(inspectorView.isDrawerOrientationVertical(), settingValue === DrawerOrientation.VERTICAL);
+        });
+      }
+
+      for (const {force, isVertical} of
+               [{force: DrawerOrientation.HORIZONTAL, isVertical: false},
+                {force: DrawerOrientation.VERTICAL, isVertical: true},
+      ]) {
+        it(`toggleDrawerOrientation can force ${force} orientation`, () => {
+          const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+          inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+          assert.isTrue(inspectorView.isDrawerOrientationVertical());
+          assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), DrawerOrientation.UNSET);
+
+          inspectorView.toggleDrawerOrientation({force});
+
+          assert.strictEqual(inspectorView.isDrawerOrientationVertical(), isVertical);
+          assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), force);
+
+          inspectorView.toggleDrawerOrientation({force});
+
+          assert.strictEqual(inspectorView.isDrawerOrientationVertical(), isVertical);
+          assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), force);
+
+          inspectorView.toggleDrawerOrientation();
+          inspectorView.toggleDrawerOrientation({force});
+
+          assert.strictEqual(inspectorView.isDrawerOrientationVertical(), isVertical);
+          assert.strictEqual(getDrawerOrientationSettingByDock(DockMode.BOTTOM), force);
+        });
+      }
+    });
+
+    describe('isUserExplicitlyUpdatedDrawerOrientation', () => {
+      it('isUserExplicitlyUpdatedDrawerOrientation returns false by default', () => {
+        const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+
+        assert.isFalse(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+      });
+
+      it('isUserExplicitlyUpdatedDrawerOrientation returns true when orientation is toggled', () => {
+        const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+
+        inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+        inspectorView.toggleDrawerOrientation();
+
+        assert.isTrue(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+      });
+
+      it('returns true only for current dock mode', async () => {
+        const {inspectorView, dockController} = createInspectorViewWithDockState(DockState.BOTTOM);
+        const onDockSideChangeHandledForTestStub =
+            sinon.stub(LegacyUI.InspectorView.InspectorView.instance(), 'applyDrawerOrientationForDockSideForTest');
+        inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+
+        inspectorView.toggleDrawerOrientation();
+        assert.isTrue(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+
+        const waitForFirstDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+        dockController.setDockSide(DockState.RIGHT);
+        await waitForFirstDockSideChangeHandled;
+        assert.isFalse(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+
+        inspectorView.toggleDrawerOrientation();
+        assert.isTrue(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+
+        const waitForSecondDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+        dockController.setDockSide(DockState.UNDOCKED);
+        await waitForSecondDockSideChangeHandled;
+        assert.isFalse(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+
+        inspectorView.toggleDrawerOrientation();
+        assert.isTrue(inspectorView.isUserExplicitlyUpdatedDrawerOrientation());
+      });
+    });
+
+    describe('dock-specific drawer orientation', () => {
+      describe('default orientations by dock state', () => {
+        it('defaults to horizontal orientation for RIGHT dock position', () => {
+          const {inspectorView} = createInspectorViewWithDockState(DockState.RIGHT);
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+        });
+
+        it('defaults to horizontal orientation for LEFT dock position', () => {
+          const {inspectorView} = createInspectorViewWithDockState(DockState.LEFT);
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+        });
+
+        it('defaults to horizontal orientation for UNDOCKED dock position', () => {
+          const {inspectorView} = createInspectorViewWithDockState(DockState.UNDOCKED);
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+        });
+
+        it('defaults to vertical orientation for BOTTOM dock position', () => {
+          const {inspectorView} = createInspectorViewWithDockState(DockState.BOTTOM);
+          assert.isTrue(inspectorView.isDrawerOrientationVertical());
+        });
+      });
+
+      describe('automatic dock state change handling', () => {
+        it('automatically updates drawer orientation when switching from bottom to side dock', async () => {
+          const {inspectorView, dockController} = createInspectorViewWithDockState(DockState.BOTTOM);
+          const waitForDockSideChangeHandled = expectCall(
+              sinon.stub(LegacyUI.InspectorView.InspectorView.instance(), 'applyDrawerOrientationForDockSideForTest'));
+          inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+
+          assert.isTrue(inspectorView.isDrawerOrientationVertical());
+          dockController.setDockSide(DockState.RIGHT);
+          await waitForDockSideChangeHandled;
+
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+        });
+
+        it('automatically updates drawer orientation when switching from side to bottom dock', async () => {
+          const {inspectorView, dockController} = createInspectorViewWithDockState(DockState.RIGHT);
+          const waitForDockSideChangeHandled = expectCall(
+              sinon.stub(LegacyUI.InspectorView.InspectorView.instance(), 'applyDrawerOrientationForDockSideForTest'));
+          inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+          dockController.setDockSide(DockState.BOTTOM);
+          await waitForDockSideChangeHandled;
+
+          assert.isTrue(inspectorView.isDrawerOrientationVertical());
+        });
+
+        it('respects saved preferences when switching dock positions', async () => {
+          const {inspectorView, dockController} = createInspectorViewWithDockState(DockState.BOTTOM);
+          const onDockSideChangeHandledForTestStub =
+              sinon.stub(LegacyUI.InspectorView.InspectorView.instance(), 'applyDrawerOrientationForDockSideForTest');
+          const waitForFirstDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+          inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+
+          inspectorView.toggleDrawerOrientation({force: DrawerOrientation.HORIZONTAL});
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+
+          dockController.setDockSide(DockState.RIGHT);
+          await waitForFirstDockSideChangeHandled;
+          inspectorView.toggleDrawerOrientation({force: DrawerOrientation.VERTICAL});
+          assert.isTrue(inspectorView.isDrawerOrientationVertical());
+
+          const waitForSecondDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+          dockController.setDockSide(DockState.UNDOCKED);
+          await waitForSecondDockSideChangeHandled;
+          inspectorView.toggleDrawerOrientation({force: DrawerOrientation.HORIZONTAL});
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+
+          const waitForThirdDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+          dockController.setDockSide(DockState.BOTTOM);
+          await waitForThirdDockSideChangeHandled;
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+
+          const waitForFourthDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+          dockController.setDockSide(DockState.LEFT);
+          await waitForFourthDockSideChangeHandled;
+          assert.isTrue(inspectorView.isDrawerOrientationVertical());
+
+          const waitForFifthDockSideChangeHandled = expectCall(onDockSideChangeHandledForTestStub);
+          dockController.setDockSide(DockState.UNDOCKED);
+          await waitForFifthDockSideChangeHandled;
+          assert.isFalse(inspectorView.isDrawerOrientationVertical());
+        });
+
+        it('does not change orientation when drawer is closed during dock switch', async () => {
+          const {inspectorView, dockController} = createInspectorViewWithDockState(DockState.BOTTOM);
+          const waitForDockSideChangeHandled = expectCall(
+              sinon.stub(LegacyUI.InspectorView.InspectorView.instance(), 'applyDrawerOrientationForDockSideForTest'));
+
+          assert.isFalse(inspectorView.drawerVisible());
+          const initialOrientation = inspectorView.isDrawerOrientationVertical();
+
+          dockController.setDockSide(DockState.RIGHT);
+          await waitForDockSideChangeHandled;
+
+          assert.strictEqual(inspectorView.isDrawerOrientationVertical(), initialOrientation);
+        });
+
+        it('updates orientation correctly when showing the drawer for the first time after a dock switch', async () => {
+          const {inspectorView, dockController} = createInspectorViewWithDockState(DockState.BOTTOM);
+          const waitForDockSideChangeHandled = expectCall(
+              sinon.stub(LegacyUI.InspectorView.InspectorView.instance(), 'applyDrawerOrientationForDockSideForTest'));
+
+          assert.isFalse(inspectorView.drawerVisible());
+          assert.isTrue(
+              inspectorView.isDrawerOrientationVertical(), 'Drawer should be vertical when docked at the bottom');
+
+          dockController.setDockSide(DockState.RIGHT);
+          await waitForDockSideChangeHandled;
+
+          inspectorView.showDrawer({focus: true, hasTargetDrawer: false});
+
+          assert.isFalse(
+              inspectorView.isDrawerOrientationVertical(), 'Drawer should become horizontal when docked to the right');
+        });
+      });
+    });
+  });
+});