Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1681)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: tracing/tracing/value/ui/breakdown_span.html

Issue 3002973002: Refactor diagnostic spans to share a polymer behavior. (Closed)
Patch Set: Created 3 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « tracing/trace_viewer.gypi ('k') | tracing/tracing/value/ui/breakdown_span_test.html » ('j') | tracing/tracing/value/ui/diagnostic_span_behavior.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: tracing/tracing/value/ui/breakdown_span.html
diff --git a/tracing/tracing/value/ui/breakdown_span.html b/tracing/tracing/value/ui/breakdown_span.html
index 49e15d43a48d7e515fdc4c57b2b9a3f0dd176696..41a3b720cc9b272faf652beb8985c987bffc0f96 100644
--- a/tracing/tracing/value/ui/breakdown_span.html
+++ b/tracing/tracing/value/ui/breakdown_span.html
@@ -11,6 +11,7 @@ found in the LICENSE file.
<link rel="import" href="/tracing/ui/base/column_chart.html">
<link rel="import" href="/tracing/ui/base/dom_helpers.html">
<link rel="import" href="/tracing/ui/base/table.html">
+<link rel="import" href="/tracing/value/ui/diagnostic_span_behavior.html">
<dom-module id="tr-v-ui-breakdown-span">
<template>
@@ -42,318 +43,304 @@ found in the LICENSE file.
<script>
'use strict';
-const DEFAULT_COLOR_SCHEME = new tr.b.SinebowColorGenerator();
+tr.exportTo('tr.v.ui', function() {
+ const DEFAULT_COLOR_SCHEME = new tr.b.SinebowColorGenerator();
-class BreakdownTableSummaryRow {
- constructor(displayElement, histogramNames) {
- this.displayElement_ = displayElement;
- this.histogramNames_ = histogramNames;
- this.keySpan_ = undefined;
- }
+ class BreakdownTableSummaryRow {
+ constructor(displayElement, histogramNames) {
+ this.displayElement_ = displayElement;
+ this.histogramNames_ = histogramNames;
+ this.keySpan_ = undefined;
+ }
- get numberValue() {
- // Prevent this row from appearing in the ColumnChart.
- return undefined;
- }
+ get numberValue() {
+ // Prevent this row from appearing in the ColumnChart.
+ return undefined;
+ }
- get keySpan() {
- if (this.keySpan_ === undefined) {
- if (this.histogramNames_.length) {
- this.keySpan_ = document.createElement('tr-ui-a-analysis-link');
- this.keySpan_.setSelectionAndContent(
- this.histogramNames_, 'Select All');
- } else {
- this.keySpan_ = 'Sum';
+ get keySpan() {
+ if (this.keySpan_ === undefined) {
+ if (this.histogramNames_.length) {
+ this.keySpan_ = document.createElement('tr-ui-a-analysis-link');
+ this.keySpan_.setSelectionAndContent(
+ this.histogramNames_, 'Select All');
+ } else {
+ this.keySpan_ = 'Sum';
+ }
}
+ return this.keySpan_;
}
- return this.keySpan_;
- }
-
- get name() {
- return 'Sum';
- }
- get displayElement() {
- return this.displayElement_;
- }
-
- get stringPercent() {
- return '100%';
- }
-}
-
-class BreakdownTableRow {
- constructor(name, value, unit, color) {
- this.name_ = name;
- this.value = value;
- this.unit = unit;
+ get name() {
+ return 'Sum';
+ }
- if (!this.isHistogram && typeof value !== 'number') {
- throw new Error('unsupported value ' + value);
+ get displayElement() {
+ return this.displayElement_;
}
- this.tableSum_ = undefined;
- this.keySpan_ = undefined;
-
- this.color_ = color;
- const hsl = this.color.toHSL();
- hsl.l *= 0.85;
- this.highlightedColor_ = tr.b.Color.fromHSL(hsl);
-
- if (this.isHistogram) {
- this.displayElement_ = tr.v.ui.createScalarSpan(this.numberValue, {
- unit: this.value.unit,
- });
- } else {
- this.displayElement_ = tr.ui.b.createSpan({
- textContent: this.stringValue,
- });
+ get stringPercent() {
+ return '100%';
}
}
- get isHistogram() {
- return this.value instanceof tr.v.Histogram;
- }
+ class BreakdownTableRow {
+ constructor(name, value, unit, color) {
+ this.name_ = name;
+ this.value = value;
+ this.unit = unit;
- get name() {
- return this.name_;
- }
+ if (!this.isHistogram && typeof value !== 'number') {
+ throw new Error('unsupported value ' + value);
+ }
- get color() {
- return this.color_;
- }
+ this.tableSum_ = undefined;
+ this.keySpan_ = undefined;
- get highlightedColor() {
- return this.highlightedColor_;
- }
+ this.color_ = color;
+ const hsl = this.color.toHSL();
+ hsl.l *= 0.85;
+ this.highlightedColor_ = tr.b.Color.fromHSL(hsl);
- get keySpan() {
- if (this.keySpan_ === undefined) {
if (this.isHistogram) {
- this.keySpan_ = document.createElement('tr-ui-a-analysis-link');
- this.keySpan_.setSelectionAndContent([this.value.name], this.name);
- this.keySpan_.color = this.color;
- this.keySpan_.title = this.value.name;
+ this.displayElement_ = tr.v.ui.createScalarSpan(this.numberValue, {
+ unit: this.value.unit,
+ });
} else {
- this.keySpan_ = document.createElement('span');
- this.keySpan_.innerText = this.name;
- this.keySpan_.style.color = this.color;
+ this.displayElement_ = tr.ui.b.createSpan({
+ textContent: this.stringValue,
+ });
}
}
- return this.keySpan_;
- }
-
- /**
- * @return {number|undefined}
- */
- get numberValue() {
- if (this.isHistogram) return this.value.sum;
- if (!isNaN(this.value) &&
- (this.value !== Infinity) &&
- (this.value !== -Infinity) &&
- (this.value > 0)) return this.value;
- // Prevent this row from appearing in the ColumnChart.
- return undefined;
- }
- get stringValue() {
- if (!this.isHistogram &&
- (isNaN(this.value) ||
- this.value === Infinity ||
- this.value === -Infinity)) {
- return this.value.toString();
+ get isHistogram() {
+ return this.value instanceof tr.v.Histogram;
}
- if (this.unit !== undefined) return this.unit.format(this.value);
- if (this.isHistogram) return this.value.sum.toString();
- return this.value.toString();
- }
- set tableSum(s) {
- this.tableSum_ = s;
- }
+ get name() {
+ return this.name_;
+ }
- get stringPercent() {
- if (this.tableSum_ === undefined) return '';
- const num = this.numberValue;
- if (num === undefined) return '';
- return Math.floor(num * 100.0 / this.tableSum_) + '%';
- }
+ get color() {
+ return this.color_;
+ }
- get displayElement() {
- return this.displayElement_;
- }
+ get highlightedColor() {
+ return this.highlightedColor_;
+ }
- compare(other) {
- if (this.numberValue === undefined) {
- if (other.numberValue === undefined) {
- return this.name.localeCompare(other.name);
+ get keySpan() {
+ if (this.keySpan_ === undefined) {
+ if (this.isHistogram) {
+ this.keySpan_ = document.createElement('tr-ui-a-analysis-link');
+ this.keySpan_.setSelectionAndContent([this.value.name], this.name);
+ this.keySpan_.color = this.color;
+ this.keySpan_.title = this.value.name;
+ } else {
+ this.keySpan_ = document.createElement('span');
+ this.keySpan_.innerText = this.name;
+ this.keySpan_.style.color = this.color;
+ }
}
- return 1;
+ return this.keySpan_;
}
- if (other.numberValue === undefined) {
- return -1;
- }
- if (this.numberValue === other.numberValue) {
- return this.name.localeCompare(other.name);
+
+ /**
+ * @return {number|undefined}
+ */
+ get numberValue() {
+ if (this.isHistogram) return this.value.sum;
+ if (!isNaN(this.value) &&
+ (this.value !== Infinity) &&
+ (this.value !== -Infinity) &&
+ (this.value > 0)) return this.value;
+ // Prevent this row from appearing in the ColumnChart.
+ return undefined;
}
- return other.numberValue - this.numberValue;
- }
-}
-
-Polymer({
- is: 'tr-v-ui-breakdown-span',
-
- created() {
- this.histogram_ = undefined;
- this.diagnostic_ = undefined;
- this.chart_ = new tr.ui.b.ColumnChart();
- this.chart_.graphHeight = 130;
- this.chart_.isStacked = true;
- this.chart_.hideXAxis = true;
- this.chart_.hideLegend = true;
- this.chart_.enableHoverBox = false;
- this.chart_.addEventListener('rect-mouseenter',
- event => this.onRectMouseEnter_(event));
- this.chart_.addEventListener('rect-mouseleave',
- event => this.onRectMouseLeave_(event));
- },
-
- onRectMouseEnter_(event) {
- for (const row of this.$.table.tableRows) {
- if (row.name === event.rect.key) {
- row.displayElement.style.background = event.rect.color;
- row.keySpan.scrollIntoViewIfNeeded();
- } else {
- row.displayElement.style.background = '';
+
+ get stringValue() {
+ if (!this.isHistogram &&
+ (isNaN(this.value) ||
+ this.value === Infinity ||
+ this.value === -Infinity)) {
+ return this.value.toString();
}
+ if (this.unit !== undefined) return this.unit.format(this.value);
+ if (this.isHistogram) return this.value.sum.toString();
+ return this.value.toString();
}
- },
- onRectMouseLeave_(event) {
- for (const row of this.$.table.tableRows) {
- row.displayElement.style.background = '';
+ set tableSum(s) {
+ this.tableSum_ = s;
}
- },
-
- ready() {
- Polymer.dom(this.$.container).appendChild(this.chart_);
-
- this.$.table.zebra = true;
- this.$.table.showHeader = false;
- this.$.table.tableColumns = [
- {
- value: row => row.keySpan,
- },
- {
- value: row => row.displayElement,
- align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT,
- },
- {
- value: row => row.stringPercent,
- align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT,
- },
- ];
- },
-
- attached() {
- if (this.diagnostic_) this.updateContents_();
- },
-
- set histogram(h) {
- this.histogram_ = h;
- },
-
- get diagnostic() {
- return this.diagnostic_;
- },
-
- set diagnostic(d) {
- this.diagnostic_ = d;
- if (this.isAttached) this.updateContents_();
- },
-
- updateContents_() {
- this.$.container.style.display = 'none';
- this.$.table.style.display = 'none';
- this.$.empty.style.display = 'block';
-
- if (!this.diagnostic_) {
- this.chart_.data = [];
- return;
+
+ get stringPercent() {
+ if (this.tableSum_ === undefined) return '';
+ const num = this.numberValue;
+ if (num === undefined) return '';
+ return Math.floor(num * 100.0 / this.tableSum_) + '%';
}
- if (this.histogram_) this.chart_.unit = this.histogram_.unit;
-
- let colorScheme = undefined;
- // https://github.com/catapult-project/catapult/issues/2970
- if (this.diagnostic.colorScheme ===
- tr.v.d.COLOR_SCHEME_CHROME_USER_FRIENDLY_CATEGORY_DRIVER) {
- colorScheme = (name) => {
- let cat = name.split(' ');
- cat = cat[cat.length - 1];
- return tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat);
- };
- } else if (this.diagnostic.colorScheme !== undefined) {
- colorScheme = (name) => tr.b.FixedColorSchemeRegistry.lookUp(
- this.diagnostic.colorScheme).getColor(name);
- } else {
- colorScheme = (name) => DEFAULT_COLOR_SCHEME.colorForKey(name);
+ get displayElement() {
+ return this.displayElement_;
}
- const tableRows = [];
- let tableSum = 0;
- const histogramNames = [];
- for (const [name, value] of this.diagnostic) {
- const row = new BreakdownTableRow(
- name, value, this.chart_.unit, colorScheme(name));
- tableRows.push(row);
- if (row.numberValue !== undefined) tableSum += row.numberValue;
- if (row.isHistogram) {
- histogramNames.push(value.name);
+ compare(other) {
+ if (this.numberValue === undefined) {
+ if (other.numberValue === undefined) {
+ return this.name.localeCompare(other.name);
+ }
+ return 1;
}
+ if (other.numberValue === undefined) {
+ return -1;
+ }
+ if (this.numberValue === other.numberValue) {
+ return this.name.localeCompare(other.name);
+ }
+ return other.numberValue - this.numberValue;
}
- tableRows.sort((x, y) => x.compare(y));
+ }
- if (tableSum > 0) {
- let summaryDisplayElement = tableSum;
- if (this.chart_.unit !== undefined) {
- summaryDisplayElement = this.chart_.unit.format(tableSum);
+ Polymer({
+ is: 'tr-v-ui-breakdown-span',
+ behaviors: [tr.v.ui.DIAGNOSTIC_SPAN_BEHAVIOR],
+
+ created() {
+ this.chart_ = new tr.ui.b.ColumnChart();
+ this.chart_.graphHeight = 130;
+ this.chart_.isStacked = true;
+ this.chart_.hideXAxis = true;
+ this.chart_.hideLegend = true;
+ this.chart_.enableHoverBox = false;
+ this.chart_.addEventListener('rect-mouseenter',
+ event => this.onRectMouseEnter_(event));
+ this.chart_.addEventListener('rect-mouseleave',
+ event => this.onRectMouseLeave_(event));
+ },
+
+ onRectMouseEnter_(event) {
+ for (const row of this.$.table.tableRows) {
+ if (row.name === event.rect.key) {
+ row.displayElement.style.background = event.rect.color;
+ row.keySpan.scrollIntoViewIfNeeded();
+ } else {
+ row.displayElement.style.background = '';
+ }
}
- summaryDisplayElement = tr.ui.b.createSpan({
- textContent: summaryDisplayElement,
- });
- tableRows.unshift(new BreakdownTableSummaryRow(
- summaryDisplayElement, histogramNames));
- }
+ },
- const chartData = {x: 0};
- for (const row of tableRows) {
- if (row.numberValue === undefined) continue;
+ onRectMouseLeave_(event) {
+ for (const row of this.$.table.tableRows) {
+ row.displayElement.style.background = '';
+ }
+ },
+
+ ready() {
+ Polymer.dom(this.$.container).appendChild(this.chart_);
+
+ this.$.table.zebra = true;
+ this.$.table.showHeader = false;
+ this.$.table.tableColumns = [
+ {
+ value: row => row.keySpan,
+ },
+ {
+ value: row => row.displayElement,
+ align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT,
+ },
+ {
+ value: row => row.stringPercent,
+ align: tr.ui.b.TableFormat.ColumnAlignment.RIGHT,
+ },
+ ];
+ },
+
+ updateContents_() {
+ this.$.container.style.display = 'none';
+ this.$.table.style.display = 'none';
+ this.$.empty.style.display = 'block';
+
+ if (!this.diagnostic_) {
+ this.chart_.data = [];
+ return;
+ }
+
+ if (this.histogram_) this.chart_.unit = this.histogram_.unit;
+
+ let colorScheme = undefined;
+ // https://github.com/catapult-project/catapult/issues/2970
+ if (this.diagnostic.colorScheme ===
+ tr.v.d.COLOR_SCHEME_CHROME_USER_FRIENDLY_CATEGORY_DRIVER) {
+ colorScheme = (name) => {
+ let cat = name.split(' ');
+ cat = cat[cat.length - 1];
+ return tr.e.chrome.ChromeUserFriendlyCategoryDriver.getColor(cat);
+ };
+ } else if (this.diagnostic.colorScheme !== undefined) {
+ colorScheme = (name) => tr.b.FixedColorSchemeRegistry.lookUp(
+ this.diagnostic.colorScheme).getColor(name);
+ } else {
+ colorScheme = (name) => DEFAULT_COLOR_SCHEME.colorForKey(name);
+ }
- // Let the row compute its percentage.
- row.tableSum = tableSum;
+ const tableRows = [];
+ let tableSum = 0;
+ const histogramNames = [];
+ for (const [name, value] of this.diagnostic) {
+ const row = new BreakdownTableRow(
+ name, value, this.chart_.unit, colorScheme(name));
+ tableRows.push(row);
+ if (row.numberValue !== undefined) tableSum += row.numberValue;
+ if (row.isHistogram) {
+ histogramNames.push(value.name);
+ }
+ }
+ tableRows.sort((x, y) => x.compare(y));
+
+ if (tableSum > 0) {
+ let summaryDisplayElement = tableSum;
+ if (this.chart_.unit !== undefined) {
+ summaryDisplayElement = this.chart_.unit.format(tableSum);
+ }
+ summaryDisplayElement = tr.ui.b.createSpan({
+ textContent: summaryDisplayElement,
+ });
+ tableRows.unshift(new BreakdownTableSummaryRow(
+ summaryDisplayElement, histogramNames));
+ }
- // Add it to the chart.
- chartData[row.name] = row.numberValue;
+ const chartData = {x: 0};
+ for (const row of tableRows) {
+ if (row.numberValue === undefined) continue;
- // Configure the colors.
- const dataSeries = this.chart_.getDataSeries(row.name);
- dataSeries.color = row.color;
- dataSeries.highlightedColor = row.highlightedColor;
- }
+ // Let the row compute its percentage.
+ row.tableSum = tableSum;
- if (tableRows.length > 0) {
- this.$.table.style.display = 'block';
- this.$.empty.style.display = 'none';
- this.$.table.tableRows = tableRows;
- this.$.table.rebuild();
- }
+ // Add it to the chart.
+ chartData[row.name] = row.numberValue;
- if (Object.keys(chartData).length > 1) {
- this.$.container.style.display = 'block';
- this.$.empty.style.display = 'none';
- this.chart_.data = [chartData];
+ // Configure the colors.
+ const dataSeries = this.chart_.getDataSeries(row.name);
+ dataSeries.color = row.color;
+ dataSeries.highlightedColor = row.highlightedColor;
+ }
+
+ if (tableRows.length > 0) {
+ this.$.table.style.display = 'block';
+ this.$.empty.style.display = 'none';
+ this.$.table.tableRows = tableRows;
+ this.$.table.rebuild();
+ }
+
+ if (Object.keys(chartData).length > 1) {
+ this.$.container.style.display = 'block';
+ this.$.empty.style.display = 'none';
+ this.chart_.data = [chartData];
+ }
}
- }
+ });
+
+ return {};
});
</script>
« no previous file with comments | « tracing/trace_viewer.gypi ('k') | tracing/tracing/value/ui/breakdown_span_test.html » ('j') | tracing/tracing/value/ui/diagnostic_span_behavior.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698