chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/ui/legacy/DockController.ts

@@ -34,22 +34,22 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {ActionDelegate} from './ActionRegistration.js';
-import {alert} from './ARIAUtils.js';
+import {LiveAnnouncer} from './ARIAUtils.js';
 import type {Context} from './Context.js';
 import {type Provider, ToolbarButton, type ToolbarItem} from './Toolbar.js';
 
 const UIStrings = {
   /**
-   *@description Text to close something
+   * @description Text to close something
    */
   close: 'Close',
   /**
-   *@description Text announced when the DevTools are undocked
+   * @description Text announced when the DevTools are undocked
    */
   devtoolsUndocked: 'DevTools is undocked',
   /**
-   *@description Text announced when the DevTools are docked to the left, right, or bottom of the browser tab
-   *@example {bottom} PH1
+   * @description Text announced when the DevTools are docked to the left, right, or bottom of the browser tab
+   * @example {bottom} PH1
    */
   devToolsDockedTo: 'DevTools is docked to {PH1}',
 } as const;
@@ -123,6 +123,12 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
     return this.dockSideInternal;
   }
 
+  /**
+   * Whether the DevTools can be docked, used to determine if we show docking UI.
+   * Set via `Root.Runtime.Runtime.queryParam('can_dock')`. See https://cs.chromium.org/can_dock+f:window
+   *
+   * Shouldn't be used as a heuristic for target connection state.
+   */
   canDock(): boolean {
     return this.canDockInternal;
   }
@@ -175,9 +181,9 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   announceDockLocation(): void {
     if (this.dockSideInternal === DockState.UNDOCKED) {
-      alert(i18nString(UIStrings.devtoolsUndocked));
+      LiveAnnouncer.alert(i18nString(UIStrings.devtoolsUndocked));
     } else {
-      alert(i18nString(UIStrings.devToolsDockedTo, {PH1: this.dockSideInternal || ''}));
+      LiveAnnouncer.alert(i18nString(UIStrings.devToolsDockedTo, {PH1: this.dockSideInternal || ''}));
     }
   }
 }

package/front_end/ui/legacy/EmptyWidget.ts

