browser_styleeditor_sidebars.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html";

const PREF_SHOW_AT_RULES_SIDEBAR = "devtools.styleeditor.showAtRulesSidebar";

const PREF_SIDEBAR_WIDTH = "devtools.styleeditor.atRulesSidebarWidth";

const PREF_NAV_WIDTH = "devtools.styleeditor.navSidebarWidth";

// Initial widths for the navigation and media sidebars, which will be set via

// the corresponding preferences.

// The widths should remain between the current min-width and max-width for the

// styleeditor sidebars (currently 100px and 400px).

const NAV_WIDTH = 210;

const MEDIA_WIDTH = 250;

// Test that sidebar in the styleeditor can be resized.

add_task(async function () {

  await pushPref(PREF_SHOW_AT_RULES_SIDEBAR, true);

  await pushPref(PREF_NAV_WIDTH, NAV_WIDTH);

  await pushPref(PREF_SIDEBAR_WIDTH, MEDIA_WIDTH);

  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);

  const doc = panel.panelWindow.document;

  info("Open editor for inline sheet with @media rules to have both splitters");

  const inlineMediaEditor = ui.editors[3];

  inlineMediaEditor.summary.querySelector(".stylesheet-name").click();

  await inlineMediaEditor.getSourceEditor();

  info("Check the initial widths of side panels match the preferences values");

  const navSidebar = doc.querySelector(".splitview-controller");

  is(navSidebar.clientWidth, NAV_WIDTH);

  const mediaSidebar = doc.querySelector(

    ".splitview-active .stylesheet-sidebar"

);

  is(mediaSidebar.clientWidth, MEDIA_WIDTH);

  info(

    "Resize the navigation splitter and check the navigation sidebar is updated"

);

  const navSplitter = doc.querySelector(".devtools-side-splitter");

  dragElement(navSplitter, { startX: 1, startY: 10, deltaX: 50, deltaY: 0 });

  is(navSidebar.clientWidth, NAV_WIDTH + 50);

  info("Resize the media splitter and check the media sidebar is updated");

  const mediaSplitter = doc.querySelector(

    ".splitview-active .devtools-side-splitter"

);

  dragElement(mediaSplitter, { startX: 1, startY: 10, deltaX: -50, deltaY: 0 });

  is(mediaSidebar.clientWidth, MEDIA_WIDTH + 50);

});

/* Helpers */

function dragElement(el, { startX, startY, deltaX, deltaY }) {

  const win = el.ownerGlobal;

  const endX = startX + deltaX;

  const endY = startY + deltaY;

  EventUtils.synthesizeMouse(el, startX, startY, { type: "mousedown" }, win);

  EventUtils.synthesizeMouse(el, endX, endY, { type: "mousemove" }, win);

  EventUtils.synthesizeMouse(el, endX, endY, { type: "mouseup" }, win);