[CT] Add ability to run unlanded benchmarks on Chromium Perf

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.
@@ skipping 12 matching lines @@
     }
 
     .iron-selected {
       background-color: #D6ECF2;
     }
 
     .long-field {
       width: 40em;
     }
 
+    .hidden {
+      display: none;
+    }
+
     .short-field {
       width: 5em;
     }
 
     iron-selector.long-field > div {
       width: 40em;
     }
 
     iron-selector.medium-field > div {
       width: 20em;
@@ skipping 25 matching lines @@
     </paper-dialog>
 
     <table class="options panel">
       <tr>
         <td>Benchmark Name</td>
         <td>
           <iron-selector attr-for-selected="id" id="benchmark_name" selected="rasterize_and_record_micro" class="medium-field">
             <template is="dom-repeat" items="{{benchmarks}}">
               <div id="{{item}}">{{item}}</div>
             </template>
+            <div id="custom">custom</div>
           </iron-selector>
+          <paper-input value="" id="custom_benchmark_name" class="hidden" label="Enter name of your custom benchmark"></paper-input>
         </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>
@@ skipping 73 matching lines @@
         </td>
         <td>
           <patch-sk id="skia_patch"
                     patch-type="skia"
                     cl-description="{{skiaClDescription}}">
           </patch-sk>
         </td>
       </tr>
 
       <tr>
+        <td>
+          Telemetry Git patch (optional)<br/>
+          Applied to Chromium ToT<br/>
+          Documentation is <a href="https://docs.google.com/document/d/1GhqosQcwsy6F-eBAmFn_ITDF7_Iv_rY9FhCKwAnk9qQ/edit#heading=h.d3d1e25u2mzy">here</a>
+        </td>
+        <td>
+          <patch-sk id="benchmark_patch"
+                    patch-type="chromium"
+                    cl-description="{{benchmarkClDescription}}">
+          </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>
@@ skipping 36 matching lines @@
        pageSets: {
          type: Array,
          observer: 'pageSetsChanged',
        },
        defaultLinuxBrowserArgs: {
          type: String,
          value: "--disable-setuid-sandbox --enable-threaded-compositing --enable-impl-side-painting",
        },
        chromiumClDescription: String,
        skiaClDescription: String,
+       benchmarkClDescription: String,
      },
 
      observers: [
-       "clDescriptionChanged(chromiumClDescription, skiaClDescription)"
+       "clDescriptionChanged(chromiumClDescription, skiaClDescription, benchmarkClDescription)"
      ],
 
      ready: function() {
        var that = this;
        this.$.benchmark_name.addEventListener('click', function(e) {
          that.setRunInParallel();
+         that.$.custom_benchmark_name.classList.toggle("hidden", that.$.benchmark_name.selected != "custom");
        });
        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();
@@ skipping 38 matching lines @@
          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(chromiumClDescription, skiaClDescription) {
-       if (!chromiumClDescription && !skiaClDescription) {
+     clDescriptionChanged: function(chromiumClDescription, skiaClDescription, benchmarkClDescription) {
+       if (!chromiumClDescription && !skiaClDescription && !benchmarkClDescription) {
          this.$.desc.value = "";
        } else {
          var str = "Testing ";
          var prev = false;
          if (chromiumClDescription) {
            str += chromiumClDescription;
            prev = true;
          }
          if (skiaClDescription) {
            if (prev) {
              str += " and ";
            }
            str += skiaClDescription;
            prev = true;
          }
+         if (benchmarkClDescription) {
+           if (prev) {
+             str += " with ";
+           }
+           str += benchmarkClDescription;
+           prev = true;
+         }
          this.$.desc.value = str;
        }
      },
 
      validateTask: function() {
        if (!this.$.chromium_patch.validate() ||
-           !this.$.skia_patch.validate()) {
+           !this.$.skia_patch.validate() ||
+           !this.$.benchmark_patch.validate()) {
          return;
        }
        if (! this.$.desc.value) {
          sk.errorMessage("Please specify a description");
          this.$.desc.focus();
          return;
        }
+       if (! this.getBenchmarkName()) {
+         sk.errorMessage("Please specify a benchmark");
+         this.$.custom_benchmark_name.focus();
+         return;
+       }
        this.$.confirm_dialog.open()
      },
 
      dismissTask: function() {
        sk.errorMessage("Did not queue");
        this.$.confirm_dialog.close()
      },
 
+     getBenchmarkName: function() {
+       if (this.$.benchmark_name.selected == "custom") {
+         return this.$.custom_benchmark_name.value;
+       }
+       return this.$.benchmark_name.selected;
+     },
+
      queueTask: function() {
        var params = {};
-       params["benchmark"] = this.$.benchmark_name.selected;
+       params["benchmark"] = this.getBenchmarkName();
        params["platform"] = this.$.target_platform.selected;
        params["page_sets"] = this.$.page_sets.selected;
        params["repeat_runs"] = this.$.repeat_runs.selected;
        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["benchmark_patch"] = this.$.benchmark_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>