Put the jslog passed to Widget onto its contentElement.

bmeurer · Devtools-frontend LUCI CQ · commit 9d7493e605cf · 2025-08-07T00:40:27.000-07:00
In case `useShadowDom` isn't set to `true`, the `contentElement` property of the `Widget` is set to `element` anyways, and then it doesn't matter. In the presence of a shadow DOM however, we do actually want to instrument the root element inside the shadow DOM (rather than the shadow host). Bug: 407750483, 301364727 Change-Id: I8a2cade7bd2e7cc4475a0f87480d3eb42ae63a32 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6822156 Commit-Queue: Benedikt Meurer <bmeurer@chromium.org> Reviewed-by: Danil Somsikov <dsv@chromium.org> Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
diff --git a/front_end/panels/application/AppManifestView.ts b/front_end/panels/application/AppManifestView.ts
@@ -486,11 +486,13 @@ export class AppManifestView extends Common.ObjectWrapper.eventMixin<EventTypes,
   constructor(
       emptyView: UI.EmptyWidget.EmptyWidget, reportView: UI.ReportView.ReportView,
       throttler: Common.Throttler.Throttler) {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.pane('manifest')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(appManifestViewStyles);
 
     this.contentElement.classList.add('manifest-container');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('manifest')}`);
 
     this.emptyView = emptyView;
     this.emptyView.link = 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString;
diff --git a/front_end/panels/application/ServiceWorkersView.ts b/front_end/panels/application/ServiceWorkersView.ts
@@ -197,14 +197,16 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
       Map<SDK.ServiceWorkerManager.ServiceWorkerManager, Common.EventTarget.EventDescriptor[]>;
 
   constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.pane('service-workers')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(serviceWorkersViewStyles);
 
     // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.currentWorkersView = new UI.ReportView.ReportView(i18n.i18n.lockedString('Service workers'));
     this.currentWorkersView.setBodyScrollable(false);
     this.contentElement.classList.add('service-worker-list');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('service-workers')}`);
     this.currentWorkersView.show(this.contentElement);
     this.currentWorkersView.element.classList.add('service-workers-this-origin');
     this.currentWorkersView.element.setAttribute('jslog', `${VisualLogging.section('this-origin')}`);
diff --git a/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts b/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts
@@ -80,12 +80,14 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
   #hitBreakpoint?: any;
 
   private constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.section('source.xhr-breakpoints')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(xhrBreakpointsSidebarPaneStyles);
 
     this.#breakpoints = new UI.ListModel.ListModel();
     this.#list = new UI.ListControl.ListControl(this.#breakpoints, this, UI.ListControl.ListMode.NonViewport);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('source.xhr-breakpoints')}`);
     this.contentElement.appendChild(this.#list.element);
     this.#list.element.classList.add('breakpoint-list', 'hidden');
     UI.ARIAUtils.markAsList(this.#list.element);
diff --git a/front_end/panels/console/ConsoleSidebar.ts b/front_end/panels/console/ConsoleSidebar.ts
@@ -59,15 +59,17 @@ export class ConsoleSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly treeElements: FilterTreeElement[];
 
   constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.setMinimumSize(125, 0);
 
     this.tree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
     this.tree.addEventListener(UI.TreeOutline.Events.ElementSelected, this.selectionChanged.bind(this));
     this.tree.registerRequiredCSS(consoleSidebarStyles);
     this.tree.hideOverflow();
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('sidebar').track({resize: true})}`);
     this.contentElement.appendChild(this.tree.element);
     this.selectedTreeElement = null;
     this.treeElements = [];
diff --git a/front_end/panels/elements/ClassesPaneWidget.ts b/front_end/panels/elements/ClassesPaneWidget.ts
@@ -47,10 +47,12 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
   private previousTarget: SDK.DOMModel.DOMNode|null;
 
   constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.pane('elements-classes')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(classesPaneWidgetStyles);
     this.contentElement.className = 'styles-element-classes-pane';
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('elements-classes')}`);
     const container = this.contentElement.createChild('div', 'title-container');
     this.input = container.createChild('div', 'new-class-input monospace');
     this.setDefaultFocusedElement(this.input);
