chrome-devtools-frontend 1.0.982087 → 1.0.995629

package/front_end/ui/legacy/ContextMenu.ts

@@ -352,6 +352,7 @@ export class ContextMenu extends SubMenu {
   private readonly handlers: Map<number, () => void>;
   idInternal: number;
   private softMenu?: SoftContextMenu;
+  private contextMenuLabel?: string;
 
   constructor(event: Event, options: ContextMenuOptions = {}) {
     super(null);
@@ -440,6 +441,9 @@ export class ContextMenu extends SubMenu {
       this.softMenu = new SoftContextMenu(
           (menuObject as SoftContextMenuDescriptor[]), this.itemSelected.bind(this), undefined, this.onSoftMenuClosed);
       this.softMenu.show((ownerDocument as Document), new AnchorBox(this.x, this.y, 0, 0));
+      if (this.contextMenuLabel) {
+        this.softMenu.setContextMenuElementLabel(this.contextMenuLabel);
+      }
     } else {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.showContextMenuAtPoint(
           this.x, this.y, menuObject, (ownerDocument as Document));
@@ -457,6 +461,10 @@ export class ContextMenu extends SubMenu {
     }
   }
 
+  setContextMenuLabel(label: string): void {
+    this.contextMenuLabel = label;
+  }
+
   setX(x: number): void {
     this.x = x;
   }
@@ -504,6 +512,12 @@ export class ContextMenu extends SubMenu {
     this.pendingTargets.push(target);
   }
 
+  markAsMenuItemCheckBox(): void {
+    if (this.softMenu) {
+      this.softMenu.markAsMenuItemCheckBox();
+    }
+  }
+
   private static pendingMenu: ContextMenu|null = null;
   private static useSoftMenu = false;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration

package/front_end/ui/legacy/DockController.ts

@@ -31,6 +31,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 {ActionDelegate} from './ActionRegistration.js';
 import type {Context} from './Context.js';
@@ -162,7 +163,7 @@ export class DockController extends Common.ObjectWrapper.ObjectWrapper<EventType
       this.lastDockStateSetting.set(this.dockSideInternal);
     }
 
-    this.savedFocus = document.deepActiveElement();
+    this.savedFocus = Platform.DOMUtilities.deepActiveElement(document);
     const eventData = {from: this.dockSideInternal, to: dockSide};
     this.dispatchEventToListeners(Events.BeforeDockSideChanged, eventData);
     console.timeStamp('DockController.setIsDocked');

package/front_end/ui/legacy/SettingsUI.ts

@@ -143,11 +143,11 @@ export const bindCheckbox = function(inputElement: Element, setting: Common.Sett
 
 export const createCustomSetting = function(name: string, element: Element): Element {
   const p = document.createElement('p');
-  const fieldsetElement = p.createChild('fieldset');
-  const label = fieldsetElement.createChild('label');
+  p.classList.add('settings-select');
+  const label = p.createChild('label');
   label.textContent = name;
   ARIAUtils.bindLabelToControl(label, element);
-  fieldsetElement.appendChild(element);
+  p.appendChild(element);
   return p;
 };
 

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -38,6 +38,7 @@ import {Icon} from './Icon.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
 import {createTextChild, ElementFocusRestorer} from './UIUtils.js';
 import softContextMenuStyles from './softContextMenu.css.legacy.js';
+import {InspectorView} from './InspectorView.js';
 
 const UIStrings = {
   /**
@@ -75,7 +76,7 @@ export class SoftContextMenu {
   private glassPane?: GlassPane;
   private contextMenuElement?: HTMLElement;
   private focusRestorer?: ElementFocusRestorer;
-  private hideOnUserGesture?: ((event: Event) => void);
+  private hideOnUserMouseDownUnlessInMenu?: ((event: Event) => void);
   private activeSubMenuElement?: HTMLElement;
   private subMenu?: SoftContextMenu;
   private onMenuClosed?: () => void;
@@ -122,7 +123,7 @@ export class SoftContextMenu {
     this.focusRestorer = new ElementFocusRestorer(this.contextMenuElement);
 
     if (!this.parentMenu) {
-      this.hideOnUserGesture = (event: Event): void => {
+      this.hideOnUserMouseDownUnlessInMenu = (event: Event): void => {
         // If a user clicks on any submenu, prevent the menu system from closing.
         let subMenu: (SoftContextMenu|undefined) = this.subMenu;
         while (subMenu) {
@@ -135,13 +136,37 @@ export class SoftContextMenu {
         this.discard();
         event.consume(true);
       };
-      this.document.body.addEventListener('mousedown', this.hideOnUserGesture, false);
-      if (this.document.defaultView) {
-        this.document.defaultView.addEventListener('resize', this.hideOnUserGesture, false);
+
+      this.document.body.addEventListener('mousedown', this.hideOnUserMouseDownUnlessInMenu, false);
+
+      // To reliably get resize events when 1) the browser window is resized,
+      // 2) DevTools is undocked and resized and 3) DevTools is docked &
+      // resized, we have to use ResizeObserver.
+      const devToolsElem = InspectorView.maybeGetInspectorViewInstance()?.element;
+      if (devToolsElem) {
+        // The resize-observer will fire immediately upon starting observation.
+        // So we have to ignore that first fire, and then the moment we get a
+        // second, we know that it's been resized so we can act accordingly.
+        let firedOnce = false;
+        const observer = new ResizeObserver(() => {
+          if (firedOnce) {
+            // observer.disconnect();
+            // this.discard();
+            return;
+          }
+          firedOnce = true;
+        });
+        observer.observe(devToolsElem);
       }
     }
   }
 
+  setContextMenuElementLabel(label: string): void {
+    if (this.contextMenuElement) {
+      ARIAUtils.setAccessibleName(this.contextMenuElement, label);
+    }
+  }
+
   discard(): void {
     if (this.subMenu) {
       this.subMenu.discard();
@@ -152,14 +177,11 @@ export class SoftContextMenu {
     if (this.glassPane) {
       this.glassPane.hide();
       delete this.glassPane;
-      if (this.hideOnUserGesture) {
+      if (this.hideOnUserMouseDownUnlessInMenu) {
         if (this.document) {
-          this.document.body.removeEventListener('mousedown', this.hideOnUserGesture, false);
-          if (this.document.defaultView) {
-            this.document.defaultView.removeEventListener('resize', this.hideOnUserGesture, false);
-          }
+          this.document.body.removeEventListener('mousedown', this.hideOnUserMouseDownUnlessInMenu, false);
         }
-        delete this.hideOnUserGesture;
+        delete this.hideOnUserMouseDownUnlessInMenu;
       }
     }
     if (this.parentMenu) {
@@ -397,9 +419,7 @@ export class SoftContextMenu {
 
     this.highlightedMenuItemElement = menuItemElement;
     if (this.highlightedMenuItemElement) {
-      if (ThemeSupport.ThemeSupport.instance().hasTheme() || Host.Platform.isMac()) {
-        this.highlightedMenuItemElement.classList.add('force-white-icons');
-      }
+      this.highlightedMenuItemElement.classList.add('force-white-icons');
       this.highlightedMenuItemElement.classList.add('soft-context-menu-item-mouse-over');
       const detailsForElement = this.detailsForElementMap.get(this.highlightedMenuItemElement);
       if (detailsForElement && detailsForElement.customElement) {
@@ -518,6 +538,15 @@ export class SoftContextMenu {
         keyboardEvent.consume(true);
     }
   }
+
+  markAsMenuItemCheckBox(): void {
+    if (!this.contextMenuElement) {
+      return;
+    }
+    for (const child of this.contextMenuElement.children) {
+      ARIAUtils.markAsMenuItemCheckBox(child);
+    }
+  }
 }
 export interface SoftContextMenuDescriptor {
   type: string;

package/front_end/ui/legacy/Toolbar.ts

@@ -335,6 +335,18 @@ export class Toolbar {
     this.appendToolbarItem(new ToolbarText(text));
   }
 
+  removeToolbarItem(itemToRemove: ToolbarItem): void {
+    const updatedItems = [];
+    for (const item of this.items) {
+      if (item === itemToRemove) {
+        item.element.remove();
+      } else {
+        updatedItems.push(item);
+      }
+    }
+    this.items = updatedItems;
+  }
+
   removeToolbarItems(): void {
     for (const item of this.items) {
       item.toolbar = null;
@@ -787,6 +799,10 @@ export class ToolbarToggle extends ToolbarButton {
   setToggleWithRedColor(toggleWithRedColor: boolean): void {
     this.element.classList.toggle('toolbar-toggle-with-red-color', toggleWithRedColor);
   }
+
+  setToggleWithDot(toggleWithDot: boolean): void {
+    this.element.classList.toggle('toolbar-toggle-with-dot', toggleWithDot);
+  }
 }
 
 export class ToolbarMenuButton extends ToolbarButton {

package/front_end/ui/legacy/Treeoutline.ts

@@ -442,6 +442,7 @@ export class TreeElement {
   expanded: boolean;
   selected: boolean;
   private expandable!: boolean;
+  #expandRecursively: boolean = true;
   private collapsible: boolean;
   toggleOnClick: boolean;
   button: HTMLButtonElement|null;
@@ -846,6 +847,14 @@ export class TreeElement {
     }
   }
 
+  isExpandRecursively(): boolean {
+    return this.#expandRecursively;
+  }
+
+  setExpandRecursively(expandRecursively: boolean): void {
+    this.#expandRecursively = expandRecursively;
+  }
+
   isCollapsible(): boolean {
     return this.collapsible;
   }
@@ -1044,16 +1053,17 @@ export class TreeElement {
       maxDepth = 3;
     }
 
-    while (item) {
-      await item.populateIfNeeded();
+    do {
+      if (item.isExpandRecursively()) {
+        await item.populateIfNeeded();
 
-      if (depth < maxDepth) {
-        item.expand();
+        if (depth < maxDepth) {
+          item.expand();
+        }
       }
-
-      item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
+      item = item.traverseNextTreeElement(!item.isExpandRecursively(), this, true, info);
       depth += info.depthChange;
-    }
+    } while (item !== null);
   }
 
   collapseOrAscend(altKey: boolean): boolean {

package/front_end/ui/legacy/UIUtils.ts

@@ -345,7 +345,7 @@ export function isEditing(): boolean {
     return true;
   }
 
-  const focused = document.deepActiveElement();
+  const focused = Platform.DOMUtilities.deepActiveElement(document);
   if (!focused) {
     return false;
   }
@@ -645,7 +645,7 @@ export class ElementFocusRestorer {
   private previous: HTMLElement|null;
   constructor(element: Element) {
     this.element = (element as HTMLElement | null);
-    this.previous = (element.ownerDocument.deepActiveElement() as HTMLElement | null);
+    this.previous = (Platform.DOMUtilities.deepActiveElement(element.ownerDocument) as HTMLElement | null);
     (element as HTMLElement).focus();
   }
 

package/front_end/ui/legacy/View.ts

@@ -2,15 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../core/platform/platform.js';
+
 import type {TabbedPane} from './TabbedPane.js';
 import type {ToolbarItem, ToolbarMenuButton} from './Toolbar.js';
 import {ViewManager} from './ViewManager.js';
 import type {Widget} from './Widget.js';
 import {VBox} from './Widget.js';
+
 export interface View {
   viewId(): string;
 
-  title(): string;
+  title(): Platform.UIString.LocalizedString;
 
   isCloseable(): boolean;
 
@@ -26,18 +29,21 @@ export interface View {
 }
 
 export class SimpleView extends VBox implements View {
-  private readonly titleInternal: string;
-  constructor(title: string, isWebComponent?: boolean) {
+  readonly #title: Platform.UIString.LocalizedString;
+  readonly #viewId: string;
+
+  constructor(title: Platform.UIString.LocalizedString, isWebComponent?: boolean, viewId?: string) {
     super(isWebComponent);
-    this.titleInternal = title;
+    this.#title = title;
+    this.#viewId = viewId ?? title;
   }
 
   viewId(): string {
-    return this.titleInternal;
+    return this.#viewId;
   }
 
-  title(): string {
-    return this.titleInternal;
+  title(): Platform.UIString.LocalizedString {
+    return this.#title;
   }
 
   isCloseable(): boolean {
@@ -53,7 +59,7 @@ export class SimpleView extends VBox implements View {
   }
 
   widget(): Promise<Widget> {
-    return (Promise.resolve(this) as Promise<Widget>);
+    return Promise.resolve(this);
   }
 
   revealView(): Promise<void> {

package/front_end/ui/legacy/ViewManager.ts

@@ -15,7 +15,7 @@ import type {ToolbarItem} from './Toolbar.js';
 import {Toolbar, ToolbarMenuButton} from './Toolbar.js';
 import {createTextChild} from './UIUtils.js';
 import type {TabbedViewLocation, View, ViewLocation, ViewLocationResolver} from './View.js';
-import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, type ViewRegistration} from './ViewRegistration.js';
+import {getRegisteredLocationResolvers, getRegisteredViewExtensions, maybeRemoveViewExtension, registerLocationResolver, registerViewExtension, ViewLocationCategoryValues, ViewLocationValues, ViewPersistence, type ViewRegistration, resetViewRegistration} from './ViewRegistration.js';
 import type {Widget, WidgetElement} from './Widget.js';
 import {VBox} from './Widget.js';
 import viewContainersStyles from './viewContainers.css.legacy.js';
@@ -914,4 +914,5 @@ export {
   getRegisteredLocationResolvers,
   registerLocationResolver,
   ViewLocationCategoryValues,
+  resetViewRegistration,
 };

package/front_end/ui/legacy/ViewRegistration.ts

@@ -158,6 +158,12 @@ export function getRegisteredLocationResolvers(): Array<LocationResolverRegistra
   return registeredLocationResolvers;
 }
 
+export function resetViewRegistration(): void {
+  registeredViewExtensions.length = 0;
+  registeredLocationResolvers.length = 0;
+  viewLocationNameSet.clear();
+}
+
 // TODO(crbug.com/1181019)
 export const ViewLocationCategoryValues = {
   ELEMENTS: 'Elements',

package/front_end/ui/legacy/Widget.ts

@@ -29,6 +29,7 @@
  */
 
 import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Helpers from '../components/helpers/helpers.js';
 
 import {Constraints, Size} from './Geometry.js';
@@ -677,7 +678,7 @@ export class WidgetFocusRestorer {
   private previous: HTMLElement|null;
   constructor(widget: Widget) {
     this.widget = widget;
-    this.previous = (widget.element.ownerDocument.deepActiveElement() as HTMLElement | null);
+    this.previous = (Platform.DOMUtilities.deepActiveElement(widget.element.ownerDocument) as HTMLElement | null);
     widget.focus();
   }
 

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -34,6 +34,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 * as Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as UI from '../../legacy.js';
@@ -174,6 +175,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   };
   private closeButton?: UI.Toolbar.ToolbarButton;
   private paletteContainerMutable?: boolean;
+  private eyeDropperExperimentEnabled?: boolean;
   private shadesCloseHandler?: (() => void);
   private dragElement?: HTMLElement;
   private dragHotSpotX?: number;
@@ -441,7 +443,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     data: unknown,
   }): void {
     if (event.data) {
-      this.toggleColorPicker(false);
+      void this.toggleColorPicker(false);
     }
   }
 
@@ -1161,7 +1163,15 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.dragHeight = this.colorElement.offsetHeight;
     this.colorDragElementHeight = this.colorDragElement.offsetHeight / 2;
     this.innerSetColor(undefined, undefined, undefined /* colorName */, undefined, ChangeSource.Model);
-    this.toggleColorPicker(true);
+    this.eyeDropperExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER);
+    // When flag is turned on, eye dropper is not turned on by default.
+    // This is because the global change of the cursor into a dropper will disturb the user.
+    if (!this.eyeDropperExperimentEnabled) {
+      void this.toggleColorPicker(true);
+    } else {
+      this.colorPickerButton.setToggled(false);
+    }
 
     if (this.contrastDetails && this.contrastDetailsBackgroundColorPickedToggledBound) {
       this.contrastDetails.addEventListener(
@@ -1171,7 +1181,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   }
 
   willHide(): void {
-    this.toggleColorPicker(false);
+    void this.toggleColorPicker(false);
     if (this.contrastDetails && this.contrastDetailsBackgroundColorPickedToggledBound) {
       this.contrastDetails.removeEventListener(
           ContrastDetailsEvents.BackgroundColorPickerWillBeToggled,
@@ -1179,7 +1189,9 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     }
   }
 
-  private toggleColorPicker(enabled?: boolean): void {
+  private async toggleColorPicker(enabled?: boolean): Promise<void> {
+    const eyeDropperExperimentEnabled = this.eyeDropperExperimentEnabled;
+
     if (enabled === undefined) {
       enabled = !this.colorPickerButton.toggled();
     }
@@ -1191,13 +1203,33 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       this.contrastDetails.toggleBackgroundColorPicker(false);
     }
 
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.setEyeDropperActive(enabled);
-    if (enabled) {
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-          Host.InspectorFrontendHostAPI.Events.EyeDropperPickedColor, this.colorPickedBound);
-    } else {
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
-          Host.InspectorFrontendHostAPI.Events.EyeDropperPickedColor, this.colorPickedBound);
+    // With the old color picker, colors can only be picked up within the page.
+    if (!eyeDropperExperimentEnabled) {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.setEyeDropperActive(enabled);
+      if (enabled) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
+            Host.InspectorFrontendHostAPI.Events.EyeDropperPickedColor, this.colorPickedBound);
+      } else {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.removeEventListener(
+            Host.InspectorFrontendHostAPI.Events.EyeDropperPickedColor, this.colorPickedBound);
+      }
+    } else if (eyeDropperExperimentEnabled && enabled) {
+      // Use EyeDropper API, can pick up colors outside the browser window,
+      // Note: The current EyeDropper API is not designed to pick up colors continuously.
+      // Wait for TypeScript to support the definition of EyeDropper API:
+      // https://github.com/microsoft/TypeScript/issues/48638
+      /* eslint-disable  @typescript-eslint/no-explicit-any */
+      const eyeDropper = new (<any>window).EyeDropper();
+
+      try {
+        const hexColor = await eyeDropper.open();
+        const color = Common.Color.Color.parse(hexColor.sRGBHex);
+        this.innerSetColor(color?.hsva(), '', undefined /* colorName */, undefined, ChangeSource.Other);
+      } catch (error) {
+        console.error(error);
+      }
+
+      this.colorPickerButton.setToggled(false);
     }
   }