chrome-devtools-frontend 1.0.1643099 → 1.0.1643855

package/front_end/ui/legacy/StackedPane.ts

@@ -0,0 +1,229 @@
+// 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.
+
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import type * as Lit from '../../ui/lit/lit.js';
+import {createIcon, type Icon} from '../kit/kit.js';
+import * as VisualLogging from '../visual_logging/visual_logging.js';
+
+import * as ARIAUtils from './ARIAUtils.js';
+import type * as Toolbar from './Toolbar.js';
+import {createTextChild} from './UIUtils.js';
+import type {View} from './View.js';
+import viewContainersStyles from './viewContainers.css.js';
+import {type AnyWidget, VBox} from './Widget.js';
+
+type CreateToolbarFn = (toolbarItems: Toolbar.ToolbarItem[]|Lit.TemplateResult) => Element|null;
+type SetWidgetForViewFn = (view: View, widget: AnyWidget) => void;
+
+export class ExpandableContainerWidget extends VBox {
+  private titleElement: HTMLDivElement;
+  private readonly titleExpandIcon: Icon;
+  private readonly view: View;
+  private widget?: AnyWidget;
+  private materializePromise?: Promise<void>;
+
+  constructor(
+      view: View,
+      private readonly createToolbar: CreateToolbarFn,
+      private readonly setWidgetForView: SetWidgetForViewFn,
+      private readonly onVisibilityChanged?: (isExpanded: boolean) => void,
+  ) {
+    super({useShadowDom: true});
+    this.element.classList.add('flex-none');
+    this.registerRequiredCSS(viewContainersStyles);
+
+    this.onVisibilityChanged = onVisibilityChanged;
+    this.createToolbar = createToolbar;
+
+    this.titleElement = document.createElement('div');
+    this.titleElement.classList.add('expandable-view-title');
+    this.titleElement.setAttribute('jslog', `${VisualLogging.sectionHeader().context(view.viewId()).track({
+                                     click: true,
+                                     keydown: 'Enter|Space|ArrowLeft|ArrowRight',
+                                   })}`);
+    ARIAUtils.markAsTreeitem(this.titleElement);
+    this.titleExpandIcon = createIcon('triangle-right', 'title-expand-icon');
+    this.titleElement.appendChild(this.titleExpandIcon);
+    const titleText = view.title();
+    createTextChild(this.titleElement, titleText);
+    ARIAUtils.setLabel(this.titleElement, titleText);
+    ARIAUtils.setExpanded(this.titleElement, false);
+    this.titleElement.tabIndex = 0;
+    self.onInvokeElement(this.titleElement, this.toggleExpanded.bind(this));
+    this.titleElement.addEventListener('keydown', this.onTitleKeyDown.bind(this), false);
+    this.contentElement.insertBefore(this.titleElement, this.contentElement.firstChild);
+
+    ARIAUtils.setControls(this.titleElement, this.contentElement.createChild('slot'));
+    this.view = view;
+    expandableContainerForView.set(view, this);
+  }
+
+  isExpanded(): boolean {
+    return this.titleElement.classList.contains('expanded');
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    if (this.widget && this.materializePromise) {
+      void this.materializePromise.then(() => {
+        if (this.isExpanded() && this.widget) {
+          this.widget.show(this.element);
+        }
+      });
+    }
+  }
+
+  private materialize(): Promise<void> {
+    if (this.materializePromise) {
+      return this.materializePromise;
+    }
+    // TODO(crbug.com/1006759): Transform to async-await
+    const promises = [];
+    promises.push(this.view.toolbarItems().then(toolbarItems => {
+      const toolbarElement = this.createToolbar(toolbarItems);
+      if (toolbarElement) {
+        this.titleElement.appendChild(toolbarElement);
+      }
+    }));
+    promises.push(this.view.widget().then(widget => {
+      this.widget = widget;
+      this.setWidgetForView(this.view, widget);
+    }));
+    this.materializePromise = Promise.all(promises).then(() => {});
+    return this.materializePromise;
+  }
+
+  expand(): Promise<void> {
+    if (this.isExpanded()) {
+      return this.materialize();
+    }
+    this.titleElement.classList.add('expanded');
+    ARIAUtils.setExpanded(this.titleElement, true);
+    this.titleExpandIcon.name = 'triangle-down';
+    this.onVisibilityChanged?.(true);
+    return this.materialize().then(() => {
+      if (this.isExpanded() && this.widget) {
+        this.widget.show(this.element);
+      }
+    });
+  }
+
+  private collapse(): void {
+    if (!this.isExpanded()) {
+      return;
+    }
+    this.titleElement.classList.remove('expanded');
+    ARIAUtils.setExpanded(this.titleElement, false);
+    this.titleExpandIcon.name = 'triangle-right';
+    this.onVisibilityChanged?.(false);
+    void this.materialize().then(() => {
+      if (this.widget) {
+        this.widget.detach();
+      }
+    });
+  }
+
+  private toggleExpanded(event: Event): void {
+    if (event.type === 'keydown' && event.target !== this.titleElement) {
+      return;
+    }
+    if (this.isExpanded()) {
+      this.collapse();
+    } else {
+      void this.expand();
+    }
+  }
+
+  private onTitleKeyDown(event: Event): void {
+    if (event.target !== this.titleElement) {
+      return;
+    }
+    const keyEvent = (event as KeyboardEvent);
+    if (keyEvent.key === 'ArrowLeft') {
+      this.collapse();
+    } else if (keyEvent.key === 'ArrowRight') {
+      if (!this.isExpanded()) {
+        void this.expand();
+      } else if (this.widget) {
+        this.widget.focus();
+      }
+    }
+  }
+}
+
+const expandableContainerForView = new WeakMap<View, ExpandableContainerWidget>();
+
+export class StackedPane extends VBox {
+  readonly expandableContainers = new Map<string, ExpandableContainerWidget>();
+  constructor(
+      private readonly createToolbar: CreateToolbarFn,
+      private readonly setWidgetForView: SetWidgetForViewFn,
+      private readonly onViewVisibilityChanged?: (viewId: string, isExpanded: boolean) => void,
+  ) {
+    super();
+    this.createToolbar = createToolbar;
+    this.onViewVisibilityChanged = onViewVisibilityChanged;
+    ARIAUtils.markAsTree(this.element);
+  }
+
+  appendView(view: View, insertBefore?: View|null): void {
+    let container = this.expandableContainers.get(view.viewId());
+    if (!container) {
+      container =
+          new ExpandableContainerWidget(view, this.createToolbar, this.setWidgetForView,
+                                        isExpanded => this.onViewVisibilityChanged?.(view.viewId(), isExpanded));
+      let beforeElement: Node|null = null;
+      if (insertBefore) {
+        const beforeContainer = expandableContainerForView.get(insertBefore);
+        beforeElement = beforeContainer ? beforeContainer.element : null;
+      }
+      container.show(this.contentElement, beforeElement);
+      this.expandableContainers.set(view.viewId(), container);
+    }
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    for (const [viewId, container] of this.expandableContainers) {
+      if (container.isExpanded()) {
+        this.onViewVisibilityChanged?.(viewId, true);
+      }
+    }
+  }
+
+  override willHide(): void {
+    super.willHide();
+    for (const [viewId, container] of this.expandableContainers) {
+      if (container.isExpanded()) {
+        this.onViewVisibilityChanged?.(viewId, false);
+      }
+    }
+  }
+
+  removeView(view: View): void {
+    const container = this.expandableContainers.get(view.viewId());
+    if (container) {
+      container.detach();
+      this.expandableContainers.delete(view.viewId());
+    }
+  }
+
+  async expandView(view: View): Promise<void> {
+    const container = this.expandableContainers.get(view.viewId());
+    if (container) {
+      await container.expand();
+    }
+  }
+
+  isViewExpanded(viewId: string): boolean {
+    const container = this.expandableContainers.get(viewId);
+    return container ? container.isExpanded() : false;
+  }
+
+  getContainerForView(view: View): ExpandableContainerWidget|undefined {
+    return this.expandableContainers.get(view.viewId());
+  }
+}

