chrome-devtools-frontend 1.0.974080 → 1.0.975442

package/front_end/generated/InspectorBackendCommands.js

@@ -113,11 +113,7 @@ export function registerCommands(inspectorBackend) {
       ['nodes']);
   inspectorBackend.registerCommand(
       'Accessibility.getFullAXTree',
-      [
-        {'name': 'depth', 'type': 'number', 'optional': true},
-        {'name': 'max_depth', 'type': 'number', 'optional': true},
-        {'name': 'frameId', 'type': 'string', 'optional': true}
-      ],
+      [{'name': 'depth', 'type': 'number', 'optional': true}, {'name': 'frameId', 'type': 'string', 'optional': true}],
       ['nodes']);
   inspectorBackend.registerCommand(
       'Accessibility.getRootAXNode', [{'name': 'frameId', 'type': 'string', 'optional': true}], ['node']);
@@ -211,6 +207,7 @@ export function registerCommands(inspectorBackend) {
     MixedContentWarning: 'MixedContentWarning'
   });
   inspectorBackend.registerEnum('Audits.MixedContentResourceType', {
+    AttributionSrc: 'AttributionSrc',
     Audio: 'Audio',
     Beacon: 'Beacon',
     CSPReport: 'CSPReport',
@@ -520,6 +517,8 @@ export function registerCommands(inspectorBackend) {
       'CSS.getPlatformFontsForNode', [{'name': 'nodeId', 'type': 'number', 'optional': false}], ['fonts']);
   inspectorBackend.registerCommand(
       'CSS.getStyleSheetText', [{'name': 'styleSheetId', 'type': 'string', 'optional': false}], ['text']);
+  inspectorBackend.registerCommand(
+      'CSS.getLayersForNode', [{'name': 'nodeId', 'type': 'number', 'optional': false}], ['rootLayer']);
   inspectorBackend.registerCommand(
       'CSS.trackComputedStyleUpdates', [{'name': 'propertiesToTrack', 'type': 'object', 'optional': false}], []);
   inspectorBackend.registerCommand('CSS.takeComputedStyleUpdates', [], ['nodeIds']);
@@ -656,10 +655,11 @@ export function registerCommands(inspectorBackend) {
     ScrollbarCorner: 'scrollbar-corner',
     Resizer: 'resizer',
     InputListButton: 'input-list-button',
-    Transition: 'transition',
-    TransitionContainer: 'transition-container',
-    TransitionOldContent: 'transition-old-content',
-    TransitionNewContent: 'transition-new-content'
+    PageTransition: 'page-transition',
+    PageTransitionContainer: 'page-transition-container',
+    PageTransitionImageWrapper: 'page-transition-image-wrapper',
+    PageTransitionOutgoingImage: 'page-transition-outgoing-image',
+    PageTransitionIncomingImage: 'page-transition-incoming-image'
   });
   inspectorBackend.registerEnum('DOM.ShadowRootType', {UserAgent: 'user-agent', Open: 'open', Closed: 'closed'});
   inspectorBackend.registerEnum(
@@ -1153,6 +1153,8 @@ export function registerCommands(inspectorBackend) {
         {'name': 'userAgentMetadata', 'type': 'object', 'optional': true}
       ],
       []);
+  inspectorBackend.registerCommand(
+      'Emulation.setAutomationOverride', [{'name': 'enabled', 'type': 'boolean', 'optional': false}], []);
 
   // HeadlessExperimental.
   inspectorBackend.registerEnum('HeadlessExperimental.ScreenshotParamsFormat', {Jpeg: 'jpeg', Png: 'png'});

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

@@ -976,6 +976,14 @@ export namespace ProtocolMapping {
      */
     'CSS.getStyleSheetText':
         {paramsType: [Protocol.CSS.GetStyleSheetTextRequest]; returnType: Protocol.CSS.GetStyleSheetTextResponse;};
+    /**
+     * Returns all layers parsed by the rendering engine for the tree scope of a node.
+     * Given a DOM element identified by nodeId, getLayersForNode returns the root
+     * layer for the nearest ancestor document or shadow root. The layer root contains
+     * the full layer tree for the tree scope and their ordering.
+     */
+    'CSS.getLayersForNode':
+        {paramsType: [Protocol.CSS.GetLayersForNodeRequest]; returnType: Protocol.CSS.GetLayersForNodeResponse;};
     /**
      * Starts tracking the given computed styles for updates. The specified array of properties
      * replaces the one previously specified. Pass empty array to disable tracking.
@@ -1593,6 +1601,11 @@ export namespace ProtocolMapping {
      * Allows overriding user agent with the given string.
      */
     'Emulation.setUserAgentOverride': {paramsType: [Protocol.Emulation.SetUserAgentOverrideRequest]; returnType: void;};
+    /**
+     * Allows overriding the automation flag.
+     */
+    'Emulation.setAutomationOverride':
+        {paramsType: [Protocol.Emulation.SetAutomationOverrideRequest]; returnType: void;};
     /**
      * Sends a BeginFrame to the target and returns when the frame was completed. Optionally captures a
      * screenshot from the resulting frame. Requires that the target was created with enabled

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

@@ -592,6 +592,15 @@ declare namespace ProtocolProxyApi {
     invoke_getStyleSheetText(params: Protocol.CSS.GetStyleSheetTextRequest):
         Promise<Protocol.CSS.GetStyleSheetTextResponse>;
 
+    /**
+     * Returns all layers parsed by the rendering engine for the tree scope of a node.
+     * Given a DOM element identified by nodeId, getLayersForNode returns the root
+     * layer for the nearest ancestor document or shadow root. The layer root contains
+     * the full layer tree for the tree scope and their ordering.
+     */
+    invoke_getLayersForNode(params: Protocol.CSS.GetLayersForNodeRequest):
+        Promise<Protocol.CSS.GetLayersForNodeResponse>;
+
     /**
      * Starts tracking the given computed styles for updates. The specified array of properties
      * replaces the one previously specified. Pass empty array to disable tracking.
@@ -1468,6 +1477,12 @@ declare namespace ProtocolProxyApi {
      */
     invoke_setUserAgentOverride(params: Protocol.Emulation.SetUserAgentOverrideRequest):
         Promise<Protocol.ProtocolResponseWithError>;
+
+    /**
+     * Allows overriding the automation flag.
+     */
+    invoke_setAutomationOverride(params: Protocol.Emulation.SetAutomationOverrideRequest):
+        Promise<Protocol.ProtocolResponseWithError>;
   }
   export interface EmulationDispatcher {
     /**

package/front_end/generated/protocol.ts

@@ -307,10 +307,6 @@ export namespace Accessibility {
      * If omitted, the full tree is returned.
      */
     depth?: integer;
-    /**
-     * Deprecated. This parameter has been renamed to `depth`. If depth is not provided, max_depth will be used.
-     */
-    max_depth?: integer;
     /**
      * The frame for whose document the AX tree should be retrieved.
      * If omited, the root frame is used.
@@ -758,6 +754,7 @@ export namespace Audits {
   }
 
   export const enum MixedContentResourceType {
+    AttributionSrc = 'AttributionSrc',
     Audio = 'Audio',
     Beacon = 'Beacon',
     CSPReport = 'CSPReport',
@@ -1059,7 +1056,7 @@ export namespace Audits {
   /**
    * Represents the failure reason when a federated authentication reason fails.
    * Should be updated alongside RequestIdTokenStatus in
-   * third_party/blink/public/mojom/webid/federated_auth_request.mojom to include
+   * third_party/blink/public/mojom/devtools/inspector_issue.mojom to include
    * all cases except for success.
    */
   export const enum FederatedAuthRequestIssueReason {
@@ -1924,6 +1921,11 @@ export namespace CSS {
      * The array enumerates @supports at-rules starting with the innermost one, going outwards.
      */
     supports?: CSSSupports[];
+    /**
+     * Cascade layer array. Contains the layer hierarchy that this rule belongs to starting
+     * with the innermost layer and going outwards.
+     */
+    layers?: CSSLayer[];
   }
 
   /**
@@ -2185,6 +2187,44 @@ export namespace CSS {
     styleSheetId?: StyleSheetId;
   }
 
+  /**
+   * CSS Layer at-rule descriptor.
+   */
+  export interface CSSLayer {
+    /**
+     * Layer name.
+     */
+    text: string;
+    /**
+     * The associated rule header range in the enclosing stylesheet (if
+     * available).
+     */
+    range?: SourceRange;
+    /**
+     * Identifier of the stylesheet containing this object (if exists).
+     */
+    styleSheetId?: StyleSheetId;
+  }
+
+  /**
+   * CSS Layer data.
+   */
+  export interface CSSLayerData {
+    /**
+     * Layer name.
+     */
+    name: string;
+    /**
+     * Direct sub-layers
+     */
+    subLayers?: CSSLayerData[];
+    /**
+     * Layer order. The order determines the order of the layer in the cascade order.
+     * A higher number has higher priority in the cascade order.
+     */
+    order: number;
+  }
+
   /**
    * Information about amount of glyphs that were rendered with given font.
    */
@@ -2495,6 +2535,14 @@ export namespace CSS {
     text: string;
   }
 
+  export interface GetLayersForNodeRequest {
+    nodeId: DOM.NodeId;
+  }
+
+  export interface GetLayersForNodeResponse extends ProtocolResponseWithError {
+    rootLayer: CSSLayerData;
+  }
+
   export interface TrackComputedStyleUpdatesRequest {
     propertiesToTrack: CSSComputedStyleProperty[];
   }
@@ -2951,10 +2999,11 @@ export namespace DOM {
     ScrollbarCorner = 'scrollbar-corner',
     Resizer = 'resizer',
     InputListButton = 'input-list-button',
-    Transition = 'transition',
-    TransitionContainer = 'transition-container',
-    TransitionOldContent = 'transition-old-content',
-    TransitionNewContent = 'transition-new-content',
+    PageTransition = 'page-transition',
+    PageTransitionContainer = 'page-transition-container',
+    PageTransitionImageWrapper = 'page-transition-image-wrapper',
+    PageTransitionOutgoingImage = 'page-transition-outgoing-image',
+    PageTransitionIncomingImage = 'page-transition-incoming-image',
   }
 
   /**
@@ -5351,6 +5400,13 @@ export namespace Emulation {
      */
     userAgentMetadata?: UserAgentMetadata;
   }
+
+  export interface SetAutomationOverrideRequest {
+    /**
+     * Whether the override should be enabled.
+     */
+    enabled: boolean;
+  }
 }
 
 /**
@@ -10813,6 +10869,12 @@ export namespace Page {
      * Not restored reason
      */
     reason: BackForwardCacheNotRestoredReason;
+    /**
+     * Context associated with the reason. The meaning of this context is
+     * dependent on the reason:
+     * - EmbedderExtensionSentMessageToCachedFrame: the extension ID.
+     */
+    context?: string;
   }
 
   export interface BackForwardCacheNotRestoredExplanationTree {

package/front_end/models/issues_manager/IssuesManager.ts

@@ -117,6 +117,12 @@ const issueCodeHandlers = new Map<
  */
 function createIssuesFromProtocolIssue(
     issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue): Issue[] {
+  if (inspectorIssue.code.toString() === 'CookieIssue') {
+    // TODO: backward compatibility for the next chromium roll
+    const details = inspectorIssue.details as {cookieIssueDetails: Protocol.Audits.SameSiteCookieIssueDetails};
+    inspectorIssue.code = Protocol.Audits.InspectorIssueCode.SameSiteCookieIssue;
+    inspectorIssue.details.sameSiteCookieIssueDetails = details.cookieIssueDetails;
+  }
   const handler = issueCodeHandlers.get(inspectorIssue.code);
   if (handler) {
     return handler(issuesModel, inspectorIssue);

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -2634,7 +2634,7 @@ export const NativeFunctions = [
   },
   {
     name: 'transitionWhile',
-    signatures: [['newNavigationAction']]
+    signatures: [['newNavigationAction','?options']]
   },
   {
     name: 'updateCurrent',
@@ -2783,6 +2783,10 @@ export const NativeFunctions = [
     name: 'CSSKeywordValue',
     signatures: [['keyword']]
   },
+  {
+    name: 'CSSMathClamp',
+    signatures: [['lower','value','upper']]
+  },
   {
     name: 'CSSMathInvert',
     signatures: [['arg']]
@@ -2907,6 +2911,14 @@ export const NativeFunctions = [
     name: 'vh',
     signatures: [['value']]
   },
+  {
+    name: 'vi',
+    signatures: [['value']]
+  },
+  {
+    name: 'vb',
+    signatures: [['value']]
+  },
   {
     name: 'vmin',
     signatures: [['value']]
@@ -2915,6 +2927,78 @@ export const NativeFunctions = [
     name: 'vmax',
     signatures: [['value']]
   },
+  {
+    name: 'svw',
+    signatures: [['value']]
+  },
+  {
+    name: 'svh',
+    signatures: [['value']]
+  },
+  {
+    name: 'svi',
+    signatures: [['value']]
+  },
+  {
+    name: 'svb',
+    signatures: [['value']]
+  },
+  {
+    name: 'svmin',
+    signatures: [['value']]
+  },
+  {
+    name: 'svmax',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvw',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvh',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvi',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvb',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvmin',
+    signatures: [['value']]
+  },
+  {
+    name: 'lvmax',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvw',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvh',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvi',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvb',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvmin',
+    signatures: [['value']]
+  },
+  {
+    name: 'dvmax',
+    signatures: [['value']]
+  },
   {
     name: 'qw',
     signatures: [['value']]
@@ -3625,14 +3709,6 @@ export const NativeFunctions = [
     name: 'dispatchEvent',
     signatures: [['event']]
   },
-  {
-    name: 'Event',
-    signatures: [['type','?eventInitDict']]
-  },
-  {
-    name: 'initEvent',
-    signatures: [['type','?bubbles','?cancelable']]
-  },
   {
     name: 'MutationObserver',
     signatures: [['callback']]
@@ -4513,7 +4589,8 @@ export const NativeFunctions = [
   },
   {
     name: 'end',
-    signatures: [['index']]
+    signatures: [['index']],
+    receiver: 'TimeRanges'
   },
   {
     name: 'getTrackById',
@@ -6659,11 +6736,6 @@ export const NativeFunctions = [
     name: 'requestAll',
     signatures: [['permissions']]
   },
-  {
-    name: 'requestPictureInPicture',
-    signatures: [['?options']],
-    receiver: 'HTMLElement'
-  },
   {
     name: 'PictureInPictureEvent',
     signatures: [['type','eventInitDict']]
@@ -8544,10 +8616,6 @@ export const NativeFunctions = [
     name: 'requestAdapter',
     signatures: [['?options']]
   },
-  {
-    name: 'provide',
-    signatures: [['?id_token']]
-  },
   {
     name: 'MIDIConnectionEvent',
     signatures: [['type','?eventInitDict']]

package/front_end/panels/console/ConsolePrompt.ts

@@ -41,6 +41,10 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   private previewRequestForTest: Promise<void>|null;
   private highlightingNode: boolean;
+  // The CodeMirror state field that controls whether the argument hints are showing.
+  // If they are, the escape key will clear them. However, if they aren't, then the
+  // console drawer should be hidden as a whole.
+  #argumentHintsState: CodeMirror.StateField<CodeMirror.Tooltip|null>;
 
   constructor() {
     super();
@@ -70,13 +74,15 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.element.tabIndex = 0;
     this.previewRequestForTest = null;
     this.highlightingNode = false;
+    const argumentHints = TextEditor.JavaScript.argumentHints();
+    this.#argumentHintsState = argumentHints[0];
 
     const editorState = CodeMirror.EditorState.create({
       doc: this.initialText,
       extensions: [
         CodeMirror.keymap.of(this.editorKeymap()),
         CodeMirror.EditorView.updateListener.of(update => this.editorUpdate(update)),
-        TextEditor.JavaScript.argumentHints(),
+        argumentHints,
         TextEditor.JavaScript.completion(),
         TextEditor.Config.showCompletionHint,
         CodeMirror.javascript.javascript(),
@@ -212,8 +218,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       {
         key: 'Escape',
         run: (): boolean => {
-          TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor);
-          return true;
+          return TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor, this.#argumentHintsState);
         },
       },
       {
@@ -266,7 +271,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private async handleEnter(): Promise<void> {
     if (await this.enterWillEvaluate()) {
       this.appendCommand(this.text(), true);
-      TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor);
+      TextEditor.JavaScript.closeArgumentsHintsTooltip(this.editor.editor, this.#argumentHintsState);
       this.editor.dispatch({
         changes: {from: 0, to: this.editor.state.doc.length},
         scrollIntoView: true,

package/front_end/panels/elements/LayersWidget.ts

@@ -0,0 +1,167 @@
+// Copyright (c) 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
+
+import {ElementsPanel} from './ElementsPanel.js';
+import layersWidgetStyles from './layersWidget.css.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+
+const UIStrings = {
+  /**
+  * @description Title of a section in the Element State Pane Widget of the Elements panel.
+  * The widget shows the layers present in the context of the currently selected node.
+  * */
+  cssLayersTitle: 'CSS layers',
+  /**
+  * @description Tooltip text in Element State Pane Widget of the Elements panel.
+  * For a button that opens a tool that shows the layers present in the current document.
+  */
+  toggleCSSLayers: 'Toggle CSS Layers view',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/LayersWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+let layersWidgetInstance: LayersWidget;
+
+export class LayersWidget extends UI.Widget.Widget {
+  private cssModel?: SDK.CSSModel.CSSModel|null;
+  private layerTreeComponent = new TreeOutline.TreeOutline.TreeOutline<string>();
+
+  constructor() {
+    super(true);
+
+    this.contentElement.className = 'styles-layers-pane';
+    UI.UIUtils.createTextChild(this.contentElement.createChild('div'), i18nString(UIStrings.cssLayersTitle));
+
+    this.contentElement.appendChild(this.layerTreeComponent);
+
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
+  }
+
+  private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
+    if (this.cssModel === cssModel) {
+      return;
+    }
+    if (this.cssModel) {
+      this.cssModel.removeEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.update, this);
+    }
+    this.cssModel = cssModel;
+    if (this.cssModel) {
+      this.cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetChanged, this.update, this);
+    }
+  }
+
+  async wasShown(): Promise<void> {
+    super.wasShown();
+    this.registerCSSFiles([layersWidgetStyles]);
+    return this.update();
+  }
+
+  private async update(): Promise<void> {
+    if (!this.isShowing()) {
+      return;
+    }
+
+    let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    if (node) {
+      node = node.enclosingElementOrSelf();
+    }
+    if (!node) {
+      // do something meaningful?
+      return;
+    }
+
+    this.updateModel(node.domModel().cssModel());
+    if (!this.cssModel) {
+      return;
+    }
+    const makeTreeNode = (parentId: string) =>
+        (layer: Protocol.CSS.CSSLayerData): TreeOutline.TreeOutlineUtils.TreeNode<string> => {
+          const subLayers = layer.subLayers;
+          const treeNodeData = layer.order + ': ' + layer.name;
+          const id = parentId ? parentId + '.' + layer.name : layer.name;
+          if (!subLayers) {
+            return {treeNodeData, id};
+          }
+          return {
+            treeNodeData,
+            id,
+            children: (): Promise<TreeOutline.TreeOutlineUtils.TreeNode<string>[]> =>
+                Promise.resolve(subLayers.sort((layer1, layer2) => layer1.order - layer2.order).map(makeTreeNode(id))),
+          };
+        };
+    const rootLayer = await this.cssModel.rootLayerPromise(node.id);
+    this.layerTreeComponent.data = {
+      defaultRenderer: TreeOutline.TreeOutline.defaultRenderer,
+      tree: [makeTreeNode('')(rootLayer)],
+    };
+
+    // We only expand the first 5 user-defined layers to not make the
+    // view too overwhelming.
+    await this.layerTreeComponent.expandRecursively(5);
+  }
+
+  async revealLayer(layerName: string): Promise<void> {
+    if (!this.isShowing()) {
+      ElementsPanel.instance().showToolbarPane(this, ButtonProvider.instance().item());
+    }
+    await this.update();
+    return this.layerTreeComponent.expandToAndSelectTreeNodeId('implicit outer layer.' + layerName);
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  }|undefined = {forceNew: null}): LayersWidget {
+    const {forceNew} = opts;
+    if (!layersWidgetInstance || forceNew) {
+      layersWidgetInstance = new LayersWidget();
+    }
+
+    return layersWidgetInstance;
+  }
+}
+
+let buttonProviderInstance: ButtonProvider;
+
+export class ButtonProvider implements UI.Toolbar.Provider {
+  private readonly button: UI.Toolbar.ToolbarToggle;
+  private constructor() {
+    const layersIcon = new IconButton.Icon.Icon();
+    layersIcon.data = {
+      iconName: 'ic_layers_16x16',
+      color: 'var(--color-text-secondary)',
+      width: '13px',
+      height: '13px',
+    };
+    this.button = new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.toggleCSSLayers), layersIcon);
+    this.button.setVisible(false);
+    this.button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.clicked, this);
+    this.button.element.classList.add('monospace');
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): ButtonProvider {
+    const {forceNew} = opts;
+    if (!buttonProviderInstance || forceNew) {
+      buttonProviderInstance = new ButtonProvider();
+    }
+
+    return buttonProviderInstance;
+  }
+
+  private clicked(): void {
+    const view = LayersWidget.instance();
+    ElementsPanel.instance().showToolbarPane(!view.isShowing() ? view : null, this.button);
+  }
+
+  item(): UI.Toolbar.ToolbarToggle {
+    return this.button;
+  }
+}