| <!-- |
| The trace-form element includes the form for all of the different stages of |
| the trace process after the user clicks on the trace button. |
| --> |
| <link rel="import" href="base-form.html"> |
| <link rel="import" href="xhr-element.html"> |
| |
| <polymer-element name="trace-form" |
| attributes="rerunInfo" |
| extends="base-form"> |
| <template> |
| <style> |
| #ui-container { |
| background: white; |
| border-bottom-color: #999; |
| border: solid 1px #acacac; |
| box-shadow: 0 4px 16px rgba(0,0,0,.2); |
| padding: 16px 20px; |
| position: fixed; |
| z-index: 10000; |
| } |
| |
| #loading { |
| background-color: white; |
| height: 100%; |
| width: 100%; |
| position: absolute; |
| left: 0; |
| top: 0; |
| display: -webkit-flex; |
| display: flex; |
| -webkit-align-items: center; |
| align-items: center; |
| justify-content: center; |
| -webkit-justify-content: center; |
| } |
| |
| input[type=text], input[type=number] { |
| border-radius: 1px; |
| border: 1px solid #d9d9d9; |
| border-top: 1px solid #c0c0c0; |
| font-size: 13px; |
| height: 25px; /* 29px total height incl padding+border */ |
| width: 300px; |
| padding: 1px 2px; |
| } |
| |
| .kennedy-button-submit { |
| background-color: #4d90fe; |
| background-image: -webkit-linear-gradient(top, #4d90fe, #4787ed); |
| background-image: linear-gradient(to bottom, #4d90fe, #4787ed); |
| border: 1px solid #3079ed; |
| color: #fff; |
| } |
| |
| .kennedy-button { |
| background-color: #f5f5f5; |
| background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1); |
| background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1); |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| color: #444; |
| } |
| |
| .kennedy-button, .kennedy-button-submit { |
| border-radius: 2px; |
| font-size: 11px; |
| font-weight: bold; |
| height: 27px; |
| line-height: 27px; |
| min-width: 54px; |
| padding: 0px 8px; |
| -webkit-user-select: none; |
| } |
| |
| .error { |
| color: #dd4b39; |
| } |
| </style> |
| <div id="ui-container" style="display:none"> |
| <xhr-element id="xhr"></xhr-element> |
| |
| <form hidden?="{{!enterData}}" on-submit="{{onSendToTrybot}}"> |
| <table> |
| <tr> |
| <td>Record a before/after trace profile.</td> |
| </tr> |
| <tr> |
| <td>Perf try bot:</td> |
| <td> |
| <input type="text" list="bot-list" id="bot" value="{{bot}}"> |
| <datalist id="bot-list"> |
| <template repeat="{{name in botList}}"> |
| <option value="{{name}}"></option> |
| </template> |
| </datalist> |
| </td> |
| </tr> |
| <tr> |
| <td>Trace Options:</td> |
| <td> |
| <select id="rerun-options"> |
| <option template |
| repeat="{{rerunInfo}}" |
| value="{{option}}">{{name}}</option> |
| </select> |
| </td> |
| </tr> |
| <tr> |
| <td>Good revision:</td> |
| <td><input type="text" |
| name="good_revision" |
| value="{{goodRevision}}" |
| pattern="\d{6}|[0-9a-fA-F]{40}"></td> |
| </tr> |
| <tr> |
| <td>Bad revision:</td> |
| <td><input type="text" |
| name="bad_revision" |
| value="{{badRevision}}" |
| pattern="\d{6}|[0-9a-fA-F]{40}"></td> |
| </tr> |
| <tr> |
| <td colspan="2"> |
| <button class="kennedy-button-submit">Send to perf try bot</button> |
| <button type="button" class="kennedy-button" on-click="{{hide}}">Close</button> |
| </td> |
| </tr> |
| </table> |
| </form> |
| |
| <div hidden?="{{!jobSubmitted}}"> |
| <b>Job submitted!</b><br><br> |
| <a href="https://codereview.chromium.org/{{issueId}}" target="_blank">View |
| issue {{issueId}} in Rietveld.</a><br><br> |
| <button type="button" class="kennedy-button" on-click="{{hide}}">Close</button> |
| </div> |
| |
| <div hidden?="{{!errorMessage}}"> |
| <strong class="error">An error occurred:</strong><br> |
| {{errorMessage}}<br> |
| <button type="button" class="kennedy-button" on-click="{{hide}}">Close</button> |
| </div> |
| <div id="loading"><img src="//www.google.com/images/loading.gif"></div> |
| </div> |
| </template> |
| <script> |
| Polymer('trace-form', { |
| /** |
| * Initializes and shows the trace form. |
| */ |
| show: function() { |
| this.$.loading.style.display = ''; |
| this.$['ui-container'].style.display = ''; |
| this.setStep('enterData'); |
| this.$.xhr.send('/start_try_job', this.xsrfToken, |
| { |
| 'test_path': this.testPath, |
| 'step': 'prefill-info' |
| }, |
| function successCallback(info) { |
| this.bot = info['bisect_bot'] |
| this.botList = info['all_bots']; |
| |
| // Platform.performMicrotaskCheckpoint signals Polymer to update |
| // bound elements based on their model objects. |
| Platform.performMicrotaskCheckpoint(); |
| |
| this.email = info['email']; |
| this.suite = info['suite']; |
| this.page = info['page']; |
| this.updateSize(); // <select> fields may now be much wider. |
| this.$.loading.style.display = 'none'; |
| }.bind(this), |
| function errorCallback(msg) { |
| this.setError(msg); |
| }.bind(this)); |
| }, |
| |
| /** |
| * Gets the currently selected rerun option from the select menu. |
| */ |
| getRerunOptions: function() { |
| var selected = this.$['rerun-options'].selectedOptions[0]; |
| if (selected) { |
| return selected.value; |
| } |
| return null; |
| }, |
| |
| /** |
| * Makes a request to /start_try_job to perform a perf try job. |
| */ |
| onSendToTrybot: function(event) { |
| event.preventDefault(); |
| this.$.loading.style.display = ''; |
| var params = { |
| 'step': 'perform-perf-try', |
| 'bisect_bot': this.bot, |
| 'suite': this.suite, |
| 'good_revision': this.goodRevision, |
| 'bad_revision': this.badRevision, |
| 'page': this.page, |
| 'rerun_option': this.getRerunOptions() |
| }; |
| if (this.bugId) { |
| params['bug_id'] = this.bugId; |
| } |
| this.$.xhr.send( |
| '/start_try_job', this.xsrfToken, params, |
| function(info) { |
| this.issueId = info['issue_id']; |
| this.setStep('jobSubmitted'); |
| this.$.loading.style.display = 'none'; |
| }.bind(this), |
| function(msg) { |
| this.setError(msg); |
| }.bind(this)); |
| } |
| }); |
| </script> |
| </polymer-element> |