3 files changed, 269 insertions, 0 deletions
diff --git a/tools/tryselect/selectors/chooser/static/filter.js b/tools/tryselect/selectors/chooser/static/filter.js
new file mode 100644
index 0000000000..2d8731e61f
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/static/filter.js
@@ -0,0 +1,116 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const selection = $("#selection")[0];
+const count = $("#selection-count")[0];
+const pluralize = (count, noun, suffix = "s") =>
+  `${count} ${noun}${count !== 1 ? suffix : ""}`;
+
+var selected = [];
+
+var updateLabels = () => {
+  $(".tab-pane.active > .filter-label").each(function (index) {
+    let box = $("#" + this.htmlFor)[0];
+    let method = box.checked ? "add" : "remove";
+    $(this)[method + "Class"]("is-checked");
+  });
+};
+
+var apply = () => {
+  let filters = {};
+  let kinds = [];
+
+  $(".filter:checked").each(function (index) {
+    for (let kind of this.name.split(",")) {
+      if (!kinds.includes(kind)) {
+        kinds.push(kind);
+      }
+    }
+
+    // Checkbox element values are generated by Section.get_context() in app.py
+    let attrs = JSON.parse(this.value);
+    for (let attr in attrs) {
+      if (!(attr in filters)) {
+        filters[attr] = [];
+      }
+
+      let values = attrs[attr];
+      filters[attr] = filters[attr].concat(values);
+    }
+  });
+  updateLabels();
+
+  if (
+    !Object.keys(filters).length ||
+    (Object.keys(filters).length == 1 && "build_type" in filters)
+  ) {
+    selection.value = "";
+    count.innerHTML = "0 tasks selected";
+    return;
+  }
+
+  var taskMatches = label => {
+    let task = tasks[label];
+
+    // If no box for the given kind has been checked, this task is
+    // automatically not selected.
+    if (!kinds.includes(task.kind)) {
+      return false;
+    }
+
+    for (let attr in filters) {
+      let values = filters[attr];
+      if (!(attr in task) || values.includes(task[attr])) {
+        continue;
+      }
+      return false;
+    }
+    return true;
+  };
+
+  selected = Object.keys(tasks).filter(taskMatches);
+  applyChunks();
+};
+
+var applyChunks = () => {
+  // For tasks that have a chunk filter applied, we handle that here.
+  let filters = {};
+  $(".filter:text").each(function (index) {
+    let value = $(this).val();
+    if (value === "") {
+      return;
+    }
+
+    let attrs = JSON.parse(this.name);
+    let key = `${attrs.unittest_suite}-${attrs.unittest_flavor}`;
+    if (!(key in filters)) {
+      filters[key] = [];
+    }
+
+    // Parse the chunk strings. These are formatted like printer page setups, e.g: "1,4-6,9"
+    for (let item of value.split(",")) {
+      if (!item.includes("-")) {
+        filters[key].push(parseInt(item));
+        continue;
+      }
+
+      let [start, end] = item.split("-");
+      for (let i = parseInt(start); i <= parseInt(end); ++i) {
+        filters[key].push(i);
+      }
+    }
+  });
+
+  let chunked = selected.filter(function (label) {
+    let task = tasks[label];
+    let key = task.unittest_suite + "-" + task.unittest_flavor;
+    if (key in filters && !filters[key].includes(parseInt(task.test_chunk))) {
+      return false;
+    }
+    return true;
+  });
+
+  selection.value = chunked.join("\n");
+  count.innerText = pluralize(chunked.length, "task") + " selected";
+};
diff --git a/tools/tryselect/selectors/chooser/static/select.js b/tools/tryselect/selectors/chooser/static/select.js
new file mode 100644
index 0000000000..8a315c0a52
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/static/select.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const labels = $("label.multiselect");
+const boxes = $("label.multiselect input:checkbox");
+var lastChecked = {};
+
+// implements shift+click
+labels.click(function (e) {
+  if (e.target.tagName === "INPUT") {
+    return;
+  }
+
+  let box = $("#" + this.htmlFor)[0];
+  let activeSection = $("div.tab-pane.active")[0].id;
+
+  if (activeSection in lastChecked) {
+    // Bug 559506 - In Firefox shift/ctrl/alt+clicking a label doesn't check the box.
+    let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+
+    if (e.shiftKey) {
+      if (isFirefox) {
+        box.checked = !box.checked;
+      }
+
+      let start = boxes.index(box);
+      let end = boxes.index(lastChecked[activeSection]);
+
+      boxes
+        .slice(Math.min(start, end), Math.max(start, end) + 1)
+        .prop("checked", box.checked);
+      apply();
+    }
+  }
+
+  lastChecked[activeSection] = box;
+});
+
+function selectAll(btn) {
+  let checked = !!btn.value;
+  $("div.active label.filter-label").each(function (index) {
+    $(this).find("input:checkbox")[0].checked = checked;
+  });
+  apply();
+}
diff --git a/tools/tryselect/selectors/chooser/static/style.css b/tools/tryselect/selectors/chooser/static/style.css
new file mode 100644
index 0000000000..6b2f96935b
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/static/style.css
@@ -0,0 +1,107 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  padding-top: 70px;
+}
+
+/* Tabs */
+
+#tabbar .nav-link {
+  color: #009570;
+  font-size: 18px;
+  padding-bottom: 15px;
+  padding-top: 15px;
+}
+
+#tabbar .nav-link.active {
+  color: #212529;
+}
+
+#tabbar .nav-link:hover {
+  color: #0f5a3a;
+}
+
+/* Sections */
+
+.tab-content button {
+  font-size: 14px;
+  margin-bottom: 5px;
+  margin-top: 10px;
+}
+
+.filter-label {
+  display: block;
+  font-size: 16px;
+  position: relative;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-bottom: 0;
+  user-select: none;
+  vertical-align: middle;
+}
+
+.filter-label span {
+  display: flex;
+  min-height: 34px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filter-label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  height: 0;
+  width: 0;
+}
+
+.filter-label input[type="text"] {
+  width: 50px;
+}
+
+.filter-label:hover {
+  background-color: #91a0b0;
+}
+
+.filter-label.is-checked:hover {
+  background-color: #91a0b0;
+}
+
+.filter-label.is-checked {
+  background-color: #404c59;
+  color: white;
+}
+
+/* Preview pane */
+
+#preview {
+  position: fixed;
+  height: 100vh;
+  margin-left: 66%;
+  width: 100%;
+}
+
+#submit-tasks {
+  display: flex;
+  flex-direction: column;
+  height: 80%;
+}
+
+#buttons {
+  display: flex;
+  justify-content: space-between;
+}
+
+#push {
+  background-color: #00e9b7;
+  margin-left: 5px;
+  width: 100%;
+}
+
+#selection {
+  height: 100%;
+  width: 100%;
+}