<!--
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>