Index: third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js |
diff --git a/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js b/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js |
index 354ed14157a3bd2316f65531dada472244e3c6b3..8d18bb19d2e21c1c204a8b218b84e354108113d3 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js |
+++ b/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js |
@@ -22,8 +22,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox { |
this._cssResultsElement = this.contentElement.createChild('div', 'css-results'); |
this._progressElement = this._cssResultsElement.createChild('div', 'progress-view'); |
- this._treeOutline = new UI.TreeOutlineInShadow(); |
- this._treeOutline.registerRequiredCSS('css_tracker/unusedRulesTree.css'); |
+ this._listView = new CSSTracker.CSSTrackerListView(); |
this._statusToolbarElement = this.contentElement.createChild('div', 'css-toolbar-summary'); |
this._statusMessageElement = this._statusToolbarElement.createChild('div', 'css-message'); |
@@ -35,11 +34,11 @@ CSSTracker.CSSTrackerView = class extends UI.VBox { |
Workspace.workspace.uiSourceCodes().forEach( |
uiSourceCode => uiSourceCode.removeDecorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type)); |
+ this._listView.detach(); |
this._cssResultsElement.removeChildren(); |
this._progressElement.textContent = ''; |
this._cssResultsElement.appendChild(this._progressElement); |
- this._treeOutline.removeChildren(); |
this._statusMessageElement.textContent = ''; |
} |
@@ -116,7 +115,9 @@ CSSTracker.CSSTrackerView = class extends UI.VBox { |
function updateViews(styleSheetUsages) { |
this._updateStats(styleSheetUsages); |
this._updateGutter(styleSheetUsages); |
- this._updateTree(styleSheetUsages); |
+ this._cssResultsElement.removeChildren(); |
+ this._listView.update(styleSheetUsages); |
+ this._listView.show(this._cssResultsElement); |
} |
} |
@@ -191,41 +192,6 @@ CSSTracker.CSSTrackerView = class extends UI.VBox { |
} |
} |
} |
- |
- /** |
- * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages |
- */ |
- _updateTree(styleSheetUsages) { |
- this._cssResultsElement.removeChildren(); |
- this._cssResultsElement.appendChild(this._treeOutline.element); |
- |
- for (var sheet of styleSheetUsages) { |
- var unusedRuleCount = sheet.rules.reduce((count, rule) => rule.wasUsed ? count : count + 1, 0); |
- if (sheet.styleSheetHeader) { |
- var url = sheet.styleSheetHeader.sourceURL; |
- if (!url) |
- continue; |
- |
- var styleSheetTreeElement = new CSSTracker.CSSTrackerView.StyleSheetTreeElement(url, sheet.rules); |
- this._treeOutline.appendChild(styleSheetTreeElement); |
- continue; |
- } |
- if (!unusedRuleCount) |
- continue; |
- var removedStyleSheetStats = unusedRuleCount === 1 ? |
- Common.UIString('1 unused rule in a removed style sheet.') : |
- Common.UIString('%d unused rules in removed style sheets.', unusedRuleCount); |
- |
- var treeElement = new UI.TreeElement(Common.UIString('Unknown style sheets'), true); |
- treeElement.toggleOnClick = true; |
- treeElement.selectable = false; |
- |
- var stats = new UI.TreeElement(removedStyleSheetStats, false); |
- stats.selectable = false; |
- treeElement.appendChild(stats); |
- this._treeOutline.appendChild(treeElement); |
- } |
- } |
}; |
/** @typedef {{range: !Protocol.CSS.SourceRange, |
@@ -237,127 +203,6 @@ CSSTracker.RuleUsage; |
/** @typedef {{styleSheetHeader: ?SDK.CSSStyleSheetHeader, rules: !Array<!CSSTracker.RuleUsage>}} */ |
CSSTracker.StyleSheetUsage; |
-CSSTracker.CSSTrackerView._rulesShownAtOnce = 20; |
- |
-CSSTracker.CSSTrackerView.StyleSheetTreeElement = class extends UI.TreeElement { |
- /** |
- * @param {string} url |
- * @param {!Array<!CSSTracker.RuleUsage>} ruleList |
- */ |
- constructor(url, ruleList) { |
- super('', true); |
- |
- this._uiSourceCode = Workspace.workspace.uiSourceCodeForURL(url); |
- |
- /** @type {!Array<!CSSTracker.RuleUsage>} */ |
- this._unusedRules = ruleList.filter(rule => !rule.wasUsed); |
- |
- var lastLineNumber = 0; |
- for (var i = this._unusedRules.length - 1; i >= 0; --i) { |
- if (this._unusedRules[i].range) { |
- lastLineNumber = this._unusedRules[i].range.startLine; |
- break; |
- } |
- } |
- this._numberOfSpaces = lastLineNumber.toString().length + 1; |
- |
- this._percentUnused = Math.round(100 * this._unusedRules.length / ruleList.length); |
- |
- this.toggleOnClick = true; |
- this.selectable = false; |
- |
- /** @type {?UI.TreeElement} */ |
- this._showAllRulesTreeElement = null; |
- |
- var title = createElementWithClass('div', 'rule-result'); |
- var titleText; |
- if (this._uiSourceCode) |
- titleText = this._uiSourceCode.fullDisplayName(); |
- else |
- titleText = Common.UIString('Style Sheet was removed'); |
- title.createChild('span', 'rule-result-file-name').textContent = titleText; |
- |
- var rulesCountSpan = title.createChild('span', 'rule-result-matches-count'); |
- |
- if (this._unusedRules.length === 1) { |
- rulesCountSpan.textContent = |
- Common.UIString('(%d unused rule : %d%%)', this._unusedRules.length, this._percentUnused); |
- } else { |
- rulesCountSpan.textContent = |
- Common.UIString('(%d unused rules : %d%%)', this._unusedRules.length, this._percentUnused); |
- } |
- this.title = title; |
- } |
- |
- /** |
- * @override |
- */ |
- onpopulate() { |
- var toIndex = Math.min(this._unusedRules.length, CSSTracker.CSSTrackerView._rulesShownAtOnce); |
- this._appendRules(0, toIndex); |
- if (toIndex < this._unusedRules.length) |
- this._appendShowAllRulesButton(toIndex); |
- } |
- |
- /** |
- * @param {number} fromIndex |
- * @param {number} toIndex |
- */ |
- _appendRules(fromIndex, toIndex) { |
- for (var i = fromIndex; i < toIndex; ++i) { |
- if (!this._uiSourceCode) { |
- var rule = this._unusedRules[i]; |
- var contentSpan = createElementWithClass('span', 'rule-match-content'); |
- contentSpan.textContent = rule.selector; |
- ruleElement.listItemElement.appendChild(contentSpan); |
- continue; |
- } |
- |
- var rule = this._unusedRules[i]; |
- var lineNumber = rule.range.startLine; |
- var columnNumber = rule.range.startColumn; |
- |
- var anchor = Components.Linkifier.linkifyRevealable(this._uiSourceCode.uiLocation(lineNumber, columnNumber), ''); |
- |
- var lineNumberSpan = createElement('span'); |
- lineNumberSpan.classList.add('rule-match-line-number'); |
- lineNumberSpan.textContent = numberToStringWithSpacesPadding(lineNumber + 1, this._numberOfSpaces); |
- anchor.appendChild(lineNumberSpan); |
- |
- var contentSpan = anchor.createChild('span', 'rule-match-content'); |
- contentSpan.textContent = rule.selector; |
- |
- var ruleElement = new UI.TreeElement(); |
- ruleElement.selectable = true; |
- this.appendChild(ruleElement); |
- ruleElement.listItemElement.className = 'rule-match source-code'; |
- ruleElement.listItemElement.appendChild(anchor); |
- } |
- } |
- |
- /** |
- * @param {number} startMatchIndex |
- */ |
- _appendShowAllRulesButton(startMatchIndex) { |
- var rulesLeftCount = this._unusedRules.length - startMatchIndex; |
- var button = UI.createTextButton('', this._showMoreRulesElementSelected.bind(this, startMatchIndex)); |
- button.textContent = Common.UIString('Show all rules (%d more).', rulesLeftCount); |
- this._showAllRulesTreeElement = new UI.TreeElement(button); |
- this._showAllRulesTreeElement.selectable = false; |
- this.appendChild(this._showAllRulesTreeElement); |
- } |
- |
- /** |
- * @param {number} startMatchIndex |
- */ |
- _showMoreRulesElementSelected(startMatchIndex) { |
- if (!this._showAllRulesTreeElement) |
- return; |
- this.removeChild(this._showAllRulesTreeElement); |
- this._appendRules(startMatchIndex, this._unusedRules.length); |
- } |
-}; |
- |
/** |
* @implements {SourceFrame.UISourceCodeFrame.LineDecorator} |
*/ |