chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/ui/legacy/ViewManager.ts

@@ -9,7 +9,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as Root from '../../core/root/root.js';
+import * as Root from '../../core/root/root.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
@@ -17,12 +17,13 @@ import * as ARIAUtils from './ARIAUtils.js';
 import type {ContextMenu} from './ContextMenu.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 {createTextChild, PromotionManager} from './UIUtils.js';
 import type {TabbedViewLocation, View, ViewLocation} from './View.js';
 import viewContainersStyles from './viewContainers.css.js';
 import {
   getLocalizedViewLocationCategory,
   getRegisteredLocationResolvers,
+  getRegisteredViewExtensionForID,
   getRegisteredViewExtensions,
   maybeRemoveViewExtension,
   registerLocationResolver,
@@ -37,8 +38,8 @@ import {VBox, type Widget} from './Widget.js';
 
 const UIStrings = {
   /**
-   *@description Aria label for the tab panel view container
-   *@example {Sensors} PH1
+   * @description Aria label for the tab panel view container
+   * @example {Sensors} PH1
    */
   sPanel: '{PH1} panel',
 } as const;
@@ -74,6 +75,10 @@ export class PreRegisteredView implements View {
     return Boolean(this.viewRegistration.isPreviewFeature);
   }
 
+  featurePromotionId(): string|undefined {
+    return this.viewRegistration.featurePromotionId;
+  }
+
   iconName(): string|undefined {
     return this.viewRegistration.iconName;
   }
@@ -145,12 +150,27 @@ export class PreRegisteredView implements View {
 
 let viewManagerInstance: ViewManager|undefined;
 
-export class ViewManager {
+export const enum Events {
+  VIEW_VISIBILITY_CHANGED = 'ViewVisibilityChanged',
+}
+
+export interface ViewVisibilityEventData {
+  location: string;
+  revealedViewId: string|undefined;
+  hiddenViewId: string|undefined;
+}
+
+export interface EventTypes {
+  [Events.VIEW_VISIBILITY_CHANGED]: ViewVisibilityEventData;
+}
+
+export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   readonly views: Map<string, View>;
   private readonly locationNameByViewId: Map<string, string>;
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 
   private constructor() {
+    super();
     this.views = new Map();
     this.locationNameByViewId = new Map();
 
@@ -324,6 +344,20 @@ export class ViewManager {
     await location.showView(view, undefined, userGesture, omitFocus);
   }
 
+  isViewVisible(viewId: string): boolean {
+    const view = this.views.get(viewId);
+    if (!view) {
+      return false;
+    }
+
+    const location = locationForView.get(view);
+    if (!location) {
+      return false;
+    }
+
+    return location.isViewVisible(view);
+  }
+
   async resolveLocation(location?: string): Promise<Location|null> {
     if (!location) {
       return null;
@@ -341,7 +375,7 @@ export class ViewManager {
   }
 
   createTabbedLocation(
-      revealCallback?: (() => void), location?: string, restoreSelection?: boolean, allowReorder?: boolean,
+      revealCallback: (() => void), location: string, restoreSelection?: boolean, allowReorder?: boolean,
       defaultTab?: string|null): TabbedViewLocation {
     return new TabbedLocation(this, revealCallback, location, restoreSelection, allowReorder, defaultTab);
   }
@@ -430,7 +464,7 @@ class ExpandableContainerWidget extends VBox {
   private materializePromise?: Promise<void>;
 
   constructor(view: View) {
-    super(true);
+    super({useShadowDom: true});
     this.element.classList.add('flex-none');
     this.registerRequiredCSS(viewContainersStyles);
 
@@ -577,6 +611,10 @@ class Location {
   removeView(_view: View): void {
     throw new Error('not implemented');
   }
+
+  isViewVisible(_view: View): boolean {
+    throw new Error('not implemented');
+  }
 }
 
 const locationForView = new WeakMap<View, Location>();
@@ -587,6 +625,7 @@ type TabOrderSetting = Record<string, number>;
 
 class TabbedLocation extends Location implements TabbedViewLocation {
   private tabbedPaneInternal: TabbedPane;
+  private readonly location: string;
   private readonly allowReorder: boolean|undefined;
   private readonly closeableTabSetting: Common.Settings.Setting<CloseableTabSetting>;
   private readonly tabOrderSetting: Common.Settings.Setting<TabOrderSetting>;
@@ -595,7 +634,7 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   private readonly views = new Map<string, View>();
 
   constructor(
-      manager: ViewManager, revealCallback?: (() => void), location?: string, restoreSelection?: boolean,
+      manager: ViewManager, revealCallback: (() => void), location: string, restoreSelection?: boolean,
       allowReorder?: boolean, defaultTab?: string|null) {
     const tabbedPane = new TabbedPane();
     if (allowReorder) {
@@ -603,11 +642,14 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     }
 
     super(manager, tabbedPane, revealCallback);
+    this.location = location;
     this.tabbedPaneInternal = tabbedPane;
     this.allowReorder = allowReorder;
 
     this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
     this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabClosed, this.tabClosed, this);
+    this.tabbedPaneInternal.addEventListener(
+        TabbedPaneEvents.PaneVisibilityChanged, this.tabbedPaneVisibilityChanged, this);
 
     this.closeableTabSetting = Common.Settings.Settings.instance().createSetting('closeable-tabs', {});
     // As we give tabs the capability to be closed we also need to add them to the setting so they are still open
@@ -648,7 +690,6 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     const moreTabsButton = new ToolbarMenuButton(
         this.appendTabsToMenu.bind(this), /* isIconDropdown */ true, undefined, 'more-tabs', 'dots-vertical');
     this.tabbedPaneInternal.leftToolbar().appendToolbarItem(moreTabsButton);
-    this.tabbedPaneInternal.disableOverflowMenu();
     return moreTabsButton;
   }
 
@@ -701,6 +742,32 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   private appendTabsToMenu(contextMenu: ContextMenu): void {
     const views = Array.from(this.views.values());
     views.sort((viewa, viewb) => viewa.title().localeCompare(viewb.title()));
+
+    const freestylerView = views.find(view => view.viewId() === 'freestyler');
+    if (freestylerView) {
+      const featureName = Root.Runtime.hostConfig.devToolsFreestyler?.featureName;
+      const promotionId =
+          (freestylerView instanceof PreRegisteredView) ? freestylerView.featurePromotionId() : undefined;
+      // Register this with the PromotionManager and the back-end, in order to make sure that
+      // showing the general ai assistance panel new badge is synchronized.
+      const handler = (): void => {
+        void this.showView(freestylerView, undefined, true);
+        if (promotionId) {
+          PromotionManager.instance().recordFeatureInteraction(promotionId);
+        }
+      };
+      contextMenu.defaultSection().appendItem(freestylerView.title(), handler, {
+        isPreviewFeature: freestylerView.isPreviewFeature(),
+        jslogContext: freestylerView.viewId(),
+        // Request to show a new badge in the native context menu only if:
+        // 1. The promotion manager agrees that we may show it, or 2. the promotion manager doesn't track this badge.
+        // Note that this is only a request to show the new badge, the back-end will decide whether
+        // or not it will show it depending on the user education service.
+        featureName: !promotionId || PromotionManager.instance().maybeShowPromotion(promotionId) ? featureName :
+                                                                                                   undefined,
+      });
+    }
+
     for (const view of views) {
       const title = view.title();
 
@@ -712,6 +779,11 @@ class TabbedLocation extends Location implements TabbedViewLocation {
         continue;
       }
 
+      if (view.viewId() === 'freestyler') {
+        // We have already taken care of this.
+        continue;
+      }
+
       const isPreviewFeature = view.isPreviewFeature();
       contextMenu.defaultSection().appendItem(
           title, this.showView.bind(this, view, undefined, true), {isPreviewFeature, jslogContext: view.viewId()});
@@ -797,11 +869,31 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     this.views.delete(view.viewId());
   }
 
+  override isViewVisible(view: View): boolean {
+    return this.tabbedPaneInternal.isShowing() && this.tabbedPaneInternal?.selectedTabId === view.viewId();
+  }
+
+  private tabbedPaneVisibilityChanged(event: Common.EventTarget.EventTargetEvent<{isVisible: boolean}>): void {
+    if (!this.tabbedPaneInternal.selectedTabId) {
+      return;
+    }
+    this.manager.dispatchEventToListeners(Events.VIEW_VISIBILITY_CHANGED, {
+      location: this.location,
+      revealedViewId: event.data.isVisible ? this.tabbedPaneInternal.selectedTabId : undefined,
+      hiddenViewId: event.data.isVisible ? undefined : this.tabbedPaneInternal.selectedTabId,
+    });
+  }
+
   private tabSelected(event: Common.EventTarget.EventTargetEvent<EventData>): void {
-    const {tabId} = event.data;
-    if (this.lastSelectedTabSetting && event.data['isUserGesture']) {
+    const {tabId, prevTabId, isUserGesture} = event.data;
+    if (this.lastSelectedTabSetting && isUserGesture) {
       this.lastSelectedTabSetting.set(tabId);
     }
+    this.manager.dispatchEventToListeners(Events.VIEW_VISIBILITY_CHANGED, {
+      location: this.location,
+      revealedViewId: tabId,
+      hiddenViewId: prevTabId,
+    });
   }
 
   private tabClosed(event: Common.EventTarget.EventTargetEvent<EventData>): void {
@@ -838,10 +930,6 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     this.tabOrderSetting.set(tabOrders);
   }
 
-  getCloseableTabSetting(): CloseableTabSetting {
-    return this.closeableTabSetting.get();
-  }
-
   static orderStep = 10;  // Keep in sync with descriptors.
 }
 
@@ -904,6 +992,11 @@ class StackLocation extends Location implements ViewLocation {
     this.manager.views.delete(view.viewId());
   }
 
+  override isViewVisible(_view: View): boolean {
+    // TODO(crbug.com/435356108): Implement this
+    throw new Error('not implemented');
+  }
+
   appendApplicableItems(locationName: string): void {
     for (const view of this.manager.viewsForLocation(locationName)) {
       this.appendView(view);
@@ -915,6 +1008,7 @@ export {
   getLocalizedViewLocationCategory,
   getRegisteredLocationResolvers,
   getRegisteredViewExtensions,
+  getRegisteredViewExtensionForID,
   maybeRemoveViewExtension,
   registerLocationResolver,
   registerViewExtension,

package/front_end/ui/legacy/ViewRegistration.ts

@@ -12,31 +12,31 @@ import type {Widget} from './Widget.js';
 
 const UIStrings = {
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Elements' panel.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Elements' panel.
    */
   elements: 'Elements',
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Drawer' panel.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Drawer' panel.
    */
   drawer: 'Drawer',
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Drawer sidebar' panel.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Drawer sidebar' panel.
    */
   drawer_sidebar: 'Drawer sidebar',
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Panel'.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Panel'.
    */
   panel: 'Panel',
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Network' panel.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Network' panel.
    */
   network: 'Network',
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Settings' panel.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Settings' panel.
    */
   settings: 'Settings',
   /**
-   *@description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Sources' panel.
+   * @description Badge label for an entry in the Quick Open menu. Selecting the entry opens the 'Sources' panel.
    */
   sources: 'Sources',
 } as const;
@@ -154,6 +154,10 @@ export interface ViewRegistration {
    * Icon to be used next to view's title.
    */
   iconName?: string;
+  /**
+   * Whether a view needs to be promoted. A new badge is shown next to the menu items then.
+   */
+  featurePromotionId?: string;
 }
 
 const viewIdSet = new Set<string>();
@@ -166,6 +170,12 @@ export function registerViewExtension(registration: ViewRegistration): void {
   registeredViewExtensions.push(new PreRegisteredView(registration));
 }
 
+export function getRegisteredViewExtensionForID(id: string): PreRegisteredView|undefined {
+  return registeredViewExtensions.find(
+      view => view.viewId() === id &&
+          Root.Runtime.Runtime.isDescriptorEnabled({experiment: view.experiment(), condition: view.condition()}));
+}
+
 export function getRegisteredViewExtensions(): PreRegisteredView[] {
   return registeredViewExtensions.filter(
       view => Root.Runtime.Runtime.isDescriptorEnabled({experiment: view.experiment(), condition: view.condition()}));

package/front_end/ui/legacy/Widget.ts

@@ -32,9 +32,9 @@
 import '../../core/dom_extension/dom_extension.js';
 
 import * as Platform from '../../core/platform/platform.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
-import {Constraints, Size} from './Geometry.js';
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
 import {XWidget} from './XWidget.js';
 
@@ -214,6 +214,44 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
 const UPDATE_COMPLETE = Promise.resolve(true);
 const UPDATE_COMPLETE_RESOLVE = (_result: boolean): void => {};
 
+/**
+ * Additional options passed to the `Widget` constructor to configure the
+ * behavior of the resulting instance.
+ */
+export interface WidgetOptions {
+  /**
+   * If you pass `true` here, the `contentElement` of the resulting `Widget`
+   * will be placed into the shadow DOM of its `element`. If the `element`
+   * doesn't already have a `shadowRoot`, a new one will be created.
+   *
+   * Otherwise, the `contentElement` will be a regular child of the `element`.
+   *
+   * Its default value is `false`.
+   */
+  useShadowDom?: boolean;
+
+  /**
+   * A boolean that, when set to `true`, specifies behavior that mitigates
+   * custom element issues around focusability. When a non-focusable part of
+   * the shadow DOM is clicked, the first focusable part is given focus, and
+   * the shadow host is given any available `:focus` styling.
+   *
+   * Its default value is `false`.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow
+   */
+  delegatesFocus?: boolean;
+
+  /**
+   * The Visual Logging configuration to put onto the `element` of the resulting
+   * `Widget`.
+   */
+  jslog?: string;
+  /**
+   * The additional classes to put onto the `element` of the resulting `Widget`.
+   */
+  classes?: string[];
+}
 export class Widget {
   readonly element: HTMLElement;
   contentElement: HTMLElement;
@@ -228,25 +266,60 @@ export class Widget {
   #invalidationsSuspended = 0;
   #parentWidget: Widget|null = null;
   #defaultFocusedElement?: Element|null;
-  #cachedConstraints?: Constraints;
-  #constraints?: Constraints;
+  #cachedConstraints?: Geometry.Constraints;
+  #constraints?: Geometry.Constraints;
   #invalidationsRequested?: boolean;
   #externallyManaged?: boolean;
   #updateComplete = UPDATE_COMPLETE;
   #updateCompleteResolve = UPDATE_COMPLETE_RESOLVE;
   #updateRequestID = 0;
-  constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
-    this.element = element || document.createElement('div');
+
+  /**
+   * Constructs a new `Widget` with the given `options`.
+   *
+   * @param options optional settings to configure the behavior.
+   */
+  constructor(options?: WidgetOptions);
+
+  /**
+   * Constructs a new `Widget` with the given `options` and attached to the
+   * given `element`.
+   *
+   * If `element` is `undefined`, a new `<div>` element will be created instead
+   * and the widget will be attached to that.
+   *
+   * @param element an (optional) `HTMLElement` to attach the `Widget` to.
+   * @param options optional settings to configure the behavior.
+   */
+  constructor(element?: HTMLElement, options?: WidgetOptions);
+
+  constructor(elementOrOptions?: HTMLElement|WidgetOptions, options?: WidgetOptions) {
+    if (elementOrOptions instanceof HTMLElement) {
+      this.element = elementOrOptions;
+    } else {
+      this.element = document.createElement('div');
+      if (elementOrOptions !== undefined) {
+        options = elementOrOptions;
+      }
+    }
     this.#shadowRoot = this.element.shadowRoot;
-    if (useShadowDom && !this.#shadowRoot) {
+    if (options?.useShadowDom && !this.#shadowRoot) {
       this.element.classList.add('vbox');
       this.element.classList.add('flex-auto');
-      this.#shadowRoot = createShadowRootWithCoreStyles(this.element, {delegatesFocus});
+      this.#shadowRoot = createShadowRootWithCoreStyles(this.element, {
+        delegatesFocus: options?.delegatesFocus,
+      });
       this.contentElement = document.createElement('div');
       this.#shadowRoot.appendChild(this.contentElement);
     } else {
       this.contentElement = this.element;
     }
+    if (options?.classes) {
+      this.element.classList.add(...options.classes);
+    }
+    if (options?.jslog) {
+      this.contentElement.setAttribute('jslog', options.jslog);
+    }
     this.contentElement.classList.add('widget');
     widgetMap.set(this.element, this);
   }
@@ -270,7 +343,7 @@ export class Widget {
     if (element instanceof WidgetElement) {
       return element.createWidget();
     }
-    return new Widget(undefined, undefined, element);
+    return new Widget(element);
   }
 
   markAsRoot(): void {
@@ -359,6 +432,7 @@ export class Widget {
 
   private processWasHidden(): void {
     this.callOnVisibleChildren(this.processWasHidden);
+    this.notify(this.wasHidden);
   }
 
   private processOnResize(): void {
@@ -387,6 +461,9 @@ export class Widget {
   willHide(): void {
   }
 
+  wasHidden(): void {
+  }
+
   onResize(): void {
   }
 
@@ -693,11 +770,11 @@ export class Widget {
     return this.element.hasFocus();
   }
 
-  calculateConstraints(): Constraints {
-    return new Constraints();
+  calculateConstraints(): Geometry.Constraints {
+    return new Geometry.Constraints();
   }
 
-  constraints(): Constraints {
+  constraints(): Geometry.Constraints {
     if (typeof this.#constraints !== 'undefined') {
       return this.#constraints;
     }
@@ -708,16 +785,17 @@ export class Widget {
   }
 
   setMinimumAndPreferredSizes(width: number, height: number, preferredWidth: number, preferredHeight: number): void {
-    this.#constraints = new Constraints(new Size(width, height), new Size(preferredWidth, preferredHeight));
+    this.#constraints =
+        new Geometry.Constraints(new Geometry.Size(width, height), new Geometry.Size(preferredWidth, preferredHeight));
     this.invalidateConstraints();
   }
 
   setMinimumSize(width: number, height: number): void {
-    this.minimumSize = new Size(width, height);
+    this.minimumSize = new Geometry.Size(width, height);
   }
 
-  set minimumSize(size: Size) {
-    this.#constraints = new Constraints(size);
+  set minimumSize(size: Geometry.Size) {
+    this.#constraints = new Geometry.Constraints(size);
     this.invalidateConstraints();
   }
 
@@ -775,9 +853,9 @@ export class Widget {
    * the `requestAnimationFrame` and executed with the animation frame. Instead,
    * use the `requestUpdate()` method to schedule an asynchronous update.
    *
-   * @return can either return nothing or a promise; in that latter case, the
-   *         update logic will await the resolution of the returned promise
-   *         before proceeding.
+   * @returns can either return nothing or a promise; in that latter case, the
+   *          update logic will await the resolution of the returned promise
+   *          before proceeding.
    */
   performUpdate(): Promise<void>|void {
   }
@@ -848,17 +926,32 @@ const storedScrollPositions = new WeakMap<Element, {
 }>();
 
 export class VBox extends Widget {
-  constructor(useShadowDom?: boolean|HTMLElement, delegatesFocus?: boolean, element?: HTMLElement) {
-    if (useShadowDom instanceof HTMLElement) {
-      element = useShadowDom;
-      useShadowDom = false;
-    }
-    super(useShadowDom, delegatesFocus, element);
+  /**
+   * Constructs a new `VBox` with the given `options`.
+   *
+   * @param options optional settings to configure the behavior.
+   */
+  constructor(options?: WidgetOptions);
+
+  /**
+   * Constructs a new `VBox` with the given `options` and attached to the
+   * given `element`.
+   *
+   * If `element` is `undefined`, a new `<div>` element will be created instead
+   * and the widget will be attached to that.
+   *
+   * @param element an (optional) `HTMLElement` to attach the `VBox` to.
+   * @param options optional settings to configure the behavior.
+   */
+  constructor(element?: HTMLElement, options?: WidgetOptions);
+
+  constructor() {
+    super(...arguments);
     this.contentElement.classList.add('vbox');
   }
 
-  override calculateConstraints(): Constraints {
-    let constraints: Constraints = new Constraints();
+  override calculateConstraints(): Geometry.Constraints {
+    let constraints: Geometry.Constraints = new Geometry.Constraints();
 
     function updateForChild(this: Widget): void {
       const child = this.constraints();
@@ -872,13 +965,32 @@ export class VBox extends Widget {
 }
 
 export class HBox extends Widget {
-  constructor(useShadowDom?: boolean) {
-    super(useShadowDom);
+  /**
+   * Constructs a new `HBox` with the given `options`.
+   *
+   * @param options optional settings to configure the behavior.
+   */
+  constructor(options?: WidgetOptions);
+
+  /**
+   * Constructs a new `HBox` with the given `options` and attached to the
+   * given `element`.
+   *
+   * If `element` is `undefined`, a new `<div>` element will be created instead
+   * and the widget will be attached to that.
+   *
+   * @param element an (optional) `HTMLElement` to attach the `HBox` to.
+   * @param options optional settings to configure the behavior.
+   */
+  constructor(element?: HTMLElement, options?: WidgetOptions);
+
+  constructor() {
+    super(...arguments);
     this.contentElement.classList.add('hbox');
   }
 
-  override calculateConstraints(): Constraints {
-    let constraints: Constraints = new Constraints();
+  override calculateConstraints(): Geometry.Constraints {
+    let constraints: Geometry.Constraints = new Geometry.Constraints();
 
     function updateForChild(this: Widget): void {
       const child = this.constraints();

package/front_end/ui/legacy/XLink.ts

@@ -137,7 +137,7 @@ export class ContextMenuProvider implements Provider<Node> {
     while (targetNode && !(targetNode instanceof XLink)) {
       targetNode = targetNode.parentNodeOrShadowHost();
     }
-    if (!targetNode || !targetNode.href) {
+    if (!targetNode?.href) {
       return;
     }
     const node: XLink = targetNode;