Bug 1500019 - Wait for the inline-style rule to be updated before proceeding. r=gl, a=test-only
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 24 Oct 2018 03:55:43 +0000
changeset 500823 5c5acf59e04cae2eb9ee453b42bb9308273676c8
parent 500822 640c972a31a3868bfe328d6071e864559f6fbbeb
child 500824 cad7fc1b8cf23646661342472c514c731760f3ad
push id1864
push userffxbld-merge
push dateMon, 03 Dec 2018 15:51:40 +0000
treeherdermozilla-release@f040763d99ad [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl, test-only
bugs1500019
milestone64.0
Bug 1500019 - Wait for the inline-style rule to be updated before proceeding. r=gl, a=test-only Differential Revision: https://phabricator.services.mozilla.com/D9368
devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
@@ -10,35 +10,55 @@
 const TEST_URI = URL_ROOT + "doc_content_stylesheet.html";
 
 add_task(async function() {
   await addTab(TEST_URI);
   const {inspector, view} = await openRuleView();
   await selectNode("#target", inspector);
 
   info("Setting a font-weight property on all rules");
-  await setPropertyOnAllRules(view);
+  await setPropertyOnAllRules(view, inspector);
 
   info("Reselecting the element");
   await selectNode("body", inspector);
   await selectNode("#target", inspector);
 
   checkPropertyOnAllRules(view);
 });
 
-async function setPropertyOnAllRules(view) {
-  // Wait for the properties to be properly created on the backend and for the
-  // view to be updated.
-  const onRefreshed = view.once("ruleview-refreshed");
-  for (const rule of view._elementStyle.rules) {
-    rule.editor.addProperty("font-weight", "bold", "", true);
+async function setPropertyOnAllRules(view, inspector) {
+  // Set the inline style rule first independently because it needs to wait for specific
+  // events and the DOM mutation that it causes refreshes the rules view, so we need to
+  // get the list of rules again later.
+  info("Adding font-weight:bold in the inline style rule");
+  const inlineStyleRuleEditor = view._elementStyle.rules[0].editor;
+
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewRefreshed = view.once("ruleview-refreshed");
+
+  inlineStyleRuleEditor.addProperty("font-weight", "bold", "", true);
+
+  await Promise.all([onMutation, onRuleViewRefreshed]);
+
+  // Now set the other rules after having retrieved the list.
+  const allRules = view._elementStyle.rules;
+
+  for (let i = 1; i < allRules.length; i++) {
+    info(`Adding font-weight:bold in rule ${i}`);
+    const rule = allRules[i];
+    const ruleEditor = rule.editor;
+
+    const onRuleViewChanged = view.once("ruleview-changed");
+
+    ruleEditor.addProperty("font-weight", "bold", "", true);
+
+    await onRuleViewChanged;
   }
-  await onRefreshed;
 }
 
 function checkPropertyOnAllRules(view) {
   for (const rule of view._elementStyle.rules) {
-    const lastRule = rule.textProps[rule.textProps.length - 1];
+    const lastProperty = rule.textProps[rule.textProps.length - 1];
 
-    is(lastRule.name, "font-weight", "Last rule name is font-weight");
-    is(lastRule.value, "bold", "Last rule value is bold");
+    is(lastProperty.name, "font-weight", "Last property name is font-weight");
+    is(lastProperty.value, "bold", "Last property value is bold");
   }
 }