chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/generated/protocol-mapping.d.ts

@@ -81,6 +81,7 @@ export namespace ProtocolMapping {
      * Fired whenever an active document stylesheet is removed.
      */
     'CSS.styleSheetRemoved': [Protocol.CSS.StyleSheetRemovedEvent];
+    'CSS.computedStyleUpdated': [Protocol.CSS.ComputedStyleUpdatedEvent];
     /**
      * This is fired whenever the list of available sinks changes. A sink is a
      * device or a software surface that you can cast to.
@@ -419,7 +420,8 @@ export namespace ProtocolMapping {
      */
     'Page.javascriptDialogOpening': [Protocol.Page.JavascriptDialogOpeningEvent];
     /**
-     * Fired for top level page lifecycle events such as navigation, load, paint, etc.
+     * Fired for lifecycle events (navigation, load, paint, etc) in the current
+     * target (including local frames).
      */
     'Page.lifecycleEvent': [Protocol.Page.LifecycleEventEvent];
     /**
@@ -1303,6 +1305,18 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.CSS.GetLocationForSelectorRequest];
       returnType: Protocol.CSS.GetLocationForSelectorResponse;
     };
+    /**
+     * Starts tracking the given node for the computed style updates
+     * and whenever the computed style is updated for node, it queues
+     * a `computedStyleUpdated` event with throttling.
+     * There can only be 1 node tracked for computed style updates
+     * so passing a new node id removes tracking from the previous node.
+     * Pass `undefined` to disable tracking.
+     */
+    'CSS.trackComputedStyleUpdatesForNode': {
+      paramsType: [Protocol.CSS.TrackComputedStyleUpdatesForNodeRequest?];
+      returnType: void;
+    };
     /**
      * Starts tracking the given computed styles for updates. The specified array of properties
      * replaces the one previously specified. Pass empty array to disable tracking.

package/front_end/generated/protocol-proxy-api.d.ts

@@ -703,6 +703,16 @@ declare namespace ProtocolProxyApi {
      */
     invoke_getLocationForSelector(params: Protocol.CSS.GetLocationForSelectorRequest): Promise<Protocol.CSS.GetLocationForSelectorResponse>;
 
+    /**
+     * Starts tracking the given node for the computed style updates
+     * and whenever the computed style is updated for node, it queues
+     * a `computedStyleUpdated` event with throttling.
+     * There can only be 1 node tracked for computed style updates
+     * so passing a new node id removes tracking from the previous node.
+     * Pass `undefined` to disable tracking.
+     */
+    invoke_trackComputedStyleUpdatesForNode(params: Protocol.CSS.TrackComputedStyleUpdatesForNodeRequest): Promise<Protocol.ProtocolResponseWithError>;
+
     /**
      * Starts tracking the given computed styles for updates. The specified array of properties
      * replaces the one previously specified. Pass empty array to disable tracking.
@@ -820,6 +830,8 @@ declare namespace ProtocolProxyApi {
      */
     styleSheetRemoved(params: Protocol.CSS.StyleSheetRemovedEvent): void;
 
+    computedStyleUpdated(params: Protocol.CSS.ComputedStyleUpdatedEvent): void;
+
   }
 
   export interface CacheStorageApi {
@@ -2957,7 +2969,8 @@ declare namespace ProtocolProxyApi {
     javascriptDialogOpening(params: Protocol.Page.JavascriptDialogOpeningEvent): void;
 
     /**
-     * Fired for top level page lifecycle events such as navigation, load, paint, etc.
+     * Fired for lifecycle events (navigation, load, paint, etc) in the current
+     * target (including local frames).
      */
     lifecycleEvent(params: Protocol.Page.LifecycleEventEvent): void;
 

package/front_end/generated/protocol.ts

@@ -175,6 +175,7 @@ export namespace Accessibility {
    * - from 'activedescendant' to 'owns' - relationships between elements other than parent/child/sibling.
    */
   export const enum AXPropertyName {
+    Actions = 'actions',
     Busy = 'busy',
     Disabled = 'disabled',
     Editable = 'editable',
@@ -757,6 +758,8 @@ export namespace Audits {
     ExcludeDomainNonASCII = 'ExcludeDomainNonASCII',
     ExcludeThirdPartyCookieBlockedInFirstPartySet = 'ExcludeThirdPartyCookieBlockedInFirstPartySet',
     ExcludeThirdPartyPhaseout = 'ExcludeThirdPartyPhaseout',
+    ExcludePortMismatch = 'ExcludePortMismatch',
+    ExcludeSchemeMismatch = 'ExcludeSchemeMismatch',
   }
 
   export const enum CookieWarningReason {
@@ -3309,6 +3312,10 @@ export namespace CSS {
     ranges: SourceRange[];
   }
 
+  export interface TrackComputedStyleUpdatesForNodeRequest {
+    nodeId?: DOM.NodeId;
+  }
+
   export interface TrackComputedStyleUpdatesRequest {
     propertiesToTrack: CSSComputedStyleProperty[];
   }
@@ -3505,6 +3512,13 @@ export namespace CSS {
      */
     styleSheetId: StyleSheetId;
   }
+
+  export interface ComputedStyleUpdatedEvent {
+    /**
+     * The node id that has updated computed styles.
+     */
+    nodeId: DOM.NodeId;
+  }
 }
 
 export namespace CacheStorage {
@@ -3799,6 +3813,7 @@ export namespace DOM {
     Check = 'check',
     Before = 'before',
     After = 'after',
+    SelectArrow = 'select-arrow',
     Marker = 'marker',
     Backdrop = 'backdrop',
     Column = 'column',
@@ -8138,7 +8153,9 @@ export namespace Network {
   export type LoaderId = OpaqueIdentifier<string, 'Protocol.Network.LoaderId'>;
 
   /**
-   * Unique request identifier.
+   * Unique network request identifier.
+   * Note that this does not identify individual HTTP requests that are part of
+   * a network request.
    */
   export type RequestId = OpaqueIdentifier<string, 'Protocol.Network.RequestId'>;
 
@@ -8891,6 +8908,7 @@ export namespace Network {
     type: InitiatorType;
     /**
      * Initiator JavaScript stack trace, set for Script only.
+     * Requires the Debugger domain to be enabled.
      */
     stack?: Runtime.StackTrace;
     /**
@@ -9049,6 +9067,8 @@ export namespace Network {
     SchemefulSameSiteUnspecifiedTreatedAsLax = 'SchemefulSameSiteUnspecifiedTreatedAsLax',
     SamePartyFromCrossPartyContext = 'SamePartyFromCrossPartyContext',
     NameValuePairExceedsMaxSize = 'NameValuePairExceedsMaxSize',
+    PortMismatch = 'PortMismatch',
+    SchemeMismatch = 'SchemeMismatch',
   }
 
   /**
@@ -13587,7 +13607,8 @@ export namespace Page {
   }
 
   /**
-   * Fired for top level page lifecycle events such as navigation, load, paint, etc.
+   * Fired for lifecycle events (navigation, load, paint, etc) in the current
+   * target (including local frames).
    */
   export interface LifecycleEventEvent {
     /**
@@ -14779,6 +14800,7 @@ export namespace Storage {
     ExcessiveReportingOrigins = 'excessiveReportingOrigins',
     NoHistograms = 'noHistograms',
     InsufficientBudget = 'insufficientBudget',
+    InsufficientNamedBudget = 'insufficientNamedBudget',
     NoMatchingSourceFilterData = 'noMatchingSourceFilterData',
     NotRegistered = 'notRegistered',
     ProhibitedByBrowserPolicy = 'prohibitedByBrowserPolicy',
@@ -16159,6 +16181,8 @@ export namespace Fetch {
 
   /**
    * Unique request identifier.
+   * Note that this does not identify individual HTTP requests that are part of
+   * a network request.
    */
   export type RequestId = OpaqueIdentifier<string, 'Protocol.Fetch.RequestId'>;
 

package/front_end/models/extensions/ExtensionAPI.ts

@@ -1146,9 +1146,17 @@ self.injectedExtensionAPI = function(
     },
   };
 
+  const protocolGet = Object.getOwnPropertyDescriptor(URL.prototype, 'protocol')?.get;
+  function getProtocol(url: string): string {
+    if (!protocolGet) {
+      throw new Error('URL.protocol is not available');
+    }
+    return protocolGet.call(new URL(url));
+  }
+
   function canAccessResource(resource: APIImpl.ResourceData): boolean {
     try {
-      return extensionInfo.allowFileAccess || (new URL(resource.url)).protocol !== 'file:';
+      return extensionInfo.allowFileAccess || getProtocol(resource.url) !== 'file:';
     } catch (e) {
       return false;
     }

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -146,10 +146,12 @@ export class Aggregate {
 }
 
 export class AggregateForDiff {
+  name: string;
   indexes: number[];
   ids: number[];
   selfSizes: number[];
   constructor() {
+    this.name = '';
     this.indexes = [];
     this.ids = [];
     this.selfSizes = [];

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -1889,13 +1889,7 @@ export const NativeFunctions = [
   },
   {
     name: "deleteData",
-    signatures: [["offset","count"]],
-    receivers: ["CharacterData"]
-  },
-  {
-    name: "deleteData",
-    signatures: [["key"]],
-    receivers: ["LockScreenData"]
+    signatures: [["offset","count"]]
   },
   {
     name: "insertData",
@@ -2228,23 +2222,11 @@ export const NativeFunctions = [
   },
   {
     name: "getData",
-    signatures: [["format"]],
-    receivers: ["DataTransfer"]
-  },
-  {
-    name: "getData",
-    signatures: [["key"]],
-    receivers: ["LockScreenData"]
-  },
-  {
-    name: "setData",
-    signatures: [["format","data"]],
-    receivers: ["DataTransfer"]
+    signatures: [["format"]]
   },
   {
     name: "setData",
-    signatures: [["key","data"]],
-    receivers: ["LockScreenData"]
+    signatures: [["format","data"]]
   },
   {
     name: "setDragImage",
@@ -6920,6 +6902,11 @@ export const NativeFunctions = [
     name: "CloseWatcher",
     signatures: [["?options"]]
   },
+  {
+    name: "requestClose",
+    signatures: [["?returnValue"]],
+    receivers: ["HTMLDialogElement"]
+  },
   {
     name: "reportEvent",
     signatures: [["event"]]

package/front_end/models/live-metrics/web-vitals-injected/{rollup.config.js → rollup.config.mjs}

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const {terser} = require('../../../../node_modules/rollup-plugin-terser/rollup-plugin-terser.js');
+import terser from '@rollup/plugin-terser';
 
 /**
  * Checks if an env variable is true.

package/front_end/models/persistence/EditFileSystemView.ts

@@ -38,14 +38,18 @@ import {Events, IsolatedFileSystemManager} from './IsolatedFileSystemManager.js'
 import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const UIStrings = {
+  /**
+   *@description Text in Edit File System View of the Workspace settings in Settings to indicate that the following string is a folder URL
+   */
+  url: 'URL',
   /**
    *@description Text in Edit File System View of the Workspace settings in Settings
    */
-  excludedFolders: 'Excluded folders',
+  excludedFolders: 'Excluded sub-folders',
   /**
    *@description Text to add something
    */
-  add: 'Add',
+  add: 'Add folder',
   /**
    * @description Placeholder text for an area of the UI that shows which folders have been excluded
    * from being show in DevTools. When the user has not yet chosen any folders to exclude, this text
@@ -91,13 +95,13 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
       IsolatedFileSystemManager.instance().addEventListener(Events.ExcludedFolderRemoved, this.update, this),
     ];
 
-    const excludedFoldersHeader = this.contentElement.createChild('div', 'file-system-header');
-    excludedFoldersHeader.createChild('div', 'file-system-header-text').textContent =
-        i18nString(UIStrings.excludedFolders);
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.add), this.addExcludedFolderButtonClicked.bind(this),
-        {className: 'add-button', jslogContext: 'settings.add-excluded-folder'});
-    excludedFoldersHeader.appendChild(addButton);
+    const excludedFoldersHeader = this.contentElement.createChild('div', 'excluded-folder-header');
+    excludedFoldersHeader.createChild('span').textContent = i18nString(UIStrings.url);
+    excludedFoldersHeader.createChild('span', 'excluded-folder-url').textContent = fileSystemPath;
+
+    const excludeSubFoldersText = this.contentElement.createChild('span', 'exclude-subfolders-text');
+    excludeSubFoldersText.textContent = i18nString(UIStrings.excludedFolders);
+
     this.excludedFoldersList = new UI.ListWidget.ListWidget(this);
     this.excludedFoldersList.element.classList.add('file-system-list');
 
@@ -107,6 +111,12 @@ export class EditFileSystemView extends UI.Widget.VBox implements UI.ListWidget.
     this.excludedFoldersList.setEmptyPlaceholder(excludedFoldersPlaceholder);
     this.excludedFoldersList.show(this.contentElement);
 
+    const addButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.add), this.addExcludedFolderButtonClicked.bind(this),
+        {className: 'add-button', jslogContext: 'settings.add-excluded-folder'});
+
+    this.contentElement.appendChild(addButton);
+
     this.update();
   }
 

package/front_end/models/persistence/WorkspaceSettingsTab.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -27,11 +28,11 @@ const UIStrings = {
   /**
    *@description Text of the add button in Workspace Settings Tab of the Workspace settings in Settings
    */
-  addFolder: 'Add folder…',
+  addFolder: 'Add folder',
   /**
    *@description Label element text content in Workspace Settings Tab of the Workspace settings in Settings
    */
-  folderExcludePattern: 'Folder exclude pattern',
+  folderExcludePattern: 'Exclude from workspace',
   /**
    *@description Label for an item to remove something
    */
@@ -42,7 +43,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WorkspaceSettingsTab extends UI.Widget.VBox {
   containerElement: HTMLElement;
-  private readonly fileSystemsListContainer: HTMLElement;
+  #addButtonContainer: HTMLElement;
   private readonly elementByPath: Map<Platform.DevToolsPath.UrlString, Element>;
   private readonly mappingViewByPath: Map<Platform.DevToolsPath.UrlString, EditFileSystemView>;
 
@@ -51,12 +52,9 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('workspace')}`);
 
-    this.element.classList.add('workspace-settings-tab');
-    const header = this.element.createChild('header');
-    UI.UIUtils.createTextChild(header.createChild('h1'), i18nString(UIStrings.workspace));
-
-    this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
-                                .createChild('div', 'settings-tab settings-content settings-container');
+    this.containerElement =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    this.containerElement.classList.add('settings-card-container');
 
     IsolatedFileSystemManager.instance().addEventListener(
         Events.FileSystemAdded, event => this.fileSystemAdded(event.data), this);
@@ -65,27 +63,31 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
 
     const folderExcludePatternInput = this.createFolderExcludePatternInput();
     folderExcludePatternInput.classList.add('folder-exclude-pattern');
-    this.containerElement.appendChild(folderExcludePatternInput);
-
-    const div = this.containerElement.createChild('div', 'settings-info-message');
-    UI.UIUtils.createTextChild(div, i18nString(UIStrings.mappingsAreInferredAutomatically));
+    const mappingsAreInferredInfo = document.createElement('div');
+    mappingsAreInferredInfo.classList.add('mappings-info');
+    UI.UIUtils.createTextChild(mappingsAreInferredInfo, i18nString(UIStrings.mappingsAreInferredAutomatically));
 
-    this.fileSystemsListContainer = this.containerElement.createChild('div', '');
-
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addFolder), this.addFileSystemClicked.bind(this),
-        {jslogContext: 'sources.add-folder-to-workspace'});
-    this.containerElement.appendChild(addButton);
-    this.setDefaultFocusedElement(addButton);
+    const card = new Cards.Card.Card();
+    this.containerElement.appendChild(card);
+    card.data = {
+      heading: i18nString(UIStrings.workspace),
+      content: [folderExcludePatternInput, mappingsAreInferredInfo],
+    };
 
     this.elementByPath = new Map();
-
     this.mappingViewByPath = new Map();
 
     const fileSystems = IsolatedFileSystemManager.instance().fileSystems();
     for (let i = 0; i < fileSystems.length; ++i) {
       this.addItem(fileSystems[i]);
     }
+
+    this.#addButtonContainer = this.containerElement.createChild('div', 'add-button-container');
+    const addButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.addFolder), this.addFileSystemClicked.bind(this),
+        {jslogContext: 'sources.add-folder-to-workspace'});
+    addButton.classList.add('add-folder');
+    this.#addButtonContainer.appendChild(addButton);
   }
 
   override wasShown(): void {
@@ -93,19 +95,20 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
     this.registerCSSFiles([workspaceSettingsTabStyles]);
   }
 
-  private createFolderExcludePatternInput(): Element {
-    const p = document.createElement('p');
-    const labelElement = p.createChild('label');
+  private createFolderExcludePatternInput(): HTMLElement {
+    const excludePatternElement = document.createElement('div');
+    excludePatternElement.classList.add('folder-exclude-pattern');
+    const labelElement = excludePatternElement.createChild('label');
     labelElement.textContent = i18nString(UIStrings.folderExcludePattern);
     const folderExcludeSetting = IsolatedFileSystemManager.instance().workspaceFolderExcludePatternSetting();
     const inputElement = UI.UIUtils.createInput('', 'text', folderExcludeSetting.name);
     UI.ARIAUtils.bindLabelToControl(labelElement, inputElement);
-    p.appendChild(inputElement);
+    excludePatternElement.appendChild(inputElement);
     const setValue =
         UI.UIUtils.bindInput(inputElement, folderExcludeSetting.set.bind(folderExcludeSetting), regexValidator, false);
     folderExcludeSetting.addChangeListener(() => setValue.call(null, folderExcludeSetting.get()));
     setValue(folderExcludeSetting.get());
-    return p;
+    return excludePatternElement;
 
     function regexValidator(value: string): {valid: boolean, errorMessage: (string|undefined)} {
       let regex;
@@ -129,41 +132,34 @@ export class WorkspaceSettingsTab extends UI.Widget.VBox {
             fileSystem) {
       return;
     }
-    const element = this.renderFileSystem(fileSystem);
-    this.elementByPath.set(fileSystem.path(), element);
-
-    this.fileSystemsListContainer.appendChild(element);
-
+    const filename = this.getFilename(fileSystem);
+    const removeButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.remove), this.removeFileSystemClicked.bind(this, fileSystem),
+        {jslogContext: 'settings.remove-file-system'});
+
+    const mappingViewContainer = document.createElement('div');
+    mappingViewContainer.classList.add('mapping-view-container');
+    const fileSystemExcludeCard = new Cards.Card.Card();
+    this.containerElement.insertBefore(fileSystemExcludeCard, this.#addButtonContainer);
+    fileSystemExcludeCard.data = {
+      heading: filename,
+      headingIconName: 'folder',
+      headingSuffix: removeButton,
+      content: [mappingViewContainer],
+    };
     const mappingView = new EditFileSystemView(fileSystem.path());
     this.mappingViewByPath.set(fileSystem.path(), mappingView);
     mappingView.element.classList.add('file-system-mapping-view');
-    mappingView.show(element);
+
+    mappingView.show(mappingViewContainer);
+
+    this.elementByPath.set(fileSystem.path(), fileSystemExcludeCard);
   }
 
-  private renderFileSystem(fileSystem: PlatformFileSystem): Element {
+  private getFilename(fileSystem: PlatformFileSystem): string {
     const fileSystemPath = fileSystem.path();
     const lastIndexOfSlash = fileSystemPath.lastIndexOf('/');
-    const folderName = fileSystemPath.substr(lastIndexOfSlash + 1);
-
-    const element = document.createElement('div');
-    element.classList.add('file-system-container');
-    const header = element.createChild('div', 'file-system-header');
-
-    const nameElement = header.createChild('div', 'file-system-name');
-    nameElement.textContent = folderName;
-    UI.ARIAUtils.markAsHeading(nameElement, 2);
-    const path = header.createChild('div', 'file-system-path');
-    path.textContent = fileSystemPath;
-    UI.Tooltip.Tooltip.install(path, fileSystemPath);
-
-    const toolbar = new UI.Toolbar.Toolbar('');
-    const button =
-        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.remove), 'cross', undefined, 'settings.remove-file-system');
-    button.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.removeFileSystemClicked.bind(this, fileSystem));
-    toolbar.appendToolbarItem(button);
-    header.appendChild(toolbar.element);
-
-    return element;
+    return fileSystemPath.substr(lastIndexOfSlash + 1);
   }
 
   private removeFileSystemClicked(fileSystem: PlatformFileSystem): void {

package/front_end/models/persistence/editFileSystemView.css

@@ -4,20 +4,33 @@
  * found in the LICENSE file.
  */
 
-.file-system-header {
+.excluded-folder-header {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex: auto;
-  margin: 10px 0;
+  flex-direction: column;
+  height: var(--sys-size-16);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-5) var(--sys-size-6);
+
+  & > .excluded-folder-url {
+    color: var(--sys-color-on-surface-subtle);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
-.file-system-header-text {
-  flex: 1 0 auto;
+.exclude-subfolders-text,
+.file-system-list-empty {
+  padding: 0 var(--sys-size-6);
+  height: var(--sys-size-13);
+}
+
+.exclude-subfolders-text {
+  align-items: center;
+  display: flex;
 }
 
 .add-button {
-  margin-left: 10px;
+  padding: var(--sys-size-4) var(--sys-size-6);
   align-self: flex-start;
 }
 
@@ -26,17 +39,12 @@
 }
 
 .file-system-list-empty {
-  flex: auto;
-  height: 30px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  text-align: center;
 }
 
 .file-system-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   flex: auto 1 1;
@@ -46,6 +54,18 @@
   flex: 1 1 0;
 }
 
+.list {
+  border: none;
+}
+
+.list-item {
+  padding: 0 var(--sys-size-6);
+}
+
+.editor-buttons {
+  padding: var(--sys-size-4) var(--sys-size-6);
+}
+
 .list-item .file-system-value {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -57,7 +77,7 @@
   flex: none;
   display: flex;
   flex-direction: row;
-  margin: 6px 5px;
+  margin: var(--sys-size-4) var(--sys-size-6);
   align-items: center;
 }