chrome-devtools-frontend 1.0.1682249 → 1.0.1684555

package/front_end/panels/console/ConsoleView.ts

@@ -58,7 +58,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as SettingUIRegistration from '../../ui/settings/settings.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {AiCodeCompletionSummaryToolbar} from '../common/common.js';
 
@@ -316,7 +316,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   private readonly progressToolbarItem: UI.Toolbar.ToolbarItem;
   private readonly groupSimilarSetting: Common.Settings.Setting<boolean>;
   private readonly showCorsErrorsSetting: Common.Settings.Setting<boolean>;
-  private readonly timestampsSetting: Common.Settings.Setting<unknown>;
+  private readonly timestampsSetting: Common.Settings.Setting<boolean>;
   private readonly consoleHistoryAutocompleteSetting: Common.Settings.Setting<boolean>;
   private selfXssWarningDisabledSetting: Common.Settings.Setting<boolean>;
   readonly pinPane: ConsolePinPane;
@@ -483,9 +483,10 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     const monitoringXHREnabledSetting =
         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.monitoringXHREnabledSettingDescriptor);
-    this.timestampsSetting = Common.Settings.Settings.instance().moduleSetting('console-timestamps-enabled');
-    this.consoleHistoryAutocompleteSetting =
-        Common.Settings.Settings.instance().moduleSetting('console-history-autocomplete');
+    this.timestampsSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.consoleTimestampsEnabledSettingDescriptor);
+    this.consoleHistoryAutocompleteSetting = Common.Settings.Settings.instance().resolve(
+        Settings.ConsoleSettings.consoleHistoryAutocompleteSettingDescriptor);
     this.selfXssWarningDisabledSetting = Common.Settings.Settings.instance().createSetting(
         'disable-self-xss-warning', false, Common.Settings.SettingStorageType.SYNCED);
 
@@ -501,29 +502,28 @@ export class ConsoleView extends UI.Widget.VBox implements
     settingsPane.append(
         SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.networkMessages), this.filter.networkMessagesSetting,
-            SettingUIRegistration.SettingUIRegistration.resolve(this.filter.networkMessagesSetting.descriptor()).title),
+            Settings.SettingUIRegistration.resolve(this.filter.networkMessagesSetting.descriptor()).title),
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.logXMLHttpRequests),
                                                     monitoringXHREnabledSetting),
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
                                                     i18nString(UIStrings.doNotClearLogOnPageReload)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(consoleEagerEvalSetting.descriptor()).title,
-            consoleEagerEvalSetting, i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
+            Settings.SettingUIRegistration.resolve(consoleEagerEvalSetting.descriptor()).title, consoleEagerEvalSetting,
+            i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.selectedContextOnly),
                                                     this.filter.filterByExecutionContextSetting,
                                                     i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(this.consoleHistoryAutocompleteSetting.descriptor())
-                .title,
+            Settings.SettingUIRegistration.resolve(this.consoleHistoryAutocompleteSetting.descriptor()).title,
             this.consoleHistoryAutocompleteSetting, i18nString(UIStrings.autocompleteFromHistory)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(this.groupSimilarSetting.descriptor()).title,
+            Settings.SettingUIRegistration.resolve(this.groupSimilarSetting.descriptor()).title,
             this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(userActivationEvalSetting.descriptor()).title,
+            Settings.SettingUIRegistration.resolve(userActivationEvalSetting.descriptor()).title,
             userActivationEvalSetting, i18nString(UIStrings.treatEvaluationAsUserActivation)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(this.showCorsErrorsSetting.descriptor()).title,
+            Settings.SettingUIRegistration.resolve(this.showCorsErrorsSetting.descriptor()).title,
             this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole)),
     );
 