diff --git a/front_end/panels/elements/LayersWidget.ts b/front_end/panels/elements/LayersWidget.ts
@@ -35,11 +35,13 @@ export class LayersWidget extends UI.Widget.Widget {
   private layerTreeComponent = new TreeOutline.TreeOutline.TreeOutline<string>();
 
   constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.pane('css-layers')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(layersWidgetStyles);
 
     this.contentElement.className = 'styles-layers-pane';
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('css-layers')}`);
     UI.UIUtils.createTextChild(this.contentElement.createChild('div'), i18nString(UIStrings.cssLayersTitle));
 
     this.contentElement.appendChild(this.layerTreeComponent);
diff --git a/front_end/panels/emulation/MediaQueryInspector.ts b/front_end/panels/emulation/MediaQueryInspector.ts
@@ -37,10 +37,12 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
   constructor(
       getWidthCallback: () => number, setWidthCallback: (arg0: number) => void,
       mediaThrottler: Common.Throttler.Throttler) {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.mediaInspectorView().track({click: true})}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(mediaQueryInspectorStyles);
     this.contentElement.classList.add('media-inspector-view');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.mediaInspectorView().track({click: true})}`);
     this.contentElement.addEventListener('click', this.onMediaQueryClicked.bind(this), false);
     this.contentElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
     this.mediaThrottler = mediaThrottler;
diff --git a/front_end/panels/search/SearchView.ts b/front_end/panels/search/SearchView.ts
@@ -156,7 +156,10 @@ export class SearchView extends UI.Widget.VBox {
   #emptyStartView: UI.EmptyWidget.EmptyWidget;
 
   constructor(settingKey: string, throttler: Common.Throttler.Throttler) {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.setMinimumSize(0, 40);
     this.registerRequiredCSS(searchViewStyles);
 
@@ -175,8 +178,6 @@ export class SearchView extends UI.Widget.VBox {
     this.visiblePane = null;
     this.#throttler = throttler;
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.panel('search').track({resize: true})}`);
-
     this.contentElement.classList.add('search-view');
     this.contentElement.addEventListener('keydown', event => {
       this.onKeyDownOnPanel((event));
diff --git a/front_end/panels/sources/CallStackSidebarPane.ts b/front_end/panels/sources/CallStackSidebarPane.ts
@@ -110,13 +110,13 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
 
   private constructor() {
     super({
+      jslog: `${VisualLogging.section('sources.callstack')}`,
       title: i18nString(UIStrings.callStack),
       viewId: 'sources.callstack',
       useShadowDom: true,
     });
     this.registerRequiredCSS(callStackSidebarPaneStyles);
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.callstack')}`);
     ({element: this.ignoreListMessageElement, checkbox: this.ignoreListCheckboxElement} =
          this.createIgnoreListMessageElementAndCheckbox());
     this.contentElement.appendChild(this.ignoreListMessageElement);
diff --git a/front_end/panels/sources/NavigatorView.ts b/front_end/panels/sources/NavigatorView.ts
@@ -212,7 +212,10 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private groupByDomain?: boolean;
   private groupByFolder?: boolean;
   constructor(jslogContext: string, enableAuthoredGrouping?: boolean) {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.pane(jslogContext).track({resize: true})}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(navigatorViewStyles);
 
     this.placeholder = null;
@@ -222,7 +225,6 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     this.scriptsTree.hideOverflow();
     this.scriptsTree.setComparator(NavigatorView.treeElementsCompare);
     this.scriptsTree.setFocusable(false);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane(jslogContext).track({resize: true})}`);
     this.contentElement.appendChild(this.scriptsTree.element);
     this.setDefaultFocusedElement(this.scriptsTree.element);
 
diff --git a/front_end/panels/sources/ScopeChainSidebarPane.ts b/front_end/panels/sources/ScopeChainSidebarPane.ts
@@ -76,10 +76,12 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
   #scopeChainModel: SourceMapScopes.ScopeChainModel.ScopeChainModel|null = null;
 
   private constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.section('sources.scope-chain')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(scopeChainSidebarPaneStyles);
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.scope-chain')}`);
     this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline();
     this.treeOutline.registerRequiredCSS(scopeChainSidebarPaneStyles);
     this.treeOutline.hideOverflow();
diff --git a/front_end/panels/sources/ThreadsSidebarPane.ts b/front_end/panels/sources/ThreadsSidebarPane.ts
@@ -29,10 +29,12 @@ export class ThreadsSidebarPane extends UI.Widget.VBox implements
   private selectedModel: SDK.DebuggerModel.DebuggerModel|null;
 
   constructor() {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.section('sources.threads')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(threadsSidebarPaneStyles);
 
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.threads')}`);
     this.items = new UI.ListModel.ListModel();
     this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);
     const currentTarget = UI.Context.Context.instance().flavor(SDK.Target.Target);
