Skip to content

Commit 8120d26

Browse files
pfaffeDevtools-frontend LUCI CQ
pfaffe
authored and
Devtools-frontend LUCI CQ
committed
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 <pfaffe@chromium.org> Reviewed-by: Simon Zünd <szuend@chromium.org> (cherry picked from commit 01f70bb) Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6606035 Reviewed-by: Benedikt Meurer <bmeurer@chromium.org> Commit-Queue: Simon Zünd <szuend@chromium.org>
1 parent 4a53cbe commit 8120d26

4 files changed

Lines changed: 45 additions & 43 deletions

File tree

‎front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ ElementsTestRunner.computedStyleWidget = function() {
188188
return Elements.ElementsPanel.ElementsPanel.instance().computedStyleWidget;
189189
};
190190

191-
ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInnerText) {
191+
ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand) {
192192
const computed = ElementsTestRunner.computedStyleWidget();
193193
const treeOutline = computed.propertiesOutline.querySelector('devtools-tree-outline');
194194
const children = treeOutline.shadowRoot.querySelector('[role="treeitem"]');
@@ -229,7 +229,7 @@ ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInne
229229
}
230230

231231
function text(node) {
232-
return printInnerText ? node.innerText : node.textContent;
232+
return node.innerText;
233233
}
234234
};
235235

@@ -471,11 +471,11 @@ ElementsTestRunner.dumpRenderedMatchedStyles = function() {
471471
};
472472

473473
ElementsTestRunner.dumpSelectedElementStyles =
474-
async function(excludeComputed, excludeMatched, omitLonghands, includeSelectorGroupMarks, printInnerText) {
474+
async function(excludeComputed, excludeMatched, omitLonghands, includeSelectorGroupMarks) {
475475
const sectionBlocks = Elements.ElementsPanel.ElementsPanel.instance().stylesWidget.sectionBlocks;
476476

477477
if (!excludeComputed) {
478-
await ElementsTestRunner.dumpComputedStyle(false /* doNotAutoExpand */, printInnerText);
478+
await ElementsTestRunner.dumpComputedStyle(false /* doNotAutoExpand */);
479479
}
480480

481481
for (const block of sectionBlocks) {
@@ -494,16 +494,16 @@ ElementsTestRunner.dumpSelectedElementStyles =
494494
TestRunner.addResult('======== ' + text(section.element.previousSibling) + nodeDescription + ' ========');
495495
}
496496

497-
await printStyleSection(section, omitLonghands, includeSelectorGroupMarks, printInnerText);
497+
await printStyleSection(section, omitLonghands, includeSelectorGroupMarks);
498498
}
499499
}
500500

501501
function text(node) {
502-
return printInnerText ? node.innerText : node.textContent;
502+
return node.innerText;
503503
}
504504
};
505505

