chrome-devtools-frontend 1.0.1153166 → 1.0.1155899

package/front_end/models/bindings/PresentationConsoleMessageHelper.ts

@@ -40,70 +40,87 @@ import {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {LiveLocationPool, LiveLocationWithPool, type LiveLocation} from './LiveLocation.js';
 import {CSSWorkspaceBinding} from './CSSWorkspaceBinding.js';
 
-const targetToMessageHelperMap = new WeakMap<SDK.Target.Target, PresentationConsoleMessageHelper>();
+export interface MessageSource {
+  url?: Platform.DevToolsPath.UrlString;
+  line: number;
+  column: number;
+  scriptId?: Protocol.Runtime.ScriptId;
+  stackTrace?: Protocol.Runtime.StackTrace;
+}
 
-export class PresentationConsoleMessageManager implements
+export class PresentationSourceFrameMessageManager implements
     SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel>,
     SDK.TargetManager.SDKModelObserver<SDK.CSSModel.CSSModel> {
+  #targetToMessageHelperMap = new WeakMap<SDK.Target.Target, PresentationSourceFrameMessageHelper>();
   constructor() {
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.DebuggerModel.DebuggerModel, this);
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel, this);
-
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.ConsoleCleared, this.consoleCleared, this);
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.MessageAdded,
-        event => this.consoleMessageAdded(event.data));
-    SDK.ConsoleModel.ConsoleModel.allMessagesUnordered().forEach(this.consoleMessageAdded, this);
   }
 
   modelAdded(model: SDK.DebuggerModel.DebuggerModel|SDK.CSSModel.CSSModel): void {
     const target = model.target();
-    const helper = targetToMessageHelperMap.get(target) ?? new PresentationConsoleMessageHelper();
+    const helper = this.#targetToMessageHelperMap.get(target) ?? new PresentationSourceFrameMessageHelper();
     if (model instanceof SDK.DebuggerModel.DebuggerModel) {
       helper.setDebuggerModel(model);
     } else {
       helper.setCSSModel(model);
     }
-    targetToMessageHelperMap.set(target, helper);
+    this.#targetToMessageHelperMap.set(target, helper);
   }
 
   modelRemoved(model: SDK.DebuggerModel.DebuggerModel|SDK.CSSModel.CSSModel): void {
     const target = model.target();
-    const helper = targetToMessageHelperMap.get(target);
-    if (helper) {
-      helper.consoleCleared();
-    }
+    const helper = this.#targetToMessageHelperMap.get(target);
+    helper?.clear();
   }
 
