diff --git a/devtools/client/performance-new/components/Settings.js b/devtools/client/performance-new/components/Settings.js index 01d9c2788567..ecd0c5c8e810 100644 --- a/devtools/client/performance-new/components/Settings.js +++ b/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) ) ) ) diff --git a/devtools/client/performance-new/test/browser/browser_aboutprofiling-threads-behavior.js b/devtools/client/performance-new/test/browser/browser_aboutprofiling-threads-behavior.js index a42d9465fa28..c2512dcc055b 100644 --- a/devtools/client/performance-new/test/browser/browser_aboutprofiling-threads-behavior.js +++ b/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."); }); }); diff --git a/devtools/client/performance-new/test/browser/browser_aboutprofiling-threads.js b/devtools/client/performance-new/test/browser/browser_aboutprofiling-threads.js index c1e8db5c4f42..69b266207f23 100644 --- a/devtools/client/performance-new/test/browser/browser_aboutprofiling-threads.js +++ b/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, diff --git a/devtools/client/performance-new/test/browser/browser_interaction-between-interfaces.js b/devtools/client/performance-new/test/browser/browser_interaction-between-interfaces.js index 79520d24b909..88d8c70b3649 100644 --- a/devtools/client/performance-new/test/browser/browser_interaction-between-interfaces.js +++ b/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."