1 files changed, 67 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_sidebars.js b/devtools/client/styleeditor/test/browser_styleeditor_sidebars.js
new file mode 100644
index 0000000000..d0cdb4acfe
--- /dev/null
+++ b/devtools/client/styleeditor/test/browser_styleeditor_sidebars.js
@@ -0,0 +1,67 @@
+/* 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);
+}