browser_styleeditor_enabled.js (5360B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 "use strict"; 4 5 // Test that style sheets can be disabled and enabled. 6 7 // https rather than chrome to improve coverage 8 const SIMPLE_URI = TEST_BASE_HTTPS + "simple.html"; 9 const LONGNAME_URI = TEST_BASE_HTTPS + "longname.html"; 10 11 add_task(async function () { 12 const { panel, ui } = await openStyleEditorForURL(SIMPLE_URI); 13 const editor = await ui.editors[0].getSourceEditor(); 14 15 const summary = editor.summary; 16 const stylesheetToggle = summary.querySelector(".stylesheet-toggle"); 17 ok(stylesheetToggle, "stylesheet toggle button exists"); 18 19 is( 20 editor.styleSheet.disabled, 21 false, 22 "first stylesheet is initially enabled" 23 ); 24 25 is( 26 summary.classList.contains("disabled"), 27 false, 28 "first stylesheet is initially enabled, UI does not have DISABLED class" 29 ); 30 31 info("Disabling the first stylesheet."); 32 await toggleEnabled(editor, stylesheetToggle, panel.panelWindow); 33 34 is(editor.styleSheet.disabled, true, "first stylesheet is now disabled"); 35 is( 36 summary.classList.contains("disabled"), 37 true, 38 "first stylesheet is now disabled, UI has DISABLED class" 39 ); 40 41 info("Enabling the first stylesheet again."); 42 await toggleEnabled(editor, stylesheetToggle, panel.panelWindow); 43 44 is( 45 editor.styleSheet.disabled, 46 false, 47 "first stylesheet is now enabled again" 48 ); 49 is( 50 summary.classList.contains("disabled"), 51 false, 52 "first stylesheet is now enabled again, UI does not have DISABLED class" 53 ); 54 }); 55 56 // Check that stylesheets with long names do not prevent the toggle button 57 // from being visible. 58 add_task(async function testLongNameStylesheet() { 59 const { ui } = await openStyleEditorForURL(LONGNAME_URI); 60 61 is(ui.editors.length, 2, "Expected 2 stylesheet editors"); 62 63 // Test that the first editor, which should have a stylesheet with a short 64 // name. 65 let editor = ui.editors[0]; 66 let stylesheetToggle = editor.summary.querySelector(".stylesheet-toggle"); 67 is(editor.friendlyName, "simple.css"); 68 ok(stylesheetToggle, "stylesheet toggle button exists"); 69 Assert.greater(stylesheetToggle.getBoundingClientRect().width, 0); 70 Assert.greater(stylesheetToggle.getBoundingClientRect().height, 0); 71 72 const expectedWidth = stylesheetToggle.getBoundingClientRect().width; 73 const expectedHeight = stylesheetToggle.getBoundingClientRect().height; 74 75 // Test that the second editor, which should have a stylesheet with a long 76 // name. 77 editor = ui.editors[1]; 78 stylesheetToggle = editor.summary.querySelector(".stylesheet-toggle"); 79 is(editor.friendlyName, "veryveryverylongnamethatcanbreakthestyleeditor.css"); 80 ok(stylesheetToggle, "stylesheet toggle button exists"); 81 is(stylesheetToggle.getBoundingClientRect().width, expectedWidth); 82 is(stylesheetToggle.getBoundingClientRect().height, expectedHeight); 83 }); 84 85 add_task(async function testSystemStylesheet() { 86 const { ui } = await openStyleEditorForURL("about:support"); 87 88 const aboutSupportEditor = ui.editors.find( 89 editor => editor.friendlyName === "aboutSupport.css" 90 ); 91 ok(!!aboutSupportEditor, "Found the editor for aboutSupport.css"); 92 const aboutSupportToggle = 93 aboutSupportEditor.summary.querySelector(".stylesheet-toggle"); 94 ok(aboutSupportToggle, "enabled toggle button exists"); 95 ok(!aboutSupportToggle.disabled, "enabled toggle button is not disabled"); 96 is( 97 aboutSupportToggle.getAttribute("tooltiptext"), 98 "Toggle style sheet visibility" 99 ); 100 101 info("Click on the link to load the source editor"); 102 const aboutSupportLink = 103 aboutSupportEditor.summary.querySelector(".stylesheet-name"); 104 aboutSupportLink.click(); 105 await aboutSupportEditor.getSourceEditor(); 106 ok( 107 !aboutSupportEditor.sourceEditor.config.readOnly, 108 "The editor for a regular stylesheet is not readonly" 109 ); 110 111 const formsEditor = ui.editors.find( 112 editor => editor.friendlyName === "forms.css" 113 ); 114 ok(!!formsEditor, "Found the editor for forms.css"); 115 116 const formsToggle = formsEditor.summary.querySelector(".stylesheet-toggle"); 117 ok(formsToggle, "enabled toggle button exists"); 118 ok(formsToggle.disabled, "enabled toggle button is disabled"); 119 // For some unexplained reason, this is updated asynchronously 120 await waitFor( 121 () => 122 formsToggle.getAttribute("tooltiptext") == 123 "System style sheets can’t be disabled" 124 ); 125 is( 126 formsToggle.getAttribute("tooltiptext"), 127 "System style sheets can’t be disabled" 128 ); 129 130 info("Click on the link to load the source editor"); 131 const formsLink = formsEditor.summary.querySelector(".stylesheet-name"); 132 formsLink.click(); 133 await formsEditor.getSourceEditor(); 134 ok( 135 formsEditor.sourceEditor.config.readOnly, 136 "The editor for system stylesheet is readonly" 137 ); 138 }); 139 140 async function toggleEnabled(editor, stylesheetToggle, panelWindow) { 141 const changed = editor.once("property-change"); 142 143 info("Waiting for focus."); 144 await SimpleTest.promiseFocus(panelWindow); 145 146 info("Clicking on the toggle."); 147 EventUtils.synthesizeMouseAtCenter(stylesheetToggle, {}, panelWindow); 148 149 info("Waiting for stylesheet to be disabled."); 150 let property = await changed; 151 while (property !== "disabled") { 152 info("Ignoring property-change for '" + property + "'."); 153 property = await editor.once("property-change"); 154 } 155 }