1 files changed, 79 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_editor_resize.js b/devtools/client/webconsole/test/browser/browser_jsterm_editor_resize.js
new file mode 100644
index 0000000000..db9557bf04
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_editor_resize.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that the editor can be resized and that its width is persisted.
+
+"use strict";
+
+const TEST_URI =
+  "data:text/html;charset=utf-8,<!DOCTYPE html>Web Console test for editor resize";
+
+add_task(async function () {
+  await pushPref("devtools.webconsole.input.editor", true);
+  await pushPref("devtools.webconsole.input.editorOnboarding", false);
+
+  // Reset editorWidth pref so we have steady results when running multiple times.
+  await pushPref("devtools.webconsole.input.editorWidth", null);
+
+  let hud = await openNewTabAndConsole(TEST_URI);
+  const getEditorEl = () =>
+    hud.ui.outputNode.querySelector(".jsterm-input-container");
+  const resizerEl = hud.ui.outputNode.querySelector(".editor-resizer");
+
+  const editorBoundingRect = getEditorEl().getBoundingClientRect();
+  const delta = 100;
+  const originalWidth = editorBoundingRect.width;
+  const clientX = editorBoundingRect.right + delta;
+  await resize(resizerEl, clientX);
+
+  const newWidth = Math.floor(originalWidth + delta);
+  is(
+    Math.floor(getEditorEl().getBoundingClientRect().width),
+    newWidth,
+    "The editor element was resized as expected"
+  );
+  info("Close and re-open the console to check if editor width was persisted");
+  await closeConsole();
+  hud = await openConsole();
+
+  is(
+    Math.floor(getEditorEl().getBoundingClientRect().width),
+    newWidth,
+    "The editor element width was persisted"
+  );
+  await toggleLayout(hud);
+
+  ok(!getEditorEl().style.width, "The width isn't applied in in-line layout");
+
+  await toggleLayout(hud);
+  is(
+    getEditorEl().style.width,
+    `${newWidth}px`,
+    "The width is applied again when switching back to editor"
+  );
+});
+
+async function resize(resizer, clientX) {
+  const doc = resizer.ownerDocument;
+  const win = doc.defaultView;
+
+  info("Mouse down to start dragging");
+  EventUtils.synthesizeMouseAtCenter(
+    resizer,
+    { button: 0, type: "mousedown" },
+    win
+  );
+  await waitFor(() => doc.querySelector(".dragging"));
+
+  const event = new MouseEvent("mousemove", { clientX });
+  resizer.dispatchEvent(event);
+
+  info("Mouse up to stop resizing");
+  EventUtils.synthesizeMouseAtCenter(
+    doc.body,
+    { button: 0, type: "mouseup" },
+    win
+  );
+
+  await waitFor(() => !doc.querySelector(".dragging"));
+}