chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

package/front_end/panels/elements/PropertiesWidget.ts

@@ -53,14 +53,14 @@ const {repeat} = Directives;
 const UIStrings = {
   /**
    * @description Text on the checkbox in the Properties tab of the Elements panel, which controls whether
-   * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
-   * excluding properties whose values aren't set for example).
+   * all properties of the currently selected DOM element are shown, or only meaningful properties (for example,
+   * excluding properties whose values are not set).
    */
   showAll: 'Show all',
   /**
    * @description Tooltip on the checkbox in the Properties tab of the Elements panel, which controls whether
-   * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
-   * excluding properties whose values aren't set for example).
+   * all properties of the currently selected DOM element are shown, or only meaningful properties (for example,
+   * excluding properties whose values are not set).
    */
   showAllTooltip: 'When unchecked, only properties whose values are neither null nor undefined will be shown',
   /**

package/front_end/panels/elements/PropertyRenderer.ts

@@ -17,12 +17,12 @@ import {unescapeCssString} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**
-   * @description Text that is announced by the screen reader when the user focuses on an input field for entering the name of a CSS property in the Styles panel
+   * @description Text that is announced by the screen reader when the user focuses on an input field for entering the name of a CSS property in the Styles tab of the Elements panel.
    * @example {margin} PH1
    */
   cssPropertyName: '`CSS` property name: {PH1}',
   /**
-   * @description Text that is announced by the screen reader when the user focuses on an input field for entering the value of a CSS property in the Styles panel
+   * @description Text that is announced by the screen reader when the user focuses on an input field for entering the value of a CSS property in the Styles tab of the Elements panel.
    * @example {10px} PH1
    */
   cssPropertyValue: '`CSS` property value: {PH1}',

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -47,7 +47,7 @@ const {html, render} = Lit;
 
 const UIStrings = {
   /**
-   * @description Link text content in Elements Tree Outline of the Elements panel
+   * @description Link text content in the DOM tree outline of the Elements panel.
    */
   reveal: 'reveal',
 } as const;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -67,61 +67,61 @@ import type {StylesContainer} from './StylesContainer.js';
 
 const UIStrings = {
   /**
-   * @description Tooltip text that appears when hovering over the largeicon add button in the Styles Sidebar Pane of the Elements panel
+   * @description Tooltip text that appears when hovering over the add button in the Styles tab of the Elements panel.
    */
   insertStyleRuleBelow: 'Insert style rule below',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   constructedStylesheet: 'constructed stylesheet',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   userAgentStylesheet: 'user agent stylesheet',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   injectedStylesheet: 'injected stylesheet',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   viaInspector: 'via inspector',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   styleAttribute: '`style` attribute',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    * @example {html} PH1
    */
   sattributesStyle: '{PH1}[Attributes Style]',
   /**
-   * @description Show all button text content in Styles Sidebar Pane of the Elements panel
+   * @description Show all button text content in the Styles tab of the Elements panel.
    * @example {3} PH1
    */
   showAllPropertiesSMore: 'Show all properties ({PH1} more)',
   /**
-   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in the DOM tree of the Elements panel, copy should be used as a verb.
    */
   copySelector: 'Copy `selector`',
   /**
-   * @description A context menu item in Styles panel to copy CSS rule
+   * @description A context menu item in the Styles tab of the Elements panel to copy CSS rule.
    */
   copyRule: 'Copy rule',
   /**
-   * @description A context menu item in Styles panel to copy all CSS declarations
+   * @description A context menu item in the Styles tab of the Elements panel to copy all CSS declarations.
    */
   copyAllDeclarations: 'Copy all declarations',
   /**
-   * @description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles panel
+   * @description Text that is announced by the screen reader when the user focuses on an input field for editing the name of a CSS selector in the Styles tab of the Elements panel.
    */
   cssSelector: '`CSS` selector',
   /**
-   * @description Accessibility label for the button that expands a collapsed CSS rule in the Styles pane.
+   * @description Accessibility label for the button that expands a collapsed CSS rule in the Styles tab.
    */
   expandCollapsedRule: 'Expand collapsed rule',
   /**
-   * @description Accessibility label for the button that collapses an expanded CSS rule in the Styles pane.
+   * @description Accessibility label for the button that collapses an expanded CSS rule in the Styles tab.
    */
   collapseExpandedRule: 'Collapse expanded rule',
 } as const;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -58,44 +58,44 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Text in Color Swatch Popover Icon of the Elements panel
+   * @description Text in the color swatch popover icon of the Elements panel.
    */
   shiftClickToChangeColorFormat: 'Shift + Click to change color format.',
   /**
-   * @description Swatch icon element title in Color Swatch Popover Icon of the Elements panel
+   * @description Swatch icon element title in the color swatch popover icon of the Elements panel.
    * @example {Shift + Click to change color format.} PH1
    */
   openColorPickerS: 'Open color picker. {PH1}',
   /**
-   * @description Context menu item for style property in edit mode
+   * @description Context menu item for style property in edit mode.
    */
   togglePropertyAndContinueEditing: 'Toggle property and continue editing',
   /**
-   * @description Context menu item for style property in edit mode
+   * @description Context menu item for style property in edit mode.
    */
   openInSourcesPanel: 'Open in Sources panel',
   /**
-   * @description A context menu item in Styles panel to copy CSS declaration
+   * @description A context menu item in the Styles tab of the Elements panel to copy CSS declaration.
    */
   copyDeclaration: 'Copy declaration',
   /**
-   * @description A context menu item in Styles panel to copy CSS property
+   * @description A context menu item in the Styles tab of the Elements panel to copy CSS property.
    */
   copyProperty: 'Copy property',
   /**
-   * @description A context menu item in the Watch Expressions Sidebar Pane of the Sources panel and Network pane request.
+   * @description A context menu item in the Watch expressions sidebar of the Sources panel and Network panel request.
    */
   copyValue: 'Copy value',
   /**
-   * @description A context menu item in Styles panel to copy CSS rule
+   * @description A context menu item in the Styles tab of the Elements panel to copy CSS rule.
    */
   copyRule: 'Copy rule',
   /**
-   * @description A context menu item in Styles panel to copy all CSS declarations
+   * @description A context menu item in the Styles tab of the Elements panel to copy all CSS declarations.
    */
   copyAllDeclarations: 'Copy all declarations',
   /**
-   * @description A context menu item in Styles panel to view the computed CSS property value.
+   * @description A context menu item in the Styles tab of the Elements panel to view the computed CSS property value.
    */
   viewComputedValue: 'View computed value',
   /**
@@ -107,41 +107,41 @@ const UIStrings = {
    */
   openAnimationsPanel: 'Open Animations panel',
   /**
-   * @description Title of the button that opens the flexbox editor in the Styles panel.
+   * @description Title of the button that opens the flexbox editor in the Styles tab of the Elements panel.
    */
   flexboxEditorButton: 'Open `flexbox` editor',
   /**
-   * @description Title of the button that opens the CSS Grid editor in the Styles panel.
+   * @description Title of the button that opens the CSS Grid editor in the Styles tab of the Elements panel.
    */
   gridEditorButton: 'Open `grid` editor',
   /**
-   * @description Title of the button that opens the CSS Grid Lanes editor in the Styles panel.
+   * @description Title of the button that opens the CSS Grid Lanes editor in the Styles tab of the Elements panel.
    */
   gridLanesEditorButton: 'Open `grid-lanes` editor',
   /**
-   * @description A context menu item in Styles panel to copy CSS declaration as JavaScript property.
+   * @description A context menu item in the Styles tab of the Elements panel to copy CSS declaration as JavaScript property.
    */
   copyCssDeclarationAsJs: 'Copy declaration as JS',
   /**
-   * @description A context menu item in Styles panel to copy all declarations of CSS rule as JavaScript properties.
+   * @description A context menu item in the Styles tab of the Elements panel to copy all declarations of CSS rule as JavaScript properties.
    */
   copyAllCssDeclarationsAsJs: 'Copy all declarations as JS',
   /**
-   * @description Title of the link in Styles panel to jump to the Animations panel.
+   * @description Title of the link in the Styles tab of the Elements panel to jump to the Animations panel.
    */
   jumpToAnimationsPanel: 'Jump to Animations panel',
   /**
-   * @description Text displayed in a tooltip shown when hovering over a CSS property value references a name that's not
-   *             defined and can't be linked to.
+   * @description Text displayed in a tooltip shown when hovering over a CSS property value references a name that is not
+   *             defined and cannot be linked to.
    * @example {--my-linkable-name} PH1
    */
   sIsNotDefined: '{PH1} is not defined',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   invalidPropertyValue: 'Invalid property value',
   /**
-   * @description Text in Styles Sidebar Pane of the Elements panel
+   * @description Text in the Styles tab of the Elements panel.
    */
   unknownPropertyName: 'Unknown property name',
   /**
@@ -152,7 +152,7 @@ const UIStrings = {
    */
   invalidString: '{PH1}, property name: {PH2}, property value: {PH3}',
   /**
-   * @description Title in the styles tab for the icon button for jumping to the anchor node.
+   * @description Title in the Styles tab for the icon button for jumping to the anchor node.
    */
   jumpToAnchorNode: 'Jump to anchor node',
 } as const;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -83,56 +83,55 @@ import {WebCustomData} from './WebCustomData.js';
 
 const UIStrings = {
   /**
-   * @description No matches element text content in Styles Sidebar Pane of the Elements panel
+   * @description No matches element text content in the Styles tab of the Elements panel.
    */
   noMatchingSelectorOrStyle: 'No matching selector or style',
   /**
-   * /**
-   * @description Text to announce the result of the filter input in the Styles Sidebar Pane of the Elements panel
+   * @description Text to announce the result of the filter input in the Styles tab of the Elements panel.
    */
   visibleSelectors: '{n, plural, =1 {# visible selector listed below} other {# visible selectors listed below}}',
   /**
-   * @description Separator element text content in Styles Sidebar Pane of the Elements panel
+   * @description Separator element text content in the Styles tab of the Elements panel.
    * @example {scrollbar-corner} PH1
    */
   pseudoSElement: 'Pseudo ::{PH1} element',
   /**
-   * @description Text of a DOM element in Styles Sidebar Pane of the Elements panel
+   * @description Text of a DOM element in the Styles tab of the Elements panel.
    */
   inheritedFroms: 'Inherited from ',
   /**
-   * @description Text of an inherited pseudo element in Styles Sidebar Pane of the Elements panel
+   * @description Text of an inherited pseudo element in the Styles tab of the Elements panel.
    * @example {highlight} PH1
    */
   inheritedFromSPseudoOf: 'Inherited from ::{PH1} pseudo of ',
   /**
-   * @description Title of  in styles sidebar pane of the elements panel
+   * @description Tooltip for color values in the Styles tab of the Elements panel.
    * @example {Ctrl} PH1
    * @example {Alt} PH2
    */
   incrementdecrementWithMousewheelOne:
       'Increment/decrement with mousewheel or up/down keys. {PH1}: R ±1, Shift: G ±1, {PH2}: B ±1',
   /**
-   * @description Title of  in styles sidebar pane of the elements panel
+   * @description Tooltip for color values in the Styles tab of the Elements panel.
    * @example {Ctrl} PH1
    * @example {Alt} PH2
    */
   incrementdecrementWithMousewheelHundred:
       'Increment/decrement with mousewheel or up/down keys. {PH1}: ±100, Shift: ±10, {PH2}: ±0.1',
   /**
-   * @description Tooltip text that appears when hovering over the rendering button in the Styles Sidebar Pane of the Elements panel
+   * @description Tooltip text that appears when hovering over the rendering button in the Styles tab of the Elements panel.
    */
   toggleRenderingEmulations: 'Toggle common rendering emulations',
   /**
-   * @description Rendering emulation option for toggling the automatic dark mode
+   * @description Rendering emulation option for toggling the automatic dark mode.
    */
   automaticDarkMode: 'Automatic dark mode',
   /**
-   * @description Text displayed on layer separators in the styles sidebar pane.
+   * @description Text displayed on layer separators in the Styles tab of the Elements panel.
    */
   layer: 'Layer',
   /**
-   * @description Tooltip text for the link in the sidebar pane layer separators that reveals the layer in the layer tree view.
+   * @description Tooltip text for the link in the layer separators that reveals the layer in the layer tree view.
    */
   clickToRevealLayer: 'Click to reveal layer in layer tree',
   /**
@@ -141,7 +140,7 @@ const UIStrings = {
    */
   aiSuggestionAccepted: '{PH1} Suggestion accepted.',
   /**
-   * @description Title of the general at-rule section
+   * @description Title of the general at-rule section.
    */
   atRuleSection: 'Other @rules',
 } as const;

