Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

10 files changed, 736 insertions, 0 deletions

diff --git a/tools/tryselect/selectors/chooser/.eslintrc.js b/tools/tryselect/selectors/chooser/.eslintrc.js
new file mode 100644
index 0000000000..861d6bafc2
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/.eslintrc.js
@@ -0,0 +1,16 @@
+/* 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/. */
+
+"use strict";
+
+module.exports = {
+  env: {
+    jquery: true,
+  },
+  globals: {
+    apply: true,
+    applyChunks: true,
+    tasks: true,
+  },
+};
diff --git a/tools/tryselect/selectors/chooser/__init__.py b/tools/tryselect/selectors/chooser/__init__.py
new file mode 100644
index 0000000000..91c0b55712
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/__init__.py
@@ -0,0 +1,96 @@
+# 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/.
+
+from __future__ import absolute_import, print_function, unicode_literals
+
+import os
+import webbrowser
+from threading import Timer
+
+from tryselect.cli import BaseTryParser
+from tryselect.push import (
+    check_working_directory,
+    generate_try_task_config,
+    push_to_try,
+)
+from tryselect.tasks import generate_tasks
+
+from taskgraph.target_tasks import filter_by_uncommon_try_tasks
+
+here = os.path.abspath(os.path.dirname(__file__))
+
+
+class ChooserParser(BaseTryParser):
+    name = "chooser"
+    arguments = []
+    common_groups = ["push", "task"]
+    task_configs = [
+        "artifact",
+        "browsertime",
+        "chemspill-prio",
+        "disable-pgo",
+        "env",
+        "gecko-profile",
+        "path",
+        "pernosco",
+        "rebuild",
+        "worker-overrides",
+    ]
+
+
+def run(
+    update=False,
+    query=None,
+    try_config=None,
+    full=False,
+    parameters=None,
+    save=False,
+    preset=None,
+    mod_presets=False,
+    push=True,
+    message="{msg}",
+    closed_tree=False,
+):
+    from .app import create_application
+
+    check_working_directory(push)
+
+    tg = generate_tasks(parameters, full)
+
+    # Remove tasks that are not to be shown unless `--full` is specified.
+    if not full:
+        blacklisted_tasks = [
+            label
+            for label in tg.tasks.keys()
+            if not filter_by_uncommon_try_tasks(label)
+        ]
+        for task in blacklisted_tasks:
+            tg.tasks.pop(task)
+
+    app = create_application(tg)
+
+    if os.environ.get("WERKZEUG_RUN_MAIN") == "true":
+        # we are in the reloader process, don't open the browser or do any try stuff
+        app.run()
+        return
+
+    # give app a second to start before opening the browser
+    url = "http://127.0.0.1:5000"
+    Timer(1, lambda: webbrowser.open(url)).start()
+    print("Starting trychooser on {}".format(url))
+    app.run()
+
+    selected = app.tasks
+    if not selected:
+        print("no tasks selected")
+        return
+
+    msg = "Try Chooser Enhanced ({} tasks selected)".format(len(selected))
+    return push_to_try(
+        "chooser",
+        message.format(msg=msg),
+        try_task_config=generate_try_task_config("chooser", selected, try_config),
+        push=push,
+        closed_tree=closed_tree,
+    )
diff --git a/tools/tryselect/selectors/chooser/app.py b/tools/tryselect/selectors/chooser/app.py
new file mode 100644
index 0000000000..d09e620517
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/app.py
@@ -0,0 +1,183 @@
+# 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/.
+
+from __future__ import absolute_import, print_function
+
+from abc import ABCMeta, abstractproperty
+from collections import defaultdict
+
+from flask import (
+    Flask,
+    render_template,
+    request,
+)
+
+SECTIONS = []
+SUPPORTED_KINDS = set()
+
+
+def register_section(cls):
+    assert issubclass(cls, Section)
+    instance = cls()
+    SECTIONS.append(instance)
+    SUPPORTED_KINDS.update(instance.kind.split(","))
+
+
+class Section(object):
+    __metaclass__ = ABCMeta
+
+    @abstractproperty
+    def name(self):
+        pass
+
+    @abstractproperty
+    def kind(self):
+        pass
+
+    @abstractproperty
+    def title(self):
+        pass
+
+    @abstractproperty
+    def attrs(self):
+        pass
+
+    def contains(self, task):
+        return task.kind in self.kind.split(",")
+
+    def get_context(self, tasks):
+        labels = defaultdict(lambda: {"max_chunk": 0, "attrs": defaultdict(list)})
+
+        for task in tasks.values():
+            if not self.contains(task):
+                continue
+
+            task = task.attributes
+            label = labels[self.labelfn(task)]
+            for attr in self.attrs:
+                if attr in task and task[attr] not in label["attrs"][attr]:
+                    label["attrs"][attr].append(task[attr])
+
+                if "test_chunk" in task:
+                    label["max_chunk"] = max(
+                        label["max_chunk"], int(task["test_chunk"])
+                    )
+
+        return {
+            "name": self.name,
+            "kind": self.kind,
+            "title": self.title,
+            "labels": labels,
+        }
+
+
+@register_section
+class Platform(Section):
+    name = "platform"
+    kind = "build"
+    title = "Platforms"
+    attrs = ["build_platform"]
+
+    def labelfn(self, task):
+        return task["build_platform"]
+
+    def contains(self, task):
+        if not Section.contains(self, task):
+            return False
+
+        # android-stuff tasks aren't actual platforms
+        return task.task["tags"].get("android-stuff", False) != "true"
+
+
+@register_section
+class Test(Section):
+    name = "test"
+    kind = "test"
+    title = "Test Suites"
+    attrs = ["unittest_suite"]
+
+    def labelfn(self, task):
+        suite = task["unittest_suite"].replace(" ", "-")
+
+        if suite.endswith("-chunked"):
+            suite = suite[: -len("-chunked")]
+
+        return suite
+
+    def contains(self, task):
+        if not Section.contains(self, task):
+            return False
+        return task.attributes["unittest_suite"] not in ("raptor", "talos")
+
+
+@register_section
+class Perf(Section):
+    name = "perf"
+    kind = "test"
+    title = "Performance"
+    attrs = ["unittest_suite", "raptor_try_name", "talos_try_name"]
+
+    def labelfn(self, task):
+        suite = task["unittest_suite"]
+        label = task["{}_try_name".format(suite)]
+
+        if not label.startswith(suite):
+            label = "{}-{}".format(suite, label)
+
+        if label.endswith("-e10s"):
+            label = label[: -len("-e10s")]
+
+        return label
+
+    def contains(self, task):
+        if not Section.contains(self, task):
+            return False
+        return task.attributes["unittest_suite"] in ("raptor", "talos")
+
+
+@register_section
+class Analysis(Section):
+    name = "analysis"
+    kind = "build,static-analysis-autotest"
+    title = "Analysis"
+    attrs = ["build_platform"]
+
+    def labelfn(self, task):
+        return task["build_platform"]
+
+    def contains(self, task):
+        if not Section.contains(self, task):
+            return False
+        if task.kind == "build":
+            return task.task["tags"].get("android-stuff", False) == "true"
+        return True
+
+
+def create_application(tg):
+    tasks = {l: t for l, t in tg.tasks.items() if t.kind in SUPPORTED_KINDS}
+    sections = [s.get_context(tasks) for s in SECTIONS]
+    context = {
+        "tasks": {l: t.attributes for l, t in tasks.items()},
+        "sections": sections,
+    }
+
+    app = Flask(__name__)
+    app.env = "development"
+    app.tasks = []
+
+    @app.route("/", methods=["GET", "POST"])
+    def chooser():
+        if request.method == "GET":
+            return render_template("chooser.html", **context)
+
+        if request.form["action"] == "Push":
+            labels = request.form["selected-tasks"].splitlines()
+            app.tasks.extend(labels)
+
+        shutdown = request.environ.get("werkzeug.server.shutdown")
+        if shutdown:
+            shutdown()
+        return render_template("close.html")
+
+    return app
diff --git a/tools/tryselect/selectors/chooser/requirements.txt b/tools/tryselect/selectors/chooser/requirements.txt
new file mode 100644
index 0000000000..642274f337
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/requirements.txt
@@ -0,0 +1,44 @@
+Flask==1.0.2 \
+    --hash=sha256:2271c0070dbcb5275fad4a82e29f23ab92682dc45f9dfbc22c02ba9b9322ce48 \
+    --hash=sha256:a080b744b7e345ccfcbc77954861cb05b3c63786e93f2b3875e0913d44b43f05
+click==7.1.2 \
+    --hash=sha256:d2b5255c7c6349bc1bd1e59e08cd12acbbd63ce649f2588755783aa94dfb6b1a \
+    --hash=sha256:dacca89f4bfadd5de3d7489b7c8a566eee0d3676333fbb50030263894c38c0dc
+Werkzeug==0.14.1 \
+    --hash=sha256:c3fd7a7d41976d9f44db327260e263132466836cef6f91512889ed60ad26557c \
+    --hash=sha256:d5da73735293558eb1651ee2fddc4d0dedcfa06538b8813a2e20011583c9e49b
+itsdangerous==1.1.0 \
+    --hash=sha256:321b033d07f2a4136d3ec762eac9f16a10ccd60f53c0c91af90217ace7ba1f19 \
+    --hash=sha256:b12271b2047cb23eeb98c8b5622e2e5c5e9abd9784a153e9d8ef9cb4dd09d749
+Jinja2==2.10 \
+    --hash=sha256:74c935a1b8bb9a3947c50a54766a969d4846290e1e788ea44c1392163723c3bd \
+    --hash=sha256:f84be1bb0040caca4cea721fcbbbbd61f9be9464ca236387158b0feea01914a4
+MarkupSafe==1.1.1 \
+    --hash=sha256:00bc623926325b26bb9605ae9eae8a215691f33cae5df11ca5424f06f2d1f473 \
+    --hash=sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161 \
+    --hash=sha256:09c4b7f37d6c648cb13f9230d847adf22f8171b1ccc4d5682398e77f40309235 \
+    --hash=sha256:1027c282dad077d0bae18be6794e6b6b8c91d58ed8a8d89a89d59693b9131db5 \
+    --hash=sha256:24982cc2533820871eba85ba648cd53d8623687ff11cbb805be4ff7b4c971aff \
+    --hash=sha256:29872e92839765e546828bb7754a68c418d927cd064fd4708fab9fe9c8bb116b \
+    --hash=sha256:43a55c2930bbc139570ac2452adf3d70cdbb3cfe5912c71cdce1c2c6bbd9c5d1 \
+    --hash=sha256:46c99d2de99945ec5cb54f23c8cd5689f6d7177305ebff350a58ce5f8de1669e \
+    --hash=sha256:500d4957e52ddc3351cabf489e79c91c17f6e0899158447047588650b5e69183 \
+    --hash=sha256:535f6fc4d397c1563d08b88e485c3496cf5784e927af890fb3c3aac7f933ec66 \
+    --hash=sha256:62fe6c95e3ec8a7fad637b7f3d372c15ec1caa01ab47926cfdf7a75b40e0eac1 \
+    --hash=sha256:6dd73240d2af64df90aa7c4e7481e23825ea70af4b4922f8ede5b9e35f78a3b1 \
+    --hash=sha256:717ba8fe3ae9cc0006d7c451f0bb265ee07739daf76355d06366154ee68d221e \
+    --hash=sha256:79855e1c5b8da654cf486b830bd42c06e8780cea587384cf6545b7d9ac013a0b \
+    --hash=sha256:7c1699dfe0cf8ff607dbdcc1e9b9af1755371f92a68f706051cc8c37d447c905 \
+    --hash=sha256:88e5fcfb52ee7b911e8bb6d6aa2fd21fbecc674eadd44118a9cc3863f938e735 \
+    --hash=sha256:8defac2f2ccd6805ebf65f5eeb132adcf2ab57aa11fdf4c0dd5169a004710e7d \
+    --hash=sha256:98c7086708b163d425c67c7a91bad6e466bb99d797aa64f965e9d25c12111a5e \
+    --hash=sha256:9add70b36c5666a2ed02b43b335fe19002ee5235efd4b8a89bfcf9005bebac0d \
+    --hash=sha256:9bf40443012702a1d2070043cb6291650a0841ece432556f784f004937f0f32c \
+    --hash=sha256:ade5e387d2ad0d7ebf59146cc00c8044acbd863725f887353a10df825fc8ae21 \
+    --hash=sha256:b00c1de48212e4cc9603895652c5c410df699856a2853135b3967591e4beebc2 \
+    --hash=sha256:b1282f8c00509d99fef04d8ba936b156d419be841854fe901d8ae224c59f0be5 \
+    --hash=sha256:b2051432115498d3562c084a49bba65d97cf251f5a331c64a12ee7e04dacc51b \
+    --hash=sha256:ba59edeaa2fc6114428f1637ffff42da1e311e29382d81b339c1817d37ec93c6 \
+    --hash=sha256:c8716a48d94b06bb3b2524c2b77e055fb313aeb4ea620c8dd03a105574ba704f \
+    --hash=sha256:cd5df75523866410809ca100dc9681e301e3c27567cf498077e8551b6d20e42f \
+    --hash=sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7
diff --git a/tools/tryselect/selectors/chooser/static/filter.js b/tools/tryselect/selectors/chooser/static/filter.js
new file mode 100644
index 0000000000..132372665b
--- /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 == 0 ||
+    (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..439f979457
--- /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..2945e4ee12
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/static/style.css
@@ -0,0 +1,108 @@
+/* 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;
+  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%;
+}
diff --git a/tools/tryselect/selectors/chooser/templates/chooser.html b/tools/tryselect/selectors/chooser/templates/chooser.html
new file mode 100644
index 0000000000..d89870ac77
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/templates/chooser.html
@@ -0,0 +1,78 @@
+<!-- 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/. -->
+
+{% extends 'layout.html' %}
+{% block content %}
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-8">
+      <div class="form-group form-inline">
+        <span class="col-form-label col-md-2 pt-1">Build Type</span>
+        <div class="form-check form-check-inline">
+          <input id="both" class="filter form-check-input" type="radio" name="buildtype" value='{}' onchange="apply();" checked>
+          <label for="both" class="form-check-label">both</label>
+        </div>
+        {% for type in ["opt", "debug"] %}
+        <div class="form-check form-check-inline">
+          <input id="{{ type }}" class="filter form-check-input" type="radio" name="buildtype" value='{"build_type": "{{ type }}"}' onchange="apply();">
+          <label for={{ type }} class="form-check-label">{{ type }}</label>
+        </div>
+        {% endfor %}
+      </div>
+      <ul class="nav nav-tabs" id="tabbar" role="tablist">
+        {% for section in sections %}
+        <li class="nav-item">
+          {% if loop.first %}
+          <a class="nav-link active" id="{{ section.name }}-tab" data-toggle="tab" href="#{{section.name }}" role="tab" aria-controls="{{ section.name }}" aria-selected="true">{{ section.title }}</a>
+          {% else %}
+          <a class="nav-link" id="{{ section.name }}-tab" data-toggle="tab" href="#{{section.name }}" role="tab" aria-controls="{{ section.name }}" aria-selected="false">{{ section.title }}</a>
+          {% endif %}
+        </li>
+        {% endfor %}
+      </ul>
+      <div class="tab-content">
+        <button type="button" class="btn btn-secondary" value="true" onclick="selectAll(this);">Select All</button>
+        <button type="button" class="btn btn-secondary" onclick="selectAll(this);">Deselect All</button>
+        {% for section in sections %}
+        {% if loop.first %}
+        <div class="tab-pane show active" id="{{ section.name }}" role="tabpanel" aria-labelledby="{{ section.name }}-tab">
+        {% else %}
+        <div class="tab-pane" id="{{ section.name }}" role="tabpanel" aria-labelledby="{{ section.name }}-tab">
+        {% endif %}
+          {% for label, meta in section.labels|dictsort %}
+          <label class="multiselect filter-label" for={{ label }}>
+            <span>
+              {{ label }}
+              <input class="filter" type="checkbox" id={{ label }} name="{{ section.kind }}" value='{{ meta.attrs|tojson|safe }}' onchange="console.log('checkbox onchange triggered');apply();">
+              {% if meta.max_chunk > 1 %}
+              <input class="filter" type="text" pattern="^[0-9][0-9,-]*$" placeholder="1-{{ meta.max_chunk }}" name='{{ meta.attrs|tojson|safe }}' oninput="applyChunks();">
+              {% endif %}
+            </span>
+          </label>
+          {% endfor %}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="col-4" id="preview">
+      <form id="submit-tasks" action="" method="POST">
+        <textarea id="selection" name="selected-tasks" wrap="off"></textarea>
+        <span id="selection-count">0 tasks selected</span><br>
+        <span id="buttons">
+          <input id="cancel" class="btn btn-default" type="submit" name="action" value="Cancel">
+          <input id="push" class="btn btn-default" type="submit" name="action" value="Push">
+        </span>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  const tasks = {{ tasks|tojson|safe }};
+</script>
+<script src="{{ url_for('static', filename='filter.js') }}"></script>
+<script src="{{ url_for('static', filename='select.js') }}"></script>
+{% endblock %}
diff --git a/tools/tryselect/selectors/chooser/templates/close.html b/tools/tryselect/selectors/chooser/templates/close.html
new file mode 100644
index 0000000000..622f9f38b2
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/templates/close.html
@@ -0,0 +1,12 @@
+<!-- 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/. -->
+
+{% extends 'layout.html' %}
+{% block content %}
+<div class="container-fluid">
+  <div class="alert alert-primary" role="alert">
+    You may now close this page.
+  </div>
+</div>
+{% endblock %}
diff --git a/tools/tryselect/selectors/chooser/templates/layout.html b/tools/tryselect/selectors/chooser/templates/layout.html
new file mode 100644
index 0000000000..4dfd27b46b
--- /dev/null
+++ b/tools/tryselect/selectors/chooser/templates/layout.html
@@ -0,0 +1,37 @@
+<!-- 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/. -->
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Try Chooser Enhanced</title>
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    </head>
+    <body>
+        <nav class="navbar navbar-default fixed-top navbar-dark bg-dark">
+          <div class="container-fluid">
+            <span class="navbar-brand mb-0 h1">Try Chooser Enhanced</span>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul class="navbar-nav mr-auto">
+                <li class="nav-item">
+                  <a class="nav-link" href="https://firefox-source-docs.mozilla.org/tools/try/index.html">Documentation</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="https://treeherder.mozilla.org/#/jobs?repo=try">Treeherder</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+        {% block content %}{% endblock %}
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+        {% block scripts %}{% endblock %}
+    </body>
+</html>