chrome-devtools-frontend 1.0.967596 → 1.0.968818

package/config/gni/devtools_grd_files.gni

@@ -304,6 +304,25 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/cspURLViolation.md",
   "front_end/models/issues_manager/descriptions/deprecation.md",
   "front_end/models/issues_manager/descriptions/deprecationNavigatorUserAgent.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestAccountsHttpNotFound.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestAccountsInvalidResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestAccountsNoResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestApprovalDeclined.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestCanceled.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestClientIdMetadataHttpNotFound.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestClientIdMetadataInvalidResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestClientIdMetadataNoResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestErrorFetchingSignin.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestErrorIdToken.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenHttpNotFound.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidRequest.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenNoResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestInvalidSigninResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestTooManyRequests.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestWellKnownHttpNotFound.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestWellKnownInvalidResponse.md",
+  "front_end/models/issues_manager/descriptions/federatedAuthRequestWellKnownNoResponse.md",
   "front_end/models/issues_manager/descriptions/genericCrossOriginPortalPostMessageError.md",
   "front_end/models/issues_manager/descriptions/heavyAd.md",
   "front_end/models/issues_manager/descriptions/mixedContent.md",
@@ -703,6 +722,7 @@ grd_files_debug_sources = [
   "front_end/models/issues_manager/CorsIssue.js",
   "front_end/models/issues_manager/CrossOriginEmbedderPolicyIssue.js",
   "front_end/models/issues_manager/DeprecationIssue.js",
+  "front_end/models/issues_manager/FederatedAuthRequestIssue.js",
   "front_end/models/issues_manager/GenericIssue.js",
   "front_end/models/issues_manager/HeavyAdIssue.js",
   "front_end/models/issues_manager/Issue.js",

package/front_end/core/host/UserMetrics.ts

@@ -585,7 +585,8 @@ export enum DevtoolsExperiments {
   'preciseChanges' = 53,
   'bfcacheDisplayTree' = 54,
   'stylesPaneCSSChanges' = 55,
-  'MaxValue' = 56,
+  'headerOverrides' = 56,
+  'MaxValue' = 57,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

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

@@ -1337,6 +1337,9 @@
   "models/issues_manager/CrossOriginEmbedderPolicyIssue.ts | samesiteAndSameorigin": {
     "message": "Same-Site and Same-Origin"
   },
+  "models/issues_manager/FederatedAuthRequestIssue.ts | fedCm": {
+    "message": "Federated Credential Management API"
+  },
   "models/issues_manager/GenericIssue.ts | crossOriginPortalPostMessage": {
     "message": "Portals - Same-origin communication channels"
   },
@@ -3200,6 +3203,9 @@
   "panels/application/InterestGroupStorageView.ts | clickToDisplayBody": {
     "message": "Click on any interest group event to display the group's current state"
   },
+  "panels/application/InterestGroupStorageView.ts | noDataAvailable": {
+    "message": "No details available for the selected interest group. The browser may have left the group."
+  },
   "panels/application/InterestGroupTreeElement.ts | interestGroups": {
     "message": "Interest Groups"
   },

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

@@ -1337,6 +1337,9 @@
   "models/issues_manager/CrossOriginEmbedderPolicyIssue.ts | samesiteAndSameorigin": {
     "message": "Ŝám̂é-Ŝít̂é âńd̂ Śâḿê-Ór̂íĝín̂"
   },
+  "models/issues_manager/FederatedAuthRequestIssue.ts | fedCm": {
+    "message": "F̂éd̂ér̂át̂éd̂ Ćr̂éd̂én̂t́îál̂ Ḿâńâǵêḿêńt̂ ÁP̂Í"
+  },
   "models/issues_manager/GenericIssue.ts | crossOriginPortalPostMessage": {
     "message": "P̂ór̂t́âĺŝ - Śâḿê-ór̂íĝín̂ ćôḿm̂ún̂íĉát̂íôń ĉh́âńn̂él̂ś"
   },
@@ -3200,6 +3203,9 @@
   "panels/application/InterestGroupStorageView.ts | clickToDisplayBody": {
     "message": "Ĉĺîćk̂ ón̂ án̂ý îńt̂ér̂éŝt́ ĝŕôúp̂ év̂én̂t́ t̂ó d̂íŝṕl̂áŷ t́ĥé ĝŕôúp̂'ś ĉúr̂ŕêńt̂ śt̂át̂é"
   },
+  "panels/application/InterestGroupStorageView.ts | noDataAvailable": {
+    "message": "N̂ó d̂ét̂áîĺŝ áv̂áîĺâb́l̂é f̂ór̂ t́ĥé ŝél̂éĉt́êd́ îńt̂ér̂éŝt́ ĝŕôúp̂. T́ĥé b̂ŕôẃŝér̂ ḿâý ĥáv̂é l̂éf̂t́ t̂h́ê ǵr̂óûṕ."
+  },
   "panels/application/InterestGroupTreeElement.ts | interestGroups": {
     "message": "Îńt̂ér̂éŝt́ Ĝŕôúp̂ś"
   },

package/front_end/core/root/Runtime.ts

@@ -274,6 +274,7 @@ export enum ExperimentName {
   FULL_ACCESSIBILITY_TREE = 'fullAccessibilityTree',
   PRECISE_CHANGES = 'preciseChanges',
   STYLES_PANE_CSS_CHANGES = 'stylesPaneCSSChanges',
+  HEADER_OVERRIDES = 'headerOverrides',
 }
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -273,7 +273,7 @@ export class CSSMatchedStyles {
   async recomputeMatchingSelectors(rule: CSSStyleRule): Promise<void> {
     const node = this.nodeForStyle(rule.style);
     if (!node) {
-      return Promise.resolve();
+      return;
     }
     const promises = [];
     for (const selector of rule.selectors) {

package/front_end/devtools_compatibility.js

@@ -1481,42 +1481,6 @@
       installObjectObserve();
     }
 
-    if (majorVersion <= 45) {
-      /**
-       * @param {string} property
-       * @return {!CSSValue|null}
-       * @this {CSSStyleDeclaration}
-       */
-      function getValue(property) {
-        // Note that |property| comes from another context, so we can't use === here.
-        // eslint-disable-next-line eqeqeq
-        if (property == 'padding-left') {
-          return /** @type {!CSSValue} */ ({
-            /**
-             * @return {number}
-             * @this {!{__paddingLeft: number}}
-             */
-            getFloatValue: function() {
-              return this.__paddingLeft;
-            },
-            __paddingLeft: parseFloat(this.paddingLeft)
-          });
-        }
-        throw new Error('getPropertyCSSValue is undefined');
-      }
-
-      window.CSSStyleDeclaration.prototype.getPropertyCSSValue = getValue;
-
-      function CSSPrimitiveValue() {
-      }
-      CSSPrimitiveValue.CSS_PX = 5;
-      window.CSSPrimitiveValue = CSSPrimitiveValue;
-    }
-
-    if (majorVersion <= 45) {
-      styleRules.push('* { min-width: 0; min-height: 0; }');
-    }
-
     if (majorVersion <= 71) {
       styleRules.push(
           '.coverage-toolbar-container, .animation-timeline-toolbar-container, .computed-properties { flex-basis: auto; }');

package/front_end/entrypoints/main/MainImpl.ts

@@ -372,6 +372,10 @@ export class MainImpl {
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES, 'Sync CSS changes in the Styles pane');
 
+    // Local overrides for response headers
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.HEADER_OVERRIDES, 'Local overrides for response headers');
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
       'hideIssuesFeature',

package/front_end/models/issues_manager/FederatedAuthRequestIssue.ts

@@ -0,0 +1,265 @@
+// 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 i18n from '../../core/i18n/i18n.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription, LazyMarkdownIssueDescription} from './MarkdownIssueDescription.js';
+import {resolveLazyDescription} from './MarkdownIssueDescription.js';
+
+const UIStrings = {
+  /**
+  *@description Title for Client Hint specification url link
+  */
+  fedCm: 'Federated Credential Management API',
+};
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/FederatedAuthRequestIssue.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export class FederatedAuthRequestIssue extends Issue {
+  readonly #issueDetails: Protocol.Audits.FederatedAuthRequestIssueDetails;
+
+  constructor(
+      issueDetails: Protocol.Audits.FederatedAuthRequestIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+    super(
+        {
+          code: Protocol.Audits.InspectorIssueCode.FederatedAuthRequestIssue,
+          umaCode: [
+            Protocol.Audits.InspectorIssueCode.FederatedAuthRequestIssue,
+            issueDetails.federatedAuthRequestIssueReason,
+          ].join('::'),
+        },
+        issuesModel);
+    this.#issueDetails = issueDetails;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.Other;
+  }
+
+  details(): Protocol.Audits.FederatedAuthRequestIssueDetails {
+    return this.#issueDetails;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    const description = issueDescriptions.get(this.#issueDetails.federatedAuthRequestIssueReason);
+    if (!description) {
+      return null;
+    }
+    return resolveLazyDescription(description);
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.#issueDetails);
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.PageError;
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
+      FederatedAuthRequestIssue[] {
+    const details = inspectorIssue.details.federatedAuthRequestIssueDetails;
+    if (!details) {
+      console.warn('Federated auth request issue without details received.');
+      return [];
+    }
+    return [new FederatedAuthRequestIssue(details, issuesModel)];
+  }
+}
+
+const issueDescriptions: Map<Protocol.Audits.FederatedAuthRequestIssueReason, LazyMarkdownIssueDescription> = new Map([
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.ApprovalDeclined,
+    {
+      file: 'federatedAuthRequestApprovalDeclined.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.TooManyRequests,
+    {
+      file: 'federatedAuthRequestTooManyRequests.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.WellKnownHttpNotFound,
+    {
+      file: 'federatedAuthRequestWellKnownHttpNotFound.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.WellKnownNoResponse,
+    {
+      file: 'federatedAuthRequestWellKnownNoResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.WellKnownInvalidResponse,
+    {
+      file: 'federatedAuthRequestWellKnownInvalidResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.ClientIdMetadataHttpNotFound,
+    {
+      file: 'federatedAuthRequestClientIdMetadataHttpNotFound.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.ClientIdMetadataNoResponse,
+    {
+      file: 'federatedAuthRequestClientIdMetadataNoResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.ClientIdMetadataInvalidResponse,
+    {
+      file: 'federatedAuthRequestClientIdMetadataInvalidResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.ErrorFetchingSignin,
+    {
+      file: 'federatedAuthRequestErrorFetchingSignin.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.InvalidSigninResponse,
+    {
+      file: 'federatedAuthRequestInvalidSigninResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.AccountsHttpNotFound,
+    {
+      file: 'federatedAuthRequestAccountsHttpNotFound.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.AccountsNoResponse,
+    {
+      file: 'federatedAuthRequestAccountsNoResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.AccountsInvalidResponse,
+    {
+      file: 'federatedAuthRequestAccountsInvalidResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.IdTokenHttpNotFound,
+    {
+      file: 'federatedAuthRequestIdTokenHttpNotFound.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.IdTokenNoResponse,
+    {
+      file: 'federatedAuthRequestIdTokenNoResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.IdTokenInvalidResponse,
+    {
+      file: 'federatedAuthRequestIdTokenInvalidResponse.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.IdTokenInvalidRequest,
+    {
+      file: 'federatedAuthRequestIdTokenInvalidRequest.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.ErrorIdToken,
+    {
+      file: 'federatedAuthRequestErrorIdToken.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+  [
+    Protocol.Audits.FederatedAuthRequestIssueReason.Canceled,
+    {
+      file: 'federatedAuthRequestCanceled.md',
+      links: [{
+        link: 'https://fedidcg.github.io/FedCM/',
+        linkTitle: i18nLazyString(UIStrings.fedCm),
+      }],
+    },
+  ],
+]);

package/front_end/models/issues_manager/IssuesManager.ts

@@ -13,6 +13,7 @@ import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CorsIssue} from './CorsIssue.js';
 import {CrossOriginEmbedderPolicyIssue, isCrossOriginEmbedderPolicyIssue} from './CrossOriginEmbedderPolicyIssue.js';
 import {DeprecationIssue} from './DeprecationIssue.js';
+import {FederatedAuthRequestIssue} from './FederatedAuthRequestIssue.js';
 import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
@@ -104,6 +105,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.ClientHintIssue,
     ClientHintIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.FederatedAuthRequestIssue,
+    FederatedAuthRequestIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**

package/front_end/models/issues_manager/descriptions/federatedAuthRequestAccountsHttpNotFound.md

@@ -0,0 +1 @@
+# The provider's accounts list endpoint cannot be found.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestAccountsInvalidResponse.md

@@ -0,0 +1 @@
+# Provider's accounts list is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestAccountsNoResponse.md

@@ -0,0 +1 @@
+# The response body is empty when fetching the provider's accounts list.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestApprovalDeclined.md

@@ -0,0 +1 @@
+# User declined the sign-in attempt.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestCanceled.md

@@ -0,0 +1 @@
+# The request has been aborted.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestClientIdMetadataHttpNotFound.md

@@ -0,0 +1 @@
+# The provider's client metadata endpoint cannot be found.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestClientIdMetadataInvalidResponse.md

@@ -0,0 +1 @@
+# Provider's client metadata is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestClientIdMetadataNoResponse.md

@@ -0,0 +1 @@
+# The response body is empty when fetching the provider's client metadata.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestErrorFetchingSignin.md

@@ -0,0 +1 @@
+# Error attempting to reach the provider's sign-in endpoint.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestErrorIdToken.md

@@ -0,0 +1 @@
+# Error retrieving an id token.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenHttpNotFound.md

@@ -0,0 +1 @@
+# The provider's id token endpoint cannot be found.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidRequest.md

@@ -0,0 +1 @@
+# The id token fetching request is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenInvalidResponse.md

@@ -0,0 +1 @@
+# Provider's id token is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestIdTokenNoResponse.md

@@ -0,0 +1 @@
+# The response body is empty when fetching the provider's id token.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestInvalidSigninResponse.md

@@ -0,0 +1 @@
+# Provider's sign-in response is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestTooManyRequests.md

@@ -0,0 +1 @@
+# Only one navigator.credentials.get request may be outstanding at one time.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestWellKnownHttpNotFound.md

@@ -0,0 +1 @@
+# The provider's .well-known configuration cannot be found.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestWellKnownInvalidResponse.md

@@ -0,0 +1 @@
+# Provider's .well-known configuration is invalid.

package/front_end/models/issues_manager/descriptions/federatedAuthRequestWellKnownNoResponse.md

@@ -0,0 +1 @@
+# The response body is empty when fetching the provider's .well-known configuration.

package/front_end/panels/application/InterestGroupStorageView.ts

@@ -18,8 +18,10 @@ const UIStrings = {
   */
   clickToDisplayBody: 'Click on any interest group event to display the group\'s current state',
   /**
-  interestGroupStorageItems: 'InterestGroup Storage Items',
+  *@description Placeholder text telling the user no details are available for
+  *the selected interest group.
   */
+  noDataAvailable: 'No details available for the selected interest group. The browser may have left the group.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupStorageView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,24 +39,33 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
   private readonly interestGroupGrid = new ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid();
   private events: Protocol.Storage.InterestGroupAccessedEvent[] = [];
   private detailsGetter: InterestGroupDetailsGetter;
+  private noDataView: UI.Widget.VBox;
+  private noDisplayView: UI.Widget.VBox;
 
   constructor(detailsGetter: InterestGroupDetailsGetter) {
     super(/* isVertical */ false, /* secondIsSidebar: */ true);
     this.detailsGetter = detailsGetter;
 
     const topPanel = new UI.Widget.VBox();
-    const bottomPanel = new UI.Widget.VBox();
+    this.noDisplayView = new UI.Widget.VBox();
+    this.noDataView = new UI.Widget.VBox();
+
     topPanel.setMinimumSize(0, 80);
     this.setMainWidget(topPanel);
-    bottomPanel.setMinimumSize(0, 40);
-    this.setSidebarWidget(bottomPanel);
+    this.noDisplayView.setMinimumSize(0, 40);
+    this.setSidebarWidget(this.noDisplayView);
+    this.noDataView.setMinimumSize(0, 40);
 
     topPanel.contentElement.appendChild(this.interestGroupGrid);
     this.interestGroupGrid.addEventListener('cellfocused', this.onFocus.bind(this));
 
-    bottomPanel.contentElement.classList.add('placeholder');
-    const centered = bottomPanel.contentElement.createChild('div');
-    centered.textContent = i18nString(UIStrings.clickToDisplayBody);
+    this.noDisplayView.contentElement.classList.add('placeholder');
+    const noDisplayDiv = this.noDisplayView.contentElement.createChild('div');
+    noDisplayDiv.textContent = i18nString(UIStrings.clickToDisplayBody);
+
+    this.noDataView.contentElement.classList.add('placeholder');
+    const noDataDiv = this.noDataView.contentElement.createChild('div');
+    noDataDiv.textContent = i18nString(UIStrings.noDataAvailable);
   }
 
   wasShown(): void {
@@ -77,6 +88,7 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
   clearEvents(): void {
     this.events = [];
     this.interestGroupGrid.data = this.events;
+    this.setSidebarWidget(this.noDisplayView);
   }
 
   private async onFocus(event: Event): Promise<void> {
@@ -99,6 +111,8 @@ export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
       if (jsonView) {
         this.setSidebarWidget(jsonView);
       }
+    } else {
+      this.setSidebarWidget(this.noDataView);
     }
   }
 

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1470,10 +1470,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         continue;
       }
       const formattedLine = document.createElement('span');
-      const prefix = line.substring(0, link.positionLeft);
-      const suffix = `${line.substring(link.positionRight)}${newline}`;
-
-      formattedLine.appendChild(this.linkifyStringAsFragment(prefix));
+      const suffix = `${link.suffix}${newline}`;
+      formattedLine.appendChild(this.linkifyStringAsFragment(link.prefix));
       const scriptLocationLink = this.linkifier.linkifyScriptLocation(
           debuggerModel.target(), link.scriptId || null, link.url, link.lineNumber, {
             columnNumber: link.columnNumber,
@@ -1492,7 +1490,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         continue;
       }
 
-      const prefixWithoutFunction = prefix.substring(0, prefix.lastIndexOf(' ', prefix.length - 3));
+      const prefixWithoutFunction = link.prefix.substring(0, link.prefix.lastIndexOf(' ', link.prefix.length - 3));
 
       // If we were able to parse the function name from the stack trace line, try to replace it with an expansion of
       // any inline frames.

package/front_end/panels/console/ErrorStackParser.ts

@@ -10,8 +10,10 @@ export interface ParsedErrorFrame {
   line: string;
   link?: {
     url: string,
+    prefix: string,
+    suffix: string,
     lineNumber?: number,
-    columnNumber?: number, enclosedInBraces: boolean, positionLeft: number, positionRight: number,
+    columnNumber?: number, enclosedInBraces: boolean,
     scriptId?: Protocol.Runtime.ScriptId,
   };
 }
@@ -88,9 +90,9 @@ export function parseSourcePositionsFromErrorStack(
       line,
       link: {
         url,
+        prefix: line.substring(0, left),
+        suffix: line.substring(right),
         enclosedInBraces: hasOpenBracket,
-        positionLeft: left,
-        positionRight: right,
         lineNumber: splitResult.lineNumber,
         columnNumber: splitResult.columnNumber,
       },

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -140,9 +140,12 @@ export class LighthouseReportRenderer extends LighthouseReport.ReportRenderer {
   }
 
   static handleDarkMode(el: Element): void {
-    if (ThemeSupport.ThemeSupport.instance().themeName() === 'dark') {
-      el.classList.add('lh-dark');
-    }
+    const updateDarkModeIfNecessary = (): void => {
+      el.classList.toggle('lh-dark', ThemeSupport.ThemeSupport.instance().themeName() === 'dark');
+    };
+    ThemeSupport.ThemeSupport.instance().addEventListener(
+        ThemeSupport.ThemeChangeEvent.eventName, updateDarkModeIfNecessary);
+    updateDarkModeIfNecessary();
   }
 }
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -607,7 +607,7 @@ export class DebuggerPlugin extends Plugin {
         return null;
       }
       while (
-          node && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
+          node && node.name !== 'this' && node.name !== 'VariableDefinition' && node.name !== 'VariableName' &&
           node.name !== 'MemberExpression' &&
           !(node.name === 'PropertyName' && node.parent?.name === 'PatternProperty' &&
             node.nextSibling?.name !== ':') &&

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -90,6 +90,8 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private infoElement: HTMLDivElement;
+  #scopesScript: SDK.Script.Script|null = null;
+
   private constructor() {
     super(true);
 
@@ -126,6 +128,34 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     }
   }
 
+  private sourceMapAttached(
+      event: Common.EventTarget.EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>):
+      void {
+    if (event.data.client === this.#scopesScript) {
+      void this.update();
+    }
+  }
+
+  private setScopeSourceMapSubscription(callFrame: SDK.DebuggerModel.CallFrame|null): void {
+    const oldScript = this.#scopesScript;
+    this.#scopesScript = callFrame?.script ?? null;
+
+    // Shortcut for the case when we are listening to the same model.
+    if (oldScript?.debuggerModel === this.#scopesScript?.debuggerModel) {
+      return;
+    }
+
+    if (oldScript) {
+      oldScript.debuggerModel.sourceMapManager().removeEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.sourceMapAttached, this);
+    }
+
+    if (this.#scopesScript) {
+      this.#scopesScript.debuggerModel.sourceMapManager().addEventListener(
+          SDK.SourceMapManager.Events.SourceMapAttached, this.sourceMapAttached, this);
+    }
+  }
+
   private async update(): Promise<void> {
     // The `resolveThisObject(callFrame)` and `resolveScopeChain(callFrame)` calls
     // below may take a while to complete, so indicate to the user that something
@@ -137,6 +167,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.linkifier.reset();
 
     const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
+    this.setScopeSourceMapSubscription(callFrame);
     const [thisObject, scopeChain] = await Promise.all([resolveThisObject(callFrame), resolveScopeChain(callFrame)]);
     // By now the developer might have moved on, and we don't want to show stale
     // scope information, so check again that we're still on the same CallFrame.

package/front_end/panels/sources/SourceMapNamesResolver.ts

@@ -10,9 +10,14 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as Protocol from '../../generated/protocol.js';
 
-const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, Promise<Map<string, string>>>();
+interface CachedScopeMap {
+  sourceMap: SDK.SourceMap.SourceMap|null;
+  identifiersPromise: Promise<Map<string, string>>;
+}
 
+const scopeToCachedIdentifiersMap = new WeakMap<SDK.DebuggerModel.ScopeChainEntry, CachedScopeMap>();
 const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Map<string, string>>();
+
 export class Identifier {
   name: string;
   lineNumber: number;
@@ -79,17 +84,17 @@ export const resolveScopeChain =
 };
 
 export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Promise<Map<string, string>> => {
-  let identifiersPromise = scopeToCachedIdentifiersMap.get(scope);
-  if (!identifiersPromise) {
+  let cachedScopeMap = scopeToCachedIdentifiersMap.get(scope);
+  const script = scope.callFrame().script;
+  const sourceMap = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
+
+  if (!cachedScopeMap || cachedScopeMap.sourceMap !== sourceMap) {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    identifiersPromise = (async(): Promise<Map<any, any>> => {
+    const identifiersPromise = (async(): Promise<Map<any, any>> => {
       const namesMapping = new Map<string, string>();
-      const script = scope.callFrame().script;
-      const sourceMap =
-          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
       if (sourceMap) {
         const textCache = new Map<string, TextUtils.Text.Text>();
         // Extract as much as possible from SourceMap and resolve
@@ -111,9 +116,10 @@ export const resolveScope = async(scope: SDK.DebuggerModel.ScopeChainEntry): Pro
       }
       return namesMapping;
     })();
-    scopeToCachedIdentifiersMap.set(scope, identifiersPromise);
+    cachedScopeMap = {sourceMap, identifiersPromise};
+    scopeToCachedIdentifiersMap.set(scope, {sourceMap, identifiersPromise});
   }
-  return await identifiersPromise;
+  return await cachedScopeMap.identifiersPromise;
 
   async function resolveSourceName(
       script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, id: Identifier,

package/front_end/ui/components/settings/settingCheckbox.css

@@ -12,6 +12,8 @@
 input {
   height: 12px;
   width: 12px;
+  min-height: 12px;
+  min-width: 12px;
 }
 
 label {

package/front_end/ui/legacy/components/object_ui/ObjectPopoverHelper.ts

@@ -59,7 +59,7 @@ export class ObjectPopoverHelper {
       Promise<ObjectPopoverHelper|null> {
     const description = Platform.StringUtilities.trimEndWithMaxLength(result.description || '', MaxPopoverTextLength);
     let popoverContentElement: HTMLSpanElement|HTMLDivElement|null = null;
-    if (result.type === 'object') {
+    if (result.type === 'function' || result.type === 'object') {
       let linkifier: Components.Linkifier.Linkifier|null = null;
       let resultHighlightedAsDOM = false;
       if (result.subtype === 'node') {
@@ -74,9 +74,15 @@ export class ObjectPopoverHelper {
       } else {
         popoverContentElement = document.createElement('div');
         popoverContentElement.classList.add('object-popover-content');
-        popover.registerCSSFiles([objectPopoverStyles]);
-        const titleElement = popoverContentElement.createChild('div', 'monospace object-popover-title');
-        titleElement.createChild('span').textContent = description;
+        popover.registerCSSFiles([objectValueStyles, objectPopoverStyles]);
+        const titleElement = popoverContentElement.createChild('div', 'object-popover-title');
+        if (result.type === 'function') {
+          titleElement.classList.add('source-code');
+          titleElement.appendChild(ObjectPropertiesSection.valueElementForFunctionDescription(result.description));
+        } else {
+          titleElement.classList.add('monospace');
+          titleElement.createChild('span').textContent = description;
+        }
         linkifier = new Components.Linkifier.Linkifier();
         const section = new ObjectPropertiesSection(result, '', linkifier, true /* showOverflow */);
         section.element.classList.add('object-popover-tree');
@@ -98,39 +104,12 @@ export class ObjectPopoverHelper {
 
     if (result.type === 'string') {
       UI.UIUtils.createTextChildren(valueElement, `"${description}"`);
-    } else if (result.type !== 'function') {
+    } else {
       valueElement.textContent = description;
     }
 
-    if (result.type !== 'function') {
-      popover.contentElement.appendChild(popoverContentElement);
-      return new ObjectPopoverHelper(null, false);
-    }
-
-    void ObjectPropertiesSection.formatObjectAsFunction(result, valueElement, true);
-    const response = await result.debuggerModel().functionDetailsPromise(result);
-    if (!response) {
-      return null;
-    }
-
-    const container = document.createElement('div');
-    container.classList.add('object-popover-container');
-    const title = container.createChild('div', 'function-popover-title source-code');
-    const functionName = title.createChild('span', 'function-name');
-    functionName.textContent = UI.UIUtils.beautifyFunctionName(response.functionName);
-
-    const rawLocation = response.location;
-    const linkContainer = title.createChild('div', 'function-title-link-container');
-    const script = rawLocation && rawLocation.script();
-    const sourceURL = script && script.sourceURL;
-    let linkifier: Components.Linkifier.Linkifier|null = null;
-    if (sourceURL) {
-      linkifier = new Components.Linkifier.Linkifier(undefined, undefined, popover.positionContent.bind(popover));
-      linkContainer.appendChild(linkifier.linkifyRawLocation((rawLocation as SDK.DebuggerModel.Location), sourceURL));
-    }
-    container.appendChild(popoverContentElement);
-    popover.contentElement.appendChild(container);
-    return new ObjectPopoverHelper(linkifier, false);
+    popover.contentElement.appendChild(popoverContentElement);
+    return new ObjectPopoverHelper(null, false);
   }
 }
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -260,7 +260,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     return UI.Fragment.html`<span class="name">${name}</span>`;
   }
 
-  static valueElementForFunctionDescription(description?: string|null, includePreview?: boolean, defaultName?: string):
+  static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string):
       Element {
     const valueElement = document.createElement('span');
     valueElement.classList.add('object-value-function');

package/front_end/ui/legacy/components/object_ui/objectPopover.css

@@ -30,28 +30,3 @@
 .object-popover-container {
   display: inline-block;
 }
-
-.function-popover-title {
-  border-bottom: 1px solid var(--color-details-hairline);
-  margin-bottom: 3px;
-  padding-bottom: 2px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.function-popover-title .function-name {
-  font-weight: bold;
-}
-
-.function-title-link-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  margin-left: 10px;
-}
-
-.function-title-link-container .devtools-link {
-  white-space: nowrap;
-  overflow: hidden;
-}

package/package.json

@@ -54,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.967596"
+  "version": "1.0.968818"
 }

package/scripts/build/devtools_plugin.js

@@ -111,4 +111,35 @@ function devtoolsPlugin(source, importer) {
   };
 }
 
-module.exports = {devtoolsPlugin};
+function esbuildPlugin(outdir) {
+  return args => {
+    // args.importer is absolute path in esbuild.
+    const res = devtoolsPlugin(args.path, args.importer);
+    if (!res) {
+      return null;
+    }
+
+    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: res.external,
+        path: res.id,
+      };
+    }
+
+    return {
+      path: res.id,
+    };
+  };
+}
+
+module.exports = {
+  devtoolsPlugin,
+  esbuildPlugin
+};

package/scripts/build/esbuild.js

@@ -21,30 +21,7 @@ const plugin = {
   name: 'devtools-plugin',
   setup(build) {
     // https://esbuild.github.io/plugins/#on-resolve
-    build.onResolve({filter: /.*/}, args => {
-      const res = devtools_plugin.devtoolsPlugin(args.path, args.importer);
-      if (!res) {
-        return null;
-      }
-
-      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: res.external,
-          path: res.id,
-        };
-      }
-
-      return {
-        path: res.id,
-      };
-    });
+    build.onResolve({filter: /.*/}, devtools_plugin.esbuildPlugin(outdir));
   },
 };
 

package/scripts/build/tests/plugins_test.js

@@ -5,7 +5,7 @@
 const {assert} = require('chai');
 const path = require('path');
 
-const {devtoolsPlugin} = require('../devtools_plugin.js');
+const {devtoolsPlugin, esbuildPlugin} = require('../devtools_plugin.js');
 
 describe('devtools_plugin can compute paths with', () => {
   it('same directory import', () => {
@@ -27,4 +27,63 @@ describe('devtools_plugin can compute paths with', () => {
   it('importing generated files', () => {
     assert.strictEqual(devtoolsPlugin('../../generated/Protocol.js', 'front_end/core/sdk/FirstFile.js'), null);
   });
+
+  it('importing lighthouse files', () => {
+    assert.deepEqual(
+        devtoolsPlugin('./front_end/third_party/lighthouse/lighthouse-dt-bundle.js', 'front_end/core/sdk/FirstFile.js'),
+        {
+          id: path.join(
+              'front_end', 'core', 'sdk', 'front_end', 'third_party', 'lighthouse', 'lighthouse-dt-bundle.js'),
+          external: true,
+        });
+  });
+});
+
+describe('esbuild_plugin can compute paths with', () => {
+  const srcdir = __dirname;
+  const outdir = path.join(srcdir, 'out');
+  const plugin = esbuildPlugin(outdir);
+  it('same directory import', () => {
+    assert.deepEqual(
+        plugin({path: './AnotherFile.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        {path: path.join(srcdir, 'front_end', 'core', 'sdk', 'AnotherFile.js')});
+  });
+
+  it('different directory import', () => {
+    assert.deepEqual(
+        plugin({path: '../common/common.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        {path: './' + path.join('..', 'front_end', 'core', 'common', 'common.js'), external: true});
+  });
+
+  it('node built-in modules', () => {
+    assert.deepEqual(
+        plugin({path: 'fs', importer: path.join(srcdir, 'scripts/some-script.js')}), {path: 'fs', external: true});
+  });
+
+  it('codemirror modules', () => {
+    assert.deepEqual(
+        plugin({path: '../../lib/codemirror', importer: path.join(srcdir, 'scripts/some-script.js')}),
+        {path: '../../lib/codemirror', external: true});
+  });
+
+  it('importing generated files', () => {
+    assert.strictEqual(
+        plugin({path: '../../generated/Protocol.js', importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')}),
+        null);
+  });
+
+  it('importing lighthouse files', () => {
+    assert.deepEqual(
+        plugin({
+          path: './front_end/third_party/lighthouse/lighthouse-dt-bundle.js',
+          importer: path.join(srcdir, 'front_end/core/sdk/FirstFile.js')
+        }),
+        {
+          path: './' +
+              path.join(
+                  '..', 'front_end', 'core', 'sdk', 'front_end', 'third_party', 'lighthouse',
+                  'lighthouse-dt-bundle.js'),
+          external: true,
+        });
+  });
 });

package/scripts/devtools_paths.js

@@ -34,16 +34,6 @@ const os = require('os');
  */
 const PATH_TO_EXECUTED_FILE = process.argv[1];
 
-function pathIsMostTopLevelPath(filePath) {
-  /**
-   * On Linux/Mac, if we do path.dirname(X) as many times as possible, it will
-   * eventually equal `/`. On Windows, it will end up equalling C:\, and
-   * path.dirname('C:\') === 'C:\', so we use that to figure out if we've made
-   * it as far up the tree as we can.
-   */
-  return filePath === path.sep || path.dirname(filePath) === filePath;
-}
-
 const _lookUpCaches = new Map(
     [['chromium', null]],
 );
@@ -73,25 +63,7 @@ function isInChromiumDirectory() {
  * If it's standalone, it will be /path/to/devtools-frontend
  */
 function devtoolsRootPath() {
-  const nodeScriptFileThatIsBeingExecuted = PATH_TO_EXECUTED_FILE;
-  let devtoolsRootFolder = nodeScriptFileThatIsBeingExecuted;
-  while (path.basename(devtoolsRootFolder) !== 'devtools-frontend') {
-    devtoolsRootFolder = path.dirname(devtoolsRootFolder);
-    // We reached the end and can't find devtools-frontend.
-    if (pathIsMostTopLevelPath(devtoolsRootFolder)) {
-      throw new Error(
-          'Could not find devtools-frontend in path. If you have cloned the repository to a different directory name, it will not work.');
-    }
-  }
-  // In Chromium the path to the source code for devtools-frontend is:
-  // third_party/devtools-frontend/src
-  const {isInChromium} = isInChromiumDirectory();
-  if (isInChromium) {
-    return path.join(devtoolsRootFolder, 'src');
-  }
-
-  // But if you're in a standalone repo it's just the devtools-frontend folder.
-  return devtoolsRootFolder;
+  return path.dirname(__dirname);
 }
 
 /**