@@ -28,64 +28,94 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/* eslint-disable rulesdir/no-imperative-dom-api */
-
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import {Directives, html, render} from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import emptyWidgetStyles from './emptyWidget.css.js';
+import inspectorCommonStyles from './inspectorCommon.css.js';
 import {VBox} from './Widget.js';
 import {XLink} from './XLink.js';
 
 const UIStrings = {
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation
    */
   learnMore: 'Learn more',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/EmptyWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {ref} = Directives;
+
+interface EmptyWidgetInput {
+  header: string;
+  text: string;
+  link?: Platform.DevToolsPath.UrlString|undefined|null;
+}
+
+interface EmptyWidgetOutput {
+  contentElement: Element|undefined;
+}
+
+type View = (input: EmptyWidgetInput, output: EmptyWidgetOutput, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  render(html`
+    <style>${inspectorCommonStyles}</style>
+    <style>${emptyWidgetStyles}</style>
+    <div class="empty-state" jslog=${VisualLogging.section('empty-view')}
+         ${ref(e => {output.contentElement = e;})}>
+      <div class="empty-state-header">${input.header}</div>
+      <div class="empty-state-description">
+        <span>${input.text}</span>
+        ${input.link ? XLink.create(
+            input.link, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more') : ''}
+      </div>
+    </div>`, target);
+  // clang-format on
+};
 
 export class EmptyWidget extends VBox {
-  #headerElement: HTMLElement;
-  #textElement: HTMLElement;
-  #linkElement?: HTMLElement;
+  #header: string;
+  #text: string;
+  #link: Platform.DevToolsPath.UrlString|undefined|null;
+  #view: View;
 
-  constructor(header: string, text: string, element?: HTMLElement) {
-    super(undefined, undefined, element);
-    this.registerRequiredCSS(emptyWidgetStyles);
-    this.element.classList.add('empty-view-scroller');
-    this.contentElement = this.element.createChild('div', 'empty-state');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('empty-view')}`);
-    this.#headerElement = this.contentElement.createChild('div', 'empty-state-header');
-    this.#headerElement.textContent = header;
-    this.#textElement = this.contentElement.createChild('div', 'empty-state-description').createChild('span');
-    this.#textElement.textContent = text;
+  constructor(headerOrElement: string|HTMLElement, text = '', element?: HTMLElement, view = DEFAULT_VIEW) {
+    const header = typeof headerOrElement === 'string' ? headerOrElement : '';
+    if (!element && headerOrElement instanceof HTMLElement) {
+      element = headerOrElement;
+    }
+    super(element, {classes: ['empty-view-scroller']});
+    this.#header = header;
+    this.#text = text;
+    this.#link = undefined;
+    this.#view = view;
+    this.performUpdate();
   }
 
   set link(link: Platform.DevToolsPath.UrlString|undefined|null) {
-    if (this.#linkElement) {
-      this.#linkElement.remove();
-    }
-    if (!link) {
-      return;
-    }
-    this.#linkElement = XLink.create(
-        link,
-        i18nString(UIStrings.learnMore),
-        undefined,
-        undefined,
-        'learn-more',
-    );
-    this.#textElement.insertAdjacentElement('afterend', this.#linkElement);
+    this.#link = link;
+    this.performUpdate();
   }
 
   set text(text: string) {
-    this.#textElement.textContent = text;
+    this.#text = text;
+    this.performUpdate();
   }
 
   set header(header: string) {
-    this.#headerElement.textContent = header;
+    this.#header = header;
+    this.performUpdate();
+  }
+
+  override performUpdate(): void {
+    const output = {contentElement: undefined};
+    this.#view({header: this.#header, text: this.#text, link: this.#link}, output, this.element);
+    if (output.contentElement) {
+      this.contentElement = output.contentElement;
+    }
   }
 }

package/front_end/ui/legacy/FilterBar.ts

@@ -50,20 +50,20 @@ import {HBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   *@description Text to filter result items
+   * @description Text to filter result items
    */
   filter: 'Filter',
   /**
-   *@description Text that appears when hover over the filter bar in the Network tool
+   * @description Text that appears when hover over the filter bar in the Network tool
    */
   egSmalldUrlacomb: 'e.g. `/small[\d]+/ url:a.com/b`',
   /**
-   *@description Text that appears when hover over the All button in the Network tool
-   *@example {Ctrl + } PH1
+   * @description Text that appears when hover over the All button in the Network tool
+   * @example {Ctrl + } PH1
    */
   sclickToSelectMultipleTypes: '{PH1}Click to select multiple types',
   /**
-   *@description Text for everything
+   * @description Text for everything
    */
   allStrings: 'All',
 } as const;
@@ -429,11 +429,11 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
       return;
     }
 
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp' || (event.key === 'Tab' && event.shiftKey)) {
       if (this.keyFocusNextBit(element, true /* selectPrevious */)) {
         event.consume(true);
       }
-    } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+    } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown' || (event.key === 'Tab' && !event.shiftKey)) {
       if (this.keyFocusNextBit(element, false /* selectPrevious */)) {
         event.consume(true);
       }
@@ -443,10 +443,15 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
   }
 
   private keyFocusNextBit(target: HTMLElement, selectPrevious: boolean): boolean {
-    const index = this.typeFilterElements.indexOf(target);
+    let index = this.typeFilterElements.indexOf(target);
+
     if (index === -1) {
-      return false;
+      index = this.typeFilterElements.findIndex(el => el.classList.contains('selected'));
+      if (index === -1) {
+        index = selectPrevious ? this.typeFilterElements.length : -1;
+      }
     }
+
     const nextIndex = selectPrevious ? index - 1 : index + 1;
     if (nextIndex < 0 || nextIndex >= this.typeFilterElements.length) {
       return false;

package/front_end/ui/legacy/GlassPane.ts

@@ -8,12 +8,13 @@ import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
 import {Widget} from './Widget.js';
 
 export class GlassPane {
-  private readonly widgetInternal = new Widget(true);
+  private readonly widgetInternal;
 
   element: typeof Widget.prototype.element;
   contentElement: typeof Widget.prototype.contentElement;
   private readonly onMouseDownBound: (event: Event) => void;
   private onClickOutsideCallback: ((arg0: Event) => void)|null = null;
+  #onHideCallback: (() => void)|null = null;
   private maxSize: Size|null = null;
   private positionX: number|null = null;
   private positionY: number|null = null;
@@ -24,12 +25,10 @@ export class GlassPane {
   #ignoreLeftMargin = false;
 
   constructor(jslog?: string) {
+    this.widgetInternal = new Widget({jslog, useShadowDom: true});
     this.widgetInternal.markAsRoot();
     this.element = this.widgetInternal.element;
     this.contentElement = this.widgetInternal.contentElement;
-    if (jslog) {
-      this.contentElement.setAttribute('jslog', jslog);
-    }
 
     this.registerRequiredCSS(glassPaneStyles);
     this.setPointerEventsBehavior(PointerEventsBehavior.PIERCE_GLASS_PANE);
@@ -68,6 +67,10 @@ export class GlassPane {
     this.onClickOutsideCallback = callback;
   }
 
+  setOnHideCallback(cb: () => void): void {
+    this.#onHideCallback = cb;
+  }
+
   setMaxContentSize(size: Size|null): void {
     this.maxSize = size;
     this.positionContent();
@@ -124,6 +127,9 @@ export class GlassPane {
     this.element.ownerDocument.body.removeEventListener('mousedown', this.onMouseDownBound, true);
     this.element.ownerDocument.body.removeEventListener('pointerdown', this.onMouseDownBound, true);
     this.widgetInternal.detach();
+    if (this.#onHideCallback) {
+      this.#onHideCallback();
+    }
   }
 
   private onMouseDown(event: Event): void {

package/front_end/ui/legacy/Infobar.ts

@@ -17,11 +17,11 @@ import type {Widget} from './Widget.js';
 
 const UIStrings = {
   /**
-   *@description Text on a button to close the infobar and never show the infobar in the future
+   * @description Text on a button to close the infobar and never show the infobar in the future
    */
   dontShowAgain: 'Don\'t show again',
   /**
-   *@description Text to close something
+   * @description Text to close something
    */
   close: 'Close',
 } as const;

package/front_end/ui/legacy/InspectorView.test.ts

@@ -0,0 +1,99 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// 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 type * as Platform from '../../core/platform/platform.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import {MockStore} from '../../testing/MockSettingStorage.js';
+
+import * as LegacyUI from './legacy.js';
+
+const InspectorView = LegacyUI.InspectorView.InspectorView;
+const Settings = Common.Settings.Settings;
+const DRAWER_ORIENTATION_SETTING_NAME = 'inspector.use-vertical-drawer-orientation';
+
+describeWithEnvironment('InspectorView', () => {
+  beforeEach(() => {
+    // Register settings required for InspectorView to instantiate
+    Common.Settings.registerSettingsForTest([
+      {
+        category: Common.Settings.SettingCategory.GLOBAL,
+        settingName: 'language',
+        settingType: Common.Settings.SettingType.ENUM,
+        defaultValue: 'en-US',
+      },
+      {
+        category: Common.Settings.SettingCategory.GLOBAL,
+        settingName: 'shortcut-panel-switch',
+        settingType: Common.Settings.SettingType.BOOLEAN,
+        defaultValue: false,
+      },
+      {
+        category: Common.Settings.SettingCategory.GLOBAL,
+        settingName: 'currentDockState',
+        settingType: Common.Settings.SettingType.ENUM,
+        defaultValue: 'undocked',
+        options: [
+          {
+            value: 'right',
+            text: (): Platform.UIString.LocalizedString => 'right' as Platform.UIString.LocalizedString,
+            title: (): Platform.UIString.LocalizedString => 'Dock to right' as Platform.UIString.LocalizedString,
+            raw: false,
+          },
+          {
+            value: 'bottom',
+            text: (): Platform.UIString.LocalizedString => 'bottom' as Platform.UIString.LocalizedString,
+            title: (): Platform.UIString.LocalizedString => 'Dock to bottom' as Platform.UIString.LocalizedString,
+            raw: false,
+          },
+          {
+            value: 'left',
+            text: (): Platform.UIString.LocalizedString => 'left' as Platform.UIString.LocalizedString,
+            title: (): Platform.UIString.LocalizedString => 'Dock to left' as Platform.UIString.LocalizedString,
+            raw: false,
+          },
+          {
+            value: 'undocked',
+            text: (): Platform.UIString.LocalizedString => 'undocked' as Platform.UIString.LocalizedString,
+            title: (): Platform.UIString.LocalizedString => 'Undock' as Platform.UIString.LocalizedString,
+            raw: false,
+          },
+        ],
+      },
+    ]);
+
+    // Reset settings for each test
+    const mockStore = new MockStore();
+    const syncedStorage = new Common.Settings.SettingsStorage({}, mockStore);
+    const globalStorage = new Common.Settings.SettingsStorage({}, mockStore);
+    const localStorage = new Common.Settings.SettingsStorage({}, mockStore);
+
+    Common.Settings.Settings.instance({forceNew: true, syncedStorage, globalStorage, localStorage});
+  });
+
+  it('drawer orientation and setting default to horizontal', () => {
+    const inspectorView = InspectorView.instance({forceNew: true});
+    assert.isFalse(inspectorView.isDrawerOrientationVertical());
+    const setting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
+    assert.isFalse(setting.get());
+  });
+
+  it('drawer orientation setting updates after each toggle', () => {
+    const inspectorView = InspectorView.instance({forceNew: true});
+    const setting = Settings.instance().settingForTest(DRAWER_ORIENTATION_SETTING_NAME);
+    assert.isFalse(setting.get());
+
+    inspectorView.toggleDrawerOrientation();
+    assert.isTrue(setting.get());
+
+    inspectorView.toggleDrawerOrientation();
+    assert.isFalse(setting.get());
+  });
+
+  it('drawer starts vertical if setting is true', () => {
+    Settings.instance().createSetting(DRAWER_ORIENTATION_SETTING_NAME, true);
+    const inspectorView = InspectorView.instance({forceNew: true});
+    assert.isTrue(inspectorView.isDrawerOrientationVertical());
+  });
+});

package/front_end/ui/legacy/InspectorView.ts

@@ -47,7 +47,6 @@ import {Dialog} from './Dialog.js';
 import {DockController, DockState} from './DockController.js';
 import {GlassPane} from './GlassPane.js';
 import {Infobar, Type as InfobarType} from './Infobar.js';
-import inspectorViewTabbedPaneStyles from './inspectorViewTabbedPane.css.js';
 import {KeyboardShortcut} from './KeyboardShortcut.js';
 import type {Panel} from './Panel.js';
 import {ShowMode, SplitWidget} from './SplitWidget.js';
@@ -60,33 +59,33 @@ import {VBox, type Widget, WidgetFocusRestorer} from './Widget.js';
 
 const UIStrings = {
   /**
-   *@description Title of more tabs button in inspector view
+   * @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
+   * @description Text that appears when hovor over the close button on the drawer view
    */
   closeDrawer: 'Close drawer',
   /**
-   *@description The aria label for main tabbed pane that contains Panels
+   * @description The ARIA label for the main tab bar that contains the DevTools panels
    */
   panels: 'Panels',
   /**
-   *@description Title of an action that reloads the tab currently being debugged by DevTools
+   * @description Title of an action that reloads the tab currently being debugged by DevTools
    */
   reloadDebuggedTab: 'Reload page',
   /**
-   *@description Title of an action that reloads the DevTools
+   * @description Title of an action that reloads the DevTools
    */
   reloadDevtools: 'Reload DevTools',
   /**
-   *@description Text for context menu action to move a tab to the main panel
+   * @description Text for context menu action to move a tab to the main tab bar
    */
-  moveToTop: 'Move to top',
+  moveToMainTabBar: 'Move to main tab bar',
   /**
-   *@description Text for context menu action to move a tab to the drawer
+   * @description Text for context menu action to move a tab to the drawer
    */
-  moveToBottom: 'Move to bottom',
+  moveToDrawer: 'Move to drawer',
   /**
    * @description Text shown in a prompt to the user when DevTools is started and the
    * currently selected DevTools locale does not match Chrome's locale.
@@ -108,19 +107,19 @@ const UIStrings = {
    */
   setToSpecificLanguage: 'Switch DevTools to {PH1}',
   /**
-   *@description The aria label for main toolbar
+   * @description The aria label for main toolbar
    */
   mainToolbar: 'Main toolbar',
   /**
-   *@description The aria label for the drawer.
+   * @description The aria label for the drawer.
    */
   drawer: 'Tool drawer',
   /**
-   *@description The aria label for the drawer shown.
+   * @description The aria label for the drawer shown.
    */
   drawerShown: 'Drawer shown',
   /**
-   *@description The aria label for the drawer hidden.
+   * @description The aria label for the drawer hidden.
    */
   drawerHidden: 'Drawer hidden',
   /**
@@ -129,15 +128,20 @@ const UIStrings = {
    */
   selectOverrideFolder: 'Select a folder to store override files in',
   /**
-   *@description Label for a button which opens a file picker.
+   * @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_);
 let inspectorViewInstance: InspectorView|null = null;
 
 export class InspectorView extends VBox implements ViewLocationResolver {
+  private readonly drawerIsVerticalSetting: Common.Settings.Setting<boolean>;
   private readonly drawerSplitWidget: SplitWidget;
   private readonly tabDelegate: InspectorViewTabDelegate;
   private readonly drawerTabbedLocation: TabbedViewLocation;
@@ -152,14 +156,18 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   private reloadRequiredInfobar?: Infobar;
   #selectOverrideFolderInfobar?: Infobar;
   #resizeObserver: ResizeObserver;
+  #toggleOrientationButton: ToolbarButton;
 
   constructor() {
     super();
     GlassPane.setContainer(this.element);
     this.setMinimumSize(250, 72);
 
-    // DevTools sidebar is a vertical split of panels tabbed pane and a drawer.
-    this.drawerSplitWidget = new SplitWidget(false, true, 'inspector.drawer-split-view-state', 200, 200);
+    // DevTools sidebar is a vertical split of main tab bar panels and a drawer.
+    this.drawerIsVerticalSetting =
+        Common.Settings.Settings.instance().createSetting('inspector.use-vertical-drawer-orientation', false);
+    this.drawerSplitWidget =
+        new SplitWidget(this.drawerIsVerticalSetting.get(), true, 'inspector.drawer-split-view-state', 200, 200);
     this.drawerSplitWidget.hideSidebar();
     this.drawerSplitWidget.enableShowModeSaving();
     this.drawerSplitWidget.show(this.element);
@@ -176,12 +184,18 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     const moreTabsButton = this.drawerTabbedLocation.enableMoreTabsButton();
     moreTabsButton.setTitle(i18nString(UIStrings.moreTools));
     this.drawerTabbedPane = this.drawerTabbedLocation.tabbedPane();
-    this.drawerTabbedPane.setMinimumSize(0, 27);
+    this.setDrawerMinimumSize();
     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().track({click: true})}`);
+    this.#toggleOrientationButton.element.setAttribute('jslogcontext', 'toggle-drawer-orientation');
+    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);
@@ -197,6 +211,9 @@ export class InspectorView extends VBox implements ViewLocationResolver {
 
     this.drawerSplitWidget.installResizer(this.drawerTabbedPane.headerElement());
     this.drawerSplitWidget.setSidebarWidget(this.drawerTabbedPane);
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER)) {
+      this.drawerTabbedPane.rightToolbar().appendToolbarItem(this.#toggleOrientationButton);
+    }
     this.drawerTabbedPane.rightToolbar().appendToolbarItem(closeDrawerButton);
     this.drawerTabbedPane.headerElement().setAttribute('jslog', `${VisualLogging.toolbar('drawer').track({
                                                          drag: true,
@@ -217,7 +234,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     // the Device mode button is not added and so the allocated space is smaller.
     const allocatedSpace = Root.Runtime.conditions.canDock() ? '69px' : '41px';
     this.tabbedPane.leftToolbar().style.minWidth = allocatedSpace;
-    this.tabbedPane.registerRequiredCSS(inspectorViewTabbedPaneStyles);
     this.tabbedPane.addEventListener(
         TabbedPaneEvents.TabSelected,
         (event: Common.EventTarget.EventTargetEvent<EventData>) => this.tabSelected(event.data.tabId), this);
@@ -354,7 +370,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       let icon: IconButton.Icon.Icon|null = null;
       if (warnings.length !== 0) {
         const warning = warnings.length === 1 ? warnings[0] : '· ' + warnings.join('\n· ');
-        icon = IconButton.Icon.create('warning-filled', 'warning');
+        icon = IconButton.Icon.create('warning-filled', 'small');
+        icon.classList.add('warning');
         Tooltip.install(icon, warning);
       }
       tabbedPane.setTrailingTabIcon(tabId, icon);
@@ -398,7 +415,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       this.focusRestorer = null;
     }
     this.emitDrawerChangeEvent(true);
-    ARIAUtils.alert(i18nString(UIStrings.drawerShown));
+    ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerShown));
   }
 
   drawerVisible(): boolean {
@@ -415,7 +432,26 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     this.drawerSplitWidget.hideSidebar(true);
 
     this.emitDrawerChangeEvent(false);
-    ARIAUtils.alert(i18nString(UIStrings.drawerHidden));
+    ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.drawerHidden));
+  }
+
+  toggleDrawerOrientation(): void {
+    const drawerWillBeVertical = !this.drawerSplitWidget.isVertical();
+    this.#toggleOrientationButton.setGlyph(drawerWillBeVertical ? 'dock-bottom' : 'dock-right');
+    this.drawerIsVerticalSetting.set(drawerWillBeVertical);
+    this.drawerSplitWidget.setVertical(drawerWillBeVertical);
+    this.setDrawerMinimumSize();
+  }
+
+  setDrawerMinimumSize(): 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(200, 27);
+    } else {
+      this.drawerTabbedPane.setMinimumSize(0, 27);
+    }
   }
 
   setDrawerMinimized(minimized: boolean): void {
@@ -439,6 +475,10 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     return this.drawerSplitWidget.isSidebarMinimized();
   }
 
+  isDrawerOrientationVertical(): boolean {
+    return this.drawerSplitWidget.isVertical();
+  }
+
   private keyDown(event: Event): void {
     const keyboardEvent = (event as KeyboardEvent);
     if (!KeyboardShortcut.eventHasCtrlEquivalentKey(keyboardEvent) || keyboardEvent.altKey || keyboardEvent.shiftKey) {
@@ -685,6 +725,11 @@ export class ActionDelegate implements ActionDelegateInterface {
           });
         }
         return true;
+      case 'main.toggle-drawer-orientation':
+        if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.VERTICAL_DRAWER)) {
+          InspectorView.instance().toggleDrawerOrientation();
+        }
+        return true;
       case 'main.next-tab':
         InspectorView.instance().tabbedPane.selectNextTab();
         InspectorView.instance().tabbedPane.focus();
@@ -708,7 +753,7 @@ export class InspectorViewTabDelegate implements TabbedPaneTabDelegate {
     ViewManager.instance().moveView(tabId, 'drawer-view');
   }
 
-  moveToMainPanel(tabId: string): void {
+  moveToMainTabBar(tabId: string): void {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.TabMovedToMainPanel);
     ViewManager.instance().moveView(tabId, 'panel');
   }
@@ -722,10 +767,11 @@ export class InspectorViewTabDelegate implements TabbedPaneTabDelegate {
     const locationName = ViewManager.instance().locationNameForViewId(tabId);
     if (locationName === 'drawer-view') {
       contextMenu.defaultSection().appendItem(
-          i18nString(UIStrings.moveToTop), this.moveToMainPanel.bind(this, tabId), {jslogContext: 'move-to-top'});
+          i18nString(UIStrings.moveToMainTabBar), this.moveToMainTabBar.bind(this, tabId),
+          {jslogContext: 'move-to-top'});
     } else {
       contextMenu.defaultSection().appendItem(
-          i18nString(UIStrings.moveToBottom), this.moveToDrawer.bind(this, tabId), {jslogContext: 'move-to-bottom'});
+          i18nString(UIStrings.moveToDrawer), this.moveToDrawer.bind(this, tabId), {jslogContext: 'move-to-bottom'});
     }
   }
 }