package/front_end/ui/legacy/ViewManager.ts

@@ -11,18 +11,17 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import type * as Foundation from '../../foundation/foundation.js';
-import {createIcon, type Icon} from '../kit/kit.js';
+import {createIcon} from '../kit/kit.js';
 import {render, type TemplateResult} from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu} from './ContextMenu.js';
 import * as PlusButton from './PlusButton.js';
+import {StackedPane} from './StackedPane.js';
 import {type EventData, Events as TabbedPaneEvents, TabbedPane} from './TabbedPane.js';
 import {type ItemsProvider, type ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
-import {createTextChild} from './UIUtils.js';
 import type {TabbedViewLocation, View, ViewLocation} from './View.js';
-import viewContainersStyles from './viewContainers.css.js';
 import {
   getLocalizedViewLocationCategory,
   getRegisteredLocationResolvers,
@@ -262,6 +261,10 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return toolbar;
   }
 
+  static setWidgetForView(view: View, widget: AnyWidget): void {
+    widgetForView.set(view, widget);
+  }
+
   getRegisteredViewExtensions(): PreRegisteredView[] {
     return this.preRegisteredViews;
   }
@@ -402,7 +405,7 @@ export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return new TabbedLocation(this, revealCallback, location, restoreSelection, allowReorder, options);
   }
 