package/front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -15,7 +15,7 @@ import accessibilityTreeNodeStyles from './accessibilityTreeNode.css.js';
 
 const UIStrings = {
   /**
-   * @description Ignored node element text content in Accessibility Tree View of the Elements panel
+   * @description Ignored node element text content in the accessibility tree view of the Elements panel.
    */
   ignored: 'Ignored',
 } as const;

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -15,7 +15,7 @@ const UIStrings = {
   /**
    * @description Text for button that redirects to CSS property documentation.
    */
-  learnMore: 'Learn More',
+  learnMore: 'Learn more',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/elements/components/CSSVariableValueView.ts

@@ -11,18 +11,18 @@ import cssVariableValueViewStyles from './cssVariableValueView.css.js';
 
 const UIStrings = {
   /**
-   * @description Text for a link from custom property to its defining registration
+   * @description Text for a link from a custom property to its defining registration.
    */
   registeredPropertyLinkTitle: 'View registered property',
   /**
    * @description Error message for a property value that failed to parse because it had an incorrect type. The message
    * is shown in a popover when hovering the property value. The `type` placeholder will be rendered as an HTML element
-   * to apply some styling (color and monospace font)
+   * to apply some styling (color and monospace font).
    * @example {<color>} type
    */
   invalidPropertyValue: 'Invalid property value, expected type {type}',
   /**
-   * @description Text displayed in a tooltip shown when hovering over a var() CSS function in the Styles pane when the custom property in this function does not exist. The parameter is the name of the property.
+   * @description Text displayed in a tooltip shown when hovering over a var() CSS function in the Styles tab when the custom property in this function does not exist. The parameter is the name of the property.
    * @example {--my-custom-property-name} PH1
    */
   sIsNotDefined: '{PH1} is not defined',

package/front_end/panels/elements/components/ElementsBreadcrumbsUtils.ts

@@ -7,8 +7,8 @@ import type * as SDK from '../../../core/sdk/sdk.js';
 
 const UIStrings = {
   /**
-   * @description Text in Elements Breadcrumbs of the Elements panel. Indicates that a HTML element
-   * is a text node, meaning it contains text only and no other HTML elements. Should be translatd.
+   * @description Text in elements breadcrumbs of the Elements panel. Indicates that an HTML element
+   * is a text node, meaning it contains text only and no other HTML elements.
    */
   text: '(text)',
 } as const;

package/front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -13,7 +13,7 @@ import elementsTreeExpandButtonStyles from './elementsTreeExpandButton.css.js';
 
 const UIStrings = {
   /**
-   * @description Aria label for a button expanding collapsed subtree
+   * @description ARIA label for a button expanding a collapsed subtree.
    */
   expand: 'Expand',
 } as const;

package/front_end/panels/elements/elements-meta.ts

@@ -142,11 +142,11 @@ const UIStrings = {
    */
   selectAnElementInThePageTo: 'Select an element in the page to inspect it',
   /**
-   * @description Title/tooltip of an action in the elements panel to add a new style rule.
+   * @description Title/tooltip of an action in the Elements panel to add a new style rule.
    */
-  newStyleRule: 'New Style Rule',
+  newStyleRule: 'New style rule',
   /**
-   * @description Title/tooltip of an action in the elements panel to refresh the event listeners.
+   * @description Title/tooltip of an action in the Elements panel to refresh the event listeners.
    */
   refreshEventListeners: 'Refresh event listeners',
   /**
@@ -166,11 +166,11 @@ const UIStrings = {
    */
   htmlComments: 'HTML comments',
   /**
-   * @description Title of an option under the Elements category that can be invoked through the Command Menu
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu.
    */
   showHtmlComments: 'Show `HTML` comments',
   /**
-   * @description Title of an option under the Elements category that can be invoked through the Command Menu
+   * @description Title of an option under the Elements category that can be invoked through the Command Menu.
    */
   hideHtmlComments: 'Hide `HTML` comments',
   /**
@@ -187,12 +187,12 @@ const UIStrings = {
   detailedInspectTooltip: 'Detailed inspect tooltip',
   /**
    * @description Title of a setting under the Elements category in Settings. Turns on a mode where
-   * hovering over CSS properties in the Styles pane will display a popover with documentation.
+   * hovering over CSS properties in the Styles tab will display a popover with documentation.
    */
   CSSDocumentationTooltip: 'CSS documentation tooltip',
   /**
-   * @description A context menu item (command) in the Elements panel that copy the styles of
-   * the HTML element.
+   * @description A context menu item (command) in the Elements panel that copies the styles of
+   * an HTML element.
    */
   copyStyles: 'Copy styles',
   /**
@@ -201,20 +201,20 @@ const UIStrings = {
    */
   toggleA11yTree: 'Toggle accessibility tree',
   /**
-   * @description Title of a setting under the Elements category. Whether to show/hide hide
+   * @description Title of a setting under the Elements category. Whether to show or hide
    * the shadow DOM nodes of HTML elements that are built into the browser (e.g. the <input> element).
    */
   userAgentShadowDOM: 'User agent shadow `DOM`',
   /**
    * @description Command for showing the 'Computed' tool. Displays computed CSS styles in Elements sidebar.
    */
-  showComputedStyles: 'Show Computed Styles',
+  showComputedStyles: 'Show Computed styles',
   /**
    * @description Command for showing the 'Styles' tool. Displays CSS styles in Elements sidebar.
    */
   showStyles: 'Show Styles',
   /**
-   * @description Command for toggling the eye dropper when the color picker is open
+   * @description Command for toggling the eye dropper when the color picker is open.
    */
   toggleEyeDropper: 'Toggle eye dropper',
   /**
@@ -222,11 +222,11 @@ const UIStrings = {
    */
   cssAnimationsOnlyWhenAnimationsTabOpen: 'Show animation styles only when the Animations tab is open',
   /**
-   * @description Whether CSS rules that do not apply active styles in the Styles pane are collapsed by default.
+   * @description Whether CSS rules that do not apply active styles in the Styles tab are collapsed by default.
    */
   collapseNonContributingCSSRules: 'Collapse non-contributing CSS rules',
   /**
-   * @description Title of a setting in the Event Listeners widget.
+   * @description Title of a setting in the Event listeners tab.
    */
   frameworkListeners: 'Framework listeners',
 } as const;

package/front_end/panels/issues/AffectedCookiesView.ts

@@ -67,6 +67,7 @@ export class AffectedCookiesView extends AffectedResourcesView {
   #appendAffectedCookie(cookie: Protocol.Audits.AffectedCookie, hasAssociatedRequest: boolean): void {
     const element = document.createElement('tr');
     element.classList.add('affected-resource-cookie');
+    element.setAttribute('jslog', `${VisualLogging.tableRow('affected-cookie')}`);
     const name = document.createElement('td');
     if (hasAssociatedRequest) {
       const link = document.createElement('button');
@@ -121,6 +122,7 @@ export class AffectedRawCookieLinesView extends AffectedResourcesView {
     for (const cookie of cookieLinesWithRequestIndicator) {
       const row = document.createElement('tr');
       row.classList.add('affected-resource-directive');
+      row.setAttribute('jslog', `${VisualLogging.tableRow('affected-raw-cookie')}`);
       if (cookie.hasRequest) {
         const cookieLine = document.createElement('td');
         const link = document.createElement('button');

package/front_end/panels/issues/AffectedElementsView.ts

@@ -6,6 +6,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AffectedResourcesView} from './AffectedResourcesView.js';
 
@@ -34,6 +35,10 @@ export class AffectedElementsView extends AffectedResourcesView {
   async #appendAffectedElement(element: IssuesManager.Issue.AffectedElement): Promise<void> {
     const cellElement = await this.createElementCell(element, this.issue.getCategory());
     const rowElement = document.createElement('tr');
+    rowElement.setAttribute('jslog', `${VisualLogging.tableRow('affected-element')}`);
+    if (element.backendNodeId) {
+      rowElement.setAttribute('data-backend-node-id', String(element.backendNodeId));
+    }
     rowElement.appendChild(cellElement);
     this.affectedResources.appendChild(rowElement);
   }

package/front_end/panels/issues/IssueView.ts

@@ -8,7 +8,6 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
-import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -17,6 +16,7 @@ import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.j
 import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AffectedBlockedByResponseView} from './AffectedBlockedByResponseView.js';
 import {AffectedCookiesView, AffectedRawCookieLinesView} from './AffectedCookiesView.js';
@@ -35,7 +35,6 @@ import {AffectedSharedArrayBufferIssueDetailsView} from './AffectedSharedArrayBu
 import {AffectedSourcesView} from './AffectedSourcesView.js';
 import {AffectedTrackingSitesView} from './AffectedTrackingSitesView.js';
 import * as Components from './components/components.js';
-import type {HiddenIssuesMenuData} from './components/HideIssuesMenu.js';
 import {CorsIssueDetailsView} from './CorsIssueDetailsView.js';
 import {GenericIssueDetailsView} from './GenericIssueDetailsView.js';
 
@@ -95,6 +94,10 @@ class AffectedRequestsView extends AffectedResourcesView {
     for (const affectedRequest of affectedRequests) {
       const element = document.createElement('tr');
       element.classList.add('affected-resource-request');
+      element.setAttribute('jslog', `${VisualLogging.tableRow('affected-request')}`);
+      if (affectedRequest.requestId) {
+        element.setAttribute('data-network-request-id', affectedRequest.requestId);
+      }
       const category = this.issue.getCategory();
       const tab =
           issueTypeToNetworkHeaderMap.get(category) || NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
@@ -215,7 +218,7 @@ class AffectedMixedContentView extends AffectedResourcesView {
 }
 
 export class IssueView extends UI.TreeOutline.TreeElement {
-  #issue: AggregatedIssue;
+  #issue: IssuesManager.IssueAggregator.AggregatedIssue;
   #description: IssuesManager.MarkdownIssueDescription.IssueDescription;
   override toggleOnClick: boolean;
   affectedResources: UI.TreeOutline.TreeElement;
@@ -228,7 +231,8 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #hiddenIssuesMenu?: Components.HideIssuesMenu.HideIssuesMenu;
   #contentCreated = false;
 
-  constructor(issue: AggregatedIssue, description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
+  constructor(issue: IssuesManager.IssueAggregator.AggregatedIssue,
+              description: IssuesManager.MarkdownIssueDescription.IssueDescription) {
     super(undefined, undefined, Platform.StringUtilities.toKebabCase(issue.getCategory()));
     this.#issue = issue;
     this.#description = description;
@@ -272,7 +276,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
    * this IssueView was initialized with fits the new issue as well, i.e.
    * title and issue description will not be updated.
    */
-  setIssue(issue: AggregatedIssue): void {
+  setIssue(issue: IssuesManager.IssueAggregator.AggregatedIssue): void {
     if (this.#issue !== issue) {
       this.#needsUpdateOnExpand = true;
     }
@@ -392,7 +396,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     }
     this.listItemElement.classList.toggle('hidden-issue', this.#issue.isHidden());
     if (this.#hiddenIssuesMenu) {
-      const data: HiddenIssuesMenuData = {
+      const data: Components.HideIssuesMenu.HiddenIssuesMenuData = {
         menuItemLabel: this.#issue.isHidden() ? i18nString(UIStrings.unhideIssuesLikeThis) :
                                                 i18nString(UIStrings.hideIssuesLikeThis),
         menuItemAction: () => {
@@ -413,7 +417,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   }
 
   #createAffectedResources(): UI.TreeOutline.TreeElement {
-    const wrapper = new UI.TreeOutline.TreeElement();
+    const wrapper = new UI.TreeOutline.TreeElement(undefined, false, 'affected-resources');
     wrapper.setCollapsible(false);
     wrapper.setExpandable(true);
     wrapper.expand();
@@ -427,7 +431,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   }
 
   #createBody(): void {
-    const messageElement = new UI.TreeOutline.TreeElement();
+    const messageElement = new UI.TreeOutline.TreeElement(undefined, false, 'issue-description');
     messageElement.setCollapsible(false);
     messageElement.selectable = false;
     const markdownComponent = new MarkdownView.MarkdownView.MarkdownView();

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -215,34 +215,38 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: Docu
     // clang-format on
   };
 
+  const domNode = layer.nodeForSelfOrAncestor();
+
   // clang-format off
   Lit.render(
       html`
-    <div class="layer-details-container">
+    <div class="layer-details-container"
+         data-backend-node-id=${domNode ? domNode.backendNodeId() : nothing}
+         jslog=${VisualLogging.section('layer-details')}>
       <table>
         <tbody>
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detail-row')}>
             <td>${i18nString(UIStrings.size)}</td>
             <td>${i18nString(
               UIStrings.updateRectangleDimensions,
               {PH1: layer.width(), PH2: layer.height(), PH3: layer.offsetX(), PH4: layer.offsetY()})}</td>
           </tr>
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detail-row')}>
             <td>${i18nString(UIStrings.compositingReasons)}</td>
             <td>
               ${!compositingReasons.length ? 'n/a' :
                                        html`<ul>${compositingReasons.map(reason => html`<li>${reason}</li>`)}</ul>`}
             </td>
           </tr>
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detail-row')}>
             <td>${i18nString(UIStrings.memoryEstimate)}</td>
             <td>${i18n.ByteUtilities.bytesToString(layer.gpuMemoryUsage())}</td>
           </tr>
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detail-row')}>
             <td>${i18nString(UIStrings.paintCount)}</td>
             <td>${layer.paintCount()}</td>
           </tr>
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detail-row')}>
             <td>${i18nString(UIStrings.slowScrollRegions)}</td>
             <td>
               ${slowScrollRects.map((scrollRect, index) => html`
@@ -259,7 +263,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: Docu
                 </span>`)}
             </td>
           </tr>
-          <tr>
+          <tr jslog=${VisualLogging.tableRow('detail-row')}>
             <td>${i18nString(UIStrings.stickyPositionConstraint)}</td>
             <td>${renderStickyPositionConstraint(stickyPositionConstraint)}</td>
           </tr>