--- a/.eslintignore
+++ b/.eslintignore
@@ -80,17 +80,16 @@ devtools/client/canvasdebugger/**
devtools/client/commandline/**
devtools/client/debugger/**
devtools/client/eyedropper/**
devtools/client/framework/**
# devtools/client/inspector/shared/*.js files are eslint-clean, so they aren't
# included in the ignore list.
devtools/client/inspector/computed/**
devtools/client/inspector/fonts/**
-devtools/client/inspector/shared/test/**
devtools/client/inspector/test/**
devtools/client/inspector/*.js
!devtools/client/inspector/breadcrumbs.js
devtools/client/jsonview/lib/**
devtools/client/memory/**
devtools/client/netmonitor/test/**
devtools/client/netmonitor/har/test/**
devtools/client/performance/**
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
@@ -6,109 +6,126 @@
/* Tests both Copy URL and Copy Data URL context menu items */
const PROPERTIES_URL = "chrome://devtools-shared/locale/styleinspector.properties";
const TEST_DATA_URI = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
// Invalid URL still needs to be reachable otherwise getImageDataUrl will
// timeout. DevTools chrome:// URLs aren't content accessible, so use some
// random resource:// URL here.
-const INVALID_IMAGE_URI =
- "resource://devtools/client/definitions.js";
+const INVALID_IMAGE_URI = "resource://devtools/client/definitions.js";
const ERROR_MESSAGE = Services.strings
.createBundle(PROPERTIES_URL)
.GetStringFromName("styleinspector.copyImageDataUrlError");
-add_task(function*() {
- const PAGE_CONTENT = [
- "<style type=\"text/css\">",
- " .valid-background {",
- " background-image: url(" + TEST_DATA_URI + ");",
- " }",
- " .invalid-background {",
- " background-image: url(" + INVALID_IMAGE_URI + ");",
- " }",
- "</style>",
- "<div class=\"valid-background\">Valid background image</div>",
- "<div class=\"invalid-background\">Invalid background image</div>"
- ].join("\n");
+add_task(function* () {
+ const TEST_URI = `<style type="text/css">
+ .valid-background {
+ background-image: url(${TEST_DATA_URI});
+ }
+ .invalid-background {
+ background-image: url(${INVALID_IMAGE_URI});
+ }
+ </style>
+ <div class="valid-background">Valid background image</div>
+ <div class="invalid-background">Invalid background image</div>`;
- yield addTab("data:text/html;charset=utf8," + encodeURIComponent(PAGE_CONTENT));
+ yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
yield startTest();
});
function* startTest() {
info("Opening rule view");
let {inspector, view} = yield openRuleView();
info("Test valid background image URL in rule view");
- yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".valid-background", TEST_DATA_URI);
- yield testCopyUrlToClipboard({view, inspector}, "url", ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+ ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "url",
+ ".valid-background", TEST_DATA_URI);
+
info("Test invalid background image URL in rue view");
- yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".invalid-background", ERROR_MESSAGE);
- yield testCopyUrlToClipboard({view, inspector}, "url", ".invalid-background", INVALID_IMAGE_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+ ".invalid-background", ERROR_MESSAGE);
+ yield testCopyUrlToClipboard({view, inspector}, "url",
+ ".invalid-background", INVALID_IMAGE_URI);
info("Opening computed view");
view = selectComputedView(inspector);
info("Test valid background image URL in computed view");
- yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".valid-background", TEST_DATA_URI);
- yield testCopyUrlToClipboard({view, inspector}, "url", ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+ ".valid-background", TEST_DATA_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "url",
+ ".valid-background", TEST_DATA_URI);
+
info("Test invalid background image URL in computed view");
- yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".invalid-background", ERROR_MESSAGE);
- yield testCopyUrlToClipboard({view, inspector}, "url", ".invalid-background", INVALID_IMAGE_URI);
+ yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+ ".invalid-background", ERROR_MESSAGE);
+ yield testCopyUrlToClipboard({view, inspector}, "url",
+ ".invalid-background", INVALID_IMAGE_URI);
}
function* testCopyUrlToClipboard({view, inspector}, type, selector, expected) {
info("Select node in inspector panel");
yield selectNode(selector, inspector);
- info("Retrieve background-image link for selected node in current styleinspector view");
+ info("Retrieve background-image link for selected node in current " +
+ "styleinspector view");
let property = getBackgroundImageProperty(view, selector);
let imageLink = property.valueSpan.querySelector(".theme-link");
ok(imageLink, "Background-image link element found");
info("Simulate right click on the background-image URL");
let popup = once(view._contextmenu._menupopup, "popupshown");
- // Cannot rely on synthesizeMouseAtCenter here. The image URL can be displayed on several lines.
- // A click simulated at the exact center may click between the lines and miss the target
- // Instead, using the top-left corner of first client rect, with an offset of 2 pixels.
+ // Cannot rely on synthesizeMouseAtCenter here. The image URL can be displayed
+ // on several lines. A click simulated at the exact center may click between
+ // the lines and miss the target. Instead, using the top-left corner of first
+ // client rect, with an offset of 2 pixels.
let rect = imageLink.getClientRects()[0];
let x = rect.left + 2;
let y = rect.top + 2;
- EventUtils.synthesizeMouseAtPoint(x, y, {button: 2, type: "contextmenu"}, getViewWindow(view));
+ EventUtils.synthesizeMouseAtPoint(x, y, {
+ button: 2,
+ type: "contextmenu"
+ }, getViewWindow(view));
yield popup;
info("Context menu is displayed");
- ok(!view._contextmenu.menuitemCopyUrl.hidden, "\"Copy URL\" menu entry is displayed");
- ok(!view._contextmenu.menuitemCopyImageDataUrl.hidden, "\"Copy Image Data-URL\" menu entry is displayed");
+ ok(!view._contextmenu.menuitemCopyUrl.hidden,
+ "\"Copy URL\" menu entry is displayed");
+ ok(!view._contextmenu.menuitemCopyImageDataUrl.hidden,
+ "\"Copy Image Data-URL\" menu entry is displayed");
if (type == "data-uri") {
info("Click Copy Data URI and wait for clipboard");
- yield waitForClipboard(() => view._contextmenu.menuitemCopyImageDataUrl.click(), expected);
+ yield waitForClipboard(() => {
+ return view._contextmenu.menuitemCopyImageDataUrl.click();
+ }, expected);
} else {
info("Click Copy URL and wait for clipboard");
- yield waitForClipboard(() => view._contextmenu.menuitemCopyUrl.click(), expected);
+ yield waitForClipboard(() => {
+ return view._contextmenu.menuitemCopyUrl.click();
+ }, expected);
}
info("Hide context menu");
view._contextmenu._menupopup.hidePopup();
}
function getBackgroundImageProperty(view, selector) {
let isRuleView = view instanceof CssRuleView;
if (isRuleView) {
return getRuleViewProperty(view, selector, "background-image");
- } else {
- return getComputedViewProperty(view, "background-image");
}
+ return getComputedViewProperty(view, "background-image");
}
/**
* Function that returns the window for a given view.
*/
function getViewWindow(view) {
let viewDocument = view.styleDocument ? view.styleDocument : view.doc;
return viewDocument.defaultView;
--- a/devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
@@ -15,17 +15,17 @@ const TEST_URI_AUTHOR = TEST_URL_ROOT +
const TEST_URI_XUL = TEST_URL_ROOT + "doc_content_stylesheet.xul";
const XUL_URI = Cc["@mozilla.org/network/io-service;1"]
.getService(Ci.nsIIOService)
.newURI(TEST_URI_XUL, null, null);
var ssm = Components.classes["@mozilla.org/scriptsecuritymanager;1"]
.getService(Ci.nsIScriptSecurityManager);
const XUL_PRINCIPAL = ssm.createCodebasePrincipal(XUL_URI, {});
-add_task(function*() {
+add_task(function* () {
requestLongerTimeout(2);
info("Checking stylesheets on HTML document");
yield addTab(TEST_URI_HTML);
let target = getNode("#target");
let {inspector} = yield openInspector();
yield selectNode("#target", inspector);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
@@ -140,31 +140,34 @@ const TEST_DATA = [
test: fragment => {
is(countAll(fragment), 1);
is(countUrls(fragment), 1);
is(getUrl(fragment), "http://somesite.com/path/to/binding.xml#someid");
}
},
{
name: "background",
- value: "linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, #F06 75%, red 100%)",
+ value: "linear-gradient(to right, rgba(183,222,237,1) 0%, " +
+ "rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, " +
+ "#F06 75%, red 100%)",
test: fragment => {
is(countAll(fragment), 10);
let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
is(allSwatches.length, 5);
is(allSwatches[0].textContent, "rgba(183,222,237,1)");
is(allSwatches[1].textContent, "rgba(33,180,226,1)");
is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
is(allSwatches[3].textContent, "#F06");
is(allSwatches[4].textContent, "red");
}
},
{
name: "background",
- value: "-moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)",
+ value: "-moz-radial-gradient(center 45deg, circle closest-side, " +
+ "orange 0%, red 100%)",
test: fragment => {
is(countAll(fragment), 6);
let colorSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
is(colorSwatches.length, 2);
is(colorSwatches[0].textContent, "orange");
is(colorSwatches[1].textContent, "red");
let angleSwatches = fragment.querySelectorAll("." + ANGLE_CLASS);
is(angleSwatches.length, 1);
@@ -202,20 +205,22 @@ const TEST_DATA = [
test: fragment => {
is(countAll(fragment), 3);
is(countColors(fragment), 1);
is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
}
},
{
name: "background-image",
- value: "url(../../../look/at/this/folder/structure/../../red.blue.green.svg )",
+ value: "url(../../../look/at/this/folder/structure/../" +
+ "../red.blue.green.svg )",
test: fragment => {
is(countAll(fragment), 1);
- is(getUrl(fragment), "../../../look/at/this/folder/structure/../../red.blue.green.svg");
+ is(getUrl(fragment), "../../../look/at/this/folder/structure/../" +
+ "../red.blue.green.svg");
}
},
{
name: "transition-timing-function",
value: "linear",
test: fragment => {
is(countCubicBeziers(fragment), 1);
is(getCubicBezier(fragment), "linear");
@@ -285,17 +290,17 @@ const TEST_DATA = [
name: "background",
value: "rgb(255, var(--g-value, 0), 192)",
test: fragment => {
is(fragment.textContent, "rgb(255, var(--g-value, 0), 192)");
}
}
];
-add_task(function*() {
+add_task(function* () {
let parser = new OutputParser(document);
for (let i = 0; i < TEST_DATA.length; i++) {
let data = TEST_DATA[i];
info("Output-parser test data " + i + ". {" + data.name + " : " +
data.value + ";}");
data.test(parser.parseCssProperty(data.name, data.value, {
colorClass: COLOR_CLASS,
urlClass: URL_CLASS,
--- a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
@@ -6,17 +6,17 @@
// Test that the style-inspector views only refresh when they are active.
const TEST_URI = `
<div id="one" style="color:red;">one</div>
<div id="two" style="color:blue;">two</div>
`;
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#one", inspector);
is(getRuleViewPropertyValue(view, "element", "color"), "red",
"The rule-view shows the properties for test node one");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
@@ -20,17 +20,17 @@ const TEST_URI = `
color: #333;
background: url(chrome://global/skin/icons/warning-64.png) no-repeat left center;
padding-left: 70px;
}
</style>
<div class="test-element">test element</div>
`;
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
info("Testing the background-image property on the body rule");
yield testBodyRuleView(view);
info("Selecting the test div node");
yield selectNode(".test-element", inspector);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -3,17 +3,17 @@
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that if a tooltip is visible when a new selection is made, it closes
const TEST_URI = "<div class='one'>el 1</div><div class='two'>el 2</div>";
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode(".one", inspector);
info("Testing rule view tooltip closes on new selection");
yield testRuleView(view, inspector);
info("Testing computed view tooltip closes on new selection");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -12,17 +12,17 @@ const TEST_URI = `
font-family: cursive;
color: #333;
padding-left: 70px;
}
</style>
<div id="testElement">test element</div>
`;
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testElement", inspector);
yield testRuleView(view, inspector.selection.nodeFront);
info("Opening the computed view");
let onComputedViewReady = inspector.once("computed-view-refreshed");
view = selectComputedView(inspector);
@@ -104,17 +104,17 @@ function* testExpandedComputedViewProper
let dataURL = yield getFontFamilyDataURL(valueSpan.textContent, nodeFront);
is(images[0].getAttribute("src"), dataURL,
"Tooltip contains the correct data-uri image");
}
function getPropertyView(computedView, name) {
let propertyView = null;
- computedView.propertyViews.some(function(view) {
+ computedView.propertyViews.some(function (view) {
if (view.name == name) {
propertyView = view;
return true;
}
return false;
});
return propertyView;
}
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
@@ -10,17 +10,17 @@ const TEST_URI = `
<style type="text/css">
#testElement {
font: italic bold .8em/1.2 Arial;
}
</style>
<div id="testElement">test element</div>
`;
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testElement", inspector);
yield testRuleView(view, inspector.selection.nodeFront);
});
function* testRuleView(ruleView, nodeFront) {
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
@@ -12,17 +12,17 @@ const TEST_URI = `
div {
width: 300px;height: 300px;border-radius: 50%;
background: red url(chrome://global/skin/icons/warning-64.png);
}
</style>
<div></div>
`;
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("div", inspector);
yield testImageDimension(view);
yield testPickerDimension(view);
});
function* testImageDimension(ruleView) {
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
@@ -12,17 +12,17 @@ const TEST_URI = `
transform: skew(16deg);
}
</style>
Test the css transform highlighter
`;
const TYPE = "CssTransformHighlighter";
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let overlay = view.highlighters;
ok(!overlay.highlighters[TYPE], "No highlighter exists in the rule-view");
let h = yield overlay._getHighlighter(TYPE);
ok(overlay.highlighters[TYPE],
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
@@ -14,17 +14,17 @@ const TEST_URI = `
color: yellow;
}
</style>
Test the css transform highlighter
`;
var TYPE = "CssTransformHighlighter";
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
let hs = view.highlighters;
ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (1)");
info("Faking a mousemove on a non-transform property");
let {valueSpan} = getRuleViewProperty(view, "body", "color");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
@@ -20,37 +20,37 @@ const TEST_URI = `
color: purple;
}
</style>
Test the css transform highlighter
`;
const TYPE = "CssTransformHighlighter";
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
// Mock the highlighter front to get the reference of the NodeFront
let HighlighterFront = {
isShown: false,
nodeFront: null,
nbOfTimesShown: 0,
- show: function(nodeFront) {
+ show: function (nodeFront) {
this.nodeFront = nodeFront;
this.isShown = true;
this.nbOfTimesShown ++;
return promise.resolve(true);
},
- hide: function() {
+ hide: function () {
this.nodeFront = null;
this.isShown = false;
return promise.resolve();
},
- finalize: function() {}
+ finalize: function () {}
};
// Inject the mock highlighter in the rule-view
let hs = view.highlighters;
hs.highlighters[TYPE] = HighlighterFront;
let {valueSpan} = getRuleViewProperty(view, "body", "transform");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
@@ -22,17 +22,17 @@ const TEST_URI = `
transform: skew(25deg);
}
</style>
<div class="test"></div>
`;
const TYPE = "CssTransformHighlighter";
-add_task(function*() {
+add_task(function* () {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode(".test", inspector);
let hs = view.highlighters;
info("Faking a mousemove on the overriden property");
let {valueSpan} = getRuleViewProperty(view, "div", "transform");
--- a/devtools/client/inspector/shared/test/doc_author-sheet.html
+++ b/devtools/client/inspector/shared/test/doc_author-sheet.html
@@ -1,37 +1,33 @@
<!-- Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
<title>authored sheet test</title>
-
<style>
#target {
color: chartreuse;
}
</style>
-
<script>
-var gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
- .getService(SpecialPowers.Ci.nsIIOService)
+ "use strict";
+ var gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
+ .getService(SpecialPowers.Ci.nsIIOService);
-var style = "data:text/css,div { background-color: seagreen; }";
-var uri = gIOService.newURI(style, null, null);
-var windowUtils = SpecialPowers.wrap(window)
- .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
- .getInterface(SpecialPowers.Ci.nsIDOMWindowUtils);
-windowUtils.loadSheet(uri, windowUtils.AUTHOR_SHEET);
-
+ var style = "data:text/css,div { background-color: seagreen; }";
+ var uri = gIOService.newURI(style, null, null);
+ var windowUtils = SpecialPowers.wrap(window)
+ .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
+ .getInterface(SpecialPowers.Ci.nsIDOMWindowUtils);
+ windowUtils.loadSheet(uri, windowUtils.AUTHOR_SHEET);
</script>
-
</head>
<body>
<div id="target"> the ocean </div>
-
<input type=text placeholder=test></input>
<input type=color></input>
<input type=range></input>
<input type=number></input>
<progress></progress>
<blockquote type=cite>
<pre _moz_quote=true>
inspect <a href="foo">user agent</a> styles
--- a/devtools/client/inspector/shared/test/doc_content_stylesheet.html
+++ b/devtools/client/inspector/shared/test/doc_content_stylesheet.html
@@ -1,25 +1,24 @@
<html>
<head>
<title>test</title>
-
<link href="./doc_content_stylesheet_linked.css" rel="stylesheet" type="text/css">
-
<script>
+ /* exported loadCSS */
+ "use strict";
// Load script.css
function loadCSS() {
- var link = document.createElement('link');
- link.rel = 'stylesheet';
- link.type = 'text/css';
+ let link = document.createElement("link");
+ link.rel = "stylesheet";
+ link.type = "text/css";
link.href = "./doc_content_stylesheet_script.css";
- document.getElementsByTagName('head')[0].appendChild(link);
+ document.getElementsByTagName("head")[0].appendChild(link);
}
</script>
-
<style>
table {
border: 1px solid #000;
}
</style>
</head>
<body onload="loadCSS();">
<table id="target">
--- a/devtools/client/inspector/shared/test/doc_frame_script.js
+++ b/devtools/client/inspector/shared/test/doc_frame_script.js
@@ -1,41 +1,42 @@
/* 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/ */
+/* globals addMessageListener, sendAsyncMessage */
"use strict";
// A helper frame-script for brower/devtools/styleinspector tests.
//
// Most listeners in the script expect "Test:"-namespaced messages from chrome,
// then execute code upon receiving, and immediately send back a message.
// This is so that chrome test code can execute code in content and wait for a
// response this way:
-// let response = yield executeInContent(browser, "Test:MessageName", data, true);
-// The response message should have the same name "Test:MessageName"
+// let response = yield executeInContent(browser, "Test:MsgName", data, true);
+// The response message should have the same name "Test:MsgName"
//
// Some listeners do not send a response message back.
-var {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
+var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
var {CssLogic} = require("devtools/shared/inspector/css-logic");
var promise = require("promise");
/**
* Get a value for a given property name in a css rule in a stylesheet, given
* their indexes
* @param {Object} data Expects a data object with the following properties
* - {Number} styleSheetIndex
* - {Number} ruleIndex
* - {String} name
* @return {String} The value, if found, null otherwise
*/
-addMessageListener("Test:GetRulePropertyValue", function(msg) {
+addMessageListener("Test:GetRulePropertyValue", function (msg) {
let {name, styleSheetIndex, ruleIndex} = msg.data;
let value = null;
dumpn("Getting the value for property name " + name + " in sheet " +
styleSheetIndex + " and rule " + ruleIndex);
let sheet = content.document.styleSheets[styleSheetIndex];
if (sheet) {
@@ -50,17 +51,17 @@ addMessageListener("Test:GetRuleProperty
/**
* Get information about all the stylesheets that contain rules that apply to
* a given node. The information contains the sheet href and whether or not the
* sheet is a content sheet or not
* @param {Object} objects Expects a 'target' CPOW object
* @return {Array} A list of stylesheet info objects
*/
-addMessageListener("Test:GetStyleSheetsInfoForNode", function(msg) {
+addMessageListener("Test:GetStyleSheetsInfoForNode", function (msg) {
let target = msg.objects.target;
let sheets = [];
let domUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
.getService(Ci.inIDOMUtils);
let domRules = domUtils.getCSSStyleRules(target);
for (let i = 0, n = domRules.Count(); i < n; i++) {
@@ -77,65 +78,66 @@ addMessageListener("Test:GetStyleSheetsI
/**
* Get the property value from the computed style for an element.
* @param {Object} data Expects a data object with the following properties
* - {String} selector: The selector used to obtain the element.
* - {String} pseudo: pseudo id to query, or null.
* - {String} name: name of the property
* @return {String} The value, if found, null otherwise
*/
-addMessageListener("Test:GetComputedStylePropertyValue", function(msg) {
+addMessageListener("Test:GetComputedStylePropertyValue", function (msg) {
let {selector, pseudo, name} = msg.data;
- let element = content.document.querySelector(selector);
- let value = content.document.defaultView.getComputedStyle(element, pseudo).getPropertyValue(name);
+ let doc = content.document;
+
+ let element = doc.querySelector(selector);
+ let value = content.getComputedStyle(element, pseudo).getPropertyValue(name);
sendAsyncMessage("Test:GetComputedStylePropertyValue", value);
});
/**
* Wait the property value from the computed style for an element and
* compare it with the expected value
* @param {Object} data Expects a data object with the following properties
* - {String} selector: The selector used to obtain the element.
* - {String} pseudo: pseudo id to query, or null.
* - {String} name: name of the property
* - {String} expected: the expected value for property
*/
-addMessageListener("Test:WaitForComputedStylePropertyValue", function(msg) {
+addMessageListener("Test:WaitForComputedStylePropertyValue", function (msg) {
let {selector, pseudo, name, expected} = msg.data;
let element = content.document.querySelector(selector);
waitForSuccess(() => {
let value = content.document.defaultView.getComputedStyle(element, pseudo)
.getPropertyValue(name);
return value === expected;
}).then(() => {
sendAsyncMessage("Test:WaitForComputedStylePropertyValue");
- })
+ });
});
-
var dumpn = msg => dump(msg + "\n");
/**
* Polls a given function waiting for it to return true.
*
* @param {Function} validatorFn A validator function that returns a boolean.
* This is called every few milliseconds to check if the result is true. When
* it is true, the promise resolves.
* @param {String} name Optional name of the test. This is used to generate
* the success and failure messages.
* @return a promise that resolves when the function returned true or rejects
* if the timeout is reached
*/
-function waitForSuccess(validatorFn, name="untitled") {
+function waitForSuccess(validatorFn, name = "untitled") {
let def = promise.defer();
- function wait(validatorFn) {
- if (validatorFn()) {
+ function wait(fn) {
+ if (fn()) {
def.resolve();
} else {
- setTimeout(() => wait(validatorFn), 200);
+ setTimeout(() => wait(fn), 200);
}
}
wait(validatorFn);
return def.promise;
}
--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -1,11 +1,12 @@
/* 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/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
/* import-globals-from ../../test/head.js */
"use strict";
// Import the inspector's head.js first (which itself imports shared-head.js).
Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
this);
@@ -72,17 +73,17 @@ registerCleanupFunction(() => {
/**
* The rule-view tests rely on a frame-script to be injected in the content test
* page. So override the shared-head's addTab to load the frame script after the
* tab was added.
* FIXME: Refactor the rule-view tests to use the testActor instead of a frame
* script, so they can run on remote targets too.
*/
var _addTab = addTab;
-addTab = function(url) {
+addTab = function (url) {
return _addTab(url).then(tab => {
info("Loading the helper frame script " + FRAME_SCRIPT_URL);
let browser = tab.linkedBrowser;
browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
return tab;
});
};
@@ -120,17 +121,18 @@ function waitForContentMessage(name) {
* @param {Object} objects
* Optional CPOW objects to send along
* @param {Boolean} expectResponse
* If set to false, don't wait for a response with the same name
* from the content script. Defaults to true.
* @return {Promise} Resolves to the response data if a response is expected,
* immediately resolves otherwise
*/
-function executeInContent(name, data={}, objects={}, expectResponse=true) {
+function executeInContent(name, data = {}, objects = {},
+ expectResponse = true) {
info("Sending message " + name + " to content");
let mm = gBrowser.selectedBrowser.messageManager;
mm.sendAsyncMessage(name, data, objects);
if (expectResponse) {
return waitForContentMessage(name);
}
@@ -179,18 +181,18 @@ function* waitForComputedStyleProperty(s
}
/**
* Given an inplace editable element, click to switch it to edit mode, wait for
* focus
*
* @return a promise that resolves to the inplace-editor element when ready
*/
-var focusEditableField = Task.async(function*(ruleView, editable, xOffset=1,
- yOffset=1, options={}) {
+var focusEditableField = Task.async(function* (ruleView, editable, xOffset = 1,
+ yOffset = 1, options = {}) {
let onFocus = once(editable.parentNode, "focus", true);
info("Clicking on editable field to turn to edit mode");
EventUtils.synthesizeMouse(editable, xOffset, yOffset, options,
editable.ownerDocument.defaultView);
yield onFocus;
info("Editable field gained focus, returning the input field now");
let onEdit = inplaceEditor(editable.ownerDocument.activeElement);
@@ -206,17 +208,17 @@ var focusEditableField = Task.async(func
* This is called every few milliseconds to check if the result is true.
* When it is true, the promise resolves.
* @param {String} name
* Optional name of the test. This is used to generate
* the success and failure messages.
* @return a promise that resolves when the function returned true or rejects
* if the timeout is reached
*/
-function waitForSuccess(validatorFn, name="untitled") {
+function waitForSuccess(validatorFn, name = "untitled") {
let def = promise.defer();
function wait(validator) {
if (validator()) {
ok(true, "Validator function " + name + " returned true");
def.resolve();
} else {
setTimeout(() => wait(validator), 200);
@@ -231,17 +233,17 @@ function waitForSuccess(validatorFn, nam
* Get the dataURL for the font family tooltip.
*
* @param {String} font
* The font family value.
* @param {object} nodeFront
* The NodeActor that will used to retrieve the dataURL for the
* font family tooltip contents.
*/
-var getFontFamilyDataURL = Task.async(function*(font, nodeFront) {
+var getFontFamilyDataURL = Task.async(function* (font, nodeFront) {
let fillStyle = (Services.prefs.getCharPref("devtools.theme") === "light") ?
"black" : "white";
let {data} = yield nodeFront.getFontFamilyDataURL(font, fillStyle);
let dataURL = yield data.string();
return dataURL;
});
@@ -367,17 +369,17 @@ function getRuleViewSelectorHighlighterI
* @param {Object} expectedChange
* Optional object that needs the following props:
* - {DOMNode} element The element in the page that will have its
* style changed.
* - {String} name The style name that will be changed
* - {String} value The expected style value
* The style will be checked like so: getComputedStyle(element)[name] === value
*/
-var simulateColorPickerChange = Task.async(function*(ruleView, colorPicker,
+var simulateColorPickerChange = Task.async(function* (ruleView, colorPicker,
newRgba, expectedChange) {
let onRuleViewChanged = ruleView.once("ruleview-changed");
info("Getting the spectrum colorpicker object");
let spectrum = yield colorPicker.spectrum;
info("Setting the new color");
spectrum.rgb = newRgba;
info("Applying the change");
spectrum.updateUI();
@@ -442,17 +444,17 @@ function getRuleViewRuleEditor(view, chi
/**
* Click on a rule-view's close brace to focus a new property name editor
*
* @param {RuleEditor} ruleEditor
* An instance of RuleEditor that will receive the new property
* @return a promise that resolves to the newly created editor when ready and
* focused
*/
-var focusNewRuleViewProperty = Task.async(function*(ruleEditor) {
+var focusNewRuleViewProperty = Task.async(function* (ruleEditor) {
info("Clicking on a close ruleEditor brace to start editing a new property");
ruleEditor.closeBrace.scrollIntoView();
let editor = yield focusEditableField(ruleEditor.ruleView,
ruleEditor.closeBrace);
is(inplaceEditor(ruleEditor.newPropSpan), editor,
"Focused editor is the new property editor.");
@@ -467,17 +469,17 @@ var focusNewRuleViewProperty = Task.asyn
*
* @param {RuleEditor} ruleEditor
* The instance of RuleEditor that will receive the new property(ies)
* @param {String} inputValue
* The text to be entered in the new property name field
* @return a promise that resolves when the new property name has been entered
* and once the value field is focused
*/
-var createNewRuleViewProperty = Task.async(function*(ruleEditor, inputValue) {
+var createNewRuleViewProperty = Task.async(function* (ruleEditor, inputValue) {
info("Creating a new property editor");
let editor = yield focusNewRuleViewProperty(ruleEditor);
info("Entering the value " + inputValue);
editor.input.value = inputValue;
info("Submitting the new value and waiting for value field focus");
let onFocus = once(ruleEditor.element, "focus", true);
@@ -491,17 +493,17 @@ var createNewRuleViewProperty = Task.asy
*
* @param {CssRuleView} view
* The instance of the rule-view panel
* @param {String} searchValue
* The filter search value
* @return a promise that resolves when the rule-view is filtered for the
* search term
*/
-var setSearchFilter = Task.async(function*(view, searchValue) {
+var setSearchFilter = Task.async(function* (view, searchValue) {
info("Setting filter text to \"" + searchValue + "\"");
let win = view.styleWindow;
let searchField = view.searchField;
searchField.focus();
synthesizeKeys(searchValue, win);
yield view.inspector.once("ruleview-filtered");
});
