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 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 const PAGE_CONTENT = [

     8   '<style type="text/css">',

     9   '  body {',

    10   '    background-color: #ff5;',

    11   '    padding: 50px',

    12   '  }',

    13   '  div {',

    14   '    width: 100px;',

    15   '    height: 100px;',

    16   '    background-color: #f09;',

    17   '  }',

    18   '</style>',

    19   '<body><div></div></body>'

    20 ].join("\n");

    22 const ORIGINAL_COLOR = "rgb(255, 0, 153)";  // #f09

    23 const EXPECTED_COLOR = "rgb(255, 255, 85)"; // #ff5

    25 // Test opening the eyedropper from the color picker. Pressing escape

    26 // to close it, and clicking the page to select a color.

    28 let test = asyncTest(function*() {

    29   yield addTab("data:text/html,rule view eyedropper test");

    30   content.document.body.innerHTML = PAGE_CONTENT;

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

    33   let element = content.document.querySelector("div");

    34   inspector.selection.setNode(element, "test");

    35   yield inspector.once("inspector-updated");

    37   let property = getRuleViewProperty(view, "div", "background-color");

    38   let swatch = property.valueSpan.querySelector(".ruleview-colorswatch");

    39   ok(swatch, "Color swatch is displayed for the bg-color property");

    41   let dropper = yield openEyedropper(view, swatch);

    43   let tooltip = view.colorPicker.tooltip;

    44   ok(tooltip.isHidden(),

    45      "color picker tooltip is closed after opening eyedropper");

    47   yield testESC(swatch, dropper);

    49   dropper = yield openEyedropper(view, swatch);

    51   ok(dropper, "dropper opened");

    53   yield testSelect(swatch, dropper);

    54 });

    57 function testESC(swatch, dropper) {

    58   let deferred = promise.defer();

    60   dropper.once("destroy", () => {

    61     let color = swatch.style.backgroundColor;

    62     is(color, ORIGINAL_COLOR, "swatch didn't change after pressing ESC");

    64     deferred.resolve();

    65   });

    67   inspectPage(dropper, false).then(pressESC);

    69   return deferred.promise;

    70 }

    72 function testSelect(swatch, dropper) {

    73   let deferred = promise.defer();

    75   dropper.once("destroy", () => {

    76     let color = swatch.style.backgroundColor;

    77     is(color, EXPECTED_COLOR, "swatch changed colors");

    79     // the change to the content is done async after rule view change

    80     executeSoon(() => {

    81       let element = content.document.querySelector("div");

    82       is(content.window.getComputedStyle(element).backgroundColor,

    83          EXPECTED_COLOR,

    84          "div's color set to body color after dropper");

    86       deferred.resolve();

    87     });

    88   });

    90   inspectPage(dropper);

    92   return deferred.promise;

    93 }

    96 /* Helpers */

    98 function openEyedropper(view, swatch) {

    99   let deferred = promise.defer();

   101   let tooltip = view.colorPicker.tooltip;

   103   tooltip.once("shown", () => {

   104     let tooltipDoc = tooltip.content.contentDocument;

   105     let dropperButton = tooltipDoc.querySelector("#eyedropper-button");

   107     tooltip.once("eyedropper-opened", (event, dropper) => {

   108       deferred.resolve(dropper)

   109     });

   110     dropperButton.click();

   111   });

   113   swatch.click();

   114   return deferred.promise;

   115 }

   117 function inspectPage(dropper, click=true) {

   118   let target = content.document.body;

   119   let win = content.window;

   121   EventUtils.synthesizeMouse(target, 10, 10, { type: "mousemove" }, win);

   123   return dropperLoaded(dropper).then(() => {

   124     EventUtils.synthesizeMouse(target, 20, 20, { type: "mousemove" }, win);

   125     if (click) {

   126       EventUtils.synthesizeMouse(target, 20, 20, {}, win);

   127     }

   128   });

   129 }

   131 function dropperLoaded(dropper) {

   132   if (dropper.loaded) {

   133     return promise.resolve();

   134   }

   136   return dropper.once("load");

   137 }

   139 function pressESC() {

   140   EventUtils.synthesizeKey("VK_ESCAPE", { });

   141 }

The Tor Browser / file revision