chrome-devtools-frontend 1.0.927127 → 1.0.928589

package/front_end/entrypoints/lighthouse_worker/{LighthouseService.js → LighthouseService.ts}

@@ -4,8 +4,8 @@
 
 import * as Root from '../../core/root/root.js';
 
-function disableLoggingForTest() {
-  console.log = () => undefined;  // eslint-disable-line no-console
+function disableLoggingForTest(): void {
+  console.log = (): void => undefined;  // eslint-disable-line no-console
 }
 
 /**
@@ -16,43 +16,25 @@ function disableLoggingForTest() {
  * via status updates defined below.
  */
 class LighthousePort {
-  constructor() {
-    /**
-     * @type {(function(string):void)|undefined}
-     */
-    this._onMessage;
-    /**
-     * @type {(function():void)|undefined}
-     */
-    this._onClose;
-  }
-  /**
-   * @param {string} eventName
-   * @param {function(string=):void} callback
-   */
-  on(eventName, callback) {
+  onMessage?: (message: string) => void;
+  onClose?: () => void;
+  on(eventName: string, callback: (arg?: string) => void): void {
     if (eventName === 'message') {
-      this._onMessage = callback;
+      this.onMessage = callback;
     } else if (eventName === 'close') {
-      this._onClose = callback;
+      this.onClose = callback;
     }
   }
 
-  /**
-   * @param {string} message
-   */
-  send(message) {
+  send(message: string): void {
     notifyFrontendViaWorkerMessage('sendProtocolMessage', {message});
   }
 }
 
 const port = new LighthousePort();
 
-/**
- * @param {*} params
- * @return {!Promise<*>}
- */
-async function start(params) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function start(params: any): Promise<unknown> {
   if (Root.Runtime.Runtime.queryParam('isUnderTest')) {
     disableLoggingForTest();
     params.flags.maxWaitForLoad = 2 * 1000;
@@ -91,10 +73,8 @@ async function start(params) {
  * Finds a locale supported by Lighthouse from the user's system locales.
  * If no matching locale is found, or if fetching locale data fails, this function returns nothing
  * and Lighthouse will use `en-US` by default.
- * @param {string[]} locales
- * @return {!Promise<(string|undefined)>}
  */
-async function fetchLocaleData(locales) {
+async function fetchLocaleData(locales: string[]): Promise<string|void> {
   // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
   const locale = self.lookupLocale(locales);
 
@@ -115,8 +95,8 @@ async function fetchLocaleData(locales) {
       localeDataTextPromise = Root.Runtime.loadResourcePromise(localeUrl.toString());
     }
 
-    const timeoutPromise =
-        new Promise((resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
+    const timeoutPromise = new Promise<string>(
+        (resolve, reject) => setTimeout(() => reject(new Error('timed out fetching locale')), 5000));
     const localeDataText = await Promise.race([timeoutPromise, localeDataTextPromise]);
     const localeData = JSON.parse(localeDataText);
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
@@ -129,25 +109,19 @@ async function fetchLocaleData(locales) {
   return;
 }
 
-/**
- * @param {string} method
- * @param {*} params
- */
-function notifyFrontendViaWorkerMessage(method, params) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function notifyFrontendViaWorkerMessage(method: string, params: any): void {
   self.postMessage(JSON.stringify({method, params}));
 }
 
-/**
- * @param {!MessageEvent} event
- */
-self.onmessage = async event => {
+self.onmessage = async(event: MessageEvent): Promise<void> => {
   const messageFromFrontend = JSON.parse(event.data);
   if (messageFromFrontend.method === 'start') {
     const result = await start(messageFromFrontend.params);
     self.postMessage(JSON.stringify({id: messageFromFrontend.id, result}));
   } else if (messageFromFrontend.method === 'dispatchProtocolMessage') {
-    if (port._onMessage) {
-      port._onMessage(messageFromFrontend.params.message);
+    if (port.onMessage) {
+      port.onMessage(messageFromFrontend.params.message);
     }
   } else {
     throw new Error(`Unknown event: ${event.data}`);
@@ -155,6 +129,7 @@ self.onmessage = async event => {
 };
 
 // Make lighthouse and traceviewer happy.
+// @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
 globalThis.global = self;
 // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
 globalThis.global.isVinn = true;
@@ -164,5 +139,5 @@ globalThis.global.document = {};
 globalThis.global.document.documentElement = {};
 // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
 globalThis.global.document.documentElement.style = {
-  WebkitAppearance: 'WebkitAppearance'
+  WebkitAppearance: 'WebkitAppearance',
 };

package/front_end/entrypoints/main/MainImpl.ts

@@ -215,7 +215,7 @@ export class MainImpl {
       clear: Host.InspectorFrontendHost.InspectorFrontendHostInstance.clearPreferences,
     };
     const globalStorage = new Common.Settings.SettingsStorage(prefs, hostStorage, storagePrefix);
-    Common.Settings.Settings.instance({forceNew: true, globalStorage, localStorage});
+    Common.Settings.Settings.instance({forceNew: true, syncedStorage: globalStorage, globalStorage, localStorage});
 
     // @ts-ignore layout test global
     self.Common.settings = Common.Settings.Settings.instance();
@@ -243,7 +243,6 @@ export class MainImpl {
         'ignoreListJSFramesOnTimeline', 'Ignore List for JavaScript frames on Timeline', true);
     Root.Runtime.experiments.register(
         'cssOverview', 'CSS Overview', undefined, 'https://developer.chrome.com/blog/new-in-devtools-87/#css-overview');
-    Root.Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping');
     Root.Runtime.experiments.register('inputEventsOnTimelineOverview', 'Input events on Timeline overview', true);
     Root.Runtime.experiments.register('liveHeapProfile', 'Live heap profile', true);
     Root.Runtime.experiments.register(
@@ -317,6 +316,9 @@ export class MainImpl {
         'hideIssuesFeature', 'Enable experimental hide issues menu', undefined,
         'https://developer.chrome.com/blog/new-in-devtools-94/#hide-issues');
 
+    // Hide Issues Feature.
+    Root.Runtime.experiments.register('groupAndHideIssuesByKind', 'Allow grouping and hiding of issues by IssueKind');
+
     // Localized DevTools, hide "locale selector" setting behind an experiment.
     Root.Runtime.experiments.register(Root.Runtime.ExperimentName.LOCALIZED_DEVTOOLS, 'Enable localized DevTools');
 
@@ -527,6 +529,9 @@ export class MainImpl {
       Timeline.TimelinePanel.LoadTimelineHandler.instance().handleQueryParam(value);
     }
 
+    // Initialize ARIAUtils.alert Element
+    UI.ARIAUtils.alertElementInstance();
+
     // Allow UI cycles to repaint prior to creating connection.
     setTimeout(this.initializeTarget.bind(this), 0);
     MainImpl.timeEnd('Main._showAppUI');

package/front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js

@@ -725,11 +725,11 @@ ElementsTestRunner.dumpElementsTree = function(rootNode, depth, resultsArray) {
     return element.innerText.replace(/\u200b/g, '').replace(/\n/g, '\\n').trim();
   }
 
-  function dumpMap(name, map) {
+  function dumpMap(name, node) {
     const result = [];
 
-    for (const id of map.keys()) {
-      result.push(id + '=' + map.get(id));
+    for (const id of node.getMarkerKeysForTest()) {
+      result.push(id + '=' + node.marker(id));
     }
 
     if (!result.length) {
@@ -748,7 +748,7 @@ ElementsTestRunner.dumpElementsTree = function(rootNode, depth, resultsArray) {
     const node = treeItem.node && treeItem.node();
 
     if (node) {
-      markers += dumpMap('markers', node.markers);
+      markers += dumpMap('markers', node);
       const dump = (node.subtreeMarkerCount ? 'subtreeMarkerCount:' + node.subtreeMarkerCount : '');
 
       if (dump) {

package/front_end/legacy_test_runner/sdk_test_runner/sdk_test_runner.js

@@ -49,7 +49,7 @@ SDKTestRunner.PageMock = class {
     self.Bindings.debuggerWorkspaceBinding.resetForTest(TestRunner.mainTarget);
     self.Bindings.resourceMapping.resetForTest(TestRunner.mainTarget);
     this.enabledDomains.clear();
-    self.SDK.targetManager.targetsInternal.clear();
+    self.SDK.targetManager.clearAllTargetsForTest();
 
     const oldFactory = ProtocolClient.Connection.getFactory();
     ProtocolClient.Connection.setFactory(() => {

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -90,8 +90,6 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       return true;
     }
 
-    // TODO(crbug.com/1018234): Also take into account source maps here and remove the auto-stepping
-    // logic in the front-end (which is currently still an experiment) completely.
     const rawLocation = callFrame.location();
     if (!rawLocation) {
       return [];
@@ -118,10 +116,6 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       }
     }
 
-    if (!Root.Runtime.experiments.isEnabled('emptySourceMapAutoStepping')) {
-      return [];
-    }
-
     const compilerMapping = this.debuggerModelToData.get(rawLocation.debuggerModel)?.compilerMapping;
     if (!compilerMapping) {
       return [];

package/front_end/models/issues_manager/GenericIssue.ts

@@ -0,0 +1,86 @@
+// Copyright 2021 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 {LazyMarkdownIssueDescription, MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+import {resolveLazyDescription} from './MarkdownIssueDescription.js';
+
+const UIStrings = {
+  /**
+  *@description Title for cross-origin portal post message error
+  */
+  crossOriginPortalPostMessage: 'Portals - Same-origin communication channels',
+};
+const str_ = i18n.i18n.registerUIStrings('models/issues_manager/GenericIssue.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export class GenericIssue extends Issue {
+  private issueDetails: Protocol.Audits.GenericIssueDetails;
+
+  constructor(
+      issueDetails: Protocol.Audits.GenericIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel,
+      issueId?: Protocol.Audits.IssueId) {
+    const issueCode = [
+      Protocol.Audits.InspectorIssueCode.GenericIssue,
+      issueDetails.errorType,
+    ].join('::');
+    super(issueCode, issuesModel, issueId);
+    this.issueDetails = issueDetails;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.Generic;
+  }
+
+  primaryKey(): string {
+    return `${this.code()}-(${this.issueDetails.frameId})`;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    const description = issueDescriptions.get(this.issueDetails.errorType);
+    if (!description) {
+      return null;
+    }
+    return resolveLazyDescription(description);
+  }
+
+  details(): Protocol.Audits.GenericIssueDetails {
+    return this.issueDetails;
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.Improvement;
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
+      GenericIssue[] {
+    const genericDetails = inspectorIssue.details.genericIssueDetails;
+    if (!genericDetails) {
+      console.warn('Generic issue without details received.');
+      return [];
+    }
+    return [new GenericIssue(genericDetails, issuesModel, inspectorIssue.issueId)];
+  }
+}
+
+export const genericCrossOriginPortalPostMessageError = {
+  file: 'genericCrossOriginPortalPostMessageError.md',
+  links: [{
+    link: 'https://github.com/WICG/portals#same-origin-communication-channels',
+    linkTitle: i18nLazyString(UIStrings.crossOriginPortalPostMessage),
+  }],
+};
+
+export const genericCrossOriginPortalPostMessageCode = [
+  Protocol.Audits.InspectorIssueCode.GenericIssue,
+  Protocol.Audits.GenericIssueErrorType.CrossOriginPortalPostMessageError,
+].join('::');
+
+const issueDescriptions: Map<Protocol.Audits.GenericIssueErrorType, LazyMarkdownIssueDescription> = new Map([
+  [Protocol.Audits.GenericIssueErrorType.CrossOriginPortalPostMessageError, genericCrossOriginPortalPostMessageError],
+]);

package/front_end/models/issues_manager/Issue.ts

@@ -11,6 +11,18 @@ import type * as Protocol from '../../generated/protocol.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 
 const UIStrings = {
+  /**
+   *@description The kind of an issue (plural) (Issues are categorized into kinds).
+   */
+  improvements: 'Improvements',
+  /**
+   *@description The kind of an issue (plural) (Issues are categorized into kinds).
+   */
+  pageErrors: 'Page Errors',
+  /**
+   *@description The kind of an issue (plural) (Issues are categorized into kinds).
+   */
+  breakingChanges: 'Breaking Changes',
   /**
    *@description A description for a kind of issue we display in the issues tab.
    */
@@ -30,6 +42,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // eslint-disable-next-line rulesdir/const_enum
 export enum IssueCategory {
   CrossOriginEmbedderPolicy = 'CrossOriginEmbedderPolicy',
+  Generic = 'Generic',
   MixedContent = 'MixedContent',
   SameSiteCookie = 'SameSiteCookie',
   HeavyAd = 'HeavyAd',
@@ -63,6 +76,17 @@ export enum IssueKind {
   Improvement = 'Improvement',
 }
 
+export function getIssueKindName(issueKind: IssueKind): Common.UIString.LocalizedString {
+  switch (issueKind) {
+    case IssueKind.BreakingChange:
+      return i18nString(UIStrings.breakingChanges);
+    case IssueKind.Improvement:
+      return i18nString(UIStrings.improvements);
+    case IssueKind.PageError:
+      return i18nString(UIStrings.pageErrors);
+  }
+}
+
 export function getIssueKindDescription(issueKind: IssueKind): Common.UIString.LocalizedString {
   switch (issueKind) {
     case IssueKind.PageError:

package/front_end/models/issues_manager/IssuesManager.ts

@@ -12,6 +12,7 @@ import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CorsIssue} from './CorsIssue.js';
 import {CrossOriginEmbedderPolicyIssue, isCrossOriginEmbedderPolicyIssue} from './CrossOriginEmbedderPolicyIssue.js';
 import {DeprecationIssue} from './DeprecationIssue.js';
+import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
 import {Events} from './IssuesManagerEvents.js';
@@ -94,6 +95,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.WasmCrossOriginModuleSharingIssue,
     WasmCrossOriginModuleSharingIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.GenericIssue,
+    GenericIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**
@@ -154,7 +159,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   private allIssues = new Map<string, Issue>();
   private filteredIssues = new Map<string, Issue>();
   private issueCounts = new Map<IssueKind, number>();
-  private hiddenIssueCount: number = 0;
+  private hiddenIssueCount = new Map<IssueKind, number>();
   private hasSeenTopFrameNavigated = false;
   private sourceFrameIssuesManager = new SourceFrameIssuesManager(this);
   private issuesById: Map<string, Issue> = new Map();
@@ -273,7 +278,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
         this.updateIssueHiddenStatus(issue, values);
       }
       if (issue.isHidden()) {
-        this.hiddenIssueCount++;
+        this.hiddenIssueCount.set(issue.getKind(), 1 + (this.hiddenIssueCount.get(issue.getKind()) || 0));
       }
       this.dispatchEventToListeners(Events.IssueAdded, {issuesModel, issue});
     }
@@ -293,8 +298,15 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     return this.filteredIssues.size;
   }
 
-  numberOfHiddenIssues(): number {
-    return this.hiddenIssueCount;
+  numberOfHiddenIssues(kind?: IssueKind): number {
+    if (kind) {
+      return this.hiddenIssueCount.get(kind) ?? 0;
+    }
+    let count = 0;
+    for (const num of this.hiddenIssueCount.values()) {
+      count += num;
+    }
+    return count;
   }
 
   numberOfAllStoredIssues(): number {
@@ -327,7 +339,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.filteredIssues.clear();
     this.issueCounts.clear();
     this.issuesById.clear();
-    this.hiddenIssueCount = 0;
+    this.hiddenIssueCount.clear();
     const values = this.hideIssueSetting?.get();
     const hideIssuesFeature = Root.Runtime.experiments.isEnabled('hideIssuesFeature');
     for (const [key, issue] of this.allIssues) {
@@ -338,7 +350,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
         this.filteredIssues.set(key, issue);
         this.issueCounts.set(issue.getKind(), 1 + (this.issueCounts.get(issue.getKind()) ?? 0));
         if (issue.isHidden()) {
-          this.hiddenIssueCount++;
+          this.hiddenIssueCount.set(issue.getKind(), 1 + (this.hiddenIssueCount.get(issue.getKind()) || 0));
         }
         const issueId = issue.getIssueId();
         if (issueId) {

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

@@ -0,0 +1,3 @@
+# Cross-origin portal post messages are blocked on your site
+
+In order to prevent cross-site tracking, cross-origin portal content cannot communicate with the page tha embeds it. `window.portalHost.postMessage()` is blocked: messages will not be sent from the portal to the page that embeds it.

package/front_end/models/issues_manager/issues_manager.ts

@@ -8,6 +8,7 @@ import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CorsIssue from './CorsIssue.js';
 import * as CrossOriginEmbedderPolicyIssue from './CrossOriginEmbedderPolicyIssue.js';
 import * as DeprecationIssue from './DeprecationIssue.js';
+import * as GenericIssue from './GenericIssue.js';
 import * as HeavyAdIssue from './HeavyAdIssue.js';
 import * as Issue from './Issue.js';
 import * as IssueResolver from './IssueResolver.js';
@@ -30,6 +31,7 @@ export {
   CorsIssue,
   CrossOriginEmbedderPolicyIssue,
   DeprecationIssue,
+  GenericIssue,
   HeavyAdIssue,
   Issue,
   IssueResolver,