Bug 1684595 - [devtools] Update tests for toggling the grid highlighter with the swatch from the Rules view r=jdescottes

Depends on D100564

This patch updates test which deal with swatches for toggling a CSSGridHighlighter from the Rules view.  This is similar to changes made for FlexboxHighlighter tests in D96225.
The changes are straightforward:
- replace the class name of the toggle: `.ruleview-grid` → `.js-toggle-grid-highlighter`
- use generic test helpers for highlighters: `waitForHighlighterTypeShown`, `waitForHighlighterTypeHidden`

NOTE: To reviewers: I won't be able to address code review comments. Please commandeer, update, and land this patch yourself.

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

devtools/client/inspector/grids/test/browser_grids_color-in-rules-grid-toggle.js

@@ -68,7 +68,7 @@ add_task(async function() {
   await selectNode("#grid", inspector);
 
   const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   const onHighlighterShown = highlighters.once(

devtools/client/inspector/grids/test/browser_grids_highlighter-setting-rules-grid-toggle.js

@@ -48,7 +48,7 @@ add_task(async function() {
   await selectNode("#grid", inspector);
 
   const container = getRuleViewProperty(ruleView, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
   const onHighlighterShown = highlighters.once(

devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js

@@ -22,19 +22,24 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  let gridToggle = container.querySelector(".ruleview-grid");
+  let gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
   info("Edit the 'grid' property value to 'block'.");
   const editor = await focusEditableField(view, container);
-  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   const onDone = view.once("ruleview-changed");
   editor.input.value = "block;";
   EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
@@ -42,7 +47,7 @@ add_task(async function() {
   await onDone;
 
   info("Check the grid highlighter and grid toggle button are hidden.");
-  gridToggle = container.querySelector(".ruleview-grid");
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
   ok(!gridToggle, "Grid highlighter toggle is not visible.");
   ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
 });

devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js

@@ -21,19 +21,24 @@ const TEST_URI = `
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view, testActor } = await openRuleView();
-  const highlighters = view.highlighters;
+  const highlighters = inspector.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
   is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
 
-  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   info("Remove the #grid container in the content page");
   testActor.eval(`
     document.querySelector("#grid").remove();

devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js

@@ -22,14 +22,16 @@ const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
-  const highlighters = view.highlighters;
+  const highlighters = inspector.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 

devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js

@@ -39,14 +39,16 @@ add_task(async function() {
 
 async function checkGridHighlighter() {
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 

devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js

@@ -35,19 +35,20 @@ add_task(async function() {
 
   info("Check that the grid highlighter can be displayed");
   const { inspector, view } = await openRuleView();
-  const { highlighters } = view;
+  const { highlighters } = inspector;
   const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
   const {
+    waitForHighlighterTypeShown,
     waitForHighlighterTypeRestored,
     waitForHighlighterTypeDiscarded,
   } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 

devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js

@@ -22,14 +22,15 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   startTelemetry();
   const { inspector, view } = await openRuleView();
-  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 

devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js

@@ -22,10 +22,15 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Checking the initial state of the CSS grid toggle in the rule-view.");
   ok(
@@ -39,7 +44,7 @@ add_task(async function() {
   ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
@@ -58,7 +63,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
 
   info("Toggling OFF the CSS grid highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterHidden;
 

devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js

@@ -22,10 +22,15 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Checking the initial state of the CSS grid toggle in the rule-view.");
   ok(
@@ -39,7 +44,7 @@ add_task(async function() {
   ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
@@ -58,7 +63,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
 
   info("Toggling OFF the CSS grid highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterHidden;
 

devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js

@@ -25,10 +25,15 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
   const overriddenContainer = getRuleViewProperty(view, "div, ul", "display")
     .valueSpan;
   const overriddenGridToggle = overriddenContainer.querySelector(
@@ -54,7 +59,7 @@ add_task(async function() {
   info(
     "Toggling ON the CSS grid highlighter from the overridden rule in the rule-view."
   );
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   overriddenGridToggle.click();
   await onHighlighterShown;
 
@@ -73,7 +78,7 @@ add_task(async function() {
     "Toggling off the CSS grid highlighter from the normal grid declaration in the " +
       "rule-view."
   );
-  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterHidden;
 

devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js

@@ -26,11 +26,13 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
 
   info("Selecting the first grid container.");
   await selectNode("#grid1", inspector);
   let container = getRuleViewProperty(view, ".grid", "display").valueSpan;
-  let gridToggle = container.querySelector(".ruleview-grid");
+  let gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info(
     "Checking the state of the CSS grid toggle for the first grid container in the " +
@@ -50,7 +52,7 @@ add_task(async function() {
     "Toggling ON the CSS grid highlighter for the first grid container from the " +
       "rule-view."
   );
-  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
@@ -73,7 +75,7 @@ add_task(async function() {
   const firstGridHighterShown = highlighters.gridHighlighters.keys().next()
     .value;
   container = getRuleViewProperty(view, ".grid", "display").valueSpan;
-  gridToggle = container.querySelector(".ruleview-grid");
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info(
     "Checking the state of the CSS grid toggle for the second grid container in the " +
@@ -97,7 +99,7 @@ add_task(async function() {
     "Toggling ON the CSS grid highlighter for the second grid container from the " +
       "rule-view."
   );
-  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
@@ -117,7 +119,7 @@ add_task(async function() {
   info("Selecting the first grid container.");
   await selectNode("#grid1", inspector);
   container = getRuleViewProperty(view, ".grid", "display").valueSpan;
-  gridToggle = container.querySelector(".ruleview-grid");
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info(
     "Checking the state of the CSS grid toggle for the first grid container in the " +

devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js

@@ -22,10 +22,15 @@ add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid", inspector);
   const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Checking the initial state of the CSS grid toggle in the rule-view.");
   ok(
@@ -39,7 +44,7 @@ add_task(async function() {
   ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter from the rule-view.");
-  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
@@ -58,7 +63,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
 
   info("Toggling OFF the CSS grid highlighter from the rule-view.");
-  const onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterHidden;
 

devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js

@@ -33,13 +33,18 @@ add_task(async function() {
   const ruleView = selectRuleView(inspector);
   const { document: doc } = gridInspector;
   const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
 
   await selectNode("#grid1", inspector);
   const gridList = doc.getElementById("grid-list");
   const checkbox2 = gridList.children[1].querySelector("input");
   const checkbox3 = gridList.children[2].querySelector("input");
   const container = getRuleViewProperty(ruleView, ".grid", "display").valueSpan;
-  const gridToggle = container.querySelector(".ruleview-grid");
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
 
   info("Checking the initial state of the CSS grid toggle in the rule-view.");
   ok(
@@ -53,7 +58,7 @@ add_task(async function() {
   ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter for #grid2.");
-  let onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   checkbox2.click();
   await onHighlighterShown;
 
@@ -71,7 +76,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter for #grid3.");
-  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   checkbox3.click();
   await onHighlighterShown;
 
@@ -83,7 +88,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
 
   info("Toggling OFF the CSS grid highlighter for #grid3.");
-  let onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   checkbox3.click();
   await onHighlighterHidden;
 
@@ -101,7 +106,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
 
   info("Toggling ON the CSS grid highlighter for #grid1 from the rule-view.");
-  onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterShown;
 
@@ -117,7 +122,7 @@ add_task(async function() {
   is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
 
   info("Toggling OFF the CSS grid highlighter for #grid1 from the rule-view.");
-  onHighlighterHidden = highlighters.once("grid-highlighter-hidden");
+  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
   gridToggle.click();
   await onHighlighterHidden;