Bug 1968677 - [devtools] Revert user agent input to its previous value on Escape. r=devtools-reviewers,nchevobbe

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

Author: hbenl

devtools/client/responsive/components/UserAgentInput.js

@@ -106,6 +106,7 @@ class UserAgentInput extends PureComponent {
     }
 
     if (keyCode == KeyCodes.DOM_VK_ESCAPE) {
+      this.setState({ value: this.props.userAgent });
       target.blur();
     }
   }

devtools/client/responsive/test/browser/browser_user_agent_input.js

@@ -27,6 +27,10 @@ addRDMTask(TEST_URL, async function ({ ui }) {
   info("Check the default state of the user agent input");
   await testUserAgent(ui, DEFAULT_UA);
 
+  info(`Change the user agent input to ${NEW_USER_AGENT} and press Escape`);
+  await changeUserAgentInput(ui, NEW_USER_AGENT, "VK_ESCAPE");
+  await testUserAgent(ui, DEFAULT_UA);
+
   info(`Change the user agent input to ${NEW_USER_AGENT}`);
   await changeUserAgentInput(ui, NEW_USER_AGENT);
   await testUserAgent(ui, NEW_USER_AGENT);

devtools/client/responsive/test/browser/head.js

@@ -724,7 +724,11 @@ function testViewportDimensions(ui, w, h) {
   );
 }
 
-async function changeUserAgentInput(ui, value) {
+async function changeUserAgentInput(
+  ui,
+  value,
+  keyPressedAfterChange = "VK_RETURN"
+) {
   const { Simulate } = ui.toolWindow.require(
     "resource://devtools/client/shared/vendor/react-dom-test-utils.js"
   );
@@ -733,17 +737,27 @@ async function changeUserAgentInput(ui, value) {
 
   const userAgentInput = document.getElementById("user-agent-input");
   userAgentInput.value = value;
+  userAgentInput.focus();
   Simulate.change(userAgentInput);
 
-  const userAgentChanged = waitUntilState(
-    store,
-    state => state.ui.userAgent === value
-  );
-  const changed = once(ui, "user-agent-changed");
+  function pressKey() {
+    EventUtils.synthesizeKey(keyPressedAfterChange, {}, ui.toolWindow);
+  }
 
-  const waitForDevToolsReload = await watchForDevToolsReload(browser);
-  Simulate.keyUp(userAgentInput, { keyCode: KeyCodes.DOM_VK_RETURN });
-  await Promise.all([changed, waitForDevToolsReload(), userAgentChanged]);
+  if (keyPressedAfterChange === "VK_ESCAPE") {
+    pressKey();
+  } else {
+    const userAgentChanged = waitUntilState(
+      store,
+      state => state.ui.userAgent === value
+    );
+    const changed = once(ui, "user-agent-changed");
+    const waitForDevToolsReload = await watchForDevToolsReload(browser);
+
+    pressKey();
+
+    await Promise.all([changed, waitForDevToolsReload(), userAgentChanged]);
+  }
 }
 
 /**