@@ -1870,9 +1870,10 @@ export class ConsoleViewFilter {
     this.filterChanged = filterChangedCallback;
 
     this.messageLevelFiltersSetting = ConsoleViewFilter.levelFilterSetting();
-    this.networkMessagesSetting = Common.Settings.Settings.instance().moduleSetting('network-messages');
-    this.filterByExecutionContextSetting =
-        Common.Settings.Settings.instance().moduleSetting('selected-context-filter-enabled');
+    this.networkMessagesSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.networkMessagesSettingDescriptor);
+    this.filterByExecutionContextSetting = Common.Settings.Settings.instance().resolve(
+        Settings.ConsoleSettings.selectedContextFilterEnabledSettingDescriptor);
 
     this.messageLevelFiltersSetting.addChangeListener(this.onFilterChanged.bind(this));
     this.networkMessagesSetting.addChangeListener(this.onFilterChanged.bind(this));

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -58,6 +58,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../elements/elements.js';
 
@@ -1238,7 +1239,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return;
     }
 
-    if (Common.Settings.Settings.instance().moduleSetting('console-timestamps-enabled').get()) {
+    if (Common.Settings.Settings.instance()
+            .resolve(Settings.ConsoleSettings.consoleTimestampsEnabledSettingDescriptor)
+            .get()) {
       if (!this.timestampElement) {
         this.timestampElement = document.createElement('span');
         this.timestampElement.classList.add('console-timestamp');

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

@@ -270,13 +270,9 @@ UI.ActionRegistration.registerActionExtension({
   },
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.networkMessagesSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.networkMessages),
-  settingName: 'network-messages',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,
@@ -289,13 +285,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.selectedContextFilterEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.selectedContextOnly),
-  settingName: 'selected-context-filter-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
   options: [
     {
       value: true,
@@ -308,13 +300,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleTimestampsEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.timestamps),
-  settingName: 'console-timestamps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
   options: [
     {
       value: true,
@@ -327,12 +315,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleHistoryAutocompleteSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
   title: i18nLazyString(UIStrings.autocompleteFromHistory),
-  settingName: 'console-history-autocomplete',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,

package/front_end/panels/elements/ElementIssueUtils.ts

@@ -89,8 +89,12 @@ export interface ElementIssueDetails {
 export function getElementIssueDetails(issue: IssuesManager.Issue.Issue): ElementIssueDetails|undefined {
   if (issue instanceof IssuesManager.GenericIssue.GenericIssue) {
     const issueDetails = issue.details();
+    const tooltip = getTooltipFromGenericIssue(issueDetails.errorType);
+    if (!tooltip) {
+      return undefined;
+    }
     return {
-      tooltip: getTooltipFromGenericIssue(issueDetails.errorType),
+      tooltip,
       nodeId: issueDetails.violatingNodeId,
       attribute: issueDetails.violatingNodeAttribute,
     };
@@ -103,8 +107,12 @@ export function getElementIssueDetails(issue: IssuesManager.Issue.Issue): Elemen
         nodeId: issueDetails.nodeId,
       };
     }
+    const tooltip = getTooltipFromElementAccessibilityIssue(issueDetails.elementAccessibilityIssueReason);
+    if (!tooltip) {
+      return undefined;
+    }
     return {
-      tooltip: getTooltipFromElementAccessibilityIssue(issueDetails.elementAccessibilityIssueReason),
+      tooltip,
       nodeId: issueDetails.nodeId,
     };
   }

package/front_end/panels/elements/ElementsPanel.ts

@@ -44,6 +44,7 @@ import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingsUI from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AccessibilityTreeView} from './AccessibilityTreeView.js';
@@ -227,7 +228,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return this.#domTreeWidget.getTreeOutlineForTesting();
   }
 
-  constructor(targetManager?: SDK.TargetManager.TargetManager, settings?: Common.Settings.Settings) {
+  constructor(
+      targetManager?: SDK.TargetManager.TargetManager,
+      settings?: Common.Settings.Settings,
+  ) {
     super('elements');
     this.#targetManager = targetManager ?? SDK.TargetManager.TargetManager.instance();
     this.#settings = settings ?? Common.Settings.Settings.instance();
@@ -294,7 +298,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
-    this.#settings.moduleSetting('sidebar-position').addChangeListener(this.updateSidebarPosition.bind(this));
+    this.#settings.resolve(SettingsUI.MainSettings.sidebarPositionSettingDescriptor)
+        .addChangeListener(this.updateSidebarPosition.bind(this));
     this.updateSidebarPosition();
 
     this.cssStyleTrackerByCSSModel = new Map();
@@ -1180,7 +1185,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }  // We can't reparent extension iframes.
 
-    const position = this.#settings.moduleSetting('sidebar-position').get();
+    const position = this.#settings.resolve(SettingsUI.MainSettings.sidebarPositionSettingDescriptor).get();
     let splitMode = SplitMode.HORIZONTAL;
     if (position === 'right' || (position === 'auto' && this.splitWidget.element.offsetWidth > 680)) {
       splitMode = SplitMode.VERTICAL;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -49,7 +49,7 @@ import * as AIAssistance from '../../models/ai_assistance/ai_assistance.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Elements from '../../models/elements/elements.js';
-import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -73,7 +73,7 @@ import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutlin
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
-const {html, nothing, render, Directives: {ref, repeat}} = Lit;
+const {html, nothing, render, Directives: {classMap, ref, repeat, until}} = Lit;
 const {animateOn} = UI.UIUtils;
 
 const UIStrings = {
@@ -268,6 +268,7 @@ export interface ViewInput {
   updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null;
   onHighlightSearchResults: () => void;
   onExpand: () => void;
+  issues?: IssuesManager.Issue.Issue[];
 
   containerAdornerActive: boolean;
   flexAdornerActive: boolean;
@@ -379,10 +380,12 @@ function renderTitle(
     updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
     onUpdateSearchHighlight: () => void,
     onExpand: () => void,
+    issues?: IssuesManager.Issue.Issue[],
     ): Lit.LitTemplate {
   switch (node.nodeType()) {
     case Node.ATTRIBUTE_NODE:
-      return renderAttribute({name: node.name as string, value: node.value as string}, updateRecord, true, node);
+      return renderAttribute({name: node.name as string, value: node.value as string}, updateRecord, true, node,
+                             issues);
 
     case Node.ELEMENT_NODE: {
       if (node.pseudoType()) {
@@ -396,10 +399,10 @@ function renderTitle(
 
       const tagName = node.nodeNameInCorrectCase();
       if (isClosingTag) {
-        return renderTag(node, tagName, true, expanded, true, updateRecord);
+        return renderTag(node, tagName, true, expanded, true, updateRecord, issues);
       }
 
-      const openingTag = renderTag(node, tagName, false, expanded, false, updateRecord);
+      const openingTag = renderTag(node, tagName, false, expanded, false, updateRecord, issues);
 
       if (isExpandable) {
         if (!expanded) {
@@ -407,7 +410,7 @@ function renderTitle(
               {clickHandler: onExpand} as
               ElementsComponents.ElementsTreeExpandButton
                   .ElementsTreeExpandButtonData}></devtools-elements-tree-expand-button><span style="font-size: 0;"
-                  >…</span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+                  >…</span>\u200B${renderTag(node, tagName, true, expanded, false, updateRecord, issues)}`;
         }
         return openingTag;
       }
@@ -429,14 +432,13 @@ function renderTitle(
 
         return html`${openingTag}<span class="webkit-html-text-node" jslog=${
             VisualLogging.value('text-node').track({change: true, dblclick: true})} ${
-            animateOn(
-                Boolean((updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified())),
-                DOM_UPDATE_ANIMATION_CLASS_NAME)} ${renderTextNode}></span>\u200B${
-            renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+            animateOn(Boolean((updateRecord?.hasChangedChildren() || updateRecord?.isCharDataModified())),
+                      DOM_UPDATE_ANIMATION_CLASS_NAME)} ${renderTextNode}></span>\u200B${
+            renderTag(node, tagName, true, expanded, false, updateRecord, issues)}`;
       }
 
       if (isXMLMimeType || !ForbiddenClosingTagElements.has(tagName)) {
-        return html`${openingTag}${renderTag(node, tagName, true, expanded, false, updateRecord)}`;
+        return html`${openingTag}${renderTag(node, tagName, true, expanded, false, updateRecord, issues)}`;
       }
       return openingTag;
     }
@@ -609,9 +611,9 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
 const relationPromisesCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, Promise<string|Lit.LitTemplate>>>();
 const relatedElementsCache = new WeakMap<SDK.DOMModel.DOMNode, Map<string, SDK.DOMModel.DOMNode|null>>();
 
-function renderAttribute(
-    attr: {name: string, value?: string}, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
-    isDiff: boolean, node: SDK.DOMModel.DOMNode): Lit.LitTemplate {
+function renderAttribute(attr: {name: string, value?: string},
+                         updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null, isDiff: boolean,
+                         node: SDK.DOMModel.DOMNode, issues?: IssuesManager.Issue.Issue[]): Lit.LitTemplate {
   const name = attr.name;
   const value = attr.value || '';
   const forceValue = isDiff;
@@ -716,9 +718,15 @@ function renderAttribute(
     dblclick: true,
   });
 
-  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class="webkit-html-attribute-name"
+  const hasAttributeIssues = Boolean(issues?.some(issue => getElementIssueDetails(issue)?.attribute === name));
+  const attributeNameClasses = {
+    'webkit-html-attribute-name': true,
+    'violating-element': hasAttributeIssues,
+  };
+
+  return html`<span class="webkit-html-attribute" jslog=${jslog}><span class=${classMap(attributeNameClasses)}
       ${animateOn(Boolean(updateRecord?.isAttributeModified(name) && !hasText), DOM_UPDATE_ANIMATION_CLASS_NAME)}>${
-      linkifyName && relationPromise ? Lit.Directives.until(relationPromise, name) : name}</span>${
+      linkifyName && relationPromise ? until(relationPromise, name) : name}</span>${
       hasText ?
           html`=\u200B"<span class="webkit-html-attribute-value" ${
               animateOn(Boolean(updateRecord?.isAttributeModified(name) && hasText),
@@ -726,16 +734,15 @@ function renderAttribute(
                         ${valueType === ValueType.SRC ? renderLinkifiedValue(value, node) : nothing}
                         ${
               valueType === ValueType.SRCSET ? renderLinkifiedSrcset(Common.Srcset.parseSrcset(value), node) : nothing}
-                        ${linkifyValue && relationPromise ? Lit.Directives.until(relationPromise, value) : nothing}
+                        ${linkifyValue && relationPromise ? until(relationPromise, value) : nothing}
                 </span>"` :
           nothing}</span>`;
 }
 
-function renderTag(
-    node: SDK.DOMModel.DOMNode, tagName: string, isClosingTag: boolean, expanded: boolean,
-    isDistinctTreeElement: boolean,
-    updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null): Lit.LitTemplate {
-  const classMap = {
+function renderTag(node: SDK.DOMModel.DOMNode, tagName: string, isClosingTag: boolean, expanded: boolean,
+                   isDistinctTreeElement: boolean, updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null,
+                   issues?: IssuesManager.Issue.Issue[]): Lit.LitTemplate {
+  const tagClasses = {
     'webkit-html-tag': true,
     close: isClosingTag && isDistinctTreeElement,
   };
@@ -757,14 +764,22 @@ function renderTag(
   });
 
   const tagNameClass = isClosingTag ? 'webkit-html-close-tag-name' : 'webkit-html-tag-name';
+  const hasTagIssues = !isClosingTag && Boolean(issues?.some(issue => {
+    const details = getElementIssueDetails(issue);
+    return Boolean(details && !details.attribute);
+  }));
+  const tagNameClasses = {
+    [tagNameClass]: true,
+    'violating-element': hasTagIssues,
+  };
   const tagString = (isClosingTag ? '/' : '') + tagName;
   const jslog = !isClosingTag ? VisualLogging.value('tag-name').track({change: true, dblclick: true}) : '';
 
   return html`<span
-      class=${Lit.Directives.classMap(classMap)} ${setAriaLabel}
-      >&lt;<span class=${tagNameClass} jslog=${jslog || nothing} ${
+      class=${classMap(tagClasses)} ${setAriaLabel}
+      >&lt;<span class=${classMap(tagNameClasses)} jslog=${jslog || nothing} ${
       animateOn(hasUpdates, DOM_UPDATE_ANIMATION_CLASS_NAME)}>${tagString}</span>${
-      attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node)}`)}&gt;</span>\u200B`;
+      attributes.map(attr => html` ${renderAttribute(attr, updateRecord, false, node, issues)}`)}&gt;</span>\u200B`;
 }
 
 function maybeRenderAdAdorner(input: ViewInput): Lit.TemplateResult|typeof nothing {
@@ -848,11 +863,12 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.updateRecord,
     input.onHighlightSearchResults,
     input.onExpand,
+    input.issues,
   )}</span>` : nothing}
       ${input.isHovered || input.isSelected ? html`
         <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
       ` : nothing}
-      <div class=${Lit.Directives.classMap(gutterContainerClasses)}
+      <div class=${classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
            @click=${input.onGutterClick}>
         <devtools-icon name="dots-horizontal"></devtools-icon>
@@ -1078,6 +1094,9 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
 type View = typeof DEFAULT_VIEW;
 
 export class ElementsTreeWidget extends UI.Widget.Widget {
+  static override readonly INJECT = [IssuesManager.DOMIssuesManager.DOMIssuesManager] as const;
+  #domIssuesManager?: IssuesManager.DOMIssuesManager.DOMIssuesManager;
+
   #node!: SDK.DOMModel.DOMNode;
   isClosingTag = false;
   #expanded = false;
@@ -1104,7 +1123,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   revealInTopLayer?: (node: SDK.DOMModel.DOMNode) => void;
   showContextMenu?: (event: Event) => void;
   populateTreeElement?: () => Promise<void>;
-  updateNodeElementToIssue?: (nodeElement: Element, issues: IssuesManager.Issue.Issue[]) => void;
   performCopyOrCut?: (isCut: boolean, node: SDK.DOMModel.DOMNode, isElement?: boolean) => void;
   duplicateNode?: (node: SDK.DOMModel.DOMNode) => void;
   pasteNode?: (node: SDK.DOMModel.DOMNode) => void;
@@ -1133,8 +1151,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
   #editorState: CodeMirror.EditorState|null = null;
   #editorWidth: number|null = null;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
-  #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
-  #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
   #highlights: Range[] = [];
 
   #adornersThrottler = new Common.Throttler.Throttler(100);
@@ -1205,8 +1221,28 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     };
   }
 
-  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+  get issues(): IssuesManager.Issue.Issue[] {
+    // The widget is currently created for non-widget ElementsTreeElement so
+    // the domIssuesManager can be empty, relying on the manual resolution.
+    if (!this.#domIssuesManager) {
+      const universe = UI.Widget.lookupUniverseForElement(this.contentElement);
+      if (universe) {
+        this.#domIssuesManager = universe.get(IssuesManager.DOMIssuesManager.DOMIssuesManager);
+        if (this.node?.id) {
+          this.#domIssuesManager.subscribeByNodeId(this.node.id, this.#onDOMIssueUpdated);
+        }
+      }
+    }
+    return this.#domIssuesManager?.issuesForNode(this.node) ?? [];
+  }
+
+  constructor(
+      element?: HTMLElement,
+      [domIssuesManager]: UI.Widget.WidgetDependencies<typeof ElementsTreeWidget>|[undefined] = [undefined],
+      view: View = DEFAULT_VIEW,
+  ) {
     super(element);
+    this.#domIssuesManager = domIssuesManager;
     this.#view = view;
 
     this.searchQuery = null;
@@ -1382,6 +1418,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       },
       editorState: this.#editorState,
       editorWidth: this.#editorWidth,
+      issues: this.issues,
     },
                output, this.contentElement);
 
@@ -1560,121 +1597,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  addIssue(newIssue: IssuesManager.Issue.Issue): void {
-    if (this.#elementIssues.has(newIssue.primaryKey())) {
-      return;
-    }
-
-    this.#elementIssues.set(newIssue.primaryKey(), newIssue);
-    this.#applyIssueStyleAndTooltip(newIssue);
-  }
-
-  #applyIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
-    const elementIssueDetails = getElementIssueDetails(issue);
-    if (!elementIssueDetails) {
-      return;
-    }
-
-    if (elementIssueDetails.attribute) {
-      this.#highlightViolatingAttr(elementIssueDetails.attribute, issue);
-    } else {
-      this.#highlightTagAsViolating(issue);
-    }
-  }
-
-  get issuesByNodeElement(): Map<Element, IssuesManager.Issue.Issue[]> {
-    return this.#nodeElementToIssue;
-  }
-
-  #highlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): void {
-    const tag = this.contentElement.querySelectorAll('.webkit-html-tag')[0];
-    const attributes = tag.getElementsByClassName('webkit-html-attribute');
-    for (const attribute of attributes) {
-      if (attribute.getElementsByClassName('webkit-html-attribute-name')[0].textContent === name) {
-        const attributeElement = attribute.getElementsByClassName('webkit-html-attribute-name')[0];
-        attributeElement.classList.add('violating-element');
-        this.#recordAndNotifyIssue(attributeElement, issue);
-      }
-    }
-  }
-
-  #highlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
-    const tagElement = this.contentElement.querySelectorAll('.webkit-html-tag-name')[0];
-    tagElement.classList.add('violating-element');
-    this.#recordAndNotifyIssue(tagElement, issue);
-  }
-
-  #recordAndNotifyIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
-    let issues = this.#nodeElementToIssue.get(nodeElement);
-    if (!issues) {
-      issues = [];
-      this.#nodeElementToIssue.set(nodeElement, issues);
-    }
-    issues.push(issue);
-    this.updateNodeElementToIssue?.(nodeElement, issues);
-  }
-
-  removeIssue(issue: IssuesManager.Issue.Issue): void {
-    if (!this.#elementIssues.has(issue.primaryKey())) {
-      return;
-    }
-
-    this.#removeIssueStyleAndTooltip(issue);
-    this.#elementIssues.delete(issue.primaryKey());
-  }
-
-  #removeIssueStyleAndTooltip(issue: IssuesManager.Issue.Issue): void {
-    const elementIssueDetails = getElementIssueDetails(issue);
-    if (!elementIssueDetails) {
-      return;
-    }
-
-    if (elementIssueDetails.attribute) {
-      this.#undoHighlightViolatingAttr(elementIssueDetails.attribute, issue);
-    } else {
-      this.#undoHighlightTagAsViolating(issue);
-    }
-  }
-
-  #undoHighlightViolatingAttr(name: string, issue: IssuesManager.Issue.Issue): void {
-    const violatingAttributes = this.contentElement.querySelectorAll('.webkit-html-attribute-name.violating-element');
-    for (const attributeElement of violatingAttributes) {
-      if (attributeElement.textContent === name) {
-        this.#removeFromNodeElementToIssue(attributeElement, issue);
-        if (!this.#nodeElementToIssue.has(attributeElement)) {
-          attributeElement.classList.remove('violating-element');
-        }
-      }
-    }
-  }
-
-  #undoHighlightTagAsViolating(issue: IssuesManager.Issue.Issue): void {
-    const tagElement = this.contentElement.querySelectorAll('.webkit-html-tag-name')[0];
-    if (!tagElement) {
-      return;
-    }
-
-    this.#removeFromNodeElementToIssue(tagElement, issue);
-    if (!this.#nodeElementToIssue.has(tagElement)) {
-      tagElement.classList.remove('violating-element');
-    }
-  }
-
-  #removeFromNodeElementToIssue(nodeElement: Element, issue: IssuesManager.Issue.Issue): void {
-    let issues = this.#nodeElementToIssue.get(nodeElement);
-    if (!issues) {
-      return;
-    }
-
-    issues = issues.filter(i => i !== issue);
-    if (issues.length === 0) {
-      this.#nodeElementToIssue.delete(nodeElement);
-    } else {
-      this.#nodeElementToIssue.set(nodeElement, issues);
-    }
-    this.updateNodeElementToIssue?.(nodeElement, issues);
-  }
-
   expandedChildrenLimit(): number {
     return this.#expandedChildrenLimit;
   }
@@ -1703,6 +1625,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
                                  this.#onPersistentGridOverlayStateChanged, this);
       this.node.addEventListener(SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,
                                  this.#onPersistentScrollSnapOverlayStateChanged, this);
+      if (this.#domIssuesManager && this.node.id) {
+        this.#domIssuesManager.subscribeByNodeId(this.node.id, this.#onDOMIssueUpdated);
+      }
     }
   }
 
@@ -1771,6 +1696,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
       indent: 0,
       editorState: null,
       editorWidth: null,
+      issues: [],
     },
                {}, this.contentElement);
   }
