Load WebCustomData lazily

Fixed: 418963209,419207279
Change-Id: Ia8324256fb116150d0d4cb093f0889cea293f58c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6563376
Commit-Queue: Philip Pfaffe <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
(cherry picked from commit 01f70bb)
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6606035
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: pfaffe

front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js

@@ -188,7 +188,7 @@ ElementsTestRunner.computedStyleWidget = function() {
   return Elements.ElementsPanel.ElementsPanel.instance().computedStyleWidget;
 };
 
-ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInnerText) {
+ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand) {
   const computed = ElementsTestRunner.computedStyleWidget();
   const treeOutline = computed.propertiesOutline.querySelector('devtools-tree-outline');
   const children = treeOutline.shadowRoot.querySelector('[role="treeitem"]');
@@ -229,7 +229,7 @@ ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInne
   }
 
   function text(node) {
-    return printInnerText ? node.innerText : node.textContent;
+    return node.innerText;
   }
 };
 
@@ -471,11 +471,11 @@ ElementsTestRunner.dumpRenderedMatchedStyles = function() {
 };
 
 ElementsTestRunner.dumpSelectedElementStyles =
-    async function(excludeComputed, excludeMatched, omitLonghands, includeSelectorGroupMarks, printInnerText) {
+    async function(excludeComputed, excludeMatched, omitLonghands, includeSelectorGroupMarks) {
   const sectionBlocks = Elements.ElementsPanel.ElementsPanel.instance().stylesWidget.sectionBlocks;
 
   if (!excludeComputed) {
-    await ElementsTestRunner.dumpComputedStyle(false /* doNotAutoExpand */, printInnerText);
+    await ElementsTestRunner.dumpComputedStyle(false /* doNotAutoExpand */);
   }
 
   for (const block of sectionBlocks) {
@@ -494,16 +494,16 @@ ElementsTestRunner.dumpSelectedElementStyles =
         TestRunner.addResult('======== ' + text(section.element.previousSibling) + nodeDescription + ' ========');
       }
 
-      await printStyleSection(section, omitLonghands, includeSelectorGroupMarks, printInnerText);
+      await printStyleSection(section, omitLonghands, includeSelectorGroupMarks);
     }
   }
 
   function text(node) {
-    return printInnerText ? node.innerText : node.textContent;
+    return node.innerText;
   }
 };
 
