ct/res/imp/chromium-perf-sk.html

<!--
  The <chromium-perf-sk> custom element declaration. Displays a form that allows the user to queue a
  task to test Chromium/Skia performance.

  Attributes:
    benchmarks: Which benchmarks to show. Must be set.
    platformsToDesc: Map of platforms to their descriptions. Must be set.
    platforms: List of all supported platforms. Must be set.
    pageSets: List of all supported page sets, as accepted by page-set-selector-sk property
      pageSets. Must be set.

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="chromium-perf-sk">
  <style>
    paper-input {
      width: 20em;
    }

    .iron-selected {
      background-color: #D6ECF2;
    }

    .long-field {
      width: 40em;
    }

    .hidden {
      display: none;
    }

    .short-field {
      width: 5em;
    }

    .smaller-font {
      font-size: 80%;
    }

    iron-selector.long-field > div {
      width: 40em;
    }

    iron-selector.medium-field > div {
      width: 20em;
    }

    iron-selector.short-field > div {
      width: 5em;
    }

    table.options td {
      padding: 1em 2em;
    }

    td.center {
      text-align:center;
      padding-top:2em;
    }

    .panel {
      @apply(--shadow-elevation-2dp);
    }
  </style>
  <template>

    <paper-dialog heading="Confirmation" id="confirm_dialog">
      <div>Proceed with queueing task?</div>
      <paper-button id="task_dismiss">Cancel</paper-button>
      <paper-button id="task_confirm" autofocus>OK</paper-button>
    </paper-dialog>

    <table class="options panel">
      <tr>
        <td>Benchmark Name</td>
        <td>
          <autocomplete-input-sk id="benchmark_name"
            value="{{selectedBenchmarkName}}"
            autocomplete="[[benchmarks]]"
            display-options-on-focus="true"
            accept-custom-value="true"
            label="Hit <enter> at end if entering custom benchmark"
          ></autocomplete-input-sk>
        </td>
      </tr>

      <tr>
        <td>Target Platform</td>
        <td>
          <iron-selector attr-for-selected="id" id="target_platform" selected="Linux" class="medium-field">
            <template is="dom-repeat" items="{{platforms}}">
              <div id="{{item}}">{{getPlatformDesc(item)}}</div>
            </template>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>PageSets Type</td>
        <td>
          <page-set-selector-sk id="page_sets" page-sets="{{pageSets}}"></page-set-selector-sk>
          <custom-webpages-sk id="custom_webpages"></custom-webpages-sk>
        </td>
      </tr>

      <tr>
        <td>
           Run in Parallel<br/>
           Read about the trade-offs <a href="https://docs.google.com/document/d/1GhqosQcwsy6F-eBAmFn_ITDF7_Iv_rY9FhCKwAnk9qQ/edit?pli=1#heading=h.xz46aihphb8z">here</a>
        </td>
        <td>
          <iron-selector attr-for-selected="id" id="run_in_parallel" selected="False" class="long-field">
            <div id="True">True (Works only for Linux rasterize_and_record_micro runs)</div>
            <div id="False">False</div>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>Benchmark Arguments</td>
        <td>
          <paper-input value="--output-format=csv-pivot-table --pageset-repeat=1" id="benchmark_args" class="long-field"></paper-input>
          <span class="smaller-font"><b>Note:</b> Change the --pageset-repeat value if you would like lower/higher repeats of each web page. 1 will be used if the argument is removed.</span>
        </td>
      </tr>

      <tr>
        <td>Browser Arguments (nopatch run)</td>
        <td>
          <paper-input value="" id="browser_args_nopatch" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>Browser Arguments (withpatch run)</td>
        <td>
          <paper-input value="" id="browser_args_withpatch" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>
          Chromium Git patch (optional)<br/>
          Applied to Chromium ToT
        </td>
        <td>
          <patch-sk id="chromium_patch"
                    patch-type="chromium"
                    cl-description="{{chromiumClDescription}}">
          </patch-sk>
          <paper-checkbox id="benchmark_patch" checked>
            Apply this patch when running benchmarks?
            Documentation is <a href="https://docs.google.com/document/d/1GhqosQcwsy6F-eBAmFn_ITDF7_Iv_rY9FhCKwAnk9qQ/edit#heading=h.d3d1e25u2mzy">here</a>
          </paper-checkbox>
        </td>
      </tr>

      <tr>
        <td>
          Skia Git patch (optional)<br/>
          Applied to Skia Rev in <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/DEPS">DEPS</a>
        </td>
        <td>
          <patch-sk id="skia_patch"
                    patch-type="skia"
                    cl-description="{{skiaClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>
          Catapult Git patch (optional)<br/>
          Applied to Catapult Rev in <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/DEPS">DEPS</a>
        </td>
        <td>
          <patch-sk id="catapult_patch"
                    patch-type="catapult"
                    cl-description="{{catapultClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>Repeat this task</td>
        <td>
          <repeat-after-days-sk id="repeat_after_days"></repeat-after-days-sk>
        </td>
      </tr>

      <tr>
        <td>Description</td>
        <td>
          <paper-input value="" id="desc" label="Description is required"></paper-input>
        </td>
      </tr>

      <tr>
        <td colspan="2" class="center">
          <paper-button raised id="submit_task">Queue Task</paper-button>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="center">
          <paper-button raised id="view_history">View runs history</paper-button>
        </td>
      </tr>
    </table>

    <br/><br/>

  </template>
</dom-module>

