DevTools: Split creating inspector stylesheet and adding a new rule into stylesheet in protocol.

LayoutTests/inspector/elements/styles/styles-new-API.html

Index: LayoutTests/inspector/elements/styles/styles-new-API.html
diff --git a/LayoutTests/inspector/elements/styles/styles-new-API.html b/LayoutTests/inspector/elements/styles/styles-new-API.html
index ee8c4c720433ae491e215784475653e311c7ef08..996bb67557b56c4cd91b039c8f9e39d73cadcacc 100644
--- a/LayoutTests/inspector/elements/styles/styles-new-API.html
+++ b/LayoutTests/inspector/elements/styles/styles-new-API.html
@@ -241,7 +241,7 @@ function test()
                 InspectorTest.completeTest();
             }
 
-            function didPatchStyleSheet(styleSheedId)
+            function didPatchStyleSheet(styleSheetId)
             {
                 CSSAgent.getMatchedStylesForNode(bodyId, false, false, onMatchedStylesForNode);
             }
@@ -296,7 +296,18 @@ function test()
                 CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText);
             }
 
-            CSSAgent.addRule(bodyId, "body", ruleAdded);
+            function viaInspectorStyleSheetCreated(error, styleSheetId)
+            {
+                if (error) {
+                    InspectorTest.addResult("error: " + error);
+                    InspectorTest.completeTest();
+                    return;
+                }
+                CSSAgent.addRule(styleSheetId, "body", ruleAdded);
+            }
+
+            var frameId = WebInspector.resourceTreeModel.mainFrame.id;
+            CSSAgent.createStyleSheet(frameId, viaInspectorStyleSheetCreated.bind(this));
         },
 
         function test_disableProperty(next)