diff options
Diffstat (limited to 'devtools/client/inspector/computed/test')
32 files changed, 2308 insertions, 0 deletions
diff --git a/devtools/client/inspector/computed/test/browser.ini b/devtools/client/inspector/computed/test/browser.ini new file mode 100644 index 0000000000..4c5d5b30bf --- /dev/null +++ b/devtools/client/inspector/computed/test/browser.ini @@ -0,0 +1,43 @@ +[DEFAULT] +tags = devtools +subsuite = devtools +support-files = + doc_matched_selectors.html + doc_media_queries.html + doc_pseudoelement.html + doc_sourcemaps.css + doc_sourcemaps.css.map + doc_sourcemaps.html + doc_sourcemaps.scss + head.js + !/devtools/client/inspector/test/head.js + !/devtools/client/inspector/test/shared-head.js + !/devtools/client/shared/test/shared-head.js + !/devtools/client/shared/test/telemetry-test-helpers.js + !/devtools/client/shared/test/highlighter-test-actor.js + +[browser_computed_browser-styles.js] +[browser_computed_cycle_color.js] +[browser_computed_default_tab.js] +[browser_computed_getNodeInfo.js] +skip-if = !debug && os == "mac" #Bug 1559033 +[browser_computed_keybindings_01.js] +[browser_computed_keybindings_02.js] +[browser_computed_matched-selectors-toggle.js] +[browser_computed_matched-selectors_01.js] +[browser_computed_matched-selectors_02.js] +[browser_computed_media-queries.js] +[browser_computed_no-results-placeholder.js] +[browser_computed_original-source-link.js] +[browser_computed_pseudo-element_01.js] +[browser_computed_refresh-on-style-change_01.js] +[browser_computed_refresh-on-ruleview-change.js] +[browser_computed_search-filter.js] +[browser_computed_search-filter_clear.js] +[browser_computed_search-filter_context-menu.js] +[browser_computed_search-filter_escape-keypress.js] +[browser_computed_search-filter_noproperties.js] +[browser_computed_select-and-copy-styles-01.js] +[browser_computed_select-and-copy-styles-02.js] +[browser_computed_style-editor-link.js] +skip-if = true # bug 1307846 diff --git a/devtools/client/inspector/computed/test/browser_computed_browser-styles.js b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js new file mode 100644 index 0000000000..52477d21ed --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js @@ -0,0 +1,59 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the checkbox to include browser styles works properly. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + } + </style> + <span id="matches" class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + + info("Checking the default styles"); + is( + isPropertyVisible("color", view), + true, + "span #matches color property is visible" + ); + is( + isPropertyVisible("background-color", view), + false, + "span #matches background-color property is hidden" + ); + + info("Toggling the browser styles"); + const doc = view.styleDocument; + const checkbox = doc.querySelector(".includebrowserstyles"); + const onRefreshed = inspector.once("computed-view-refreshed"); + checkbox.click(); + await onRefreshed; + + info("Checking the browser styles"); + is(isPropertyVisible("color", view), true, "span color property is visible"); + is( + isPropertyVisible("background-color", view), + true, + "span background-color property is visible" + ); +}); + +function isPropertyVisible(name, view) { + info("Checking property visibility for " + name); + const propertyViews = view.propertyViews; + for (const propView of propertyViews) { + if (propView.name == name) { + return propView.visible; + } + } + return false; +} diff --git a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js new file mode 100644 index 0000000000..37d468b5bd --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js @@ -0,0 +1,90 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Computed view color cycling test. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #f00; + } + </style> + <span id="matches" class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + + info("Checking the property itself"); + let container = getComputedViewPropertyView(view, "color").valueNode; + await checkColorCycling(container, view); + + info("Checking matched selectors"); + container = await getComputedViewMatchedRules(view, "color"); + await checkColorCycling(container, view); +}); + +async function checkColorCycling(container, view) { + const valueNode = container.querySelector(".computed-color"); + const win = view.styleWindow; + + // "Authored" (default; currently the computed value) + is( + valueNode.textContent, + "rgb(255, 0, 0)", + "Color displayed as an RGB value." + ); + + const tests = [ + { + value: "hwb(0 0% 0%)", + comment: "Color displayed as an HWB value.", + }, + { + value: "red", + comment: "Color displayed as a color name.", + }, + { + value: "#f00", + comment: "Color displayed as a HEX value.", + }, + { + value: "hsl(0, 100%, 50%)", + comment: "Color displayed as an HSL value.", + }, + { + value: "rgb(255, 0, 0)", + comment: "Color displayed as an RGB value again.", + }, + ]; + + for (const test of tests) { + await checkSwatchShiftClick(container, win, test.value, test.comment); + } +} + +async function checkSwatchShiftClick(container, win, expectedValue, comment) { + const swatch = container.querySelector(".computed-colorswatch"); + const valueNode = container.querySelector(".computed-color"); + swatch.scrollIntoView(); + + const onUnitChange = swatch.once("unit-change"); + EventUtils.synthesizeMouseAtCenter( + swatch, + { + type: "mousedown", + shiftKey: true, + }, + win + ); + // we need to have the mouse up event in order to make sure that the platform + // lets go of the last container, and is not waiting for something to happen. + // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1442153 + EventUtils.synthesizeMouseAtCenter(swatch, { type: "mouseup" }, win); + await onUnitChange; + is(valueNode.textContent, expectedValue, comment); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_default_tab.js b/devtools/client/inspector/computed/test/browser_computed_default_tab.js new file mode 100644 index 0000000000..1a485a7cc7 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_default_tab.js @@ -0,0 +1,39 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that the computed view is initialized when the computed view is the default tab +// for the inspector. + +const TEST_URI = ` + <style type="text/css"> + #matches { + color: #F00; + } + </style> + <span id="matches">Some styled text</span> +`; + +add_task(async function () { + await pushPref("devtools.inspector.activeSidebar", "computedview"); + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + is( + isPropertyVisible("color", view), + true, + "span #matches color property is visible" + ); +}); + +function isPropertyVisible(name, view) { + info("Checking property visibility for " + name); + const propertyViews = view.propertyViews; + for (const propView of propertyViews) { + if (propView.name == name) { + return propView.visible; + } + } + return false; +} diff --git a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js new file mode 100644 index 0000000000..0aa1c85ff2 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js @@ -0,0 +1,176 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests various output of the computed-view's getNodeInfo method. +// This method is used by the HighlightersOverlay and TooltipsOverlay on mouseover to +// decide which highlighter or tooltip to show when hovering over a value/name/selector +// if any. +// +// For instance, browser_ruleview_selector-highlighter_01.js and +// browser_ruleview_selector-highlighter_02.js test that the selector +// highlighter appear when hovering over a selector in the rule-view. +// Since the code to make this work for the computed-view is 90% the same, +// there is no need for testing it again here. +// This test however serves as a unit test for getNodeInfo. + +const { + VIEW_NODE_SELECTOR_TYPE, + VIEW_NODE_PROPERTY_TYPE, + VIEW_NODE_VALUE_TYPE, + VIEW_NODE_IMAGE_URL_TYPE, +} = require("resource://devtools/client/inspector/shared/node-types.js"); + +const TEST_URI = ` + <style type="text/css"> + body { + background: red; + color: white; + } + div { + background: green; + } + div div { + background-color: yellow; + background-image: url(chrome://branding/content/icon64.png); + color: red; + } + </style> + <div><div id="testElement">Test element</div></div> +`; + +// Each item in this array must have the following properties: +// - desc {String} will be logged for information +// - getHoveredNode {Generator Function} received the computed-view instance as +// argument and must return the node to be tested +// - assertNodeInfo {Function} should check the validity of the nodeInfo +// argument it receives +const TEST_DATA = [ + { + desc: "Testing a null node", + getHoveredNode() { + return null; + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo, null); + }, + }, + { + desc: "Testing a useless node", + getHoveredNode(view) { + return view.element; + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo, null); + }, + }, + { + desc: "Testing a property name", + getHoveredNode(view) { + return getComputedViewProperty(view, "color").nameSpan; + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE); + ok("property" in nodeInfo.value); + ok("value" in nodeInfo.value); + is(nodeInfo.value.property, "color"); + is(nodeInfo.value.value, "rgb(255, 0, 0)"); + }, + }, + { + desc: "Testing a property value", + getHoveredNode(view) { + return getComputedViewProperty(view, "color").valueSpan; + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_VALUE_TYPE); + ok("property" in nodeInfo.value); + ok("value" in nodeInfo.value); + is(nodeInfo.value.property, "color"); + is(nodeInfo.value.value, "rgb(255, 0, 0)"); + }, + }, + { + desc: "Testing an image url", + getHoveredNode(view) { + const { valueSpan } = getComputedViewProperty(view, "background-image"); + return valueSpan.querySelector(".theme-link"); + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE); + ok("property" in nodeInfo.value); + ok("value" in nodeInfo.value); + is(nodeInfo.value.property, "background-image"); + is(nodeInfo.value.value, 'url("chrome://branding/content/icon64.png")'); + is(nodeInfo.value.url, "chrome://branding/content/icon64.png"); + }, + }, + { + desc: "Testing a matched rule selector (bestmatch)", + async getHoveredNode(view) { + const el = await getComputedViewMatchedRules(view, "background-color"); + return el.querySelector(".bestmatch"); + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE); + is(nodeInfo.value, "div div"); + }, + }, + { + desc: "Testing a matched rule selector (matched)", + async getHoveredNode(view) { + const el = await getComputedViewMatchedRules(view, "background-color"); + return el.querySelector(".matched"); + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE); + is(nodeInfo.value, "div"); + }, + }, + { + desc: "Testing a matched rule selector (parentmatch)", + async getHoveredNode(view) { + const el = await getComputedViewMatchedRules(view, "color"); + return el.querySelector(".parentmatch"); + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE); + is(nodeInfo.value, "body"); + }, + }, + { + desc: "Testing a matched rule value", + async getHoveredNode(view) { + const el = await getComputedViewMatchedRules(view, "color"); + return el.querySelector(".computed-other-property-value"); + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo.type, VIEW_NODE_VALUE_TYPE); + is(nodeInfo.value.property, "color"); + is(nodeInfo.value.value, "red"); + }, + }, + { + desc: "Testing a matched rule stylesheet link", + async getHoveredNode(view) { + const el = await getComputedViewMatchedRules(view, "color"); + return el.querySelector(".rule-link .theme-link"); + }, + assertNodeInfo(nodeInfo) { + is(nodeInfo, null); + }, + }, +]; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#testElement", inspector); + + for (const { desc, getHoveredNode, assertNodeInfo } of TEST_DATA) { + info(desc); + const nodeInfo = view.getNodeInfo(await getHoveredNode(view)); + assertNodeInfo(nodeInfo); + } +}); diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js new file mode 100644 index 0000000000..5a6681f139 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js @@ -0,0 +1,92 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests computed view key bindings. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + } + </style> + <span class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode(".matches", inspector); + + const propView = getFirstVisiblePropertyView(view); + const rulesTable = propView.matchedSelectorsContainer; + const matchedExpander = propView.element; + + info("Focusing the property"); + matchedExpander.scrollIntoView(); + const onMatchedExpanderFocus = once(matchedExpander, "focus", true); + EventUtils.synthesizeMouseAtCenter(matchedExpander, {}, view.styleWindow); + await onMatchedExpanderFocus; + + await checkToggleKeyBinding( + view.styleWindow, + "VK_SPACE", + rulesTable, + inspector + ); + await checkToggleKeyBinding( + view.styleWindow, + "VK_RETURN", + rulesTable, + inspector + ); + await checkHelpLinkKeybinding(view); +}); + +function getFirstVisiblePropertyView(view) { + let propView = null; + view.propertyViews.some(p => { + if (p.visible) { + propView = p; + return true; + } + return false; + }); + + return propView; +} + +async function checkToggleKeyBinding(win, key, rulesTable, inspector) { + info( + "Pressing " + + key + + " key a couple of times to check that the " + + "property gets expanded/collapsed" + ); + + const onExpand = inspector.once("computed-view-property-expanded"); + const onCollapse = inspector.once("computed-view-property-collapsed"); + + info("Expanding the property"); + EventUtils.synthesizeKey(key, {}, win); + await onExpand; + isnot(rulesTable.innerHTML, "", "The property has been expanded"); + + info("Collapsing the property"); + EventUtils.synthesizeKey(key, {}, win); + await onCollapse; + is(rulesTable.innerHTML, "", "The property has been collapsed"); +} + +function checkHelpLinkKeybinding(view) { + info('Check that MDN link is opened on "F1"'); + const propView = getFirstVisiblePropertyView(view); + return new Promise(resolve => { + propView.mdnLinkClick = function (event) { + ok(true, "Pressing F1 opened the MDN link"); + resolve(); + }; + EventUtils.synthesizeKey("VK_F1", {}, view.styleWindow); + }); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js new file mode 100644 index 0000000000..dd08df84d9 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js @@ -0,0 +1,69 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests the computed-view keyboard navigation. + +const TEST_URI = ` + <style type="text/css"> + span { + 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"> + <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"> + 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> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("span", inspector); + + info("Selecting the first computed style in the list"); + const firstStyle = view.styleDocument.querySelector( + "#computed-container .computed-property-view" + ); + ok(firstStyle, "First computed style found in panel"); + firstStyle.focus(); + + info("Tab to select the 2nd style and press return"); + let onExpanded = inspector.once("computed-view-property-expanded"); + EventUtils.synthesizeKey("KEY_Tab"); + EventUtils.synthesizeKey("KEY_Enter"); + await onExpanded; + + info("Verify the 2nd style has been expanded"); + const secondStyleSelectors = view.styleDocument.querySelectorAll( + ".computed-property-content .matchedselectors" + )[1]; + ok(!!secondStyleSelectors.childNodes.length, "Matched selectors expanded"); + + info("Tab back up and test the same thing, with space"); + onExpanded = inspector.once("computed-view-property-expanded"); + EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }); + EventUtils.synthesizeKey(" "); + await onExpanded; + + info("Verify the 1st style has been expanded too"); + const firstStyleSelectors = view.styleDocument.querySelectorAll( + ".computed-property-content .matchedselectors" + )[0]; + ok(!!firstStyleSelectors.childNodes.length, "Matched selectors expanded"); +}); diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js new file mode 100644 index 0000000000..756d7d47c7 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js @@ -0,0 +1,127 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the computed view properties can be expanded and collapsed with +// either the twisty or by dbl-clicking on the container. + +const TEST_URI = ` + <style type="text/css"> , + html { color: #000000; font-size: 15pt; } + h1 { color: red; } + </style> + <h1>Some header text</h1> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("h1", inspector); + + await testExpandOnTwistyClick(view, inspector); + await testCollapseOnTwistyClick(view, inspector); + await testExpandOnDblClick(view, inspector); + await testCollapseOnDblClick(view, inspector); +}); + +async function testExpandOnTwistyClick( + { styleDocument, styleWindow }, + inspector +) { + info("Testing that a property expands on twisty click"); + + info("Getting twisty element"); + const twisty = styleDocument.querySelector(".computed-expandable"); + ok(twisty, "Twisty found"); + + const onExpand = inspector.once("computed-view-property-expanded"); + info("Clicking on the twisty element"); + twisty.click(); + + await onExpand; + + // Expanded means the matchedselectors div is not empty + const div = styleDocument.querySelector( + ".computed-property-content .matchedselectors" + ); + ok(!!div.childNodes.length, "Matched selectors are expanded on twisty click"); +} + +async function testCollapseOnTwistyClick( + { styleDocument, styleWindow }, + inspector +) { + info("Testing that a property collapses on twisty click"); + + info("Getting twisty element"); + const twisty = styleDocument.querySelector(".computed-expandable"); + ok(twisty, "Twisty found"); + + const onCollapse = inspector.once("computed-view-property-collapsed"); + info("Clicking on the twisty element"); + twisty.click(); + + await onCollapse; + + // Collapsed means the matchedselectors div is empty + const div = styleDocument.querySelector( + ".computed-property-content .matchedselectors" + ); + ok( + div.childNodes.length === 0, + "Matched selectors are collapsed on twisty click" + ); +} + +async function testExpandOnDblClick({ styleDocument, styleWindow }, inspector) { + info("Testing that a property expands on container dbl-click"); + + info("Getting computed property container"); + const container = styleDocument.querySelector( + "#computed-container .computed-property-view" + ); + ok(container, "Container found"); + + container.scrollIntoView(); + + const onExpand = inspector.once("computed-view-property-expanded"); + info("Dbl-clicking on the container"); + EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow); + + await onExpand; + + // Expanded means the matchedselectors div is not empty + const div = styleDocument.querySelector( + ".computed-property-content .matchedselectors" + ); + ok(!!div.childNodes.length, "Matched selectors are expanded on dblclick"); +} + +async function testCollapseOnDblClick( + { styleDocument, styleWindow }, + inspector +) { + info("Testing that a property collapses on container dbl-click"); + + info("Getting computed property container"); + const container = styleDocument.querySelector( + "#computed-container .computed-property-view" + ); + ok(container, "Container found"); + + const onCollapse = inspector.once("computed-view-property-collapsed"); + info("Dbl-clicking on the container"); + EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow); + + await onCollapse; + + // Collapsed means the matchedselectors div is empty + const div = styleDocument.querySelector( + ".computed-property-content .matchedselectors" + ); + ok( + div.childNodes.length === 0, + "Matched selectors are collapsed on dblclick" + ); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js new file mode 100644 index 0000000000..cf2233fd75 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js @@ -0,0 +1,49 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Checking selector counts, matched rules and titles in the computed-view. + +const { + PropertyView, +} = require("resource://devtools/client/inspector/computed/computed.js"); +const TEST_URI = URL_ROOT + "doc_matched_selectors.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openComputedView(); + + await selectNode("#test", inspector); + await testMatchedSelectors(view, inspector); +}); + +async function testMatchedSelectors(view, inspector) { + info("checking selector counts, matched rules and titles"); + + const nodeFront = await getNodeFront("#test", inspector); + is( + nodeFront, + view._viewedElement, + "style inspector node matches the selected node" + ); + + const propertyView = new PropertyView(view, "color"); + propertyView.buildMain(); + propertyView.buildSelectorContainer(); + propertyView.matchedExpanded = true; + + await propertyView.refreshMatchedSelectors(); + + const numMatchedSelectors = propertyView.matchedSelectors.length; + is( + numMatchedSelectors, + 7, + "CssLogic returns the correct number of matched selectors for div" + ); + is( + propertyView.hasMatchedSelectors, + true, + "hasMatchedSelectors returns true" + ); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js new file mode 100644 index 0000000000..b0327a30cf --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js @@ -0,0 +1,40 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests for matched selector texts in the computed view. + +add_task(async function () { + await addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>"); + const { inspector, view } = await openComputedView(); + await selectNode("div", inspector); + + info("Checking the color property view"); + const propertyView = getPropertyView(view, "color"); + ok(propertyView, "found PropertyView for color"); + is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors is true"); + + info("Expanding the matched selectors"); + propertyView.matchedExpanded = true; + await propertyView.refreshMatchedSelectors(); + + const span = + propertyView.matchedSelectorsContainer.querySelector("span.rule-text"); + ok(span, "Found the first table row"); + + const selector = propertyView.matchedSelectorViews[0]; + ok(selector, "Found the first matched selector view"); +}); + +function getPropertyView(computedView, name) { + let propertyView = null; + computedView.propertyViews.some(function (view) { + if (view.name == name) { + propertyView = view; + return true; + } + return false; + }); + return propertyView; +} diff --git a/devtools/client/inspector/computed/test/browser_computed_media-queries.js b/devtools/client/inspector/computed/test/browser_computed_media-queries.js new file mode 100644 index 0000000000..d925850fc9 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_media-queries.js @@ -0,0 +1,43 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that we correctly display appropriate media query titles in the +// property view. + +const TEST_URI = URL_ROOT + "doc_media_queries.html"; + +var { + PropertyView, +} = require("resource://devtools/client/inspector/computed/computed.js"); + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openComputedView(); + await selectNode("div", inspector); + await checkPropertyView(view); +}); + +function checkPropertyView(view) { + const propertyView = new PropertyView(view, "width"); + propertyView.buildMain(); + propertyView.buildSelectorContainer(); + propertyView.matchedExpanded = true; + + return propertyView.refreshMatchedSelectors().then(() => { + const numMatchedSelectors = propertyView.matchedSelectors.length; + + is( + numMatchedSelectors, + 2, + "Property view has the correct number of matched selectors for div" + ); + + is( + propertyView.hasMatchedSelectors, + true, + "hasMatchedSelectors returns true" + ); + }); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js new file mode 100644 index 0000000000..3e63bfb9b3 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js @@ -0,0 +1,69 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the no results placeholder works properly. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + } + </style> + <span id="matches" class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + + await enterInvalidFilter(inspector, view); + checkNoResultsPlaceholderShown(view); + + await clearFilterText(inspector, view); + checkNoResultsPlaceholderHidden(view); +}); + +async function enterInvalidFilter(inspector, computedView) { + const searchbar = computedView.searchField; + const searchTerm = "xxxxx"; + + info('setting filter text to "' + searchTerm + '"'); + + const onRefreshed = inspector.once("computed-view-refreshed"); + searchbar.focus(); + synthesizeKeys(searchTerm, computedView.styleWindow); + await onRefreshed; +} + +function checkNoResultsPlaceholderShown(computedView) { + info("Checking that the no results placeholder is shown"); + + const placeholder = computedView.noResults; + const win = computedView.styleWindow; + const display = win.getComputedStyle(placeholder).display; + is(display, "block", "placeholder is visible"); +} + +async function clearFilterText(inspector, computedView) { + info("Clearing the filter text"); + + const searchbar = computedView.searchField; + + const onRefreshed = inspector.once("computed-view-refreshed"); + searchbar.focus(); + searchbar.value = ""; + EventUtils.synthesizeKey("c", {}, computedView.styleWindow); + await onRefreshed; +} + +function checkNoResultsPlaceholderHidden(computedView) { + info("Checking that the no results placeholder is hidden"); + + const placeholder = computedView.noResults; + const win = computedView.styleWindow; + const display = win.getComputedStyle(placeholder).display; + is(display, "none", "placeholder is hidden"); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_original-source-link.js b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js new file mode 100644 index 0000000000..771d349b3b --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js @@ -0,0 +1,71 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the computed view shows the original source link when source maps +// are enabled. + +const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html"; +const PREF = "devtools.source-map.client-service.enabled"; +const SCSS_LOC = "doc_sourcemaps.scss:4"; +const CSS_LOC = "doc_sourcemaps.css:1"; + +add_task(async function () { + info("Turning the pref " + PREF + " on"); + Services.prefs.setBoolPref(PREF, true); + + await addTab(TESTCASE_URI); + const { toolbox, inspector, view } = await openComputedView(); + let onLinksUpdated = inspector.once("computed-view-sourcelinks-updated"); + await selectNode("div", inspector); + + info("Expanding the first property"); + await expandComputedViewPropertyByIndex(view, 0); + + info("Verifying the link text"); + await onLinksUpdated; + verifyLinkText(view, SCSS_LOC); + + info("Toggling the pref"); + onLinksUpdated = inspector.once("computed-view-sourcelinks-updated"); + Services.prefs.setBoolPref(PREF, false); + await onLinksUpdated; + + info("Verifying that the link text has changed after the pref change"); + await verifyLinkText(view, CSS_LOC); + + info("Toggling the pref again"); + onLinksUpdated = inspector.once("computed-view-sourcelinks-updated"); + Services.prefs.setBoolPref(PREF, true); + await onLinksUpdated; + + info("Testing that clicking on the link works"); + await testClickingLink(toolbox, view); + + info("Turning the pref " + PREF + " off"); + Services.prefs.clearUserPref(PREF); +}); + +async function testClickingLink(toolbox, view) { + const onEditor = waitForStyleEditor(toolbox, "doc_sourcemaps.scss"); + + info("Clicking the computedview stylesheet link"); + const link = getComputedViewLinkByIndex(view, 0); + link.scrollIntoView(); + link.click(); + + const editor = await onEditor; + + const { line } = editor.sourceEditor.getCursor(); + is(line, 3, "cursor is at correct line number in original source"); +} + +function verifyLinkText(view, text) { + const link = getComputedViewLinkByIndex(view, 0); + is( + link.textContent, + text, + "Linked text changed to display the correct location" + ); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js new file mode 100644 index 0000000000..e972a0257a --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js @@ -0,0 +1,38 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that pseudoelements are displayed correctly in the rule view. + +const TEST_URI = URL_ROOT + "doc_pseudoelement.html"; + +add_task(async function () { + await addTab(TEST_URI); + const { inspector, view } = await openComputedView(); + await testTopLeft(inspector, view); +}); + +async function testTopLeft(inspector, view) { + const node = await getNodeFront("#topleft", inspector.markup); + await selectNode(node, inspector); + const float = getComputedViewPropertyValue(view, "float"); + is(float, "left", "The computed view shows the correct float"); + + const children = await inspector.markup.walker.children(node); + is(children.nodes.length, 3, "Element has correct number of children"); + + const beforeElement = children.nodes[0]; + await selectNode(beforeElement, inspector); + let top = getComputedViewPropertyValue(view, "top"); + is(top, "0px", "The computed view shows the correct top"); + let left = getComputedViewPropertyValue(view, "left"); + is(left, "0px", "The computed view shows the correct left"); + + const afterElement = children.nodes[children.nodes.length - 1]; + await selectNode(afterElement, inspector); + top = getComputedViewPropertyValue(view, "top"); + is(top, "96px", "The computed view shows the correct top"); + left = getComputedViewPropertyValue(view, "left"); + is(left, "96px", "The computed view shows the correct left"); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js new file mode 100644 index 0000000000..12b7901970 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js @@ -0,0 +1,93 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the computed view refreshes when the rule view is updated in 3 pane mode. + +const TEST_URI = "<div id='target' style='color: rgb(255, 0, 0);'>test</div>"; + +add_task(async function () { + info( + "Check whether the color as well in computed view is updated " + + "when the rule in rule view is changed in case of 3 pane mode" + ); + await pushPref("devtools.inspector.three-pane-enabled", true); + + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#target", inspector); + + is( + getComputedViewPropertyValue(view, "color"), + "rgb(255, 0, 0)", + "The computed view shows the right color" + ); + + info("Change the value in the ruleview"); + const ruleView = inspector.getPanel("ruleview").view; + const editor = await getValueEditor(ruleView); + const onRuleViewChanged = ruleView.once("ruleview-changed"); + const onComputedViewRefreshed = inspector.once("computed-view-refreshed"); + editor.input.value = "rgb(0, 255, 0)"; + EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow); + await Promise.all([onRuleViewChanged, onComputedViewRefreshed]); + + info("Check the value in the computed view"); + is( + getComputedViewPropertyValue(view, "color"), + "rgb(0, 255, 0)", + "The computed value is updated when the rule in ruleview is changed" + ); +}); + +add_task(async function () { + info( + "Check that the computed view is not updated " + + "if the rule view is changed in 2 pane mode." + ); + await pushPref("devtools.inspector.three-pane-enabled", false); + + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector } = await openComputedView(); + await selectNode("#target", inspector); + + info("Select the rule view"); + const ruleView = inspector.getPanel("ruleview").view; + const onRuleViewReady = ruleView.once("ruleview-refreshed"); + const onSidebarSelect = inspector.sidebar.once("select"); + inspector.sidebar.select("ruleview"); + await Promise.all([onSidebarSelect, onRuleViewReady]); + + info( + "Prepare the counter which counts how many times computed view is refreshed" + ); + let computedViewRefreshCount = 0; + const computedViewRefreshListener = () => { + computedViewRefreshCount += 1; + }; + inspector.on("computed-view-refreshed", computedViewRefreshListener); + + info("Change the value in the rule view"); + const editor = await getValueEditor(ruleView); + const onRuleViewChanged = ruleView.once("ruleview-changed"); + editor.input.value = "rgb(0, 255, 0)"; + EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow); + await onRuleViewChanged; + + info( + "Wait for time enough to check whether the computed value is updated or not" + ); + await wait(1000); + + info("Check the counter"); + is(computedViewRefreshCount, 0, "The computed view is not updated"); + + inspector.off("computed-view-refreshed", computedViewRefreshListener); +}); + +async function getValueEditor(ruleView) { + const ruleEditor = ruleView.element.children[0]._ruleEditor; + const propEditor = ruleEditor.rule.textProps[0].editor; + return focusEditableField(ruleView, propEditor.valueSpan); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js new file mode 100644 index 0000000000..190593497b --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js @@ -0,0 +1,32 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the computed view refreshes when the current node has its style +// changed. + +const TEST_URI = "<div id='testdiv' style='font-size:10px;'>Test div!</div>"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#testdiv", inspector); + + let fontSize = getComputedViewPropertyValue(view, "font-size"); + is(fontSize, "10px", "The computed view shows the right font-size"); + + info("Changing the node's style and waiting for the update"); + const onUpdated = inspector.once("computed-view-refreshed"); + await setContentPageElementAttribute( + "#testdiv", + "style", + "font-size: 15px; color: red;" + ); + await onUpdated; + + fontSize = getComputedViewPropertyValue(view, "font-size"); + is(fontSize, "15px", "The computed view shows the updated font-size"); + const color = getComputedViewPropertyValue(view, "color"); + is(color, "rgb(255, 0, 0)", "The computed view also shows the color now"); +}); diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter.js b/devtools/client/inspector/computed/test/browser_computed_search-filter.js new file mode 100644 index 0000000000..a22cdb4038 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js @@ -0,0 +1,67 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the search filter works properly. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + } + </style> + <span id="matches" class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + await testToggleDefaultStyles(inspector, view); + await testAddTextInFilter(inspector, view); +}); + +async function testToggleDefaultStyles(inspector, computedView) { + info('checking "Browser styles" checkbox'); + const checkbox = computedView.includeBrowserStylesCheckbox; + const onRefreshed = inspector.once("computed-view-refreshed"); + checkbox.click(); + await onRefreshed; +} + +async function testAddTextInFilter(inspector, computedView) { + info('setting filter text to "color"'); + const searchField = computedView.searchField; + const onRefreshed = inspector.once("computed-view-refreshed"); + const win = computedView.styleWindow; + + // First check to make sure that accel + F doesn't focus search if the + // container isn't focused + inspector.panelWin.focus(); + EventUtils.synthesizeKey("f", { accelKey: true }); + isnot( + inspector.panelDoc.activeElement, + searchField, + "Search field isn't focused" + ); + + computedView.element.focus(); + EventUtils.synthesizeKey("f", { accelKey: true }); + is(inspector.panelDoc.activeElement, searchField, "Search field is focused"); + + synthesizeKeys("color", win); + await onRefreshed; + + info("check that the correct properties are visible"); + + const propertyViews = computedView.propertyViews; + propertyViews.forEach(propView => { + const name = propView.name; + is( + propView.visible, + name.indexOf("color") > -1, + "span " + name + " property visibility check" + ); + }); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js new file mode 100644 index 0000000000..f77a71cc18 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js @@ -0,0 +1,72 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the search filter clear button works properly. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + background-color: #00F; + border-color: #0F0; + } + </style> + <span id="matches" class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + await testAddTextInFilter(inspector, view); + await testClearSearchFilter(inspector, view); +}); + +async function testAddTextInFilter(inspector, computedView) { + info('Setting filter text to "background-color"'); + + const win = computedView.styleWindow; + const propertyViews = computedView.propertyViews; + const searchField = computedView.searchField; + + searchField.focus(); + synthesizeKeys("background-color", win); + await inspector.once("computed-view-refreshed"); + + info("Check that the correct properties are visible"); + + propertyViews.forEach(propView => { + const name = propView.name; + is( + propView.visible, + name.indexOf("background-color") > -1, + "span " + name + " property visibility check" + ); + }); +} + +async function testClearSearchFilter(inspector, computedView) { + info("Clearing the search filter"); + + const win = computedView.styleWindow; + const propertyViews = computedView.propertyViews; + const searchField = computedView.searchField; + const searchClearButton = computedView.searchClearButton; + const onRefreshed = inspector.once("computed-view-refreshed"); + + EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win); + await onRefreshed; + + info("Check that the correct properties are visible"); + + ok(!searchField.value, "Search filter is cleared"); + propertyViews.forEach(propView => { + is( + propView.visible, + propView.hasMatchedSelectors, + "span " + propView.name + " property visibility check" + ); + }); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js new file mode 100644 index 0000000000..0069d644c7 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js @@ -0,0 +1,101 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests computed view search filter context menu works properly. + +const TEST_INPUT = "h1"; + +const TEST_URI = "<h1>test filter context menu</h1>"; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { toolbox, inspector, view } = await openComputedView(); + await selectNode("h1", inspector); + + const searchField = view.searchField; + + info("Opening context menu"); + + emptyClipboard(); + + const onFocus = once(searchField, "focus"); + searchField.focus(); + await onFocus; + + let onContextMenuOpen = toolbox.once("menu-open"); + synthesizeContextMenuEvent(searchField); + await onContextMenuOpen; + + let searchContextMenu = toolbox.getTextBoxContextMenu(); + ok( + searchContextMenu, + "The search filter context menu is loaded in the computed view" + ); + + let cmdUndo = searchContextMenu.querySelector("#editmenu-undo"); + let cmdDelete = searchContextMenu.querySelector("#editmenu-delete"); + let cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll"); + let cmdCut = searchContextMenu.querySelector("#editmenu-cut"); + let cmdCopy = searchContextMenu.querySelector("#editmenu-copy"); + let cmdPaste = searchContextMenu.querySelector("#editmenu-paste"); + + is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled"); + is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled"); + is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled"); + + is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled"); + is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled"); + if (isWindows()) { + // emptyClipboard only works on Windows (666254), assert paste only for this OS. + is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled"); + } + + info("Closing context menu"); + let onContextMenuClose = toolbox.once("menu-close"); + searchContextMenu.hidePopup(); + await onContextMenuClose; + + info("Copy text in search field using the context menu"); + searchField.setUserInput(TEST_INPUT); + searchField.select(); + + onContextMenuOpen = toolbox.once("menu-open"); + synthesizeContextMenuEvent(searchField); + await onContextMenuOpen; + + searchContextMenu = toolbox.getTextBoxContextMenu(); + cmdCopy = searchContextMenu.querySelector("#editmenu-copy"); + onContextMenuClose = toolbox.once("menu-close"); + await waitForClipboardPromise( + () => searchContextMenu.activateItem(cmdCopy), + TEST_INPUT + ); + await onContextMenuClose; + + info("Reopen context menu and check command properties"); + + onContextMenuOpen = toolbox.once("menu-open"); + synthesizeContextMenuEvent(searchField); + await onContextMenuOpen; + + searchContextMenu = toolbox.getTextBoxContextMenu(); + cmdUndo = searchContextMenu.querySelector("#editmenu-undo"); + cmdDelete = searchContextMenu.querySelector("#editmenu-delete"); + cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll"); + cmdCut = searchContextMenu.querySelector("#editmenu-cut"); + cmdCopy = searchContextMenu.querySelector("#editmenu-copy"); + cmdPaste = searchContextMenu.querySelector("#editmenu-paste"); + + is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled"); + is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled"); + is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled"); + is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled"); + is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled"); + is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled"); + + onContextMenuClose = toolbox.once("menu-close"); + searchContextMenu.hidePopup(); + await onContextMenuClose; +}); diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js new file mode 100644 index 0000000000..59c71d01fe --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js @@ -0,0 +1,76 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Avoid test timeouts on Linux debug builds where the test takes just a bit too long to +// run (see bug 1258081). +requestLongerTimeout(2); + +// Tests that search filter escape keypress will clear the search field. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + } + </style> + <span id="matches" class="matches">Some styled text</span> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("#matches", inspector); + await testAddTextInFilter(inspector, view); + await testEscapeKeypress(inspector, view); +}); + +async function testAddTextInFilter(inspector, computedView) { + info('Setting filter text to "background-color"'); + + const win = computedView.styleWindow; + const propertyViews = computedView.propertyViews; + const searchField = computedView.searchField; + const checkbox = computedView.includeBrowserStylesCheckbox; + + info("Include browser styles"); + checkbox.click(); + await inspector.once("computed-view-refreshed"); + + searchField.focus(); + synthesizeKeys("background-color", win); + await inspector.once("computed-view-refreshed"); + + info("Check that the correct properties are visible"); + + propertyViews.forEach(propView => { + const name = propView.name; + is( + propView.visible, + name.indexOf("background-color") > -1, + "span " + name + " property visibility check" + ); + }); +} + +async function testEscapeKeypress(inspector, computedView) { + info("Pressing the escape key on search filter"); + + const win = computedView.styleWindow; + const propertyViews = computedView.propertyViews; + const searchField = computedView.searchField; + const onRefreshed = inspector.once("computed-view-refreshed"); + + searchField.focus(); + EventUtils.synthesizeKey("VK_ESCAPE", {}, win); + await onRefreshed; + + info("Check that the correct properties are visible"); + + ok(!searchField.value, "Search filter is cleared"); + propertyViews.forEach(propView => { + const name = propView.name; + is(propView.visible, true, "span " + name + " property is visible"); + }); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js new file mode 100644 index 0000000000..b24722e237 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js @@ -0,0 +1,68 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the "no-results" message is displayed when selecting an invalid element or +// when all properties have been filtered out. + +const TEST_URI = ` + <style type="text/css"> + .matches { + color: #F00; + background-color: #00F; + border-color: #0F0; + } + </style> + <div> + <!-- comment node --> + <span id="matches" class="matches">Some styled text</span> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + const propertyViews = view.propertyViews; + + info("Select the #matches node"); + const matchesNode = await getNodeFront("#matches", inspector); + let onRefresh = inspector.once("computed-view-refreshed"); + await selectNode(matchesNode, inspector); + await onRefresh; + + ok( + !!propertyViews.filter(p => p.visible).length, + "CSS properties are displayed" + ); + ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden"); + + info("Select a comment node"); + const commentNode = await inspector.walker.previousSibling(matchesNode); + await selectNode(commentNode, inspector); + + is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed"); + ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed"); + + info("Select the #matches node again"); + onRefresh = inspector.once("computed-view-refreshed"); + await selectNode(matchesNode, inspector); + await onRefresh; + + ok( + !!propertyViews.filter(p => p.visible).length, + "CSS properties are displayed" + ); + ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden"); + + info( + "Filter by 'will-not-match' and check the no-results message is displayed" + ); + const searchField = view.searchField; + searchField.focus(); + synthesizeKeys("will-not-match", view.styleWindow); + await inspector.once("computed-view-refreshed"); + + is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed"); + ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed"); +}); diff --git a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js new file mode 100644 index 0000000000..b6be4591e5 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js @@ -0,0 +1,67 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that properties can be selected and copied from the computed view. + +const TEST_URI = ` + <style type="text/css"> + span { + font-variant-caps: small-caps; + color: #000000; + } + .nomatches { + color: #ff0000; + } + </style> + <div id="first" style="margin: 10em; + font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA"> + <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"> + 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> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("span", inspector); + + await testCopySome(view); + await testCopyAll(view); +}); + +async function testCopySome(view) { + const expectedPattern = + "font-family: helvetica, sans-serif;[\\r\\n]+" + + "font-size: 16px;[\\r\\n]+" + + "font-variant-caps: small-caps;[\\r\\n]*"; + + await copySomeTextAndCheckClipboard( + view, + { + start: { prop: 1, offset: 0 }, + end: { prop: 3, offset: 2 }, + }, + expectedPattern + ); +} + +async function testCopyAll(view) { + const expectedPattern = + "color: rgb\\(255, 255, 0\\);[\\r\\n]+" + + "font-family: helvetica, sans-serif;[\\r\\n]+" + + "font-size: 16px;[\\r\\n]+" + + "font-variant-caps: small-caps;[\\r\\n]*"; + + await copyAllAndCheckClipboard(view, expectedPattern); +} diff --git a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js new file mode 100644 index 0000000000..87fe1d9629 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js @@ -0,0 +1,35 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that properties can be selected and copied from the computed view. + +const TEST_URI = `<div style="text-align:left;width:25px;">Hello world</div>`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view } = await openComputedView(); + await selectNode("div", inspector); + + let expectedPattern = "text-align: left;[\\r\\n]+" + "width: 25px;[\\r\\n]*"; + await copyAllAndCheckClipboard(view, expectedPattern); + + info("Testing expand then select all copy"); + + expectedPattern = + "text-align: left;[\\r\\n]+" + + "element[\\r\\n]+" + + "Best Match this.style[\\r\\n]+" + + "left[\\r\\n]+" + + "width: 25px;[\\r\\n]+" + + "element[\\r\\n]+" + + "Best Match this.style[\\r\\n]+" + + "25px[\\r\\n]*"; + + info("Expanding computed view properties"); + await expandComputedViewPropertyByIndex(view, 0); + await expandComputedViewPropertyByIndex(view, 1); + + await copyAllAndCheckClipboard(view, expectedPattern); +}); diff --git a/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js new file mode 100644 index 0000000000..832c1658a5 --- /dev/null +++ b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js @@ -0,0 +1,210 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests the links from the computed view to the style editor. + +const STYLESHEET_URL = + "data:text/css," + encodeURIComponent(".highlight {color: blue}"); + +const DOCUMENT_URL = + "data:text/html;charset=utf-8," + + encodeURIComponent( + `<html> + <head> + <title>Computed view style editor link test</title> + <style type="text/css"> + html { color: #000000; } + span { 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 { color: #f06; } + </style> + <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}"> + <script> + const sheet = new CSSStyleSheet(); + sheet.replaceSync(".highlight { color: tomato; }"); + document.adoptedStyleSheets.push(sheet); + </script> + </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(async function () { + await addTab(DOCUMENT_URL); + const { toolbox, inspector, view } = await openComputedView(); + await selectNode("span", inspector); + + await testInlineStyle(view); + await testFirstInlineStyleSheet(view, toolbox); + await testSecondInlineStyleSheet(view, toolbox); + await testExternalStyleSheet(view, toolbox); + await testConstructedStyleSheet(view, toolbox); +}); + +async function testInlineStyle(view) { + info("Testing inline style"); + + await expandComputedViewPropertyByIndex(view, 0); + + const onTab = waitForTab(); + info("Clicking on the first rule-link in the computed-view"); + checkComputedViewLink(view, { + index: 0, + expectedText: "element", + expectedTitle: "element", + }); + + const tab = await onTab; + + const tabURI = tab.linkedBrowser.documentURI.spec; + ok(tabURI.startsWith("view-source:"), "View source tab is open"); + info("Closing tab"); + gBrowser.removeTab(tab); +} + +async function testFirstInlineStyleSheet(view, toolbox) { + info("Testing inline stylesheet"); + + info("Listening for toolbox switch to the styleeditor"); + const onSwitch = waitForStyleEditor(toolbox); + + info("Clicking an inline stylesheet"); + checkComputedViewLink(view, { + index: 3, + expectedText: "inline:3", + expectedTitle: "inline:3", + }); + const editor = await onSwitch; + + ok(true, "Switched to the style-editor panel in the toolbox"); + + await validateStyleEditorSheet(editor, 0); +} + +async function testSecondInlineStyleSheet(view, toolbox) { + info("Testing second inline stylesheet"); + + const panel = toolbox.getCurrentPanel(); + const onSelected = panel.UI.once("editor-selected"); + + info("Switching back to the inspector panel in the toolbox"); + await toolbox.selectTool("inspector"); + + info("Clicking on second inline stylesheet link"); + checkComputedViewLink(view, { + index: 5, + expectedText: "inline:2", + expectedTitle: "inline:2", + }); + + info("Waiting for an editor to be selected in StyleEditor"); + const editor = await onSelected; + + is( + toolbox.currentToolId, + "styleeditor", + "The style editor is selected again" + ); + await validateStyleEditorSheet(editor, 1); +} + +async function testExternalStyleSheet(view, toolbox) { + info("Testing external stylesheet"); + + const panel = toolbox.getCurrentPanel(); + const onSelected = panel.UI.once("editor-selected"); + + info("Switching back to the inspector panel in the toolbox"); + await toolbox.selectTool("inspector"); + + info("Clicking on an external stylesheet link"); + checkComputedViewLink(view, { + index: 2, + expectedText: `${STYLESHEET_URL.replace("data:text/css,", "")}:1`, + expectedTitle: `${STYLESHEET_URL}:1`, + }); + + info("Waiting for an editor to be selected in StyleEditor"); + const editor = await onSelected; + + is( + toolbox.currentToolId, + "styleeditor", + "The style editor is selected again" + ); + await validateStyleEditorSheet(editor, 2); +} + +async function testConstructedStyleSheet(view, toolbox) { + info("Testing constructed stylesheet"); + + const panel = toolbox.getCurrentPanel(); + const onSelected = panel.UI.once("editor-selected"); + + info("Switching back to the inspector panel in the toolbox"); + await toolbox.selectTool("inspector"); + + info("Clicking on an constructed stylesheet link"); + + checkComputedViewLink(view, { + index: 1, + expectedText: "constructed", + expectedTitle: "constructed", + }); + + info("Waiting for an editor to be selected in StyleEditor"); + const editor = await onSelected; + + is( + toolbox.currentToolId, + "styleeditor", + "The style editor is selected again" + ); + ok(editor.styleSheet.constructed, "The constructed stylesheet is selected"); +} + +async function validateStyleEditorSheet(editor, expectedSheetIndex) { + info("Validating style editor stylesheet"); + const expectedHref = await SpecialPowers.spawn( + gBrowser.selectedBrowser, + [expectedSheetIndex], + _expectedSheetIndex => + content.document.styleSheets[_expectedSheetIndex].href + ); + is( + editor.styleSheet.href, + expectedHref, + "loaded stylesheet matches document stylesheet" + ); +} + +function checkComputedViewLink(view, { index, expectedText, expectedTitle }) { + const link = getComputedViewLinkByIndex(view, index); + is(link.innerText, expectedText, `Link #${index} has expected label`); + is( + link.getAttribute("title"), + expectedTitle, + `Link #${index} has expected title attribute` + ); + link.scrollIntoView(); + link.click(); +} diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors.html b/devtools/client/inspector/computed/test/doc_matched_selectors.html new file mode 100644 index 0000000000..8fe007409c --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_matched_selectors.html @@ -0,0 +1,28 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + .matched1, .matched2, .matched3, .matched4, .matched5 { + color: #000; + } + + div { + position: absolute; + top: 40px; + left: 20px; + border: 1px solid #000; + color: #111; + width: 100px; + height: 50px; + } + </style> + </head> + <body> + inspectstyle($("test")); + <div id="test" class="matched1 matched2 matched3 matched4 matched5">Test div</div> + <div id="dummy"> + <div></div> + </div> + </body> +</html> diff --git a/devtools/client/inspector/computed/test/doc_media_queries.html b/devtools/client/inspector/computed/test/doc_media_queries.html new file mode 100644 index 0000000000..819e1ea7aa --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_media_queries.html @@ -0,0 +1,21 @@ +<html> +<head> + <title>test</title> + <style> + div { + width: 1000px; + height: 100px; + background-color: #f00; + } + + @media screen and (min-width: 1px) { + div { + width: 200px; + } + } + </style> +</head> +<body> +<div></div> +</body> +</html> diff --git a/devtools/client/inspector/computed/test/doc_pseudoelement.html b/devtools/client/inspector/computed/test/doc_pseudoelement.html new file mode 100644 index 0000000000..6145d4bf1b --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_pseudoelement.html @@ -0,0 +1,131 @@ +<!-- Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> + <head> + <style> + +body { + color: #333; +} + +.box { + float:left; + width: 128px; + height: 128px; + background: #ddd; + padding: 32px; + margin: 32px; + position:relative; +} + +.box:first-line { + color: orange; + background: red; +} + +.box:first-letter { + color: green; +} + +* { + cursor: default; +} + +nothing { + cursor: pointer; +} + +p::-moz-selection { + color: white; + background: black; +} +p::selection { + color: white; + background: black; +} + +p:first-line { + background: blue; +} +p:first-letter { + color: red; + font-size: 130%; +} + +.box:before { + background: green; + content: " "; + position: absolute; + height:32px; + width:32px; +} + +.box:after { + background: red; + content: " "; + position: absolute; + border-radius: 50%; + height:32px; + width:32px; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; +} + +.topleft:before { + top:0; + left:0; +} + +.topleft:first-line { + color: orange; +} +.topleft::selection { + color: orange; +} + +.topright:before { + top:0; + right:0; +} + +.bottomright:before { + bottom:10px; + right:10px; + color: red; +} + +.bottomright:before { + bottom:0; + right:0; +} + +.bottomleft:before { + bottom:0; + left:0; +} + + </style> + </head> + <body> + <h1>ruleview pseudoelement($("test"));</h1> + + <div id="topleft" class="box topleft"> + <p>Top Left<br />Position</p> + </div> + + <div id="topright" class="box topright"> + <p>Top Right<br />Position</p> + </div> + + <div id="bottomright" class="box bottomright"> + <p>Bottom Right<br />Position</p> + </div> + + <div id="bottomleft" class="box bottomleft"> + <p>Bottom Left<br />Position</p> + </div> + + </body> +</html> diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.css b/devtools/client/inspector/computed/test/doc_sourcemaps.css new file mode 100644 index 0000000000..f62fbda21e --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_sourcemaps.css @@ -0,0 +1,7 @@ +div { + color: #ff0066; } + +span { + background-color: #EEE; } + +/*# sourceMappingURL=doc_sourcemaps.css.map */ diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.css.map b/devtools/client/inspector/computed/test/doc_sourcemaps.css.map new file mode 100644 index 0000000000..0f7486fd91 --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_sourcemaps.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAGA,GAAI;EACF,KAAK,EAHU,OAAI;;AAMrB,IAAK;EACH,gBAAgB,EAAE,IAAI", +"sources": ["doc_sourcemaps.scss"], +"names": [], +"file": "doc_sourcemaps.css" +} diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.html b/devtools/client/inspector/computed/test/doc_sourcemaps.html new file mode 100644 index 0000000000..0014e55fe9 --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_sourcemaps.html @@ -0,0 +1,11 @@ +<!doctype html> +<html> +<head> + <title>testcase for testing CSS source maps</title> + <link rel="stylesheet" type="text/css" href="simple.css"/> + <link rel="stylesheet" type="text/css" href="doc_sourcemaps.css"/> +</head> +<body> + <div>source maps <span>testcase</span></div> +</body> +</html> diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.scss b/devtools/client/inspector/computed/test/doc_sourcemaps.scss new file mode 100644 index 0000000000..0ff6c471bb --- /dev/null +++ b/devtools/client/inspector/computed/test/doc_sourcemaps.scss @@ -0,0 +1,10 @@ + +$paulrougetpink: #f06; + +div { + color: $paulrougetpink; +} + +span { + background-color: #EEE; +}
\ No newline at end of file diff --git a/devtools/client/inspector/computed/test/head.js b/devtools/client/inspector/computed/test/head.js new file mode 100644 index 0000000000..6d9a0f5b01 --- /dev/null +++ b/devtools/client/inspector/computed/test/head.js @@ -0,0 +1,267 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +/* eslint no-unused-vars: [2, {"vars": "local"}] */ + +"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"); +}); + +/** + * Dispatch the copy event on the given element + */ +function fireCopyEvent(element) { + const evt = element.ownerDocument.createEvent("Event"); + evt.initEvent("copy", true, true); + element.dispatchEvent(evt); +} + +/** + * Get references to the name and value span nodes corresponding to a given + * property name in the computed-view + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {String} name + * The name of the property to retrieve + * @return an object {nameSpan, valueSpan} + */ +function getComputedViewProperty(view, name) { + let prop; + for (const property of view.styleDocument.querySelectorAll( + "#computed-container .computed-property-view" + )) { + const nameSpan = property.querySelector(".computed-property-name"); + const valueSpan = property.querySelector(".computed-property-value"); + + if (nameSpan.firstChild.textContent === name) { + prop = { nameSpan, valueSpan }; + break; + } + } + return prop; +} + +/** + * Get an instance of PropertyView from the computed-view. + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {String} name + * The name of the property to retrieve + * @return {PropertyView} + */ +function getComputedViewPropertyView(view, name) { + let propView; + for (const propertyView of view.propertyViews) { + if (propertyView._propertyInfo.name === name) { + propView = propertyView; + break; + } + } + return propView; +} + +/** + * Get a reference to the computed-property-content element for a given property name in + * the computed-view. + * A computed-property-content element always follows (nextSibling) the property itself + * and is only shown when the twisty icon is expanded on the property. + * A computed-property-content element contains matched rules, with selectors, + * properties, values and stylesheet links + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {String} name + * The name of the property to retrieve + * @return {Promise} A promise that resolves to the property matched rules + * container + */ +var getComputedViewMatchedRules = async function (view, name) { + let expander; + let propertyContent; + for (const property of view.styleDocument.querySelectorAll( + "#computed-container .computed-property-view" + )) { + const nameSpan = property.querySelector(".computed-property-name"); + if (nameSpan.firstChild.textContent === name) { + expander = property.querySelector(".computed-expandable"); + propertyContent = property.nextSibling; + break; + } + } + + if (!expander.hasAttribute("open")) { + // Need to expand the property + const onExpand = view.inspector.once("computed-view-property-expanded"); + expander.click(); + await onExpand; + + await waitFor(() => expander.hasAttribute("open")); + } + + return propertyContent; +}; + +/** + * Get the text value of the property corresponding to a given name in the + * computed-view + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {String} name + * The name of the property to retrieve + * @return {String} The property value + */ +function getComputedViewPropertyValue(view, name, propertyName) { + return getComputedViewProperty(view, name, propertyName).valueSpan + .textContent; +} + +/** + * Expand a given property, given its index in the current property list of + * the computed view + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {Number} index + * The index of the property to be expanded + * @return a promise that resolves when the property has been expanded, or + * rejects if the property was not found + */ +function expandComputedViewPropertyByIndex(view, index) { + info("Expanding property " + index + " in the computed view"); + const expandos = view.styleDocument.querySelectorAll(".computed-expandable"); + if (!expandos.length || !expandos[index]) { + return Promise.reject(); + } + + const onExpand = view.inspector.once("computed-view-property-expanded"); + expandos[index].click(); + return onExpand; +} + +/** + * Get a rule-link from the computed-view given its index + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {Number} index + * The index of the link to be retrieved + * @return {DOMNode} The link at the given index, if one exists, null otherwise + */ +function getComputedViewLinkByIndex(view, index) { + const links = view.styleDocument.querySelectorAll( + ".rule-link .computed-link" + ); + return links[index]; +} + +/** + * Trigger the select all action in the computed view. + * + * @param {CssComputedView} view + * The instance of the computed view panel + */ +function selectAllText(view) { + info("Selecting all the text"); + view.contextMenu._onSelectAll(); +} + +/** + * Select all the text, copy it, and check the content in the clipboard. + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {String} expectedPattern + * A regular expression used to check the content of the clipboard + */ +async function copyAllAndCheckClipboard(view, expectedPattern) { + selectAllText(view); + const contentDoc = view.styleDocument; + const prop = contentDoc.querySelector( + "#computed-container .computed-property-view" + ); + + try { + info("Trigger a copy event and wait for the clipboard content"); + await waitForClipboardPromise( + () => fireCopyEvent(prop), + () => checkClipboard(expectedPattern) + ); + } catch (e) { + failClipboardCheck(expectedPattern); + } +} + +/** + * Select some text, copy it, and check the content in the clipboard. + * + * @param {CssComputedView} view + * The instance of the computed view panel + * @param {Object} positions + * The start and end positions of the text to be selected. This must be an object + * like this: + * { start: {prop: 1, offset: 0}, end: {prop: 3, offset: 5} } + * @param {String} expectedPattern + * A regular expression used to check the content of the clipboard + */ +async function copySomeTextAndCheckClipboard(view, positions, expectedPattern) { + info("Testing selection copy"); + + const contentDocument = view.styleDocument; + const props = contentDocument.querySelectorAll( + "#computed-container .computed-property-view" + ); + + info("Create the text selection range"); + const range = contentDocument.createRange(); + range.setStart(props[positions.start.prop], positions.start.offset); + range.setEnd(props[positions.end.prop], positions.end.offset); + contentDocument.defaultView.getSelection().addRange(range); + + try { + info("Trigger a copy event and wait for the clipboard content"); + await waitForClipboardPromise( + () => fireCopyEvent(props[0]), + () => checkClipboard(expectedPattern) + ); + } catch (e) { + failClipboardCheck(expectedPattern); + } +} + +function checkClipboard(expectedPattern) { + const actual = SpecialPowers.getClipboardData("text/plain"); + const expectedRegExp = new RegExp(expectedPattern, "g"); + return expectedRegExp.test(actual); +} + +function failClipboardCheck(expectedPattern) { + // Format expected text for comparison + const terminator = Services.appinfo.OS == "WINNT" ? "\r\n" : "\n"; + expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator); + expectedPattern = expectedPattern.replace(/\\\(/g, "("); + expectedPattern = expectedPattern.replace(/\\\)/g, ")"); + + let actual = SpecialPowers.getClipboardData("text/plain"); + + // Trim the right hand side of our strings. This is because expectedPattern + // accounts for windows sometimes adding a newline to our copied data. + expectedPattern = expectedPattern.trimRight(); + actual = actual.trimRight(); + + dump( + "TEST-UNEXPECTED-FAIL | Clipboard text does not match expected ... " + + "results (escaped for accurate comparison):\n" + ); + info("Actual: " + escape(actual)); + info("Expected: " + escape(expectedPattern)); +} |