Bug 1734738 - [aboutprofiling] Disable all threads checkboxes when the 'all threads' checkbox is checked r=jdescottes

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

Author: julienw

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

@@ -66,6 +66,7 @@ const {
   h3,
   section,
   p,
+  span,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 const Range = createFactory(
   require("devtools/client/performance-new/components/Range")
@@ -264,6 +265,7 @@ class Settings extends PureComponent {
    */
   _renderThreadsColumns(threadDisplay, index) {
     const { threads } = this.props;
+    const areAllThreadsIncluded = threads.includes("*");
     return div(
       { className: "perf-settings-thread-column", key: index },
       threadDisplay.map(({ name, id, l10nId }) =>
@@ -272,8 +274,11 @@ class Settings extends PureComponent {
           { id: l10nId, attrs: { title: true }, key: name },
           label(
             {
-              className:
-                "perf-settings-checkbox-label perf-settings-thread-label toggle-container-with-text",
+              className: `perf-settings-checkbox-label perf-settings-thread-label toggle-container-with-text ${
+                areAllThreadsIncluded
+                  ? "perf-settings-checkbox-label-disabled"
+                  : ""
+              }`,
             },
             input({
               className: "perf-settings-checkbox",
@@ -282,9 +287,10 @@ class Settings extends PureComponent {
               // Do not localize the value, this is used internally by the profiler.
               value: name,
               checked: threads.includes(name),
+              disabled: areAllThreadsIncluded,
               onChange: this._handleThreadCheckboxChange,
             }),
-            name
+            span(null, name)
           )
         )
       )

devtools/client/performance-new/test/browser/browser_aboutprofiling-threads-behavior.js

@@ -103,6 +103,8 @@ add_task(async function test() {
       "Asterisk was in the thread text input"
     );
 
+    is(styleThreadCheckbox.disabled, true, "The Style Thread is now disabled.");
+
     // Remove the asterisk
     setReactFriendlyInputValue(
       threadTextEl,
@@ -111,6 +113,7 @@ add_task(async function test() {
     threadTextEl.dispatchEvent(new Event("blur", { bubbles: true }));
 
     ok(!allThreadsCheckbox.checked, "The all threads checkbox is not checked.");
+    is(styleThreadCheckbox.disabled, false, "The Style Thread is now enabled.");
   });
 });
 

devtools/client/performance-new/test/browser/browser_aboutprofiling-threads.js

@@ -7,14 +7,7 @@ add_task(async function test() {
   info("Test that about:profiling can be loaded, and the threads changed.");
 
   await withAboutProfiling(async document => {
-    const geckoMainLabel = await getElementFromDocumentByText(
-      document,
-      "GeckoMain"
-    );
-    const geckoMainInput = geckoMainLabel.querySelector("input");
-    if (!geckoMainInput) {
-      throw new Error("Unable to find the input from the GeckoMain label.");
-    }
+    const geckoMainInput = await getNearestInputFromText(document, "GeckoMain");
 
     ok(
       geckoMainInput.checked,

devtools/client/performance-new/test/browser/browser_interaction-between-interfaces.js

@@ -230,15 +230,10 @@ add_task(async function test_change_in_about_profiling() {
       // Let's check some thread as well
       info("Change the threads values using the checkboxes");
 
-      const styleThreadLabel = await getElementFromDocumentByText(
+      const styleThreadInput = await getNearestInputFromText(
         aboutProfilingDocument,
         "StyleThread"
       );
-      const styleThreadInput = styleThreadLabel.querySelector("input");
-      if (!styleThreadInput) {
-        throw new Error("Unable to find the input from the StyleThread label.");
-      }
-
       ok(
         !styleThreadInput.checked,
         "The StyleThread thread isn't checked by default."