-  private consoleMessageAdded(message: SDK.ConsoleModel.ConsoleMessage): void {
-    const runtimeModel = message.runtimeModel();
-    if (!message.isErrorOrWarning() || !message.runtimeModel() ||
-        message.source === Protocol.Log.LogEntrySource.Violation || !runtimeModel) {
-      return;
-    }
-    const helper = targetToMessageHelperMap.get(runtimeModel.target());
-    if (helper) {
-      void helper.consoleMessageAdded(message);
-    }
+  addMessage(message: Workspace.UISourceCode.Message, source: MessageSource, target: SDK.Target.Target): void {
+    const helper = this.#targetToMessageHelperMap.get(target);
+    void helper?.addMessage(message, source);
   }
 
-  private consoleCleared(): void {
+  clear(): void {
     for (const target of SDK.TargetManager.TargetManager.instance().targets()) {
-      const helper = targetToMessageHelperMap.get(target);
-      if (helper) {
-        helper.consoleCleared();
-      }
+      const helper = this.#targetToMessageHelperMap.get(target);
+      helper?.clear();
     }
   }
 }
 
-export class PresentationConsoleMessageHelper {
+export class PresentationConsoleMessageManager {
+  #sourceFrameMessageManager = new PresentationSourceFrameMessageManager();
+
+  constructor() {
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.MessageAdded,
+        event => this.consoleMessageAdded(event.data));
+    SDK.ConsoleModel.ConsoleModel.allMessagesUnordered().forEach(this.consoleMessageAdded, this);
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.ConsoleCleared,
+        () => this.#sourceFrameMessageManager.clear());
+  }
+
+  private consoleMessageAdded(consoleMessage: SDK.ConsoleModel.ConsoleMessage): void {
+    const runtimeModel = consoleMessage.runtimeModel();
+    if (!consoleMessage.isErrorOrWarning() || !consoleMessage.runtimeModel() ||
+        consoleMessage.source === Protocol.Log.LogEntrySource.Violation || !runtimeModel) {
+      return;
+    }
+    const level = consoleMessage.level === Protocol.Log.LogEntryLevel.Error ?
+        Workspace.UISourceCode.Message.Level.Error :
+        Workspace.UISourceCode.Message.Level.Warning;
+    this.#sourceFrameMessageManager.addMessage(
+        new Workspace.UISourceCode.Message(level, consoleMessage.messageText), consoleMessage, runtimeModel.target());
+  }
+}
+
+export class PresentationSourceFrameMessageHelper {
   #debuggerModel?: SDK.DebuggerModel.DebuggerModel;
   #cssModel?: SDK.CSSModel.CSSModel;
-  #presentationMessages:
-      Map<Platform.DevToolsPath.UrlString,
-          Array<{message: SDK.ConsoleModel.ConsoleMessage, presentation: PresentationConsoleMessage}>> = new Map();
+  #presentationMessages: Map<Platform.DevToolsPath.UrlString, Array<{
+                               source: MessageSource,
+                               presentation: PresentationSourceFrameMessage,
+                             }>> = new Map();
   readonly #locationPool: LiveLocationPool;
 
   constructor() {
@@ -136,56 +153,56 @@ export class PresentationConsoleMessageHelper {
         SDK.CSSModel.Events.StyleSheetAdded, event => queueMicrotask(() => this.#styleSheetAdded(event)));
   }
 
-  async consoleMessageAdded(message: SDK.ConsoleModel.ConsoleMessage): Promise<void> {
-    const presentation = new PresentationConsoleMessage(message, this.#locationPool);
-    const location = this.#rawLocation(message) ?? this.#cssLocation(message) ?? this.#uiLocation(message);
+  async addMessage(message: Workspace.UISourceCode.Message, source: MessageSource): Promise<void> {
+    const presentation = new PresentationSourceFrameMessage(message, this.#locationPool);
+    const location = this.#rawLocation(source) ?? this.#cssLocation(source) ?? this.#uiLocation(source);
     if (location) {
       await presentation.updateLocationSource(location);
     }
-    if (message.url) {
-      let messages = this.#presentationMessages.get(message.url);
+    if (source.url) {
+      let messages = this.#presentationMessages.get(source.url);
       if (!messages) {
         messages = [];
-        this.#presentationMessages.set(message.url, messages);
+        this.#presentationMessages.set(source.url, messages);
       }
-      messages.push({message, presentation});
+      messages.push({source, presentation});
     }
   }
 
-  #uiLocation(message: SDK.ConsoleModel.ConsoleMessage): Workspace.UISourceCode.UILocation|null {
-    if (!message.url) {
+  #uiLocation(source: MessageSource): Workspace.UISourceCode.UILocation|null {
+    if (!source.url) {
       return null;
     }
 
-    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(message.url);
+    const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(source.url);
     if (!uiSourceCode) {
       return null;
     }
-    return new Workspace.UISourceCode.UILocation(uiSourceCode, message.line, message.column);
+    return new Workspace.UISourceCode.UILocation(uiSourceCode, source.line, source.column);
   }
 
-  #cssLocation(message: SDK.ConsoleModel.ConsoleMessage): SDK.CSSModel.CSSLocation|null {
-    if (!this.#cssModel || !message.url) {
+  #cssLocation(source: MessageSource): SDK.CSSModel.CSSLocation|null {
+    if (!this.#cssModel || !source.url) {
       return null;
     }
-    const locations = this.#cssModel.createRawLocationsByURL(message.url, message.line, message.column);
+    const locations = this.#cssModel.createRawLocationsByURL(source.url, source.line, source.column);
     return locations[0] ?? null;
   }
 
-  #rawLocation(message: SDK.ConsoleModel.ConsoleMessage): SDK.DebuggerModel.Location|null {
+  #rawLocation(source: MessageSource): SDK.DebuggerModel.Location|null {
     if (!this.#debuggerModel) {
       return null;
     }
-    if (message.scriptId) {
-      return this.#debuggerModel.createRawLocationByScriptId(message.scriptId, message.line, message.column);
+    if (source.scriptId) {
+      return this.#debuggerModel.createRawLocationByScriptId(source.scriptId, source.line, source.column);
     }
-    const callFrame = message.stackTrace && message.stackTrace.callFrames ? message.stackTrace.callFrames[0] : null;
+    const callFrame = source.stackTrace && source.stackTrace.callFrames ? source.stackTrace.callFrames[0] : null;
     if (callFrame) {
       return this.#debuggerModel.createRawLocationByScriptId(
           callFrame.scriptId, callFrame.lineNumber, callFrame.columnNumber);
     }
-    if (message.url) {
-      return this.#debuggerModel.createRawLocationByURL(message.url, message.line, message.column);
+    if (source.url) {
+      return this.#debuggerModel.createRawLocationByURL(source.url, source.line, source.column);
     }
     return null;
   }
@@ -195,8 +212,8 @@ export class PresentationConsoleMessageHelper {
     const messages = this.#presentationMessages.get(script.sourceURL);
 
     const promises: Promise<void>[] = [];
-    for (const {message, presentation} of messages ?? []) {
-      const rawLocation = this.#rawLocation(message);
+    for (const {presentation, source} of messages ?? []) {
+      const rawLocation = this.#rawLocation(source);
       if (rawLocation && script.scriptId === rawLocation.scriptId) {
         promises.push(presentation.updateLocationSource(rawLocation));
       }
@@ -213,9 +230,9 @@ export class PresentationConsoleMessageHelper {
     const messages = this.#presentationMessages.get(uiSourceCode.url());
 
     const promises: Promise<void>[] = [];
-    for (const {message, presentation} of messages ?? []) {
+    for (const {presentation, source} of messages ?? []) {
       promises.push(presentation.updateLocationSource(
-          new Workspace.UISourceCode.UILocation(uiSourceCode, message.line, message.column)));
+          new Workspace.UISourceCode.UILocation(uiSourceCode, source.line, source.column)));
     }
     void Promise.all(promises).then(this.uiSourceCodeAddedForTest.bind(this));
   }
@@ -229,10 +246,10 @@ export class PresentationConsoleMessageHelper {
     const messages = this.#presentationMessages.get(header.sourceURL);
 
     const promises: Promise<void>[] = [];
-    for (const {message, presentation} of messages ?? []) {
-      if (header.containsLocation(message.line, message.column)) {
+    for (const {source, presentation} of messages ?? []) {
+      if (header.containsLocation(source.line, source.column)) {
         promises.push(
-            presentation.updateLocationSource(new SDK.CSSModel.CSSLocation(header, message.line, message.column)));
+            presentation.updateLocationSource(new SDK.CSSModel.CSSLocation(header, source.line, source.column)));
       }
     }
     void Promise.all(promises).then(this.styleSheetAddedForTest.bind(this));
@@ -241,7 +258,7 @@ export class PresentationConsoleMessageHelper {
   styleSheetAddedForTest(): void {
   }
 
-  consoleCleared(): void {
+  clear(): void {
     this.#debuggerReset();
   }
 
@@ -273,15 +290,14 @@ class FrozenLiveLocation extends LiveLocationWithPool {
   }
 }
 
-export class PresentationConsoleMessage extends Workspace.UISourceCode.Message {
+export class PresentationSourceFrameMessage {
   #uiSourceCode?: Workspace.UISourceCode.UISourceCode;
   #liveLocation?: LiveLocation;
-  #locationPool: LiveLocationPool;
+  readonly #locationPool: LiveLocationPool;
+  readonly #message: Workspace.UISourceCode.Message;
 
-  constructor(message: SDK.ConsoleModel.ConsoleMessage, locationPool: LiveLocationPool) {
-    const level = message.level === Protocol.Log.LogEntryLevel.Error ? Workspace.UISourceCode.Message.Level.Error :
-                                                                       Workspace.UISourceCode.Message.Level.Warning;
-    super(level, message.messageText);
+  constructor(message: Workspace.UISourceCode.Message, locationPool: LiveLocationPool) {
+    this.#message = message;
     this.#locationPool = locationPool;
   }
 
@@ -303,10 +319,10 @@ export class PresentationConsoleMessage extends Workspace.UISourceCode.Message {
 
   async #updateLocation(liveLocation: LiveLocation): Promise<void> {
     if (this.#uiSourceCode) {
-      this.#uiSourceCode.removeMessage(this);
+      this.#uiSourceCode.removeMessage(this.#message);
     }
     if (liveLocation !== this.#liveLocation) {
-      this.#uiSourceCode?.removeMessage(this);
+      this.#uiSourceCode?.removeMessage(this.#message);
       this.#liveLocation?.dispose();
       this.#liveLocation = liveLocation;
     }
@@ -314,13 +330,14 @@ export class PresentationConsoleMessage extends Workspace.UISourceCode.Message {
     if (!uiLocation) {
       return;
     }
-    this.range = TextUtils.TextRange.TextRange.createFromLocation(uiLocation.lineNumber, uiLocation.columnNumber || 0);
+    this.#message.range =
+        TextUtils.TextRange.TextRange.createFromLocation(uiLocation.lineNumber, uiLocation.columnNumber || 0);
     this.#uiSourceCode = uiLocation.uiSourceCode;
-    this.#uiSourceCode.addMessage(this);
+    this.#uiSourceCode.addMessage(this.#message);
   }
 
   dispose(): void {
-    this.#uiSourceCode?.removeMessage(this);
+    this.#uiSourceCode?.removeMessage(this.#message);
     this.#liveLocation?.dispose();
   }
 }

package/front_end/models/issues_manager/IssuesManager.ts

@@ -25,6 +25,7 @@ import {QuirksModeIssue} from './QuirksModeIssue.js';
 import {CookieIssue} from './CookieIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
 import {SourceFrameIssuesManager} from './SourceFrameIssuesManager.js';
+import {StylesheetLoadingIssue} from './StylesheetLoadingIssue.js';
 
 export {Events} from './IssuesManagerEvents.js';
 
@@ -108,6 +109,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.BounceTrackingIssue,
     BounceTrackingIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.StylesheetLoadingIssue,
+    StylesheetLoadingIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**

package/front_end/models/issues_manager/SourceFrameIssuesManager.ts

@@ -3,9 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.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';
 import * as Workspace from '../../models/workspace/workspace.js';
 
 import {
@@ -19,10 +17,10 @@ import {type IssueAddedEvent, type IssuesManager} from './IssuesManager.js';
 import {Events} from './IssuesManagerEvents.js';
 import {getIssueTitleFromMarkdownDescription} from './MarkdownIssueDescription.js';
 
-export class SourceFrameIssuesManager {
-  #locationPool = new Bindings.LiveLocation.LiveLocationPool();
-  #issueMessages = new Array<IssueMessage>();
+import {lateImportStylesheetLoadingCode, type StylesheetLoadingIssue} from './StylesheetLoadingIssue.js';
 
+export class SourceFrameIssuesManager {
+  #sourceFrameMessageManager = new Bindings.PresentationConsoleMessageHelper.PresentationSourceFrameMessageManager();
   constructor(private readonly issuesManager: IssuesManager) {
     this.issuesManager.addEventListener(Events.IssueAdded, this.#onIssueAdded, this);
     this.issuesManager.addEventListener(Events.FullUpdateRequired, this.#onFullUpdateRequired, this);
@@ -30,47 +28,44 @@ export class SourceFrameIssuesManager {
 
   #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssueAddedEvent>): void {
     const {issue} = event.data;
-    this.#addIssue(issue);
+    void this.#addIssue(issue);
   }
 
-  #addIssue(issue: Issue): void {
-    if (!this.#isTrustedTypeIssue(issue)) {
+  async #addIssue(issue: Issue): Promise<void> {
+    if (!this.#isTrustedTypeIssue(issue) && !this.#isLateImportIssue(issue)) {
       return;
     }
     const issuesModel = issue.model();
     if (!issuesModel) {
       return;
     }
-    const debuggerModel = issuesModel.target().model(SDK.DebuggerModel.DebuggerModel);
     const srcLocation = toZeroBasedLocation(issue.details().sourceCodeLocation);
-    if (srcLocation && debuggerModel) {
-      const rawLocation =
-          debuggerModel.createRawLocationByURL(srcLocation.url, srcLocation.lineNumber, srcLocation.columnNumber);
-      if (rawLocation) {
-        void this.#addIssueMessageToScript(issue, rawLocation);
-      }
+    const description = issue.getDescription();
+    if (!description || !srcLocation) {
+      return;
+    }
+    const messageText = await getIssueTitleFromMarkdownDescription(description);
+    if (!messageText) {
+      return;
     }
+    const clickHandler = (): void => {
+      void Common.Revealer.reveal(issue);
+    };
+    this.#sourceFrameMessageManager.addMessage(
+        new IssueMessage(messageText, issue.getKind(), clickHandler), {
+          line: srcLocation.lineNumber,
+          column: srcLocation.columnNumber ?? -1,
+          url: srcLocation.url,
+          scriptId: srcLocation.scriptId,
+        },
+        issuesModel.target());
   }
 
   #onFullUpdateRequired(): void {
     this.#resetMessages();
     const issues = this.issuesManager.issues();
     for (const issue of issues) {
-      this.#addIssue(issue);
-    }
-  }
-
-  async #addIssueMessageToScript(issue: Issue, rawLocation: SDK.DebuggerModel.Location): Promise<void> {
-    const description = issue.getDescription();
-    if (description) {
-      const title = await getIssueTitleFromMarkdownDescription(description);
-      if (title) {
-        const clickHandler = (): void => {
-          void Common.Revealer.reveal(issue);
-        };
-        this.#issueMessages.push(
-            new IssueMessage(title, issue.getKind(), rawLocation, this.#locationPool, clickHandler));
-      }
+      void this.#addIssue(issue);
     }
   }
 
@@ -79,48 +74,23 @@ export class SourceFrameIssuesManager {
         issue.code() === trustedTypesPolicyViolationCode;
   }
 
+  #isLateImportIssue(issue: Issue): issue is StylesheetLoadingIssue {
+    return issue.code() === lateImportStylesheetLoadingCode;
+  }
+
   #resetMessages(): void {
-    for (const message of this.#issueMessages) {
-      message.dispose();
-    }
-    this.#issueMessages = [];
-    this.#locationPool.disposeAll();
+    this.#sourceFrameMessageManager.clear();
   }
 }
 
 export class IssueMessage extends Workspace.UISourceCode.Message {
-  #uiSourceCode?: Workspace.UISourceCode.UISourceCode = undefined;
   #kind: IssueKind;
-
-  constructor(
-      title: string, kind: IssueKind, rawLocation: SDK.DebuggerModel.Location,
-      locationPool: Bindings.LiveLocation.LiveLocationPool, clickHandler: () => void) {
+  constructor(title: string, kind: IssueKind, clickHandler: () => void) {
     super(Workspace.UISourceCode.Message.Level.Issue, title, clickHandler);
     this.#kind = kind;
-    void Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createLiveLocation(
-        rawLocation, this.#updateLocation.bind(this), locationPool);
-  }
-
-  async #updateLocation(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
-    if (this.#uiSourceCode) {
-      this.#uiSourceCode.removeMessage(this);
-    }
-    const uiLocation = await liveLocation.uiLocation();
-    if (!uiLocation) {
-      return;
-    }
-    this.range = TextUtils.TextRange.TextRange.createFromLocation(uiLocation.lineNumber, uiLocation.columnNumber || 0);
-    this.#uiSourceCode = uiLocation.uiSourceCode;
-    this.#uiSourceCode.addMessage(this);
   }
 
   getIssueKind(): IssueKind {
     return this.#kind;
   }
-
-  dispose(): void {
-    if (this.#uiSourceCode) {
-      this.#uiSourceCode.removeMessage(this);
-    }
-  }
 }

package/front_end/models/issues_manager/StylesheetLoadingIssue.ts

@@ -0,0 +1,69 @@
+// Copyright 2023 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 Protocol from '../../generated/protocol.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import {type MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+export const lateImportStylesheetLoadingCode = [
+  Protocol.Audits.InspectorIssueCode.StylesheetLoadingIssue,
+  Protocol.Audits.StyleSheetLoadingIssueReason.LateImportRule,
+].join('::');
+
+export class StylesheetLoadingIssue extends Issue {
+  #issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails;
+  constructor(issueDetails: Protocol.Audits.StylesheetLoadingIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+    const code =
+        `${Protocol.Audits.InspectorIssueCode.StylesheetLoadingIssue}::${issueDetails.styleSheetLoadingIssueReason}`;
+    super(code, issuesModel);
+    this.#issueDetails = issueDetails;
+  }
+
+  override sources(): Array<Protocol.Audits.SourceCodeLocation> {
+    return [this.#issueDetails.sourceCodeLocation];
+  }
+
+  details(): Protocol.Audits.StylesheetLoadingIssueDetails {
+    return this.#issueDetails;
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.#issueDetails);
+  }
+
+  getDescription(): MarkdownIssueDescription {
+    switch (this.#issueDetails.styleSheetLoadingIssueReason) {
+      case Protocol.Audits.StyleSheetLoadingIssueReason.LateImportRule:
+        return {
+          file: 'stylesheetLateImport.md',
+          links: [],
+        };
+      case Protocol.Audits.StyleSheetLoadingIssueReason.RequestFailed:
+        return {
+          file: 'stylesheetRequestFailed.md',
+          links: [],
+        };
+    }
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.Other;
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.PageError;
+  }
+
+  static fromInspectorIssue(issueModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
+      StylesheetLoadingIssue[] {
+    const stylesheetLoadingDetails = inspectorIssue.details.stylesheetLoadingIssueDetails;
+    if (!stylesheetLoadingDetails) {
+      console.warn('Stylesheet loading issue without details received');
+      return [];
+    }
+    return [new StylesheetLoadingIssue(stylesheetLoadingDetails, issueModel)];
+  }
+}

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

@@ -0,0 +1,4 @@
+# Define @import rules at the top of the stylesheet
+
+An @import rule was ignored because it wasn't defined at the top of the stylesheet. Such rules must appear at the top,
+before any style declaration and any other at-rule with the exception of @charset and @layer.

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

@@ -0,0 +1,3 @@
+# Verify stylesheet URLs
+
+This page failed to load a stylesheet from a URL.

package/front_end/models/issues_manager/issues_manager.ts

@@ -24,6 +24,7 @@ import * as QuirksModeIssue from './QuirksModeIssue.js';
 import * as RelatedIssue from './RelatedIssue.js';
 import * as SharedArrayBufferIssue from './SharedArrayBufferIssue.js';
 import * as SourceFrameIssuesManager from './SourceFrameIssuesManager.js';
+import * as StylesheetLoadingIssue from './StylesheetLoadingIssue.js';
 
 export {
   AttributionReportingIssue,
@@ -48,4 +49,5 @@ export {
   RelatedIssue,
   SharedArrayBufferIssue,
   SourceFrameIssuesManager,
+  StylesheetLoadingIssue,
 };

package/front_end/models/timeline_model/TimelineModel.ts

@@ -1161,6 +1161,10 @@ export class TimelineModelImpl {
 
       case RecordType.DisplayItemListSnapshot:
       case RecordType.PictureSnapshot: {
+        // If we get a snapshot, we try to find the last Paint event for the
+        // current layer, and store the snapshot as the relevant picture for
+        // that event, thus creating a relationship between the snapshot and
+        // the last Paint event for the current timestamp.
         const layerUpdateEvent = this.findAncestorEvent(RecordType.UpdateLayer);
         if (!layerUpdateEvent || layerUpdateEvent.args['layerTreeId'] !== this.mainFrameLayerTreeId) {
           break;

package/front_end/models/trace/ModelImpl.ts

@@ -29,6 +29,7 @@ export const ENABLED_TRACE_HANDLERS = {
   LayoutShifts: Handlers.ModelHandlers.LayoutShifts,
   Screenshots: Handlers.ModelHandlers.Screenshots,
   GPU: Handlers.ModelHandlers.GPU,
+  NetworkRequests: Handlers.ModelHandlers.NetworkRequests,
 };
 export type PartialTraceParseDataDuringMigration =
     Readonly<Handlers.Types.EnabledHandlerDataWithMeta<typeof ENABLED_TRACE_HANDLERS>>;