--- a/.eslintignore
+++ b/.eslintignore
@@ -87,17 +87,16 @@ 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/markup/test/**
-devtools/client/inspector/rules/**
devtools/client/inspector/shared/test/**
devtools/client/inspector/test/**
devtools/client/inspector/*.js
devtools/client/jsonview/**
devtools/client/memory/**
devtools/client/netmonitor/**
devtools/client/performance/**
devtools/client/projecteditor/**
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -953,17 +953,17 @@ CssRuleView.prototype = {
}
}
},
_populate: function() {
let elementStyle = this._elementStyle;
return this._elementStyle.populate().then(() => {
if (this._elementStyle !== elementStyle || this.isDestroyed) {
- return;
+ return null;
}
this._clearRules();
let onEditorsReady = this._createEditors();
this.refreshPseudoClassPanel();
// Notify anyone that cares that we refreshed.
return onEditorsReady.then(() => {
@@ -1689,18 +1689,18 @@ RuleViewTool.prototype = {
let location = promise.resolve(rule.location);
if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
location = rule.getOriginalLocation();
}
location.then(({ source, href, line, column }) => {
let target = this.inspector.target;
if (Tools.styleEditor.isTargetSupported(target)) {
gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
- let sheet = source || href;
- toolbox.getCurrentPanel().selectStyleSheet(sheet, line, column);
+ let url = source || href;
+ toolbox.getCurrentPanel().selectStyleSheet(url, line, column);
});
}
return;
});
},
onPropertyChanged: function() {
this.inspector.markDirty();
--- a/devtools/client/inspector/rules/test/browser_rules_authored.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored.js
@@ -2,21 +2,21 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for as-authored styles.
function* createTestContent(style) {
- let content = `<style type="text/css">
+ let html = `<style type="text/css">
${style}
</style>
<div id="testid" class="testclass">Styled Node</div>`;
- yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(content));
+ yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
return view;
}
add_task(function* () {
let view = yield createTestContent("#testid {" +
--- a/devtools/client/inspector/rules/test/browser_rules_authored_color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -2,22 +2,22 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for as-authored styles.
function* createTestContent(style) {
- let content = `<style type="text/css">
+ let html = `<style type="text/css">
${style}
</style>
<div id="testid" class="testclass">Styled Node</div>`;
let tab = yield addTab("data:text/html;charset=utf-8," +
- encodeURIComponent(content));
+ encodeURIComponent(html));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
return {view, tab};
}
add_task(function* () {
let colors = [
--- a/devtools/client/inspector/rules/test/browser_rules_authored_override.js
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_override.js
@@ -2,21 +2,21 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for as-authored styles.
function* createTestContent(style) {
- let content = `<style type="text/css">
+ let html = `<style type="text/css">
${style}
</style>
<div id="testid" class="testclass">Styled Node</div>`;
- yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(content));
+ yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
return view;
}
add_task(function* () {
let gradientText1 = "(orange, blue);";
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -15,20 +15,16 @@ const TEST_URI = `
body {
background: red url("chrome://global/skin/icons/warning-64.png")
no-repeat center center;
}
</style>
Testing the color picker tooltip!
`;
-const PAGE_CONTENT = [
-
-].join("\n");
-
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {view} = yield openRuleView();
yield testColorChangeIsntRevertedWhenOtherTooltipIsShown(view);
});
function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
let swatch = getRuleViewProperty(ruleView, "body", "background").valueSpan
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -46,26 +46,27 @@ function testColorParsing(view) {
}
function* testPickingNewColor(view) {
// Grab the first color swatch and color in the gradient
let ruleEl = getRuleViewProperty(view, "body", "background-image");
let swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
let colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
- info("Getting the color picker tooltip and clicking on the swatch to show it");
+ info("Get the color picker tooltip and clicking on the swatch to show it");
let cPicker = view.tooltips.colorPicker;
let onShown = cPicker.tooltip.once("shown");
swatchEl.click();
yield onShown;
let change = {
selector: "body",
name: "background-image",
- value: "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)"
+ value: "linear-gradient(to left, rgb(1, 1, 1) 25%, " +
+ "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)"
};
yield simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);
is(swatchEl.style.backgroundColor, "rgb(1, 1, 1)",
"The color swatch's background was updated");
is(colorEl.textContent, "#010101", "The color text was updated");
is((yield getComputedStyleProperty("body", null, "background-image")),
"linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
--- a/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
@@ -39,17 +39,18 @@ add_task(function*() {
// Releasing the button pressed by mousedown above on top of a different frame
// does not make sense in this test as EventUtils doesn't preserve the context
// i.e. the buttons that were pressed down between events.
info("Moving mouse over color picker without any buttons pressed.");
EventUtils.synthesizeMouse(spectrum.dragger, 10, 10, {
- button: -1, // -1 = no buttons are pressed down
+ // -1 = no buttons are pressed down
+ button: -1,
type: "mousemove",
}, spectrum.dragger.ownerDocument.defaultView);
});
function* openColorPickerForSwatch(swatch, view) {
let cPicker = view.tooltips.colorPicker;
ok(cPicker, "The rule-view has the expected colorPicker property");
--- a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
@@ -26,43 +26,49 @@ add_task(function*() {
function* testComputedList(inspector, view) {
let rule = getRuleViewRuleEditor(view, 1).rule;
let propEditor = rule.textProps[0].editor;
let expander = propEditor.expander;
ok(!expander.hasAttribute("open"), "margin computed list is closed");
- info("Opening the computed list of margin property")
+ info("Opening the computed list of margin property");
expander.click();
ok(expander.hasAttribute("open"), "margin computed list is open");
let computed = propEditor.prop.computed;
let computedDom = propEditor.computed;
let propNames = [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
];
is(computed.length, propNames.length, "There should be 4 computed values");
- is(computedDom.children.length, propNames.length, "There should be 4 nodes in the DOM");
+ is(computedDom.children.length, propNames.length,
+ "There should be 4 nodes in the DOM");
+
propNames.forEach((propName, i) => {
let propValue = i + "px";
- is(computed[i].name, propName, "Computed property #" + i + " has name " + propName);
- is(computed[i].value, propValue, "Computed property #" + i + " has value " + propValue);
- is(computedDom.getElementsByClassName("ruleview-propertyname")[i].textContent, propName,
- "Computed property #" + i + " in DOM has correct name");
- is(computedDom.getElementsByClassName("ruleview-propertyvalue")[i].textContent, propValue,
- "Computed property #" + i + " in DOM has correct value");
+ is(computed[i].name, propName,
+ "Computed property #" + i + " has name " + propName);
+ is(computed[i].value, propValue,
+ "Computed property #" + i + " has value " + propValue);
+ is(computedDom.querySelectorAll(".ruleview-propertyname")[i].textContent,
+ propName,
+ "Computed property #" + i + " in DOM has correct name");
+ is(computedDom.querySelectorAll(".ruleview-propertyvalue")[i].textContent,
+ propValue,
+ "Computed property #" + i + " in DOM has correct value");
});
- info("Closing the computed list of margin property")
+ info("Closing the computed list of margin property");
expander.click();
ok(!expander.hasAttribute("open"), "margin computed list is closed");
- info("Opening the computed list of margin property")
+ info("Opening the computed list of margin property");
expander.click();
ok(expander.hasAttribute("open"), "margin computed list is open");
is(computed.length, propNames.length, "Still 4 computed values");
is(computedDom.children.length, propNames.length, "Still 4 nodes in the DOM");
}
--- a/devtools/client/inspector/rules/test/browser_rules_content_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_content_02.js
@@ -2,23 +2,25 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test the rule-view content when the inspector gets opened via the page
// ctx-menu "inspect element"
-const CONTENT = '<body style="color:red;">\
- <div style="color:blue;">\
- <p style="color:green;">\
- <span style="color:yellow;">test element</span>\
- </p>\
- </div>\
- </body>';
+const CONTENT = `
+ <body style="color:red;">
+ <div style="color:blue;">
+ <p style="color:green;">
+ <span style="color:yellow;">test element</span>
+ </p>
+ </div>
+ </body>
+`;
const STRINGS = Services.strings
.createBundle("chrome://devtools-shared/locale/styleinspector.properties");
add_task(function*() {
let tab = yield addTab("data:text/html;charset=utf-8," + CONTENT);
let testActor = yield getTestActorWithoutToolbox(tab);
@@ -48,15 +50,17 @@ function checkRuleViewContent({styleDocu
for (let rule of rules) {
let selector = rule.querySelector(".ruleview-selectorcontainer");
is(selector.textContent,
STRINGS.GetStringFromName("rule.sourceElement"),
"The rule's selector is correct");
let propertyNames = [...rule.querySelectorAll(".ruleview-propertyname")];
- is(propertyNames.length, 1, "There's only one property name, as expected");
+ is(propertyNames.length, 1,
+ "There's only one property name, as expected");
let propertyValues = [...rule.querySelectorAll(".ruleview-propertyvalue")];
- is(propertyValues.length, 1, "There's only one property value, as expected");
+ is(propertyValues.length, 1,
+ "There's only one property value, as expected");
}
}
--- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-01.js
@@ -11,18 +11,16 @@
* docs tooltip should be shown, containing docs from MDN for that property.
*
* This file tests that the context menu item is shown when it should be
* shown and hidden when it should be hidden.
*/
"use strict";
-const {setBaseCssDocsUrl} = require("devtools/client/shared/widgets/MdnDocsWidget");
-
/**
* The test document tries to confuse the context menu
* code by having a tag called "padding" and a property
* value called "margin".
*/
const TEST_URI = `
<html>
<head>
--- a/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_context-menu-show-mdn-docs-02.js
@@ -12,17 +12,18 @@
*
* This file tests that:
* - clicking the context menu item shows the tooltip
* - pressing "Escape" while the tooltip is showing hides the tooltip
*/
"use strict";
-const {setBaseCssDocsUrl} = require("devtools/client/shared/widgets/MdnDocsWidget");
+const {setBaseCssDocsUrl} =
+ require("devtools/client/shared/widgets/MdnDocsWidget");
const PROPERTYNAME = "color";
const TEST_DOC = `
<html>
<body>
<div style="color: red">
Test "Show MDN Docs" context menu option
@@ -65,23 +66,20 @@ function* testShowMdnTooltip(view) {
* - the tooltip is hidden when we press Escape
*/
function* testShowAndHideMdnTooltip(view) {
yield testShowMdnTooltip(view);
info("Quick check that the tooltip contents are set");
let cssDocs = view.tooltips.cssDocs;
+ // FIXME: Remove the comment below when bug 1246896 is fixed.
+ /* eslint-disable mozilla/no-cpows-in-tests */
let tooltipDocument = cssDocs.tooltip.content.contentDocument;
let h1 = tooltipDocument.getElementById("property-name");
is(h1.textContent, PROPERTYNAME, "The MDN docs tooltip h1 is correct");
info("Simulate pressing the 'Escape' key");
let onHidden = cssDocs.tooltip.once("hidden");
EventUtils.sendKey("escape");
yield onHidden;
ok(true, "The MDN docs tooltip was hidden on pressing 'escape'");
}
-
-/**
- * Returns the root element for the rule view.
- */
-var rootElement = view => (view.element) ? view.element : view.styleDocument;
--- a/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
+++ b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
@@ -254,17 +254,17 @@ function* checkCopyStyle(view, node, men
is(view._contextmenu.menuitemCopyRule.hidden,
hidden.copyRule,
"Copy Rule hidden attribute is as expected: " +
hidden.copyRule);
try {
yield waitForClipboard(() => menuItem.click(),
() => checkClipboardData(expectedPattern));
- } catch(e) {
+ } catch (e) {
failedClipboard(expectedPattern);
}
view._contextmenu._menupopup.hidePopup();
}
function* disableProperty(view, index) {
let ruleEditor = getRuleViewRuleEditor(view, 1);
--- a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
@@ -51,14 +51,16 @@ function* testPressingEnterCommitsChange
info("Sending RETURN key within the tooltip document");
// Pressing RETURN ends up doing 2 rule-view updates, one for the preview and
// one for the commit when the tooltip closes.
let onRuleViewChanged = waitForNEvents(ruleView, "ruleview-changed", 2);
EventUtils.sendKey("RETURN", widget.parent.ownerDocument.defaultView);
yield onRuleViewChanged;
- is((yield getComputedStyleProperty("body", null, "transition-timing-function")),
- expected, "The element's timing-function was kept after RETURN");
- ok(getRuleViewProperty(ruleView, "body", "transition").valueSpan.textContent
- .indexOf("cubic-bezier(") !== -1,
- "The text of the timing-function was kept after RETURN");
+ let style = yield getComputedStyleProperty("body", null,
+ "transition-timing-function");
+ is(style, expected, "The element's timing-function was kept after RETURN");
+
+ let ruleViewStyle = getRuleViewProperty(ruleView, "body", "transition")
+ .valueSpan.textContent.indexOf("cubic-bezier(") !== -1;
+ ok(ruleViewStyle, "The text of the timing-function was kept after RETURN");
}
--- a/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
@@ -42,17 +42,18 @@ function* testMarginIncrements(view) {
yield runIncrementTest(marginPropEditor, view, {
1: {alt: true, start: "0px", end: "0.1px", selectAll: true},
2: {start: "0px", end: "1px", selectAll: true},
3: {shift: true, start: "0px", end: "10px", selectAll: true},
4: {down: true, alt: true, start: "0.1px", end: "0px", selectAll: true},
5: {down: true, start: "0px", end: "-1px", selectAll: true},
6: {down: true, shift: true, start: "0px", end: "-10px", selectAll: true},
7: {pageUp: true, shift: true, start: "0px", end: "100px", selectAll: true},
- 8: {pageDown: true, shift: true, start: "0px", end: "-100px", selectAll: true}
+ 8: {pageDown: true, shift: true, start: "0px", end: "-100px",
+ selectAll: true}
});
}
function* testVariousUnitIncrements(view) {
info("Testing keyboard increments on values with various units");
let idRuleEditor = getRuleViewRuleEditor(view, 1);
let paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
@@ -77,52 +78,63 @@ function* testHexIncrements(view) {
let hexColorPropEditor = idRuleEditor.rule.textProps[2].editor;
yield runIncrementTest(hexColorPropEditor, view, {
1: {start: "#CCCCCC", end: "#CDCDCD", selectAll: true},
2: {shift: true, start: "#CCCCCC", end: "#DCDCDC", selectAll: true},
3: {start: "#CCCCCC", end: "#CDCCCC", selection: [1, 3]},
4: {shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1, 3]},
5: {start: "#FFFFFF", end: "#FFFFFF", selectAll: true},
- 6: {down: true, shift: true, start: "#000000", end: "#000000", selectAll: true}
+ 6: {down: true, shift: true, start: "#000000", end: "#000000",
+ selectAll: true}
});
}
function* testRgbIncrements(view) {
info("Testing keyboard increments with rgb colors");
let idRuleEditor = getRuleViewRuleEditor(view, 1);
let rgbColorPropEditor = idRuleEditor.rule.textProps[3].editor;
yield runIncrementTest(rgbColorPropEditor, view, {
1: {start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6, 7]},
- 2: {shift: true, start: "rgb(0,0,0)", end: "rgb(0,10,0)", selection: [6, 7]},
+ 2: {shift: true, start: "rgb(0,0,0)", end: "rgb(0,10,0)",
+ selection: [6, 7]},
3: {start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6, 9]},
- 4: {shift: true, start: "rgb(0,250,0)", end: "rgb(0,255,0)", selection: [6, 9]},
+ 4: {shift: true, start: "rgb(0,250,0)", end: "rgb(0,255,0)",
+ selection: [6, 9]},
5: {down: true, start: "rgb(0,0,0)", end: "rgb(0,0,0)", selection: [6, 7]},
- 6: {down: true, shift: true, start: "rgb(0,5,0)", end: "rgb(0,0,0)", selection: [6, 7]}
+ 6: {down: true, shift: true, start: "rgb(0,5,0)", end: "rgb(0,0,0)",
+ selection: [6, 7]}
});
}
function* testShorthandIncrements(view) {
info("Testing keyboard increments within shorthand values");
let idRuleEditor = getRuleViewRuleEditor(view, 1);
let paddingPropEditor = idRuleEditor.rule.textProps[1].editor;
yield runIncrementTest(paddingPropEditor, view, {
1: {start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4, 7]},
- 2: {shift: true, start: "0px 0px 0px 0px", end: "0px 10px 0px 0px", selection: [4, 7]},
+ 2: {shift: true, start: "0px 0px 0px 0px", end: "0px 10px 0px 0px",
+ selection: [4, 7]},
3: {start: "0px 0px 0px 0px", end: "1px 0px 0px 0px", selectAll: true},
- 4: {shift: true, start: "0px 0px 0px 0px", end: "10px 0px 0px 0px", selectAll: true},
- 5: {down: true, start: "0px 0px 0px 0px", end: "0px 0px -1px 0px", selection: [8, 11]},
- 6: {down: true, shift: true, start: "0px 0px 0px 0px", end: "-10px 0px 0px 0px", selectAll: true},
- 7: {up: true, start: "0.1em .1em 0em 0em", end: "0.1em 1.1em 0em 0em", selection: [6, 9]},
- 8: {up: true, alt: true, start: "0.1em .9em 0em 0em", end: "0.1em 1em 0em 0em", selection: [6, 9]},
- 9: {up: true, shift: true, start: "0.2em .2em 0em 0em", end: "0.2em 10.2em 0em 0em", selection: [6, 9]}
+ 4: {shift: true, start: "0px 0px 0px 0px", end: "10px 0px 0px 0px",
+ selectAll: true},
+ 5: {down: true, start: "0px 0px 0px 0px", end: "0px 0px -1px 0px",
+ selection: [8, 11]},
+ 6: {down: true, shift: true, start: "0px 0px 0px 0px",
+ end: "-10px 0px 0px 0px", selectAll: true},
+ 7: {up: true, start: "0.1em .1em 0em 0em", end: "0.1em 1.1em 0em 0em",
+ selection: [6, 9]},
+ 8: {up: true, alt: true, start: "0.1em .9em 0em 0em",
+ end: "0.1em 1em 0em 0em", selection: [6, 9]},
+ 9: {up: true, shift: true, start: "0.2em .2em 0em 0em",
+ end: "0.2em 10.2em 0em 0em", selection: [6, 9]}
});
}
function* testOddCases(view) {
info("Testing some more odd cases");
let idRuleEditor = getRuleViewRuleEditor(view, 1);
let marginPropEditor = idRuleEditor.rule.textProps[0].editor;
@@ -130,23 +142,29 @@ function* testOddCases(view) {
yield runIncrementTest(marginPropEditor, view, {
1: {start: "98.7%", end: "99.7%", selection: [3, 3]},
2: {alt: true, start: "98.7%", end: "98.8%", selection: [3, 3]},
3: {start: "0", end: "1"},
4: {down: true, start: "0", end: "-1"},
5: {start: "'a=-1'", end: "'a=0'", selection: [4, 4]},
6: {start: "0 -1px", end: "0 0px", selection: [2, 2]},
7: {start: "url(-1)", end: "url(-1)", selection: [4, 4]},
- 8: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11, 11]},
+ 8: {start: "url('test1.1.png')", end: "url('test1.2.png')",
+ selection: [11, 11]},
9: {start: "url('test1.png')", end: "url('test2.png')", selection: [9, 9]},
- 10: {shift: true, start: "url('test1.1.png')", end: "url('test11.1.png')", selection: [9, 9]},
- 11: {down: true, start: "url('test-1.png')", end: "url('test-2.png')", selection: [9, 11]},
- 12: {start: "url('test1.1.png')", end: "url('test1.2.png')", selection: [11, 12]},
- 13: {down: true, alt: true, start: "url('test-0.png')", end: "url('test--0.1.png')", selection: [10, 11]},
- 14: {alt: true, start: "url('test--0.1.png')", end: "url('test-0.png')", selection: [10, 14]}
+ 10: {shift: true, start: "url('test1.1.png')", end: "url('test11.1.png')",
+ selection: [9, 9]},
+ 11: {down: true, start: "url('test-1.png')", end: "url('test-2.png')",
+ selection: [9, 11]},
+ 12: {start: "url('test1.1.png')", end: "url('test1.2.png')",
+ selection: [11, 12]},
+ 13: {down: true, alt: true, start: "url('test-0.png')",
+ end: "url('test--0.1.png')", selection: [10, 11]},
+ 14: {alt: true, start: "url('test--0.1.png')", end: "url('test-0.png')",
+ selection: [10, 14]}
});
}
function* runIncrementTest(propertyEditor, view, tests) {
let editor = yield focusEditableField(view, propertyEditor.valueSpan);
for (let test in tests) {
yield testIncrement(editor, tests[test], view, propertyEditor);
@@ -168,19 +186,27 @@ function* testIncrement(editor, options,
} else if (options.selection) {
input.setSelectionRange(options.selection[0], options.selection[1]);
}
is(input.value, options.start, "Value initialized at " + options.start);
let onRuleViewChanged = view.once("ruleview-changed");
let onKeyUp = once(input, "keyup");
+
let key;
key = options.down ? "VK_DOWN" : "VK_UP";
- key = options.pageDown ? "VK_PAGE_DOWN" : options.pageUp ? "VK_PAGE_UP" : key;
+ if (options.pageDown) {
+ key = "VK_PAGE_DOWN";
+ } else if (options.pageUp) {
+ key = "VK_PAGE_UP";
+ } else {
+ key = key;
+ }
+
EventUtils.synthesizeKey(key, {altKey: options.alt, shiftKey: options.shift},
view.styleWindow);
yield onKeyUp;
// Only expect a change if the value actually changed!
if (options.start !== options.end) {
yield onRuleViewChanged;
}
--- a/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js
@@ -24,17 +24,17 @@ const TEST_URI = `
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
yield testEditableFieldFocus(inspector, view, "VK_TAB", { shiftKey: true });
});
-function* testEditableFieldFocus(inspector, view, commitKey, options={}) {
+function* testEditableFieldFocus(inspector, view, commitKey, options = {}) {
let ruleEditor = getRuleViewRuleEditor(view, 2);
let editor = yield focusEditableField(view, ruleEditor.selectorText);
is(inplaceEditor(ruleEditor.selectorText), editor,
"Focus should be in the 'div' rule selector");
ruleEditor = getRuleViewRuleEditor(view, 1);
yield focusNextField(view, ruleEditor, commitKey, options);
--- a/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
+++ b/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
@@ -5,18 +5,16 @@
"use strict";
// So we can test collecting telemetry on the eyedropper
var oldCanRecord = Services.telemetry.canRecordExtended;
Services.telemetry.canRecordExtended = true;
registerCleanupFunction(function() {
Services.telemetry.canRecordExtended = oldCanRecord;
});
-const HISTOGRAM_ID = "DEVTOOLS_PICKER_EYEDROPPER_OPENED_BOOLEAN";
-const FLAG_HISTOGRAM_ID = "DEVTOOLS_PICKER_EYEDROPPER_OPENED_PER_USER_FLAG";
const EXPECTED_TELEMETRY = {
"DEVTOOLS_PICKER_EYEDROPPER_OPENED_BOOLEAN": 2,
"DEVTOOLS_PICKER_EYEDROPPER_OPENED_PER_USER_FLAG": 1
};
const TEST_URI = `
<style type="text/css">
body {
@@ -35,18 +33,20 @@ const TEST_URI = `
width: 20px;
height: 20px;
background-color: #f09;
}
</style>
<body><div id="div1"></div><div id="div2"></div></body>
`;
-const ORIGINAL_COLOR = "rgb(255, 0, 153)"; // #f09
-const EXPECTED_COLOR = "rgb(255, 255, 85)"; // #ff5
+// #f09
+const ORIGINAL_COLOR = "rgb(255, 0, 153)";
+// #ff5
+const EXPECTED_COLOR = "rgb(255, 255, 85)";
// Test opening the eyedropper from the color picker. Pressing escape
// to close it, and clicking the page to select a color.
add_task(function*() {
// clear telemetry so we can get accurate counts
clearTelemetry();
@@ -142,17 +142,17 @@ function openEyedropper(view, swatch) {
});
dropperButton.click();
});
swatch.click();
return deferred.promise;
}
-function inspectPage(dropper, click=true) {
+function inspectPage(dropper, click = true) {
let target = document.documentElement;
let win = window;
// get location of the content, offset from browser window
let box = gBrowser.selectedBrowser.getBoundingClientRect();
let x = box.left + 1;
let y = box.top + 1;
--- a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js
@@ -2,18 +2,16 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Check that inherited properties appear for a nested element in the
// rule view.
-var {ELEMENT_STYLE} = require("devtools/server/actors/styles");
-
const TEST_URI = `
<style type="text/css">
#test2 {
background-color: green;
color: purple;
}
</style>
<div id="test2"><div id="test1">Styled Node</div></div>
--- a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js
@@ -2,18 +2,16 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Check that no inherited properties appear when the property does not apply
// to the nested element.
-var {ELEMENT_STYLE} = require("devtools/server/actors/styles");
-
const TEST_URI = `
<style type="text/css">
#test2 {
background-color: green;
}
</style>
<div id="test2"><div id="test1">Styled Node</div></div>
`;
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -21,18 +21,18 @@ add_task(function*() {
yield testBottomLeft(inspector, view);
yield testParagraph(inspector, view);
yield testBody(inspector, view);
Services.prefs.clearUserPref(PSEUDO_PREF);
});
function* testTopLeft(inspector, view) {
- let selector = "#topleft";
- let {rules} = yield assertPseudoElementRulesNumbers(selector,
+ let el = "#topleft";
+ let {rules} = yield assertPseudoElementRulesNumbers(el,
inspector, view, {
elementRulesNb: 4,
firstLineRulesNb: 2,
firstLetterRulesNb: 1,
selectionRulesNb: 0
}
);
@@ -57,19 +57,20 @@ function* testTopLeft(inspector, view) {
view.styleWindow);
ok(!view.element.firstChild.classList.contains("show-expandable-container"),
"Pseudo Elements are collapsed by dblclicking");
let elementRule = rules.elementRules[0];
let elementRuleView = getRuleViewRuleEditor(view, 3);
let elementFirstLineRule = rules.firstLineRules[0];
- let elementFirstLineRuleView = [...view.element.children[1].children].filter(e => {
- return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule;
- })[0]._ruleEditor;
+ let elementFirstLineRuleView =
+ [...view.element.children[1].children].filter(e => {
+ return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule;
+ })[0]._ruleEditor;
is(convertTextPropsToString(elementFirstLineRule.textProps),
"color: orange",
"TopLeft firstLine properties are correct");
let firstProp = elementFirstLineRuleView.addProperty("background-color",
"rgb(0, 255, 0)", "");
let secondProp = elementFirstLineRuleView.addProperty("font-style",
@@ -79,45 +80,46 @@ function* testTopLeft(inspector, view) {
elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 2],
"First added property is on back of array");
is(secondProp,
elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 1],
"Second added property is on back of array");
yield elementFirstLineRule._applyingModifications;
- is((yield getComputedStyleProperty(selector, ":first-line", "background-color")),
+ is((yield getComputedStyleProperty(el, ":first-line", "background-color")),
"rgb(0, 255, 0)", "Added property should have been used.");
- is((yield getComputedStyleProperty(selector, ":first-line", "font-style")),
+ is((yield getComputedStyleProperty(el, ":first-line", "font-style")),
"italic", "Added property should have been used.");
- is((yield getComputedStyleProperty(selector, null, "text-decoration")),
+ is((yield getComputedStyleProperty(el, null, "text-decoration")),
"none", "Added property should not apply to element");
firstProp.setEnabled(false);
yield elementFirstLineRule._applyingModifications;
- is((yield getComputedStyleProperty(selector, ":first-line", "background-color")),
+ is((yield getComputedStyleProperty(el, ":first-line", "background-color")),
"rgb(255, 0, 0)", "Disabled property should now have been used.");
- is((yield getComputedStyleProperty(selector, null, "background-color")),
+ is((yield getComputedStyleProperty(el, null, "background-color")),
"rgb(221, 221, 221)", "Added property should not apply to element");
firstProp.setEnabled(true);
yield elementFirstLineRule._applyingModifications;
- is((yield getComputedStyleProperty(selector, ":first-line", "background-color")),
+ is((yield getComputedStyleProperty(el, ":first-line", "background-color")),
"rgb(0, 255, 0)", "Added property should have been used.");
- is((yield getComputedStyleProperty(selector, null, "text-decoration")),
+ is((yield getComputedStyleProperty(el, null, "text-decoration")),
"none", "Added property should not apply to element");
- firstProp = elementRuleView.addProperty("background-color", "rgb(0, 0, 255)", "");
+ firstProp = elementRuleView.addProperty("background-color",
+ "rgb(0, 0, 255)", "");
yield elementRule._applyingModifications;
- is((yield getComputedStyleProperty(selector, null, "background-color")),
+ is((yield getComputedStyleProperty(el, null, "background-color")),
"rgb(0, 0, 255)", "Added property should have been used.");
- is((yield getComputedStyleProperty(selector, ":first-line", "background-color")),
+ is((yield getComputedStyleProperty(el, ":first-line", "background-color")),
"rgb(0, 255, 0)", "Added prop does not apply to pseudo");
}
function* testTopRight(inspector, view) {
yield assertPseudoElementRulesNumbers("#topright", inspector, view, {
elementRulesNb: 4,
firstLineRulesNb: 1,
firstLetterRulesNb: 1,
@@ -150,22 +152,23 @@ function* testBottomLeft(inspector, view
elementRulesNb: 4,
firstLineRulesNb: 1,
firstLetterRulesNb: 1,
selectionRulesNb: 0
});
}
function* testParagraph(inspector, view) {
- let {rules} = yield assertPseudoElementRulesNumbers("#bottomleft p", inspector, view, {
- elementRulesNb: 3,
- firstLineRulesNb: 1,
- firstLetterRulesNb: 1,
- selectionRulesNb: 1
- });
+ let {rules} =
+ yield assertPseudoElementRulesNumbers("#bottomleft p", inspector, view, {
+ elementRulesNb: 3,
+ firstLineRulesNb: 1,
+ firstLetterRulesNb: 1,
+ selectionRulesNb: 1
+ });
assertGutters(view);
let elementFirstLineRule = rules.firstLineRules[0];
is(convertTextPropsToString(elementFirstLineRule.textProps),
"background: blue",
"Paragraph first-line properties are correct");
--- a/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js
@@ -1,24 +1,25 @@
/* 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/ */
"use strict";
// Test that the rule view does not go blank while selecting a new node.
-const TESTCASE_URI = 'data:text/html;charset=utf-8,' +
- '<div id="testdiv" style="font-size:10px;">Test div!</div>';
+const TESTCASE_URI = "data:text/html;charset=utf-8," +
+ "<div id=\"testdiv\" style=\"font-size:10px;\">" +
+ "Test div!</div>";
add_task(function*() {
yield addTab(TESTCASE_URI);
info("Opening the rule view and selecting the test node");
- let {toolbox, inspector, view} = yield openRuleView();
+ let {inspector, view} = yield openRuleView();
let testdiv = yield getNodeFront("#testdiv", inspector);
yield selectNode(testdiv, inspector);
let htmlBefore = view.element.innerHTML;
ok(htmlBefore.indexOf("font-size") > -1,
"The rule view should contain a font-size property.");
// Do the selectNode call manually, because otherwise it's hard to guarantee
--- a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js
@@ -135,19 +135,19 @@ function* testPropertyChange6(inspector,
}
function* changeElementStyle(selector, style, inspector, testActor) {
let onRefreshed = inspector.once("rule-view-refreshed");
yield testActor.setAttribute(selector, "style", style);
yield onRefreshed;
}
-function validateTextProp(aProp, aEnabled, aName, aValue, aDesc) {
- is(aProp.enabled, aEnabled, aDesc + ": enabled.");
- is(aProp.name, aName, aDesc + ": name.");
- is(aProp.value, aValue, aDesc + ": value.");
+function validateTextProp(prop, enabled, name, value, desc) {
+ is(prop.enabled, enabled, desc + ": enabled.");
+ is(prop.name, name, desc + ": name.");
+ is(prop.value, value, desc + ": value.");
- is(aProp.editor.enable.hasAttribute("checked"), aEnabled,
- aDesc + ": enabled checkbox.");
- is(aProp.editor.nameSpan.textContent, aName, aDesc + ": name span.");
- is(aProp.editor.valueSpan.textContent,
- aValue, aDesc + ": value span.");
+ is(prop.editor.enable.hasAttribute("checked"), enabled,
+ desc + ": enabled checkbox.");
+ is(prop.editor.nameSpan.textContent, name, desc + ": name span.");
+ is(prop.editor.valueSpan.textContent,
+ value, desc + ": value span.");
}
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js
@@ -16,61 +16,66 @@ const TEST_URI = `
background-color: red;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
const TEST_DATA = [
{
- desc: "Tests that the search filter works properly in the computed list for property names",
+ desc: "Tests that the search filter works properly in the computed list " +
+ "for property names",
search: "margin",
isExpanderOpen: false,
isFilterOpen: false,
isMarginHighlighted: true,
isMarginTopHighlighted: true,
isMarginRightHighlighted: true,
isMarginBottomHighlighted: true,
isMarginLeftHighlighted: true
},
{
- desc: "Tests that the search filter works properly in the computed list for property values",
+ desc: "Tests that the search filter works properly in the computed list " +
+ "for property values",
search: "0px",
isExpanderOpen: false,
isFilterOpen: false,
isMarginHighlighted: true,
isMarginTopHighlighted: false,
isMarginRightHighlighted: true,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: true
},
{
- desc: "Tests that the search filter works properly in the computed list for property line input",
+ desc: "Tests that the search filter works properly in the computed list " +
+ "for property line input",
search: "margin-top:4px",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
- desc: "Tests that the search filter works properly in the computed list for parsed name",
+ desc: "Tests that the search filter works properly in the computed list " +
+ "for parsed name",
search: "margin-top:",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
- desc: "Tests that the search filter works properly in the computed list for parsed property value",
+ desc: "Tests that the search filter works properly in the computed list " +
+ "for parsed property value",
search: ":4px",
isExpanderOpen: false,
isFilterOpen: false,
isMarginHighlighted: true,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: true,
isMarginLeftHighlighted: false
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
@@ -27,21 +27,23 @@ const TEST_DATA = [
desc: "Tests that the search filter works properly for property values",
search: "00F"
},
{
desc: "Tests that the search filter works properly for property line input",
search: "background-color:#00F"
},
{
- desc: "Tests that the search filter works properly for parsed property names",
+ desc: "Tests that the search filter works properly for parsed property " +
+ "names",
search: "background:"
},
{
- desc: "Tests that the search filter works properly for parsed property values",
+ desc: "Tests that the search filter works properly for parsed property " +
+ "values",
search: ":00F"
},
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
let {inspector, view} = yield openRuleView();
yield selectNode("#testid", inspector);
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js
@@ -26,17 +26,17 @@ add_task(function*() {
info("Enter the test value in the search filter");
yield setSearchFilter(view, SEARCH);
info("Focus the height property value");
let ruleEditor = getRuleViewRuleEditor(view, 1);
let rule = ruleEditor.rule;
let propEditor = rule.textProps[1].editor;
- let editor = yield focusEditableField(view, propEditor.valueSpan);
+ yield focusEditableField(view, propEditor.valueSpan);
info("Check that the correct rules are visible");
is(view.element.children.length, 2, "Should have 2 rules.");
is(rule.selectorText, "#testid", "Second rule is #testid.");
ok(rule.textProps[0].editor.container.classList
.contains("ruleview-highlight"),
"width text property is correctly highlighted.");
ok(!propEditor.container.classList.contains("ruleview-highlight"),
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js
@@ -15,23 +15,25 @@ const TEST_URI = `
width: 100%;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
`;
const TEST_DATA = [
{
- desc: "Tests that the search filter works properly for a single rule selector",
+ desc: "Tests that the search filter works properly for a single rule " +
+ "selector",
search: "#test",
selectorText: "#testid",
index: 0
},
{
- desc: "Tests that the search filter works properly for multiple rule selectors",
+ desc: "Tests that the search filter works properly for multiple rule " +
+ "selectors",
search: "body",
selectorText: "html, body, div",
index: 2
}
];
add_task(function*() {
yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
--- a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
+++ b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
@@ -75,17 +75,17 @@ function* checkCopySelection(view) {
yield onPopup;
ok(!view._contextmenu.menuitemCopy.hidden,
"Copy menu item is not hidden as expected");
try {
yield waitForClipboard(() => view._contextmenu.menuitemCopy.click(),
() => checkClipboardData(expectedPattern));
- } catch(e) {
+ } catch (e) {
failedClipboard(expectedPattern);
}
view._contextmenu._menupopup.hidePopup();
}
function* checkSelectAll(view) {
info("Testing select-all copy");
@@ -113,17 +113,17 @@ function* checkSelectAll(view) {
yield onPopup;
ok(!view._contextmenu.menuitemCopy.hidden,
"Copy menu item is not hidden as expected");
try {
yield waitForClipboard(() => view._contextmenu.menuitemCopy.click(),
() => checkClipboardData(expectedPattern));
- } catch(e) {
+ } catch (e) {
failedClipboard(expectedPattern);
}
view._contextmenu._menupopup.hidePopup();
}
function checkClipboardData(expectedPattern) {
let actual = SpecialPowers.getClipboardData("text/unicode");
--- a/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js
+++ b/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js
@@ -2,18 +2,16 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Tests that the rule view selector text is highlighted correctly according
// to the components of the selector.
-const SEARCH = "00F";
-
const TEST_URI = [
"<style type='text/css'>",
" h1 {}",
" h1#testid {}",
" h1 + p {}",
" div[hidden=\"true\"] {}",
" div[title=\"test\"][checked=true] {}",
" p:empty {}",
--- a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js
@@ -16,85 +16,92 @@ const TEST_URI = `
background-color: red;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
const TEST_DATA = [
{
- desc: "Tests that the strict search filter works properly in the computed list for property names",
+ desc: "Tests that the strict search filter works properly in the " +
+ "computed list for property names",
search: "`margin-left`",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: false,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: true
},
{
- desc: "Tests that the strict search filter works properly in the computed list for property values",
+ desc: "Tests that the strict search filter works properly in the " +
+ "computed list for property values",
search: "`0px`",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: false,
isMarginRightHighlighted: true,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
- desc: "Tests that the strict search filter works properly in the computed list for parsed property names",
+ desc: "Tests that the strict search filter works properly in the " +
+ "computed list for parsed property names",
search: "`margin-left`:",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: false,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: true
},
{
- desc: "Tests that the strict search filter works properly in the computed list for parsed property values",
+ desc: "Tests that the strict search filter works properly in the " +
+ "computed list for parsed property values",
search: ":`4px`",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
- desc: "Tests that the strict search filter works properly in the computed list for property line input",
+ desc: "Tests that the strict search filter works properly in the " +
+ "computed list for property line input",
search: "`margin-top`:`4px`",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
desc: "Tests that the strict search filter works properly in the " +
- "computed list for a parsed strict property name and non-strict property value",
+ "computed list for a parsed strict property name and non-strict " +
+ "property value",
search: "`margin-top`:4px",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
},
{
desc: "Tests that the strict search filter works properly in the " +
- "computed list for a parsed strict property value and non-strict property name",
+ "computed list for a parsed strict property value and non-strict " +
+ "property name",
search: "i:`4px`",
isExpanderOpen: true,
isFilterOpen: true,
isMarginHighlighted: false,
isMarginTopHighlighted: true,
isMarginRightHighlighted: false,
isMarginBottomHighlighted: false,
isMarginLeftHighlighted: false
--- a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js
@@ -18,41 +18,46 @@ const TEST_URI = `
background-color: #00F;
}
</style>
<h1 id="testid" class="testclass">Styled Node</h1>
`;
const TEST_DATA = [
{
- desc: "Tests that the strict search filter works properly for property names",
+ desc: "Tests that the strict search filter works properly for property " +
+ "names",
search: "`color`",
ruleCount: 2,
propertyIndex: 1
},
{
- desc: "Tests that the strict search filter works properly for property values",
+ desc: "Tests that the strict search filter works properly for property " +
+ "values",
search: "`2%`",
ruleCount: 2,
propertyIndex: 0
},
{
- desc: "Tests that the strict search filter works properly for parsed property names",
+ desc: "Tests that the strict search filter works properly for parsed " +
+ "property names",
search: "`color`:",
ruleCount: 2,
propertyIndex: 1
},
{
- desc: "Tests that the strict search filter works properly for parsed property values",
+ desc: "Tests that the strict search filter works properly for parsed " +
+ "property values",
search: ":`2%`",
ruleCount: 2,
propertyIndex: 0
},
{
- desc: "Tests that the strict search filter works properly for property line input",
+ desc: "Tests that the strict search filter works properly for property " +
+ "line input",
search: "`width`:`2%`",
ruleCount: 2,
propertyIndex: 0
},
{
desc: "Tests that the search filter works properly for a parsed strict " +
"property name and non-strict property value.",
search: "`width`:2%",
--- a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
+++ b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
@@ -1,63 +1,61 @@
/* 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/ */
"use strict";
-///////////////////
-//
-// Whitelisting this test.
+// FIXME: Whitelisting this test.
// As part of bug 1077403, the leaking uncaught rejection should be fixed.
-//
thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Unknown sheet source");
// Test the links from the rule-view to the styleeditor
-const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(
+const STYLESHEET_URL = "data:text/css," + encodeURIComponent(
["#first {",
"color: blue",
"}"].join("\n"));
const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";
const EXTERNAL_STYLESHEET_URL = URL_ROOT + EXTERNAL_STYLESHEET_FILE_NAME;
-const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
- ['<html>' +
- '<head>' +
- '<title>Rule view style editor link test</title>',
- '<style type="text/css"> ',
- 'html { color: #000000; } ',
- 'div { font-variant: small-caps; color: #000000; } ',
- '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ',
- 'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">',
- '</style>',
- '<style>',
- 'div { font-weight: bold; }',
- '</style>',
- '<link rel="stylesheet" type="text/css" href="'+STYLESHEET_URL+'">',
- '<link rel="stylesheet" type="text/css" href="'+EXTERNAL_STYLESHEET_URL+'">',
- '</head>',
- '<body>',
- '<h1>Some header text</h1>',
- '<p id="salutation" style="font-size: 12pt">hi.</p>',
- '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ',
- 'solely to provide some things to ',
- '<span style="color: yellow" class="highlight">',
- 'highlight</span> and <span style="font-weight: bold">count</span> ',
- 'style list-items in the box at right. If you are reading this, ',
- 'you should go do something else instead. Maybe read a book. Or better ',
- 'yet, write some test-cases for another bit of code. ',
- '<span style="font-style: italic">some text</span></p>',
- '<p id="closing">more text</p>',
- '<p>even more text</p>',
- '</div>',
- '</body>',
- '</html>'].join("\n"));
+const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(`
+ <html>
+ <head>
+ <title>Rule view style editor link test</title>
+ <style type="text/css">
+ html { color: #000000; }
+ div { font-variant: small-caps; color: #000000; }
+ .nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em;
+ font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+ </style>
+ <style>
+ div { font-weight: bold; }
+ </style>
+ <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}">
+ <link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}">
+ </head>
+ <body>
+ <h1>Some header text</h1>
+ <p id="salutation" style="font-size: 12pt">hi.</p>
+ <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+ solely to provide some things to
+ <span style="color: yellow" class="highlight">
+ highlight</span> and <span style="font-weight: bold">count</span>
+ style list-items in the box at right. If you are reading this,
+ you should go do something else instead. Maybe read a book. Or better
+ yet, write some test-cases for another bit of code.
+ <span style="font-style: italic">some text</span></p>
+ <p id="closing">more text</p>
+ <p>even more text</p>
+ </div>
+ </body>
+ </html>
+`);
add_task(function*() {
yield addTab(DOCUMENT_URL);
let {toolbox, inspector, view, testActor} = yield openRuleView();
yield selectNode("div", inspector);
yield testInlineStyle(view);
yield testFirstInlineStyleSheet(view, toolbox, testActor);
--- a/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
+++ b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
@@ -105,27 +105,30 @@ function* userAgentStylesVisible(inspect
yield compareAppliedStylesWithUI(inspector, view, "ua");
userRules = view._elementStyle.rules.filter(rule=>rule.editor.isEditable);
uaRules = view._elementStyle.rules.filter(rule=>!rule.editor.isEditable);
is(userRules.length, data.numUserRules, "Correct number of user rules");
ok(uaRules.length > data.numUARules, "Has UA rules");
}
- ok(userRules.some(rule=> rule.matchedSelectors.length === 1),
+ ok(userRules.some(rule => rule.matchedSelectors.length === 1),
"There is an inline style for element in user styles");
// These tests rely on the "a" selector being the last test in
// TEST_DATA.
- ok(uaRules.some(rule=> rule.matchedSelectors.indexOf(":-moz-any-link") !== -1),
- "There is a rule for :-moz-any-link");
- ok(uaRules.some(rule=> rule.matchedSelectors.indexOf("*|*:link") !== -1),
- "There is a rule for *|*:link");
- ok(uaRules.some(rule=> rule.matchedSelectors.length === 1),
- "Inline styles for ua styles");
+ ok(uaRules.some(rule => {
+ return rule.matchedSelectors.indexOf(":-moz-any-link") !== -1;
+ }), "There is a rule for :-moz-any-link");
+ ok(uaRules.some(rule => {
+ return rule.matchedSelectors.indexOf("*|*:link") !== -1;
+ }), "There is a rule for *|*:link");
+ ok(uaRules.some(rule => {
+ return rule.matchedSelectors.length === 1;
+ }), "Inline styles for ua styles");
}
function* userAgentStylesNotVisible(inspector, view) {
info("Making sure that user agent styles are not currently visible");
let userRules;
let uaRules;
@@ -139,21 +142,23 @@ function* userAgentStylesNotVisible(insp
is(uaRules.length, data.numUARules, "No UA rules");
}
}
function* compareAppliedStylesWithUI(inspector, view, filter) {
info("Making sure that UI is consistent with pageStyle.getApplied");
let entries = yield inspector.pageStyle.getApplied(
- inspector.selection.nodeFront, {
- inherited: true,
- matchedSelectors: true,
- filter: filter
- });
+ inspector.selection.nodeFront,
+ {
+ inherited: true,
+ matchedSelectors: true,
+ filter: filter
+ }
+ );
// We may see multiple entries that map to a given rule; filter the
// duplicates here to match what the UI does.
let entryMap = new Map();
for (let entry of entries) {
entryMap.set(entry.rule, entry);
}
entries = [...entryMap.values()];
--- a/devtools/client/inspector/rules/test/doc_frame_script.js
+++ b/devtools/client/inspector/rules/test/doc_frame_script.js
@@ -1,26 +1,27 @@
/* 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
@@ -80,17 +81,18 @@ addMessageListener("Test:GetStyleSheetsI
* - {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) {
let {selector, pseudo, name} = msg.data;
let element = content.document.querySelector(selector);
- let value = content.document.defaultView.getComputedStyle(element, pseudo).getPropertyValue(name);
+ let value = content.document.defaultView.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.
@@ -103,39 +105,36 @@ addMessageListener("Test:WaitForComputed
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) {
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/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -1,23 +1,25 @@
/* 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 ../../../framework/test/shared-head.js */
+/* 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);
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.defaultColorUnit");
});
-var {CssLogic} = require("devtools/shared/inspector/css-logic");
var {getInplaceEditorForSpan: inplaceEditor} =
require("devtools/client/shared/inplace-editor");
const ROOT_TEST_DIR = getRootDirectory(gTestPath);
const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
registerCleanupFunction(() => {
Services.prefs.clearUserPref("devtools.defaultColorUnit");
@@ -33,17 +35,17 @@ registerCleanupFunction(() => {
var _addTab = addTab;
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;
});
-}
+};
/**
* Open the toolbox, with the inspector tool visible, and the rule-view
* sidebar tab selected.
*
* @return a promise that resolves when the inspector is ready and the rule
* view is visible and ready
*/
@@ -144,17 +146,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);
}
@@ -218,18 +221,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);