<script>
   Polymer({
     is: "chromium-perf-sk",
     properties: {
       benchmarks: {
         type: Array,
         value: [],
       },
       platforms: {
         type: Array,
         value: [],
       },
       platformsToDesc: {
         type: Object,
         value: {},
       },
       pageSets: {
         type: Array,
         observer: 'pageSetsChanged',
       },
       defaultLinuxBrowserArgs: {
         type: String,
         value: "",
       },
       chromiumClDescription: String,
       skiaClDescription: String,
       catapultClDescription: String,
       selectedBenchmarkName: String,
     },

     observers: [
       "clDescriptionChanged(chromiumClDescription, skiaClDescription, catapultClDescription)"
     ],

     ready: function() {
       var that = this;
       this.$.target_platform.addEventListener('click', function(e) {
         that.platformChanged();
         that.setRunInParallel();
       });
       this.$.submit_task.addEventListener('click', function(e) {
         that.validateTask();
       });
       this.$.task_dismiss.addEventListener('click', function(e) {
         that.dismissTask();
       });
       this.$.task_confirm.addEventListener('click', function(e) {
         that.queueTask();
       });
       this.$.view_history.addEventListener('click', function(e) {
         that.gotoRunsHistory();
       });
       this.$.custom_webpages.addEventListener('click', function(e) {
         // Do not display the pagesets selector if custom webpages is open.
         that.$.page_sets.hidden = that.$.custom_webpages.webpagesOpened;
         if (!that.$.custom_webpages.webpagesOpened) {
           // Clear out webpages if it is no longer open.
           that.$.custom_webpages.webpages = '';
         }
       });
       this.platformChanged();
       this.setRunInParallel();
     },

     getPlatformDesc: function(platform) {
       if (this.platformsToDesc) {
         return this.platformsToDesc[platform];
       }
     },

     pageSetsChanged: function() {
       // CT's chromium perf does not support 1M, 100K and PDFs.
       for (var i=this.pageSets.length-1; i>=0; i--) {
         if (ctfe.pageSets.getKey(this.pageSets[i]) == "All" ||
             ctfe.pageSets.getKey(this.pageSets[i]).endsWith("100k") ||
             ctfe.pageSets.getKey(this.pageSets[i]).startsWith("PDF")) {
           this.pageSets.splice(i, 1);
         }
       }
     },

     setRunInParallel: function() {
       if (this.selectedBenchmarkName == "rasterize_and_record_micro" &&
           this.$.target_platform.selected == "Linux") {
         // Decided to leave this False to give the more consistent results
         // by default to users. Should be revisited when parallel runs give
         // better results.
         this.$.run_in_parallel.selected = "False"
       } else {
         this.$.run_in_parallel.selected = "False"
       }
     },

     platformChanged: function() {
       if (this.$.target_platform.selected == "Linux") {
         this.$.page_sets.selected = "10k";
         this.$.browser_args_nopatch.value = this.defaultLinuxBrowserArgs;
         this.$.browser_args_withpatch.value = this.defaultLinuxBrowserArgs;
       } else {
         this.$.page_sets.selected = "Mobile10k";
         this.$.browser_args_nopatch.value = "";
         this.$.browser_args_withpatch.value = "";
       }
     },

     clDescriptionChanged: function(chromiumClDesc, skiaClDesc, catapultClDesc) {
       this.$.desc.value = ctfe.getDescriptionOfCls(chromiumClDesc, skiaClDesc, catapultClDesc)
     },

     validateTask: function() {
       if (!this.$.chromium_patch.validate() ||
           !this.$.skia_patch.validate() ||
           !this.$.catapult_patch.validate()) {
         return;
       }
       if (! this.$.desc.value) {
         sk.errorMessage("Please specify a description");
         this.$.desc.focus();
         return;
       }
       if (! this.selectedBenchmarkName) {
         sk.errorMessage("Please specify a benchmark");
         this.$.benchmark_name.focus();
         return;
       }
       if (ctfe.moreThanOneActiveTask($$$("drawer-sk").sizeOfUserQueue)) {
         return;
       }
       this.$.confirm_dialog.open()
     },

     dismissTask: function() {
       sk.errorMessage("Did not queue");
       this.$.confirm_dialog.close()
     },

     getRepeatValue: function() {
       // If "--pageset-repeat" is specified in benchmark args then use that
       // value else use "1".
       var rx = /--pageset-repeat[ =](\d+)/gm
       var m = rx.exec(this.$.benchmark_args.value);
       if (m) {
         return m[1];
       } else {
         return "1";
       }
     },

     queueTask: function() {
       var params = {};
       params["benchmark"] = this.selectedBenchmarkName;
       params["platform"] = this.$.target_platform.selected;
       params["page_sets"] = this.$.page_sets.selected;
       params["custom_webpages"] = this.$.custom_webpages.webpages;
       params["repeat_runs"] = this.getRepeatValue();
       params["run_in_parallel"] = this.$.run_in_parallel.selected;
       params["benchmark_args"] = this.$.benchmark_args.value;
       params["browser_args_nopatch"] = this.$.browser_args_nopatch.value;
       params["browser_args_withpatch"] = this.$.browser_args_withpatch.value;
       params["desc"] = this.$.desc.value;
       params["chromium_patch"] = this.$.chromium_patch.patch;
       params["skia_patch"] = this.$.skia_patch.patch;
       params["catapult_patch"] = this.$.catapult_patch.patch;
       if (this.$.benchmark_patch.checked) {
         params["benchmark_patch"] = this.$.chromium_patch.patch;
       }
       params["repeat_after_days"] = this.$.repeat_after_days.selected;

       var that = this;
       sk.post("/_/add_chromium_perf_task", JSON.stringify(params)).then(function(resp) {
         that.gotoRunsHistory();
       }).catch(sk.errorMessage);
     },

     gotoRunsHistory: function() {
       window.location.href = "/chromium_perf_runs/";
     },
   });
</script>