diff --git a/front_end/panels/timeline/StatusDialog.ts b/front_end/panels/timeline/StatusDialog.ts
@@ -68,10 +68,12 @@ export class StatusDialog extends UI.Widget.VBox {
         buttonText?: string,
       },
       onButtonClickCallback: () => (Promise<void>| void)) {
-    super({useShadowDom: true});
+    super({
+      jslog: `${VisualLogging.dialog('timeline-status').track({resize: true})}`,
+      useShadowDom: true,
+    });
 
     this.contentElement.classList.add('timeline-status-dialog');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.dialog('timeline-status').track({resize: true})}`);
 
     const statusLine = this.contentElement.createChild('div', 'status-dialog-line status');
     statusLine.createChild('div', 'label').textContent = i18nString(UIStrings.status);
diff --git a/front_end/ui/legacy/GlassPane.ts b/front_end/ui/legacy/GlassPane.ts
@@ -8,7 +8,7 @@ import {deepElementFromEvent, measuredScrollbarWidth} from './UIUtils.js';
 import {Widget} from './Widget.js';
 
 export class GlassPane {
-  private readonly widgetInternal = new Widget({useShadowDom: true});
+  private readonly widgetInternal;
 
   element: typeof Widget.prototype.element;
   contentElement: typeof Widget.prototype.contentElement;
@@ -25,12 +25,10 @@ export class GlassPane {
   #ignoreLeftMargin = false;
 
   constructor(jslog?: string) {
+    this.widgetInternal = new Widget({jslog, useShadowDom: true});
     this.widgetInternal.markAsRoot();
     this.element = this.widgetInternal.element;
     this.contentElement = this.widgetInternal.contentElement;
-    if (jslog) {
-      this.contentElement.setAttribute('jslog', jslog);
-    }
 
     this.registerRequiredCSS(glassPaneStyles);
     this.setPointerEventsBehavior(PointerEventsBehavior.PIERCE_GLASS_PANE);
diff --git a/front_end/ui/legacy/Widget.test.ts b/front_end/ui/legacy/Widget.test.ts
@@ -58,6 +58,41 @@ describe('Widget', () => {
     assert.throws(() => div.removeChildren(), /Attempt to modify widget with native DOM method `removeChildren`/);
   });
 
+  describe('constructor', () => {
+    it('doesn\'t create a shadow DOM if `useShadowDom` is set to `false`', () => {
+      const widget = new Widget({useShadowDom: false});
+
+      assert.isNull(widget.element.shadowRoot);
+      assert.strictEqual(widget.element, widget.contentElement);
+    });
+
+    it('doesn\'t create a shadow DOM if `useShadowDom` is unspecified', () => {
+      const widget = new Widget();
+
+      assert.isNull(widget.element.shadowRoot);
+      assert.strictEqual(widget.element, widget.contentElement);
+    });
+
+    it('correctly sets the `jslog` attribute of the `contentElement`', () => {
+      const widget = new Widget({jslog: 'Panel; context: foo'});
+
+      assert.strictEqual(
+          widget.contentElement.getAttribute('jslog'),
+          'Panel; context: foo',
+      );
+    });
+
+    it('correctly sets the `jslog` attribute of the `contentElement` in the presence of Shadow DOM', () => {
+      const widget = new Widget({jslog: 'Section; context: bar', useShadowDom: true});
+
+      assert.isNull(widget.element.getAttribute('jslog'));
+      assert.strictEqual(
+          widget.contentElement.getAttribute('jslog'),
+          'Section; context: bar',
+      );
+    });
+  });
+
   describe('detach', () => {
     it('cancels pending updates', async () => {
       const widget = new Widget();
diff --git a/front_end/ui/legacy/Widget.ts b/front_end/ui/legacy/Widget.ts
@@ -314,9 +314,6 @@ export class Widget {
       }
     }
     this.#shadowRoot = this.element.shadowRoot;
-    if (options?.jslog) {
-      this.element.setAttribute('jslog', options.jslog);
-    }
     if (options?.useShadowDom && !this.#shadowRoot) {
       this.element.classList.add('vbox');
       this.element.classList.add('flex-auto');
@@ -328,6 +325,9 @@ export class Widget {
     } else {
       this.contentElement = this.element;
     }
+    if (options?.jslog) {
+      this.contentElement.setAttribute('jslog', options.jslog);
+    }
     this.contentElement.classList.add('widget');
     widgetMap.set(this.element, this);
   }
