1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/test/head.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,759 @@
1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +const Cu = Components.utils;
1.11 +let {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
1.12 +let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
1.13 +let TargetFactory = devtools.TargetFactory;
1.14 +let {CssHtmlTree} = devtools.require("devtools/styleinspector/computed-view");
1.15 +let {CssRuleView, _ElementStyle} = devtools.require("devtools/styleinspector/rule-view");
1.16 +let {CssLogic, CssSelector} = devtools.require("devtools/styleinspector/css-logic");
1.17 +let {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
1.18 +let {editableField, getInplaceEditorForSpan: inplaceEditor} = devtools.require("devtools/shared/inplace-editor");
1.19 +let {console} = Components.utils.import("resource://gre/modules/devtools/Console.jsm", {});
1.20 +
1.21 +// All test are asynchronous
1.22 +waitForExplicitFinish();
1.23 +
1.24 +const TEST_URL_ROOT = "http://example.com/browser/browser/devtools/styleinspector/test/";
1.25 +const TEST_URL_ROOT_SSL = "https://example.com/browser/browser/devtools/styleinspector/test/";
1.26 +
1.27 +// Auto clean-up when a test ends
1.28 +registerCleanupFunction(() => {
1.29 + try {
1.30 + let target = TargetFactory.forTab(gBrowser.selectedTab);
1.31 + gDevTools.closeToolbox(target);
1.32 + } catch (ex) {
1.33 + dump(ex);
1.34 + }
1.35 + while (gBrowser.tabs.length > 1) {
1.36 + gBrowser.removeCurrentTab();
1.37 + }
1.38 +});
1.39 +
1.40 +// Uncomment to log events
1.41 +// Services.prefs.setBoolPref("devtools.dump.emit", true);
1.42 +
1.43 +// Clean-up all prefs that might have been changed during a test run
1.44 +// (safer here because if the test fails, then the pref is never reverted)
1.45 +registerCleanupFunction(() => {
1.46 + Services.prefs.clearUserPref("devtools.dump.emit");
1.47 + Services.prefs.clearUserPref("devtools.defaultColorUnit");
1.48 +});
1.49 +
1.50 +/**
1.51 + * The functions found below are here to ease test development and maintenance.
1.52 + * Most of these functions are stateless and will require some form of context
1.53 + * (the instance of the current toolbox, or inspector panel for instance).
1.54 + *
1.55 + * Most of these functions are async too and return promises.
1.56 + *
1.57 + * All tests should follow the following pattern:
1.58 + *
1.59 + * let test = asyncTest(function*() {
1.60 + * yield addTab(TEST_URI);
1.61 + * let {toolbox, inspector, view} = yield openComputedView();
1.62 + *
1.63 + * yield selectNode("#test", inspector);
1.64 + * yield someAsyncTestFunction(view);
1.65 + * });
1.66 + *
1.67 + * asyncTest is the way to define the testcase in the test file. It accepts
1.68 + * a single generator-function argument.
1.69 + * The generator function should yield any async call.
1.70 + *
1.71 + * There is no need to clean tabs up at the end of a test as this is done
1.72 + * automatically.
1.73 + *
1.74 + * It is advised not to store any references on the global scope. There shouldn't
1.75 + * be a need to anyway. Thanks to asyncTest, test steps, even though asynchronous,
1.76 + * can be described in a nice flat way, and if/for/while/... control flow can be
1.77 + * used as in sync code, making it possible to write the outline of the test case
1.78 + * all in asyncTest, and delegate actual processing and assertions to other
1.79 + * functions.
1.80 + */
1.81 +
1.82 +/* *********************************************
1.83 + * UTILS
1.84 + * *********************************************
1.85 + * General test utilities.
1.86 + * Define the test case, add new tabs, open the toolbox and switch to the
1.87 + * various panels, select nodes, get node references, ...
1.88 + */
1.89 +
1.90 +/**
1.91 + * Define an async test based on a generator function
1.92 + */
1.93 +function asyncTest(generator) {
1.94 + return () => Task.spawn(generator).then(null, ok.bind(null, false)).then(finish);
1.95 +}
1.96 +
1.97 +/**
1.98 + * Add a new test tab in the browser and load the given url.
1.99 + * @param {String} url The url to be loaded in the new tab
1.100 + * @return a promise that resolves to the tab object when the url is loaded
1.101 + */
1.102 +function addTab(url) {
1.103 + let def = promise.defer();
1.104 +
1.105 + let tab = gBrowser.selectedTab = gBrowser.addTab();
1.106 + gBrowser.selectedBrowser.addEventListener("load", function onload() {
1.107 + gBrowser.selectedBrowser.removeEventListener("load", onload, true);
1.108 + info("URL " + url + " loading complete into new test tab");
1.109 + waitForFocus(() => {
1.110 + def.resolve(tab);
1.111 + }, content);
1.112 + }, true);
1.113 + content.location = url;
1.114 +
1.115 + return def.promise;
1.116 +}
1.117 +
1.118 +/**
1.119 + * Simple DOM node accesor function that takes either a node or a string css
1.120 + * selector as argument and returns the corresponding node
1.121 + * @param {String|DOMNode} nodeOrSelector
1.122 + * @return {DOMNode}
1.123 + */
1.124 +function getNode(nodeOrSelector) {
1.125 + return typeof nodeOrSelector === "string" ?
1.126 + content.document.querySelector(nodeOrSelector) :
1.127 + nodeOrSelector;
1.128 +}
1.129 +
1.130 +/**
1.131 + * Set the inspector's current selection to a node or to the first match of the
1.132 + * given css selector
1.133 + * @param {InspectorPanel} inspector The instance of InspectorPanel currently
1.134 + * loaded in the toolbox
1.135 + * @param {String} reason Defaults to "test" which instructs the inspector not
1.136 + * to highlight the node upon selection
1.137 + * @param {String} reason Defaults to "test" which instructs the inspector not to highlight the node upon selection
1.138 + * @return a promise that resolves when the inspector is updated with the new
1.139 + * node
1.140 + */
1.141 +function selectNode(nodeOrSelector, inspector, reason="test") {
1.142 + info("Selecting the node " + nodeOrSelector);
1.143 + let node = getNode(nodeOrSelector);
1.144 + let updated = inspector.once("inspector-updated");
1.145 + inspector.selection.setNode(node, reason);
1.146 + return updated;
1.147 +}
1.148 +
1.149 +/**
1.150 + * Set the inspector's current selection to null so that no node is selected
1.151 + * @param {InspectorPanel} inspector The instance of InspectorPanel currently
1.152 + * loaded in the toolbox
1.153 + * @return a promise that resolves when the inspector is updated
1.154 + */
1.155 +function clearCurrentNodeSelection(inspector) {
1.156 + info("Clearing the current selection");
1.157 + let updated = inspector.once("inspector-updated");
1.158 + inspector.selection.setNode(null);
1.159 + return updated;
1.160 +}
1.161 +
1.162 +/**
1.163 + * Open the toolbox, with the inspector tool visible.
1.164 + * @return a promise that resolves when the inspector is ready
1.165 + */
1.166 +let openInspector = Task.async(function*() {
1.167 + info("Opening the inspector");
1.168 + let target = TargetFactory.forTab(gBrowser.selectedTab);
1.169 +
1.170 + let inspector, toolbox;
1.171 +
1.172 + // Checking if the toolbox and the inspector are already loaded
1.173 + // The inspector-updated event should only be waited for if the inspector
1.174 + // isn't loaded yet
1.175 + toolbox = gDevTools.getToolbox(target);
1.176 + if (toolbox) {
1.177 + inspector = toolbox.getPanel("inspector");
1.178 + if (inspector) {
1.179 + info("Toolbox and inspector already open");
1.180 + return {
1.181 + toolbox: toolbox,
1.182 + inspector: inspector
1.183 + };
1.184 + }
1.185 + }
1.186 +
1.187 + info("Opening the toolbox");
1.188 + toolbox = yield gDevTools.showToolbox(target, "inspector");
1.189 + yield waitForToolboxFrameFocus(toolbox);
1.190 + inspector = toolbox.getPanel("inspector");
1.191 +
1.192 + info("Waiting for the inspector to update");
1.193 + yield inspector.once("inspector-updated");
1.194 +
1.195 + return {
1.196 + toolbox: toolbox,
1.197 + inspector: inspector
1.198 + };
1.199 +});
1.200 +
1.201 +/**
1.202 + * Wait for the toolbox frame to receive focus after it loads
1.203 + * @param {Toolbox} toolbox
1.204 + * @return a promise that resolves when focus has been received
1.205 + */
1.206 +function waitForToolboxFrameFocus(toolbox) {
1.207 + info("Making sure that the toolbox's frame is focused");
1.208 + let def = promise.defer();
1.209 + let win = toolbox.frame.contentWindow;
1.210 + waitForFocus(def.resolve, win);
1.211 + return def.promise;
1.212 +}
1.213 +
1.214 +/**
1.215 + * Open the toolbox, with the inspector tool visible, and the sidebar that
1.216 + * corresponds to the given id selected
1.217 + * @return a promise that resolves when the inspector is ready and the sidebar
1.218 + * view is visible and ready
1.219 + */
1.220 +let openInspectorSideBar = Task.async(function*(id) {
1.221 + let {toolbox, inspector} = yield openInspector();
1.222 +
1.223 + if (!hasSideBarTab(inspector, id)) {
1.224 + info("Waiting for the " + id + " sidebar to be ready");
1.225 + yield inspector.sidebar.once(id + "-ready");
1.226 + }
1.227 +
1.228 + info("Selecting the " + id + " sidebar");
1.229 + inspector.sidebar.select(id);
1.230 +
1.231 + return {
1.232 + toolbox: toolbox,
1.233 + inspector: inspector,
1.234 + view: inspector.sidebar.getWindowForTab(id)[id].view
1.235 + };
1.236 +});
1.237 +
1.238 +/**
1.239 + * Open the toolbox, with the inspector tool visible, and the computed-view
1.240 + * sidebar tab selected.
1.241 + * @return a promise that resolves when the inspector is ready and the computed
1.242 + * view is visible and ready
1.243 + */
1.244 +function openComputedView() {
1.245 + return openInspectorSideBar("computedview");
1.246 +}
1.247 +
1.248 +/**
1.249 + * Open the toolbox, with the inspector tool visible, and the rule-view
1.250 + * sidebar tab selected.
1.251 + * @return a promise that resolves when the inspector is ready and the rule
1.252 + * view is visible and ready
1.253 + */
1.254 +function openRuleView() {
1.255 + return openInspectorSideBar("ruleview");
1.256 +}
1.257 +
1.258 +/**
1.259 + * Wait for eventName on target.
1.260 + * @param {Object} target An observable object that either supports on/off or
1.261 + * addEventListener/removeEventListener
1.262 + * @param {String} eventName
1.263 + * @param {Boolean} useCapture Optional, for addEventListener/removeEventListener
1.264 + * @return A promise that resolves when the event has been handled
1.265 + */
1.266 +function once(target, eventName, useCapture=false) {
1.267 + info("Waiting for event: '" + eventName + "' on " + target + ".");
1.268 +
1.269 + let deferred = promise.defer();
1.270 +
1.271 + for (let [add, remove] of [
1.272 + ["addEventListener", "removeEventListener"],
1.273 + ["addListener", "removeListener"],
1.274 + ["on", "off"]
1.275 + ]) {
1.276 + if ((add in target) && (remove in target)) {
1.277 + target[add](eventName, function onEvent(...aArgs) {
1.278 + target[remove](eventName, onEvent, useCapture);
1.279 + deferred.resolve.apply(deferred, aArgs);
1.280 + }, useCapture);
1.281 + break;
1.282 + }
1.283 + }
1.284 +
1.285 + return deferred.promise;
1.286 +}
1.287 +
1.288 +/**
1.289 + * This shouldn't be used in the tests, but is useful when writing new tests or
1.290 + * debugging existing tests in order to introduce delays in the test steps
1.291 + * @param {Number} ms The time to wait
1.292 + * @return A promise that resolves when the time is passed
1.293 + */
1.294 +function wait(ms) {
1.295 + let def = promise.defer();
1.296 + content.setTimeout(def.resolve, ms);
1.297 + return def.promise;
1.298 +}
1.299 +
1.300 +/**
1.301 + * Given an inplace editable element, click to switch it to edit mode, wait for
1.302 + * focus
1.303 + * @return a promise that resolves to the inplace-editor element when ready
1.304 + */
1.305 +let focusEditableField = Task.async(function*(editable, xOffset=1, yOffset=1, options={}) {
1.306 + let onFocus = once(editable.parentNode, "focus", true);
1.307 +
1.308 + info("Clicking on editable field to turn to edit mode");
1.309 + EventUtils.synthesizeMouse(editable, xOffset, yOffset, options,
1.310 + editable.ownerDocument.defaultView);
1.311 + let event = yield onFocus;
1.312 +
1.313 + info("Editable field gained focus, returning the input field now");
1.314 + return inplaceEditor(editable.ownerDocument.activeElement);
1.315 +});
1.316 +
1.317 +/**
1.318 + * Given a tooltip object instance (see Tooltip.js), checks if it is set to
1.319 + * toggle and hover and if so, checks if the given target is a valid hover target.
1.320 + * This won't actually show the tooltip (the less we interact with XUL panels
1.321 + * during test runs, the better).
1.322 + * @return a promise that resolves when the answer is known
1.323 + */
1.324 +function isHoverTooltipTarget(tooltip, target) {
1.325 + if (!tooltip._basedNode || !tooltip.panel) {
1.326 + return promise.reject(new Error(
1.327 + "The tooltip passed isn't set to toggle on hover or is not a tooltip"));
1.328 + }
1.329 + return tooltip.isValidHoverTarget(target);
1.330 +}
1.331 +
1.332 +/**
1.333 + * Same as isHoverTooltipTarget except that it will fail the test if there is no
1.334 + * tooltip defined on hover of the given element
1.335 + * @return a promise
1.336 + */
1.337 +function assertHoverTooltipOn(tooltip, element) {
1.338 + return isHoverTooltipTarget(tooltip, element).then(() => {
1.339 + ok(true, "A tooltip is defined on hover of the given element");
1.340 + }, () => {
1.341 + ok(false, "No tooltip is defined on hover of the given element");
1.342 + });
1.343 +}
1.344 +
1.345 +/**
1.346 + * Same as assertHoverTooltipOn but fails the test if there is a tooltip defined
1.347 + * on hover of the given element
1.348 + * @return a promise
1.349 + */
1.350 +function assertNoHoverTooltipOn(tooltip, element) {
1.351 + return isHoverTooltipTarget(tooltip, element).then(() => {
1.352 + ok(false, "A tooltip is defined on hover of the given element");
1.353 + }, () => {
1.354 + ok(true, "No tooltip is defined on hover of the given element");
1.355 + });
1.356 +}
1.357 +
1.358 +/**
1.359 + * Listen for a new window to open and return a promise that resolves when one
1.360 + * does and completes its load.
1.361 + * Only resolves when the new window topic isn't domwindowopened.
1.362 + * @return a promise that resolves to the window object
1.363 + */
1.364 +function waitForWindow() {
1.365 + let def = promise.defer();
1.366 +
1.367 + info("Waiting for a window to open");
1.368 + Services.ww.registerNotification(function onWindow(subject, topic) {
1.369 + if (topic != "domwindowopened") {
1.370 + return;
1.371 + }
1.372 + info("A window has been opened");
1.373 + let win = subject.QueryInterface(Ci.nsIDOMWindow);
1.374 + once(win, "load").then(() => {
1.375 + info("The window load completed");
1.376 + Services.ww.unregisterNotification(onWindow);
1.377 + def.resolve(win);
1.378 + });
1.379 + });
1.380 +
1.381 + return def.promise;
1.382 +}
1.383 +
1.384 +/**
1.385 + * @see SimpleTest.waitForClipboard
1.386 + * @param {Function} setup Function to execute before checking for the
1.387 + * clipboard content
1.388 + * @param {String|Boolean} expected An expected string or validator function
1.389 + * @return a promise that resolves when the expected string has been found or
1.390 + * the validator function has returned true, rejects otherwise.
1.391 + */
1.392 +function waitForClipboard(setup, expected) {
1.393 + let def = promise.defer();
1.394 + SimpleTest.waitForClipboard(expected, setup, def.resolve, def.reject);
1.395 + return def.promise;
1.396 +}
1.397 +
1.398 +/**
1.399 + * Dispatch the copy event on the given element
1.400 + */
1.401 +function fireCopyEvent(element) {
1.402 + let evt = element.ownerDocument.createEvent("Event");
1.403 + evt.initEvent("copy", true, true);
1.404 + element.dispatchEvent(evt);
1.405 +}
1.406 +
1.407 +/**
1.408 + * Polls a given function waiting for it to return true.
1.409 + *
1.410 + * @param {Function} validatorFn A validator function that returns a boolean.
1.411 + * This is called every few milliseconds to check if the result is true. When
1.412 + * it is true, the promise resolves. If validatorFn never returns true, then
1.413 + * polling timeouts after several tries and the promise rejects.
1.414 + * @param {String} name Optional name of the test. This is used to generate
1.415 + * the success and failure messages.
1.416 + * @param {Number} timeout Optional timeout for the validator function, in
1.417 + * milliseconds. Default is 5000.
1.418 + * @return a promise that resolves when the function returned true or rejects
1.419 + * if the timeout is reached
1.420 + */
1.421 +function waitForSuccess(validatorFn, name="untitled", timeout=5000) {
1.422 + let def = promise.defer();
1.423 + let start = Date.now();
1.424 +
1.425 + function wait(validatorFn) {
1.426 + if ((Date.now() - start) > timeout) {
1.427 + ok(false, "Validator function " + name + " timed out");
1.428 + return def.reject();
1.429 + }
1.430 + if (validatorFn()) {
1.431 + ok(true, "Validator function " + name + " returned true");
1.432 + def.resolve();
1.433 + } else {
1.434 + setTimeout(() => wait(validatorFn), 100);
1.435 + }
1.436 + }
1.437 + wait(validatorFn);
1.438 +
1.439 + return def.promise;
1.440 +}
1.441 +
1.442 +/**
1.443 + * Create a new style tag containing the given style text and append it to the
1.444 + * document's head node
1.445 + * @param {Document} doc
1.446 + * @param {String} style
1.447 + * @return {DOMNode} The newly created style node
1.448 + */
1.449 +function addStyle(doc, style) {
1.450 + info("Adding a new style tag to the document with style content: " +
1.451 + style.substring(0, 50));
1.452 + let node = doc.createElement('style');
1.453 + node.setAttribute("type", "text/css");
1.454 + node.textContent = style;
1.455 + doc.getElementsByTagName("head")[0].appendChild(node);
1.456 + return node;
1.457 +}
1.458 +
1.459 +/**
1.460 + * Checks whether the inspector's sidebar corresponding to the given id already
1.461 + * exists
1.462 + * @param {InspectorPanel}
1.463 + * @param {String}
1.464 + * @return {Boolean}
1.465 + */
1.466 +function hasSideBarTab(inspector, id) {
1.467 + return !!inspector.sidebar.getWindowForTab(id);
1.468 +}
1.469 +
1.470 +/* *********************************************
1.471 + * RULE-VIEW
1.472 + * *********************************************
1.473 + * Rule-view related test utility functions
1.474 + * This object contains functions to get rules, get properties, ...
1.475 + */
1.476 +
1.477 +/**
1.478 + * Get the DOMNode for a css rule in the rule-view that corresponds to the given
1.479 + * selector
1.480 + * @param {CssRuleView} view The instance of the rule-view panel
1.481 + * @param {String} selectorText The selector in the rule-view for which the rule
1.482 + * object is wanted
1.483 + * @return {DOMNode}
1.484 + */
1.485 +function getRuleViewRule(view, selectorText) {
1.486 + let rule;
1.487 + for (let r of view.doc.querySelectorAll(".ruleview-rule")) {
1.488 + let selector = r.querySelector(".ruleview-selector, .ruleview-selector-matched");
1.489 + if (selector && selector.textContent === selectorText) {
1.490 + rule = r;
1.491 + break;
1.492 + }
1.493 + }
1.494 +
1.495 + return rule;
1.496 +}
1.497 +
1.498 +/**
1.499 + * Get references to the name and value span nodes corresponding to a given
1.500 + * selector and property name in the rule-view
1.501 + * @param {CssRuleView} view The instance of the rule-view panel
1.502 + * @param {String} selectorText The selector in the rule-view to look for the
1.503 + * property in
1.504 + * @param {String} propertyName The name of the property
1.505 + * @return {Object} An object like {nameSpan: DOMNode, valueSpan: DOMNode}
1.506 + */
1.507 +function getRuleViewProperty(view, selectorText, propertyName) {
1.508 + let prop;
1.509 +
1.510 + let rule = getRuleViewRule(view, selectorText);
1.511 + if (rule) {
1.512 + // Look for the propertyName in that rule element
1.513 + for (let p of rule.querySelectorAll(".ruleview-property")) {
1.514 + let nameSpan = p.querySelector(".ruleview-propertyname");
1.515 + let valueSpan = p.querySelector(".ruleview-propertyvalue");
1.516 +
1.517 + if (nameSpan.textContent === propertyName) {
1.518 + prop = {nameSpan: nameSpan, valueSpan: valueSpan};
1.519 + break;
1.520 + }
1.521 + }
1.522 + }
1.523 + return prop;
1.524 +}
1.525 +
1.526 +/**
1.527 + * Get the text value of the property corresponding to a given selector and name
1.528 + * in the rule-view
1.529 + * @param {CssRuleView} view The instance of the rule-view panel
1.530 + * @param {String} selectorText The selector in the rule-view to look for the
1.531 + * property in
1.532 + * @param {String} propertyName The name of the property
1.533 + * @return {String} The property value
1.534 + */
1.535 +function getRuleViewPropertyValue(view, selectorText, propertyName) {
1.536 + return getRuleViewProperty(view, selectorText, propertyName)
1.537 + .valueSpan.textContent;
1.538 +}
1.539 +
1.540 +/**
1.541 + * Simulate a color change in a given color picker tooltip, and optionally wait
1.542 + * for a given element in the page to have its style changed as a result
1.543 + * @param {SwatchColorPickerTooltip} colorPicker
1.544 + * @param {Array} newRgba The new color to be set [r, g, b, a]
1.545 + * @param {Object} expectedChange Optional object that needs the following props:
1.546 + * - {DOMNode} element The element in the page that will have its
1.547 + * style changed.
1.548 + * - {String} name The style name that will be changed
1.549 + * - {String} value The expected style value
1.550 + * The style will be checked like so: getComputedStyle(element)[name] === value
1.551 + */
1.552 +let simulateColorPickerChange = Task.async(function*(colorPicker, newRgba, expectedChange) {
1.553 + info("Getting the spectrum colorpicker object");
1.554 + let spectrum = yield colorPicker.spectrum;
1.555 + info("Setting the new color");
1.556 + spectrum.rgb = newRgba;
1.557 + info("Applying the change");
1.558 + spectrum.updateUI();
1.559 + spectrum.onChange();
1.560 +
1.561 + if (expectedChange) {
1.562 + info("Waiting for the style to be applied on the page");
1.563 + yield waitForSuccess(() => {
1.564 + let {element, name, value} = expectedChange;
1.565 + return content.getComputedStyle(element)[name] === value;
1.566 + }, "Color picker change applied on the page");
1.567 + }
1.568 +});
1.569 +
1.570 +/**
1.571 + * Get a rule-link from the rule-view given its index
1.572 + * @param {CssRuleView} view The instance of the rule-view panel
1.573 + * @param {Number} index The index of the link to get
1.574 + * @return {DOMNode} The link if any at this index
1.575 + */
1.576 +function getRuleViewLinkByIndex(view, index) {
1.577 + let links = view.doc.querySelectorAll(".ruleview-rule-source");
1.578 + return links[index];
1.579 +}
1.580 +
1.581 +/**
1.582 + * Click on a rule-view's close brace to focus a new property name editor
1.583 + * @param {RuleEditor} ruleEditor An instance of RuleEditor that will receive
1.584 + * the new property
1.585 + * @return a promise that resolves to the newly created editor when ready and
1.586 + * focused
1.587 + */
1.588 +let focusNewRuleViewProperty = Task.async(function*(ruleEditor) {
1.589 + info("Clicking on a close ruleEditor brace to start editing a new property");
1.590 + ruleEditor.closeBrace.scrollIntoView();
1.591 + let editor = yield focusEditableField(ruleEditor.closeBrace);
1.592 +
1.593 + is(inplaceEditor(ruleEditor.newPropSpan), editor, "Focused editor is the new property editor.");
1.594 + is(ruleEditor.rule.textProps.length, 0, "Starting with one new text property.");
1.595 + is(ruleEditor.propertyList.children.length, 1, "Starting with two property editors.");
1.596 +
1.597 + return editor;
1.598 +});
1.599 +
1.600 +/**
1.601 + * Create a new property name in the rule-view, focusing a new property editor
1.602 + * by clicking on the close brace, and then entering the given text.
1.603 + * Keep in mind that the rule-view knows how to handle strings with multiple
1.604 + * properties, so the input text may be like: "p1:v1;p2:v2;p3:v3".
1.605 + * @param {RuleEditor} ruleEditor The instance of RuleEditor that will receive
1.606 + * the new property(ies)
1.607 + * @param {String} inputValue The text to be entered in the new property name
1.608 + * field
1.609 + * @return a promise that resolves when the new property name has been entered
1.610 + * and once the value field is focused
1.611 + */
1.612 +let createNewRuleViewProperty = Task.async(function*(ruleEditor, inputValue) {
1.613 + info("Creating a new property editor");
1.614 + let editor = yield focusNewRuleViewProperty(ruleEditor);
1.615 +
1.616 + info("Entering the value " + inputValue);
1.617 + editor.input.value = inputValue;
1.618 +
1.619 + info("Submitting the new value and waiting for value field focus");
1.620 + let onFocus = once(ruleEditor.element, "focus", true);
1.621 + EventUtils.synthesizeKey("VK_RETURN", {},
1.622 + ruleEditor.element.ownerDocument.defaultView);
1.623 + yield onFocus;
1.624 +});
1.625 +
1.626 +// TO BE UNCOMMENTED WHEN THE EYEDROPPER FINALLY LANDS
1.627 +// /**
1.628 +// * Given a color swatch in the ruleview, click on it to open the color picker
1.629 +// * and then click on the eyedropper button to start the eyedropper tool
1.630 +// * @param {CssRuleView} view The instance of the rule-view panel
1.631 +// * @param {DOMNode} swatch The color swatch to be clicked on
1.632 +// * @return A promise that resolves when the dropper is opened
1.633 +// */
1.634 +// let openRuleViewEyeDropper = Task.async(function*(view, swatch) {
1.635 +// info("Opening the colorpicker tooltip on a colorswatch");
1.636 +// let tooltip = view.colorPicker.tooltip;
1.637 +// let onTooltipShown = tooltip.once("shown");
1.638 +// swatch.click();
1.639 +// yield onTooltipShown;
1.640 +
1.641 +// info("Finding the eyedropper icon in the colorpicker document");
1.642 +// let tooltipDoc = tooltip.content.contentDocument;
1.643 +// let dropperButton = tooltipDoc.querySelector("#eyedropper-button");
1.644 +// ok(dropperButton, "Found the eyedropper icon");
1.645 +
1.646 +// info("Opening the eyedropper");
1.647 +// let onOpen = tooltip.once("eyedropper-opened");
1.648 +// dropperButton.click();
1.649 +// return yield onOpen;
1.650 +// });
1.651 +
1.652 +/* *********************************************
1.653 + * COMPUTED-VIEW
1.654 + * *********************************************
1.655 + * Computed-view related utility functions.
1.656 + * Allows to get properties, links, expand properties, ...
1.657 + */
1.658 +
1.659 +/**
1.660 + * Get references to the name and value span nodes corresponding to a given
1.661 + * property name in the computed-view
1.662 + * @param {CssHtmlTree} view The instance of the computed view panel
1.663 + * @param {String} name The name of the property to retrieve
1.664 + * @return an object {nameSpan, valueSpan}
1.665 + */
1.666 +function getComputedViewProperty(view, name) {
1.667 + let prop;
1.668 + for (let property of view.styleDocument.querySelectorAll(".property-view")) {
1.669 + let nameSpan = property.querySelector(".property-name");
1.670 + let valueSpan = property.querySelector(".property-value");
1.671 +
1.672 + if (nameSpan.textContent === name) {
1.673 + prop = {nameSpan: nameSpan, valueSpan: valueSpan};
1.674 + break;
1.675 + }
1.676 + }
1.677 + return prop;
1.678 +}
1.679 +
1.680 +/**
1.681 + * Get the text value of the property corresponding to a given name in the
1.682 + * computed-view
1.683 + * @param {CssHtmlTree} view The instance of the computed view panel
1.684 + * @param {String} name The name of the property to retrieve
1.685 + * @return {String} The property value
1.686 + */
1.687 +function getComputedViewPropertyValue(view, selectorText, propertyName) {
1.688 + return getComputedViewProperty(view, selectorText, propertyName)
1.689 + .valueSpan.textContent;
1.690 +}
1.691 +
1.692 +/**
1.693 + * Expand a given property, given its index in the current property list of
1.694 + * the computed view
1.695 + * @param {CssHtmlTree} view The instance of the computed view panel
1.696 + * @param {InspectorPanel} inspector The instance of the inspector panel
1.697 + * @param {Number} index The index of the property to be expanded
1.698 + * @return a promise that resolves when the property has been expanded, or
1.699 + * rejects if the property was not found
1.700 + */
1.701 +function expandComputedViewPropertyByIndex(view, inspector, index) {
1.702 + info("Expanding property " + index + " in the computed view");
1.703 + let expandos = view.styleDocument.querySelectorAll(".expandable");
1.704 + if (!expandos.length || !expandos[index]) {
1.705 + return promise.reject();
1.706 + }
1.707 +
1.708 + let onExpand = inspector.once("computed-view-property-expanded");
1.709 + expandos[index].click();
1.710 + return onExpand;
1.711 +}
1.712 +
1.713 +/**
1.714 + * Get a rule-link from the computed-view given its index
1.715 + * @param {CssHtmlTree} view The instance of the computed view panel
1.716 + * @param {Number} index The index of the link to be retrieved
1.717 + * @return {DOMNode} The link at the given index, if one exists, null otherwise
1.718 + */
1.719 +function getComputedViewLinkByIndex(view, index) {
1.720 + let links = view.styleDocument.querySelectorAll(".rule-link .link");
1.721 + return links[index];
1.722 +}
1.723 +
1.724 +/* *********************************************
1.725 + * STYLE-EDITOR
1.726 + * *********************************************
1.727 + * Style-editor related utility functions.
1.728 + */
1.729 +
1.730 +/**
1.731 + * Wait for the toolbox to emit the styleeditor-selected event and when done
1.732 + * wait for the stylesheet identified by href to be loaded in the stylesheet
1.733 + * editor
1.734 + * @param {Toolbox} toolbox
1.735 + * @param {String} href Optional, if not provided, wait for the first editor
1.736 + * to be ready
1.737 + * @return a promise that resolves to the editor when the stylesheet editor is
1.738 + * ready
1.739 + */
1.740 +function waitForStyleEditor(toolbox, href) {
1.741 + let def = promise.defer();
1.742 +
1.743 + info("Waiting for the toolbox to switch to the styleeditor");
1.744 + toolbox.once("styleeditor-ready").then(() => {
1.745 + let panel = toolbox.getCurrentPanel();
1.746 + ok(panel && panel.UI, "Styleeditor panel switched to front");
1.747 +
1.748 + panel.UI.on("editor-selected", function onEditorSelected(event, editor) {
1.749 + let currentHref = editor.styleSheet.href;
1.750 + if (!href || (href && currentHref.endsWith(href))) {
1.751 + info("Stylesheet editor selected");
1.752 + panel.UI.off("editor-selected", onEditorSelected);
1.753 + editor.getSourceEditor().then(editor => {
1.754 + info("Stylesheet editor fully loaded");
1.755 + def.resolve(editor);
1.756 + });
1.757 + }
1.758 + });
1.759 + });
1.760 +
1.761 + return def.promise;
1.762 +}