506-
async function printStyleSection(section, omitLonghands, includeSelectorGroupMarks, printInnerText) {
506+
async function printStyleSection(section, omitLonghands, includeSelectorGroupMarks) {
507507
if (!section) {
508508
return;
509509
}
@@ -533,14 +533,14 @@ async function printStyleSection(section, omitLonghands, includeSelectorGroupMar
533533
}
534534

535535
TestRunner.addResult(selectorText);
536-
ElementsTestRunner.dumpStyleTreeOutline(section.propertiesTreeOutline, (omitLonghands ? 1 : 2), printInnerText);
536+
ElementsTestRunner.dumpStyleTreeOutline(section.propertiesTreeOutline, (omitLonghands ? 1 : 2));
537537
if (!section.showAllButton.classList.contains('hidden')) {
538538
TestRunner.addResult(text(section.showAllButton));
539539
}
540540
TestRunner.addResult('');
541541

542542
function text(node) {
543-
return printInnerText ? node.innerText : node.textContent;
543+
return node.innerText;
544544
}
545545
}
546546

@@ -688,17 +688,16 @@ ElementsTestRunner.getFirstPropertyTreeItemForSection = function(section, proper
688688
return null;
689689
};
690690

691-
ElementsTestRunner.dumpStyleTreeOutline = function(treeItem, depth, printInnerText) {
691+
ElementsTestRunner.dumpStyleTreeOutline = function(treeItem, depth) {
692692
const children = treeItem.rootElement().children();
693693

694694
for (let i = 0; i < children.length; ++i) {
695-
ElementsTestRunner.dumpStyleTreeItem(children[i], '', depth || 2, printInnerText);
695+
ElementsTestRunner.dumpStyleTreeItem(children[i], '', depth || 2);
696696
}
697697
};
698698

699-
ElementsTestRunner.dumpStyleTreeItem = function(treeItem, prefix, depth, printInnerText) {
700-
const textContent = printInnerText ? treeItem.listItemElement.innerText :
701-
TestRunner.textContentWithoutStyles(treeItem.listItemElement);
699+
ElementsTestRunner.dumpStyleTreeItem = function(treeItem, prefix, depth) {
700+
const textContent = treeItem.listItemElement.innerText;
702701
if (textContent.indexOf(' width:') !== -1 || textContent.indexOf(' height:') !== -1) {
703702
return;
704703
}
@@ -726,7 +725,7 @@ ElementsTestRunner.dumpStyleTreeItem = function(treeItem, prefix, depth, printIn
726725
const children = treeItem.children();
727726

728727
for (let i = 0; children && i < children.length; ++i) {
729-
ElementsTestRunner.dumpStyleTreeItem(children[i], prefix + ' ', depth, printInnerText);
728+
ElementsTestRunner.dumpStyleTreeItem(children[i], prefix + ' ', depth);
730729
}
731730
}
732731
};

‎front_end/legacy_test_runner/test_runner/TestRunner.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ export function textContentWithoutStyles(node) {
394394
if (!currentNode) {
395395
break;
396396
}
397-
if (currentNode.nodeType === Node.TEXT_NODE) {
397+
if (currentNode.nodeType === Node.TEXT_NODE && currentNode.parentElement?.tagName !== 'STYLE') {
398398
buffer += currentNode.nodeValue;
399399
} else if (currentNode.tagName === 'DEVTOOLS-TOOLTIP') {
400400
// <devtools-tooltip> holds popover contents in-line in a slot, so its contents appear in textContent. This is

‎front_end/panels/elements/StylePropertyTreeElement.ts‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1988,31 +1988,32 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
19881988
};
19891989
this.listItemElement.appendChild(tooltip);
19901990
} else if (Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
1991-
const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
1992-
1993-
if (cssProperty) {
1994-
const tooltipId = this.getTooltipId('property-doc');
1995-
this.nameElement.setAttribute('aria-details', tooltipId);
1996-
const tooltip = new Tooltips.Tooltip.Tooltip({
1997-
anchor: this.nameElement,
1998-
variant: 'rich',
1999-
id: tooltipId,
2000-
jslogContext: 'elements.css-property-doc',
2001-
});
2002-
tooltip.onbeforetoggle = event => {
2003-
if ((event as ToggleEvent).newState !== 'open') {
2004-
return;
2005-
}
2006-
if (!Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
2007-
event.consume(true);
2008-
return;
2009-
}
1991+
const tooltipId = this.getTooltipId('property-doc');
1992+
this.nameElement.setAttribute('aria-details', tooltipId);
1993+
const tooltip = new Tooltips.Tooltip.Tooltip({
1994+
anchor: this.nameElement,
1995+
variant: 'rich',
1996+
id: tooltipId,
1997+
jslogContext: 'elements.css-property-doc',
1998+
});
1999+
tooltip.onbeforetoggle = event => {
2000+
if ((event as ToggleEvent).newState !== 'open') {
2001+
return;
2002+
}
2003+
if (!Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
2004+
event.consume(true);
2005+
return;
2006+
}
20102007

2011-
tooltip.removeChildren();
2012-
tooltip.appendChild(new ElementsComponents.CSSPropertyDocsView.CSSPropertyDocsView(cssProperty));
2013-
};
2014-
this.listItemElement.appendChild(tooltip);
2015-
}
2008+
const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
2009+
if (!cssProperty) {
2010+
event.consume(true);
2011+
return;
2012+
}
2013+
tooltip.removeChildren();
2014+
tooltip.appendChild(new ElementsComponents.CSSPropertyDocsView.CSSPropertyDocsView(cssProperty));
2015+
};
2016+
this.listItemElement.appendChild(tooltip);
20162017
}
20172018

20182019
if (this.valueElement) {

‎front_end/panels/elements/StylesSidebarPane.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -226,9 +226,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
226226

227227
UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.forceUpdate, this);
228228
this.contentElement.addEventListener('copy', this.clipboardCopy.bind(this));
229-
if (Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover')) {
230-
this.#webCustomData = WebCustomData.create();
231-
}
232229

233230
this.boundOnScroll = this.onScroll.bind(this);
234231
this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -241,6 +238,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
241238
}
242239

243240
get webCustomData(): WebCustomData|undefined {
241+
if (!this.#webCustomData &&
242+
Common.Settings.Settings.instance().moduleSetting('show-css-property-documentation-on-hover').get()) {
243+
// WebCustomData.create() fetches the property docs, so this must happen lazily.
244+
this.#webCustomData = WebCustomData.create();
245+
}
244246
return this.#webCustomData;
245247
}
246248

0 commit comments

Comments
 (0)