Bug 1569630 - Make it easy to profile all threads r=gregtatum

Differential Revision: https://phabricator.services.mozilla.com/D58712

--HG--
extra : moz-landing-system : lando

devtools/client/performance-new/components/Settings.js

@@ -70,6 +70,7 @@ const {
   h3,
   section,
   p,
+  em,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 const Range = createFactory(
   require("devtools/client/performance-new/components/Range")
@@ -453,6 +454,25 @@ class Settings extends PureComponent {
           { className: "perf-settings-thread-columns" },
           threadColumns.map(this._renderThreadsColumns)
         ),
+        div(
+          { className: "perf-settings-all-threads" },
+          label(
+            {
+              className: "perf-settings-checkbox-label",
+            },
+            input({
+              className: "perf-settings-checkbox",
+              id: "perf-settings-thread-checkbox-all-threads",
+              type: "checkbox",
+              value: "*",
+              checked: threads.includes("*"),
+              onChange: this._handleThreadCheckboxChange,
+            }),
+            "Bypass selections above and record ",
+            em(null, "all"),
+            " registered threads"
+          )
+        ),
         div(
           { className: "perf-settings-row" },
           label(

devtools/client/performance-new/test/chrome/test_perf-settings-threads.html

@@ -78,6 +78,21 @@
         is(threadTextEl.value, "GeckoMain,DOM Worker,StyleThread",
           "Another thread was in the thread text input");
 
+        // Enable profiling of all threads
+        const allThreadsCheckbox = document.querySelector(
+          "#perf-settings-thread-checkbox-all-threads");
+        allThreadsCheckbox.click();
+        is(selectors.getThreads(getState()).join(","), "GeckoMain,DOM Worker,StyleThread,*",
+           "Asterisk was added")
+        is(threadTextEl.value, "GeckoMain,DOM Worker,StyleThread,*",
+          "Asterisk was in the thread text input");
+
+        // Remove the asterisk
+        setReactFriendlyInputValue(threadTextEl, "GeckoMain,DOM Worker,StyleThread");
+        threadTextEl.dispatchEvent(new Event("blur", { bubbles: true }));
+        ok(!allThreadsCheckbox.checked,
+          "The all threads checkbox is not checked.");
+
         // Start the profiler by clicking the start button, and flushing the async
         // calls out to the mock perf front.
         document.querySelector("button").click();

devtools/client/themes/perf.css

@@ -231,7 +231,7 @@
 }
 
 .perf-settings-thread-columns {
-  margin-bottom: 20px;
+  margin-bottom: 5px;
   display: flex;
   line-height: 2;
 }
@@ -240,6 +240,10 @@
   flex: 1;
 }
 
+.perf-settings-all-threads {
+  margin-bottom: 14px;
+}
+
 .perf-settings-checkbox-label {
   display: block;
 }