<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[196390] trunk/Websites/perf.webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/196390">196390</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2016-02-10 13:18:02 -0800 (Wed, 10 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Removed the duplicated definition of ChartPaneBase.
* public/v3/components/chart-pane-base.js:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv3componentschartpanebasejs">trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsitesperfwebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/ChangeLog (196389 => 196390)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog 2016-02-10 21:10:37 UTC (rev 196389)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2016-02-10 21:18:02 UTC (rev 196390)
</span><span class="lines">@@ -1,3 +1,9 @@
</span><ins>+2016-02-10 Ryosuke Niwa <rniwa@webkit.org>
+
+ Removed the duplicated definition of ChartPaneBase.
+
+ * public/v3/components/chart-pane-base.js:
+
</ins><span class="cx"> 2016-02-09 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> Analysis task page on v3 UI should show charts
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv3componentschartpanebasejs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js (196389 => 196390)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js 2016-02-10 21:10:37 UTC (rev 196389)
+++ trunk/Websites/perf.webkit.org/public/v3/components/chart-pane-base.js 2016-02-10 21:18:02 UTC (rev 196390)
</span><span class="lines">@@ -302,311 +302,3 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> }
</span><del>-
-class ChartPaneBase extends ComponentBase {
-
- constructor(name)
- {
- super(name);
-
- this._errorMessage = null;
- this._platformId = null;
- this._metricId = null;
- this._platform = null;
- this._metric = null;
-
- this._overviewChart = null;
- this._mainChart = null;
- this._mainChartStatus = null;
- this._commitLogViewer = null;
- }
-
- configure(platformId, metricId)
- {
- var result = ChartStyles.createChartSourceList(platformId, metricId);
- this._errorMessage = result.error;
- this._platformId = platformId;
- this._metricId = metricId;
- this._platform = result.platform;
- this._metric = result.metric;
-
- this._overviewChart = null;
- this._mainChart = null;
- this._mainChartStatus = null;
-
- this._commitLogViewer = this.content().querySelector('commit-log-viewer').component();
-
- if (result.error)
- return;
-
- var formatter = result.metric.makeFormatter(4);
- var self = this;
-
- var overviewOptions = ChartStyles.overviewChartOptions(formatter);
- overviewOptions.selection.onchange = this._overviewSelectionDidChange.bind(this);
-
- this._overviewChart = new InteractiveTimeSeriesChart(result.sourceList, overviewOptions);
- this.renderReplace(this.content().querySelector('.chart-pane-overview'), this._overviewChart);
-
- var mainOptions = ChartStyles.mainChartOptions(formatter);
- mainOptions.indicator.onchange = this._indicatorDidChange.bind(this);
- mainOptions.selection.onchange = this._mainSelectionDidChange.bind(this);
- mainOptions.selection.onzoom = this._mainSelectionDidZoom.bind(this);
- mainOptions.annotations.onclick = this._openAnalysisTask.bind(this);
- mainOptions.ondata = this._didFetchData.bind(this);
- this._mainChart = new InteractiveTimeSeriesChart(result.sourceList, mainOptions);
- this.renderReplace(this.content().querySelector('.chart-pane-main'), this._mainChart);
-
- this._mainChartStatus = new ChartPaneStatusView(result.metric, this._mainChart, this._openCommitViewer.bind(this));
- this.renderReplace(this.content().querySelector('.chart-pane-details'), this._mainChartStatus);
-
- this.content().querySelector('.chart-pane').addEventListener('keyup', this._keyup.bind(this));
-
- this._fetchAnalysisTasks(platformId, metricId);
- }
-
- _fetchAnalysisTasks(platformId, metricId)
- {
- var self = this;
- AnalysisTask.fetchByPlatformAndMetric(platformId, metricId).then(function (tasks) {
- self._mainChart.setAnnotations(tasks.map(function (task) {
- var fillStyle = '#fc6';
- switch (task.changeType()) {
- case 'inconclusive':
- fillStyle = '#fcc';
- case 'progression':
- fillStyle = '#39f';
- break;
- case 'regression':
- fillStyle = '#c60';
- break;
- case 'unchanged':
- fillStyle = '#ccc';
- break;
- }
-
- return {
- task: task,
- startTime: task.startTime(),
- endTime: task.endTime(),
- label: task.label(),
- fillStyle: fillStyle,
- };
- }));
- });
- }
-
- platformId() { return this._platformId; }
- metricId() { return this._metricId; }
-
- setOverviewDomain(startTime, endTime)
- {
- if (this._overviewChart)
- this._overviewChart.setDomain(startTime, endTime);
- }
-
- setMainDomain(startTime, endTime)
- {
- if (this._mainChart)
- this._mainChart.setDomain(startTime, endTime);
- }
-
- _overviewSelectionDidChange(domain, didEndDrag) { }
-
- _mainSelectionDidChange(selection, didEndDrag)
- {
- this.render();
- }
-
- _mainSelectionDidZoom(selection)
- {
- this._overviewChart.setSelection(selection, this);
- this._mainChart.setSelection(null);
- this.render();
- }
-
- _indicatorDidChange(indicatorID, isLocked)
- {
- this._mainChartStatus.updateRevisionListWithNotification();
- this.render();
- }
-
- _didFetchData()
- {
- this._mainChartStatus.updateRevisionListWithNotification();
- this.render();
- }
-
- _openAnalysisTask()
- { }
-
- _openCommitViewer(repository, from, to)
- {
- this._mainChartStatus.setCurrentRepository(repository);
- this._commitLogViewer.view(repository, from, to).then(this.render.bind(this));
- this.render();
- }
-
- _keyup(event)
- {
- switch (event.keyCode) {
- case 37: // Left
- if (!this._mainChart.moveLockedIndicatorWithNotification(false))
- return;
- break;
- case 39: // Right
- if (!this._mainChart.moveLockedIndicatorWithNotification(true))
- return;
- break;
- case 38: // Up
- if (!this._mainChartStatus.moveRepositoryWithNotification(false))
- return;
- case 40: // Down
- if (!this._mainChartStatus.moveRepositoryWithNotification(true))
- return;
- default:
- return;
- }
-
- this.render();
-
- event.preventDefault();
- event.stopPropagation();
- }
-
- render()
- {
- Instrumentation.startMeasuringTime('ChartPane', 'render');
-
- super.render();
-
- if (this._errorMessage) {
- this.renderReplace(this.content().querySelector('.chart-pane-main'), this._errorMessage);
- return;
- }
-
- if (this._mainChartStatus) {
- this._mainChartStatus.render();
- this._renderActionToolbar();
- }
-
- var body = this.content().querySelector('.chart-pane-body');
- if (this._commitLogViewer && this._commitLogViewer.currentRepository()) {
- body.classList.add('has-second-sidebar');
- this._commitLogViewer.render();
- } else
- body.classList.remove('has-second-sidebar');
-
- Instrumentation.endMeasuringTime('ChartPane', 'render');
- }
-
- _renderActionToolbar() { }
-
- static htmlTemplate()
- {
- return `
- <section class="chart-pane" tabindex="0">
- ${this.paneHeaderTemplate()}
- <div class="chart-pane-body">
- <div class="chart-pane-main"></div>
- <div class="chart-pane-sidebar">
- <div class="chart-pane-overview"></div>
- <div class="chart-pane-details"></div>
- </div>
- <div class="chart-pane-second-sidebar">
- <commit-log-viewer></commit-log-viewer>
- </div>
- </div>
- </section>
- `;
- }
-
- static paneHeaderTemplate() { return ''; }
-
- static cssTemplate()
- {
- return Toolbar.cssTemplate() + `
- .chart-pane {
- margin: 1rem;
- margin-bottom: 2rem;
- padding: 0rem;
- height: 18rem;
- outline: none;
- }
-
- .chart-pane:focus .chart-pane-header {
- background: rgba(204, 153, 51, 0.1);
- }
-
- .chart-pane-body {
- position: relative;
- width: 100%;
- height: 100%;
- }
-
- .chart-pane-main {
- padding-right: 20rem;
- height: 100%;
- margin: 0;
- vertical-align: middle;
- text-align: center;
- }
-
- .has-second-sidebar .chart-pane-main {
- padding-right: 40rem;
- }
-
- .chart-pane-main > * {
- width: 100%;
- height: 100%;
- }
-
- .chart-pane-sidebar,
- .chart-pane-second-sidebar {
- position: absolute;
- right: 0;
- top: 0;
- width: 0;
- border-left: solid 1px #ccc;
- height: 100%;
- }
-
- :not(.has-second-sidebar) > .chart-pane-second-sidebar {
- border-left: 0;
- }
-
- .chart-pane-sidebar {
- width: 20rem;
- }
-
- .has-second-sidebar .chart-pane-sidebar {
- right: 20rem;
- }
-
- .has-second-sidebar .chart-pane-second-sidebar {
- width: 20rem;
- }
-
- .chart-pane-overview {
- width: 100%;
- height: 5rem;
- border-bottom: solid 1px #ccc;
- }
-
- .chart-pane-overview > * {
- display: block;
- width: 100%;
- height: 100%;
- }
-
- .chart-pane-details {
- position: relative;
- display: block;
- height: calc(100% - 5.5rem - 2px);
- overflow-y: scroll;
- padding-top: 0.5rem;
- }
- `;
- }
-
-}
</del></span></pre>
</div>
</div>
</body>
</html>