chrome-devtools-frontend 1.0.966086 → 1.0.967610

package/config/gni/devtools_grd_files.gni

@@ -576,6 +576,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSRule.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
+  "front_end/core/sdk/CSSSupports.js",
   "front_end/core/sdk/CategorizedBreakpoint.js",
   "front_end/core/sdk/ChildTargetManager.js",
   "front_end/core/sdk/CompilerSourceMappingContentProvider.js",

package/front_end/core/i18n/locales/en-US.json

@@ -2966,6 +2966,9 @@
   "panels/application/components/InterestGroupAccessGrid.ts | groupOwner": {
     "message": "Owner"
   },
+  "panels/application/components/InterestGroupAccessGrid.ts | noEvents": {
+    "message": "No interest group events recorded."
+  },
   "panels/application/components/OriginTrialTreeView.ts | expiryTime": {
     "message": "Expiry Time"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -2966,6 +2966,9 @@
   "panels/application/components/InterestGroupAccessGrid.ts | groupOwner": {
     "message": "Ôẃn̂ér̂"
   },
+  "panels/application/components/InterestGroupAccessGrid.ts | noEvents": {
+    "message": "N̂ó îńt̂ér̂éŝt́ ĝŕôúp̂ év̂én̂t́ŝ ŕêćôŕd̂éd̂."
+  },
   "panels/application/components/OriginTrialTreeView.ts | expiryTime": {
     "message": "Êx́p̂ír̂ý T̂ím̂é"
   },

package/front_end/core/sdk/CSSQuery.ts

@@ -9,7 +9,7 @@ import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSLocation} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
-type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery;
+type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports;
 
 export abstract class CSSQuery {
   text = '';

package/front_end/core/sdk/CSSRule.ts

@@ -7,6 +7,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 
 import {CSSContainerQuery} from './CSSContainerQuery.js';
 import {CSSMedia} from './CSSMedia.js';
+import {CSSSupports} from './CSSSupports.js';
 
 import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
@@ -99,6 +100,7 @@ export class CSSStyleRule extends CSSRule {
   selectors!: CSSValue[];
   media: CSSMedia[];
   containerQueries: CSSContainerQuery[];
+  supports: CSSSupports[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
     // TODO(crbug.com/1011811): Replace with spread operator or better types once Closure is gone.
@@ -108,6 +110,7 @@ export class CSSStyleRule extends CSSRule {
     this.containerQueries = payload.containerQueries ?
         CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
         [];
+    this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
     this.wasUsed = wasUsed || false;
   }
 
@@ -191,12 +194,9 @@ export class CSSStyleRule extends CSSRule {
         this.selectors[i].rebase(edit);
       }
     }
-    for (const media of this.media) {
-      media.rebase(edit);
-    }
-    for (const containerQuery of this.containerQueries) {
-      containerQuery.rebase(edit);
-    }
+    this.media.forEach(media => media.rebase(edit));
+    this.containerQueries.forEach(cq => cq.rebase(edit));
+    this.supports.forEach(supports => supports.rebase(edit));
 
     super.rebase(edit);
   }

package/front_end/core/sdk/CSSSupports.ts

@@ -0,0 +1,30 @@
+// Copyright 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 TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSSupports extends CSSQuery {
+  static parseSupportsPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports[]): CSSSupports[] {
+    return payload.map(supports => new CSSSupports(cssModel, supports));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSSupports): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

package/front_end/core/sdk/sdk.ts

@@ -34,6 +34,7 @@ import * as CSSQuery from './CSSQuery.js';
 import * as CSSRule from './CSSRule.js';
 import * as CSSStyleDeclaration from './CSSStyleDeclaration.js';
 import * as CSSStyleSheetHeader from './CSSStyleSheetHeader.js';
+import * as CSSSupports from './CSSSupports.js';
 import * as DebuggerModel from './DebuggerModel.js';
 import * as DOMDebuggerModel from './DOMDebuggerModel.js';
 import * as DOMModel from './DOMModel.js';
