1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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);
}
|
