michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:  http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: // Test that user set style properties can be changed from the markup-view and
michael@0: // don't survive page reload
michael@0: 
michael@0: let TEST_PAGE = [
michael@0:   "data:text/html,",
michael@0:   "<p id='id1' style='width:200px;'>element 1</p>",
michael@0:   "<p id='id2' style='width:100px;'>element 2</p>"
michael@0: ].join("");
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   yield addTab(TEST_PAGE);
michael@0:   let {toolbox, inspector, view} = yield openRuleView();
michael@0: 
michael@0:   yield selectNode("#id1", inspector);
michael@0:   yield modifyRuleViewWidth("300px", view, inspector);
michael@0:   assertRuleAndMarkupViewWidth("id1", "300px", view, inspector);
michael@0: 
michael@0:   yield selectNode("#id2", inspector);
michael@0:   assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
michael@0:   yield modifyRuleViewWidth("50px", view, inspector);
michael@0:   assertRuleAndMarkupViewWidth("id2", "50px", view, inspector);
michael@0: 
michael@0:   yield reloadPage(inspector);
michael@0: 
michael@0:   yield selectNode("#id1", inspector);
michael@0:   assertRuleAndMarkupViewWidth("id1", "200px", view, inspector);
michael@0:   yield selectNode("#id2", inspector);
michael@0:   assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
michael@0: });
michael@0: 
michael@0: function getStyleRule(ruleView) {
michael@0:   return ruleView.doc.querySelector(".ruleview-rule");
michael@0: }
michael@0: 
michael@0: function* modifyRuleViewWidth(value, ruleView, inspector) {
michael@0:   info("Getting the property value element");
michael@0:   let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue");
michael@0: 
michael@0:   info("Focusing the property value to set it to edit mode");
michael@0:   let editor = yield focusEditableField(valueSpan.parentNode);
michael@0: 
michael@0:   ok(editor.input, "The inplace-editor field is ready");
michael@0:   info("Setting the new value");
michael@0:   editor.input.value = value;
michael@0: 
michael@0:   info("Pressing return and waiting for the field to blur and for the markup-view to show the mutation");
michael@0:   let onBlur = once(editor.input, "blur", true);
michael@0:   let onMutation = inspector.once("markupmutation");
michael@0:   EventUtils.sendKey("return");
michael@0:   yield onBlur;
michael@0:   yield onMutation;
michael@0: 
michael@0:   info("Escaping out of the new property field that has been created after the value was edited");
michael@0:   let onNewFieldBlur = once(ruleView.doc.activeElement, "blur", true);
michael@0:   EventUtils.sendKey("escape");
michael@0:   yield onNewFieldBlur;
michael@0: }
michael@0: 
michael@0: function getContainerStyleAttrValue(id, {markup}) {
michael@0:   let front = markup.walker.frontForRawNode(content.document.getElementById(id));
michael@0:   let container = markup.getContainer(front);
michael@0: 
michael@0:   let attrIndex = 0;
michael@0:   for (let attrName of container.elt.querySelectorAll(".attr-name")) {
michael@0:     if (attrName.textContent === "style") {
michael@0:       return container.elt.querySelectorAll(".attr-value")[attrIndex];
michael@0:     }
michael@0:     attrIndex ++;
michael@0:   }
michael@0: }
michael@0: 
michael@0: function assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) {
michael@0:   let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue");
michael@0:   is(valueSpan.textContent, value, "Rule-view style width is " + value + " as expected");
michael@0: 
michael@0:   let attr = getContainerStyleAttrValue(id, inspector);
michael@0:   is(attr.textContent.replace(/\s/g, ""), "width:" + value + ";", "Markup-view style attribute width is " + value);
michael@0: }
michael@0: 
michael@0: function reloadPage(inspector) {
michael@0:   let onNewRoot = inspector.once("new-root");
michael@0:   content.location.reload();
michael@0:   return onNewRoot.then(inspector.markup._waitForChildren);
michael@0: }