Bug 1882523 - [devtools] Close inplace editor autocomplete on Escape. r=devtools-reviewers,ochameau.

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

devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js

@@ -19,19 +19,51 @@ add_task(async function () {
   const { inspector, view } = await openRuleView();
   await selectNode("#testid", inspector);
 
-  info("Test creating a new property and escaping");
-  await addProperty(view, 1, "color", "red", {
-    commitValueWith: "VK_ESCAPE",
+  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  is(
+    elementRuleEditor.rule.textProps.length,
+    1,
+    "Sanity check, the rule has 1 property at the beginning of the test."
+  );
+
+  info("Creating a new property but don't commit…");
+  const textProp = await addProperty(view, 1, "color", "red", {
+    commitValueWith: null,
     blurNewProperty: false,
   });
 
+  info("The autocomplete popup should be displayed, hit Escape to hide it");
+  await waitFor(() => view.popup && view.popup.isOpen);
+  ok(true, "Popup was opened");
+  const onPopupClosed = once(view.popup, "popup-closed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onPopupClosed;
+  ok(true, "Popup was closed");
+
+  is(
+    view.styleDocument.activeElement,
+    inplaceEditor(textProp.editor.valueSpan).input,
+    "The autocomplete was closed, but focus is still on the new property value"
+  );
+
+  is(
+    elementRuleEditor.rule.textProps.length,
+    2,
+    "The new property is still displayed"
+  );
+
+  info("Hit escape to remove the property");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onRuleViewChanged;
+
   is(
     view.styleDocument.activeElement,
     view.styleDocument.body,
     "Correct element has focus"
   );
 
-  const elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  elementRuleEditor = getRuleViewRuleEditor(view, 1);
   is(
     elementRuleEditor.rule.textProps.length,
     1,

devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js

@@ -50,11 +50,15 @@ async function testCompletion(view, target, isExpectedOpenPopup) {
 
   if (editor.popup.isOpen) {
     info("Close the suggest completion popup");
-    const closingEvents = [
-      view.once("ruleview-changed"),
-      once(view.popup, "popup-closed"),
-    ];
+    const onPopupClosed = once(view.popup, "popup-closed");
     EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
-    await Promise.all(closingEvents);
+    await onPopupClosed;
+    ok(true, "popup was closed");
+
+    info("And hit Escape again to cancel the change");
+    const onRuleViewChanged = view.once("ruleview-changed");
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+    await onRuleViewChanged;
+    ok(true, "Got ruleview-changed event");
   }
 }

devtools/client/inspector/rules/test/browser_rules_livepreview.js

@@ -60,6 +60,15 @@ async function testLivePreviewData(data, ruleView, selector) {
 
   const onValueDone = ruleView.once("ruleview-changed");
   if (data.escape) {
+    // First, close the popup
+    await waitFor(() => ruleView.popup && ruleView.popup.isOpen);
+    ok(true, "Popup was opened");
+    const onPopupClosed = once(ruleView.popup, "popup-closed");
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, ruleView.styleWindow);
+    await onPopupClosed;
+    ok(true, "Popup was closed");
+
+    // Then hit escape a second time to cancel the change
     EventUtils.synthesizeKey("KEY_Escape");
   } else {
     EventUtils.synthesizeKey("KEY_Enter");

devtools/client/inspector/rules/test/browser_rules_variables_autocomplete.js

@@ -123,9 +123,9 @@ async function checkCssVariableAutocomplete(
 
   info("Close the popup");
   const onPopupClosed = once(editor.popup, "popup-closed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onPopupClosed;
   onRuleViewChanged = view.once("ruleview-changed");
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
-  view.debounce.flush();
   await onRuleViewChanged;
-  await onPopupClosed;
 }

devtools/client/inspector/rules/test/head.js

@@ -241,9 +241,11 @@ var openCubicBezierAndChangeCoords = async function (
  *        The value for the new property
  * @param {Object=} options
  * @param {String=} options.commitValueWith
- *        Which key should be used to commit the new value. VK_RETURN is used by
+ *        Which key should be used to commit the new value. VK_TAB is used by
  *        default, but tests might want to use another key to test cancelling
  *        for exemple.
+ *        If set to null, no keys will be hit, so the input will still be focused
+ *        at the end of this function
  * @param {Boolean=} options.blurNewProperty
  *        After the new value has been added, a new property would have been
  *        focused. This parameter is true by default, and that causes the new
@@ -344,9 +346,13 @@ var addProperty = async function (
   view.debounce.flush();
   await onPreview;
 
-  const onValueAdded = view.once("ruleview-changed");
+  if (commitValueWith === null) {
+    return textProp;
+  }
+
+  const onRuleViewChanged = view.once("ruleview-changed");
   EventUtils.synthesizeKey(commitValueWith, {}, view.styleWindow);
-  await onValueAdded;
+  await onRuleViewChanged;
 
   info(
     "Waiting for DOM mutations in case the property was added to the element style"

devtools/client/shared/inplace-editor.js

@@ -1369,11 +1369,12 @@ class InplaceEditor extends EventEmitter {
       // Close the popup if open
       if (this.popup && this.popup.isOpen) {
         this.#hideAutocompletePopup();
+      } else {
+        this.cancelled = true;
+        this.#apply();
+        this.#clear();
       }
       prevent = true;
-      this.cancelled = true;
-      this.#apply();
-      this.#clear();
       event.stopPropagation();
     } else if (isKeyIn(key, "SPACE")) {
       // No need for leading spaces here.  This is particularly