browser_styleeditor_sidebars.js (2595B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 const TESTCASE_URI = TEST_BASE_HTTPS + "media-rules.html"; 7 8 const PREF_SHOW_AT_RULES_SIDEBAR = "devtools.styleeditor.showAtRulesSidebar"; 9 const PREF_SIDEBAR_WIDTH = "devtools.styleeditor.atRulesSidebarWidth"; 10 const PREF_NAV_WIDTH = "devtools.styleeditor.navSidebarWidth"; 11 12 // Initial widths for the navigation and media sidebars, which will be set via 13 // the corresponding preferences. 14 // The widths should remain between the current min-width and max-width for the 15 // styleeditor sidebars (currently 100px and 400px). 16 const NAV_WIDTH = 210; 17 const MEDIA_WIDTH = 250; 18 19 // Test that sidebar in the styleeditor can be resized. 20 add_task(async function () { 21 await pushPref(PREF_SHOW_AT_RULES_SIDEBAR, true); 22 await pushPref(PREF_NAV_WIDTH, NAV_WIDTH); 23 await pushPref(PREF_SIDEBAR_WIDTH, MEDIA_WIDTH); 24 25 const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI); 26 const doc = panel.panelWindow.document; 27 28 info("Open editor for inline sheet with @media rules to have both splitters"); 29 const inlineMediaEditor = ui.editors[3]; 30 inlineMediaEditor.summary.querySelector(".stylesheet-name").click(); 31 await inlineMediaEditor.getSourceEditor(); 32 33 info("Check the initial widths of side panels match the preferences values"); 34 const navSidebar = doc.querySelector(".splitview-controller"); 35 is(navSidebar.clientWidth, NAV_WIDTH); 36 37 const mediaSidebar = doc.querySelector( 38 ".splitview-active .stylesheet-sidebar" 39 ); 40 is(mediaSidebar.clientWidth, MEDIA_WIDTH); 41 42 info( 43 "Resize the navigation splitter and check the navigation sidebar is updated" 44 ); 45 const navSplitter = doc.querySelector(".devtools-side-splitter"); 46 dragElement(navSplitter, { startX: 1, startY: 10, deltaX: 50, deltaY: 0 }); 47 is(navSidebar.clientWidth, NAV_WIDTH + 50); 48 49 info("Resize the media splitter and check the media sidebar is updated"); 50 const mediaSplitter = doc.querySelector( 51 ".splitview-active .devtools-side-splitter" 52 ); 53 dragElement(mediaSplitter, { startX: 1, startY: 10, deltaX: -50, deltaY: 0 }); 54 is(mediaSidebar.clientWidth, MEDIA_WIDTH + 50); 55 }); 56 57 /* Helpers */ 58 59 function dragElement(el, { startX, startY, deltaX, deltaY }) { 60 const win = el.ownerGlobal; 61 const endX = startX + deltaX; 62 const endY = startY + deltaY; 63 64 EventUtils.synthesizeMouse(el, startX, startY, { type: "mousedown" }, win); 65 EventUtils.synthesizeMouse(el, endX, endY, { type: "mousemove" }, win); 66 EventUtils.synthesizeMouse(el, endX, endY, { type: "mouseup" }, win); 67 }