Bug 1500019 - Wait for the inline-style rule to be updated before proceeding; r=gl

Differential Revision: https://phabricator.services.mozilla.com/D9368

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js

@@ -15,7 +15,7 @@ add_task(async function() {
   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);
@@ -24,21 +24,41 @@ add_task(async function() {
   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");
   }
 }