-async function printStyleSection(section, omitLonghands, includeSelectorGroupMarks, printInnerText) {
+async function printStyleSection(section, omitLonghands, includeSelectorGroupMarks) {
   if (!section) {
     return;
   }
@@ -533,14 +533,14 @@ async function printStyleSection(section, omitLonghands, includeSelectorGroupMar
   }
 
   TestRunner.addResult(selectorText);
-  ElementsTestRunner.dumpStyleTreeOutline(section.propertiesTreeOutline, (omitLonghands ? 1 : 2), printInnerText);
+  ElementsTestRunner.dumpStyleTreeOutline(section.propertiesTreeOutline, (omitLonghands ? 1 : 2));
   if (!section.showAllButton.classList.contains('hidden')) {
     TestRunner.addResult(text(section.showAllButton));
   }
   TestRunner.addResult('');
 
   function text(node) {
-    return printInnerText ? node.innerText : node.textContent;
+    return node.innerText;
   }
 }
 
@@ -688,17 +688,16 @@ ElementsTestRunner.getFirstPropertyTreeItemForSection = function(section, proper
   return null;
 };
 
-ElementsTestRunner.dumpStyleTreeOutline = function(treeItem, depth, printInnerText) {
+ElementsTestRunner.dumpStyleTreeOutline = function(treeItem, depth) {
   const children = treeItem.rootElement().children();
 
   for (let i = 0; i < children.length; ++i) {
-    ElementsTestRunner.dumpStyleTreeItem(children[i], '', depth || 2, printInnerText);
+    ElementsTestRunner.dumpStyleTreeItem(children[i], '', depth || 2);
   }
 };
 
-ElementsTestRunner.dumpStyleTreeItem = function(treeItem, prefix, depth, printInnerText) {
-  const textContent = printInnerText ? treeItem.listItemElement.innerText :
-                                       TestRunner.textContentWithoutStyles(treeItem.listItemElement);
+ElementsTestRunner.dumpStyleTreeItem = function(treeItem, prefix, depth) {
+  const textContent = treeItem.listItemElement.innerText;
   if (textContent.indexOf(' width:') !== -1 || textContent.indexOf(' height:') !== -1) {
     return;
   }
@@ -726,7 +725,7 @@ ElementsTestRunner.dumpStyleTreeItem = function(treeItem, prefix, depth, printIn
     const children = treeItem.children();
 
     for (let i = 0; children && i < children.length; ++i) {
-      ElementsTestRunner.dumpStyleTreeItem(children[i], prefix + '    ', depth, printInnerText);
+      ElementsTestRunner.dumpStyleTreeItem(children[i], prefix + '    ', depth);
     }
   }
 };

front_end/legacy_test_runner/test_runner/TestRunner.js

@@ -394,7 +394,7 @@ export function textContentWithoutStyles(node) {
     if (!currentNode) {
       break;
     }
-    if (currentNode.nodeType === Node.TEXT_NODE) {
+    if (currentNode.nodeType === Node.TEXT_NODE && currentNode.parentElement?.tagName !== 'STYLE') {
       buffer += currentNode.nodeValue;
     } else if (currentNode.tagName === 'DEVTOOLS-TOOLTIP') {
       // <devtools-tooltip> holds popover contents in-line in a slot, so its contents appear in textContent. This is

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1988,31 +1988,32 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       };
       this.listItemElement.appendChild(tooltip);
     } else if (Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
-      const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
-
-      if (cssProperty) {
-        const tooltipId = this.getTooltipId('property-doc');
-        this.nameElement.setAttribute('aria-details', tooltipId);
-        const tooltip = new Tooltips.Tooltip.Tooltip({
-          anchor: this.nameElement,
-          variant: 'rich',
-          id: tooltipId,
-          jslogContext: 'elements.css-property-doc',
-        });
-        tooltip.onbeforetoggle = event => {
-          if ((event as ToggleEvent).newState !== 'open') {
-            return;
-          }
-          if (!Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
-            event.consume(true);
-            return;
-          }
+      const tooltipId = this.getTooltipId('property-doc');
+      this.nameElement.setAttribute('aria-details', tooltipId);
+      const tooltip = new Tooltips.Tooltip.Tooltip({
+        anchor: this.nameElement,
+        variant: 'rich',
+        id: tooltipId,
+        jslogContext: 'elements.css-property-doc',
+      });
+      tooltip.onbeforetoggle = event => {
+        if ((event as ToggleEvent).newState !== 'open') {
+          return;
+        }
+        if (!Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
+          event.consume(true);
+          return;
+        }
 
-          tooltip.removeChildren();
-          tooltip.appendChild(new ElementsComponents.CSSPropertyDocsView.CSSPropertyDocsView(cssProperty));
-        };
-        this.listItemElement.appendChild(tooltip);
-      }
+        const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
+        if (!cssProperty) {
+          event.consume(true);
+          return;
+        }
+        tooltip.removeChildren();
+        tooltip.appendChild(new ElementsComponents.CSSPropertyDocsView.CSSPropertyDocsView(cssProperty));
+      };
+      this.listItemElement.appendChild(tooltip);
     }
 
     if (this.valueElement) {

front_end/panels/elements/StylesSidebarPane.ts

@@ -226,9 +226,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
     this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
-    if (Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover')) {
-      this.#webCustomData = WebCustomData.create();
-    }
 
     this.boundOnScroll = this.onScroll.bind(this);
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -241,6 +238,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   get webCustomData(): WebCustomData|undefined {
+    if (!this.#webCustomData &&
+        Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
+      // WebCustomData.create() fetches the property docs, so this must happen lazily.
+      this.#webCustomData = WebCustomData.create();
+    }
     return this.#webCustomData;
   }