The Tor Browser: browser/devtools/styleinspector/test/browser_ruleview

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

     1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */

     2 /* Any copyright is dedicated to the Public Domain.

     3  http://creativecommons.org/publicdomain/zero/1.0/ */

     5 "use strict";

     7 // Test that user set style properties can be changed from the markup-view and

     8 // don't survive page reload

    10 let TEST_PAGE = [

    11   "data:text/html,",

    12   "<p id='id1' style='width:200px;'>element 1</p>",

    13   "<p id='id2' style='width:100px;'>element 2</p>"

    14 ].join("");

    16 let test = asyncTest(function*() {

    17   yield addTab(TEST_PAGE);

    18   let {toolbox, inspector, view} = yield openRuleView();

    20   yield selectNode("#id1", inspector);

    21   yield modifyRuleViewWidth("300px", view, inspector);

    22   assertRuleAndMarkupViewWidth("id1", "300px", view, inspector);

    24   yield selectNode("#id2", inspector);

    25   assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);

    26   yield modifyRuleViewWidth("50px", view, inspector);

    27   assertRuleAndMarkupViewWidth("id2", "50px", view, inspector);

    29   yield reloadPage(inspector);

    31   yield selectNode("#id1", inspector);

    32   assertRuleAndMarkupViewWidth("id1", "200px", view, inspector);

    33   yield selectNode("#id2", inspector);

    34   assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);

    35 });

    37 function getStyleRule(ruleView) {

    38   return ruleView.doc.querySelector(".ruleview-rule");

    39 }

    41 function* modifyRuleViewWidth(value, ruleView, inspector) {

    42   info("Getting the property value element");

    43   let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue");

    45   info("Focusing the property value to set it to edit mode");

    46   let editor = yield focusEditableField(valueSpan.parentNode);

    48   ok(editor.input, "The inplace-editor field is ready");

    49   info("Setting the new value");

    50   editor.input.value = value;

    52   info("Pressing return and waiting for the field to blur and for the markup-view to show the mutation");

    53   let onBlur = once(editor.input, "blur", true);

    54   let onMutation = inspector.once("markupmutation");

    55   EventUtils.sendKey("return");

    56   yield onBlur;

    57   yield onMutation;

    59   info("Escaping out of the new property field that has been created after the value was edited");

    60   let onNewFieldBlur = once(ruleView.doc.activeElement, "blur", true);

    61   EventUtils.sendKey("escape");

    62   yield onNewFieldBlur;

    63 }

    65 function getContainerStyleAttrValue(id, {markup}) {

    66   let front = markup.walker.frontForRawNode(content.document.getElementById(id));

    67   let container = markup.getContainer(front);

    69   let attrIndex = 0;

    70   for (let attrName of container.elt.querySelectorAll(".attr-name")) {

    71     if (attrName.textContent === "style") {

    72       return container.elt.querySelectorAll(".attr-value")[attrIndex];

    73     }

    74     attrIndex ++;

    75   }

    76 }

    78 function assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) {

    79   let valueSpan = getStyleRule(ruleView).querySelector(".ruleview-propertyvalue");

    80   is(valueSpan.textContent, value, "Rule-view style width is " + value + " as expected");

    82   let attr = getContainerStyleAttrValue(id, inspector);

    83   is(attr.textContent.replace(/\s/g, ""), "width:" + value + ";", "Markup-view style attribute width is " + value);

    84 }

    86 function reloadPage(inspector) {

    87   let onNewRoot = inspector.once("new-root");

    88   content.location.reload();

    89   return onNewRoot.then(inspector.markup._waitForChildren);

    90 }

The Tor Browser / file revision