Bug 1511334 - Add tests to disable/re-enable and delete/bring flexbox and grid patch r=gl

https://treeherder.mozilla.org/#/jobs?repo=try&revision=228d738caf1403aaa5e62b2348af2e57fb4a06a6

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

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

devtools/client/inspector/flexbox/test/browser.ini

@@ -50,5 +50,6 @@ support-files =
 [browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js]
 [browser_flexbox_text_nodes_are_listed.js]
 [browser_flexbox_text_nodes_are_not_inlined.js]
+[browser_flexbox_toggle_display_change_hides_highlighter.js]
 [browser_flexbox_toggle_flexbox_highlighter_01.js]
 [browser_flexbox_toggle_flexbox_highlighter_02.js]

devtools/client/inspector/flexbox/test/browser_flexbox_toggle_display_change_hides_highlighter.js

@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test changing display:flex to display:block and back on the flex container
+// hides the flexbox highlighter.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters, store } = inspector;
+
+  const onFlexHighlighterToggleRendered = waitForDOM(doc, "#flexbox-checkbox-toggle");
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created.");
+  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  const ruleView = selectRuleView(inspector);
+
+  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const displayProp = rule.textProps[3];
+  let onBoxModelUpdated = inspector.once("boxmodel-view-updated");
+  await setRuleViewProperty(ruleView, displayProp, "block");
+  await onBoxModelUpdated;
+
+  info("Checking the flexbox highlighter is not shown after setting display:block.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+
+  onBoxModelUpdated = inspector.once("boxmodel-view-updated");
+  await setRuleViewProperty(ruleView, displayProp, "flex");
+  await onBoxModelUpdated;
+
+  info("Checking the flexbox highlighter is *still* not shown.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+});

devtools/client/inspector/grids/test/browser.ini

@@ -28,6 +28,7 @@ skip-if = (verify && (os == 'win' || os == 'linux'))
 [browser_grids_grid-list-toggle-grids_01.js]
 [browser_grids_grid-list-toggle-grids_02.js]
 [browser_grids_grid-list-toggle-multiple-grids.js]
+[browser_grids_toggle_display_change_hides_highlighter.js]
 [browser_grids_grid-outline-cannot-show-outline.js]
 [browser_grids_grid-outline-highlight-area.js]
 skip-if = (verify && (os == 'win'))

devtools/client/inspector/grids/test/browser_grids_toggle_display_change_hides_highlighter.js

@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that changing display:grid to display:block and back on the grid
+// container hides the grid highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const { document: doc } = gridInspector;
+  const { highlighters, store } = inspector;
+
+  await selectNode("#grid", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox = gridList.children[0].querySelector("input");
+
+  info("Checking the initial state of the Grid Inspector.");
+  is(gridList.childNodes.length, 1, "1 grid containers are listed.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid.");
+  const onHighlighterShown = highlighters.once("grid-highlighter-shown");
+  let onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length === 1 &&
+    state.grids[0].highlighted && !state.grids[0].disabled);
+  checkbox.click();
+  await onHighlighterShown;
+  await onCheckboxChange;
+
+  is(highlighters.gridHighlighters.size, 1, "One CSS grid highlighter is shown.");
+
+  const ruleView = selectRuleView(inspector);
+
+  info("Check that toggling #grid from display:grid to display:block " +
+       "hides its grid highlighter.");
+  let rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  let displayProp = rule.textProps[0];
+  const onDisplayChange = waitUntilState(store, state => state.grids.length === 0);
+  await setRuleViewProperty(ruleView, displayProp, "block");
+  await onDisplayChange;
+
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Check that toggling #grid from display:block to display:grid " +
+       "doesn't retrigger its grid highlighter.");
+  rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  displayProp = rule.textProps[0];
+  const onBoxModelUpdated = inspector.once("boxmodel-view-updated");
+  await setRuleViewProperty(ruleView, displayProp, "grid");
+  await onBoxModelUpdated;
+
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter for #grid1.");
+  onCheckboxChange = waitUntilState(store, state =>
+    state.grids.length === 1 &&
+    !state.grids[0].highlighted && !state.grids[0].disabled);
+  checkbox.click();
+
+  await onCheckboxChange;
+
+  info("Check that the CSS grid highlighter is not shown and the saved grid state.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+  ok(!highlighters.state.grids.size, "No grids in the saved state");
+});

devtools/client/inspector/test/shared-head.js

@@ -649,3 +649,46 @@ function openContextMenuAndGetAllItems(inspector, options) {
   const menu = inspector._openMenu(options);
   return buildContextMenuItems(menu);
 }
+
+/**
+ * Simulate changing the value of a property in a rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be changed
+ * @param {String|null} value
+ *        The new value to be used. If null is passed, then the value will be
+ *        deleted
+ * @param {Boolean} blurNewProperty
+ *        After the value has been changed, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ */
+async function setRuleViewProperty(view, textProp, value, blurNewProperty = true) {
+  await focusEditableField(view, textProp.editor.valueSpan);
+
+  const onPreview = view.once("ruleview-changed");
+  if (value === null) {
+    EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow);
+  } else {
+    EventUtils.sendString(value, view.styleWindow);
+  }
+
+  // Replace the view to use a custom debounce function that can be triggered manually
+  // through an additional ".flush()" property.
+  if (!view.debounce.flush) {
+    view.debounce = manualDebounce();
+  }
+
+  view.debounce.flush();
+  await onPreview;
+
+  const onValueDone = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onValueDone;
+
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+}