chrome-devtools-frontend 1.0.1000934 → 1.0.1002543

package/front_end/models/issues_manager/Issue.ts

@@ -5,6 +5,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 type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
@@ -204,14 +205,17 @@ export abstract class Issue<IssueCode extends string = string> {
   }
 }
 
-export function toZeroBasedLocation(location: Protocol.Audits.SourceCodeLocation|undefined):
-    {url: string, scriptId: Protocol.Runtime.ScriptId|undefined, lineNumber: number, columnNumber: number|undefined}|
-    undefined {
+export function toZeroBasedLocation(location: Protocol.Audits.SourceCodeLocation|undefined): {
+  url: Platform.DevToolsPath.UrlString,
+  scriptId: Protocol.Runtime.ScriptId|undefined,
+  lineNumber: number,
+  columnNumber: number|undefined,
+}|undefined {
   if (!location) {
     return undefined;
   }
   return {
-    url: location.url,
+    url: location.url as Platform.DevToolsPath.UrlString,
     scriptId: location.scriptId,
     lineNumber: location.lineNumber,
     columnNumber: location.columnNumber === 0 ? undefined : location.columnNumber - 1,

package/front_end/models/persistence/PersistenceImpl.ts

@@ -256,8 +256,8 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       Promise<void> {
     const breakpoints = this.breakpointManager.breakpointLocationsForUISourceCode(from).map(
         breakpointLocation => breakpointLocation.breakpoint);
-    await Promise.all(breakpoints.map(breakpoint => {
-      breakpoint.remove(false /* keepInStorage */);
+    await Promise.all(breakpoints.map(async breakpoint => {
+      await breakpoint.remove(false /* keepInStorage */);
       return this.breakpointManager.setBreakpoint(
           to, breakpoint.lineNumber(), breakpoint.columnNumber(), breakpoint.condition(), breakpoint.enabled());
     }));

package/front_end/models/timeline_model/TimelineModel.ts

@@ -98,7 +98,6 @@ export class TimelineModelImpl {
   private lastRecalculateStylesEvent!: SDK.TracingModel.Event|null;
   private currentScriptEvent!: SDK.TracingModel.Event|null;
   private eventStack!: SDK.TracingModel.Event[];
-  private knownInputEvents!: Set<string>;
   private browserFrameTracking!: boolean;
   private persistentIds!: boolean;
   private legacyCurrentPage!: any;
@@ -573,7 +572,6 @@ export class TimelineModelImpl {
     this.lastRecalculateStylesEvent = null;
     this.currentScriptEvent = null;
     this.eventStack = [];
-    this.knownInputEvents = new Set();
     this.browserFrameTracking = false;
     this.persistentIds = false;
     this.legacyCurrentPage = null;
@@ -833,44 +831,6 @@ export class TimelineModelImpl {
           group(TrackType.Animation).push(asyncEvent);
           continue;
         }
-
-        if (asyncEvent.hasCategory(TimelineModelImpl.Category.LatencyInfo) ||
-            asyncEvent.name === RecordType.ImplSideFling) {
-          const lastStep = asyncEvent.steps[asyncEvent.steps.length - 1];
-          if (!lastStep) {
-            throw new Error('AsyncEvent.steps access is out of bounds.');
-          }
-          if (lastStep.phase !== SDK.TracingModel.Phase.NestableAsyncEnd) {
-            continue;
-          }
-          const chromeLatencyInfo = asyncEvent.args['chrome_latency_info'];
-
-          const data = chromeLatencyInfo?.['component_info'];
-          asyncEvent.causedFrame =
-              Boolean(data?.some((c: any) => c['component_type'] === 'COMPONENT_INPUT_EVENT_LATENCY_RENDERER_SWAP'));
-          if (asyncEvent.hasCategory(TimelineModelImpl.Category.LatencyInfo)) {
-            if (lastStep.id && !this.knownInputEvents.has(chromeLatencyInfo.trace_id)) {
-              continue;
-            }
-            if (asyncEvent.name === RecordType.InputLatencyMouseMove && !asyncEvent.causedFrame) {
-              continue;
-            }
-            // Coalesced events are not really been processed, no need to track them.
-            if (!data || data['is_coalesced']) {
-              continue;
-            }
-
-            const rendererMain =
-                data?.find((c: any) => c['component_type'] === 'COMPONENT_INPUT_EVENT_LATENCY_RENDERER_MAIN');
-            if (rendererMain) {
-              const time = rendererMain['time_us'] / 1000;
-              TimelineData.forEvent(asyncEvent.steps[0]).timeWaitingForMainThread =
-                  time - asyncEvent.steps[0].startTime;
-            }
-          }
-          group(TrackType.Input).push(asyncEvent);
-          continue;
-        }
       }
     }
 
@@ -1210,13 +1170,6 @@ export class TimelineModelImpl {
   }
 
   private processBrowserEvent(event: SDK.TracingModel.Event): void {
-    if (event.name === RecordType.LatencyInfoFlow) {
-      if (event.args.chrome_latency_info?.trace_id) {
-        this.knownInputEvents.add(event.args.chrome_latency_info.trace_id);
-      }
-      return;
-    }
-
     if (event.name === RecordType.ResourceWillSendRequest) {
       const requestId = event.args?.data?.requestId;
       if (typeof requestId === 'string') {
@@ -1715,7 +1668,6 @@ export class Track {
 export enum TrackType {
   MainThread = 'MainThread',
   Worker = 'Worker',
-  Input = 'Input',
   Animation = 'Animation',
   Timings = 'Timings',
   Console = 'Console',

package/front_end/panels/application/AppManifestView.ts

@@ -433,7 +433,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         .addChangeListener(this.updateManifest.bind(this, true));
 
     this.emptyView = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noManifestDetected));
-    this.emptyView.appendLink('https://web.dev/add-manifest/');
+    this.emptyView.appendLink('https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString);
 
     this.emptyView.show(this.contentElement);
     this.emptyView.hideWidget();
@@ -693,7 +693,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
     this.newNoteUrlField.parentElement?.classList.toggle('hidden', !hasNewNoteUrl);
     this.newNoteUrlField.removeChildren();
     if (hasNewNoteUrl) {
-      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as string);
+      const completeURL = (Common.ParsedURL.ParsedURL.completeURL(url, newNoteUrl) as Platform.DevToolsPath.UrlString);
       const link = Components.Linkifier.Linkifier.linkifyURL(
           completeURL, ({text: newNoteUrl} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;
@@ -763,7 +763,7 @@ export class AppManifestView extends UI.Widget.VBox implements SDK.TargetManager
         shortcutSection.appendFlexedField('Description', shortcut.description);
       }
       const urlField = shortcutSection.appendFlexedField('URL');
-      const shortcutUrl = (Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as string);
+      const shortcutUrl = Common.ParsedURL.ParsedURL.completeURL(url, shortcut.url) as Platform.DevToolsPath.UrlString;
       const link = Components.Linkifier.Linkifier.linkifyURL(
           shortcutUrl, ({text: shortcut.url} as Components.Linkifier.LinkifyURLOptions));
       link.tabIndex = 0;

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -41,7 +41,9 @@ export class ServiceWorkerCacheTreeElement extends ExpandableApplicationPanelTre
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.cacheStorage), 'CacheStorage');
     const icon = UI.Icon.Icon.create('mediumicon-database', 'resource-tree-item');
-    this.setLink('https://developer.chrome.com/docs/devtools/storage/cache/?utm_source=devtools');
+    this.setLink(
+        'https://developer.chrome.com/docs/devtools/storage/cache/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     this.setLeadingIcons([icon]);
     this.swCacheModel = null;
     this.swCacheTreeElements = new Set();

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -243,7 +243,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.localStorageListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.localStorage), 'LocalStorage');
     this.localStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/localstorage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const localStorageIcon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
     this.localStorageListTreeElement.setLeadingIcons([localStorageIcon]);
 
@@ -251,19 +252,22 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.sessionStorageListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.sessionStorage), 'SessionStorage');
     this.sessionStorageListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/sessionstorage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const sessionStorageIcon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
     this.sessionStorageListTreeElement.setLeadingIcons([sessionStorageIcon]);
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
     this.indexedDBListTreeElement = new IndexedDBTreeElement(panel);
     this.indexedDBListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/indexeddb/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/indexeddb/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     storageTreeElement.appendChild(this.indexedDBListTreeElement);
     this.databasesListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.webSql), 'Databases');
     this.databasesListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/websql/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/websql/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const databaseIcon = UI.Icon.Icon.create('mediumicon-database', 'resource-tree-item');
     this.databasesListTreeElement.setLeadingIcons([databaseIcon]);
 
@@ -271,7 +275,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.cookieListTreeElement =
         new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.cookies), 'Cookies');
     this.cookieListTreeElement.setLink(
-        'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools');
+        'https://developer.chrome.com/docs/devtools/storage/cookies/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
     const cookieIcon = UI.Icon.Icon.create('mediumicon-cookie', 'resource-tree-item');
     this.cookieListTreeElement.setLeadingIcons([cookieIcon]);
     storageTreeElement.appendChild(this.cookieListTreeElement);
@@ -1505,7 +1510,7 @@ export class StorageCategoryView extends UI.Widget.VBox {
     this.emptyWidget.text = text;
   }
 
-  setLink(link: string|null): void {
+  setLink(link: Platform.DevToolsPath.UrlString|null): void {
     if (link && !this.linkElement) {
       this.linkElement = this.emptyWidget.appendLink(link);
     }

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -47,7 +47,7 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
 export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeElement {
   protected readonly expandedSetting: Common.Settings.Setting<boolean>;
   protected readonly categoryName: string;
-  protected categoryLink: string|null;
+  protected categoryLink: Platform.DevToolsPath.UrlString|null;
 
   constructor(resourcesPanel: ResourcesPanel, categoryName: string, settingsKey: string, settingsDefault = false) {
     super(resourcesPanel, categoryName, false);
@@ -61,7 +61,7 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     return 'category://' + this.categoryName as Platform.DevToolsPath.UrlString;
   }
 
-  setLink(link: string): void {
+  setLink(link: Platform.DevToolsPath.UrlString): void {
     this.categoryLink = link;
   }
 

package/front_end/panels/application/BackgroundServiceView.ts

@@ -2,17 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// eslint-disable-next-line rulesdir/es_modules_import
-import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
-import backgroundServiceViewStyles from './backgroundServiceView.css.js';
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+// eslint-disable-next-line rulesdir/es_modules_import
+import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Protocol from '../../generated/protocol.js';
+
+import backgroundServiceViewStyles from './backgroundServiceView.css.js';
 
 import type {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {Events} from './BackgroundServiceModel.js';

package/front_end/panels/application/ResourcesPanel.ts

@@ -140,7 +140,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     return view;
   }
 
-  showCategoryView(categoryName: string, categoryLink: string|null): void {
+  showCategoryView(categoryName: string, categoryLink: Platform.DevToolsPath.UrlString|null): void {
     if (!this.categoryView) {
       this.categoryView = new StorageCategoryView();
     }

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

@@ -311,7 +311,7 @@ export class BackForwardCacheView extends HTMLElement {
   }
 
   #maybeRenderFrameTree(explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|
-                        undefined): LitHtml.TemplateResult|{} {
+                        undefined): LitHtml.LitTemplate {
     if (!explanationTree || (explanationTree.explanations.length === 0 && explanationTree.children.length === 0) ||
         !Root.Runtime.experiments.isEnabled('bfcacheDisplayTree')) {
       return LitHtml.nothing;
@@ -456,7 +456,7 @@ export class BackForwardCacheView extends HTMLElement {
 
   #maybeRenderExplanations(
       explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[],
-      explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|undefined): LitHtml.TemplateResult|{} {
+      explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|undefined): LitHtml.LitTemplate {
     if (explanations.length === 0) {
       return LitHtml.nothing;
     }
@@ -508,8 +508,7 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format on
   }
 
-  #maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult|
-      {} {
+  #maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.LitTemplate {
     if (explanation.reason ===
             Protocol.Page.BackForwardCacheNotRestoredReason.EmbedderExtensionSentMessageToCachedFrame &&
         explanation.context) {
@@ -522,7 +521,7 @@ export class BackForwardCacheView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  #renderFramesPerReason(frames: string[]|undefined): LitHtml.TemplateResult|{} {
+  #renderFramesPerReason(frames: string[]|undefined): LitHtml.LitTemplate {
     if (frames === undefined || frames.length === 0 || !Root.Runtime.experiments.isEnabled('bfcacheDisplayTree')) {
       return LitHtml.nothing;
     }

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

@@ -318,7 +318,7 @@ export class FrameDetailsReportView extends HTMLElement {
     });
   }
 
-  #renderOriginTrial(): LitHtml.TemplateResult|{} {
+  #renderOriginTrial(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;
     }
@@ -354,7 +354,7 @@ export class FrameDetailsReportView extends HTMLElement {
     `;
   }
 
-  #renderDocumentSection(): LitHtml.TemplateResult|{} {
+  #renderDocumentSection(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;
     }
@@ -381,7 +381,7 @@ export class FrameDetailsReportView extends HTMLElement {
     `;
   }
 
-  #maybeRenderSourcesLinkForURL(): LitHtml.TemplateResult|{} {
+  #maybeRenderSourcesLinkForURL(): LitHtml.LitTemplate {
     if (!this.#frame || this.#frame.unreachableUrl()) {
       return LitHtml.nothing;
     }
@@ -393,7 +393,7 @@ export class FrameDetailsReportView extends HTMLElement {
     );
   }
 
-  #maybeRenderNetworkLinkForURL(): LitHtml.TemplateResult|{} {
+  #maybeRenderNetworkLinkForURL(): LitHtml.LitTemplate {
     if (this.#frame) {
       const resource = this.#frame.resourceForURL(this.#frame.url);
       if (resource && resource.request) {
@@ -422,7 +422,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return null;
   }
 
-  #maybeRenderUnreachableURL(): LitHtml.TemplateResult|{} {
+  #maybeRenderUnreachableURL(): LitHtml.LitTemplate {
     if (!this.#frame || !this.#frame.unreachableUrl()) {
       return LitHtml.nothing;
     }
@@ -438,7 +438,7 @@ export class FrameDetailsReportView extends HTMLElement {
     `;
   }
 
-  #renderNetworkLinkForUnreachableURL(): LitHtml.TemplateResult|{} {
+  #renderNetworkLinkForUnreachableURL(): LitHtml.LitTemplate {
     if (this.#frame) {
       const unreachableUrl = Common.ParsedURL.ParsedURL.fromString(this.#frame.unreachableUrl());
       if (unreachableUrl) {
@@ -464,7 +464,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  #maybeRenderOrigin(): LitHtml.TemplateResult|{} {
+  #maybeRenderOrigin(): LitHtml.LitTemplate {
     if (this.#frame && this.#frame.securityOrigin && this.#frame.securityOrigin !== '://') {
       return LitHtml.html`
         <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
@@ -477,7 +477,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  async #renderOwnerElement(): Promise<LitHtml.TemplateResult|{}> {
+  async #renderOwnerElement(): Promise<LitHtml.LitTemplate> {
     if (this.#frame) {
       const linkTargetDOMNode = await this.#frame.getOwnerDOMNodeOrDocument();
       if (linkTargetDOMNode) {
@@ -507,7 +507,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  #maybeRenderCreationStacktrace(): LitHtml.TemplateResult|{} {
+  #maybeRenderCreationStacktrace(): LitHtml.LitTemplate {
     const creationStackTraceData = this.#frame?.getCreationStackTraceData();
     if (creationStackTraceData && creationStackTraceData.creationStackTrace) {
       // Disabled until https://crbug.com/1079231 is fixed.
@@ -549,7 +549,7 @@ export class FrameDetailsReportView extends HTMLElement {
     }
   }
 
-  #maybeRenderAdStatus(): LitHtml.TemplateResult|{} {
+  #maybeRenderAdStatus(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;
     }
@@ -572,7 +572,7 @@ export class FrameDetailsReportView extends HTMLElement {
       `;
   }
 
-  #renderIsolationSection(): LitHtml.TemplateResult|{} {
+  #renderIsolationSection(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;
     }
@@ -596,7 +596,7 @@ export class FrameDetailsReportView extends HTMLElement {
     `;
   }
 
-  #maybeRenderSecureContextExplanation(): LitHtml.TemplateResult|{} {
+  #maybeRenderSecureContextExplanation(): LitHtml.LitTemplate {
     const explanation = this.#getSecureContextExplanation();
     if (explanation) {
       return LitHtml.html`<span class="inline-comment">${explanation}</span>`;
@@ -618,7 +618,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return null;
   }
 
-  async #maybeRenderCoopCoepStatus(): Promise<LitHtml.TemplateResult|{}> {
+  async #maybeRenderCoopCoepStatus(): Promise<LitHtml.LitTemplate> {
     if (this.#frame) {
       const model = this.#frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
       const info = model && await model.getSecurityIsolationStatus(this.#frame.id);
@@ -642,7 +642,7 @@ export class FrameDetailsReportView extends HTMLElement {
       info: Protocol.Network.CrossOriginEmbedderPolicyStatus|Protocol.Network.CrossOriginOpenerPolicyStatus|undefined,
       policyName: string,
       noneValue: Protocol.Network.CrossOriginEmbedderPolicyValue|
-      Protocol.Network.CrossOriginOpenerPolicyValue): LitHtml.TemplateResult|{} {
+      Protocol.Network.CrossOriginOpenerPolicyValue): LitHtml.LitTemplate {
     if (!info) {
       return LitHtml.nothing;
     }
@@ -661,7 +661,7 @@ export class FrameDetailsReportView extends HTMLElement {
     `;
   }
 
-  #renderApiAvailabilitySection(): LitHtml.TemplateResult|{} {
+  #renderApiAvailabilitySection(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;
     }
@@ -680,7 +680,7 @@ export class FrameDetailsReportView extends HTMLElement {
     `;
   }
 
-  #renderSharedArrayBufferAvailability(): LitHtml.TemplateResult|{} {
+  #renderSharedArrayBufferAvailability(): LitHtml.LitTemplate {
     if (this.#frame) {
       const features = this.#frame.getGatedAPIFeatures();
       if (features) {
@@ -694,7 +694,7 @@ export class FrameDetailsReportView extends HTMLElement {
             i18nString(UIStrings.sharedarraybufferConstructorIs) :
             (sabAvailable ? i18nString(UIStrings.sharedarraybufferConstructorIsAvailable) : '');
 
-        function renderHint(frame: SDK.ResourceTreeModel.ResourceTreeFrame): LitHtml.TemplateResult|{} {
+        function renderHint(frame: SDK.ResourceTreeModel.ResourceTreeFrame): LitHtml.LitTemplate {
           switch (frame.getCrossOriginIsolatedContextType()) {
             case Protocol.Page.CrossOriginIsolatedContextType.Isolated:
               return LitHtml.nothing;
@@ -730,7 +730,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  #renderMeasureMemoryAvailability(): LitHtml.TemplateResult|{} {
+  #renderMeasureMemoryAvailability(): LitHtml.LitTemplate {
     if (this.#frame) {
       const measureMemoryAvailable = this.#frame.isCrossOriginIsolated();
       const availabilityText =
@@ -750,7 +750,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.nothing;
   }
 
-  #renderAdditionalInfoSection(): LitHtml.TemplateResult|{} {
+  #renderAdditionalInfoSection(): LitHtml.LitTemplate {
     if (!this.#frame) {
       return LitHtml.nothing;
     }

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

@@ -105,7 +105,7 @@ export class PermissionsPolicySection extends HTMLElement {
     void this.#render();
   }
 
-  #renderAllowed(): LitHtml.TemplateResult|{} {
+  #renderAllowed(): LitHtml.LitTemplate {
     const allowed = this.#permissionsPolicySectionData.policies.filter(p => p.allowed).map(p => p.feature).sort();
     if (!allowed.length) {
       return LitHtml.nothing;
@@ -119,7 +119,7 @@ export class PermissionsPolicySection extends HTMLElement {
     `;
   }
 
-  async #renderDisallowed(): Promise<LitHtml.TemplateResult|{}> {
+  async #renderDisallowed(): Promise<LitHtml.LitTemplate> {
     const disallowed = this.#permissionsPolicySectionData.policies.filter(p => !p.allowed)
                            .sort((a, b) => a.feature.localeCompare(b.feature));
     if (!disallowed.length) {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1439,7 +1439,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     // SyntaxErrors might not populate the URL field. Try to resolve it via scriptId.
-    const url = exceptionDetails.url || debuggerModel.scriptForId(scriptId)?.sourceURL;
+    const url =
+        exceptionDetails.url as Platform.DevToolsPath.UrlString || debuggerModel.scriptForId(scriptId)?.sourceURL;
     if (!url) {
       return;
     }
@@ -1531,7 +1532,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   private linkifyWithCustomLinkifier(
-      string: string, linkifier: (arg0: string, arg1: string, arg2?: number, arg3?: number) => Node): DocumentFragment {
+      string: string,
+      linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
+      DocumentFragment {
     if (string.length > getMaxTokenizableStringLength()) {
       const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
           document.createElement('span'), string, getLongStringVisibleLength());
@@ -1563,7 +1566,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
           if (splitResult) {
             linkNode = linkifier(token.text, sourceURL, splitResult.lineNumber, splitResult.columnNumber);
           } else {
-            linkNode = linkifier(token.text, '');
+            linkNode = linkifier(token.text, Platform.DevToolsPath.EmptyUrlString);
           }
           container.appendChild(linkNode);
           break;

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -1074,7 +1074,7 @@ export class ElementNode extends DataGrid.SortableDataGrid.SortableDataGridNode<
         button.classList.add('show-element');
         UI.Tooltip.Tooltip.install(button, i18nString(UIStrings.showElement));
         button.tabIndex = 0;
-        button.onclick = (): void => this.data.node.scrollIntoView();
+        button.onclick = (): Promise<void> => frontendNode.scrollIntoView();
         cell.appendChild(button);
       });
       return cell;

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
@@ -43,8 +44,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = LitHtml;
 
-const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback';
-const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview';
+const FEEDBACK_LINK = 'https://g.co/devtools/css-overview-feedback' as Platform.DevToolsPath.UrlString;
+const DOC_LINK = 'https://developer.chrome.com/docs/devtools/css-overview' as Platform.DevToolsPath.UrlString;
 export class OverviewStartRequestedEvent extends Event {
   static readonly eventName = 'overviewstartrequested';
 

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -336,6 +336,10 @@
   height: 20px;
 }
 
+.nodeId-column .monospace {
+  overflow: hidden;
+}
+
 .show-element {
   margin: 0 0 0 8px;
   padding: 0;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -848,45 +848,46 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    const contextMenu = this.createCopyContextMenu(event);
+    void contextMenu.show();
+  }
+
+  createCopyContextMenu(event: Event): UI.ContextMenu.ContextMenu {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyDeclaration), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyDeclaration), () => {
       const propertyText = `${this.property.name}: ${this.property.value};`;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(propertyText);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DeclarationViaContextMenu);
     });
 
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyProperty), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyProperty), () => {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.name);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.PropertyViaContextMenu);
     });
 
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyValue), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyValue), () => {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.value);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ValueViaContextMenu);
     });
 
-    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyRule), () => {
+    contextMenu.headerSection().appendItem(i18nString(UIStrings.copyRule), () => {
       const section = (this.section() as StylePropertiesSection);
       const ruleText = StylesSidebarPane.formatLeadingProperties(section).ruleText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(ruleText);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.RuleViaContextMenu);
     });
 
-    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
+    contextMenu.headerSection().appendItem(
+        i18nString(UIStrings.copyCssDeclarationAsJs), this.copyCssDeclarationAsJs.bind(this));
+
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations), () => {
       const section = (this.section() as StylePropertiesSection);
       const allDeclarationText = StylesSidebarPane.formatLeadingProperties(section).allDeclarationText;
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(allDeclarationText);
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllDeclarationsViaContextMenu);
     });
 
-    contextMenu.defaultSection().appendItem(i18nString(UIStrings.viewComputedValue), () => {
-      void this.viewComputedValue();
-    });
-
     contextMenu.clipboardSection().appendItem(
-        i18nString(UIStrings.copyCssDeclarationAsJs), this.copyCssDeclarationAsJs.bind(this));
-
-    contextMenu.defaultSection().appendItem(
         i18nString(UIStrings.copyAllCssDeclarationsAsJs), this.copyAllCssDeclarationAsJs.bind(this));
 
     // TODO(changhaohan): conditionally add this item only when there are changes to copy
@@ -896,7 +897,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllChangesViaStylesPane);
     });
 
-    void contextMenu.show();
+    contextMenu.footerSection().appendItem(i18nString(UIStrings.viewComputedValue), () => {
+      void this.viewComputedValue();
+    });
+
+    return contextMenu;
   }
 
   private async viewComputedValue(): Promise<void> {
@@ -1513,6 +1518,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     if (updatedProperty) {
       this.listItemElement.classList.toggle('changed', this.isPropertyChanged(updatedProperty));
+      this.parentPane().updateChangeStatus();
     }
 
     this.matchedStylesInternal.resetActiveProperties();