Websites/perf.webkit.org/public/v2/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta charset="utf-8">
   5     <title>WebKit Performance Monitor (Beta)</title>
   6     <script src="js/jquery.min.js" defer></script>
   7     <script src="js/handlebars.js" defer></script>
   8     <script src="js/ember.js" defer></script>
   9     <script src="js/ember-data.js" defer></script>
  10     <script src="js/d3/d3.min.js" defer></script>
  11     <script src="js/statistics.js" defer></script>
  12     <script src="data.js" defer></script>
  13     <script src="app.js" defer></script>
  14     <script src="manifest.js" defer></script>
  15     <script src="popup.js" defer></script>
  16     <link rel="stylesheet" href="app.css">
  17     <link rel="stylesheet" href="chart-pane.css">
  18
  19     <script type="text/x-handlebars" data-template-name="index">
  20         <header id="header">
  21             {{partial "navbar"}}
  22             {{view App.NumberOfDaysControlView tagName="ul" numberOfDays=numberOfDays}}
  23             <ul class="controls">
  24                 <li>
  25                     <a href="#" class="control-button" {{action toggleEditMode}}>
  26                         {{#if controller.editMode}}
  27                             Finish editing
  28                         {{else}}
  29                             Edit
  30                         {{/if}}
  31                     </a>
  32                 </li>
  33             </ul>
  34         </header>
  35
  36         <table {{bind-attr class=":dashboard editMode:editMode:readonly"}}>
  37         <thead>
  38             <tr>
  39                 <td></td>
  40                 {{#each headerColumns}}
  41                     {{#if controller.editMode}}
  42                         <th>
  43                             <a href="#" title="Remove column" {{action "removeColumn" index}}>
  44                                 {{partial "close-button"}}
  45                             </a>
  46                             {{input value=label}}
  47                         </th>
  48                     {{else}}
  49                         <th>{{label}}</th>
  50                     {{/if}}
  51                 {{/each}}
  52                 {{#if controller.editMode}}
  53                     <td>{{input value=newColumnHeader action="addColumn" placeholder="Add a column"}}</td>
  54                 {{/if}}
  55             </tr>
  56         </thead>
  57         <tbody>
  58             {{#each rows}}
  59                 <tr>
  60                     {{#if controller.editMode}}
  61                         <th>
  62                             <a href="#" title="Remove row" {{action "removeRow" this}}>
  63                                 {{partial "close-button"}}
  64                             </a>
  65                             {{input value=header}}
  66                         </th>
  67                     {{else}}
  68                         <th><span class="label">{{header}}</span></th>
  69                     {{/if}}
  70                     {{#each cells}}
  71                         <td>
  72                             {{#if empty}}
  73                                 {{#if controller.editMode}}
  74                                     {{view App.PopupView list=pickerData label='Choose'}}
  75                                 {{/if}}
  76                             {{else}}
  77                                 {{#if chartData}}
  78                                     {{#link-to 'charts' (query-params paneList=paneList)}}
  79                                     {{interactive-chart
  80                                         chartData=chartData
  81                                         domain=controller.sharedDomain
  82                                         enableSelection=false}}
  83                                     {{/link-to}}
  84                                 {{else}}
  85                                     {{#if failure}}
  86                                         <div class="failure">{{failure}}</div>
  87                                     {{else}}
  88                                         <div class="progress">{{partial "spinner"}}</div>
  89                                     {{/if}}
  90                                 {{/if}}
  91                                 {{#if controller.editMode}}
  92                                     <a href="#" title="Reset pane" class="reset" {{action "resetPane" this}}>
  93                                         {{partial "close-button"}}
  94                                     </a>
  95                                 {{/if}}
  96                             {{/if}}
  97                         </td>
  98                     {{/each}}
  99                     {{#if controller.editMode}}
 100                         <td></td>
 101                     {{/if}}
 102                 </tr>
 103             {{/each}}
 104             {{#if controller.editMode}}
 105                 <tr>
 106                     <td>{{input value=newRowHeader action="addRow" placeholder="Add a row"}}</td>
 107                     {{#each emptyRow}}
 108                         <td></td>
 109                     {{/each}}
 110                     <td></td>
 111                 </tr>
 112             {{/if}}
 113         </tbody>
 114         </table>
 115     </script>
 116
 117     <script type="text/x-handlebars" data-template-name="charts">
 118         <header id="header">
 119             {{partial "navbar"}}
 120             <ul class="controls">
 121                 <li>{{view App.PopupView list=platforms label='Add pane'}}</li>
 122             </ul>
 123             <ul class="controls">
 124                 <li>{{view App.StartTimeSliderView startTime=startTime oldestStartTime=oldestStartTime}}</li>
 125             </ul>
 126         </header>
 127
 128         {{#each panes itemController="pane"}}
 129             <section class="chart-pane" tabindex="0">
 130                 <header>
 131                     <h1 {{action "toggleDetails"}}>
 132                     {{#each metric.path}}
 133                         {{this}} &ni;
 134                     {{/each}}
 135                     {{metric.label}}
 136                     - {{ platform.name}}</h2>
 137                     <a href="#" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
 138                     {{#if App.Manifest.bugTrackers}}
 139                         <a href="#" title="Bugs"
 140                             {{bind-attr class=":bugs-button singlySelectedPoint::disabled"}}
 141                             {{action "toggleBugsPane"}}>
 142                             {{partial "bugs-button"}}
 143                         </a>
 144                     {{/if}}
 145                     {{#if App.Manifest.repositoriesWithReportedCommits}}
 146                         <a href="#" title="Search" class="search-button" {{action "toggleSearchPane"}}>{{partial "search-button"}}</a>
 147                     {{/if}}
 148                 </header>
 149
 150                 <div class="body">
 151                     <div class="svg-container">
 152                     {{#if chartData}}
 153                         {{interactive-chart
 154                             chartData=chartData
 155                             domain=mainPlotDomain
 156                             interactive=true
 157                             currentItem=currentItem
 158                             currentTime=sharedTime
 159                             selectedItem=selectedItem
 160                             highlightedItems=highlightedItems
 161                             selection=timeRange
 162                             sharedSelection=sharedSelection
 163                             selectionChanged="rangeChanged"
 164                             selectionIsLocked=timeRangeIsLocked
 165                             bugsChangeCount=bugsChangeCount
 166                             zoom="zoomed"}}
 167                     {{else}}
 168                         {{#if failure}}
 169                             <div class="failure">{{failure}}</div>
 170                         {{else}}
 171                             <div class="progress">{{partial "spinner"}}</div>
 172                         {{/if}}
 173                     {{/if}}
 174                     </div>
 175                     <div class="details">
 176                         <div class="overview">
 177                         {{#if chartData}}
 178                             {{interactive-chart
 179                                 chartData=chartData
 180                                 showYAxis=false
 181                                 domain=overviewDomain
 182                                 domainChanged="overviewDomainChanged"
 183                                 selection=mainPlotDomain
 184                                 selectionChanged="zoomed"}}
 185                         {{/if}}
 186                         </div>
 187                         {{#if details}}
 188                             {{partial "chart-details"}}
 189                         {{/if}}
 190                     </div>
 191                 </div>
 192
 193                 <form {{bind-attr class=":search-pane showingSearchPane::hidden"}}>
 194                     <span class="repositories">
 195                         {{view Ember.Select content=App.Manifest.repositoriesWithReportedCommits
 196                             optionLabelPath='content.id'
 197                             selection=commitSearchRepository}}
 198                     </span>
 199                     {{input action="searchCommit" placeholder="Name or email" value=commitSearchKeyword}}
 200                 </form>
 201
 202                 <div {{bind-attr class=":bugs-pane showingBugsPane::hidden"}}>
 203                     <table>
 204                         {{#each details.bugTrackers}}
 205                             <tr>
 206                                 <th>{{label}}</th>
 207                                 <td>
 208                                     <form {{action "associateBug" this editedBugNumber on="submit"}}>
 209                                         {{input type=text value=editedBugNumber}}
 210                                     </form>
 211                                 </td>
 212                             </tr>
 213                         {{/each}}
 214                     </table>
 215                 </div>
 216
 217             </section>
 218         {{/each}}
 219     </script>
 220
 221     <script type="text/x-handlebars" data-template-name="components/interactive-chart">
 222         {{#if interactive}}
 223             <div class="selection-toolbar" style="display: none;">
 224                 <a href="#" class="button" {{action "zoom"}}>
 225                     <svg class="zoom" viewBox="0 0 100 100">
 226                         <g stroke-width="0" stroke="none">
 227                             <polygon points="25,25 5,50 25,75"/>
 228                             <polygon points="75,25 95,50 75,75"/>
 229                         </g>
 230                         <line x1="20" y1="50" x2="80" y2="50" stroke-width="10"></line>
 231                     </svg>
 232                 </a>
 233             </div>
 234         {{/if}}
 235     </script>
 236
 237     <script type="text/x-handlebars" data-template-name="chart-details">
 238     <div class="details-table-container">
 239         <table class="details-table">
 240             <tbody class="bugs">
 241             {{#each details.bugTrackers}}
 242                 {{#if bugs}}
 243                     <tr>
 244                         <th>{{label}}</th>
 245                         <td>
 246                             {{#each bugs}}
 247                                 <a {{bind-attr href=bugUrl}} target="_blank">{{bugNumber}}</a>
 248                             {{/each}}
 249                         </td>
 250                     </tr>
 251                 {{/if}}
 252             {{/each}}
 253             </tbody>
 254             <tr><th>Current</th><td>{{details.currentValue}} {{chartData.unit}}
 255             {{#if details.oldValue}}
 256                 (from {{details.oldValue}})
 257             {{/if}}</td></tr>
 258             {{#if details.buildNumber}}
 259                 <tr>
 260                     <th>Build</th>
 261                     <td>
 262                         {{#if details.buildURL}}
 263                             <a {{bind-attr href=details.buildURL}} target="_blank">{{details.buildNumber}}</a>
 264                         {{else}}
 265                             {{details.buildNumber}}
 266                         {{/if}}
 267                         ({{details.buildTime}})
 268                     </td>
 269                 </tr>
 270             {{/if}}
 271             {{#each details.revisions}}
 272                 <tr>
 273                     <th>{{name}}</th>
 274                     <td>
 275                         {{#if url}}
 276                             <a {{bind-attr href=url}} target="_blank">{{label}}</a>
 277                         {{else}}
 278                             {{label}}
 279                         {{/if}}
 280                     </td>
 281                 </tr>
 282                 <tr>
 283                     <td colspan="2">{{commits-viewer repository=repository revisionInfo=this}}</td>
 284                 </tr>
 285             {{/each}}
 286         </table>
 287     </div>
 288     </script>
 289
 290     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
 291     {{#if commits}}
 292         <table>
 293             <tbody>
 294                 {{#each commits}}
 295                     <tr>
 296                         <td>
 297                             {{#if url}}
 298                                 <a {{bind-attr href=url}} target="_blank">{{author}}</a>
 299                             {{else}}
 300                                 {{author}}
 301                             {{/if}}
 302                         </td>
 303                         <td>{{message}}</td>
 304                     </tr>
 305                 {{/each}}
 306             </tbody>
 307         </table>
 308     {{/if}}
 309     </script>
 310
 311     <script type="text/x-handlebars" data-template-name="close-button">
 312         <svg class="close-button icon-button" viewBox="0 0 100 100">
 313             <g stroke="black" stroke-width="10">
 314                 <circle cx="50" cy="50" r="45" fill="transparent"/>
 315                 <polygon points="30,30 70,70" />
 316                 <polygon points="30,70 70,30" />
 317             </g>
 318         </svg>
 319     </script>
 320
 321     <script type="text/x-handlebars" data-template-name="bugs-button">
 322         <svg class="bugs-button icon-button" viewBox="0 0 100 100">
 323             <g stroke="black" stroke-width="15">
 324                 <circle cx="50" cy="50" r="40" fill="transparent"/>
 325                 <line x1="50" y1="25" x2="50" y2="55"/>
 326                 <circle cx="50" cy="67.5" r="2.5" fill="transparent"/>
 327             </g>
 328         </svg>
 329     </script>
 330
 331     <script type="text/x-handlebars" data-template-name="search-button">
 332         <svg class="search-button icon-button" viewBox="0 0 100 100">
 333             <g stroke="black" stroke-width="15">
 334                 <circle cx="60" cy="40" r="30" fill="transparent"/>
 335                 <line x1="10" y1="90" x2="40" y2="60"/>
 336             </g>
 337         </svg>
 338     </script>
 339
 340     <script type="text/x-handlebars" data-template-name="spinner">
 341         <svg class="spinner" viewBox="0 0 100 100">
 342             <line x1="10" y1="50" x2="30" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
 343             <line x1="21.72" y1="21.72" x2="35.86" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
 344             <line x1="50" y1="10" x2="50" y2="30" stroke="black" stroke-width="10" stroke-linecap="round"/>
 345             <line x1="78.28" y1="21.72" x2="64.14" y2="35.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
 346             <line x1="70" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="round"/>
 347             <line x1="65.86" y1="65.86" x2="78.28" y2="78.28" stroke="black" stroke-width="10" stroke-linecap="round"/>
 348             <line x1="50" y1="70" x2="50" y2="90" stroke="black" stroke-width="10" stroke-linecap="round"/>
 349             <line x1="21.72" y1="78.28" x2="35.86" y2="65.86" stroke="black" stroke-width="10" stroke-linecap="round"/>
 350         </svg>
 351     </script>
 352
 353     <script type="text/x-handlebars" data-template-name="navbar">
 354         <nav id="navigation" role="navigation">
 355             <h1><a href="#">WebKit Perf Monitor</a></h1>
 356             <ul>
 357                 {{#link-to 'index' tagName='li'}}
 358                     {{#link-to 'index'}}Dashboard{{/link-to}}
 359                 {{/link-to}}
 360                 {{#link-to 'charts' tagName='li'}}
 361                     {{#link-to 'charts'}}Charts{{/link-to}}
 362                 {{/link-to}}
 363             </ul>
 364         </nav>
 365     </script>
 366
 367     <script type="text/x-handlebars" data-template-name="number-of-days-controls">
 368         <li class="numberOfDaysIs1">
 369             <a href="#" class="control-button" {{action "setNumberOfDays" 1}}>1D</a>
 370         </li>
 371         <li class="numberOfDaysIs7">
 372             <a href="#" class="control-button" {{action "setNumberOfDays" 7}}>1W</a>
 373         </li>
 374         <li class="numberOfDaysIs30">
 375             <a href="#" class="control-button" {{action "setNumberOfDays" 30}}>1M</a>
 376         </li>
 377         <li class="numberOfDaysIs90">
 378             <a href="#" class="control-button" {{action "setNumberOfDays" 90}}>3M</a>
 379         </li>
 380         <li class="numberOfDaysIs183">
 381             <a href="#" class="control-button" {{action "setNumberOfDays" 183}}>6M</a>
 382         </li>
 383         <li class="numberOfDaysIs365">
 384             <a href="#" class="control-button" {{action "setNumberOfDays" 365}}>1Y</a>
 385         </li>
 386     </script>
 387
 388     <script type="text/x-handlebars" data-template-name="start-time-slider">
 389         <label><input type="range"> <span class="numberOfDays">X</span> days</label>
 390     </script>
 391
 392     <script type="text/x-handlebars" data-template-name="popup">
 393         <span class="label">{{view App.PopupButtonView tagName="a" label=view.label }}</span>
 394         {{view view.popupListContainerView viewName="popupListContainerViewInstance"}}
 395     </script>
 396
 397     <script type="text/x-handlebars" data-template-name="popup-list">
 398         {{#each view.list}}
 399             {{#if isSeparator}}
 400                 <li><hr></li>
 401             {{else }} {{#if children}}
 402                 <li>{{view App.PopupView list=children label=label}}</li>
 403             {{else}}
 404                 <li>
 405                     {{#if actionName}}
 406                         <a href="#" class="label" {{action actionName actionArgument}}>{{label}}</a>
 407                     {{else}}
 408                         <a class="label">{{label}}</a>
 409                     {{/if}}
 410                 </li>
 411             {{/if}} {{/if}}
 412         {{/each}}
 413     </script>
 414
 415 </head>
 416 <body>
 417 </body>
 418 </html>