Index: third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerListView.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/CSSTrackerListView.js |
similarity index 39% |
copy from third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js |
copy to third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerListView.js |
index 354ed14157a3bd2316f65531dada472244e3c6b3..2d7d2cb4c06b80649354744ee04dd6f467da3aff 100644 |
--- a/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js |
+++ b/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerListView.js |
@@ -1,203 +1,20 @@ |
-// Copyright (c) 2016 The Chromium Authors. All rights reserved. |
+// Copyright (c) 2017 The Chromium Authors. All rights reserved. |
// Use of this source code is governed by a BSD-style license that can be |
// found in the LICENSE file. |
-CSSTracker.CSSTrackerView = class extends UI.VBox { |
+CSSTracker.CSSTrackerListView = class extends UI.VBox { |
constructor() { |
super(true); |
- |
- this.registerRequiredCSS('css_tracker/cssTrackerView.css'); |
- |
- var toolbarContainer = this.contentElement.createChild('div', 'css-tracker-toolbar-container'); |
- var topToolbar = new UI.Toolbar('css-tracker-toolbar', toolbarContainer); |
- |
- this._recordButton = |
- new UI.ToolbarToggle(Common.UIString('Start recording'), 'largeicon-resume', 'largeicon-pause'); |
- this._recordButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._toggleRecording(!this._isRecording)); |
- topToolbar.appendToolbarItem(this._recordButton); |
- |
- var clearButton = new UI.ToolbarButton(Common.UIString('Clear all'), 'largeicon-clear'); |
- clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._reset.bind(this)); |
- topToolbar.appendToolbarItem(clearButton); |
- |
- 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._statusToolbarElement = this.contentElement.createChild('div', 'css-toolbar-summary'); |
- this._statusMessageElement = this._statusToolbarElement.createChild('div', 'css-message'); |
- |
- this._isRecording = false; |
- } |
- |
- _reset() { |
- Workspace.workspace.uiSourceCodes().forEach( |
- uiSourceCode => uiSourceCode.removeDecorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type)); |
- |
- this._cssResultsElement.removeChildren(); |
- this._progressElement.textContent = ''; |
- this._cssResultsElement.appendChild(this._progressElement); |
- |
- this._treeOutline.removeChildren(); |
- this._statusMessageElement.textContent = ''; |
- } |
- |
- /** |
- * @param {boolean} enable |
- */ |
- _toggleRecording(enable) { |
- if (enable === this._isRecording) |
- return; |
- |
- this._isRecording = enable; |
- this._recordButton.setToggled(this._isRecording); |
- |
- if (this._isRecording) |
- this._startRecording(); |
- else |
- this._stopRecording(); |
- } |
- |
- _startRecording() { |
- this._reset(); |
- var mainTarget = SDK.targetManager.mainTarget(); |
- if (!mainTarget) |
- return; |
- var cssModel = mainTarget.model(SDK.CSSModel); |
- if (!cssModel) |
- return; |
- this._recordButton.setTitle(Common.UIString('Stop recording')); |
- cssModel.startRuleUsageTracking(); |
- |
- this._progressElement.textContent = Common.UIString('Recording...'); |
- } |
- |
- _stopRecording() { |
- var mainTarget = SDK.targetManager.mainTarget(); |
- if (!mainTarget) |
- return; |
- |
- this._recordButton.setTitle(Common.UIString('Start recording')); |
- this._progressElement.textContent = Common.UIString('Fetching results...'); |
- |
- var cssModel = mainTarget.model(SDK.CSSModel); |
- if (!cssModel) |
- return; |
- |
- cssModel.ruleListPromise().then(processRuleList.bind(this)).then(updateViews.bind(this)); |
- |
- /** |
- * @param {!Array<!SDK.CSSModel.RuleUsage>} ruleUsageList |
- * @this {!CSSTracker.CSSTrackerView} |
- * @return {!Promise<!Array<!CSSTracker.StyleSheetUsage>>} |
- */ |
- function processRuleList(ruleUsageList) { |
- /** @type {!Map<?SDK.CSSStyleSheetHeader, !CSSTracker.StyleSheetUsage>} */ |
- var rulesByStyleSheet = new Map(); |
- for (var rule of ruleUsageList) { |
- var styleSheetHeader = cssModel.styleSheetHeaderForId(rule.styleSheetId); |
- var entry = rulesByStyleSheet.get(styleSheetHeader); |
- if (!entry) { |
- entry = {styleSheetHeader: styleSheetHeader, rules: []}; |
- rulesByStyleSheet.set(styleSheetHeader, entry); |
- } |
- entry.rules.push(rule); |
- } |
- return Promise.all(Array.from( |
- rulesByStyleSheet.values(), |
- entry => this._populateSourceInfo(/** @type {!CSSTracker.StyleSheetUsage} */ (entry)))); |
- } |
- |
- /** |
- * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages |
- * @this {!CSSTracker.CSSTrackerView} |
- */ |
- function updateViews(styleSheetUsages) { |
- this._updateStats(styleSheetUsages); |
- this._updateGutter(styleSheetUsages); |
- this._updateTree(styleSheetUsages); |
- } |
- } |
- |
- /** |
- * @param {!CSSTracker.StyleSheetUsage} styleSheetUsage |
- * @return {!Promise<!CSSTracker.StyleSheetUsage>} |
- */ |
- _populateSourceInfo(styleSheetUsage) { |
- if (!styleSheetUsage.styleSheetHeader) |
- return Promise.resolve(styleSheetUsage); |
- var ruleIndex = |
- new Map(styleSheetUsage.rules.map(rule => [`${rule.range.startLine}.${rule.range.startColumn}`, rule])); |
- |
- return new Promise(fulfill => { |
- styleSheetUsage.styleSheetHeader.requestContent().then( |
- content => Common.formatterWorkerPool.parseCSS(content || '', onRules)); |
- |
- /** |
- * @param {boolean} isLastChunk |
- * @param {!Array<!Common.FormatterWorkerPool.CSSStyleRule>} rules |
- */ |
- function onRules(isLastChunk, rules) { |
- for (var rule of rules) { |
- if (!rule.styleRange) |
- continue; |
- var entry = ruleIndex.get(`${rule.styleRange.startLine}.${rule.styleRange.startColumn}`); |
- if (entry) |
- entry.selector = rule.selectorText; |
- } |
- if (isLastChunk) |
- fulfill(styleSheetUsage); |
- } |
- }); |
- } |
- |
- /** |
- * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsage |
- */ |
- _updateStats(styleSheetUsage) { |
- var total = 0; |
- var unused = 0; |
- for (var styleSheet of styleSheetUsage) { |
- total += styleSheet.rules.length; |
- unused += styleSheet.rules.reduce((count, rule) => rule.wasUsed ? count : count + 1, 0); |
- } |
- var percentUnused = total ? Math.round(100 * unused / total) : 0; |
- if (unused === 1) { |
- this._statusMessageElement.textContent = |
- Common.UIString('%d CSS rule is not used. (%d%%)', unused, percentUnused); |
- } else { |
- this._statusMessageElement.textContent = |
- Common.UIString('%d CSS rules are not used. (%d%%)', unused, percentUnused); |
- } |
- } |
- |
- /** |
- * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages |
- */ |
- _updateGutter(styleSheetUsages) { |
- for (var styleSheet of styleSheetUsages) { |
- if (!styleSheet.styleSheetHeader) |
- continue; |
- var url = styleSheet.styleSheetHeader.sourceURL; |
- var uiSourceCode = url && Workspace.workspace.uiSourceCodeForURL(url); |
- if (!uiSourceCode) |
- continue; |
- for (var rule of styleSheet.rules) { |
- var gutterRange = Common.TextRange.fromObject(rule.range); |
- if (gutterRange.startColumn) |
- gutterRange.startColumn--; |
- uiSourceCode.addDecoration(gutterRange, CSSTracker.CSSTrackerView.LineDecorator.type, rule.wasUsed); |
- } |
- } |
+ this.contentElement.appendChild(this._treeOutline.element); |
} |
/** |
* @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages |
*/ |
- _updateTree(styleSheetUsages) { |
- this._cssResultsElement.removeChildren(); |
- this._cssResultsElement.appendChild(this._treeOutline.element); |
+ update(styleSheetUsages) { |
+ this._treeOutline.removeChildren(); |
for (var sheet of styleSheetUsages) { |
var unusedRuleCount = sheet.rules.reduce((count, rule) => rule.wasUsed ? count : count + 1, 0); |
@@ -206,7 +23,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox { |
if (!url) |
continue; |
- var styleSheetTreeElement = new CSSTracker.CSSTrackerView.StyleSheetTreeElement(url, sheet.rules); |
+ var styleSheetTreeElement = new CSSTracker.CSSTrackerListView.StyleSheetTreeElement(url, sheet.rules); |
this._treeOutline.appendChild(styleSheetTreeElement); |
continue; |
} |
@@ -228,18 +45,9 @@ CSSTracker.CSSTrackerView = class extends UI.VBox { |
} |
}; |
-/** @typedef {{range: !Protocol.CSS.SourceRange, |
- * selector: (string|undefined), |
- * wasUsed: boolean}} |
- */ |
-CSSTracker.RuleUsage; |
- |
-/** @typedef {{styleSheetHeader: ?SDK.CSSStyleSheetHeader, rules: !Array<!CSSTracker.RuleUsage>}} */ |
-CSSTracker.StyleSheetUsage; |
- |
-CSSTracker.CSSTrackerView._rulesShownAtOnce = 20; |
+CSSTracker.CSSTrackerListView._rulesShownAtOnce = 20; |
-CSSTracker.CSSTrackerView.StyleSheetTreeElement = class extends UI.TreeElement { |
+CSSTracker.CSSTrackerListView.StyleSheetTreeElement = class extends UI.TreeElement { |
/** |
* @param {string} url |
* @param {!Array<!CSSTracker.RuleUsage>} ruleList |
@@ -293,7 +101,7 @@ CSSTracker.CSSTrackerView.StyleSheetTreeElement = class extends UI.TreeElement { |
* @override |
*/ |
onpopulate() { |
- var toIndex = Math.min(this._unusedRules.length, CSSTracker.CSSTrackerView._rulesShownAtOnce); |
+ var toIndex = Math.min(this._unusedRules.length, CSSTracker.CSSTrackerListView._rulesShownAtOnce); |
this._appendRules(0, toIndex); |
if (toIndex < this._unusedRules.length) |
this._appendShowAllRulesButton(toIndex); |
@@ -357,38 +165,3 @@ CSSTracker.CSSTrackerView.StyleSheetTreeElement = class extends UI.TreeElement { |
this._appendRules(startMatchIndex, this._unusedRules.length); |
} |
}; |
- |
-/** |
- * @implements {SourceFrame.UISourceCodeFrame.LineDecorator} |
- */ |
-CSSTracker.CSSTrackerView.LineDecorator = class { |
- /** |
- * @override |
- * @param {!Workspace.UISourceCode} uiSourceCode |
- * @param {!TextEditor.CodeMirrorTextEditor} textEditor |
- */ |
- decorate(uiSourceCode, textEditor) { |
- var gutterType = 'CodeMirror-gutter-coverage'; |
- |
- var decorations = uiSourceCode.decorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type); |
- textEditor.uninstallGutter(gutterType); |
- if (!decorations || !decorations.size) |
- return; |
- |
- textEditor.installGutter(gutterType, false); |
- |
- for (var decoration of decorations) { |
- for (var line = decoration.range().startLine; line <= decoration.range().endLine; ++line) { |
- var element = createElementWithClass('div'); |
- if (decoration.data()) |
- element.className = 'text-editor-css-rule-used-marker'; |
- else |
- element.className = 'text-editor-css-rule-unused-marker'; |
- |
- textEditor.setGutterDecoration(line, gutterType, element); |
- } |
- } |
- } |
-}; |
- |
-CSSTracker.CSSTrackerView.LineDecorator.type = 'coverage'; |