chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

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;
@@ -116,13 +116,18 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   private dockSideChanged(): void {
     this.setDockSide(this.currentDockStateSetting.get());
-    setTimeout(this.announceDockLocation.bind(this), 2000);
   }
 
   dockSide(): DockState|undefined {
     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;
   }
@@ -163,6 +168,7 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
 
   private setIsDockedResponse(eventData: ChangeEvent): void {
     this.dispatchEventToListeners(Events.AFTER_DOCK_SIDE_CHANGED, eventData);
+    this.announceDockLocation();
   }
 
   toggleDockSide(): void {
@@ -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

@@ -2,18 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable rulesdir/no-imperative-dom-api */
-import type {Size} from './Geometry.js';
+import type {Size} from '../../models/geometry/geometry.js';
+
 import glassPaneStyles from './glassPane.css.js';
 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 +26,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 +68,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 +128,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.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,33 @@ 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;
 
+const MIN_MAIN_PANEL_WIDTH = 240;
+const MIN_VERTICAL_DRAWER_WIDTH = 200;
+// 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_HEIGHT = 72;
+
+export enum DrawerOrientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal',
+  UNSET = 'unset',
+}
+
 export class InspectorView extends VBox implements ViewLocationResolver {
+  private readonly drawerOrientationSetting: Common.Settings.Setting<DrawerOrientation>;
   private readonly drawerSplitWidget: SplitWidget;
   private readonly tabDelegate: InspectorViewTabDelegate;
   private readonly drawerTabbedLocation: TabbedViewLocation;
@@ -152,14 +169,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);
+    this.setMinimumSize(MIN_INSPECTOR_WIDTH_HORIZONTAL_DRAWER, MIN_INSPECTOR_HEIGHT);
 
-    // 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.drawerOrientationSetting =
+        Common.Settings.Settings.instance().createSetting('inspector.drawer-orientation', DrawerOrientation.UNSET);
+    const isVertical = this.drawerOrientationSetting.get() === DrawerOrientation.VERTICAL;
+    this.drawerSplitWidget = new SplitWidget(isVertical, true, 'inspector.drawer-split-view-state', 200, 200);
     this.drawerSplitWidget.hideSidebar();
     this.drawerSplitWidget.enableShowModeSaving();
     this.drawerSplitWidget.show(this.element);
@@ -176,12 +197,19 @@ 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.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().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 +225,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,
@@ -210,6 +241,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
         'panel', true, true, Root.Runtime.Runtime.queryParam('panel'));
 
     this.tabbedPane = this.tabbedLocation.tabbedPane();
+    this.tabbedPane.setMinimumSize(MIN_MAIN_PANEL_WIDTH, 0);
     this.tabbedPane.element.classList.add('main-tabbed-pane');
     // The 'Inspect element' and 'Device mode' buttons in the tabs toolbar takes longer to load than
     // the tabs themselves, so a space equal to the buttons' total width is preemptively allocated
@@ -217,7 +249,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 +385,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 +430,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 +447,38 @@ 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({force}: {force?: Omit<DrawerOrientation, DrawerOrientation.UNSET>} = {}): void {
+    let drawerWillBeVertical: boolean;
+    if (force) {
+      drawerWillBeVertical = force === DrawerOrientation.VERTICAL;
+    } else {
+      drawerWillBeVertical = !this.drawerSplitWidget.isVertical();
+    }
+
+    this.drawerOrientationSetting.set(drawerWillBeVertical ? DrawerOrientation.VERTICAL : DrawerOrientation.HORIZONTAL);
+    this.#toggleOrientationButton.setGlyph(drawerWillBeVertical ? 'dock-bottom' : 'dock-right');
+    this.drawerSplitWidget.setVertical(drawerWillBeVertical);
+    this.setDrawerRelatedMinimumSizes();
+  }
+
+  isUserExplicitlyUpdatedDrawerOrientation(): boolean {
+    return this.drawerOrientationSetting.get() !== 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 {
@@ -439,6 +502,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 +752,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 +780,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 +794,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'});
     }
   }
 }

package/front_end/ui/legacy/ListWidget.ts

@@ -20,23 +20,23 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   *@description Text on a button to start editing text
+   * @description Text on a button to start editing text
    */
   editString: 'Edit',
   /**
-   *@description Label for an item to remove something
+   * @description Label for an item to remove something
    */
   removeString: 'Remove',
   /**
-   *@description Text to save something
+   * @description Text to save something
    */
   saveString: 'Save',
   /**
-   *@description Text to add something
+   * @description Text to add something
    */
   addString: 'Add',
   /**
-   *@description Text to cancel something
+   * @description Text to cancel something
    */
   cancelString: 'Cancel',
   /**
@@ -64,8 +64,8 @@ export class ListWidget<T> extends VBox {
   private editElement: Element|null;
   private emptyPlaceholder: Element|null;
   private isTable: boolean;
-  constructor(delegate: Delegate<T>, delegatesFocus: boolean|undefined = true, isTable = false) {
-    super(true, delegatesFocus);
+  constructor(delegate: Delegate<T>, delegatesFocus = true, isTable = false) {
+    super({useShadowDom: true, delegatesFocus});
     this.registerRequiredCSS(listWidgetStyles);
     this.delegate = delegate;
 
@@ -210,7 +210,7 @@ export class ListWidget<T> extends VBox {
       const index = this.elements.indexOf(element);
       this.element.focus();
       this.delegate.removeItemRequested(this.items[index], index);
-      ARIAUtils.alert(i18nString(UIStrings.removedItem));
+      ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.removedItem));
       if (this.elements.length >= 1) {
         // focus on the next item in the list, or the last item if we're removing the last item
         (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
@@ -269,7 +269,7 @@ export class ListWidget<T> extends VBox {
     this.stopEditing();
     if (editItem !== null) {
       this.delegate.commitEdit(editItem, editor, isNew);
-      ARIAUtils.alert(i18nString(UIStrings.changesSaved));
+      ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.changesSaved));
       if (this.elements[focusElementIndex]) {
         (this.elements[focusElementIndex] as HTMLElement).focus();
       }

package/front_end/ui/legacy/Panel.ts

@@ -41,7 +41,7 @@ export class Panel extends VBox {
   protected panelName: string;
 
   constructor(name: string, useShadowDom?: boolean) {
-    super(useShadowDom);
+    super({useShadowDom});
 
     this.element.setAttribute('jslog', `${VisualLogging.panel().context(name).track({resize: true})}`);
     this.element.classList.add('panel');