DevTools: [SSP] Implement adding new rule in user stylesheet

LayoutTests/inspector/elements/styles/styles-add-new-rule-colon.html

Index: LayoutTests/inspector/elements/styles/styles-add-new-rule-colon.html
diff --git a/LayoutTests/inspector/elements/styles/styles-add-new-rule-colon.html b/LayoutTests/inspector/elements/styles/styles-add-new-rule-colon.html
index ceb346d2300b0c934574dfcd5bf54b5ea99a5fd2..57f5f513daae1f0a7067eef143fd397338551fb9 100644
--- a/LayoutTests/inspector/elements/styles/styles-add-new-rule-colon.html
+++ b/LayoutTests/inspector/elements/styles/styles-add-new-rule-colon.html
@@ -44,8 +44,12 @@ function test()
     function step4()
     {
         // Click "Add new rule".
-        document.getElementById("add-style-button-test-id").click();
-        InspectorTest.selectNodeAndWaitForStyles("inspected", step5);
+        InspectorTest.addNewRule(null, onRuleAdded);
+
+        function onRuleAdded()
+        {
+            InspectorTest.selectNodeAndWaitForStyles("inspected", step5);

[vsevik, 2014/08/12 15:53:54]

Nit: It is possible that you don't need to select node here - I believe this was
done to implicitly steal focus from the edit field.

[lushnikov, 2014/08/12 15:57:02]

We dump the styles of the element in step5()

[vsevik, 2014/08/13 06:47:06]

I mean you select 'other' again then and dump its styles. We could probably
avoid one extra node selection. This is minor though.

[lushnikov, 2014/08/13 09:10:48]

This also waits for new styles.. I'd like to leave as-is in the patch.

+        }
     }
 
     function step5()