diff --git a/browser/devtools/styleinspector/rule-view.js b/browser/devtools/styleinspector/rule-view.js index 3bf2e4fdabc..d6d903a47b3 100644 --- a/browser/devtools/styleinspector/rule-view.js +++ b/browser/devtools/styleinspector/rule-view.js @@ -2370,7 +2370,11 @@ UserProperties.prototype = { if (entry && aName in entry) { let item = entry[aName]; - return item || aDefault; + if (item != aDefault) { + delete entry[aName]; + return aDefault; + } + return item; } return aDefault; }, diff --git a/browser/devtools/styleinspector/test/browser.ini b/browser/devtools/styleinspector/test/browser.ini index 0c6961d1012..5c2940d797c 100644 --- a/browser/devtools/styleinspector/test/browser.ini +++ b/browser/devtools/styleinspector/test/browser.ini @@ -64,3 +64,4 @@ support-files = sourcemaps.scss [browser_computedview_original_source_link.js] [browser_bug946331_close_tooltip_on_new_selection.js] +[browser_bug942297_user_property_reset.js] diff --git a/browser/devtools/styleinspector/test/browser_bug942297_user_property_reset.js b/browser/devtools/styleinspector/test/browser_bug942297_user_property_reset.js new file mode 100644 index 00000000000..16dc7663e21 --- /dev/null +++ b/browser/devtools/styleinspector/test/browser_bug942297_user_property_reset.js @@ -0,0 +1,128 @@ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Test that user set style properties can be changed from the markup-view and +// don't survive page reload + +let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}); +let promise = devtools.require("sdk/core/promise"); +let {Task} = Cu.import("resource://gre/modules/Task.jsm", {}); + +let TEST_PAGE = [ + "data:text/html,", + "

element 1

", + "

element 2

" +].join(""); + +let doc; +let inspector; +let ruleView; +let markupView; + +function test() { + waitForExplicitFinish(); + + gBrowser.selectedTab = gBrowser.addTab(); + gBrowser.selectedBrowser.addEventListener("load", function onload(evt) { + gBrowser.selectedBrowser.removeEventListener("load", onload, true); + doc = content.document; + waitForFocus(() => { + openRuleView((aInspector, aView) => { + inspector = aInspector; + ruleView = aView; + markupView = inspector.markup; + + Task.spawn(function() { + yield selectElement("id1"); + yield modifyRuleViewWidth("300px"); + assertRuleAndMarkupViewWidth("id1", "300px"); + yield selectElement("id2"); + assertRuleAndMarkupViewWidth("id2", "100px"); + yield modifyRuleViewWidth("50px"); + assertRuleAndMarkupViewWidth("id2", "50px"); + + yield reloadPage(); + yield selectElement("id1"); + assertRuleAndMarkupViewWidth("id1", "200px"); + yield selectElement("id2"); + assertRuleAndMarkupViewWidth("id2", "100px"); + + finishTest(); + }).then(null, Cu.reportError); + }); + }, content); + }, true); + + content.location = TEST_PAGE; +} + +function finishTest() { + doc = inspector = ruleView = markupView = null; + gBrowser.removeCurrentTab(); + finish(); +} + +function selectElement(id) { + let deferred = promise.defer(); + inspector.selection.setNode(doc.getElementById(id)); + inspector.once("inspector-updated", deferred.resolve); + return deferred.promise; +} + +function getStyleRule() { + return ruleView.doc.querySelector(".ruleview-rule"); +} + +function modifyRuleViewWidth(value) { + let deferred = promise.defer(); + + let valueSpan = getStyleRule().querySelector(".ruleview-propertyvalue"); + waitForEditorFocus(valueSpan.parentNode, () => { + let editor = inplaceEditor(valueSpan); + editor.input.value = value; + waitForEditorBlur(editor, () => { + // Changing the style will refresh the markup view, let's wait for that + inspector.once("markupmutation", () => { + waitForEditorBlur({input: ruleView.doc.activeElement}, deferred.resolve); + EventUtils.sendKey("escape"); + }); + }); + EventUtils.sendKey("return"); + }); + valueSpan.click(); + + return deferred.promise; +} + +function getContainerStyleAttrValue(id) { + let front = markupView.walker.frontForRawNode(doc.getElementById(id)); + let container = markupView.getContainer(front); + + let attrIndex = 0; + for (let attrName of container.elt.querySelectorAll(".attr-name")) { + if (attrName.textContent === "style") { + return container.elt.querySelectorAll(".attr-value")[attrIndex]; + } + attrIndex ++; + } +} + +function assertRuleAndMarkupViewWidth(id, value) { + let valueSpan = getStyleRule().querySelector(".ruleview-propertyvalue"); + is(valueSpan.textContent, value, "Rule-view style width is " + value + " as expected"); + + let attr = getContainerStyleAttrValue(id); + is(attr.textContent.replace(/\s/g, ""), "width:" + value + ";", "Markup-view style attribute width is " + value); +} + +function reloadPage() { + let deferred = promise.defer(); + inspector.once("new-root", () => { + doc = content.document; + markupView = inspector.markup; + markupView._waitForChildren().then(deferred.resolve); + }); + content.location.reload(); + return deferred.promise; +}