-  createStackLocation(revealCallback?: (() => void), location?: string, jslogContext?: string): ViewLocation {
+  createStackLocation(revealCallback?: (() => void), location?: string, jslogContext?: string): StackLocation {
     return new StackLocation(this, revealCallback, location, jslogContext);
   }
 
@@ -453,7 +456,7 @@ export class ContainerWidget extends VBox {
       // Move focus from |this| to loaded |widget| if any.
       const shouldFocus = this.element.hasFocus();
       this.setDefaultFocusedElement(null);
-      widgetForView.set(this.view, widget);
+      ViewManager.setWidgetForView(this.view, widget);
       widget.show(this.element);
       if (shouldFocus) {
         widget.focus();
@@ -479,131 +482,6 @@ export class ContainerWidget extends VBox {
   }
 }
 
-class ExpandableContainerWidget extends VBox {
-  private titleElement: HTMLDivElement;
-  private readonly titleExpandIcon: Icon;
-  private readonly view: View;
-  private widget?: AnyWidget;
-  private materializePromise?: Promise<void>;
-
-  constructor(view: View) {
-    super({useShadowDom: true});
-    this.element.classList.add('flex-none');
-    this.registerRequiredCSS(viewContainersStyles);
-
-    this.titleElement = document.createElement('div');
-    this.titleElement.classList.add('expandable-view-title');
-    this.titleElement.setAttribute('jslog', `${VisualLogging.sectionHeader().context(view.viewId()).track({
-                                     click: true,
-                                     keydown: 'Enter|Space|ArrowLeft|ArrowRight',
-                                   })}`);
-    ARIAUtils.markAsTreeitem(this.titleElement);
-    this.titleExpandIcon = createIcon('triangle-right', 'title-expand-icon');
-    this.titleElement.appendChild(this.titleExpandIcon);
-    const titleText = view.title();
-    createTextChild(this.titleElement, titleText);
-    ARIAUtils.setLabel(this.titleElement, titleText);
-    ARIAUtils.setExpanded(this.titleElement, false);
-    this.titleElement.tabIndex = 0;
-    self.onInvokeElement(this.titleElement, this.toggleExpanded.bind(this));
-    this.titleElement.addEventListener('keydown', this.onTitleKeyDown.bind(this), false);
-    this.contentElement.insertBefore(this.titleElement, this.contentElement.firstChild);
-
-    ARIAUtils.setControls(this.titleElement, this.contentElement.createChild('slot'));
-    this.view = view;
-    expandableContainerForView.set(view, this);
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    if (this.widget && this.materializePromise) {
-      void this.materializePromise.then(() => {
-        if (this.titleElement.classList.contains('expanded') && this.widget) {
-          this.widget.show(this.element);
-        }
-      });
-    }
-  }
-
-  private materialize(): Promise<void> {
-    if (this.materializePromise) {
-      return this.materializePromise;
-    }
-    // TODO(crbug.com/1006759): Transform to async-await
-    const promises = [];
-    promises.push(this.view.toolbarItems().then(toolbarItems => {
-      const toolbarElement = ViewManager.createToolbar(toolbarItems);
-      if (toolbarElement) {
-        this.titleElement.appendChild(toolbarElement);
-      }
-    }));
-    promises.push(this.view.widget().then(widget => {
-      this.widget = widget;
-      widgetForView.set(this.view, widget);
-      widget.show(this.element);
-    }));
-    this.materializePromise = Promise.all(promises).then(() => {});
-    return this.materializePromise;
-  }
-
-  expand(): Promise<void> {
-    if (this.titleElement.classList.contains('expanded')) {
-      return this.materialize();
-    }
-    this.titleElement.classList.add('expanded');
-    ARIAUtils.setExpanded(this.titleElement, true);
-    this.titleExpandIcon.name = 'triangle-down';
-    return this.materialize().then(() => {
-      if (this.widget) {
-        this.widget.show(this.element);
-      }
-    });
-  }
-
-  private collapse(): void {
-    if (!this.titleElement.classList.contains('expanded')) {
-      return;
-    }
-    this.titleElement.classList.remove('expanded');
-    ARIAUtils.setExpanded(this.titleElement, false);
-    this.titleExpandIcon.name = 'triangle-right';
-    void this.materialize().then(() => {
-      if (this.widget) {
-        this.widget.detach();
-      }
-    });
-  }
-
-  private toggleExpanded(event: Event): void {
-    if (event.type === 'keydown' && event.target !== this.titleElement) {
-      return;
-    }
-    if (this.titleElement.classList.contains('expanded')) {
-      this.collapse();
-    } else {
-      void this.expand();
-    }
-  }
-
-  private onTitleKeyDown(event: Event): void {
-    if (event.target !== this.titleElement) {
-      return;
-    }
-    const keyEvent = (event as KeyboardEvent);
-    if (keyEvent.key === 'ArrowLeft') {
-      this.collapse();
-    } else if (keyEvent.key === 'ArrowRight') {
-      if (!this.titleElement.classList.contains('expanded')) {
-        void this.expand();
-      } else if (this.widget) {
-        this.widget.focus();
-      }
-    }
-  }
-}
-
-const expandableContainerForView = new WeakMap<View, ExpandableContainerWidget>();
-
 class Location {
   protected readonly manager: ViewManager;
   private readonly revealCallback: (() => void)|undefined;
@@ -958,68 +836,80 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   static orderStep = 10;  // Keep in sync with descriptors.
 }
 
-class StackLocation extends Location implements ViewLocation {
-  private readonly vbox: VBox;
-  private readonly expandableContainers: Map<string, ExpandableContainerWidget>;
-
-  constructor(manager: ViewManager, revealCallback?: (() => void), location?: string, jslogContext?: string) {
-    const vbox = new VBox();
-    vbox.element.setAttribute('jslog', `${VisualLogging.pane(jslogContext || 'sidebar').track({resize: true})}`);
-    super(manager, vbox, revealCallback);
-    this.vbox = vbox;
-    ARIAUtils.markAsTree(vbox.element);
-
-    this.expandableContainers = new Map();
+export class StackLocation extends Location implements ViewLocation {
+  private readonly stackedPane: StackedPane;
+  private readonly location: string;
+  #isVisible: boolean;
+
+  constructor(manager: ViewManager, revealCallback?: (() => void), location?: string, jslogContext?: string,
+              initialVisibility = true) {
+    const stackedPane =
+        new StackedPane(ViewManager.createToolbar, ViewManager.setWidgetForView, (viewId, isExpanded) => {
+          if (this.#isVisible) {
+            manager.dispatchEventToListeners(Events.VIEW_VISIBILITY_CHANGED, {
+              location: this.location,
+              revealedViewId: isExpanded ? viewId : undefined,
+              hiddenViewId: isExpanded ? undefined : viewId,
+            });
+          }
+        });
+    stackedPane.element.setAttribute('jslog', `${VisualLogging.pane(jslogContext || 'sidebar').track({resize: true})}`);
+    super(manager, stackedPane, revealCallback);
+    this.location = location || '';
+    this.stackedPane = stackedPane;
+    this.#isVisible = initialVisibility;
 
     if (location) {
       this.appendApplicableItems(location);
     }
   }
 
+  // Blink test(s) rely on this
+  get expandableContainers(): Map<string, AnyWidget> {
+    return this.stackedPane.expandableContainers;
+  }
+
+  notifyVisibilityChanged(isVisible: boolean): void {
+    if (this.#isVisible === isVisible) {
+      return;
+    }
+    this.#isVisible = isVisible;
+
+    for (const [viewId, container] of this.stackedPane.expandableContainers) {
+      if (container.isExpanded()) {
+        this.manager.dispatchEventToListeners(Events.VIEW_VISIBILITY_CHANGED, {
+          location: this.location,
+          revealedViewId: isVisible ? viewId : undefined,
+          hiddenViewId: isVisible ? undefined : viewId,
+        });
+      }
+    }
+  }
+
   appendView(view: View, insertBefore?: View|null): void {
     const oldLocation = locationForView.get(view);
     if (oldLocation && oldLocation !== this) {
       oldLocation.removeView(view);
     }
 
-    let container = this.expandableContainers.get(view.viewId());
-    if (!container) {
-      locationForView.set(view, this);
-      this.manager.views.set(view.viewId(), view);
-      container = new ExpandableContainerWidget(view);
-      let beforeElement: Node|null = null;
-      if (insertBefore) {
-        const beforeContainer = expandableContainerForView.get(insertBefore);
-        beforeElement = beforeContainer ? beforeContainer.element : null;
-      }
-      container.show(this.vbox.contentElement, beforeElement);
-      this.expandableContainers.set(view.viewId(), container);
-    }
+    locationForView.set(view, this);
+    this.manager.views.set(view.viewId(), view);
+    this.stackedPane.appendView(view, insertBefore);
   }
 
   override async showView(view: View, insertBefore?: View|null): Promise<void> {
     this.appendView(view, insertBefore);
-    const container = this.expandableContainers.get(view.viewId());
-    if (container) {
-      await container.expand();
-    }
+    await this.stackedPane.expandView(view);
   }
 
   override removeView(view: View): void {
-    const container = this.expandableContainers.get(view.viewId());
-    if (!container) {
-      return;
-    }
-
-    container.detach();
-    this.expandableContainers.delete(view.viewId());
+    this.stackedPane.removeView(view);
     locationForView.delete(view);
     this.manager.views.delete(view.viewId());
   }
 
-  override isViewVisible(_view: View): boolean {
-    // TODO(crbug.com/435356108): Implement this
-    throw new Error('not implemented');
+  override isViewVisible(view: View): boolean {
+    return this.#isVisible && this.stackedPane.isViewExpanded(view.viewId());
   }
 
   appendApplicableItems(locationName: string): void {

package/front_end/ui/legacy/legacy.ts

@@ -41,6 +41,7 @@ import * as ShortcutRegistry from './ShortcutRegistry.js';
 import * as SoftContextMenu from './SoftContextMenu.js';
 import * as SoftDropDown from './SoftDropDown.js';
 import * as SplitWidget from './SplitWidget.js';
+import * as StackedPane from './StackedPane.js';
 import * as SuggestBox from './SuggestBox.js';
 import * as TabbedPane from './TabbedPane.js';
 import * as TargetCrashedScreen from './TargetCrashedScreen.js';
@@ -95,6 +96,7 @@ export {
   SoftContextMenu,
   SoftDropDown,
   SplitWidget,
+  StackedPane,
   SuggestBox,
   TabbedPane,
   TargetCrashedScreen,
@@ -107,5 +109,5 @@ export {
   View,
   ViewManager,
   Widget,
-  ZoomManager
+  ZoomManager,
 };

package/package.json

@@ -92,5 +92,5 @@
     "webidl2": "24.5.0",
     "yargs": "17.7.2"
   },
-  "version": "1.0.1643099"
+  "version": "1.0.1643855"
 }