diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js b/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
index 7d8fd79f208e..e1074054030f 100644
--- a/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
@@ -362,12 +362,20 @@ WI.DOMNodeStyles = class DOMNodeStyles extends WI.Object
     {
         selector = selector || this._node.appropriateSelectorFor(true);
 
+        let result = new WI.WrappedPromise;
         let target = WI.assumingMainTarget();
 
         function completed()
         {
             target.DOMAgent.markUndoableState();
-            this.refresh();
+
+            // Wait for the refresh promise caused by injecting an empty inspector stylesheet to resolve
+            // (another call will be ignored while one is still pending),
+            // then refresh again to get the latest matching styles which include the newly created rule.
+            if (this._pendingRefreshTask)
+                this._pendingRefreshTask.then(this.refresh.bind(this));
+            else
+                this.refresh();
         }
 
         function styleChanged(error, stylePayload)
@@ -380,8 +388,12 @@ WI.DOMNodeStyles = class DOMNodeStyles extends WI.Object
 
         function addedRule(error, rulePayload)
         {
-            if (error)
+            if (error){
+                result.reject(error);
                 return;
+            }
+
+            result.resolve(rulePayload);
 
             if (!text || !text.length) {
                 completed.call(this);
@@ -403,6 +415,8 @@ WI.DOMNodeStyles = class DOMNodeStyles extends WI.Object
             inspectorStyleSheetAvailable.call(this, WI.cssManager.styleSheetForIdentifier(styleSheetId));
         else
             WI.cssManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
+
+        return result.promise;
     }
 
     effectivePropertyForName(name)
diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
index 2d785b712f1d..b606225a9ebf 100644
--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js
@@ -38,6 +38,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
         this._headerMap = new Map;
         this._sections = [];
         this._newRuleSelector = null;
+        this._newRuleStyleId = null;
         this._ruleMediaAndInherticanceList = [];
         this._propertyToSelectAndHighlight = null;
         this._filterText = null;
@@ -210,7 +211,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
     spreadsheetCSSStyleDeclarationSectionAddNewRule(section, selector, text)
     {
         this._newRuleSelector = selector;
-        this.nodeStyles.addRule(this._newRuleSelector, text);
+        this.nodeStyles.addRule(this._newRuleSelector, text).then((rulePayload) => {this._newRuleStyleId = rulePayload.style.styleId;});
     }
 
     spreadsheetCSSStyleDeclarationSectionSetAllPropertyVisibilityMode(section, propertyVisibilityMode)
@@ -280,7 +281,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
                 style[SpreadsheetRulesStyleDetailsPanel.StyleSectionSymbol] = section;
             }
 
-            if (this._newRuleSelector === style.selectorText && style.enabledProperties.length === 0)
+            if (this._newRuleSelector === style.selectorText && style.enabledProperties.length === 0 && Object.shallowEqual(this._newRuleStyleId, style.id))
                 section.startEditingRuleSelector();
 
             addSection(section);
@@ -327,6 +328,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
         addPseudoStyles();
 
         this._newRuleSelector = null;
+        this._newRuleStyleId = null;
 
         this.element.append(this._emptyFilterResultsElement);
 
@@ -359,7 +361,7 @@ WI.SpreadsheetRulesStyleDetailsPanel = class SpreadsheetRulesStyleDetailsPanel e
         this._newRuleSelector = this.nodeStyles.node.appropriateSelectorFor(justSelector);
 
         const text = "";
-        this.nodeStyles.addRule(this._newRuleSelector, text, stylesheetId);
+        this.nodeStyles.addRule(this._newRuleSelector, text, stylesheetId).then((rulePayload) => {this._newRuleStyleId = rulePayload.style.styleId;});
     }
 
     _handleSectionSelectorOrGroupingWillChange(event)