browser_changes_declaration_remove_disabled.js (3612B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that disabling a CSS declaration and then removing it from the Rule view 7 // is tracked as removed only once. Toggling leftover declarations should not introduce 8 // duplicate changes. 9 10 const TEST_URI = ` 11 <style type='text/css'> 12 div { 13 color: red; 14 background: black; 15 } 16 </style> 17 <div></div> 18 `; 19 20 add_task(async function () { 21 await pushPref("devtools.inspector.rule-view.focusNextOnEnter", false); 22 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 23 const { inspector, view: ruleView } = await openRuleView(); 24 const { document: doc, store } = selectChangesView(inspector); 25 26 await selectNode("div", inspector); 27 const prop1 = getTextProperty(ruleView, 1, { color: "red" }); 28 const prop2 = getTextProperty(ruleView, 1, { background: "black" }); 29 30 info("Using the second declaration"); 31 await testRemoveValue(ruleView, store, doc, prop2); 32 info("Using the first declaration"); 33 await testToggle(ruleView, store, doc, prop1); 34 info("Using the first declaration"); 35 await testRemoveName(ruleView, store, doc, prop1); 36 }); 37 38 async function testRemoveValue(ruleView, store, doc, prop) { 39 info("Test removing disabled declaration by clearing its property value."); 40 let onTrackChange; 41 42 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 43 info("Disable the declaration"); 44 await togglePropStatus(ruleView, prop); 45 info("Wait for change to be tracked"); 46 await onTrackChange; 47 48 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 49 info("Remove the disabled declaration by clearing its value"); 50 await setProperty(ruleView, prop, null); 51 await onTrackChange; 52 53 const removeDecl = getRemovedDeclarations(doc); 54 is(removeDecl.length, 1, "Only one declaration tracked as removed"); 55 } 56 57 async function testToggle(ruleView, store, doc, prop) { 58 info( 59 "Test toggling leftover declaration off and on will not track extra changes." 60 ); 61 let onTrackChange; 62 63 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 64 info("Disable the declaration"); 65 await togglePropStatus(ruleView, prop); 66 await onTrackChange; 67 68 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 69 info("Re-enable the declaration"); 70 await togglePropStatus(ruleView, prop); 71 await onTrackChange; 72 73 await waitFor( 74 () => getRemovedDeclarations(doc).length == 1, 75 "Still just one declaration tracked as removed" 76 ); 77 } 78 79 async function testRemoveName(ruleView, store, doc, prop) { 80 info("Test removing disabled declaration by clearing its property name."); 81 let onTrackChange; 82 83 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 84 info("Disable the declaration"); 85 await togglePropStatus(ruleView, prop); 86 await onTrackChange; 87 88 onTrackChange = waitForDispatch(store, "TRACK_CHANGE"); 89 info("Remove the disabled declaration by clearing its name"); 90 await removeProperty(ruleView, prop); 91 await onTrackChange; 92 93 info(`Expecting two declarations removed: 94 - one removed by its value in the other test 95 - one removed by its name from this test 96 `); 97 98 await waitFor( 99 () => getRemovedDeclarations(doc).length == 2, 100 "Two declarations tracked as removed" 101 ); 102 const removeDecl = getRemovedDeclarations(doc); 103 is(removeDecl[0].property, "background", "First declaration name correct"); 104 is(removeDecl[0].value, "black", "First declaration value correct"); 105 is(removeDecl[1].property, "color", "Second declaration name correct"); 106 is(removeDecl[1].value, "red", "Second declaration value correct"); 107 }