5 <title>WebKit Performance Monitor (Beta)</title>
7 <link rel="prefetch" href="../data/manifest.json">
8 <script type="application/json" src="../data/manifest.json"></script>
10 <link rel="stylesheet" href="app.css">
11 <link rel="stylesheet" href="chart-pane.css">
13 <script src="js/jquery.min.js" defer></script>
14 <script src="js/jquery.min.js" defer></script>
15 <script src="js/handlebars.js" defer></script>
16 <script src="js/ember.js" defer></script>
17 <script src="js/ember-data.js" defer></script>
18 <script src="js/d3/d3.min.js" defer></script>
19 <script src="js/statistics.js" defer></script>
20 <script src="data.js" defer></script>
21 <script src="app.js" defer></script>
22 <script src="manifest.js" defer></script>
23 <script src="analysis.js" defer></script>
24 <script src="popup.js" defer></script>
25 <script src="interactive-chart.js" defer></script>
26 <script src="commits-viewer.js" defer></script>
28 <script type="text/x-handlebars" data-template-name="dashboard">
31 {{view App.NumberOfDaysControlView tagName="ul" numberOfDays=numberOfDays}}
34 <a href="#" class="control-button" {{action toggleEditMode}}>
35 {{#if controller.editMode}}
45 <table {{bind-attr class=":dashboard editMode:editMode:readonly"}}>
49 {{#each headerColumns}}
50 {{#if controller.editMode}}
52 <a href="#" title="Remove column" {{action "removeColumn" index}}>
53 {{partial "close-button"}}
61 {{#if controller.editMode}}
62 <td>{{input value=newColumnHeader action="addColumn" placeholder="Add a column"}}</td>
69 {{#if controller.editMode}}
71 <a href="#" title="Remove row" {{action "removeRow" this}}>
72 {{partial "close-button"}}
74 {{input value=header}}
77 <th><span class="label">{{header}}</span></th>
82 {{#if controller.editMode}}
83 {{view App.PopupView list=pickerData label='Choose'}}
87 <div class="dashboard-status">
89 {{latestStatus.currentValue}} {{chartData.unit}}
90 {{#if latestStatus.label}}
91 <span {{bind-attr class=":status-label latestStatus.className"}}>{{latestStatus.label}}</span>
95 {{#link-to 'charts' (query-params paneList=paneList since=controller.since)}}
98 domain=controller.sharedDomain
99 enableSelection=false}}
103 <div class="failure">{{failure}}</div>
105 <div class="progress">{{partial "spinner"}}</div>
108 {{#if controller.editMode}}
109 <a href="#" title="Reset pane" class="reset" {{action "resetPane" this}}>
110 {{partial "close-button"}}
116 {{#if controller.editMode}}
121 {{#if controller.editMode}}
123 <td>{{input value=newRowHeader action="addRow" placeholder="Add a row"}}</td>
134 <script type="text/x-handlebars" data-template-name="charts">
137 <ul class="controls">
138 <li>{{view App.PopupView list=platforms label='Add pane'}}</li>
140 <ul class="controls">
141 <li>{{view App.StartTimeSliderView startTime=startTime oldestStartTime=oldestStartTime}}</li>
145 {{#each panes itemController="pane"}}
146 <section class="chart-pane" tabindex="0">
148 <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{ platform.name}}</h1>
149 <a href="#" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
150 {{#if movingAverageStrategies}}
151 <a href="#" title="Statistical Tools" class="stat-button" {{action "toggleStatPane"}}>{{partial "stat-button"}}</a>
153 {{#if App.Manifest.bugTrackers}}
154 <a href="#" title="Analysis" class="bugs-button" {{action "toggleBugsPane"}}>
155 {{partial "analysis-button"}}
158 {{#if App.Manifest.repositoriesWithReportedCommits}}
159 <a href="#" title="Search" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
164 <div class="svg-container">
168 ranges=analyticRanges
169 domain=mainPlotDomain
172 currentItem=hoveredOrSelectedItem
173 currentTime=sharedTime
174 selectedItem=selectedItem
175 highlightedItems=highlightedItems
176 rangeRoute="analysisTask"
178 selectedPoints=selectedPoints
179 showFullYAxis=showFullYAxis
184 <div class="failure">{{failure}}</div>
186 <div class="progress">{{partial "spinner"}}</div>
190 <div class="details">
191 <div class="overview">
196 domain=overviewDomain
197 selection=overviewSelection}}
200 <div class="details-table-container">
201 {{partial "chart-details"}}
206 <div {{bind-attr class=":popup-pane :analysis-pane showingAnalysisPane::hidden"}}>
207 <label>Name: {{input type=text value=newAnalysisTaskName}}</label>
208 <button {{action "createAnalysisTask"}} {{bind-attr disabled=cannotAnalyze}}>Analyze</button>
211 <form {{bind-attr class=":popup-pane :search-pane showingSearchPane::hidden"}}>
212 <span class="repositories">
214 content=App.Manifest.repositoriesWithReportedCommits
215 optionValuePath='content.id'
216 optionLabelPath='content.name'
217 selection=commitSearchRepository}}
219 {{input action="searchCommit" placeholder="Name or email" value=commitSearchKeyword}}
222 {{partial "stat-pane"}}
227 <script type="text/x-handlebars" data-template-name="components/interactive-chart">
229 <div class="selection-toolbar" style="display: none;">
230 <a href="#" class="button" {{action "zoom"}}>
231 <svg class="zoom" viewBox="0 0 100 100">
232 <g stroke-width="0" stroke="none">
233 <polygon points="25,25 5,50 25,75"/>
234 <polygon points="75,25 95,50 75,75"/>
236 <line x1="20" y1="50" x2="80" y2="50" stroke-width="10"></line>
241 <div class="rangeBarsContainerInlineStyle">
243 {{#link-to linkRoute linkId title=label}}
244 <span class="rangeBar" {{bind-attr style=inlineStyle}}></span>
250 <script type="text/x-handlebars" data-template-name="chart-details">
252 <table class="details-table">
254 {{#each details.bugTrackers}}
260 <a {{bind-attr href=bugUrl}} target="_blank">{{bugNumber}}</a>
267 <tbody class="status">
271 {{details.status.currentValue}} {{chartData.unit}}
272 {{#if details.status.valueDelta}}
273 ({{details.status.valueDelta}} {{chartData.unit}} / {{details.status.relativeDelta}})
275 {{#if details.status.label}}
277 <span {{bind-attr class=details.status.className}}>{{details.status.label}}</span>
283 {{#if details.buildNumber}}
287 {{#if details.buildURL}}
288 <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
290 {{details.buildNumber}}
292 ({{details.buildTime}})
296 {{#each details.revisions}}
301 <a {{bind-attr href=url}} target="_blank">{{label}}</a>
310 <div class="commits">
311 {{#each details.revisions}}
312 {{commits-viewer repository=repository revisionInfo=this caption=name}}
318 <script type="text/x-handlebars" data-template-name="components/commits-viewer">
320 <table {{bind-attr class=":commits-viewer visible::hidden"}}>
322 <caption {{action toggleVisibility}}>{{caption}} commits</caption>
330 <a {{bind-attr href=url}} target="_blank">{{revision}}</a>
345 <script type="text/x-handlebars" data-template-name="close-button">
346 <svg class="close-button icon-button" viewBox="0 0 100 100">
347 <g stroke="black" stroke-width="10">
348 <circle cx="50" cy="50" r="45" fill="transparent"/>
349 <polygon points="30,30 70,70" />
350 <polygon points="30,70 70,30" />
355 <script type="text/x-handlebars" data-template-name="stat-button">
356 <svg class="stat-button icon-button" viewBox="10 0 110 100">
357 <g stroke="none" stroke-width="0" fill="black">
358 <path id="upper-sigma" d="M 5 5 H 95 V 40 h -10 c -5 -20 -5 -20 -25 -20 H 35 L 60 50 l -20 0" />
359 <use xlink:href="#upper-sigma" transform="translate(0, 100) scale(1, -1)" />
364 <script type="text/x-handlebars" data-template-name="stat-pane">
365 <section {{bind-attr class=":popup-pane :stat-pane showingStatPane::hidden"}}>
366 <section class="stat-option">
367 <h1>Moving average</h1>
368 <label>Type: {{view Ember.Select
369 content=movingAverageStrategies
370 optionValuePath='content'
371 optionLabelPath='content.label'
372 selection=chosenMovingAverageStrategy}}</label>
373 {{#each chosenMovingAverageStrategy.parameterList}}
374 <label>{{label}}: {{input type="number" value=value min=min max=max step=step}}</label>
377 {{#if chosenMovingAverageStrategy.execute}}
378 <section class="stat-option">
380 <label>Type: {{view Ember.Select
381 content=envelopingStrategies
382 optionValuePath='content'
383 optionLabelPath='content.label'
384 selection=chosenEnvelopingStrategy}}</label>
385 {{#if chosenEnvelopingStrategy.description}}
386 <p class="description">{{chosenEnvelopingStrategy.description}}</p>
388 {{#each chosenEnvelopingStrategy.parameterList}}
389 <label>{{label}}: <input type="number" {{bind-attr value=value min=min max=max step=step}}></label>
393 {{#if chosenEnvelopingStrategy.execute}}
394 <section class="stat-option">
395 <h1>Anomaly Detection</h1>
396 {{#each anomalyDetectionStrategies}}
397 <label {{bind-attr title=description}}>{{input type="checkbox" name=id checked=enabled}}{{label}}</label>
404 <script type="text/x-handlebars" data-template-name="analysis-button">
405 <svg class="analysis-button icon-button" viewBox="0 0 100 100">
406 <g stroke="black" fill="black" stroke-width="15">
407 <circle cx="50" cy="50" r="40" fill="transparent"/>
408 <line x1="50" y1="25" x2="50" y2="55"/>
409 <circle cx="50" cy="67.5" r="10" stroke="none"/>
414 <script type="text/x-handlebars" data-template-name="search-button">
415 <svg class="search-button icon-button" viewBox="0 0 100 100">
416 <g stroke="black" stroke-width="15">
417 <circle cx="60" cy="40" r="30" fill="transparent"/>
418 <line x1="10" y1="90" x2="40" y2="60"/>
423 <script type="text/x-handlebars" data-template-name="spinner">
424 <svg class="spinner" viewBox="0 0 100 100">
425 <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
426 <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
427 <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
428 <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
429 <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
430 <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
431 <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
432 <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
436 <script type="text/x-handlebars" data-template-name="navbar">
437 <nav id="navigation" role="navigation">
438 <h1><a href="#">WebKit Perf Monitor</a></h1>
440 {{#each App.Manifest.dashboards}}
442 {{#link-to 'dashboard' name tagName='li'}}
443 {{#link-to 'dashboard' name}}{{label}}{{/link-to}}
447 {{#link-to 'charts' tagName='li'}}
448 {{#link-to 'charts'}}Charts{{/link-to}}
450 {{#link-to 'analysis' tagName='li'}}
451 {{#link-to 'analysis'}}Analysis{{/link-to}}
457 <script type="text/x-handlebars" data-template-name="number-of-days-controls">
458 <li class="numberOfDaysIs1">
459 <a href="#" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
461 <li class="numberOfDaysIs7">
462 <a href="#" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
464 <li class="numberOfDaysIs30">
465 <a href="#" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
467 <li class="numberOfDaysIs90">
468 <a href="#" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
470 <li class="numberOfDaysIs183">
471 <a href="#" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
473 <li class="numberOfDaysIs365">
474 <a href="#" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
478 <script type="text/x-handlebars" data-template-name="start-time-slider">
479 <label><input type="range"> <span class="numberOfDays">X</span> days</label>
482 <script type="text/x-handlebars" data-template-name="popup">
483 <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
484 {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
487 <script type="text/x-handlebars" data-template-name="popup-list">
491 {{else }} {{#if children}}
492 <li>{{view App.PopupView list=children label=label}}</li>
496 <a href="#" class="label" {{action actionName actionArgument}}>{{label}}</a>
498 <a class="label">{{label}}</a>
505 <script type="text/x-handlebars" data-template-name="analysis">
510 <table id="analysis-tasks">
519 {{#each model.tasks}}
521 <td>{{#link-to 'analysisTask' id}}{{id}}{{/link-to}}</td>
523 <td>{{createdAt}}</td>
530 <script type="text/x-handlebars" data-template-name="analysisTask">
535 <h2 id="analysis-task-title">{{label}}</h2>
536 {{#if platform.label}}
537 <h3 id="analysis-task-testname">{{metric.fullName}} - {{platform.label}}</h3>
541 <section class="analysis-chart-pane chart-pane" tabindex="0">
542 <div class="svg-container">
544 chartData=pane.chartData
545 ranges=pane.analyticRanges
546 domain=overviewDomain
549 currentItem=pane.hoveredOrSelectedItem
550 selectedPoints=pane.selectedPoints
552 highlightedItems=highlightedItems
553 rangeRoute="analysisTask"}}
555 <div class="details">
556 <div class="details-table-container">
557 <table class="analysis-bugs">
559 {{#each bugTrackers}}
563 <form {{action "associateBug" this editedBugNumber on="submit"}}>
564 {{input type=text value=editedBugNumber}}
571 {{partial "chart-details"}}
577 {{partial "testGroupForm"}}
579 {{#each testGroupPanes}}
580 {{partial "testGroup"}}
584 <script type="text/x-handlebars" data-template-name="testGroup">
585 <section class="analysis-group">
587 <table class="results">
590 <td colspan="2">Configuration</td>
591 {{#each repositories}}
598 {{#each configurations}}
599 <tbody {{bind-attr class="showRequestList::hideRequests"}}>
600 <tr class="summary" {{action toggleShowRequestList this}}>
601 <td class="config-letter" colspan="2">{{summary.configLetter}}</td>
603 {{partial "testGroupRow"}}
609 <td class="config-letter" {{action toggleShowRequestList this}}></td>
611 <td>Run {{orderLabel}}</td>
612 {{partial "testGroupRow"}}
618 <div class="reference-chart">
619 {{#if referenceChart}}
621 chartData=referenceChart.data
622 domain=overviewDomain
625 enableSelection=false
626 highlightedItems=referenceChart.highlightedItems}}
632 <script type="text/x-handlebars" data-template-name="testGroupRow">
633 {{#each revisionList}}
638 {{box-plot range=valueRange value=value delta=confidenceIntervalDelta}}
643 <a {{bind-attr href=url title=buildLabel}}>{{statusLabel}}</a>
647 <script type="text/x-handlebars" data-template-name="testGroupForm">
648 <form method="POST" {{action "createTestGroup" newTestGroupName repetitionCount on="submit"}}>
649 <section class="analysis-group">
650 <h1>{{input name="name" value=newTestGroupName placeholder="Test group name" required=true type="text"}}</h1>
654 <th>Configuration</th>
655 {{#each configurations}}
661 {{#each rootConfigurations}}
665 <td>{{view Ember.Select name=name content=options disabled=true
666 optionValuePath="content.value" optionLabelPath="content.label"
667 selection=selection}}</td>
673 <label>Number of runs {{view Ember.Select content=possibleRepetitionCounts value=repetitionCount}}</label>
674 <button type="submit">Start A/B testing</button>