[tbb-commits] [tor-browser] 144/311: Bug 1757694 - [devtools] Turn `getPropertiesForRuleIndex` into an async function. r=jdescottes. a=test-only DONTBUILD
gitolite role
git at cupani.torproject.org
Tue Apr 26 15:29:04 UTC 2022
This is an automated email from the git hooks/post-receive script.
pierov pushed a commit to branch geckoview-99.0.1-11.0-1
in repository tor-browser.
commit cc25a15dbcc2bc3ca6d070cbf5207e20d83e0f00
Author: Nicolas Chevobbe <nchevobbe at mozilla.com>
AuthorDate: Mon Mar 14 06:12:04 2022 +0000
Bug 1757694 - [devtools] Turn `getPropertiesForRuleIndex` into an async function. r=jdescottes. a=test-only DONTBUILD
Differential Revision: https://phabricator.services.mozilla.com/D140842
---
.../test/browser_rules_color_scheme_simulation.js | 25 ++++++++-------
.../browser_rules_color_scheme_simulation_rdm.js | 15 +++++----
.../browser_rules_inactive_css_display-justify.js | 4 +--
.../browser_rules_inactive_css_split-condition.js | 2 +-
.../test/browser_rules_print_media_simulation.js | 11 ++++---
devtools/client/inspector/rules/test/head.js | 37 ++++++++++------------
6 files changed, 49 insertions(+), 45 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
index 6be0f0d59cf47..3d345b2b1fe39 100644
--- a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
@@ -32,20 +32,23 @@ add_task(async function() {
);
// Define functions checking if the rule view display the expected property.
- const divHasDefaultStyling = () =>
- getPropertiesForRuleIndex(view, 1).has("background-color:yellow");
- const divHasDarkSchemeStyling = () =>
- getPropertiesForRuleIndex(view, 1).has("background-color:darkblue");
- const iframeElHasDefaultStyling = () =>
- getPropertiesForRuleIndex(view, 1).has("background:cyan");
- const iframeHasDarkSchemeStyling = () =>
- getPropertiesForRuleIndex(view, 1).has("background:darkred");
+ const divHasDefaultStyling = async () =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+ const divHasDarkSchemeStyling = async () =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
+ const iframeElHasDefaultStyling = async () =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background:cyan");
+ const iframeHasDarkSchemeStyling = async () =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background:darkred");
info(
"Select the div that will change according to conditions in prefered color scheme"
);
await selectNode("div", inspector);
- ok(divHasDefaultStyling(), "The rule view shows the expected initial rule");
+ ok(
+ await divHasDefaultStyling(),
+ "The rule view shows the expected initial rule"
+ );
info("Click on the dark button");
darkButton.click();
@@ -68,7 +71,7 @@ add_task(async function() {
await selectNodeInFrames(["iframe", "html"], inspector);
ok(
- iframeHasDarkSchemeStyling(),
+ await iframeHasDarkSchemeStyling(),
"The simulation is also applied on the remote iframe"
);
is(
@@ -116,7 +119,7 @@ add_task(async function() {
await selectNode("div", inspector);
await waitFor(() => view.element.children[1]);
ok(
- divHasDarkSchemeStyling(),
+ await divHasDarkSchemeStyling(),
"dark mode is still simulated after reloading the page"
);
is(
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
index d718e1bcb9639..9577f196b1d4a 100644
--- a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
@@ -26,16 +26,19 @@ add_task(async function() {
);
// Define functions checking if the rule view display the expected property.
- const divHasDefaultStyling = () =>
- getPropertiesForRuleIndex(view, 1).has("background-color:yellow");
- const divHasDarkSchemeStyling = () =>
- getPropertiesForRuleIndex(view, 1).has("background-color:darkblue");
+ const divHasDefaultStyling = async () =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+ const divHasDarkSchemeStyling = async () =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
info(
"Select the div that will change according to conditions in prefered color scheme"
);
await selectNode("div", inspector);
- ok(divHasDefaultStyling(), "The rule view shows the expected initial rule");
+ ok(
+ await divHasDefaultStyling(),
+ "The rule view shows the expected initial rule"
+ );
info("Open responsive design mode");
let { toolWindow } = await ResponsiveUIManager.openIfNeeded(
@@ -65,7 +68,7 @@ add_task(async function() {
await wait(1000);
ok(isButtonChecked(darkButton), "button is still checked");
ok(
- divHasDarkSchemeStyling(),
+ await divHasDarkSchemeStyling(),
"dark mode color-scheme simulation is still enabled"
);
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
index 1e787db14c124..3e5d9e0a1dcaf 100644
--- a/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
@@ -31,7 +31,7 @@ add_task(async function() {
info("Enable display:flex and check that justify-content becomes active");
await checkDeclarationIsInactive(view, 1, justifyContent);
await toggleDeclaration(view, 1, displayFlex);
- checkDeclarationIsActive(view, 1, justifyContent);
+ await checkDeclarationIsActive(view, 1, justifyContent);
info(
"Rename justify-content to justify-items and check that it becomes inactive"
@@ -43,5 +43,5 @@ add_task(async function() {
"Rename display:flex to display:grid and check that justify-items becomes active"
);
await updateDeclaration(view, 1, displayFlex, displayGrid);
- checkDeclarationIsActive(view, 1, justifyItems);
+ await checkDeclarationIsActive(view, 1, justifyItems);
});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
index 514dee4231bbe..3e6d03ce3e181 100644
--- a/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
@@ -25,7 +25,7 @@ add_task(async function() {
await selectNode("div", inspector);
- checkDeclarationIsActive(view, 1, { gap: "1em" });
+ await checkDeclarationIsActive(view, 1, { gap: "1em" });
await toggleDeclaration(view, 2, { display: "grid" });
await checkDeclarationIsInactive(view, 1, { gap: "1em" });
});
diff --git a/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js b/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
index 680ae74407d0e..67a2ec2d881d7 100644
--- a/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
+++ b/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
@@ -22,12 +22,15 @@ add_task(async function() {
// Helper to retrieve the background-color property of the selected element
// All the test elements are expected to have a single background-color rule
// for this test.
- const ruleViewHasColor = color =>
- getPropertiesForRuleIndex(view, 1).has("background-color:" + color);
+ const ruleViewHasColor = async color =>
+ (await getPropertiesForRuleIndex(view, 1)).has("background-color:" + color);
info("Select a div that will change according to print simulation");
await selectNode("div", inspector);
- ok(ruleViewHasColor("#f00"), "The rule view shows the expected initial rule");
+ ok(
+ await ruleViewHasColor("#f00"),
+ "The rule view shows the expected initial rule"
+ );
is(
getRuleViewAncestorRulesDataElementByIndex(view, 1),
null,
@@ -55,7 +58,7 @@ add_task(async function() {
await selectNodeInFrames(["iframe", "html"], inspector);
ok(
- ruleViewHasColor("#0ff"),
+ await ruleViewHasColor("#0ff"),
"The simulation is also applied on the remote iframe"
);
is(
diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js
index 90f56506401f9..59827260f415e 100644
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -687,7 +687,7 @@ async function openEyedropper(view, swatch) {
* @param {boolean} addCompatibilityData
* Optional argument to add compatibility dat with the property data
*
- * @returns A map containing stringified property declarations e.g.
+ * @returns A Promise that resolves with a Map containing stringified property declarations e.g.
* [
* {
* "color:red":
@@ -696,20 +696,21 @@ async function openEyedropper(view, swatch) {
* propertyValue: "red",
* warning: "This won't work",
* used: true,
- * isCompatible: Promise<boolean>,
+ * compatibilityData: {
+ * isCompatible: true,
+ * },
* }
* },
* ...
* ]
*/
-function getPropertiesForRuleIndex(
+async function getPropertiesForRuleIndex(
view,
ruleIndex,
addCompatibilityData = false
) {
const declaration = new Map();
const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
-
for (const currProp of ruleEditor.rule.textProps) {
const icon = currProp.editor.unusedState;
const unused = currProp.editor.element.classList.contains("unused");
@@ -717,7 +718,7 @@ function getPropertiesForRuleIndex(
let compatibilityData;
let compatibilityIcon;
if (addCompatibilityData) {
- compatibilityData = currProp.isCompatible();
+ compatibilityData = await currProp.isCompatible();
compatibilityIcon = currProp.editor.compatibilityState;
}
@@ -730,7 +731,6 @@ function getPropertiesForRuleIndex(
used: !unused,
...(addCompatibilityData
? {
- isCompatible: compatibilityData.then(data => data.isCompatible),
compatibilityData,
compatibilityIcon,
}
@@ -854,23 +854,18 @@ async function checkDeclarationCompatibility(
declaration,
expected
) {
- const declarations = getPropertiesForRuleIndex(view, ruleIndex, true);
+ const declarations = await getPropertiesForRuleIndex(view, ruleIndex, true);
const [[name, value]] = Object.entries(declaration);
const dec = `${name}:${value}`;
- const { isCompatible, compatibilityData } = declarations.get(dec);
- const compatibilityStatus = await isCompatible;
- // Await on compatibilityData even if the rule is
- // compatible. Otherwise, the test browser may close
- // while waiting for the response from the compatibility actor.
- const messageId = (await compatibilityData).msgId;
+ const { compatibilityData } = declarations.get(dec);
is(
!expected,
- compatibilityStatus,
+ compatibilityData.isCompatible,
`"${dec}" has the correct compatibility status in the payload`
);
- is(messageId, expected, `"${dec}" has expected message ID`);
+ is(compatibilityData.msgId, expected, `"${dec}" has expected message ID`);
if (expected) {
await checkInteractiveTooltip(
@@ -894,7 +889,7 @@ async function checkDeclarationCompatibility(
* An object representing the declaration e.g. { color: "red" }.
*/
async function checkDeclarationIsInactive(view, ruleIndex, declaration) {
- const declarations = getPropertiesForRuleIndex(view, ruleIndex);
+ const declarations = await getPropertiesForRuleIndex(view, ruleIndex);
const [[name, value]] = Object.entries(declaration);
const dec = `${name}:${value}`;
const { used, warning } = declarations.get(dec);
@@ -920,8 +915,8 @@ async function checkDeclarationIsInactive(view, ruleIndex, declaration) {
* @param {Object} declaration
* An object representing the declaration e.g. { color: "red" }.
*/
-function checkDeclarationIsActive(view, ruleIndex, declaration) {
- const declarations = getPropertiesForRuleIndex(view, ruleIndex);
+async function checkDeclarationIsActive(view, ruleIndex, declaration) {
+ const declarations = await getPropertiesForRuleIndex(view, ruleIndex);
const [[name, value]] = Object.entries(declaration);
const dec = `${name}:${value}`;
const { used, warning } = declarations.get(dec);
@@ -944,7 +939,7 @@ function checkDeclarationIsActive(view, ruleIndex, declaration) {
*/
async function checkInteractiveTooltip(view, type, ruleIndex, declaration) {
// Get the declaration
- const declarations = getPropertiesForRuleIndex(
+ const declarations = await getPropertiesForRuleIndex(
view,
ruleIndex,
type === "compatibility-tooltip"
@@ -960,7 +955,7 @@ async function checkInteractiveTooltip(view, type, ruleIndex, declaration) {
} else {
const { compatibilityIcon, compatibilityData } = declarations.get(dec);
icon = compatibilityIcon;
- data = await compatibilityData;
+ data = compatibilityData;
}
// Get the tooltip.
@@ -1109,7 +1104,7 @@ async function runInactiveCSSTests(view, inspector, tests) {
for (const [name, value] of Object.entries(
activeDeclarations.declarations
)) {
- checkDeclarationIsActive(view, activeDeclarations.ruleIndex, {
+ await checkDeclarationIsActive(view, activeDeclarations.ruleIndex, {
[name]: value,
});
}
--
To stop receiving notification emails like this one, please contact
the administrator of this repository.
More information about the tbb-commits
mailing list