browser_jsterm_editor_resize.js

Enable keyboard shortcuts

/* 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"));