@@ -1794,8 +1720,15 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
                                   this.#onPersistentGridOverlayStateChanged, this);
     this.node.removeEventListener(SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED,
                                   this.#onPersistentScrollSnapOverlayStateChanged, this);
+    if (this.#domIssuesManager && this.node.id) {
+      this.#domIssuesManager.unsubscribeByNodeId(this.node.id, this.#onDOMIssueUpdated);
+    }
   }
 
+  #onDOMIssueUpdated = (): void => {
+    this.performUpdate();
+  };
+
   #onScrollableFlagUpdated(): void {
     void this.#updateAdorners();
   }
@@ -2561,11 +2494,6 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
     this.updateDecorations();
 
-    // If there is an issue with this node, make sure to update it.
-    for (const issue of this.#elementIssues.values()) {
-      this.#applyIssueStyleAndTooltip(issue);
-    }
-
     this.#highlightSearchResults();
   }
 
@@ -2859,7 +2787,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     };
   }
 
-  constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
+  constructor(
+      node: SDK.DOMModel.DOMNode,
+      isClosingTag?: boolean,
+  ) {
     super();
     this.nodeInternal = node;
     this.#isClosingTag = Boolean(isClosingTag);
@@ -2944,15 +2875,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   copyStyles(): Promise<void> {
     return this.widget.copyStyles();
   }
-  addIssue(issue: IssuesManager.Issue.Issue): void {
-    this.widget.addIssue(issue);
-  }
-  get issuesByNodeElement(): Map<Element, IssuesManager.Issue.Issue[]> {
-    return this.widget.issuesByNodeElement;
-  }
-  removeIssue(issue: IssuesManager.Issue.Issue): void {
-    this.widget.removeIssue(issue);
-  }
   setInClipboard(inClipboard: boolean): void {
     this.widget.setInClipboard(inClipboard);
     if (this.listItemElement) {
@@ -3036,7 +2958,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.widget.revealInTopLayer = node => outline.revealInTopLayer(node);
       this.widget.showContextMenu = event => void outline.showContextMenu(this, event);
       this.widget.populateTreeElement = async () => await outline.populateTreeElement(this);
-      this.widget.updateNodeElementToIssue = (el, issues) => outline.updateNodeElementToIssue(el, issues);
       this.widget.performCopyOrCut = (isCut, node, isElement) => outline.performCopyOrCut(isCut, node, isElement);
       this.widget.duplicateNode = node => outline.duplicateNode(node);
       this.widget.pasteNode = node => outline.pasteNode(node);