@@ -101,6 +102,7 @@ export {
   CSSRule,
   CSSStyleDeclaration,
   CSSStyleSheetHeader,
+  CSSSupports,
   DebuggerModel,
   DOMDebuggerModel,
   DOMModel,

package/front_end/devtools_compatibility.js

@@ -28,6 +28,11 @@
        */
       this._addExtensionCallback = null;
 
+      /**
+       * @type {!Array<string>}
+       */
+      this._originsForbiddenForExtensions = [];
+
       /**
        * @type {!Promise<string>}
        */
@@ -95,6 +100,20 @@
       }
     }
 
+    /**
+     * @param {!Array<string>} forbiddenOrigins
+     */
+    setOriginsForbiddenForExtensions(forbiddenOrigins) {
+      this._originsForbiddenForExtensions = forbiddenOrigins;
+    }
+
+    /**
+     * @return {!Array<string>}
+     */
+    getOriginsForbiddenForExtensions() {
+      return this._originsForbiddenForExtensions;
+    }
+
     /**
      * @param {string} url
      */

package/front_end/generated/InspectorBackendCommands.js

@@ -282,6 +282,27 @@ export function registerCommands(inspectorBackend) {
   inspectorBackend.registerEnum(
       'Audits.ClientHintIssueReason',
       {MetaTagAllowListInvalidOrigin: 'MetaTagAllowListInvalidOrigin', MetaTagModifiedHTML: 'MetaTagModifiedHTML'});
+  inspectorBackend.registerEnum('Audits.FederatedAuthRequestIssueReason', {
+    ApprovalDeclined: 'ApprovalDeclined',
+    TooManyRequests: 'TooManyRequests',
+    WellKnownHttpNotFound: 'WellKnownHttpNotFound',
+    WellKnownNoResponse: 'WellKnownNoResponse',
+    WellKnownInvalidResponse: 'WellKnownInvalidResponse',
+    ClientIdMetadataHttpNotFound: 'ClientIdMetadataHttpNotFound',
+    ClientIdMetadataNoResponse: 'ClientIdMetadataNoResponse',
+    ClientIdMetadataInvalidResponse: 'ClientIdMetadataInvalidResponse',
+    ErrorFetchingSignin: 'ErrorFetchingSignin',
+    InvalidSigninResponse: 'InvalidSigninResponse',
+    AccountsHttpNotFound: 'AccountsHttpNotFound',
+    AccountsNoResponse: 'AccountsNoResponse',
+    AccountsInvalidResponse: 'AccountsInvalidResponse',
+    IdTokenHttpNotFound: 'IdTokenHttpNotFound',
+    IdTokenNoResponse: 'IdTokenNoResponse',
+    IdTokenInvalidResponse: 'IdTokenInvalidResponse',
+    IdTokenInvalidRequest: 'IdTokenInvalidRequest',
+    ErrorIdToken: 'ErrorIdToken',
+    Canceled: 'Canceled'
+  });
   inspectorBackend.registerEnum('Audits.InspectorIssueCode', {
     SameSiteCookieIssue: 'SameSiteCookieIssue',
     MixedContentIssue: 'MixedContentIssue',
@@ -297,7 +318,8 @@ export function registerCommands(inspectorBackend) {
     NavigatorUserAgentIssue: 'NavigatorUserAgentIssue',
     GenericIssue: 'GenericIssue',
     DeprecationIssue: 'DeprecationIssue',
-    ClientHintIssue: 'ClientHintIssue'
+    ClientHintIssue: 'ClientHintIssue',
+    FederatedAuthRequestIssue: 'FederatedAuthRequestIssue'
   });
   inspectorBackend.registerEvent('Audits.issueAdded', ['issue']);
   inspectorBackend.registerEnum('Audits.GetEncodedResponseRequestEncoding', {Webp: 'webp', Jpeg: 'jpeg', Png: 'png'});
@@ -1647,7 +1669,8 @@ export function registerCommands(inspectorBackend) {
     SameOrigin: 'SameOrigin',
     SameOriginAllowPopups: 'SameOriginAllowPopups',
     UnsafeNone: 'UnsafeNone',
-    SameOriginPlusCoep: 'SameOriginPlusCoep'
+    SameOriginPlusCoep: 'SameOriginPlusCoep',
+    SameOriginAllowPopupsPlusCoep: 'SameOriginAllowPopupsPlusCoep'
   });
   inspectorBackend.registerEnum(
       'Network.CrossOriginEmbedderPolicyValue',
@@ -2001,10 +2024,12 @@ export function registerCommands(inspectorBackend) {
     ChUaPlatform: 'ch-ua-platform',
     ChUaModel: 'ch-ua-model',
     ChUaMobile: 'ch-ua-mobile',
+    ChUaFull: 'ch-ua-full',
     ChUaFullVersion: 'ch-ua-full-version',
     ChUaFullVersionList: 'ch-ua-full-version-list',
     ChUaPlatformVersion: 'ch-ua-platform-version',
     ChUaReduced: 'ch-ua-reduced',
+    ChUaWow64: 'ch-ua-wow64',
     ChViewportHeight: 'ch-viewport-height',
     ChViewportWidth: 'ch-viewport-width',
     ChWidth: 'ch-width',

package/front_end/generated/protocol.ts

@@ -1052,6 +1052,38 @@ export namespace Audits {
     MetaTagModifiedHTML = 'MetaTagModifiedHTML',
   }
 
+  export interface FederatedAuthRequestIssueDetails {
+    federatedAuthRequestIssueReason: FederatedAuthRequestIssueReason;
+  }
+
+  /**
+   * 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
+   * all cases except for success.
+   */
+  export const enum FederatedAuthRequestIssueReason {
+    ApprovalDeclined = 'ApprovalDeclined',
+    TooManyRequests = 'TooManyRequests',
+    WellKnownHttpNotFound = 'WellKnownHttpNotFound',
+    WellKnownNoResponse = 'WellKnownNoResponse',
+    WellKnownInvalidResponse = 'WellKnownInvalidResponse',
+    ClientIdMetadataHttpNotFound = 'ClientIdMetadataHttpNotFound',
+    ClientIdMetadataNoResponse = 'ClientIdMetadataNoResponse',
+    ClientIdMetadataInvalidResponse = 'ClientIdMetadataInvalidResponse',
+    ErrorFetchingSignin = 'ErrorFetchingSignin',
+    InvalidSigninResponse = 'InvalidSigninResponse',
+    AccountsHttpNotFound = 'AccountsHttpNotFound',
+    AccountsNoResponse = 'AccountsNoResponse',
+    AccountsInvalidResponse = 'AccountsInvalidResponse',
+    IdTokenHttpNotFound = 'IdTokenHttpNotFound',
+    IdTokenNoResponse = 'IdTokenNoResponse',
+    IdTokenInvalidResponse = 'IdTokenInvalidResponse',
+    IdTokenInvalidRequest = 'IdTokenInvalidRequest',
+    ErrorIdToken = 'ErrorIdToken',
+    Canceled = 'Canceled',
+  }
+
   /**
    * This issue tracks client hints related issues. It's used to deprecate old
    * features, encourage the use of new ones, and provide general guidance.
@@ -1082,6 +1114,7 @@ export namespace Audits {
     GenericIssue = 'GenericIssue',
     DeprecationIssue = 'DeprecationIssue',
     ClientHintIssue = 'ClientHintIssue',
+    FederatedAuthRequestIssue = 'FederatedAuthRequestIssue',
   }
 
   /**
@@ -1105,6 +1138,7 @@ export namespace Audits {
     genericIssueDetails?: GenericIssueDetails;
     deprecationIssueDetails?: DeprecationIssueDetails;
     clientHintIssueDetails?: ClientHintIssueDetails;
+    federatedAuthRequestIssueDetails?: FederatedAuthRequestIssueDetails;
   }
 
   /**
@@ -1885,6 +1919,11 @@ export namespace CSS {
      * The array enumerates container queries starting with the innermost one, going outwards.
      */
     containerQueries?: CSSContainerQuery[];
+    /**
+     * @supports CSS at-rule array.
+     * The array enumerates @supports at-rules starting with the innermost one, going outwards.
+     */
+    supports?: CSSSupports[];
   }
 
   /**
@@ -2127,6 +2166,25 @@ export namespace CSS {
     name?: string;
   }
 
+  /**
+   * CSS Supports at-rule descriptor.
+   */
+  export interface CSSSupports {
+    /**
+     * Supports rule text.
+     */
+    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;
+  }
+
   /**
    * Information about amount of glyphs that were rendered with given font.
    */
@@ -7958,6 +8016,7 @@ export namespace Network {
     SameOriginAllowPopups = 'SameOriginAllowPopups',
     UnsafeNone = 'UnsafeNone',
     SameOriginPlusCoep = 'SameOriginPlusCoep',
+    SameOriginAllowPopupsPlusCoep = 'SameOriginAllowPopupsPlusCoep',
   }
 
   export interface CrossOriginOpenerPolicyStatus {
@@ -9984,10 +10043,12 @@ export namespace Page {
     ChUaPlatform = 'ch-ua-platform',
     ChUaModel = 'ch-ua-model',
     ChUaMobile = 'ch-ua-mobile',
+    ChUaFull = 'ch-ua-full',
     ChUaFullVersion = 'ch-ua-full-version',
     ChUaFullVersionList = 'ch-ua-full-version-list',
     ChUaPlatformVersion = 'ch-ua-platform-version',
     ChUaReduced = 'ch-ua-reduced',
+    ChUaWow64 = 'ch-ua-wow64',
     ChViewportHeight = 'ch-viewport-height',
     ChViewportWidth = 'ch-viewport-width',
     ChWidth = 'ch-width',

package/front_end/legacy_test_runner/console_test_runner/console_test_runner.js

@@ -364,6 +364,7 @@ ConsoleTestRunner.dumpConsoleMessagesWithClasses = async function(sortMessages,
     let messageText = ConsoleTestRunner.prepareConsoleMessageText(element);
     if (trimMessages) {
       messageText = messageText.replace(/[ ]+/g, ' ');
+      messageText = messageText.replace(/\s+\n\s+/g, ' ');
     }
     result.push(messageText + ' ' + element.getAttribute('class') + ' > ' + contentElement.getAttribute('class'));
   }

package/front_end/models/extensions/ExtensionServer.ts

@@ -57,7 +57,7 @@ const extensionOrigins: WeakMap<MessagePort, string> = new WeakMap();
 
 declare global {
   interface Window {
-    DevToolsAPI?: {getInspectedTabId?(): string|undefined};
+    DevToolsAPI?: {getInspectedTabId?(): string|undefined, getOriginsForbiddenForExtensions?(): string[]};
   }
 }
 
@@ -1102,6 +1102,12 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         parsedURL.pathname.startsWith('/webstore')) {
       return false;
     }
+
+    if ((window.DevToolsAPI && window.DevToolsAPI.getOriginsForbiddenForExtensions &&
+             window.DevToolsAPI.getOriginsForbiddenForExtensions() ||
+         []).includes(parsedURL.origin)) {
+      return false;
+    }
     return true;
   }
 

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -4144,10 +4144,6 @@ export const NativeFunctions = [
     name: 'isInputPending',
     signatures: [['?options']]
   },
-  {
-    name: 'WindowControlsOverlayGeometryChangeEvent',
-    signatures: [['type','eventInitDict']]
-  },
   {
     name: 'stop',
     signatures: [['?when']],
@@ -5297,6 +5293,10 @@ export const NativeFunctions = [
     name: 'adAuctionComponents',
     signatures: [['numComponents']]
   },
+  {
+    name: 'deprecatedURNToURL',
+    signatures: [['uuid_url']]
+  },
   {
     name: 'createAdRequest',
     signatures: [['config']]
@@ -5876,24 +5876,9 @@ export const NativeFunctions = [
     signatures: [['path','?options','?successCallback','?errorCallback']],
     receiver: 'DirectoryEntry'
   },
-  {
-    name: 'rename',
-    signatures: [['new_entry_name']],
-    receiver: 'FileSystemFileHandle'
-  },
-  {
-    name: 'rename',
-    signatures: [['new_entry_name']],
-    receiver: 'FileSystemHandle'
-  },
-  {
-    name: 'rename',
-    signatures: [['old_name','new_name']],
-    receiver: 'NativeIOFileManager'
-  },
   {
     name: 'move',
-    signatures: [['destination_directory','?new_entry_name']]
+    signatures: [['new_entry_name'],['destination_directory','?new_entry_name']]
   },
   {
     name: 'queryPermission',
@@ -6396,6 +6381,10 @@ export const NativeFunctions = [
     signatures: [['sync']],
     receiver: 'WebGL2RenderingContextBase'
   },
+  {
+    name: 'rename',
+    signatures: [['old_name','new_name']]
+  },
   {
     name: 'renameSync',
     signatures: [['old_name','new_name']]
@@ -6679,6 +6668,10 @@ export const NativeFunctions = [
     name: 'PictureInPictureEvent',
     signatures: [['type','eventInitDict']]
   },
+  {
+    name: 'requestPictureInPictureWindow',
+    signatures: [['options']]
+  },
   {
     name: 'refresh',
     signatures: [['?reload']]
@@ -8401,7 +8394,7 @@ export const NativeFunctions = [
   },
   {
     name: 'dispatch',
-    signatures: [['x','?y','?z']]
+    signatures: [['workgroupCountX','?workgroupCountY','?workgroupCountZ']]
   },
   {
     name: 'dispatchIndirect',
@@ -8683,6 +8676,10 @@ export const NativeFunctions = [
     name: 'USBOutTransferResult',
     signatures: [['status','?bytesWritten']]
   },
+  {
+    name: 'WindowControlsOverlayGeometryChangeEvent',
+    signatures: [['type','eventInitDict']]
+  },
   {
     name: 'getPose',
     signatures: [['relative_to']]

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -32,6 +32,10 @@ const UIStrings = {
    *@description Text in InterestGroupStorage Items View of the Application panel
   */
   groupName: 'Name',
+  /**
+   *@description Text shown instead of a table when the table would be empty.
+  */
+  noEvents: 'No interest group events recorded.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/InterestGroupAccessGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -62,13 +66,17 @@ export class InterestGroupAccessGrid extends HTMLElement {
             {iconName: 'ic_info_black_18dp', color: 'var(--color-link)', width: '14px'} as
             IconButton.Icon.IconWithName}>
         </${IconButton.Icon.Icon.litTagName}>
-        ${this.#renderGrid()}
+        ${this.#renderGridOrNoDataMessage()}
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  #renderGrid(): LitHtml.TemplateResult {
+  #renderGridOrNoDataMessage(): LitHtml.TemplateResult {
+    if (this.#datastores.length === 0) {
+      return LitHtml.html`<div class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
+    }
+
     const gridData: DataGrid.DataGridController.DataGridControllerData = {
       columns: [
         {

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -21,6 +21,6 @@ devtools-data-grid-controller {
   height: 14px;
 }
 
-.no-tt-message {
+.no-events-message {
   margin-top: 20px;
 }

package/front_end/panels/application/interestGroupStorageView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+devtools-interest-group-access-grid {
+  overflow: auto;
+}
+
 .placeholder {
   display: flex;
   align-items: center;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -6,6 +6,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 Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -116,6 +117,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private prompt: CSSPropertyPrompt|null;
   private lastComputedValue: string|null;
   private contextForTest!: Context|undefined;
+  #propertyTextFromSource: string;
 
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
@@ -145,6 +147,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.prompt = null;
 
     this.lastComputedValue = null;
+
+    this.#propertyTextFromSource = property.propertyText || '';
   }
 
   matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles {
@@ -478,7 +482,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.listItemElement.classList.remove('disabled');
     }
 
-    this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(this.property));
+    this.listItemElement.classList.toggle('changed', this.isPropertyChanged(this.property));
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -523,6 +527,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.styleTextAppliedForTest();
   }
 
+  private isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
+      return false;
+    }
+    // Check local cache first, then check against diffs from the workspace.
+    return this.#propertyTextFromSource !== property.propertyText || this.parentPane().isPropertyChanged(property);
+  }
+
   async onpopulate(): Promise<void> {
     // Only populate once and if this property is a shorthand.
     if (this.childCount() || !this.isShorthand) {
@@ -1481,7 +1493,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     if (updatedProperty) {
-      this.listItemElement.classList.toggle('changed', this.parentPane().isPropertyChanged(updatedProperty));
+      this.listItemElement.classList.toggle('changed', this.isPropertyChanged(updatedProperty));
     }
 
     this.matchedStylesInternal.resetActiveProperties();

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1023,9 +1023,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   isPropertyChanged(property: SDK.CSSProperty.CSSProperty): boolean {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)) {
-      return false;
-    }
     const url = property.ownerStyle.parentRule?.resourceURL();
     if (!url) {
       return false;
@@ -1843,6 +1840,12 @@ export class StylePropertiesSection {
     this.updateRuleOrigin();
   }
 
+  protected createAtRuleLists(rule: SDK.CSSRule.CSSStyleRule): void {
+    this.createMediaList(rule.media);
+    this.createContainerQueryList(rule.containerQueries);
+    this.createSupportsList(rule.supports);
+  }
+
   protected createMediaList(mediaRules: SDK.CSSMedia.CSSMedia[]): void {
     for (let i = mediaRules.length - 1; i >= 0; --i) {
       const media = mediaRules[i];
@@ -1910,6 +1913,28 @@ export class StylePropertiesSection {
     }
   }
 
+  protected createSupportsList(supportsList: SDK.CSSSupports.CSSSupports[]): void {
+    for (let i = supportsList.length - 1; i >= 0; --i) {
+      const supports = supportsList[i];
+      if (!supports.text) {
+        continue;
+      }
+
+      let onQueryTextClick;
+      if (supports.styleSheetId) {
+        onQueryTextClick = this.handleQueryRuleClick.bind(this, supports);
+      }
+
+      const supportsElement = new ElementsComponents.CSSQuery.CSSQuery();
+      supportsElement.data = {
+        queryPrefix: '@supports',
+        queryText: supports.text,
+        onQueryTextClick,
+      };
+      this.queryListElement.append(supportsElement);
+    }
+  }
+
   private async addContainerForContainerQuery(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery): Promise<void> {
     const container = await containerQuery.getContainerForNode(this.matchedStyles.node().id);
     if (!container) {
@@ -1940,8 +1965,7 @@ export class StylePropertiesSection {
   private updateQueryList(): void {
     this.queryListElement.removeChildren();
     if (this.styleInternal.parentRule && this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this.createMediaList(this.styleInternal.parentRule.media);
-      this.createContainerQueryList(this.styleInternal.parentRule.containerQueries);
+      this.createAtRuleLists(this.styleInternal.parentRule);
     }
   }
 
@@ -2213,8 +2237,7 @@ export class StylePropertiesSection {
     event.consume(true);
   }
 
-  private handleQueryRuleClick(query: SDK.CSSMedia.CSSMedia|SDK.CSSContainerQuery.CSSContainerQuery, event: Event):
-      void {
+  private handleQueryRuleClick(query: SDK.CSSQuery.CSSQuery, event: Event): void {
     const element = event.currentTarget as Element;
     if (UI.UIUtils.isBeingEdited(element)) {
       return;
@@ -2276,8 +2299,8 @@ export class StylePropertiesSection {
   }
 
   private editingMediaCommitted(
-      query: SDK.CSSMedia.CSSMedia|SDK.CSSContainerQuery.CSSContainerQuery, element: Element, newContent: string,
-      _oldContent: string, _context: Context|undefined, _moveDirection: string): void {
+      query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
+      _context: Context|undefined, _moveDirection: string): void {
     this.parentPane.setEditingStyle(false);
     this.editingMediaFinished(element);
 
@@ -2563,8 +2586,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
         cssModel, this.parentPane.linkifier, styleSheetId, this.actualRuleLocation()));
     if (insertAfterStyle && insertAfterStyle.parentRule &&
         insertAfterStyle.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this.createMediaList(insertAfterStyle.parentRule.media);
-      this.createContainerQueryList(insertAfterStyle.parentRule.containerQueries);
+      this.createAtRuleLists(insertAfterStyle.parentRule);
     }
     this.element.classList.add('blank-section');
   }

package/front_end/third_party/lighthouse/README.chromium

@@ -5,6 +5,3 @@ License: Apache License 2.0
 Security Critical: no
 
 This directory contains Chromium's version of the lighthouse report assets, including renderer.
-
-Local changes applied:
-- Change extension of `report-assets/report-generator.mjs` from `.js` to `.mjs`.

package/front_end/third_party/puppeteer/puppeteer.ts

@@ -4,7 +4,7 @@
 
 import { Browser } from './package/lib/esm/puppeteer/common/Browser.js';
 import { Connection } from './package/lib/esm/puppeteer/common/Connection.js';
-import { ConnectionTransport } from './package/lib/esm/puppeteer/common/ConnectionTransport.js';
+import { type ConnectionTransport } from './package/lib/esm/puppeteer/common/ConnectionTransport.js';
 import { Frame } from './package/lib/esm/puppeteer/common/FrameManager.js';
 import { ElementHandle } from './package/lib/esm/puppeteer/common/JSHandle.js';
 import { Page } from './package/lib/esm/puppeteer/common/Page.js';
@@ -17,4 +17,3 @@ export {
   Frame,
   Page,
 };
-

package/front_end/ui/components/text_editor/config.ts

@@ -188,6 +188,7 @@ function detectLineSeparator(text: string): CM.Extension {
 
 const baseKeymap = CM.keymap.of([
   {key: 'Tab', run: CM.acceptCompletion},
+  {key: 'End', run: CM.acceptCompletion},
   {key: 'Ctrl-m', run: CM.cursorMatchingBracket, shift: CM.selectMatchingBracket},
   {key: 'Mod-/', run: CM.toggleComment},
   {key: 'Mod-d', run: CM.selectNextOccurrence},

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -677,7 +677,7 @@ export class CookiesTable extends UI.Widget.VBox {
       cookie.addAttribute(
           SDK.Cookie.Attributes.SourcePort, Number.parseInt(data[SDK.Cookie.Attributes.SourcePort], 10) || undefined);
     }
-    if (SDK.Cookie.Attributes.PartitionKey in data) {
+    if (data[SDK.Cookie.Attributes.PartitionKey]) {
       cookie.addAttribute(SDK.Cookie.Attributes.PartitionKey, data[SDK.Cookie.Attributes.PartitionKey]);
     }
     cookie.setSize(data[SDK.Cookie.Attributes.Name].length + data[SDK.Cookie.Attributes.Value].length);

package/package.json

@@ -39,6 +39,7 @@
     "debug-unittest": "DEBUG_TEST=1 npm run unittest",
     "e2etest": "third_party/node/node.py --output scripts/test/run_test_suite.js --config=test/e2e/test-runner-config.json",
     "eslint-test": "third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/eslint_rules/tests/*_test.js\"",
+    "build-test": "third_party/node/node.py --output node_modules/mocha/bin/mocha \"./scripts/build/tests/*_test.js\"",
     "generate-dark-mode-styles": "third_party/node/node.py --output scripts/dark_mode/generate_dark_theme_sheet.js",
     "generate-protocol-resources": "scripts/deps/generate_protocol_resources.py && git cl format --js",
     "install-deps": "scripts/deps/manage_node_deps.py",
@@ -53,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.966086"
+  "version": "1.0.967610"
 }

package/scripts/build/devtools_plugin.js

@@ -43,11 +43,12 @@ function devtoolsPlugin(source, importer) {
     return null;
   }
 
-  if (source === '../../lib/codemirror' || source === 'fs') {
+  if (source === '../../lib/codemirror' || !source.startsWith('.')) {
     // These are imported via require(...), but we don't use
     // @rollup/plugin-commonjs. So this check is not necessary for rollup. But
     // need to have this for esbuild as it doesn't ignore require(...).
     return {
+      id: source,
       external: true,
     };
   }

package/scripts/build/esbuild.js

@@ -27,16 +27,17 @@ const plugin = {
         return null;
       }
 
-      if (res.external && res.id) {
-        return {
-          external: res.external,
-          path: './' + path.relative(outdir, res.id),
-        };
-      }
-
       if (res.external) {
+        // res.id can be both of absolutized local JavaScript path or node's
+        // builtin module (e.g. 'fs', 'path'), and only relativize the path in
+        // former case.
+        if (path.isAbsolute(res.id)) {
+          res.id = './' + path.relative(outdir, res.id);
+        }
+
         return {
-          external: true,
+          external: res.external,
+          path: res.id,
         };
       }
 

package/scripts/build/ninja/minify-json-files.js

@@ -0,0 +1,19 @@
+// Copyright 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.
+
+const fs = require('fs');
+const path = require('path');
+const {writeIfChanged} = require('./write-if-changed.js');
+
+const [, , src, dest, files] = process.argv;
+
+for (const file of files.split(',')) {
+  const srcPath = path.join(src, file);
+  const destPath = path.join(dest, file);
+
+  // Minifying JSON is straight-forward as JSON.stringify omits whitespace.
+  const srcContents = fs.readFileSync(srcPath);
+  const destContents = JSON.stringify(JSON.parse(srcContents));
+  writeIfChanged(destPath, destContents);
+}

package/scripts/build/ninja/minify_json.gni

@@ -0,0 +1,28 @@
+# Copyright 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("./node.gni")
+import("./vars.gni")
+
+template("minify_json") {
+  node_action(target_name) {
+    forward_variables_from(invoker, [ "sources" ])
+
+    script = "scripts/build/ninja/minify-json-files.js"
+
+    _src = rebase_path(".", root_build_dir)
+    _dest = rebase_path(target_gen_dir, root_build_dir)
+
+    args = [
+      _src,
+      _dest,
+      string_join(",", sources),
+    ]
+
+    outputs = []
+    foreach(_input, sources) {
+      outputs += [ "$target_gen_dir/$_input" ]
+    }
+  }
+}

package/scripts/build/tests/plugins_test.js

@@ -0,0 +1,30 @@
+// Copyright 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.
+
+const {assert} = require('chai');
+const path = require('path');
+
+const {devtoolsPlugin} = require('../devtools_plugin.js');
+
+describe('devtools_plugin can compute paths with', () => {
+  it('same directory import', () => {
+    assert.deepEqual(
+        devtoolsPlugin('./AnotherFile.js', 'front_end/core/sdk/FirstFile.js'),
+        {id: path.join('front_end', 'core', 'sdk', 'AnotherFile.js'), external: false});
+  });
+
+  it('different directory import', () => {
+    assert.deepEqual(
+        devtoolsPlugin('../common/common.js', 'front_end/core/sdk/FirstFile.js'),
+        {id: path.join('front_end', 'core', 'common', 'common.js'), external: true});
+  });
+
+  it('node built-in modules', () => {
+    assert.deepEqual(devtoolsPlugin('fs', 'scripts/some-script.js'), {id: 'fs', external: true});
+  });
+
+  it('importing generated files', () => {
+    assert.strictEqual(devtoolsPlugin('../../generated/Protocol.js', 'front_end/core/sdk/FirstFile.js'), null);
+  });
+});

package/scripts/javascript_natives/index.js

@@ -10,11 +10,14 @@ import * as WebIDL2 from 'webidl2';
 
 import {parseTSFunction, postProcess, walkRoot} from './helpers.js';
 
-const program = ts.createProgram(
-    [
-      new URL('node_modules/typescript/lib/lib.esnext.d.ts', import.meta.url).pathname,
-    ],
-    {noLib: false, types: []});
+if (process.argv.length !== 4) {
+  throw new Error('Please provide path to chromium/src and devtools-frontend');
+}
+
+const chromiumSource = process.argv[2];
+const typescriptSource = process.argv[3] + 'node_modules/typescript/lib/lib.esnext.d.ts';
+
+const program = ts.createProgram([typescriptSource], {noLib: false, types: []});
 
 for (const file of program.getSourceFiles()) {
   ts.forEachChild(file, node => {
@@ -36,7 +39,7 @@ for (const file of program.getSourceFiles()) {
 // `devtools/devtools-frontend`, where `devtools` is on the same level
 // as `chromium`. This matches `scripts/npm_test.js`.
 const files =
-    glob.sync('../../../../chromium/src/third_party/blink/renderer/+(core|modules)/**/*.idl', {cwd: process.env.PWD});
+    glob.sync(`${chromiumSource}/third_party/blink/renderer/+(core|modules)/**/*.idl`, {cwd: process.env.PWD});
 
 for (const file of files) {
   if (file.includes('testing')) {

package/scripts/javascript_natives/package.json

@@ -7,10 +7,10 @@
   },
   "type": "module",
   "dependencies": {
-    "@types/webidl2": "^23.13.6",
-    "glob": "^7.1.2",
-    "mocha": "^9.1.4",
+    "@types/webidl2": "23.13.6",
+    "glob": "7.1.7",
+    "mocha": "9.1.3",
     "typescript": "latest",
-    "webidl2": "^24.2.0"
+    "webidl2": "24.2.0"
   }
 }